/*!
 * Start Bootstrap - Creative Bootstrap Theme (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

html,
body {
    width: 100%;
    height: 100%;
}


header {
    position: relative;
    width: 100%;
    min-height: auto;
    text-align: center;
    color: #fff;
   
}

header .head-claro {
    position: relative;
    width: 100%;
    height: 60vh;
    /*padding: 100px 15px;*/
    background-image: url(../img/fondo-head.jpg);
    background-repeat: no-repeat;
    background-position: bottom left;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}


header .head-menu {
	position: relative;
	width: 100%;
	height: 39.9vh;
	background:#CCC;
}

header .head-menu h2 {
	font-family: gotham_medium, Verdana, Geneva, sans-serif;
	color:#000000;
    font-size: 35px;
 	padding-top: 2.5%;
    padding-bottom: 3.5%;
	  /*padding-top: 25px;
    padding-bottom: 30px;*/
}

header .logo {
	position: absolute;
    top: 15px;
    right: 23px;
    width: 65px;
	
}



header .head-claro h1 {
	font-family: gotham_light, Verdana, Geneva, sans-serif;
	position: absolute;
	bottom: 15px;
    left: 15px;
	width:90%;
	text-align:left;
	font-size:55px!important;
	-webkit-text-shadow:0px 1px 10px #000000; /* for chrome */
	-text-shadow:0px 1px 10px #000000; /* for all browser*/
	text-shadow:0px 1px 10px #000000; /* same as above*/
	-moz-text-shadow:0px 1px 10px #000000; /* for firefox */
	-o-text-shadow:0px 1px 10px #000000; /* for opera */
	-ms-text-shadow:0px 1px 10px #000000; /* for ie 9+ */
	-khtml-text-shadow:0px 1px 10px #000000; /* for gecko based browser*/
}
header .head-claro h1 strong {
	font-family: gotham_medium, Verdana, Geneva, sans-serif

}

.v-align {
    float: none;
    display: inline-block;
    vertical-align: middle;
}

/*MENU*/
.menu-principal {
	height:112px;
	/*float:left;*/
	width:900px;
	margin:0 auto;
}


.menu-principal li {
	float:left;
	width:19.8%;
	max-width: 240px;
	height:112px;
	
}


.separador {
    background: rgba(79, 79, 79, 0.41);
    width: 1px!important;
    height: 90px!important;
    margin-top: 15px;
}

.menu-principal li a { 


width:100%;
	
	
}

.menu-principal li a img  {
	
max-width: 70px;
}

.menu-principal li a span  {
	font-size: 20px;
	clear:both;
	display:block;
	font-family: gotham_light, Verdana, Geneva, sans-serif;
}
.menu-principal li a {
	color:#ce2029;
	 -webkit-filter: grayscale(0%) brightness(1);
	 filter: grayscale(0%) brightness(1);
	  -webkit-transition: all .4s ease;
       -moz-transition: all .4s ease;
        -ms-transition: all .4s ease;
         -o-transition: all .4s ease;
            transition: all .4s ease;

	
    
}

.menu-principal .selected a {
	color:#ce2029!important;
	 -webkit-filter: grayscale(0%) brightness(1)!important;
	 filter: grayscale(0%) brightness(1)!important;
}




.menu-principal li a.btn-one,
.menu-principal li a.btn-two,
.menu-principal li a.btn-three,
.menu-principal li a.btn-four,
.menu-principal li a.btn-five {
	text-align:center;
	color:#000000;
	-webkit-filter: grayscale(100%) brightness(0);
	filter: grayscale(100%) brightness(0);
	-webkit-transition: all .4s ease;
       -moz-transition: all .4s ease;
        -ms-transition: all .4s ease;
         -o-transition: all .4s ease;
            transition: all .4s ease;
	
    
}

.menu-principal li a.btn-one:hover,
.menu-principal li a.btn-two:hover,
.menu-principal li a.btn-three:hover,
.menu-principal li a.btn-four:hover,
.menu-principal li a.btn-five:hover {
	color:#ce2029;
	 -webkit-filter: grayscale(0%) brightness(1);
	 filter: grayscale(0%) brightness(1);
	  -webkit-transition: all .4s ease;
       -moz-transition: all .4s ease;
        -ms-transition: all .4s ease;
         -o-transition: all .4s ease;
            transition: all .4s ease;

	
    
}


.menu-principal li a {
	color:#ce2029;
	 -webkit-filter: grayscale(0%) brightness(1);
	 filter: grayscale(0%) brightness(1);
	  -webkit-transition: all .4s ease;
       -moz-transition: all .4s ease;
        -ms-transition: all .4s ease;
         -o-transition: all .4s ease;
            transition: all .4s ease;
}


.viajes { max-width:714px; width:100%; margin: 0 auto;}

.viajes li{
	float:left;
	clear:both;
	margin-top:13px;
}


.point {
	font-family: gotham_medium, Verdana, Geneva, sans-serif;
    font-size: 18px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    padding: 3px;
    border: 2px solid #000;
    text-align: center;
    float: left;
    color: #000;
    margin-top: 3px;
	
}

.viajes p {
	font-family: gotham_book, Verdana, Geneva, sans-serif;
    font-size: 15px;
    color: #000;
    float: left;
    margin-left: 20px;
    padding-top: 11px;
}

.claroRoaming {
	border-left: 1px solid #000;
    position: relative;
    /* right: 0px; */
    /* top: 20px; */
    padding: 20px 3px 20px 15px!important;
    line-height: 19px;
    color: #CE2029!important;
    margin-top: 5px;
    float: right;
}

.roaming-subo { margin-top:-37px;}


a.rojoClaro{ color:#1F97AE!important; }

.rojoClaro{ color:#CE2029 }

.claroRoaming p{ color:#CE2029}

.viajes p strong {
	font-family: gotham_medium, Verdana, Geneva, sans-serif;
   
}

.viajes p.light {
	font-family: gotham_light, Verdana, Geneva, sans-serif;
}

.table-viaje{
	margin-top: 25px;
    clear: both;
    float: left;
    margin-bottom: 20px;
} 

.table-viaje thead {font-family: gotham_medium, Verdana, Geneva, sans-serif; font-size:18px; text-align:center;}

.table-viaje thead tr th {text-align:center;}

.borde-medio {
	border-left:1px solid #000;
	border-right:1px solid #000;
	text-align:center;
}

.table-viaje thead tr th, .table-viaje tbody tr td { padding:10px 32px 10px 32px; color:#000; vertical-align: middle;word-wrap: break-word; }

/*.table-viaje thead tr, .table-viaje tbody tr {margin-top:10px;}*/
.table-viaje tbody tr td {font-family: gotham_book, Verdana, Geneva, sans-serif; font-size:12px; }


.table-viaje tbody tr.gris { background:#F2F2F2;}

.tabla-pie {
	font-size:13px!important;
    float: left;
    clear: both;
    line-height: 16px;
}



/*------------ USO EFICIENTE ---------------*/

.contenedor-uso {  max-width:712px; width:100%; margin:0 auto; margin-top:50px;}

.contenedor-uso h3 {
	font-family: gotham_medium, Verdana, Geneva, sans-serif;
    font-size: 20px;
}

.contenedor-uso img {
	clear: both;
    margin: 0 auto;
    text-align: center;
    width: 70px;
    display: block;
}

.contenedor-uso p {
	font-family: gotham_light, Verdana, Geneva, sans-serif;
    font-size: 18px;
	margin-top: 40px;
    width:100%;
	text-align:center;
}
.baja{
	margin-bottom: 60px;
    margin-top: 60px!important;
}

.lista {
	margin: 0px;
    padding: 0px;
	float: left;
    margin-bottom: 40px;
	}
.lista p {
	font-size: 14px;
    margin-top: 5px;
    width: 100%;
    text-align: center;
    padding: 10px;
	line-height: 16px;
}

.lista .lala {
	width:24%;
	float:left;
}



/*.contenedor-uso ul {
	list-style-type: circle;
    width: 90%;
    margin: 0 auto;
    margin-left: 46px;
}

.contenedor-uso li {
	margin:10px 0px 20px 0px;
	padding-left:10px;
	
}
*/
/*------------ INFO ---------------*/
.mas-info { max-width:712px; width:100%; margin:0 auto; margin-top:25px;}

.mas-info h3 {
	font-family: gotham_medium, Verdana, Geneva, sans-serif;
    font-size: 20px;
	clear:both;
	color:#000;
	margin-top:30px;
	
	float:left;
}

.mas-info p {float:left; clear:both;}

.mas-info p.light {
	font-family: gotham_light, Verdana, Geneva, sans-serif;
	font-size: 14px;
    line-height: 20px;
}
.mas-info p strong {
	font-family: gotham_medium, Verdana, Geneva, sans-serif;
   
}


.mas-info .table-viaje { clear:both; float:left;}



/*------------ DESTINO ---------------*/


.destino { max-width:712px; width:100%; margin:0 auto; margin-top:25px;}

.destino .panel-title  {
	font-family: gotham_medium, Verdana, Geneva, sans-serif;
    font-size: 18px;
	color:#000;
}

.destino p {
	font-family: gotham_light, Verdana, Geneva, sans-serif;
	font-size: 14px;
	color: #000;
	float: left;
	padding-top: 11px;
}

.destino h3 {
	font-family: gotham_medium, Verdana, Geneva, sans-serif;
    font-size: 16px;
	clear:both;
	color:#000;
	margin-top:28px;
	float:left;
	width:100%
}

.points {
    font-family: gotham_medium, Verdana, Geneva, sans-serif;
    font-size: 18px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    padding: 3px;
    border: 2px solid #000;
    text-align: center;
    float: left;
    color: #000;
    margin-top: -7px;
    margin-right: 15px;
}

.pasos { float:left; clear:both; width:100%; margin-top:30px;}

.pasos li{width: 24%;
    float: left;
    margin-right: 5px;}


.pasos p {
	font-family: gotham_light, Verdana, Geneva, sans-serif;
	font-size: 14px;
	border-top:1px solid #000;
	width: 80%;
	float:right;
	margin-top: 10px;
	/* padding-right: 38px; */
}

.pasos p strong {
	font-family: gotham_medium, Verdana, Geneva, sans-serif;
}



.point-list {
    font-family: gotham_medium, Verdana, Geneva, sans-serif;
    font-size: 14px;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    padding: 2px;
    border: 1px solid #000;
    text-align: center;
    float: left;
    color: #000;
    margin-top: 0px;
    /* margin-right: 15px; */
}





.llegaste-tabla { 
	margin-top: 30px;
    margin-bottom: 0px;
    float: left;
    clear: both;
}


.llegaste-tabla tbody tr td { padding:0px 0px 12px 0px; color:#000; vertical-align: middle;}


.llegaste-tabla .sistema{font-family: gotham_medium, Verdana, Geneva, sans-serif; font-size: 15px; text-align:right; width: 20%;}

.llegaste-tabla .flecha img{
    width: 10px;
    margin: 0px 10px 0px 10px;
}

.llegaste-tabla .instruccion{font-family: gotham_light, Verdana, Geneva, sans-serif; font-size: 13px; text-align:left;}

.copeteh3 {
    font-size: 12px!important;
    padding-top: 0px!important;
    clear: both;
}


.iconos-uno, .iconos-dos { width:50%; float:left; margin-top:15px; margin-bottom:10px;}

.iconos-uno li, .iconos-dos li { font-family: gotham_light, Verdana, Geneva, sans-serif; font-size: 14px; margin-top:17px;}

.iconos-uno li img, .iconos-dos li img {
	    width: 13%;
    /* height: 34px; */
    vertical-align: middle;
	margin-top: -7px;
}


.table-pais{
	margin-top: 25px;
    clear: both;
    float: left;
    margin-bottom: 20px;
	width: 100%;
	border-collapse: separate;
    border-spacing: 0px 8px;
} 

.table-pais thead {font-family: gotham_medium, Verdana, Geneva, sans-serif; font-size:18px; text-align:center;}

.table-pais thead tr th {text-align:center;}

.borde-centro {
	border-right:1px solid #000;
}

.table-pais thead tr th, .table-pais tbody tr td { color:#000; vertical-align: middle;}

.table-pais thead tr th{padding: 10px 32px 5px 32px;}
.table-pais tbody tr td {padding: 20px 32px 20px 32px;}


/*.table-viaje thead tr, .table-viaje tbody tr {margin-top:10px;}*/
.table-pais tbody tr td {font-family: gotham_book, Verdana, Geneva, sans-serif; font-size:14px; text-align:center; width:49% }


.table-pais tbody tr.blanco { background:#FFF;}
.table-pais tbody tr {}

.adaptado tbody tr.blanco { background:#F2F2F2;}

.adaptado tbody tr td { padding:10px 5px 10px 5px!important;}

.adaptado th, .adaptado tr {
    padding: 10px 0 10px 0!important;
    border-top: 5px solid white;
    border-bottom: 5px solid #f2f2f2;
} 



.borde-r-l {
	border-left:1px solid black;
	border-right:1px solid black;
	line-height: 14px;
}
.borde-l {
	border-left:1px solid black;
}

.contenedor-cuatro {
	clear:both;
	list-style-type: circle;
    margin-top:10px;
    margin-left: 18px;
	float:left;
}

.contenedor-cuatro li {
	font-family: gotham_light, Verdana, Geneva, sans-serif; font-size:14px; 
	margin:10px 0px 10px 0px;
	padding-left:0px;
	float:left;
	clear:both;
	
}
.destino p strong {
	font-family: gotham_medium, Verdana, Geneva, sans-serif;
}

/*----------------@MEDIOAS----------------------*/

.menu-foot { max-width:712px; width:100%; margin:0 auto; margin-top:60px; margin-bottom:40px; clear: both;}

.menu-foot .go { float:right;}

.menu-foot .back { float:left;}


.menu-foot .go,
.menu-foot .back {  margin-top:20px; margin-bottom:20px}



.menu-foot .go li, .menu-foot .back li { margin-top:10px;}

.menu-foot .go li, .menu-foot .back li,
.menu-foot .go li a, .menu-foot .back li a { float:left; clear:both;}

.menu-foot .go li img, .menu-foot .back li img { width:200px;}




.visible { display:none;}


.pc { display:block;}
.celu { display:none}


/*en el menu la 4ta opcion es informacion en algunas medidas se necesita acortar el texto de informacion a info*/

/*.informacion::after { 
    content: "informaci\00f3n";
}*/

.tarifas::after { 
    content: "Precios \A en tus viajes";
	white-space: pre-line;
}


@media (min-width: 480px) and (max-width: 637px) {
	.informacion::after { 
    	content: "info"!important;
	}
}

@media (max-width: 480px) {
	.estiro-movil { width:100%!important; margin-left:8.9%;}
	.chau-movil { display:none;}
	.tarifas::after { 
    	content: "Precios en tus viajes"!important;
	}
}


/*----------------@MEDIOAS----------------------*/

@media(max-width:1200px) {
	header .head-claro {
			background-position: center;
		}	
}




@media(max-width:900px) {
	.menu-principal {
		width:auto;
	}
}


@media (max-width: 800px) {
	.pc { display:none}
	.celu { display:block;}
	
}



@media(max-width:752px) {
	.menu-principal li {
		width:19.8%;
	}
	.lista p {
		font-size: 18px;
		line-height: 16px;
	}
	.lista .lala {
		width:48%;
		float:left;
		display: inline-table;
		height:250px;
	}
	.lista .c-left{
		clear:left;	
	}
	
}




@media(max-height:710px) {
	header .head-menu h2 {
    padding-top: 1.5%;
    padding-bottom: 2.5%;
	}
}

@media(min-width:646px) {
	.roaming-subo { margin-top:-37px!important;}
}





@media(max-width:645px) {
	.claroRoaming{ display:none;}
	.roaming-subo { margin-top:0px;}
	.visible { display:block;}
	.uno-p { width:100%;}
}

@media(max-width:574px) {
	.pasos li {
   	 width: 48%;
	}
}
@media(max-width:400px) {
	.pasos li {
   	 width: 100%;
	}
}

@media(max-width:415px) {
	.llegaste-tabla .flecha img {
    
    margin: 0px;
}
}


@media(max-height:582px) {
	header .head-menu h2 {
    padding-top: 0.5%;
    padding-bottom: 1%;
	}
}

@media(max-width:535px) {
	.iconos-uno, .iconos-dos {
		width: 90%;
		margin: 0 auto;
		float: none;
		clear: both;
		margin-bottom: 0px;
	}
	.iconos-uno{
		padding-top: 7px;
	}
}

@media(max-width:466px) {
	
	table thead tr th, table tbody tr td { padding:10px!important }
	
	
}


@media(max-height:710px) {
	header .head-claro {
    	height: 40vh;
    }
    header .head-menu {
		height: 59.9vh;
	}
	.separador {
		height: 45px!important;
		margin-top: 19px;
	}

	.menu-principal li a img  {
		max-width: 45px;
	}
	.menu-principal li a span  {
		font-size: 13px;
	}
	.menu-principal li {
		height: 75px;
	}
	header .head-menu h2 {
		padding-top: 2%;
		padding-bottom: 3%;
	}
}

@media(max-width:404px) {
	.lista .lala {
		width:100%;
	}
	.lista p {
		line-height: 19px;
	}

}

@media(max-width:390px) {
	.lista .lala {
		width:100%;
	}
	table thead tr th, table tbody tr td { padding:5px!important }

}

/*@media (max-height:392px ) and (max-width:610px )*/

@media (max-height:640px ) and (max-width:360px ) {
    
	header .head-claro h1 {
		font-size: 25px!important;
	}
	header .head-claro {
    	height: 50vh;
    }
    header .head-menu {
		height: 49.9vh;
	}
	.separador {
		height: 45px!important;
		margin-top: 19px;
	}

	.menu-principal li a img  {
		max-width: 45px;
	}
	.menu-principal li a span  {
		font-size: 13px;
	}
	.menu-principal li {
		height: 75px;
	}
	header .head-menu h2 {
		padding-top: 2%;
		padding-bottom: 3%;
		font-size: 13px;
	}
	
	
	
}

@media (max-height:825px ) and (max-width:481px ) {
    header .head-menu h2 {
		font-size: 13px;
	}
	header .head-claro h1 {
		font-size: 25px!important;
	}
}

/*@media(max-width:610px) {*/
@media(max-width:450px) {
	.four {
		background: none!important;
		width: 0px!important;
		clear:both;
		
	}
	.menu-principal {
		width:294px;
	}
	.menu-principal li {
		width:49.8%;
	}
	header .head-claro {
    	height: 45vh;
    }
    header .head-menu {
		height: 54.9vh;
	}
}
@media(max-width:480px) {
	.four {
		background: none!important;
		width: 0px!important;
		clear:both;
		
	}
	.menu-principal {
		width:294px;
	}
	.menu-principal li {
		width:49.8%;
	}
	header .head-claro {
    	height: 45vh;
    }
    header .head-menu {
		height: 54.9vh;
	}
}
@media(max-width:310px) {
	
	.menu-principal {
		width:255px;
	}
	.menu-principal li {
		width:49.8%;
	}
	header .head-claro {
    	height: 45vh;
    }
    header .head-menu {
		height: 54.9vh;
	}
}