@charset "utf-8";
@font-face {
font-family: 'HelveticaNeueLTStd57Condensed';
src: url('fonts/helveticaneueltstd-cn-webfont.eot');
src: url('fonts/helveticaneueltstd-cn-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/helveticaneueltstd-cn-webfont.woff') format('woff'), url('fonts/helveticaneueltstd-cn-webfont.ttf') format('truetype'), url('fonts/helveticaneueltstd-cn-webfont.svg#HelveticaNeueLTStd57Condensed') format('svg');
font-weight: normal;
font-style: normal;
}
body {
background: #fff url(img/bg-html.png) 0 0 repeat fixed;
margin: 0;
padding: 0;
color: #6A7278;
font-family: HelveticaNeueLTStd57Condensed, Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 16px;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p { margin-top: 0; }
h1 {
color: #b8bac0;
font-family: HelveticaNeueLTStd57Condensed;
font-size: 24px;
line-height: 26px;
text-transform: uppercase;
font-weight: normal;
margin: 0 0 5px 0;
}
a img { border: none; }
a:link {
color: #42413C;
text-decoration: underline;
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
color: #0CF;
transition: color 0.7s, background 0.4s ease-in-out 0s;
-moz-transition: color 0.7s, background 0.4s ease-in-out 0s;
-webkit-transition: color 0.7s, background 0.4s ease-in-out 0s;
-o-transition: color 0.7s, background 0.4s ease-in-out 0s
}
.slideshow {
position: relative;
height: 300px;
}
.slide-txt {
background: url(img/bg-alpha.png);
color: #6a7278;
font-family: "Times New Roman", Times, serif;
font-size: 18px;
font-style: italic;
left: 0;
line-height: 22px;
padding: 20px 0 20px 40px;
position: absolute;
top: 169px;
width: 557px;
}
.slides_container {
width: 597px;
display: none;
}
.slides_container div {
width: 597px;
height: 266px;
display: block;
}
.pagination {
list-style: none;
margin: 0;
padding: 0;
}
#slides .prev {
float: left;
margin: 5px 5px 0 0;
background: url(img/arrow.png) left top no-repeat;
width: 10px;
height: 16px;
display: block;
text-indent: -9999px;
}
#slides .next {
float: left;
margin: 5px 5px 0 0;
background: url(img/arrow.png) right top no-repeat;
width: 10px;
height: 16px;
display: block;
text-indent: -9999px;
}
#slides .prev:hover { background: url(img/arrow.png) left bottom no-repeat; }
#slides .next:hover { background: url(img/arrow.png) right bottom no-repeat; }
.pagination {
float: right;
list-style: none outside none;
margin: 7px 0 0;
}
.pagination li {
float: left;
margin: 0 1px;
}
.pagination li a {
background-image: url("img/pagination.png");
background-position: 0 0;
display: block;
float: left;
height: 0;
overflow: hidden;
padding-top: 13px;
width: 13px;
}
.pagination li.current a, .pagination li.current a:hover { background-position: 0 -13px; }
.pagination li a:hover { background-position: 0 -26px; }
.container {
width: 929px;
margin: 25px auto;
}
.header {
background: rgb(0,132,173);
background: -moz-linear-gradient(top, rgba(0,132,173,1) 0%, rgba(0,0,0,1) 100%);
background: -webkit-linear-gradient(top, rgba(0,132,173,1) 0%, rgba(0,0,0,1) 100%);
background: linear-gradient(to bottom, rgba(0,132,173,1) 0%, rgba(0,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0084ad', endColorstr='#000000', GradientType=0 );
display: table;
padding: 0 0 10px;
position: relative;
width: 929px;
}
.logo-flash {
height: 110px;
left: 10px;
position: absolute;
top: 65px;
width: 400px;
}
.logo {
background: url(img/logo.png) no-repeat 0 0;
float: left;
height: 80px;
margin: 10px 0 0 10px;
width: 254px;
}
.nav-bar {
list-style: none;
margin: 20px 10px 0;
float: right;
padding: 0;
font-family: Raleway
}
.nav-bar>li {
float: left;
position: relative
}
.nav-bar a {
color: #fff;
font-family: HelveticaNeueLTStd57Condensed;
text-decoration: none;
font-size: 14px;
position: relative;
border: 1px solid transparent;
margin: 0 3px;
border-radius: 3px;
padding: 5px 18px;
text-transform: uppercase
}
.nav-bar a:hover {
color: #fff;
background: #0183aa;
border: 1px solid #0183aa
}
.nav-bar .active a {
color: #0183aa;
background: #fff;
border: 1px solid #fff
}
#btn-area[type="checkbox"], label.btn-area { display: none }
label.btn-area { display: none }
.btn-facebook {
background: url(img/btn-facebook.png);
width: 107px;
display: block;
height: 30px;
display: block;
opacity: 1;
float: right;
clear: both;
margin: -30px 15px 0 0;
}
.btn-facebook:hover { opacity: 0.8; }
.cols {
width: 100%;
display: table;
padding: 0 0 20px;
}
.cols2 {
display: inline-block;
float: left;
width: 50%;
}
.cols3 {
display: inline-block;
float: left;
width: 33%;
}
.links {
background-color: #EBEBEB;
border: 1px solid #DDDDDD;
border-radius: 8px 8px 8px 8px;
float: left;
margin: 15px 0 15px 15px;
padding: 30px;
text-align: center;
}
.well-info {
background-color: #1f4e79;
border-radius: 12px;
float: left;
margin: 15px 0 15px 15px;
padding: 30px 20px;
text-align: center;
}
.well-info h4 { color: #ffc000; }
.well-info a { color: #fff; }
.responsive {
width: 100%;
height: auto
}
.logo-tt {
float: right;
margin: -17px -56px 0 0;
}
.main {
width: 100%;
background: #fff;
}
.article {
display: table;
height: auto;
padding: 0 9px 20px;
width: 910px;
}
.sidebar {
float: left;
margin-top: 15px;
width: 210px;
}
.aside { height: 180px; }
.sidepic { position: relative; }
a.btn-descargar {
background: url("img/descargar-pdf.jpg") no-repeat left center;
color: #6A7278;
display: block;
font-family: "Times New Roman", Times, serif;
font-size: 18px;
font-style: italic;
line-height: 20px;
padding: 17px 0 17px 75px;
text-decoration: none;
min-height: 72px;
vertical-align: middle;
}
a.btn-descargar:hover { color: #C00; }
.content {
color: #6A7278;
float: right;
font-family: HelveticaNeueLTStd57Condensed;
font-size: 14px;
line-height: 16px;
margin-right: 55px;
padding: 10px 0;
text-align: justify;
width: 597px;
}
.content ul, .content ol { padding: 0 0 5px 40px; }
.nav ul {
list-style: none;
margin: 15px 0 0 0;
}
.nav ul li { }
.nav ul a, .nav ul a:visited {
background: url(img/bg-btn-left.png) right center no-repeat;
padding: 3px 0 3px 15px;
display: block;
width: 185px;
text-decoration: none;
color: #0183aa;
font-family: HelveticaNeueLTStd57Condensed;
font-size: 14px;
line-height: 31px;
text-transform: uppercase;
text-shadow: 1px 1px 1px #bccfd5;
transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
}
.nav ul a:hover, .nav ul a:active, .nav ul a:focus {
background: url(img/bg-btn-left.png) left center no-repeat;
color: #6a6d6e;
padding: 3px 0 3px 25px;
text-shadow: 1px 1px 1px #bbbdbe;
}
.footer {
background: #fff;
clear: both;
font-family: HelveticaNeueLTStd57Condensed;
margin-bottom: 25px;
margin-top: 30px;
padding-bottom: 25px;
padding-top: 20px;
position: relative;
width: 929px;
}
.footer:after {
background: rgb(0,132,173);
background: -moz-linear-gradient(left, rgba(0,132,173,1) 0%, rgba(0,0,0,1) 100%);
background: -webkit-linear-gradient(left, rgba(0,132,173,1) 0%, rgba(0,0,0,1) 100%);
background: linear-gradient(to right, rgba(0,132,173,1) 0%, rgba(0,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0084ad', endColorstr='#000000', GradientType=1 );
content: "";
position: absolute;
height: 10px;
width: 100%;
left: 0;
top: 0;
}
.address {
color: #555;
font-size: 14px;
line-height: 16px;
text-shadow: 1px 1px 1px #fff;
}
.copy {
color: #555;
font-size: 12px;
line-height: 14px;
}
.address, .copy { padding: 0 20px 20px; }
.section, .footer, .aside, .nav, .figure, .logo { display: block; }
#pop-lightbox img {width: auto;height: 100px;}
.pistas-page #pop-lightbox {display: table;text-align: center;width: 100%;}
.pistas-page #pop-lightbox a {display: block;float: left;margin: 0;padding: 3px;}
.pistas-page #pop-lightbox img {width: 193px;display: block;}
.thu-catalogo {
text-align: center;
width: 100%;
}
.txt-left { text-align: left; }
.section iframe { width: 100%; }
@media(max-width:1200px) {
.container { width: 980px }
.responsive {
height: auto;
width: 100%
}
.logo-tt { margin-right: 0; }
.header { width: 100%; }
.article {
width: 100%;
padding: 0 0 20px;
}
.footer { width: 100%; }
.sidebar { width: 25%; }
.content {
margin-right: 40px;
width: 70%;
}
.logo-flash { width: auto; }
.slides_container, .slides_container div, .slide-txt, .slides_control img { width: 685px; }
.pagination { float: left; }
.cols2 { width: 100%; }
}
@media(max-width:992px) {
.container { width: 760px }
.content {
margin-right: 30px;
width: 65%;
}
.pistas-page #pop-lightbox img {width: 158px;}
.slides_container, .slides_container div, .slide-txt, .slides_control img { width: 505px; }
}
@media(max-width:768px) {
.container {
margin: 0;
width: 100%
}
#btn-area[type="checkbox"], label.btn-area { display: none }
#area { display: none }
label.btn-area {
background: url(img/menu.png) center -10px no-repeat;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 2px;
color: #fff;
cursor: pointer;
display: block;
float: right;
height: 40px;
margin: 8px 16px 0;
position: relative;
width: 45px;
z-index: 9999;
}
#btn-area[type="checkbox"]:checked ~ nav#area {
background: gray;
border-top: 1px solid gray;
display: block;
z-index: 999;
left: 0;
position: absolute;
top: 100px;
width: 100%
}
.nav-bar {
display: table;
float: none;
margin: 15px auto 0;
padding-bottom: 15px
}
.nav-bar a { padding: 5px }
.content {
margin-right: 0;
padding: 30px 5%;
width: 90%;
}
.sidebar {
padding: 30px 5%;
width: 90%;
position: relative;
}
.footer {
margin-bottom: 0;
margin-top: 0;
}
.slideshow { overflow: hidden; }
.cols3 { width: 100%; }
.aside {
position: absolute;
top: -62px;
left: 0;
width: 100%;
}
.sidepic {
position: relative;
margin: 0 auto;
display: table;
float: none;
}
.sidebar .nav { padding-top: 88px; }
.pistas-page .sidebar .nav { padding-top: 220px; }
.well-info {
position: absolute;
top: 100px;
left: 0;
width: calc(100% - 80px);
margin: 20px;
}
}
@media(max-width:480px) {
.slideshow {
margin: 0 auto;
width: 350px;
}
.logo-tt { display: none }
.nav-bar>li {
margin: 0 5%;
padding: 10px 0;
text-align: center;
width: 90%
}
.nav-bar a {
border-bottom: 1px solid;
display: block;
margin: 0;
width: 100%
}
.nav-bar .active:before {
position: absolute;
top: 5px;
width: 50%
}
.nav-bar a:hover:before {
position: absolute;
top: 5px;
width: 50%;
top: -4px;
left: 0
}
}
@media(max-width:400px) {
.slideshow { width: 320px; }
}
@media(max-width:380px) {
.slideshow { width: 270px; }
.logo {
float: none;
margin: 10px auto;
}
label.btn-area {
float: none;
margin: 8px auto;
}
.btn-facebook {
float: none;
margin: 0 auto;
}
#btn-area[type="checkbox"]:checked ~ nav#area { top: 188px; }
}