@font-face{
	font-family: Raleway;
    src: url(../fonts/Raleway-Regular.woff2),
         url(../fonts/Raleway-Regular.woff),
	     url(../fonts/Raleway-Regular.ttf);
    font-weight: 400; font-display: swap;}
@font-face{
	font-family: Raleway;
    src: url(../fonts/Raleway-SemiBold.woff2),
         url(../fonts/Raleway-SemiBold.woff),
	     url(../fonts/Raleway-SemiBold.ttf);
    font-weight: 600; font-display: swap;}
@font-face {
    font-family: 'Trirong';
    src: url('../fonts/Trirong-Regular.woff2'),
         url('../fonts/Trirong-Regular.woff'),
		 url('../fonts/Trirong-Regular.ttf') ;
    font-weight: normal; font-display: swap;}

@font-face {
    font-family: 'Trirong';
    src: url('../fonts/Trirong-Thin.woff2'),
        url('../fonts/Trirong-Thin.woff'),
		url('../fonts/Trirong-Thin.ttf');
    font-weight: 100; font-display: swap;}
*{
	margin: 0;
	padding: 0;}
body{
	font-family: 'Raleway', sans-serif; font-weight: 400;
	line-height: 1.6em;}
#azul{
	background: #23507e; color: #fff;}
#gris{
	background: #d7d7c7; font-size: 1.1em; line-height: 1.8em;}
#tras, #tras-index{
	background: #d7d7c7;}
img a, a, a img{
	text-decoration: none;}
.neg{
	font-weight: 600;}
.noneg{
	font-weight: normal;}
#logo{
	font-family: 'Trirong', serif; font-size: 35px; color: #036;}
#membrete{
	font-size: 21px; margin: 5px 0 0 0; color: #46719d; letter-spacing: 7px;}
.cobros{
	display: block; margin: 0 0 0 1px;}
.sub{
	font-family: 'Raleway', sans-serif; 
	font-size: 10px; line-height: 16px; display: block; letter-spacing: 0;}
#menu ul li{
	list-style-type: none;}
#menu ul li a{
	color: #000; padding: 20px 0; display: block; background: #fff; text-align: center;}
#menu ul li a:hover{
	background: #bbcae1; 
	-webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;}
#azul h1, .t-cont{
	font-size: 60px; line-height: 55px; font-weight: 100; 
	font-family: 'Trirong', serif; max-width: 780px;}
#azul h1 strong{
	font-weight: 400;}
#azul h2{
	font-size: 14px; font-weight: 100; margin: 5px 0 0 0;}
#azul .contactar{
	font-size: 18px;}
.banner{
	padding: 60px 0; color: #fff; height: 155px;
	text-shadow: 1px 1px 10px #000;}
.ban{
	font-family: 'Trirong', serif; color: #38c0ff;}
.t-cita{
	font-size: 36px; line-height: 42px; font-weight: 100; 
	font-family: 'Trirong', serif; margin: 100px 0 0 0; display: block;}
#gris h1{
	font-size: 20px; text-transform: uppercase; color: #036; margin: 0 0 20px 0;}
.contenido h2{
	font-family: 'Trirong', serif; font-size: 38px; 
	font-weight: 100; color: #23507e;}
.contenido h3{
	font-size: 22px; color: #036; margin: 30px 0 0 0;}
.contenido h4{
	color: #444; margin: 15px 0 0 0;}
.ventaja{
	line-height: 30px;  }
.ventaja .neg{
	font-size: 26px; color: #0d41ab;}
h5{
	margin: 40px 0 0 0;}
.min{
	display: block; font-size: 18px; font-weight: 400; margin: 5px 0 0 0;}
.menor{
	font-size: 15px; line-height: 1.4em; display: block; margin: 5px 0 0 0;}
.contenido .top{
	margin: 5px 0 0 0;}
.tit{
	font-family: 'Trirong', serif; font-size: 38px; 
	font-weight: 100; color: #23507e;}
p{
	margin: 0 0 15px 0;}
.dest{
	color: #23507e; font-size: 20px; margin: 40px 0 0 0;}
.nota{
	max-width: 350px; letter-spacing: 0.3px; margin: 10px 0 0 0;}
.borra{
	clear: both;}
#gris a{
	color: #036; display: inline-block; padding: 10px 0 0 0;}
#tels{
	font-size: 28px; margin: 10px 0 0 0;}
#bajo{ 
	font-size: 14px; background: #036; color: #fff; border-top: 5px #d7d7c7 solid;}
#aviso a{
	color: #fff; display: inline-block; padding: 5px 0;}
#pie a{
	text-align: center; display: block; background:#036; color: #bbcae1; padding: 10px 0;}
#pie a:hover{
	background: #23507e; color: #000;}
.tabla{
	text-align: center;}
.tabla td, .infos{
	border: 1px solid #23507e; }
.tabla .tabtit{
	font-size: 0.8em; line-height: 1.3em; }
.tabla .tabtit td{
	padding: 5px;}
.infos{
	padding: 0 10px;}
.infos p{
	border-bottom: 1px solid #23507e; margin: 0; padding: 10px 0;}
	

@media only screen 
and (max-width : 480px){
.container {
	width: 100%;
	margin: 0 auto;}
.todo {
	margin: 0 20px;}
#azul{
	padding: 50px 0; text-align: center;}
#logo{
	width: 140px; margin: 30px auto; text-align: center;}
.cobros{
	display: block; margin: 0 0 0 4px;}
#menu{
	font-size: 0.9em; margin: 0 0 30px 0;}
#menu ul li a{
	padding: 10px 0;}
#azul h1, .t-cont {
    font-size: 30px;
    line-height: 35px;}
#azul h2{
	font-size: 12px; margin: 30px 0 0 0;}
#azul .contactar{
	font-size: 14px; line-height: 18px;}
.linea{
	display: block;}
.guion{
	display: none;}
#gris, .grupo{
	padding: 50px 0; text-align: center;}
#gris a {
    padding: 0;}
#fondo{
	background: url(../imagenes/fondo-m.jpg) no-repeat center center;
	background-size: auto 100%; text-align: center;}
#fondo-movil{
	background: url(../imagenes/fondo-m.jpg) no-repeat center center;
	background-size: auto 100%; text-align: center;}
#tras{
	height: 225px;}
#tras-index{
	display: none;}
#fondo-movil{
	height: 220px;}
.banner ul li { 
	font-size: 26px;}
.ban{
	font-size: 40px; display: block; line-height: 50px;}
.contenido{
	padding: 50px 0; text-align: center;}
#cont{
	padding: 20px 0 0 0 !important; }
.ventaja{
	margin: 50px 0 0 0; display: block; }
.ventaja .neg, .contenido h2{
	font-size: 34px; line-height: 38px; }
.ventaja .neg{
	display: block;}
.icono{
	width: 50px; margin: 0 auto;}
.icono img{
	width: 100%; height: auto;}
.destacar{
	display: block; margin: 40px 0 20px 0; padding: 15px 0; 
	border-top: 1px solid #333; border-bottom: 1px solid #333;}
.contacto{
	background: #23507e url(../imagenes/contacto-m.jpg) no-repeat top right !important; 
	background-size: 100% auto !important; padding: 65% 0 50px 0 !important;}
.tit, .t-cita{
	font-size: 26px;}
.t-cita{
	margin: 40px 0 0 0; padding: 40px 0 0 0; border-top: 1px solid #fff;}
#tels{
	line-height: 50px;}
#taco{
	width: 160px; margin: -60px 0 0 0; padding: 30px 30px 0 30px; 
	height: 180px}
#bajo{
	text-align: center; padding: 20px 0 0 0; line-height: 17px;}
#pie a{
	width: 130px; font-size: 1.1em; margin: 0 auto 20px auto;}
.tabla{
	display: none;}
}
	
@media only screen 
and (min-width : 481px)
and (max-width : 800px) {
.container {
	width: 100%;
	margin: 0 auto;}
.todo {
	margin: 0 50px;}
#azul{
	padding: 80px 0 40px;}
#azul .contactar{
	line-height: 20px;}
#azul h1, .t-cont {
    font-size: 36px; line-height: 42px;
    max-width: 780px;}
#azul h2{
	font-size: 12px; margin: 30px 0 0 0;}
#logo{
	width: 145px; margin: 40px auto; text-align: left;}
.sub{
	font-size: 11px;}
#menu{
	width: 310px;
	margin: 0 auto;
	font-size: 0.9em;}
#menu ul li{
	width: 22%; float: left;}
#menu ul .may{
	width: 48%;}
#menu ul .med{
	width: 30%;}
p{
	margin: 0 0 30px 0;}
#gris, .grupo{
	padding: 50px 0;}
#gris a {
    padding: 0;}
#fondo{
	background: url(../imagenes/fondo-t2.jpg) no-repeat top center;
	background-size: 100% auto; height: 170px;}
#tras-index{
	height: 170px;}
#tras{
	height: 180px;}
#fondo-movil{
	display: none;}
.banner ul li { 
	font-size: 26px;}
.ban{
	font-size: 47px;}
.contenido{
	padding: 0 0 100px 0; margin: 60px 0 0 0;}
#cont{
	padding: 0 !important;}
.contenido h2 {
    font-size: 34px;}
.ventaja{
	margin: 30px 0 0 0; }
.ventaja .neg{
	font-size: 26px;}
.icono{
	width: 90px; float: left;}
.icono img{
	width: 60px; height: auto;}
.info{
	width: 73%; float: left;}
.contacto{
	background: #23507e url(../imagenes/contacto.jpg) no-repeat top right !important; 
	background-size: auto 85% !important;}
.t-cita{
	margin: 20% 0 0 0;}
#taco{
	width: 160px; margin: -60px 0 0 0; padding: 30px 30px 0 30px; 
	height: 180px}
#pie a{
	width: 130px; margin: 0 0 30px 70%; font-size: 1.1em; }
.tabla td{
	width: 20%;}
.infos{
	display: none;}}
	
@media only screen 
and (min-width : 801px)
and (max-width : 999px) {
.container {
	width: 100%;
	margin: 0 auto;}
.todo {
	margin: 0 50px;}
#azul{
	padding: 80px 0;}
#azul .contactar{
	line-height: 20px;}
#azul h1, .t-cont {
    font-size: 40px; line-height: 50px;
    max-width: 780px;}
#logo{
	width: 130px; margin: 30px auto; float: left;}
.sub{
	font-size: 11px;}
#menu{
	width: 310px; float: right;
	font-size: 0.8em;}
#menu ul li{
	width: 22%; float: left;}
#menu ul .may{
	width: 48%;}
#menu ul .med{
	width: 30%;}
p{
	margin: 0 0 30px 0;}
#gris, .grupo{
	padding: 50px 0;}
#gris a {
    padding: 0;}
#fondo{
	background: url(../imagenes/fondo-t.jpg) no-repeat center center;
	background-size: 100% auto;}
#fondo-movil{
	display: none;}
.banner ul li { 
	font-size: 28px;}
.ban{
	font-size: 50px;}
.contenido{
	padding: 0 0 100px 0; margin: 80px 0 0 0;}
#cont{
	padding: 0 !important;}
.ventaja{
	width: 40%; float: left; margin: 30px 10% 0 0; display: block; }
.ventaja .neg{
	font-size: 26px;}
.icono img{
	width: 60px; height: auto;}
.info{
	margin: 10px 0 0 0;}
.contacto{
	background: #23507e url(../imagenes/contacto.jpg) no-repeat top right !important;}
.t-cita{
	margin: 150px 0 0 0;}
#taco{
	width: 160px; margin: -60px 0 0 0; padding: 30px 30px 0 30px; 
	height: 180px}
#pie a{
	width: 130px; position: fixed; bottom: 50px; right: 50px; 
	font-size: 1.1em; z-index: 3;}
.tabla td{
	width: 20%;}
.infos{
	display: none;}}
	
@media only screen 
and (min-width : 1000px){
.container {
	width: 1000px; margin: 0 auto;}
.todo {
	margin: 0 50px;}
#azul{
	padding: 120px 0 80px 0;}
#logo{
	width: 130px; float: left; margin: 30px 0;}
.sub{
	font-size: 11px;}
#menu{
	width: 400px; float: right; font-size: 16px; margin-top: 60px;}
#menu ul li{
	width: 22%; float: left;}
#menu ul .may{
	width: 48%;}
#menu ul .med{
	width: 30%;}
#gris, .grupo{
	padding: 50px 0;}
#fondo{
	background: url(../imagenes/fondo.jpg) no-repeat center center; background-size: 100% auto;}
#fondo-movil{
	display: none;}
.banner ul li { 
	font-size: 40px;}
.ban{
	font-size: 65px;}
.contenido{
	padding: 0 0 100px 0; margin: 80px 0 0 0;}
.ventaja{
	width: 40%; float: left; margin: 30px 10% 0 0; display: block; }
.ventaja .neg{
	font-size: 26px;}
.icono{
	width: 100px; float: left;}
.info{
	width: 250px; float: left;}
.contacto{
	background: #23507e url(../imagenes/contacto.jpg) no-repeat top right !important;
	background-size: 55% auto !important;}
#taco{
	width: 160px; margin: -60px 0 0 0; padding: 30px 30px 0 30px; 
	height: 180px}
#pie a{
	width: 130px; position: fixed; bottom: 50px; right: 50px; 
	font-size: 1.1em; z-index: 3;}
.inf{
	margin: 0 0 100px 0;}
.tabla td{
	width: 20%;}
.infos{
	display: none;}}