/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #fff;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

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

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

@font-face {
    font-family: 'flama';
    src: url('../fonts/flamabook-webfont.eot');
    src: url('../fonts/flamabook-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/flamabook-webfont.woff') format('woff'),
         url('../fonts/flamabook-webfont.ttf') format('truetype'),
         url('../fonts/flamabook-webfont.svg#Sri-TSCRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'flama-semibold';
    src: url('../fonts/Flama-Semibold.eot');
    src: url('../fonts/Flama-Semibold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Flama-Semibold.woff') format('woff'),
         url('../fonts/Flama-Semibold.ttf') format('truetype'),
         url('../fonts/Flama-Semibold.svg#Sri-TSCRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'flama-light';
    src: url('../fonts/Flama-Light.eot');
    src: url('../fonts/Flama-Light.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Flama-Light.woff') format('woff'),
         url('../fonts/Flama-Light.ttf') format('truetype'),
         url('../fonts/Flama-Light.svg#Sri-TSCRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'flama-medium';
    src: url('../fonts/flama-medium-webfont.eot');
    src: url('../fonts/flama-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/flama-medium-webfont.woff') format('woff'),
         url('../fonts/flama-medium-webfont.ttf') format('truetype'),
         url('../fonts/flama-medium-webfont.svg#Sri-TSCRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 144dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
   
/* ==========================================================================
   HOME
   ========================================================================== */   
*{margin:0; padding:0;}
img{border:0}
body{ background:url(../img/pre-home/bg.png) no-repeat top center #000; font-size: 10px;}

.limpiar{ clear:both;}

#centrado{width:100%;max-width:1060px !important;margin:0 auto;text-align:left;}
#cabecera {position: relative;}
#cabecera #logo_cabecera{margin:0 auto; text-align: center;}






/* INICIO ESTILOS PRE-HOME */
*{font-family: "flama";}
.rojo{ color:#E2001A}
.flotado{ float:left}
.texto_columna{ }

.mobile{display:none;}

/*BTN Descubre más */
#descubreMas{position: absolute;font-size: 19px;color: #e30513;right: 5%;bottom: 20px;}
#descubreMas a{color: #e30513;text-decoration:none;font-family: "flama-medium"; margin-right: 15px;}
#descubreMas a:hover{text-decoration: none;}
#contenido {margin-top: 25px;}
#contenido #titulo {width: 92%; margin: 0px auto}

/* Titulo */
h1{font-size:410%; color:#FFF;font-family: 'flama-light';margin:0;}
h2{color:#FFF;font-size:350%;font-family: 'flama-light';margin:0;}
h3{margin-top: 15px;font-family: 'flama-light';font-size: 250%; color: #fff;}
.red{color:#e30513;}
.book{font-family: 'flama-light';}


/* Coche */
#coche{height: 430px;margin: 0 auto;padding-top: 150px;position: relative;text-align: center;max-width: 700px;width:90%;}
#coche #car{width:100%;padding:0;height: auto;}
#coche a{color:#fff;font-family: "flama";font-size: 20px;text-decoration: none;padding-left:50px;text-align: left;line-height: 22px;height:50px;display:block;padding-top:20px;cursor:pointer;padding-bottom: 10px;}
#coche .mas{cursor:pointer;}

#potencia{width:280px;text-align: left;position:absolute;left: 600px;top: 113px;}
#potencia a{background:url(../img/pre-home/potencia.png) no-repeat left center}
#potencia .box{
    border-left: 2px solid #ccc;
    border-top: 1px solid #ccc;
    height: 80px;
    left: -16px;
    position: absolute;
    transform: skewX(-60deg);
    width: 190px;
}
#potencia .mas{position:relative; top: 65px; left: -95px;}

#conduccion{ width: 160px; text-align: left; position: absolute; left: 340px; top: -30px;}
#conduccion a{background:url(../img/pre-home/conduccion.png) no-repeat left center;padding-left:65px;}
#conduccion .box{
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    height: 170px;
    left: 52px;
    position: absolute;
    transform: skewX(-12deg);
    width: 110px;
}
#conduccion .mas{position:relative;top: 160px;left: 20px;}

#consumo{left: -150px; position: absolute; text-align: left; top: 70px; width: 220px;}
#consumo a{background:url(../img/pre-home/consumo.png) no-repeat left center;padding-left:55px;}
#consumo .box{
       border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    height: 75px;
    left: 72px;
    position: absolute;
    /* top: -150px; */
    transform: skewX(30deg);
    width: 135px;
}
#consumo .mas{ left: 220px; position: relative; top: 70px;}

#contaminacion{left: -125px;position: absolute;text-align: left;top: 448px;width: 220px;}
#contaminacion a{background:url(../img/pre-home/contaminacion.png) no-repeat left center;padding-left:55px;}
#contaminacion .box{
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    height: 155px;
    left: 48px;
    position: absolute;
    top: -150px;
    transform: skewX(5deg);
    width: 135px;
}
#contaminacion .mas{left: 160px;position: relative;top: -245px;}

#limpia{ left: 332px; position: absolute; text-align: left;  top: 450px; width: 225px;}
#limpia a{background:url(../img/pre-home/limpia.png) no-repeat left center;padding-left:65px;}
#limpia .box{
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    height: 155px;
    left: 79px;
    position: absolute;
    top: -145px;
    transform: skewX(-12deg);
    width: 94px;
}
#limpia .mas{ left: 80px; position: relative; top: -235px;}

.strong{font-family: "flama-medium";}

.line{width:700px;border-bottom:1px solid #a5a8a9;margin:0 auto;}

.cont-desp div{width:575px; margin:0 auto;display:none;margin-top:-160px;margin-bottom:50px;padding:100px 200px 50px;font-size:18px;color:#fff;}
.cont-desp div.desplegado {border:1px solid #fff; border-top: 0px; min-height: 180px;}
.cont-desp .close{background: rgba(0, 0, 0, 0) none repeat scroll 0 0;color: #e30513;display: block;float: right;font-family: "flama";font-size: 32px;height: 20px;margin: 160px -180px 0 0;padding: 0;width: 20px;cursor:pointer;z-index:1000;}
.cont-desp#desp-limpia .close {margin-top: 205px;}

.cont-desp ul{margin-top:50px;}
.cont-desp li{list-style-image: url(../img/pre-home/li-style-desp.png);}
#contaminacion #desp-contaminacion p{margin-bottom:100px; color: #fff;}

#info-men{width:400px;text-align: center;margin:30px auto 50px;}
#info-men img, .btn-despInfo{display:inline;}
.btn-despInfo{cursor:pointer;font-size:16px;font-family: "flama";color:#fff;margin-left:20px;height:30px;}
.btn-despInfo span{display:inline-block;}
.btn-despInfo .arrow-comp, .arrow{
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: 5px solid #fff;
    font-family: "flama-medium";
    color: #e1261c;
    display: inline-block;
    font-size: 30px;
    line-height: 20px;
    letter-spacing: -3px;
    margin-top: 8px;
    position: relative;
    top: 5px;
    margin-left: 25px;
}

#compruebalo{width:700px;margin:0 auto;font-family: "flama";font-size:16px;color:#fff;display:none;}
#compruebalo p{line-height:18px;margin-bottom:50px;}
#compruebalo img{margin:0 auto 30px;}
#comrpuebalo ul{margin:30px auto;}
#compruebalo li{width:45%;float:left;margin-right:5%;list-style-image: url(../img/pre-home/li-style.png);}
#compruebalo .leyenda{font-family: "flama";font-size: 12px;clear:both;margin-left:35px;}

@media only screen and (max-width: 990px) {
    /* Style adjustments for viewports that meet the condition */
    #centrado {
      width: 768px !important;
      margin: 0 auto;
      text-align: left;
    }
    #contenido{
        padding:0 4%;
        width:92%!important;
    }

    #consumo {left: -110px;}
    #consumo .mas {left: 165px;top: 80px;}
    #consumo .box {height: 94px;width: 100px;transform: skewX(15deg); left: 65px;}
    #potencia {left: 475px;}
    #potencia .mas {left: 0}
    #potencia .box {height: 75px; transform: skewX(-27deg); width: 190px; left: 33px;}
    /*
    #potencia{
        left: 350px;
    }
    #potencia .mas{left:5px;}
    #potencia .box{
        transform: skewX(-25deg);
        left: 35px;
        height: 70px;
        width: 140px;
    }
    #consumo{
        left: 510px;
        top: 83px;
    }
    #consumo .mas{
        left: 28px;
    }
    #consumo .box{
        left: 48px;
        transform: skewX(-11deg);
    }
    #conduccion{
        left: 231px;
        top: 22px;
    }
    #contaminacion{
        left: 490px;
        top: 410px;
    }
    #limpia{
        left: -29px;   
    }
    #limpia .mas{
        left:190px;
    }
    #limpia .box{
        left: 56px;
        transform: skewX(6deg);
    }*/

    .cont-desp div{
        padding: 100px 80px 50px;
    }
    .cont-desp .close{
            margin: 170px -65px 0 0;
    }

}


@media only screen and (max-width: 800px) {
    /* Style adjustments for viewports that meet the condition */
    #centrado {
      width: 600px !important;
      margin: 0 auto;
      text-align: left;
    }
    #descubreMas{bottom:0px; right: -5%;}
    #contenido{
        padding:0 4%;
        width:92%!important;
    }
    #coche a {font-size: 18px;}

    #conduccion {left: 250px; top: 30px; height: 100px;}
    #conduccion .box {height: 100px;}
    #conduccion .mas {top: 85px; left: 30px;}

    #contaminacion {top:350px;    left: -25px;}
    #contaminacion .mas {top: -170px; left: 70px;}
    #contaminacion .box { height: 90px; top: -78px; transform: skewX(20deg); left: 38px; width: 60px;}

    #limpia { left: 250px; top: 385px;}
    #limpia .mas {left: 75px; top: -175px;}
    #limpia .box { height: 90px; top: -80px;}
    #potencia { left: 350px;}


    #car{height:360px;}

    .cont-desp div{
        padding: 100px 20px 50px;
        width:500px;
    }
    .cont-desp .close{
        margin: 80px -8px 0 0;
    }
    .line{width:500px;}
    #compruebalo{width:500px;}
    #compruebalo img{width:100%;}
}
@media only screen and (max-width: 800px) {
    h1{font-size: 376%;line-height: 40px;}
    h2{font-size: 285%;}
    .cont-desp div{margin-top:-270px;}
    .cont-desp div.desplegado {min-height: auto;}
    .cont-desp #desp-limpia .close {margin-top: 210px;}
    
}
@media only screen and (max-width: 650px) {
    .desktop{display:none;}
    .mobile{display:block;}
    /* Style adjustments for viewports that meet the condition */
    #centrado {
      width: 100% !important;
      margin: 0 auto;
      text-align: left;
    }

    #cabecera #logo_cabecera{width:80%;height:auto;}
    #cabecera #logo_cabecera img{width:100%;}

    #titulo{margin-top:40px;}
    h1{font-size:40px;line-height: 50px}
    h1 .red{font-size: 58px;}
    h1 .book{font-size: 48px;}
    h2{line-height: 30px;}
    h3 {margin-top: 25px; font-size: 200%;}
    #coche-mob{width:100%;margin-top:50px;}
    #coche-mob img{width:100%;}
    #descubreMas{bottom:10px;}


    #contenido{padding:0 4%;width:92%!important;}

    .line{width:80%;margin-top:40px;}
    #info-men{width:80%;margin-bottom: 80px;}
    .btn-despInfo{display:inline-block;margin-top: 30px;padding-top: 5px;padding-right: 40px;}
    #compruebalo{width:100%;margin-top:20px;}
    #compruebalo li{width: 90%;margin-bottom: 40px;}
    #compruebalo img{width:100%;}


    #potencia-mob,#conduccion-mob,#consumo-mob,#contaminacion-mob,#limpia-mob{display:block;width:100%;font-family: "flama-light"; margin: 25px 0;}
    .arrow{float:right;margin-top:-55px;text-align: center;border:2px solid #fff;}

    .desplegable{display:none;}

    #coche-mob a{
        padding-left: 65px;
        line-height: 20px;
        height: 60px;
        display: table-cell;
        vertical-align: middle;
        width: 70%;
        font-size: 23px;
    }

    .desplegable{    
        width: 90%;
        padding: 20px;
        color: #fff;
        font-family: "flama";
        font-size: 16px;
        margin:10px auto;
    }
    .desplegable li{list-style-image: url(../img/pre-home/li-style-desp.png);}
    #potencia-mob a{background:url(../img/pre-home/potencia.png) no-repeat left center; background-size: 15%;}
    #conduccion-mob a{background:url(../img/pre-home/conduccion.png) no-repeat left center; background-size: 15%;}
    #consumo-mob a{background:url(../img/pre-home/consumo.png) no-repeat left center; background-size: 15%;}
    #contaminacion-mob a{background:url(../img/pre-home/contaminacion.png) no-repeat left center; background-size: 15%;}
    #limpia-mob a{background:url(../img/pre-home/limpia.png) no-repeat left center; background-size: 15%;}
    #desp-contaminacion p{margin-top:1em;}

#saber-mas-mov{position: fixed;bottom:0;background:rgba(112,114,113,0.8);width:90%;padding:2% 5%;text-align: right;}
#saber-mas-mov a{font-family: "flama";font-size:18px;color:#fff;text-align: right;text-decoration: none;}

}

@media only screen and (max-width: 400px) {

    h1 .red{font-size: 54px;}

}

@media only screen and (max-width: 375px) {

    h1 .red{font-size: 53px;}
    h1 .book{font-size: 48px;}
    h2{font-size:270%;}

    #coche-mob a{font-size:21px;}

}

@media only screen and (max-width: 366px) {

    h1 .red{font-size: 52px;}
    h2{font-size:250%;}

}

@media only screen and (max-width: 320px) {
    h1{font-size:32px;line-height:40px;}
    h1 .red{font-size: 46px;}
    h1 .book{font-size: 40px;}
    h2{font-size:228%;}

    #coche-mob a{font-size:17px;}

}
/* FIN ESTILOS PRE-HOME */