/*
*   --------------------- ESPECIAL EMT -----------------------
*
* Rojo      #0f4ca0
* Amarillo  #ffec00
* Gris      #98999a
*       font-family: 'Anton', sans-serif;
*       font-family: 'IBM Plex Serif', serif;
*
*/
@font-face {
    font-family: 'Guardian Sans';
    src: url("https://static3.lasprovincias.es/squido/1.0.102/assets/fonts/guardian-sans/GuardianSans-Black-Web.eot");
    src: url("https://static3.lasprovincias.es/squido/1.0.102/assets/fonts/guardian-sans/GuardianSans-Black-Web.eot?#iefix") format("embedded-opentype"), url("https://static3.lasprovincias.es/squido/1.0.102/assets/fonts/guardian-sans/GuardianSans-Black-Web.woff2") format("woff2"), url("https://static3.lasprovincias.es/squido/1.0.102/assets/fonts/guardian-sans/GuardianSans-Black-Web.woff") format("woff");
    font-weight: 900;
    font-style: normal;
    font-stretch: normal
}

@font-face {
    font-family: 'Guardian Sans';
    src: url("https://static3.lasprovincias.es/squido/1.0.102/assets/fonts/guardian-sans/GuardianSans-Semibold-Web.eot");
    src: url("https://static3.lasprovincias.es/squido/1.0.102/assets/fonts/guardian-sans/GuardianSans-Semibold-Web.eot?#iefix") format("embedded-opentype"), url("https://static3.lasprovincias.es/squido/1.0.102/assets/fonts/guardian-sans/GuardianSans-Semibold-Web.woff2") format("woff2"), url("https://static3.lasprovincias.es/squido/1.0.102/assets/fonts/guardian-sans/GuardianSans-Semibold-Web.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-stretch: normal
}

@font-face {
    font-family: 'Guardian Sans';
    src: url("https://static3.lasprovincias.es/squido/1.0.102/assets/fonts/guardian-sans/GuardianTextSans-Regular-Web.eot");
    src: url("https://static3.lasprovincias.es/squido/1.0.102/assets/fonts/guardian-sans/GuardianTextSans-Regular-Web.eot?#iefix") format("embedded-opentype"), url("https://static3.lasprovincias.es/squido/1.0.102/assets/fonts/guardian-sans/GuardianTextSans-Regular-Web.woff2") format("woff2"), url("https://static3.lasprovincias.es/squido/1.0.102/assets/fonts/guardian-sans/GuardianTextSans-Regular-Web.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-stretch: normal
}
@font-face{
    font-family:Vocento Web Lig;
    src:url("https://static3.lasprovincias.es/squido/1.0.102/assets/fonts/vocento-icons/VocentoWebLig-Regular.eot");
    src:url("https://static3.lasprovincias.es/squido/1.0.102/assets/fonts/vocento-icons/VocentoWebLig-Regular.eot?#iefix") format("embedded-opentype"),url("https://static3.lasprovincias.es/squido/1.0.102/assets/fonts/vocento-icons/VocentoWebLig-Regular.woff") format("woff"),url("https://static3.lasprovincias.es/squido/1.0.102/assets/fonts/vocento-icons/VocentoWebLig-Regular.woff2") format("woff2"),url("https://static3.lasprovincias.es/squido/1.0.102/assets/fonts/vocento-icons/VocentoWebLig-Regular.ttf") format("truetype");
    font-weight:400;font-style:normal
}


/* ----- RESET ----- */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
    font: inherit;
    box-sizing: border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}



/* ------- GENERICO ------ */
body {
    background-color: #0b3776;
    font-family: 'Guardian Sans', sans-serif;
    color: whitesmoke;
    font-size: 19px;
    line-height: 1.4;
    /*background-image: url('../images/fondo-TORRETA.png');*/
    background-repeat: no-repeat;
    background-position: 0 830px;
}
p {
    margin-bottom: 15px;
}
li {
    list-style-type: none;
}
a {
    color: #fff;
}
a:hover {
    color:  #de0011;
}
main, .cabecera {
    width: 1040px;
    background-color: rgba(255,255,255,.1);
    margin: 0 auto;
    padding: 0 28px;
}
header .logoPodcast {
    text-indent: -9999px;
    width: 300px;
    height: 25px;
    margin: 10px auto 0;
    background-image: url('../images/elcorreo.svg');
    background-repeat: no-repeat;
}

/* ////////////////  PORTADILLA  ////////////////// */
.portadilla {
    background-color: #fbfbf9; /* #0f4ca0 */
    height: 680px;
    width: 100%;
}
.cabecera {
    padding: 50px 0 0;
    height: 100%;
    position: relative;
    background-color: transparent;
    background-image: url('../images/gif-desde-la-torreta.gif');
    background-repeat: no-repeat;
    background-position: right;
}
.cabecera:before {
    content: '↓';
    font-family:Vocento Web Lig;
    z-index: 52;
    font-size: 50px;
    position: absolute;
    color: #fff;
    bottom: -10px;
    left: calc(50% - 30px);
    animation: animTres 3s ease-in-out infinite;
}
.cabecera:after {
    background-color: rgba(255,255,255,.1);
    content: '';
    width: 100%;
    height: 100%;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
}
h3 {
    font-family: 'IBM Plex Serif', serif;
    font-size: 27px;
    font-weight: 300;
    position: absolute;
    top: 67px;
    left: 28px;
	color:#333;
}
h1 {
    font-family: 'Anton', sans-serif;
    color: #0b3776;
    font-size: 47px;
    text-transform: uppercase;
    position: absolute;
    top: 100px;
    left: 28px;
}
h1 span {
    font-size: 160px;
    display: block;
    position: relative;
    top: -45px;
    left: -2px;
}
.protagonistas img {
    position: absolute;
    z-index: 52;
    opacity: .8;
}
.gerente {
    top: 360px;
    left: 70px;
    animation: animUno 3s ease-in-out infinite;
}
.grezzi {
    top: 220px;
    left: 410px;
    animation: animDos 3s ease-in-out infinite;
}
.celia {
    top: 300px;
    left: 600px;
    animation: animTres 3s ease-in-out infinite;
}

/* //////////////// CABECERA  ////////////////////// */
header {
    width: 100%;
    height: 48px;
    display: block;
    margin: 0;
    background-color: #fff;
    position: fixed;
    z-index: 99;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: 4px 4px 14px rgba(0,0,0,.2);
    letter-spacing: .02em;
}
header .interior {
    height: auto;
    padding: 0;
    overflow: auto;
    padding-top: 20px;
}
.logoLP {
    float: left;
    width: 200px;
}
.logoLP a, .logoLP a img {
    width: 100%;
}
header nav {
    display: block;
}
/* ///////////////  INTRODUCCIÓN  ////////////////// */
.introduccion {
    width: 80%;
    max-width: 732px;
    margin: 0 auto;
    padding: 40px 0 20px;
    font-family: 'IBM Plex Serif', serif;
    font-size: 25px;
    font-weight: 700;
    text-align: center;
	color: #ffffff;
}
.introduccion p {
    margin-bottom: 40px;
}
p.firma {
    font-family: 'Guardian Sans', sans-serif;
    font-weight: 400;
    font-size: 20px;
    display: inline-block;
    border-bottom: 1px solid #fff;
    line-height: 1.4;
    margin-bottom: 80px;
}
/* ---  REDES ---- */
.redes {
    width: 210px;
    margin: 0 auto;
    font-family: 'Guardian Sans', sans-serif;
    font-weight: 400;
    color: #98999a;
    font-size: 15px;
    line-height: 1.4;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.redes li {
    display: inline-block;
}
a.facebook, a.twitter {
    width: 55px;
    height: 55px;
    text-indent: -9999px;
    background-image: url('../images/tw.png');
    background-size: contain;
    display: inline-block;
    transition-duration: .2s;
    margin: 0 15px 25px;
}
a.twitter:hover, a.facebook:hover {
    transform: scale(1.4);
}
a.facebook {
    background-image: url('../images/fcbk.png');
}


/* ///////////////  CAPITULOS  ///////////////////// */
@keyframes animProxima {
    0%      {transform: rotate(-5deg);}
    50%     {transform: rotate(-4deg);}
    100%    {transform: rotate(-5deg);}
}

@keyframes animUno {
    0 {transform:translate(0,0)}
    50% {transform:translate(5px,-2px)}
    100% {transform:translate(0,0)}
}
    
@keyframes animDos {
    0 {transform:translate(0,0)}
    50% {transform:translate(-5px,-5px)}
    100% {transform:translate(0,0)}
}

@keyframes animTres {
    0 {transform:translate(0,0)}
    50%{transform:translate(0,8px)}
    100%{transform:translate(0,0)}
}


.capitulos {
    border-top: 2px dotted #fff;
    padding-top: 40px;
}
.capitulos section {
    display: flex;
    position: relative;
    padding-bottom: 40px;
    margin-bottom: 40px;
    border-bottom: 2px dotted #fff;
    min-height: 300px;
}
.capitulos .foto {
    flex: 0 0 312px;
    width: 312px;
    height: 270px;
}
section .ficha {
    padding-left: 20px;
}
section.despublicado .foto, section.despublicado .ficha {
    opacity: .3;
}
section.despublicado::after {
    height: 43px;
    padding: 0 10px;
    content: 'Próximamente';
    font-weight: 900;
    font-size: 30px;
    text-transform: uppercase;
    background-color: #0f4ca0;
    opacity: 1;
    z-index: 50;
    position: absolute;
    top: 170px;
    left: 20px;
    transform: rotate(-5deg);
    animation: animProxima 3s ease-in-out infinite;
}
.numCapitulo {
    font-size: 20px;
    letter-spacing: .03em;
    margin-bottom: 10px;
}
.numCapitulo span {
    font-weight: 900;
    color:  #0373ec;
    text-transform: uppercase;
}
h2 {
    font-family: 'IBM Plex Serif', serif;
    font-size: 45px;
    line-height: 1;
    font-weight: 300;
    margin-bottom: 15px;
}
section b {
    background-color: #0373ec;
    padding: 0 5px;
    margin: 0 5px;
}
.c1 {background-image: url('../images/emt1-bitono.jpg');}
.c2 {background-image: url('../images/emt2-bitono.jpg');}
.c3 {background-image: url('../images/emt3-bitono.jpg');}
.c4 {background-image: url('../images/emt4-bitono.jpg');}
.c5 {background-image: url('../images/emt5-bitono.jpg');}
.c6 {background-image: url('../images/emt6-bitono.jpg');}
.c7 {background-image: url('../images/emt7-bitono.jpg');}
.c8 {background-image: url('../images/emt8-bitono.jpg');}
.despublicado .c1 {background-image: url('../images/emt1.jpg');}
.despublicado .c2 {background-image: url('../images/emt2.jpg');}
.despublicado .c3 {background-image: url('../images/emt3.jpg');}
.despublicado .c4 {background-image: url('../images/emt4.jpg');}
.despublicado .c5 {background-image: url('../images/emt5.jpg');}
.despublicado .c5 {background-image: url('../images/emt6.jpg');}
.despublicado .c5 {background-image: url('../images/emt7.jpg');}
.despublicado .c5 {background-image: url('../images/emt8.jpg');}


/* ////////////////  FOOTER  ////////////////////// */
footer {
    width: 100%;
    margin: 0 auto;
    padding-bottom: 50px;
    text-align: center;
    font-size: 18px;
    line-height: 1.8;
    color: #fff;
}
footer .tit {
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: .07em;
    margin-bottom: 15px;
}
footer p {
    margin-bottom: 0;
}
footer .creditos {
    margin-bottom: 60px;
}
footer .logoPodcast {
    text-indent: -9999px;
    width: 210px;
    height: 16px;
    margin: 0 auto 15px;
    background-image: url('../images/logo-lpPodcast-NEG.svg');
    background-repeat: no-repeat;
}
.legal {
    font-size: 12px;
    line-height: 1.8;
    color: #98999a;
}




/*
*    - - - - R W D - - - - 
*
*/
@media (max-width: 1040px) {
    /* ------- GENERICO ------ */
    body {
        background-position: 0 750px;
    }
    main, .cabecera {
        width: 100%;
        margin: 0;
        padding: 0 28px;
    }
    header .logoPodcast a {
        overflow-y: auto;
        height: auto;
        display: block;
        width: 100%;
    }

    /* ////////////////  PORTADILLA  ////////////////// */
    .portadilla {
       /* height: 710px;*/
        width: 100%;
    }
    .cabecera {
        background-size: 100%;
        background-position: right bottom;
    }
    .cabecera:before {
        bottom: 20px;
    }
    .gerente {
        left: 30px;
        width: 40%;
        max-width: 282px;
    }
    .grezzi {
        width: 30%;
        max-width: 221px;
    }
    .celia {
        left: auto;
        top: 330px;
        right: 30px;
        width: 30%;
        max-width: 212px;
    }
     /* ///////////////  CAPITULOS  ///////////////////// */
    .numCapitulo {
        font-size: 20px;
    }
    h2 {
        font-size: 35px;
    }
}


/*    - - - - 700 P X - - - - */

@media (max-width: 699px) {

    /* ------- GENERICO ------ */
    body {
        font-size: 17px;
        background-position: 0 680px;
    }
    main, .cabecera {
        width: 100%;
        margin: 0;
        padding: 0 28px;
    }
    header .logoPodcast {
        width: 225px;
        height: 20px;
        margin: 13px auto 0;
    }
    header .logoPodcast a {
        overflow-y: auto;
        height: auto;
        display: block;
        width: 100%;
    }

    /* ////////////////  PORTADILLA  ////////////////// */
    .portadilla {
        /*height: 670px;*/
        width: 100%;
    }
    .cabecera {
      /*  background-size: 180%;*/
		background-image: url(../images/gif-desde-la-torreta-M.gif);
		background-position: bottom;

    }
    .cabecera:before {
        bottom: 20px;
    }
    .cabecera:after {
    }
    h3 {
        font-size: 22px;
        top: 60px;
        left: 28px;
    }
    h1 {
        font-size: 40px;
        top: 87px;
        left: 28px;
    }
    h1 span {
        font-size: 90px;
        top: -20px;
        left: -5px;
    }
    .protagonistas img {
    }
    .gerente {
        top: 325px;
        left: 0;
        width: 40%;
    }
    .grezzi {
        top: 270px;
        left: 40%;
        width: 30%;
    }
    .celia {
        top: 300px;
        left: 60%;
        right: auto;
        width: 30%;
    }

    /* //////////////// CABECERA  ////////////////////// */
    header {
    }
    header .interior {
    }
    .logoLP {
        width: 200px;
    }
    .logoLP a, .logoLP a img {
    }

    /* ///////////////  INTRODUCCIÓN  ////////////////// */
    .introduccion {
        width: 100%;
        padding: 120px 0 10px;
        font-size: 20px;
    }
    .introduccion p {
    }
    p.firma {
        font-size: 18px;
    }
    /* ---  REDES ---- */
    .redes {
    }
    .tw a, .fb {
    }
    .tw a:hover, .fb:hover {
    }
    .fb {
    }


    /* ///////////////  CAPITULOS  ///////////////////// */
    .capitulos {
    }
    .capitulos section {
        flex-direction: column;
    }
    .capitulos .foto {
       /* flex: 0 0 70vw;*/
        width: 100%;
        height: 10px;
        background-size: contain;
        margin-bottom: 10px;
		background-repeat: no-repeat;
    }
    section .ficha {
        padding-left: 0;
    }
    section.despublicado .foto, section.despublicado .ficha {
    }
    section.despublicado::after {
        height: 30px;
        font-size: 20px;
        top: 20px;
        left: calc(50% - 93px);
    }
    .numCapitulo {
        font-size: 17px;
    }
    .numCapitulo span {
    }
    h2 {
        font-size: 35px;
        line-height: 1;
        font-weight: 300;
        margin-bottom: 15px;
    }
    section b {
    }


    /* ////////////////  FOOTER  ////////////////////// */
    footer {
        font-size: 16px;
    }
    footer .tit {
    }
    footer p {
    }
    footer .creditos {
    }
    footer .logoPodcast {
    }
    .legal {
    }
}
@media (max-width: 600px) {.portadilla {height: 1100px;} .cabecera{background-size: 170%;}}
@media (max-width: 550px) {.portadilla {height: 1000px;} .cabecera{background-size: 170%;}}
@media (max-width: 500px) {.portadilla {height: 830px;} .cabecera{background-size: 170%;}}
@media (max-width: 450px) {.portadilla {height: 830px;} .cabecera{background-size: 170%;}}
@media (max-width: 400px) {.portadilla {height: 810px;} .cabecera{background-size: 170%;}}
@media (max-width: 330px) {.portadilla {height: 720px;} .cabecera{background-size: 170%;}}

