html, body {height: 100%;}

	body {background: transparent; overflow: hidden;}
	body.over-h {overflow: hidden;}
	body.start {overflow: auto;}

	.h100 {height: 100%;}
	.desktop {display: block !important;}
	.mobile {display: none !important;}
	.linktel {color: #3A393B;}
	.linktel:hover {color:#666;}
	.l {float: left;}
	.r {float: right;}

	input:-webkit-autofill,
	input:-webkit-autofill:hover,
	input:-webkit-autofill:focus,
	input:-webkit-autofill:active {
	    -webkit-transition: "color 9999s ease-out, background-color 9999s ease-out";
		-webkit-transition-delay: 9999s;
	}

	::-webkit-input-placeholder {
	   color: #fff;
	   opacity: 1;
	   -webkit-transition: .3s;
	      -moz-transition: .3s;
	       -ms-transition: .3s;
	        -o-transition: .3s;
	           transition: .3s;
	}

	:-moz-placeholder { /* Firefox 18- */
	   color: #fff;
	   opacity: 1;
	   -webkit-transition: .3s;
	      -moz-transition: .3s;
	       -ms-transition: .3s;
	        -o-transition: .3s;
	           transition: .3s; 
	}

	::-moz-placeholder {  /* Firefox 19+ */
	   color: #fff;
	   opacity: 1; 
	   -webkit-transition: .3s;
	      -moz-transition: .3s;
	       -ms-transition: .3s;
	        -o-transition: .3s;
	           transition: .3s; 
	}

	:-ms-input-placeholder {  
	   color: #fff; 
	   opacity: 1; 
	   -webkit-transition: .3s;
	      -moz-transition: .3s;
	       -ms-transition: .3s;
	        -o-transition: .3s;
	           transition: .3s;
	}

	.error::-webkit-input-placeholder {
	   color: #CC4138;
	   opacity: 1;
	}

	.error:-moz-placeholder { /* Firefox 18- */
	   color: #CC4138;
	   opacity: 1;  
	}

	.error::-moz-placeholder {  /* Firefox 19+ */
	   color: #CC4138;
	   opacity: 1;  
	}

	.error:-ms-input-placeholder {  
	   color: #CC4138; 
	   opacity: 1; 
	}


/*	--------------------------------------------------
	Layout
	-------------------------------------------------- */
	section > .row {}
	sup {font-size: 50%;}

/*	--------------------------------------------------
	Contenedor general - Da el ancho del contenido
	-------------------------------------------------- */
	.cont-general{ position: relative; left: 0; right: 0; margin: auto; max-width: 1336px;}
	section{position: relative;}
	.clear {clear: both;}

/*	--------------------------------------------------
	Section
	-------------------------------------------------- */
	#preloader {width: 100%; height: 100%; background: #fff; position: absolute; z-index: 99; display: none; top: 0; left: 0;}
	#preloader .logo {position: absolute; width: 160px; height: 160px; top: 0; bottom: 0; left: 0; right: 0; margin: auto;}
	#preloader .progress {width: 200px; height: 4px; border: 1px solid #121A60; position: absolute; top: 170px; bottom: 0; left: 0; right: 0; margin: auto;}
	#preloader .progress span {display: block; width: 30%; height: 100%; background: #121A60;}
    #wrapper {width: 100%; height: 100%;}
    .canvas-wrapper {position:absolute; top:50%; left:50%; width:160px; height:160px; margin-top:-80px; margin-left:-80px;}
    .loader {width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #000; background: rgba(0,0,0,.5); z-index: 100; display: none;}
    .loader .spinner {background: url(../img/loader.svg) no-repeat center; width: 50px; height: 50px; background-size: 50px; position: absolute; top: 0; left: 90px; right: 0; bottom: 0; margin: auto;}

    /* NAVIGATION */
	.menu {position: fixed; left: 0; top: 0; width: 110px; height: 100%; background: #fff; padding: 20px 0; z-index: 10;}
	.menu .logo-menu {width: 75px; height: 75px; margin: auto; opacity: 0; position: relative; top: -20px; 
	-webkit-transition: .3s;
	   -moz-transition: .3s;
	    -ms-transition: .3s;
	     -o-transition: .3s;
	        transition: .3s;}
	.start .menu .logo-menu {opacity: 1; top: 0;}
	.start .menu .logo-menu.hide {opacity: 0; top: -20px;}
	.menu-btn {width: 21px; height: 19px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; cursor: pointer;
	-webkit-transition: .2s;
	   -moz-transition: .2s;
	    -ms-transition: .2s;
	     -o-transition: .2s;
	        transition: .2s;}
    .menu-btn:hover {height: 25px;}
    .menu-btn.active:hover {height: 19px;}
	.menu-btn .line {width: 100%; height: 2px; background: #121A60; position: absolute;
	-webkit-transition: .3s;
	   -moz-transition: .3s;
	    -ms-transition: .3s;
	     -o-transition: .3s;
	        transition: .3s;}
	.menu-btn .line:nth-child(2) {top: 0; bottom: 0; left: 0; margin: auto;}
	.menu-btn .line:nth-child(3) {bottom: 0; left: 0;}
	.menu-btn.active .line:nth-child(2) {left: -30px; opacity:0}
	.menu-btn.active .line:nth-child(1) {
	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	     -o-transform: rotate(45deg);
	        transform: rotate(45deg); top: 9px;}
	.menu-btn.active .line:nth-child(3) {
	-webkit-transform: rotate(-45deg);
	   -moz-transform: rotate(-45deg);
	    -ms-transform: rotate(-45deg);
	     -o-transform: rotate(-45deg);
	        transform: rotate(-45deg); bottom: 8px;}
	.menu .bella {position: absolute; bottom: 20px; width: 100%; margin: auto; text-align: center;}

	nav {position: fixed; z-index: 9; top: 0; left: -210px; height: 100%; width: 320px; background: #fff;
	-webkit-transition: .3s;
	   -moz-transition: .3s;
	    -ms-transition: .3s;
	     -o-transition: .3s;
	        transition: .3s;}
	nav.active {left: 110px;}
	nav .logo {margin-bottom: 40px;}
	nav .stories {position: absolute; height: 580px; top: 0; bottom: 100px; margin: auto;}
	nav .stories li a {font-family: "Lato", sans-serif; color: #747474; font-size: 123.1%;
	-webkit-transition: .3s;
	   -moz-transition: .3s;
	    -ms-transition: .3s;
	     -o-transition: .3s;
	        transition: .3s;}
    nav .stories li a:hover {padding-left: 10px;}
    nav .stories li.active a {color: #121A60; font-size: 153.9%; cursor: default;}
    nav .stories li.active a:hover {padding-left: 0;}
	nav .stories li {margin-bottom: 30px;}
	nav .stories li:last-child {margin-bottom: 0;}
	nav .social {position: absolute; bottom: 20px; right: 35px;}
	nav .social li {display: inline-block; margin-right: 12px;}
	nav .social li:last-child {margin-right: 0;}
	nav .social li a {font-size: 0; background: url(../img/social.png) no-repeat; width: 18px; height: 16px; display: block; position: relative; top: 0;
	-webkit-transition: .2s;
	   -moz-transition: .2s;
	    -ms-transition: .2s;
	     -o-transition: .2s;
	        transition: .2s;}
	nav .social li a.fb {background-position: -40px;}
	nav .social li a.in {background-position: -75px;}
	nav .social li a:hover {top: -3px;}

	/* MAIN */
	.white-hide {position: fixed; left: 0; top: 0; height: 20px; width: 100%; background: #fff; z-index: 7;}
	.white-hide.bottom {bottom: 0; top: initial;}
	
	/* INTRO */
	section.main {width: 100%; height: 100%; padding-left: 110px;}
	.full-bg {width: 100%; width: calc(100% - 130px); height: 100%; height: calc(100% - 40px); margin-top: 20px; position: fixed; z-index: -1; top: 0; background-size: cover;}
	.full-bg .video {width: 100%; height: 100%; overflow: hidden; position: absolute;}
	.full-bg iframe {width: 100%; height: 100%; position: absolute;}
	.full-bg .image-bg {width: 100%; height: 100%; background-size: cover !important; position: absolute; top: 0; left: 0; background-position: center;}
	.close-vid {position: absolute; top: 40px; right: 40px; font-size: 200%; color: #FFF; font-family: "Lato", sans-serif; font-weight: 700; opacity: 0; z-index: 1;
	-webkit-transition: .3s;
	   -moz-transition: .3s;
	    -ms-transition: .3s;
	     -o-transition: .3s;
	        transition: .3s;}
    .controls-vid {display: none;}
    .play-button, .pause-button {position: absolute; bottom: 40px; left: 130px; background: url(../img/play-pause.png) no-repeat; width: 49px; height: 49px; -webkit-border-radius: 20px; border-radius: 20px; cursor: pointer;
    -webkit-transition: .2s;
       -moz-transition: .2s;
        -ms-transition: .2s;
         -o-transition: .2s;
            transition: .2s;}
    .play-button:before, .pause-button:before {content: " "; position: absolute; display: block; width: 49px; height: 49px; border: 2px solid #fff; -webkit-border-radius: 30px; border-radius: 30px; top: 0; left: 0;
    -webkit-transition: .2s;
       -moz-transition: .2s;
        -ms-transition: .2s;
         -o-transition: .2s;
            transition: .2s;}
    .play-button:hover:before, .pause-button:hover:before {width: 53px; height: 53px; left: -2px; top: -2px;}
    .play-button {display: none;}
    .pause-button {background-position: -51px;}
	.mute-button, .unmute-button {position: absolute; width: 28px; height: 28px; background-image: url(../img/mute.png); background-repeat: no-repeat; background-color: rgba(255,255,255,.2); background-position: -29px center; -webkit-border-radius: 14px; border-radius: 14px; bottom: 50px; right: 40px; cursor: pointer;}
	.unmute-button {background-position: 6px center; display: none;}
	.mute-button:before, .unmute-button:before {content: " "; display: block; position: absolute; width: 36px; height: 36px; border: 2px solid #fff; -webkit-border-radius: 18px; border-radius: 18px; top: -4px; left: -4px;
	-webkit-transition: .2s;
	   -moz-transition: .2s;
	    -ms-transition: .2s;
	     -o-transition: .2s;
	        transition: .2s;}
	.mute-button:hover:before, .unmute-button:hover:before {width: 40px; height: 40px; -webkit-border-radius: 20px; border-radius: 20px; top: -6px; left: -6px;}
	.progress-video {width: 75%; width: calc(100% - 300px); height: 3px; cursor: pointer; background: #333; background: rgba(255,255,255,.3); position: absolute; left: 200px; bottom: 60px;}
	.progress-video span {display: block; width: 20%; height: 100%; background: #fff;}
	.close-vid.show {opacity: 1;}
	.intro {text-align: center; position: absolute; width: 900px; background: #fff; background: rgba(255,255,255,.85); padding: 0px; height: 0px; top: 70px; bottom: 0; left: 110px; right: 0; margin: auto;
	-webkit-transition: .5s;
	   -moz-transition: .5s;
	    -ms-transition: .5s;
	     -o-transition: .5s;
	        transition: .5s;}
	.intro .logo {margin-top: -150px; margin-bottom: 10px; opacity: 0; position: relative;}
	.animate .intro {animation: intro .5s .7s forwards; -webkit-animation: intro .5s .7s forwards; -moz-animation: intro .5s .7s forwards;}
	.animate .intro .logo {animation: appear .7s .3s forwards; -webkit-animation: appear .7s .3s forwards; -moz-animation: appear .7s .3s forwards;}
	.animate .intro h2 {animation: appear .5s 1.2s forwards; -webkit-animation: appear .5s 1.2s forwards; -moz-animation: appear .5s 1.2s forwards;}
	.animate .intro hr {animation: grow .4s 1.8s forwards; -webkit-animation: grow .4s 1.8s forwards; -moz-animation: grow .4s 1.8s forwards;}
	.animate .intro p {animation: appear .5s 1.4s forwards; -webkit-animation: appear .5s 1.4s forwards; -moz-animation: appear .5s 1.4s forwards;}
	.animate .intro a span {animation: appear .5s 2s forwards; -webkit-animation: appear .5s 2s forwards; -moz-animation: appear .5s 2s forwards;}
	.intro h2 {font-family: "Lato", sans-serif; font-weight: 300; color: #000; font-size: 384.6%; opacity:0; position: relative;}
	.intro hr {width: 0px; height: 6px; border: 0; background: #121A60; margin: 43px auto;}
	.intro p {font-family: "Lato", sans-serif; font-weight: 300; color: #000; font-size: 153.9%; opacity:0; position: relative;}
	.intro a {position: relative; display: block; width: 200px; height: 50px; margin: 40px auto 0;}
	.intro a span {overflow: hidden; display: block; width: 200px; height: 50px; line-height: 50px; background: #121A60; color: #fff; font-family: "Lato", sans-serif; font-weight: 700; font-size: 153.9%; text-align: center; position: relative; -webkit-border-radius: 100px; border-radius: 100px; opacity: 0; position: relative;
	-webkit-transition: .3s;
	   -moz-transition: .3s;
	    -ms-transition: .3s;
	     -o-transition: .3s;
	        transition: .3s;}
    .intro a span:before {content: "COMENZAR"; display: block; position: absolute; width: 100%; top: 0;
    -webkit-transition: .3s;
       -moz-transition: .3s;
        -ms-transition: .3s;
         -o-transition: .3s;
            transition: .3s; color: #fff;}
    .intro a span:after {content: "COMENZAR"; display: block; position: absolute; width: 100%; bottom: -50px;
    -webkit-transition: .3s;
       -moz-transition: .3s;
        -ms-transition: .3s;
         -o-transition: .3s;
            transition: .3s; color: #121A60;}
    .intro a:hover span:before {top: -50px;}
    .intro a:hover span:after {bottom: 0;}
	.intro a:hover span {background: #fff; }
	.intro a:before {content: " "; position: absolute; display: block; width: 200px; height: 50px; opacity: 0; background: rgba(18,28,96,.2); -webkit-border-radius: 115px; border-radius: 115px;
	-webkit-transition: .5s;
	   -moz-transition: .5s;
	    -ms-transition: .5s;
	     -o-transition: .5s;
	        transition: .5s;}
	.intro a:hover:before {opacity: 1;
	-webkit-transform: scale(1.06, 1.2);
	   -moz-transform: scale(1.06, 1.2);
	    -ms-transform: scale(1.06, 1.2);
	     -o-transform: scale(1.06, 1.2);
	        transform: scale(1.06, 1.2);
	    -webkit-transform-origin: center center;
	       -moz-transform-origin: center center;
	        -ms-transform-origin: center center;
	         -o-transform-origin: center center;
	            transform-origin: center center;}
    .start .intro {opacity: 0; top: 20px; z-index: -1;}

	@keyframes intro {
		from {height: 0; padding: 0;}
		to {height: 560px; padding: 72px;}
	}
	@-webkit-keyframes intro {
		from {height: 0; padding: 0;}
		to {height: 560px; padding: 72px;}
	}
	@-moz-keyframes intro {
		from {height: 0; padding: 0;}
		to {height: 560px; padding: 72px;}
	}

	@keyframes appear {
		from {bottom: -25px; opacity: 0}
		to {bottom: 0; opacity: 1}
	}
	@-webkit-keyframes appear {
		from {bottom: -25px; opacity: 0}
		to {bottom: 0; opacity: 1}
	}
	@-moz-keyframes appear {
		from {bottom: -25px; opacity: 0}
		to {bottom: 0; opacity: 1}
	}

	@keyframes grow {
		from {width: 0;}
		to {width: 70px;}
	}
	@-webkit-keyframes grow {
		from {width: 0;}
		to {width: 70px;}
	}
	@-moz-keyframes grow {
		from {width: 0;}
		to {width: 70px;}
	}

	/* STORY */
	.story {position: absolute; top: -100%; left: 110px; width: 100%; width: calc(100% - 130px); height: 100%; height: calc(100% - 40px);}
	.start .story {top: 20px;}
	.story:before {content: " "; display: block; position: fixed; z-index: -1; top: 20px; left: 0; width: 100%; width: calc(100% - 20px); height: 100%; height: calc(100% - 40px); background: rgba(0,0,0,.5); opacity: 0;
	-webkit-transition: .6s .3s;
	   -moz-transition: .6s .3s;
	    -ms-transition: .6s .3s;
	     -o-transition: .6s .3s;
	        transition: .6s .3s;}
	.start .story:before {opacity: 1;}
	.story .container {width: 430px; margin: auto; text-align: center; position: absolute; left: 0; right: 0; top: 50%;
	-webkit-transform: translateY(-50%);
	   -moz-transform: translateY(-50%);
	    -ms-transform: translateY(-50%);
	     -o-transform: translateY(-50%);
	        transform: translateY(-50%);
	    -webkit-transition: .4s .5s;
	       -moz-transition: .4s .5s;
	        -ms-transition: .4s .5s;
	         -o-transition: .4s .5s;
	            transition: .4s .5s;}
	.story .title {font-family: "Lato", sans-serif; font-weight: 300; font-size: 461.5%; position: relative; bottom: -20px; opacity: 0;
	-webkit-transition: .4s .8s;
	   -moz-transition: .4s .8s;
	    -ms-transition: .4s .8s;
	     -o-transition: .4s .8s;
	        transition: .4s .8s;}
	.start .story .title {opacity: 1; bottom: 0;}
	.story hr {width: 0px; height: 6px; background: #fff; margin: 35px auto; border: 0;
	-webkit-transition: .3s 1.2s;
	   -moz-transition: .3s 1.2s;
	    -ms-transition: .3s 1.2s;
	     -o-transition: .3s 1.2s;
	        transition: .3s 1.2s;}
	.start .story hr {width: 70px;}
	.story .view-video {display: block; position: relative; bottom: -20px; opacity: 0; margin: auto; /*width: 62px; height: 62px; /*background: rgba(255,255,255,.2);*/ width: 75px; height: 75px; background: url(../img/btn_play_75x75px_30fts_1-0seg.png); -webkit-border-radius: 31px; border-radius: 31px;
	-webkit-transition: all .4s 1s, background .3s 0s;
	   -moz-transition: all .4s 1s, background .3s 0s;
	    -ms-transition: all .4s 1s, background .3s 0s;
	     -o-transition: all .4s 1s, background .3s 0s;
	        transition: all .4s 1s, background .3s 0s; animation: play-back steps(15) .5s both; -webkit-animation: play-back steps(15) .5s both; -moz-animation: play-back steps(15) .5s both;}
    .start .story .view-video {opacity: 1; bottom: 0;}
    .story .view-video:hover {animation: play steps(15) .5s forwards; -webkit-animation: play steps(15) .5s forwards; -moz-animation: play steps(15) .5s forwards;}
	/*.story .view-video:after {content: " "; display: block; position: absolute; border-left: 9px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; width: 9px; height: 17px; left: 0; right: 0; top: 0; bottom: 0; margin: auto;}
	.story .view-video:before {content: " "; display: block; position: absolute; width: 100%; height: 100%; background: none; border: 1px solid #fff; -webkit-border-radius: 50px; border-radius: 50px;
	-webkit-transition: .3s;
	   -moz-transition: .3s;
	    -ms-transition: .3s;
	     -o-transition: .3s;
	        transition: .3s;
	    -webkit-transform: scale(1.2);
	       -moz-transform: scale(1.2);
	        -ms-transform: scale(1.2);
	         -o-transform: scale(1.2);
	            transform: scale(1.2);}
	.story .view-video:hover {background: rgba(255,255,255,.5);}
	.story .view-video:hover:before {transform: scale(1)}*/
	.story .container p {font-family: "Lato", sans-serif; font-weight: 300; font-size: 116%; margin-top: 20px; position: relative; top: -20px; opacity: 0;
	-webkit-transition: .4s 1.1s;
	   -moz-transition: .4s 1.1s;
	    -ms-transition: .4s 1.1s;
	     -o-transition: .4s 1.1s;
	        transition: .4s 1.1s;}
	.start .story .container p {top: 0; opacity: 1;}
	.story .controls {width: 100%; height: 100%;}
	.story .arrows {top: 50%; position: fixed; width: 100%; width: calc(100% - 130px); margin-top: -24px; z-index: 1;}
	.story .arrows a {display: block; cursor: default; width: 48px; height: 48px; position: absolute; background: url(../img/arrows.png) #fff no-repeat; -webkit-border-radius: 42px; border-radius: 42px;
	-webkit-transition: .3s;
	   -moz-transition: .3s;
	    -ms-transition: .3s;
	     -o-transition: .3s;
	        transition: .3s;}
    .start .story .arrows a {cursor: pointer;}
	.story .arrows a:before {content: " "; display: block; position: absolute; width: 100%; height: 100%; border: 2px solid #fff; -webkit-border-radius: 40px; border-radius: 40px;
	-webkit-transform: scale(1.25);
	   -moz-transform: scale(1.25);
	    -ms-transform: scale(1.25);
	     -o-transform: scale(1.25);
	        transform: scale(1.25);}
    .story .arrows .prev {width: 48px; height: 48px; position: absolute; left: 0px; z-index: 2; opacity: 0;
    -webkit-transition: all .3s, left .4s 1s, opacity .4s 1s;
       -moz-transition: all .3s, left .4s 1s, opacity .4s 1s;
        -ms-transition: all .3s, left .4s 1s, opacity .4s 1s;
         -o-transition: all .3s, left .4s 1s, opacity .4s 1s;
            transition: all .3s, left .4s 1s, opacity .4s 1s;}
    .start .story .arrows .prev {opacity: 1; left: 22px;}
    .story .arrows .next {width: 48px; height: 48px; position: absolute; right: 0px; z-index: 2; opacity: 0;
    -webkit-transition: all .3s, right .4s 1s, opacity .4s 1s;
       -moz-transition: all .3s, right .4s 1s, opacity .4s 1s;
        -ms-transition: all .3s, right .4s 1s, opacity .4s 1s;
         -o-transition: all .3s, right .4s 1s, opacity .4s 1s;
            transition: all .3s, right .4s 1s, opacity .4s 1s;}
    .start .story .arrows .next {opacity: 1; right: 22px;}
    .start .story .arrows.hide .prev {opacity: 0; left: 0;
    -webkit-transition-delay: 0s;
       -moz-transition-delay: 0s;
        -ms-transition-delay: 0s;
         -o-transition-delay: 0s;
            transition-delay: 0s;}
    .start .story .arrows.hide .next {opacity: 0; right: 0;
    -webkit-transition-delay: 0s;
       -moz-transition-delay: 0s;
        -ms-transition-delay: 0s;
         -o-transition-delay: 0s;
            transition-delay: 0s;}
    .start .story .arrows.hide .prev a, .start .story .arrows.hide .next a {cursor: default;}
    .start .story .arrows.show .prev {
    -webkit-transition-delay: 0s;
       -moz-transition-delay: 0s;
        -ms-transition-delay: 0s;
         -o-transition-delay: 0s;
            transition-delay: 0s;}
    .start .story .arrows.show .next {
    -webkit-transition-delay: 0s;
       -moz-transition-delay: 0s;
        -ms-transition-delay: 0s;
         -o-transition-delay: 0s;
            transition-delay: 0s;}
    .story .arrows .prev:hover, .story .arrows .next:hover {width: 84px; height: 84px; margin-top: -20px;}
    .story .arrows .prev a {background-position: 15px}
    .story .arrows .next a {background-position: -30px}
    .story .arrows a .pic {display: block; width: 48px; height: 48px; opacity: 0; -webkit-border-radius: 24px; border-radius: 24px; background-position: center; background-size: cover !important;
    -webkit-transition: .3s;
       -moz-transition: .3s;
        -ms-transition: .3s;
         -o-transition: .3s;
            transition: .3s;}
    .story .arrows a:hover .pic, .story .arrows a:hover {width: 84px; height: 84px; opacity: 1;}
    .story .arrows .tooltip {font-family: "Lato", sans-serif; font-weight: 300; font-style: italic; font-size: 153.9%; position: absolute; top: 5px; opacity: 0; z-index: 1; 
    -webkit-transition: .4s .1s;
       -moz-transition: .4s .1s;
        -ms-transition: .4s .1s;
         -o-transition: .4s .1s;
            transition: .4s .1s;}
    .story .arrows .tooltip i {display: block; width: 16px; height: 9px; background: url(../img/arrows.png) no-repeat; margin-top: 10px; filter: invert(1); -webkit-filter: invert(1);}
	.story .arrows .tooltip.prev-t {left: 20px;}
	.story .arrows .tooltip.next-t {right: 20px;}
	.story .arrows .tooltip.next-t span {display: block;}
	.story .arrows .tooltip.next-t i {float: right; background-position: -45px;}
	.start .story .arrows .prev:hover + .tooltip.prev-t {left: 130px; opacity: 1;}
	.start .story .arrows .next:hover + .tooltip.next-t {right: 130px; opacity: 1;}
	.story .arrows.hide .prev:hover + .tooltip.prev-t {left: 20px; opacity: 0;}
	.story .arrows.hide .next:hover + .tooltip.next-t {right: 20px; opacity: 0;}
	.story .explore {width: 70px; position: absolute; left: 0; right: 0; margin: auto; bottom: 0px; opacity: 0;
	-webkit-transition: .4s 1.3s;
	   -moz-transition: .4s 1.3s;
	    -ms-transition: .4s 1.3s;
	     -o-transition: .4s 1.3s;
	        transition: .4s 1.3s;}
	.start .story .explore {bottom: 45px; opacity: 1;}
	.story .scroll {width: 70px; height: 70px; background: url(../img/btn_explorar_70x70px_38fts_1-2seg.png); cursor: pointer; animation: scroll-back steps(19) .6s forwards; -webkit-animation: scroll-back steps(19) .6s forwards; -moz-animation: scroll-back steps(19) .6s forwards;}
	.story .scroll:hover {animation: scroll steps(19) .6s forwards; -webkit-animation: scroll steps(19) .6s forwards; -moz-animation: scroll steps(19) .6s forwards;}
	.story .explore p {font-family: "Lato", sans-serif; font-weight: 300; font-size: 93%; text-align: center; margin-top: 5px;}

	@keyframes scroll {
		from {background-position: 0px}
		to {background-position: 1330px}
	}
	@-webkit-keyframes scroll {
		from {background-position: 0px}
		to {background-position: 1330px}
	}
	@-moz-keyframes scroll {
		from {background-position: 0px}
		to {background-position: 1330px}
	}

	@keyframes scroll-back {
		from {background-position: 1330px}
		to {background-position: 0px}
	}
	@-webkit-keyframes scroll-back {
		from {background-position: 1330px}
		to {background-position: 0px}
	}
	@-moz-keyframes scroll-back {
		from {background-position: 1330px}
		to {background-position: 0px}
	}

	@keyframes play {
		from {background-position: 0px}
		to {background-position: 1125px}
	}
	@-webkit-keyframes play {
		from {background-position: 0px}
		to {background-position: 1125px}
	}
	@-moz-keyframes play {
		from {background-position: 0px}
		to {background-position: 1125px}
	}

	@keyframes play-back {
		from {background-position: 1125px}
		to {background-position: 0px}
	}
	@-webkit-keyframes play-back {
		from {background-position: 1125px}
		to {background-position: 0px}
	}
	@-moz-keyframes play-back {
		from {background-position: 1125px}
		to {background-position: 0px}
	}

	/* STORY DETAIL */
	.story-detail {background: #EDEDED; max-width: 1035px; margin: auto; padding: 60px 60px 25px; margin-top: 100px; position: absolute; top: 100%; left: 130px; right: 40px; display: none;}
	.start .story-detail {display: block;}
	.story-detail .social {position: absolute; top: 20px; right: 0; background: #121a60; padding: 10px; z-index: 2;}
	.story-detail .social.fixed {position: fixed; top: 40px; right: initial; left: calc(50% + 488px);}
	.story-detail .social li {display: inline-block; vertical-align: top; margin-right: 5px; padding-right: 5px; border-right: 1px solid #fff;}
	.story-detail .social li:last-child {margin-right: 0; border: 0; padding-right: 0;}
	.story-detail .social a {font-size: 0; display: block; width: 20px; height: 17px; background: url(../img/social-f.svg) no-repeat;}
	.story-detail .social a.fb {background-position: -39px}
	.story-detail .social a.in {background-position: -77px}
	.story-detail .info {width: 145px; text-align: center; display: inline-block; margin-right: 70px;}
	.story-detail .info h3 {font-family: "Lato", sans-serif; font-weight: 700; color: #121A60; font-size: 138.5%; margin-top: 10px;}
	.story-detail .info hr {border: 0; width: 49px; height: 2px; background: #8d8d8d; margin: 15px auto;}
	.story-detail .info p {font-family: "Lato", sans-serif; font-weight: 300; font-size: 93%; color: #7C7C7C;}
	.story-detail .description {display: inline-block; width: calc(100% - 225px); vertical-align: top; padding-top: 30px;}
	.story-detail .description h3 {font-family: "Lato", sans-serif; font-weight: 300; color: #000; font-size: 346.1%;}
	.story-detail .description hr {background: #121A60; width: 70px; height: 6px; margin: auto; margin: 30px 0 25px;}
	.story-detail .description p {font-family: "Lato", sans-serif; font-size: 123.1%; color: #7C7C7C;}
	.story-detail .description p a {color: #121A60; position: relative;}
	.story-detail .description p a:after {content: " "; display: block; position: absolute; width: 0; height: 2px; background: #121A60; bottom: -2px; left: 0;
	-webkit-transition: .3s;
	   -moz-transition: .3s;
	    -ms-transition: .3s;
	     -o-transition: .3s;
	        transition: .3s;}
    .story-detail .description p a:hover:after {width: 100%;}
    .story-detail .slider-controls {text-align: center; margin-top: 35px; font-family: "Lato", sans-serif; font-weight: 300; color: #999; font-size: 138.5%;}
    .story-detail .slider-controls .current {font-size: 222.2%; color: #000;}
    .story-detail .slider-controls a {display: inline-block; width: 8px; height: 9px; background: url(../img/arrows.png) no-repeat; margin-right: 10px; vertical-align: super; position: relative;
    -webkit-transition: .3s;
       -moz-transition: .3s;
        -ms-transition: .3s;
         -o-transition: .3s;
            transition: .3s;}
    .story-detail .slider-controls a:hover {width: 15px;}
    .story-detail .slider-controls a.bx-prev:hover {margin-right: 3px; right: 7px;}
    .story-detail .slider-controls a.bx-next:hover {background-position: -47px !important; margin-left: 3px; left: 7px;}
    .story-detail .slider-controls a:before {content: " "; display: block; position: absolute; width: 100%; height: 1px; background: #000; top: 4px;}
    .story-detail .slider-controls a.bx-prev {right: 0;}
    .story-detail .slider-controls a.bx-next {background-position: -54px; margin-right: 0; margin-left: 10px; left: 0;}
    .story-detail .seemore {position: absolute; left: 0; margin-top: 35px; margin-bottom: 45px; width: 100%;}
    .story-detail .prev-story, .story-detail .next-story {display: inline-block; width: 49.5%; padding: 25px; background: #EDEDED;}
    .story-detail .prev-story {float: left;}
    .story-detail .next-story {float: right;}
    .story-detail .caption {display: inline-block; width: 36.4%;}
    .story-detail .prev-story .caption {text-align: right;}
    .story-detail .seemore figure {display: inline-block; vertical-align: top; position: relative;}
    .story-detail .seemore figure img {-webkit-transition: .3s;
       -moz-transition: .3s;
        -ms-transition: .3s;
         -o-transition: .3s;
            transition: .3s;}
    .story-detail .seemore a:hover figure img {-webkit-transform: scale(1.2);
       -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
         -o-transform: scale(1.2);
            transform: scale(1.2);}
    .story-detail .seemore figure:before {content: " "; display: block; position: absolute; width: 100%; height: 95%; bottom: 0; left: 0; opacity: 0; z-index: 2; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ed742f+0,f7dc91+100&0.35+0,0.35+100 */
background: -moz-linear-gradient(-45deg,  rgba(237,116,47,0.35) 0%, rgba(247,220,145,0.35) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  rgba(237,116,47,0.35) 0%,rgba(247,220,145,0.35) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  rgba(237,116,47,0.35) 0%,rgba(247,220,145,0.35) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#59ed742f', endColorstr='#59f7dc91',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
-webkit-transition: .3s;
   -moz-transition: .3s;
    -ms-transition: .3s;
     -o-transition: .3s;
        transition: .3s;
}
	.story-detail .seemore figure:after {content: " "; display: block; position: absolute; width: 40%; height: 200%; border-right: 1px solid #fff; border-left: 1px solid #fff; top: -80px; left: 80px; opacity: 0;
	-webkit-transform: rotate(-45deg);
	   -moz-transform: rotate(-45deg);
	    -ms-transform: rotate(-45deg);
	     -o-transform: rotate(-45deg);
	        transform: rotate(-45deg); 
	    -webkit-transition: .3s;
	       -moz-transition: .3s;
	        -ms-transition: .3s;
	         -o-transition: .3s;
	            transition: .3s;}
    .story-detail .seemore a:hover figure:after {opacity: 1; width: 65%; left: 45px;}
	.story-detail .seemore a:hover figure:before {height: 100%; opacity: 1;}
    .story-detail .seemore .prev-story figure {float: right;}
    .story-detail .seemore .next-story figure {float: left;}
    .story-detail .seemore .prev-story .caption {float: left;}
    .story-detail .seemore .next-story .caption {float: right;}
    .story-detail .seemore h3 {font-family: "Lato", sans-serif; font-weight: 300; font-size: 189%; color: #7C7C7C;}
    .story-detail .seemore hr {width: 40px; height: 4px; background: #121A60; border: 0; margin: 20px 0;}
    .story-detail .seemore span {display: block; width: 16px; height: 10px; position: relative; background: url(../img/arrows.png) no-repeat;
    -webkit-transition: .3s;
       -moz-transition: .3s;
        -ms-transition: .3s;
         -o-transition: .3s;
            transition: .3s;}
    .story-detail .seemore span:before {content: " "; display: block; position: absolute; height: 1px; width: 100%; background: #000; top: 5px;}
    .story-detail .seemore .prev-story span:before {top: 4px;}
    .story-detail .seemore a:hover span {width: 25px;}
    .story-detail .seemore .next-story span {background-position: -46px;}
    .story-detail .seemore a:hover .next-story span {background-position: -37px;}
    .story-detail .seemore .prev-story hr {float: right;}
    .story-detail .seemore .prev-story span {float: right; clear: both;}
/*	--------------------------------------------------
	Fin Section
	-------------------------------------------------- */
	    
    @media (min-width: 901px) and (max-width: 1100px) {
    	.story-detail .seemore .prev-story figure, .story-detail .seemore .next-story figure {float: none; width: 100%;}
    	.story-detail .seemore a:hover figure:after {left: 105px;}
    	.story-detail .seemore figure img {width: 100%;}
    	.story-detail .seemore .prev-story .caption, .story-detail .seemore .next-story .caption {float: none; width: 100%; margin-top: 15px;}
    	.story-detail .seemore h3 {font-size: 165%;}
    	.intro {width: 700px; left: 90px;}

    	@keyframes intro {
			from {height: 0; padding: 0;}
			to {height: 510px; padding: 60px;}
		}
		@-webkit-keyframes intro {
			from {height: 0; padding: 0;}
			to {height: 510px; padding: 60px;}
		}
		@-moz-keyframes intro {
			from {height: 0; padding: 0;}
			to {height: 510px; padding: 60px;}
		}
    }

    @media (min-width: 901px) and (max-width: 1220px) {
    	.story-detail .social.fixed {left: initial; right: 40px;}
    }
	
	@media (min-width: 901px) {
		.story-detail .seemore figure {background: none !important; overflow: hidden;}
	}

	@media (max-width: 900px) {
		.desktop {display: none !important;}
		.mobile {display: block !important;}
		.white-hide {display: none;}
		body {background: none;}

		.loader .spinner {left: 0;}

		.menu {width: 100%; height: 75px;}
		.menu .bella {display: none;}
		.menu-btn {left: initial; right: 16px;}
		.menu-btn:hover {height: 19px;}
		.menu .logo-menu {opacity: 1; width: 60px; top: -13px; margin: 0; margin-left: 16px;}

		nav {left: -100%; width: 100%;}
		nav .logo {display: none;}
		nav.active {left: 0;}
		nav .stories {width: 100%; text-align: center; padding-top: 30px; height: 330px; bottom: 30px;}
		nav .stories li {margin-bottom: 15px;}
		nav .bella {position: absolute; bottom: 18px; left: 20px;}
		nav .social {right: 20px; text-align: center;}

		section.main {padding-left: 15px;}
		.full-bg {width: calc(100% - 30px); height: calc(100% - 90px); margin-top: 75px; background-position: center;}
		.intro {width: 80%; left: 0; top: 75px; bottom: 15px;}
		.intro .logo {display: none;}
		.intro h2 {font-size: 211.5%;}
		.intro hr {margin: 25px auto;}
		.intro p {font-size: 116%;}
		.intro a {margin-top: 20px;
		-webkit-transform: scale(0.8);
		   -moz-transform: scale(0.8);
		    -ms-transform: scale(0.8);
		     -o-transform: scale(0.8);
		        transform: scale(0.8);}

		@keyframes intro {
			from {height: 0; padding: 0;}
			to {height: 75vh; padding: 15px;}
		}
		@-webkit-keyframes intro {
			from {height: 0; padding: 0;}
			to {height: 75vh; padding: 15px;}
		}
		@-moz-keyframes intro {
			from {height: 0; padding: 0;}
			to {height: 75vh; padding: 15px;}
		}

		.start .menu .logo-menu {top: -13px;}
		.start .menu .logo-menu.hide {top: -13px; opacity: 1;}
		.story {left: 15px; width: calc(100% - 30px);}
		.story .arrows {width: 100%;}
		.start .story .arrows .prev {left: 8px;}
		.start .story .arrows .next {right: 35px;}
		.start .story .arrows .prev, .start .story .arrows .next {-webkit-transform: scale(.7);
		   -moz-transform: scale(.7);
		    -ms-transform: scale(.7);
		     -o-transform: scale(.7);
		        transform: scale(.7);}
		.story:before {top: 75px; left: 15px; width: calc(100% - 30px); height: calc(100% - 90px);}
		.story .title {font-size: 259.3%;}
		.story .container {width: 100%; padding: 0 20px;}
		.start .story .explore {bottom: 5px; -webkit-transform: scale(.9);
		   -moz-transform: scale(.9);
		    -ms-transform: scale(.9);
		     -o-transform: scale(.9);
		        transform: scale(.9);}
		.start .story hr {width: 52px; height: 3px; margin: 20px auto;}
		.story .view-video {-webkit-transform: scale(0.8);
		   -moz-transform: scale(0.8);
		    -ms-transform: scale(0.8);
		     -o-transform: scale(0.8);
		        transform: scale(0.8);}
        .controls-vid {display: none !important;}
        .close-vid.show {top: 90px; right: 30px;}
        .story .container p {margin-top: 10px;}
        .story-detail {width: 100%; width: calc(100% - 30px); padding: 20px; left: 15px; margin-top: 50px;}
        .story-detail .social-btn {width: 37px; height: 37px; background: url(../img/share.png) center no-repeat #121A60; position: absolute; z-index: 3; right: 0; top: 20px; background-size: 15px;}
        .story-detail .social-btn.fixed {position: fixed; top: 90px; right: 15px;}
        .story-detail .social-btn.open {right: 95px;}
        .story-detail .social-btn.open.fixed {right: 110px;}
        .story-detail .social {right: 50px; width: 0; white-space: nowrap; opacity: 0;}
        .story-detail .social li {margin-right: 13px; padding-right: 13px;}
        .story-detail .social.open {right: 0; opacity: 1; width: 95px;}
        .story-detail .social.fixed {right: 0px; left: initial; top: 90px;}
        .story-detail .social.fixed.open {right: 15px;}
        .story-detail .info {display: block; width: 100%;}
        .story-detail .info p {font-size: 108%;}
        .story-detail .description {width: 100%; display: block;}
        .story-detail .description h3 {font-size: 259.6%;}
        .story-detail .description hr {width: 53px; height: 5px; margin: 23px 0 18px;}
        .story-detail .description p {font-size: 116%;}
        .story-detail .slider {margin-left: -20px; margin-right: -20px;}
        .story-detail .prev-story, .story-detail .next-story {width: 50%; padding: 10px; position: relative;}
        .story-detail .seemore {width: 100%; margin-bottom: 15px; margin-top: 20px; border-top: 10px solid #fff;}
        .story-detail .seemore h3 {font-size: 123.1%; color: #FFF;}
        .story-detail .seemore figure {float: none !important; height: 125px; width: 100%; position: relative;}
        .story-detail .seemore figure:before {content: " "; display: block; position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,.6); opacity: 1; z-index: 1;}
        .story-detail .seemore figure:after {display: none;}
        .story-detail .seemore figure img {display: none;}
        .story-detail .seemore .next-story figure {background: url(../img/next.jpg) no-repeat; background-size: cover;}
        .story-detail .seemore .prev-story figure {background: url(../img/prev.jpg) no-repeat; background-size: cover;}
        .story-detail .caption {width: 100%; float: none !important; position: absolute; padding: 20px; bottom: 0; left: 0; z-index: 1;}
        .story-detail .seemore hr {background: #fff; width: 30px; height: 2px; margin: 15px 0;}
        .story-detail .seemore span {filter: invert(1); -webkit-filter: invert(1);}
	}

	@media (min-width: 375px) and (max-width: 450px) {
		@keyframes intro {
			from {height: 0; padding: 0;}
			to {height: 390px; padding: 15px;}
		}
		@-webkit-keyframes intro {
			from {height: 0; padding: 0;}
			to {height: 390px; padding: 15px;}
		}
		@-moz-keyframes intro {
			from {height: 0; padding: 0;}
			to {height: 390px; padding: 15px;}
		}
	}

	@media (min-width: 451px) and (max-width: 620px) {
		@keyframes intro {
			from {height: 0; padding: 0;}
			to {height: 390px; padding: 15px;}
		}
		@-webkit-keyframes intro {
			from {height: 0; padding: 0;}
			to {height: 390px; padding: 15px;}
		}
		@-moz-keyframes intro {
			from {height: 0; padding: 0;}
			to {height: 390px; padding: 15px;}
		}
		.intro h2 {font-size: 230%;}
		.intro hr {margin: 20px auto;}
		.intro p {font-size: 120%;}
	}

	@media (min-width: 621px) and (max-width: 900px) {
		@keyframes intro {
			from {height: 0; padding: 0;}
			to {height: 390px; padding: 15px;}
		}
		@-webkit-keyframes intro {
			from {height: 0; padding: 0;}
			to {height: 390px; padding: 15px;}
		}
		@-moz-keyframes intro {
			from {height: 0; padding: 0;}
			to {height: 390px; padding: 15px;}
		}
		.intro h2 {font-size: 300%;}
		.intro hr {margin: 25px auto;}
		.intro p {font-size: 150%;}
	}

	@media (max-width: 900px) and (max-height: 500px) {
		.intro h2 {font-size: 160%;}
		.intro hr {margin: 15px auto;}
		.intro p {font-size: 110%;}
	}

	@media (max-width: 350px) {
		@keyframes intro {
			from {height: 0; padding: 0;}
			to {height: 275px; padding: 15px;}
		}
		@-webkit-keyframes intro {
			from {height: 0; padding: 0;}
			to {height: 275px; padding: 15px;}
		}
		@-moz-keyframes intro {
			from {height: 0; padding: 0;}
			to {height: 275px; padding: 15px;}
		}
		.intro h2 {font-size: 140%;}
		.intro p {font-size: 100%;}
		.intro a {margin-top: 5px;}
		.story .title {font-size: 200%;}
		.start .story hr {margin: 10px auto;}
		.story .container p {margin-top: 0;}
		.story .container {top: 45%;}
	}

	@media (max-width: 350px) and (max-height: 450px) {
		.intro {top: 55px;}
		nav .stories li a {font-size: 110%;}
		nav .stories li.active a {font-size: 123%;}
		nav .stories li {margin-bottom: 12px;}
		nav .stories {height: 280px; bottom: 20px;}
		.menu {height: 55px;}
		.menu .logo-menu {width: 50px; height: 50px; top: -17px;}
		.start .menu .logo-menu {top: -17px;}
		.full-bg {height: calc(100% - 70px); margin-top: 55px;}
		.story:before {height: calc(100% - 70px); top: 55px;}
	}

	@media (max-width: 320px) and (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.6) {
		nav .social {bottom: 0;}
		nav .stories {bottom: 50px;}
		.full-bg {width: 91%; height: 80%;}
		.story:before {width: 91%; height: 80%;}
		.story-detail {width: 95%;}
        .intro {height: 63%; padding: 20px; margin: auto; left: 10px;
		-webkit-animation: none;
		   -moz-animation: none;
		     -o-animation: none;
		        animation: none;}
	}