/* --------------------------------
709069-380
Primary style

-------------------------------- */
*, *::after, *::before {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  color: #444;
  background-color: #ffffff;
}

a {
  color: #2a76e8;
  text-decoration: none;
}
p a{border-bottom: 1px dotted #666;font-weight: 400;}

img, svg {
  max-width: 100%;
}

.cd-header {
  height: auto;
  border-bottom: 1px solid #e6e6e6;
  text-align: center;
}
.cd-header h1 {
  font-family: Georgia, serif;
  font-size: 2rem;
  color: #141414;
}
@media only screen and (min-width: 1100px) {
  .cd-header {
    height: auto;
  }
  .cd-header h1 {
    font-size: 3.6rem;
  }
}

.cd-footer {
  background-color: #fff;
  text-align: center;
  border-top: 10px solid #eee;
}
.cd-footer p {
  font-family: Georgia, serif;
  font-size: 1.8rem;
  line-height: 250px;
}

/* --------------------------------

download button

-------------------------------- */
.cd-nugget-info a {
  position: relative;
  display: inline-block;
  padding: 1.2em 1.6em;
  border-radius: 50em;
  background: #2a76e8;
  font-size: 14px;
  color: #ffffff;
  margin-top: 1em;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
  box-shadow: 0 0 20px rgba(42, 118, 232, 0.4);
}
.no-touch .cd-nugget-info a:hover {
  opacity: .8;
}
.cd-nugget-info span {
  vertical-align: middle;
  display: inline-block;
}
.cd-nugget-info span svg {
  display: block;
}
.cd-nugget-info .cd-nugget-info-arrow {
  fill: #ffffff;
}
@media only screen and (min-width: 1100px) {
  .cd-nugget-info a {
    margin-top: 1.4em;
  }
}

/* --------------------------------

Articles

-------------------------------- */
.cd-articles {
  position: relative;
  width: 90%;
  max-width: 650px;
  margin: 0 auto 3em;
}
.cd-articles::before {
  /* never visible - this is used in jQuery to check the current MQ */
  content: 'mobile';
  display: none;
}
.cd-articles article {
  padding: 3em 0;
}

.cd-articles article:last-of-type {
  border-bottom: none;
}
.cd-articles h1 {
  margin: 0 0 .2em;
  background: #ce0010;
  color: #fde398;
  line-height: 1.35em;
  font-size: 5rem;
  font-family: 'Roboto', sans-serif;font-weight: 900;display: inline;
}
.cd-articles p {
  padding: 1em 0;
  line-height: 1.6;
}
.cd-articles p.Sumario{color: #222;font-size: 2rem;font-weight: 500;font-style: italic;}
.Balazo{color:#ce0010;font-size: 16px;font-weight: 400;margin-bottom: 10px;}

.cd-articles p:last-of-type {
  padding-bottom: 0;
}
@media only screen and (min-width: 1100px) {
  .cd-articles {
    width: 700px;
    max-width: none;
    margin-bottom: 5em;
  }
  .cd-articles::before {
    /* never visible - this is used in jQuery to check the current MQ */
    content: 'desktop';
  }
  .cd-articles h1 {
    font-size: 5rem;
  }
  .cd-articles p {
    font-size: 1.8rem;
  }
}

/* --------------------------------

Aside

-------------------------------- */
.cd-read-more {
  /* hide on mobile */
  display: none;
  width: 290px;
  background-color: #f2f2f2;
}
.cd-read-more li {
  counter-increment: articles;
}
.cd-read-more a {
  display: block;
  position: relative;
  padding: 1.6em 1.1em 1.6em 4.3em;
}
.cd-read-more a::before, .cd-read-more a::after {
  position: absolute;
}
.cd-read-more a::before {
  /* article number */
  content: counter(articles);
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 1.1em;
  width: 36px;
  height: 36px;
  line-height: 34px;
  border-radius: 50%;
  color: #b3b3b3;
  font-family: Georgia, serif;
  text-align: center;
  box-shadow: inset 0 0 0 1px #d9d9d9;
  -webkit-transition: background-color 0.3s, color 0.3s;
  -moz-transition: background-color 0.3s, color 0.3s;
  transition: background-color 0.3s, color 0.3s;
}
.cd-read-more a::after {
  /* bottom separation - line */
  content: '';
  left: 50%;
  right: auto;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: 0;
  height: 1px;
  width: 260px;
  background-color: #d9d9d9;
}
.cd-read-more a.read em {
  color: #a6a6a6;
}
.cd-read-more a.read::before {
  background-color: #d9d9d9;
}
.cd-read-more a.reading em {
  color: #000;
}
.cd-read-more a.reading svg {
  display: block;
}
.cd-read-more a.reading::before {
  background-color: #ffffff;
  color: #141414;
}
.cd-read-more li:last-of-type a::after {
  display: none;
}
.cd-read-more em {
  display: block;
  font-size: 1.4rem;
  line-height: 1.2;
  color: #141414;
  /* truncate text with ellipsis */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-transition: color 0.3s;
  -moz-transition: color 0.3s;
  transition: color 0.3s;
}
.cd-read-more b {
  color: #a6a6a6;
  font-size: 1.2rem;
  font-family: Georgia, serif;
  font-style: italic;
}
.cd-read-more svg {
  /* this is the filling circle around the article number */
  display: none;
  position: absolute;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 1.1em;
  stroke: #000;
}
@media only screen and (min-width: 1100px) {
  .cd-read-more {
    display: block;
    position: absolute;
    top: 1.5em;
    right: 0;
  }
  .cd-read-more.fixed {
    position: fixed;
    right: calc(50% - 485px);
  }
}

.clear{clear: both;}
.HalfImg {;float: left;margin:25px 20px 30px -15%;width: 400px;}
.HalfImg.Par{width:368px;float: right;margin: 0 0 0 10px;}
.HalfImg figcaption{font-size: 13px;line-height: 18px;color:#666;font-weight: 400;}
.HalfImg figcaption i{font-weight: 300;color:#999;}
.FullImg{float: none;width: 130%;margin: 25px 20px 30px -15%;}
.FullImg figcaption{font-size: 13px;line-height: 18px;color:#666;font-weight: 400;margin-top:2px;}
.FullImg figcaption i{font-weight: 300;color:#999;}
.cd-articles h3 {font-size: 3rem;font-family: 'Roboto', sans-serif;font-weight:600;margin: 5rem 0 0.25rem;color:#ce0012;}
.cd-read-more em{font-family: 'Roboto', sans-serif;}
.cd-articles p strong{font-weight: 500;}

header #UnTercio{width: 34%;height:100vh;float:left;overflow: hidden;background: url('../img/foto-portada.jpg') no-repeat left top;background-size: cover;}
header #UnTercio img{display: none;}
header #DosTercios{width: 66%;height:100vh;float:left;color: #fff;position: relative;background: #000;}
header #DosTercios #Portadilla{padding: 20px 30px 60px;text-align: left;}
header #DosTercios #Portadilla h1{font:normal 78px/78px 'Roboto', sans-serif;font-weight: 900;color:#fff;margin-bottom: 10px;}
header #DosTercios #Portadilla h1 span{font-weight:300;color: #ce0010;}
header #DosTercios #Portadilla #Sumario{font:300 16px/24px 'Roboto', sans-serif;color: #ddd;}
header #DosTercios #Portadilla #Creditos{font:100 14px/18px 'Roboto', sans-serif;color: #ddd;margin-top:10px;padding-top:10px;border-top: 1px solid #555;display: inline-block;}
header #DosTercios #Portadilla #Creditos span{padding: 0 10px 0 0;}
header #DosTercios #Portadilla #Creditos strong{font-weight:400;}
header #DosTercios nav#Menu{position: absolute;bottom: 0;left:0;right: 0;}
header #DosTercios nav#Menu .ItemMenu{float: left;width: 50%;height: 150px;position: relative;overflow: hidden;}
header #DosTercios nav#Menu .BtnCap1, header #DosTercios nav#Menu .BtnCap3{border-right: 1px solid #666;}
header #DosTercios nav#Menu .BtnCap3, header #DosTercios nav#Menu .BtnCap4{border-top: 1px solid #666;}
header #DosTercios nav#Menu .ItemMenu .Mask{padding: 0;font-family: 'Roboto', sans-serif;font-weight: 900;text-align: left;position: absolute;z-index: 2;background: black;width: 100%;
-webkit-transition:all 0.3s ease;transition:all 0.3s ease;}
header #DosTercios nav#Menu .ItemMenu .Mask .Kicker{font-size:12px;margin-bottom: 20px;position: absolute;top:-15px;left:20px;}
header #DosTercios nav#Menu .ItemMenu .Mask h3{font-size: 36px;line-height: 38px;letter-spacing: 1px;color:white;width: 100%;height: 300px;text-indent: -9999px;}
header #DosTercios nav#Menu .BtnCap1 .Mask{background: url(../img/mask1.png) no-repeat left top;background-size:contain;width: 100%;}
header #DosTercios nav#Menu .BtnCap2 .Mask{background: url(../img/mask2.png) no-repeat left top;background-size:contain;width: 100%;}
header #DosTercios nav#Menu .BtnCap3 .Mask{background: url(../img/mask3.png) no-repeat left top;background-size:contain;width: 100%;}
header #DosTercios nav#Menu .BtnCap4 .Mask{background: url(../img/mask4.png) no-repeat left top;background-size:contain;width: 100%;}
header #DosTercios nav#Menu .ItemMenu .Mask .Sumario{position: absolute;bottom: 0;padding: 15px 20px;font-weight: 400;font-size: 14px;line-height: 17px;}
header #PortadaMobile{display: none;}

header #DosTercios nav#Menu .ItemMenu:hover .Mask{opacity: 0.3;}
header #DosTercios nav#Menu .ItemMenu a{display: block;width: 100%;height: 300px;position: absolute;z-index: 1}
header #DosTercios nav#Menu .ItemMenu a .Sumario{position: absolute;bottom: 0;left: 0;right:0;padding: 90px 20px 15px;text-align:left;display: inline-block;color: #fff;font-size: 14px;line-height: 17px;font-weight: 400;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.8+100 */
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.9) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.9) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.9) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#cc000000',GradientType=0 ); /* IE6-9 */}
header #DosTercios nav#Menu .BtnCap1 a{background: url(../img/txt1/txt1_neg.jpg) no-repeat;background-position:center center;background-size: cover;}
header #DosTercios nav#Menu .BtnCap2 a{background: url(../img/txt2/txt2.jpg) no-repeat;background-position:center center;background-size: cover;}
header #DosTercios nav#Menu .BtnCap3 a{background: url(../img/txt3/txt3.jpg) no-repeat;background-position:center center;background-size: cover;}
header #DosTercios nav#Menu .BtnCap4 a{background: url(../img/txt4/txt4.jpg) no-repeat;background-position:center center;background-size: cover;}

.is-desktop{display: block;}
.is-mobile{display: none;}


@-webkit-keyframes animaBG {
    0%   {background-position: center center;}
    100% {background-position: center right;}
}
@keyframes animaBG {
    0%   {background-position: center center;}
    100% {background-position: center right;}
}
header #DosTercios nav#Menu .ItemMenu:hover a{
  animation-name: animaBG;
  animation-duration: 7s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}
.VideoResponsive{display: none;margin-top:40px;}
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto; }
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
footer{text-align:center;padding:60px 0; height: initial;}
footer #InteriorFooter{display: inline;text-align:center;}
footer .Texto{width: 60%;text-transform: uppercase;color: #666;font-size: 14px;margin: 40px auto 0;vertical-align: bottom;text-align: center;line-height: 17px;display: inline-block;}
footer .Texto a{color:#111;text-decoration: none;font-weight: 400;}
footer .Texto a:hover{text-decoration: underline;}
footer a.Logotipo{display: inline-block;margin:0 20px;vertical-align: bottom;}
footer a.Logotipo img{display: block;height: 100%;}
footer a#LogoICFJ{height: 50px;}
footer a#LogoCodigoVidrio{height: 60px;padding:0 15px;}
footer a#LogoCONNECTAS{height: 66px;}
footer a#LogoVistazo{height: 50px;}

#SocialShare{padding: 10px 0 0;width: 100%;margin:0;background: #fff;}
#SocialShare::before{content: 'COMPARTIR';color: #666;font:normal 11px sans-serif;float: left;padding-top: 10px;}
#SocialShare a{display:block;float: right;margin:0;padding: 5px 0 0;}
#SocialShare a::before{content: '';display: none;}
#SocialShare a::after{content: '';display: none;}
#SocialShare a#Facebook{background: #3b5998;}
#SocialShare a#Facebook:hover{background: #2c4780;}
#SocialShare a#Twitter{background: #4099ff;}
#SocialShare a#Twitter:hover{background: #348bf0;}
#SocialShare a#Google{background: #cb4437;}
#SocialShare a#Google:hover{background: #bd3b2e;}

.AddLetterspacing{letter-spacing: 0.2px;}
.AddMoreLetterspacing {letter-spacing: 0.35px;}




@media only screen and (max-width: 880px) {
  header #DosTercios nav#Menu{display:none;}
  footer a.Logotipo{margin:0 0 20px;}
  .HalfImg{float: none !important;width: 100% !important;margin: 20px 0 !important;}
  .FullImg{float: none !important;width: 100% !important;margin: 20px 0 !important;}
  .FullImg figcaption {font-size: 12px;}
}

@media only screen and (max-width: 1165px) {
  footer .Texto{width: 85%;border-top:2px solid #eee;border-left:none;padding:20px 0 0;margin:20px 0 0;text-align: center;}
}

@media only screen and (max-width: 1100px) {
  .VideoResponsive{display: block;}
  header #DosTercios #Portadilla h1 {font-size: 72px;line-height: 66px;}
}
@media only screen and (max-width: 767px) {
  .is-desktop{display: none;}
  .is-mobile{display: block;}
}

@media only screen and (max-width: 650px) {
  header #UnTercio {display: none;}
  header #PortadaMobile{display: block;}
  header #DosTercios {width: 100vw;height: initial;float: none;color: #fff;position: relative;background: #000;top: 0;}
  .cd-articles h1{font-size: 2.5rem;}
  header #DosTercios #Portadilla #Sumario{font-size: 14px;line-height: 18px;}
  header #DosTercios #Portadilla {padding: 20px 20px 25px;}
  header #DosTercios #Portadilla #Creditos span{display: block;padding:0 0 3px;}
}
@media only screen and (max-width: 460px) {
  header #DosTercios #Portadilla {padding: 13px 20px 18px;}
  .cd-articles h1{font-size: 2rem;}
  .cd-articles p{font-weight: 400;}
  .HalfImg figcaption {font-size: 14px;line-height: 18px;}
  .FullImg figcaption {font-size: 14px;line-height: 18px;}
  .cd-articles p.Sumario {font-size: 1.75rem;line-height: 1.45;}
}





/* New styles */

.scrollto {
  cursor: pointer;
}

.topbar-wrapper {
  height: 70px;
  background-color: #444444;
  display: flex;
  align-items: center;
  color: #fff;
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  transition: ease 0.4s;
  overflow-x: scroll;
  z-index: 99;
  transform: translateY(-100%);
}
/* Hide scrollbar for Chrome, Safari and Opera */
.topbar-wrapper::-webkit-scrollbar {
  display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.topbar-wrapper {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.topbar-wrapper.active {
  transform: translateY(0);
}

.topbar-link {
  flex: none;
  display: flex;
  width: 25%;
  height: 100%;
  padding: 10px;
  position: relative;
}
.topbar-link .prog {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #000;
  z-index: -1;
}
.topbar-link .l-image {
  margin-right: 10px;max-width: 100px;
}
.topbar-link .texts {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.topbar-link .chap-count {
  font-weight: 500;
  font-size: 10px;
  line-height: 1em;
}
.topbar-link .chap-head {
  font-weight: 900;
  font-size: 13px;
  line-height: 1.3em;
}
.unpublished {
  opacity: 0.3;
  pointer-events: none;
  cursor: default;
}
.unpublished .prog {
  display: none;
}


/* Touch */
@media screen and (max-width: 1007px) {
  .topbar-link {
    width: 45%;
  }
}

/* Mobile */
@media screen and (max-width: 767px) {
  .topbar-link {
    width: 90%;
  }
}