body
      { 
        max-width: 100vw !important;
        position: relative;
      }

      header
      {
      	position: fixed;
      	background: #1B6598;
      	width: 100%;
      	height: 60px;
      	top: 0;
      	z-index: 10000;
        display: flex;
        flex-direction: row;
        padding: 15px 0 15px 10px;
      }

      header a.logo
      {
      }

      footer
      {
        padding: 60px 0px;
        color: #fff;
        background: #1B6598;
      }

      footer a, footer a:hover
      {
        color: #fff;
        text-decoration: none;
      }

      main
      {
        width: 100%;
        padding-top: 60px;
      }

      #scrolly
      {
        position: relative;
        padding: 0;
      }

      .content
      {
      	position: relative;
      	z-index: 100;
        margin-top: -100vh;
      }

      .container_intro
      {
        display: flex;
        height: 95vh;
        align-items: flex-end;
        margin-bottom: 100vh;
      }

      .intro
      {
        margin-top: 90px !important;
        color: #fff;
        font-family: 'Barlow', sans-serif;
        font-size: 1.3rem;
        align-items: flex-end;
        background: rgba(0,0,0,0.8);
        padding-bottom: 2rem;
        width: 100%;
      }

      .intro p
      {
        padding: 0 1rem;
        line-height: 2rem;
        font-family: 'Barlow', sans-serif;
        font-weight: 500;
        margin-bottom: 1rem;

        font-size: 1.3rem;
        margin-bottom: 2rem;
      }

      .intro h1
      {
        font-family: 'Barlow', sans-serif;
        font-weight: 700;
        color: #fff;
        font-size: 4rem;
        
        line-height: 4rem;
        text-shadow: 1px 1px 1px #000;
        margin: 2rem 1rem 4rem 1rem;
      }

      .content article 
      {
        position: relative;
        padding: 1rem;
        background: transparent;
      }

      .img_container 
      {
        position: -webkit-sticky;
        position: sticky;
        top: 60px;
        left: 0;
        width: 100%;
        height: calc(100vh - 50px);
        margin: 0;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        z-index: 0;
        overflow: hidden;
      }

      .img_container div.img 
      {
        -webkit-transition: opacity 1.2s ease-in-out;
        -moz-transition: opacity 1.2s ease-in-out;
        -o-transition: opacity 1.2s ease-in-out;
        transition: opacity 1.2s ease-in-out;
        position: fixed;
        top: 0;
        opacity: 1;
        width: 100vw;
        height: calc(100vh - 60px);
        z-index: 2;
      }

      .img_container div.img img
      {
        object-position: 50% 50%;
        object-fit: cover;
        display: block;
        font-family: 'object-fit:cover;';
        display: block;
        position: fixed;
        top: 0;
        width: 100vw;
        height: calc(100vh - 60px);
      }


      .img_container div.img img:not(.static)
      {
        animation: pulse 30s infinite;
      }

      .img_container div.img.hide 
      {
        opacity: 0;
        z-index: 1;
        display: none;
      }

      .img_container div.img.preload
      {
        opacity: 0;
        z-index: 1;
        display: block;
      }

      .step 
      {
        margin: 0 auto 100vh auto;
        color: #fff;
        max-width: 520px;
        background-color: rgba(0,0,0,0.85);
        border-radius: 10px
      }

      .step div.img {
          position: relative;
          cursor: pointer;
          padding: 2rem;
      }

      .step div.img:before
      {
        position:absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        color: #fff;
        content:"";
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' class='bi bi-play-btn' viewBox='0 0 16 16' id='play-btn'%3E%3Cpath d='M6.79 5.093A.5.5 0 006 5.5v5a.5.5 0 00.79.407l3.5-2.5a.5.5 0 000-.814l-3.5-2.5z'%3E%3C/path%3E%3Cpath d='M0 4a2 2 0 012-2h12a2 2 0 012 2v8a2 2 0 01-2 2H2a2 2 0 01-2-2V4zm15 0a1 1 0 00-1-1H2a1 1 0 00-1 1v8a1 1 0 001 1h12a1 1 0 001-1V4z'%3E%3C/path%3E%3C/svg%3E");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100px 100px;
        
      }

      .step div.img img {
          width: 100%;
          max-width: 100%;
      }

      .step:first-child 
      {
        margin-top: 15rem ;
        color: #fff;
      }

      .step:last-child 
      {
        margin-bottom: 100vh;
      }

      .step.is-active p {
      }

      .step p 
      {
        padding: 2rem;
        font-size: 1.5rem;
        line-height: 2rem;
        font-family: 'Barlow', sans-serif;
        font-weight: 500;
        margin-bottom: 1rem;
      }



      .step h2
      {
      	text-align: center;
      	font-family: 'Barlow', sans-serif;
      	font-weight: 700;
        margin-bottom: 1.5rem;
      }

      .step h2 span
      {
        display: block;
        text-align: center;
        font-size: 8rem;
        line-height: 7rem;
      }

      .caption
      {
        font-family: 'Barlow', sans-serif;
        position: absolute;
        bottom: 15px;
        right: 30px;
        background-color: rgba(0, 0, 0, 0.8);
        padding: 0.5rem 1rem;
        color: #fff;
        border-radius: 3px;
        text-transform: uppercase;
        font-size: 0.8rem;
      }

      #_progress 
      {
        --scroll: 0%;
        background: linear-gradient(to right,rgb(0, 0, 105) var(--scroll),transparent 0);
        position: fixed;
        width: 100%;
        height: 5px;
        top: 0px;
        z-index: 100000;
      }

      .content_portada
      {
      	position: fixed;
      	top: 0;
      	left: 0;
      	z-index: 1000;
        min-height: 90vh;
      	margin-left: calc(100vw - 62rem);
      	width: calc(100vw - 60rem) !important;
      	opacity: 0;
      	-webkit-transition: margin 0.96s ease-in-out, opacity .8s ease-in-out;
    		-moz-transition: margin 0.96s ease-in-out, opacity .8s ease-in-out;
    		-o-transition: margin 0.96s ease-in-out, opacity .8s ease-in-out;
    		transition: margin 0.96s ease-in-out, opacity .8s ease-in-out;
        display: flex;
        align-items: center;
        justify-content: center;
        transition-delay: 10ms;
      }

      .content_portada.hidding
      {
      	opacity: 0;
      }

    	.titular
    	{
        display: none;
    		font-family: 'Barlow', sans-serif;
    		font-weight: 700;
    		color: #fff;
    		font-size: 5rem;
    		width: 100%;
    		
    		line-height: 6rem;
    		text-shadow: 1px 1px 1px #000;
    		margin-top: 6rem;
    	}

      #videoplayer
      {
      	width: 1000px !important;
      	margin-left: 3rem;
        z-index: 10000000;
        margin: 8rem auto 0 auto;
      }

      #videoplayer.jwplayer
      {
        /*box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;*/
        box-shadow: rgb(0 0 0) 0 22px 171px 32px;
      }

      #modalplayer #videoplayer
      {
        width: 100% !important; 
      }

      .modal-dialog {
        max-width: 1200px;
    }

    .modal-backdrop.show {
        opacity: .7;
    }



      .content_portada.active
      {
      	margin-left: 55rem;
      	opacity: 1;
      }

      @keyframes pulse {
  			0% {
  				transform: scale(1.2);
  			}

  			50% {
  				transform: scale(1);
  			}

  			100% {
  				transform: scale(1.2);
  			}
  		}

      .video-btn
      {
        display: none;
      }

      @media(max-width: 991px) {
      	article 
      	{
	        margin: 0 auto;
  	    }

  	    .step 
  	    {
  	    	margin-bottom: 85vh;
          margin-left: auto !important;
  	    }

  	    .step h2 span
  	    {
  	    	font-size: 5rem;
  	    	line-height: 4rem;
  	    }


      }

      @media(max-width: 1919px) {
        .content_portada
        {
          display: none;
        }

        .video-btn
        {
          display: table;
        }

      }

      @media(max-width: 1919px) {
        .titular
        {
          font-size: 3rem;
          line-height: 4rem;
        }

      }

      @media(max-width: 2000px) {
        .titular
        {
          font-size: 4rem;
          line-height: 4.2rem;
        }

        #videoplayer
        {
          width: 900px !important;
          margin-top: 4rem;
        }

      }

      @media (orientation: portrait) {
        .caption
        {
          bottom: 0;
          left: 0;
          right: 0;
        }

      }

      .modal-body
      {
        padding: 0;
      }

      .video-btn
      {
        background-color: transparent !important;
        border: 0;
        margin: 0 auto;
      }

      .play-btn
      {
        width: 4rem;
        height: 4rem;
        display: table;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' class='bi bi-play-btn' viewBox='0 0 16 16' id='play-btn'%3E%3Cpath d='M6.79 5.093A.5.5 0 006 5.5v5a.5.5 0 00.79.407l3.5-2.5a.5.5 0 000-.814l-3.5-2.5z'%3E%3C/path%3E%3Cpath d='M0 4a2 2 0 012-2h12a2 2 0 012 2v8a2 2 0 01-2 2H2a2 2 0 01-2-2V4zm15 0a1 1 0 00-1-1H2a1 1 0 00-1 1v8a1 1 0 001 1h12a1 1 0 001-1V4z'%3E%3C/path%3E%3C/svg%3E");
        background-repeat: no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;

      }

      .close
      {
        background: transparent;
        border:0 ;
        color: #fff;
        font-weight: bold;
        margin-left: auto;
            font-size: 30px;
    line-height: 30px;
      }

      .modal-header
      {
        padding: 4px;
        background: #000;
        color: #fff;
        border: 0;
      }

      .arrow-down 
      {
          display: block;
          width: 50px;
          height: 50px;
          margin: 0 auto;
          text-align: center;
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v5.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V4.5z'/%3E%3C/svg%3E");
          background-repeat: no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        animation-name: jump;
        animation-duration: 1s;
        animation-timing-function: ease-out;
        animation-iteration-count: infinite;
        -webkit-animation-name: jump;
        -webkit-animation-duration: 1s;
        -webkit-animation-timing-function: ease-out;
        -webkit-animation-iteration-count: infinite;
      }

      .arrow-down:after
      {
        font-size: 2rem;
        color: #fff;
        display: block;
        margin: 0 auto;
        cursor: pointer;
        

        
      }

      @keyframes jump{0%{transform:translatey(0)}10%{transform:translatey(-15px)}20%{transform:translatey(0px)}30%{transform:translatey(0px)}40%{transform:translatey(-15px)}50%{transform:translatey(0px)}100%{transform:translatey(0px)}}

	  header nav 
    {
      position: absolute;
      color: #fff;
      background-color: #1B6598;
      right: 0;
      top: 0;
	  }
	  
	  header nav a 
    {
  		color: #fff;
  		text-decoration: none;
	  }
	  
	  header nav a:hover,  header nav > a[data-toggle="collapse"][aria-expanded="true"] 
    {
		  opacity: 0.5;
		  color: #fff;
	  }

	  header nav > a[data-toggle="collapse"] 
    {
  		height: 60px;
  		line-height: 60px;
  		display: inline-block;
  		position: absolute;
  		right: 0;
  		top: 0;
  		background-color: rgba(0,0,0,0.5);
  		padding: 0px 15px;
  		text-transform: uppercase;
	  }
	  
	  header nav #menuMeses 
    {
		  margin-top: 60px;
		  padding: 15px 30px 0px 30px;
	  }
	  
	  header nav #menuMeses li 
    {
		  text-align: right;
	  }

	  /*
	  .step[id] 
    {
		  padding-top: 75px;
	  }
    */
	  
	  /* MÓVIL */
	  @media (max-width:576px) {
  		.intro h1 {
  			font-size: 2.6rem;
  			line-height: 1;
  		}
  		.intro p, .step p {
  			line-height: 1.15;
  			font-size: 1.15rem;
  		}
	  }

    .paywall
    {
      background-color: #fff;
      position: relative;
    }

    .users
    {
        padding: 0.4rem;
        flex-grow: 1;
        font-family: 'Barlow', sans-serif;
    }

    .user-info
    {
        padding: 0.2rem 0;
        
    }

    .user-info a
    {
        color: #65bfd6;
        font-size: 0.8rem;
        text-transform: uppercase;
        padding: 0.2rem 0.5rem;
    }

    .user-info a.btn:hover
    {
        color: #222 !important;
    }

    .share-icons
    {
      text-align: center;
      margin-bottom: 3rem;
    }

    .share-icons a
    {
      color: #fff;
      padding: 0 3px;
    }