/* FONTS */
@font-face { font-family: 'openSans'; src: url('../fonts/opensans-regular-webfont.eot'); src: url('../fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/opensans-regular-webfont.woff') format('woff'), url('../fonts/opensans-regular-webfont.ttf') format('truetype'), url('../fonts/opensans-regular-webfont.svg#openSans') format('svg'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'openSansSemiBold'; src: url('../fonts/opensans-semibold-webfont.eot'); src: url('../fonts/opensans-semibold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/opensans-semibold-webfont.woff') format('woff'), url('../fonts/opensans-semibold-webfont.ttf') format('truetype'), url('../fonts/opensans-semibold-webfont.svg#openSansSemiBold') format('svg'); font-weight: normal; font-style: normal; }


/* TAGS */
html, body { height: 100%; }
a { text-decoration: none; }
body { font: 11pt openSans; }
footer { background: #2f2f2f url("../images/footer-back.jpg") repeat-x; color: #fff; font-size: 0.85em; padding: 20px 0; }
header { background: #fff url("../images/head-back.jpg") top center no-repeat; top: 0; width: 100%; height: 100px; }
nav { background: #b20000 url("../images/mynavbar.png"); border-bottom: 1px solid #400; height: 40px; position: relative; width: 100%; }
p { padding-bottom: 10px; }


/* CLASSES */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; z-index: 20; }
.Float01 { float: left; }
.Float02 { float: right; }
.General { background-color: #fff; border: 1px solid #666; color: #f30; font-size: 1.2em; padding: 6px; }
[class^='icon-misc-'] { background: url("../images/free-icons.png"); background-repeat: no-repeat; height: 24px; vertical-align: middle; width: 24px; }
.icon-misc-programs { background-position: -143px -143px; }
.icon-misc-booking { background-position: -23px -23px; }
.icon-misc-billing { background-position: -23px -191px; }
.icon-misc-complaint { background-position: 0 -143px; }
.login-container { background: url("../images/login-back.png"); color: #fff; height: 420px; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 300px; -webkit-transform: translate(-50%, -50%); text-align: center; }
.login-input-general { background-color: #fff; border: 1px solid #666; color: #666; font-size: 1.1em; padding: 10px; width: 76%; }
.M01 { margin-right: 10px; }
.mySpace01 { margin-left: 30px; }
.NoFloat { clear: both; font-size: 1px; width: 100%; }
.P01 { padding-top: 6px; }


/* IDS */
div#menu-main { background-color: #a00; color: #fff; display: none; line-height: 50px; text-align: left; text-indent: 25px; width: 100%; }


/* COMBINED */
article.programas-espacio-precarga { color: #036; }
article.programas-espacio-precarga div { margin-top: 6px; }
article.programas-espacio-precarga img { margin-right: 10px; }

div.login-container div.login-line { background: url("../images/line-01.png") center top no-repeat; }
div.login-container h1 { font: 1.4em openSansSemiBold; padding-bottom: 12px; }
div.login-container p:first-child { padding-top: 20px; }
div.login-container p#login-messages { color: #f00; font: 1em openSansSemiBold; padding: 16px; }
div.login-line input#btn-login { background-color: #ecb770; border: none; color: #333; display: block; font-size: 1.1em; margin: 0 auto; padding: 8px 20px; width: 82%; }
div.login-line input#btn-login:hover { background-color: #d93600; color: #fff; }

div.messages-box { font: 1.2em openSansSemiBold; margin-bottom: 10px; }
div.messages-box div.message-box-error { border: 1px solid #c00; color: #c00; display: none; padding: 8px 12px; }
div.messages-box div.message-box-process { border: 1px solid #ccc; color: #444; display: none; padding: 8px 12px; }
div.messages-box div.message-box-success { border: 1px solid #090; color: #090; display: none; padding: 8px 12px; }

div.myContent { height: auto; margin: auto; min-height:100%; }
div.myContent:after{ height:150px; display:block; clear:both; }
div.myContent, div.myReference { padding-top: 180px; }
div.myContent div.myInfo, div.myContent section { width: 100%; }
div.myContent div.myInfo { margin-bottom: 30px; }
div.myContent div.myInfo aside { color: #fff; width: 100%; }
div.myReference section { width: 100%; }
div.myReference section .text-references { display: none; }

div.myInfo article { width: 100%; }
div.myInfo article h3 { color: #fff; font-size: 1.1em; padding: 10px 12px; }
div.myInfo article.listado-programas h3 { background-color: #2e6d0d; }
div.myInfo article.listado-propuestas h3 { background-color: #f96300; }
div.myInfo article ul { list-style: none; margin: 16px 10px; padding: 0; }
div.myInfo article ul li:before { color: #090; content: "\f072"; display: inline-block; font-family: FontAwesome; font-style: normal; font-size: 1.4em; font-weight: normal; margin-left: -20px; text-decoration: inherit; vertical-align: top; width: 20px; }
div.myInfo article ul li { border-bottom: 1px dashed #999; margin-top: 10px; padding: 0 10px 12px 20px; }
div.myInfo article ul li:hover { background-color: #ddd; }
div.myInfo article ul li a { color: #369; display: inline-block; padding: 0 10px; text-decoration: none; }
div.myInfo article ul li a:hover { color: #05c; text-decoration: underline; }

footer div.myFoot div.foot-content-01 { float: right; width: 70px; }
footer div.myFoot div.foot-content-02 { float: left; width: 290px; }

header, header nav { position: fixed; left: 0; z-index: 20; }
header nav { top: 100px; }
header div.myLogo { background: url("../images/line-header.jpg") bottom repeat-x; height: 100px; }
header div.header-content, footer div.myFoot, div.myContent, div.myReference { margin: 0 auto; width: 1024px; }
div.header-block-box { background: rgba(255, 255, 255, .7); border-radius: 8px; height: 80px; margin: 8px 20px 0 0; min-width: 120px; padding: 6px 10px; text-align: right; }
p.logo-image { margin-left: 20px; padding-top: 4px; }

nav ul { height: 40px; margin: 0 auto; padding: 0; width: 980px; }
nav li { display: inline; float: left; }
nav li a { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; border-right: 1px solid #faa; box-sizing: border-box;}
nav li:last-child a { border-right: 0; }
nav a { color: #fff; display: inline-block; line-height: 40px; text-align: center; text-shadow: 1px 1px 0px #283744; width: 240px; }
nav a:hover, nav a:active { background-color: #d93600; }

section h2 { font: 1.5em openSansSemiBold; padding-bottom: 20px; }

#content-programas-viaje-id p.programas-titulo { text-align: center; }
#content-programas-viaje-id strong.programas-cliente-descripcion { font-size: 1.2em; }
#content-programas-viaje-id table.programas-itinerario { width: 100%; }
#content-programas-viaje-id table.programas-itinerario td { padding: 10px; vertical-align: top; }
#content-programas-viaje-id table.programas-itinerario td.programas-itinerario-dia { background-color: #acc931; color: #fff; }
#content-programas-viaje-id table.programas-itinerario span.programas-itinerario-ciudad { color: #900; }
#content-programas-viaje-id table.programas-itinerario ul.programas-itinerario-descripcion { font-size: 0.9em; margin-left: 40px; }
#content-programas-viaje-id table.programas-itinerario li.programas-itinerario-contenido { padding-bottom: 10px; text-align: justify; }
#content-programas-viaje-id table.programas-itinerario span.programas-itinerario-hora, 
#content-programas-viaje-id table.programas-itinerario a.programas-itinerario-enlace { color: #369; }
#content-programas-viaje-id table.programas-itinerario p.programas-itinerario-hotel { font-size: 0.9em; }
#content-programas-viaje-id table.programas-itinerario span.programas-itinerario-acomodacion { color: #f30; }
#content-programas-viaje-id p.programas-precios-titulo { color: #8ea042; font-size: 1.2em; }
#content-programas-viaje-id table.programas-precios-detalles { border-collapse: separate; border-spacing: 2px; width: 100%; }
#content-programas-viaje-id table.programas-precios-detalles th, 
#content-programas-viaje-id table.programas-precios-detalles td { padding: 4px; }
#content-programas-viaje-id table.programas-precios-detalles tr.programas-precios-detalles-encabezado { background-color: #acc931; color: #fff; }
#content-programas-viaje-id table.programas-precios-detalles tr.programas-precios-detalles-datos:nth-child(odd) { background-color: #ecffce; color: #333; }
#content-programas-viaje-id table.programas-precios-detalles tr.programas-precios-detalles-datos:nth-child(even) { background-color: #d3e19a; color: #333; }
#content-programas-viaje-id td.programas-resumen-titulo { background-color: #036; color: #fff; font-size: 1.2em; font-weight: bold; padding: 6px 8px; text-align: center; }
#content-programas-viaje-id td.programas-resumen-descripcion { font-size: 0.9em; }
#content-programas-viaje-id ul.programas-resumen-espaciado { margin-left: 20px; }

#EstadoCuentaID caption { clear: both; color: #1e88ff; font-size: 1.3em; padding-bottom: 20px; text-align: left; width: 96%; }
#EstadoCuentaID div.F01 { float: left; }
#EstadoCuentaID div.F02 { float: right; font-weight: bold; }
#EstadoCuentaID { border-collapse: separate; border-spacing: 2px; width: 100%; }
#EstadoCuentaID thead, #EstadoCuentaID tbody { background-color: #eee; }
#EstadoCuentaID tfoot { color: #f30; }
#EstadoCuentaID th, #EstadoCuentaID td { padding: 6px; }
#EstadoCuentaID .Cent { text-align: center; }

#politicas-cancelacion ul { list-style: none; margin: 0; padding: 0; }
#politicas-cancelacion ul li { padding: 0 10px 10px 20px; }
#politicas-cancelacion ul li:before { color: #090; content: "\f054"; display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: normal; margin-left: -20px; text-decoration: inherit; width: 20px; }
#politicas-cancelacion strong:before { color: #369; content: "\f072"; display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; width: 20px; }
#politicas-cancelacion form { text-align: center; }
#politicas-cancelacion .payment-methods { display: none; }

.color-blue { color: #06c; }
.color-green { color: #090; }


/**** ======================================================================================================== ****/


/* Screen 1048px and Lower (Laptop-Res) */
@media only screen and (max-width: 1048px) {
	
	/* TAGS */
	nav { background: #a00; height: auto; }
	
	/* COMBINED */
	div.myContent, div.myReference { padding-top: 220px; }
	header div.myLogo, footer div.myFoot, div.myContent, div.myReference { width: 92%; }
	nav ul { display: block; height: auto; width: 100%; }
	nav li { float: left; position: relative; width: 50%; }
	nav li a { border-bottom: 1px solid #faa; border-right: 1px solid #faa; }
	nav a { line-height: 50px; text-align: left; text-indent: 25px; width: 100%; }
}


/**** ======================================================================================================== ****/


/* Screen 1024px and Lower (Tablet-Res) */
@media only screen and (max-width: 1024px) {
	
	/* TAGS */
	header { height: 0; }
	
	/* COMBINED */
	header div.myLogo { display: none; }
	header nav { top: 0; }
	div.myContent, div.myReference { padding-top: 130px; }
}


/**** ======================================================================================================== ****/


/* Screen 768px and Lower (Tablet-Res) */
@media only screen and (max-width: 840px) {
	
	/* COMBINED */
	nav ul { display: none; }
	div.myContent, div.myReference { padding-top: 70px; }
	div#menu-main { background: #a00 url("../images/mynavbar.png"); display: block; position: relative; width: 100%; }
	div#menu-main span.menu-logo { background: url("../images/trip-peru-mini-logo.png") no-repeat; content: ""; display: inline-block; height: 30px; position: absolute; top: 12px; width: 30px; }
	div#menu-main a#phone { background: url("../images/phone-02.png") no-repeat; content: ""; cursor: pointer; display: inline-block; height: 30px; position: absolute; right: 90px; top: 13px; width: 30px; }
	div#menu-main a#programas-salida-sesion-02 { background: url("../images/sign-out-02.png") no-repeat; content: ""; cursor: pointer; display: inline-block; height: 30px; position: absolute; right: 50px; top: 13px; width: 30px; }
	div#menu-main a#whatsapp-call { background: url("../images/whatsapp-icon.png") no-repeat; content: ""; cursor: pointer; display: inline-block; height: 30px; position: absolute; right: 130px; top: 13px; width: 30px; }
	div#menu-main a#pull { background: url("../images/nav-icon.png") no-repeat; content: ""; cursor: pointer; display: inline-block; height: 30px; position: absolute; right: 10px; top: 15px; width: 30px; }
	
}


/**** ======================================================================================================== ****/


/* Screen 768px and Lower (Tablet-Res) */
@media only screen and (max-width: 768px) {
	
	/* TAGS */
	nav { border-bottom: 0; }
	
}


/**** ======================================================================================================== ****/


/* Screen 480px and Lower (Phone-Res) */
@media only screen and (max-width: 480px) {
	
	/* CLASSES */
	.social-content { display: none; }
	
	
	/* COMBINED */
	footer div.myFoot div[class^='foot-content-'] { float: none; margin: 0 auto; text-align: center; }
	nav li { display: block; float: none; width: 100%; }
	nav li a { border-bottom: 1px solid #faa; }
	
}
