/* CSS Document */

h1 {
	font-family:Raleway;
	color:#fff;
}

body {
	background: #fff url(reumatologia.jpg) no-repeat center center;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	overflow: auto;
	overflow-x:hidden;
	padding: 0;
	color:#fff;
    margin: 0;
    font-family: Raleway !important;
}

ul li {
	list-style:none;
	background: url(check.png) no-repeat left center;
	background-size:6.5%;
}

div {
	display:block;
}

center {padding:0 10%;}

.arriba {
	clear:both;
	width:100%;
	height:100px;
	padding: 0;
	background-color:rgba(255,255,255, 1);
}

.contenedor {
	max-width:1170px;
	display:block;
	height:auto;
	overflow:auto;
	margin-left:5%;
	margin-right:5%;
}

.datos {
	width:41%;
	float:right;
}

.texto-sup {
	color:#999;
	font-size:13px;
	float:left;
	font-family:Raleway;
	margin:1% 1% 0 0;
	background:#fff;
	padding:18px;
	border-radius: 3px;
}

.llamar {
	display:none;
}

.numero {
	margin: 5% 0 0 0;
    font-size: 45px;
    font-weight: bold;
	float:right;
    font-family: 'Montserrat';
}

.numero a {
	text-decoration:none;
	color:#2B3B8A;
}

.pagos {
	margin:0 10% 0 0;
}

.izq {
	float: right;
	width: 45%;
	margin-bottom: 2%; /*50px*/
	height: auto;
	margin-left:3%;
	margin-right:4%;
	text-align:left;
	background-color: rgba(255,255,255,0.6); /*rgba(83,159,203,0.5);*/
	padding:3% 2%;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
}

.telefono {
	margin-top:5%;
}

.izq p {
	font-family: Raleway;
	font-size:16px;
}

.izq ul li {
	list-style:none;
	padding-left:30px;
}

.mov {padding: 2% 30%;}
.mov2 {padding-left:0px;}

.derecho {
	float:left;
	width:30%;
	margin-top:2%;
	margin-bottom: 30px; /*50px*/
	margin-left: 10%;
	height:auto;
	padding:10px;
	vertical-align:middle;
}

.fondo-form {
	width: 90%;
    padding-top: 14%;
    background: rgba(46,62,139,0.8) url(fondo-form.png) no-repeat;
    background-size: 100%;
	padding-bottom:1%;
	border-radius:8px;
}

.bajo {
	clear:both;
	width:100%;
	height:auto;
	padding: 10px 0 10px 0;
	background-color:rgba(0,0,0, 0.2);
	overflow:auto;
}

.texto-bajo {font-size:15px;font-family:Lato;text-align:center;color:#f8f8f8;margin:2% 0 0;float:right;width:50%;display:block;text-transform:uppercase;padding:1%;border-radius:5px;}
.tb2 {width:20% !important; color:#fff !important;padding:0;margin-right:2%;margin-top:1%;margin-left:0;background:transparent;border-radius:5px;}
.tb1 {width:20% !important;padding:1%;float:left;border-radius:5px;margin-right:0;margin-left:2%;}


/** ==== CSS Form ==== **/

form {
	margin:0;
	padding:0;
	border:0;
}

fieldset {
	margin:0;
	padding:0;
	border:0;
}

input, textarea, button, select {
	font-family: 'Open Sans', sans-serif!important;
}

textarea, input[type="text"], input[type="email"] {	
	display: inline-block;
	text-transform:capitalize;
    height: 20px;
    padding: 4px 6px;
	margin: 5px 9.5%;
    margin-bottom: 5px;
    font-size: 14px;
    line-height: 20px;
    color: #7d7d7d;
    vertical-align: middle;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
	background-color: #f1f1f1;
    border: 1px solid #cccccc;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
    -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
    -o-transition: border linear 0.2s, box-shadow linear 0.2s;
    transition: border linear 0.2s, box-shadow linear 0.2s;
}

textarea, input[type="email"] {text-transform:none !important;}

::-webkit-input-placeholder { color: #999; font-family:'Lato-Light'; } /* WebKit */
:-moz-placeholder { color: #999; font-family:'Lato-Light'; } /* Firefox 18- */
::-moz-placeholder { color: #999; font-family:'Lato-Light'; } /* Firefox 19+ */
:-ms-input-placeholder { color: #999; font-family:'Lato-Light'; } /* IE 10+ */

.input {
	width:80%;
	height:30px !important;
}

.textarea {
	height:130px; !important;
	width:80%;
}

.buton {
	display:inline-block;
	margin:5px 11%;
	text-decoration:none;
	float:left;	
	font-family: 'Open Sans', sans-serif;
	border:0;	
	transition: all 400ms ease 0s;
	-webkit-transition: all 400ms ease 0s;
	color: #666666;
    background: #fff;
	line-height: 34px;
    font-size: 85%;
    padding: 0px 10%;
    font-weight: 600;
	cursor: pointer;
    -webkit-appearance: button;
	border-radius:4px;
}

.buton:hover {background:transparent;color:#fff; font-weight:bolder;border:2px solid #fff;}

.btn-wsp {
    display: block;
    font-size: 12px;
    text-align: center;
    right: 10px;
    bottom: 25px;
    background: linear-gradient(#01c404, #009800);
    color: #fff;
    padding: 10px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    position: fixed;
}

.fa-brands.iconoWsp {
    font-size: 55px;
    vertical-align: middle;
    line-height: 45px;
}

/** estilos responsive**/

@media only screen and (max-width:240px) {
	
	.izq {width:90%;display:block; margin-bottom:0px;margin-top:18%; padding:0; margin-left:5%; margin-right:5%;}
	.derecho {width:90%;display:block;margin-left:0px;padding:5%;}
	.fondo-form {width:100%;}
	.izq ul li {padding-left:0px;margin-left:0px;background-size:7%;}
	.mov2 li{padding-left:0px;}
	.mov {padding:2% 10%;}
	.telefono { background:#111111 url(fondo-telefono.jpg) no-repeat;width:100%;background-size:100%;padding:2.5% 0;}
	.texto-bajo {color:#111;text-align:left;font-size:10px !important; width:55% !important;display:block;padding-left:2%;}
	.tb2 { width:30% !important;display:block;padding-right:5%;float:right;}
}

@media only screen and (max-width:320px) and (min-width:241px) {
	
	.izq {width:90%;display:block; margin-bottom:0px;margin-top:10%; padding:0; margin-left:5%; margin-right:5%;}
	.izq .img-fono {width:30px !important;}
	.derecho {width:90%;display:block;margin-left:0px;padding: 5% 0 1% 5%;margin-right:0;}
	.fondo-form {width:90%;}
	.izq ul li {margin-left:0px;background-size:9%;}
	.mov2 li{padding-left:0px;}
	.mov {padding:2% 10%;}
	.movil {font-size:2em !important;}
	.telefono { background:#111111 url(fondo-telefono.jpg) no-repeat;width:100%;background-size:100%;padding:2.5% 0;}
	.texto-bajo {color:#fff;text-align:center;font-size:10px !important; width:93% !important;display:block;padding-left:2%;overflow:auto;}
	.tb2 { width:30% !important;display:none;padding-right:5%;float:right;}
	.datos {width:90%;}
	.pagos {width:54%;margin-top:1%;}
}

@media only screen and (max-width:480px) and (min-width:321px) {
	
	.izq {width:94%;display:block; padding:3% 0; margin:5% 3%;}
	.izq .img-fono {width:30px !important;}
	.derecho {width:90%;display:block;margin-left:0px;padding: 9% 0 1% 9%; margin-top:0px;height:10%; margin-right:0;}
	.fondo-form {width:90%;}
	.izq ul li {margin-left:0px;background-size:7%;}
	.mov {margin-left:0px; padding: 2% 15% !important;}
	.movil {font-size:2em !important;}
	.telefono { background:#111111 url(fondo-telefono.jpg) no-repeat;width:100%;background-size:100%;padding:2.5% 0;margin:0 3%;}
	.texto-bajo {color:#fff;text-align:center;font-size:10px !important; width:93% !important;display:block;padding-left:2%;}
	.tb2 { width:30% !important;display:none;padding-right:5%;float:right;}
	.datos {width:90%;}
	.pagos {width:54%;margin-top:1%;}
}

@media only screen and (max-width:768px) and (min-width:481px) {
	
	.izq {width:84%;display:block; margin-bottom:0px; padding:5%;}
	.izq .img-fono {width:30px !important;}
	.derecho {width:90%;display:block;margin-left:0px;padding: 1% 5% 1% 5%; margin-top:0px;margin-right:0;}
	.fondo-form {width:100%;}
	.movil {font-size:2em !important;}
	.telefono { background:#111111 url(fondo-telefono.jpg) no-repeat;width:100%;background-size:100%;padding:2.5% 0;}
	.texto-bajo {color:#fff; width:93% !important;text-align:center;display:block;padding-left:2%;}
	.tb2 { width:30% !important;display:none;float:right;padding-right:2%;}
	.pagos {width:48%;}
}

@media only screen and (max-width:1279px) and (min-width:1025px) {
	body {background-size:cover;}
	.izq ul {margin-top: 0; margin-bottom: 3px;}
	.izq .img-fono {width:30px !important;}
	.telefono {margin-top:11%;}
	.tablet {margin-bottom:0 !important;}
	.derecho {margin-top:0;padding-top:55px;}
	.bajo {padding:1.6% 0;}
	.texto-bajo {font-size:15px; width:50%;}
}

@media only screen and (max-width:1024px) and (min-width:768px) {
	body {background-size:cover;}
	center {clear:both;}
	.izq {padding-top:3%;}
	.izq ul {margin-top: 0; margin-bottom: 3px;}
	.izq ul li {background-size:7%;}
	.izq .img-fono {width:30px !important;}
	.izq .movil {font-size:2em !important;margin-left:4% !important;}
	.telefono {margin-top:11%;}
	.tablet {margin-bottom:0 !important; display:none;}
	.derecho {margin-top:0;padding-top:20px;}
	.bajo {padding:1.6% 0;}
	.texto-bajo {font-size:15px;margin-top:1%;}
	.titulo-tablet {margin-top:10px !important;}
	.datos {width:50%;}
	.numero {font-size:35px;}
}

@media only screen and (max-width:1310px) and (min-width:1280px) {
	.telefono {margin-top:13%;}
}

@media only screen and (min-width:1311px) {
	body {background-size:100%;}
	/**.izq {margin-top:1%;}
	.izq .titulo-tablet {font-size:37px !important;}
	.izq ul{font-size:23px !important;}
	.izq .tablet {font-size:26px !important;}
	.izq .movil {font-size:4em !important;}
	.izq .img-movil {width:70px !important;}
	.telefono {margin-top:20%;}
	.derecho {margin-top:7% !important;}
	.texto-bajo {margin-top:5% !important;font-size:20px;}**/
}
@media only screen and (max-width:767px) {
	.izq {border-radius:5px;}
	.texto-sup img {max-height:35px;}
	.texto-sup {clear:both;text-align:center;float:none;padding:5px;}
	.numero {font-size:24px;width:100%;float:none;clear:both;margin-top:0;}
	.titulo-tablet {font-size:25px !important;}
	.llamar {display:block;margin-bottom: 0px !important;margin-top: 0px;font-size: 11px;color:#888;text-align:center;width:100%;}
	.datos {text-align:center;width:100%;}
	.numero img {float:none !important;padding-top: 1%;width: 20px;}
}

@media (min-width: 1200px) {
.texto-sup::after {
    position: absolute;
    content: "";
    z-index: -1;
    height: 43px;
    width: 43px;
    background-color: #ffffff;
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
    bottom: 9px;
    right: -22px; 
}}