@font-face {
    font-family: 'Porter';
    src: url('fonts/Porter-BoldDEMO.eot');
    src: url('fonts/Porter-BoldDEMO.eot?#iefix') format('embedded-opentype'),
        url('fonts/Porter-BoldDEMO.woff2') format('woff2'),
        url('fonts/Porter-BoldDEMO.woff') format('woff'),
        url('fonts/Porter-BoldDEMO.ttf') format('truetype'),
        url('fonts/Porter-BoldDEMO.svg#Porter-BoldDEMO') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aileron';
    src: url('fonts/Aileron-Regular.eot');
    src: url('fonts/Aileron-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/Aileron-Regular.woff2') format('woff2'),
        url('fonts/Aileron-Regular.woff') format('woff'),
        url('fonts/Aileron-Regular.ttf') format('truetype'),
        url('fonts/Aileron-Regular.svg#Aileron-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/* ==========================================================================
   2. GENERAL
   ========================================================================== */
body {
	font-family: 'Bebas Neue', cursive;
  color: #fff;
   font-weight: 400;
  background: #fff;
  overflow-x: hidden;
}

html {
  overflow-x: hidden;
}

/**/ 
h1{
	font-family: 'Bebas Neue', cursive;
} 

a {
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}


a:hover,
a:focus {
  text-decoration: none;
  outline: none;
}

p {
	  font-family: 'Aileron';
		font-size:21px;
}
 /* ==========================================================================
   Navbar Style
   ========================================================================== */
.navbar-brand {
	width:120px;
} 
.navbar{
	opacity: 1!important;
  pointer-events: all!important;
	background:rgba(255, 255, 255, 0.40)
}
 
 
.nav-link {
    display: block;
    padding: .5rem 1rem;
    color: #e63b36;
    text-decoration: none;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
    font-size: 28px;
}
/* ==========================================================================
 INTRO  
   ========================================================================== */
 

.transition {
  position: fixed;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  z-index: 200;
   overflow: hidden;
}

.bg-black-transition {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  background-color: #000;
	-webkit-animation: fade-out 1s ease-out 1s both;
	        animation: fade-out 1s ease-out 1s both;
}

.transition-shape {
  position: absolute;
  width: 50em;
  height: 50em;
}

.transition-shape._1 {
  left: 24em;
  top: -1em;
  z-index: 3;
  width: 60em;
  height: 60em;
			-webkit-animation: scale-down-center 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.6s both;
	        animation: scale-down-center 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.6s both;	
}

.transition-shape._2 {
  left: auto;
  top: auto;
  right: -16.6em;
  bottom: -15.9em;
  z-index: 6;
			-webkit-animation: scale-down-center 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.4s both;
	        animation: scale-down-center 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.4s both;	
}

.transition-shape._3 {
  left: -11.8em;
  top: auto;
  right: auto;
  bottom: -17.1em;
			-webkit-animation: scale-down-center 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s both;
	        animation: scale-down-center 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s both;	
}

.transition-shape._4 {
  left: -11.6em;
  top: -12.5em;
  right: auto;
  bottom: auto;
			-webkit-animation: scale-down-center 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s both;
	        animation: scale-down-center 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s both;
}

.transition-shape._5 {
  left: auto;
  top: -11em;
  right: -17em;
  bottom: auto;
		-webkit-animation: scale-down-center 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s both;
	        animation: scale-down-center 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s both;
} 


 
 
@-webkit-keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes scale-down-center {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
}
@keyframes scale-down-center {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
}


 
/* ==========================================================================
 INTRO section
   ========================================================================== */
 
header {
   position: relative;
  }
 

 
 
    .shuffle-group {
      position: relative;
      width: 100%;
			height: calc(100vh - 85px);
      margin:0px;
    }

   
    .shuffle-me {
      width: 100%;
			height: calc(100vh - 85px);
      margin: 0;
      display: block;
      position: relative;
      
    }
     
		
.cover-image-hero {
    position: absolute;
    left: 0%;
    top: 0%;
    right: 0%;
    bottom: 0%;
    z-index: 1;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.mask-img-hero {
    position: absolute;
    left: 0%;
    top: 0%;
    right: 0%;
    bottom: 0%;
    z-index: 2;
    width: 100%;
    height: 100%;
}
.mask-img-hero.opacity-35 {
    z-index: 5;
    background-color: #000;
    opacity: 0.35;
}
.intro {
    position: absolute;
    z-index: 10;
    padding: 30px 30px 30px;
    height:calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    justify-content: center;
		max-width:580px;
}

h1 {
    font-size: 190px;
    line-height: 0.8;
		margin:0;
}
h1 span {color: #f9cb47;}

.intro h2 {
    margin:0;
		font-size: 80px;
    line-height: 1;
 }

.intro h3 {
	font-size:48px;
	margin:0;
}

.intro p {
    font-size: 24px;
    font-family: 'Aileron';
    line-height: 1.4;
}



/*----------------------------*/
.promo-video {
	position:relative;
	padding:40px 0;  
	display:flex;
	align-items:center;
}


.video-responsive {
position: relative;
padding-bottom: 56.25%; /* 16/9 ratio */
padding-top: 30px; /* IE6 workaround*/
height: 0;
overflow: hidden;
}

.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/*----------------------------*/
.sec-quote {
	padding:80px 0;
	background:#243361;
 }

.sec-quote h2 {
	color:#fff;
	font-size:64px;
	font-family: 'Bebas Neue', cursive;
	
}

.autora {
	display:flex;
	align-items:center;
}

.img-autora {
	width:120px;
	border-radius:100%;
	overflow:hidden;
	margin-right:30px;
}
.autora h4,
.autora h5 {
font-family: 'Aileron';
}

.forma {
	position:absolute;
}

.forma-01 {
	top:40%;
	left:0;
	width:200px;
}
.forma-02 {
 	right:30%;
	width:200px;
}
.forma-03 {
 	right:5%;
	bottom:20%;
 }
.forma-04 {
 	left:0%;
	bottom:0%;
 }
.forma-05 {
 	width:100px;
 	left:40%;
 }

/*----------------------------*/
.sec-description {
	padding:80px 0;
	background:#243361;
	min-height:100vh;
}

.sec-description h2 {
    color: #fff;
    font-size: 140px;
    font-family: 'Bebas Neue', cursive;
    line-height: 0.8;
}

.sec-description p {
    color: #fff;
    font-size: 18px;
    font-family: 'Aileron';
    line-height: 1.8;
}
/*----------------------------*/

.cont-protagonista {
	position:relative;
	cursor:pointer;
}

.cont-protagonista h2 {
    position: absolute;
    bottom: 10px;
    left: 30px;
    font-size: 68px;
    line-height: 1;
}

.cont-protagonista .mini-data {
		position:absolute;
    left: 0%;
    top: 0%;
    right: 0%;
    bottom: 0%;
    z-index: 10;
    width: 100%;
    height: 100%;
		padding:30px;
    -o-object-fit: cover;
    object-fit: cover;
		    display: none;
    overflow: visible;
}
.cont-protagonista .mini-data.prot-01{
	background:url("../img/over-02.svg") no-repeat center;
	background-size:cover;
} 
.cont-protagonista .mini-data.prot-02{
	background:url("../img/over-03.svg") no-repeat center;
	background-size:cover;
} 
.cont-protagonista .mini-data.prot-03{
	background:url("../img/over-04.svg") no-repeat center;
	background-size:cover;
} 

.cont-protagonista .mini-data.prot-04{
	background:url("../img/over-05.svg") no-repeat center;
	background-size:cover;
} 

.cont-protagonista:hover .mini-data{
	display:flex;
	align-items:flex-end;
}


.cont-protagonista .mini-data p {
	font-size:18px;
}

/*----------------------------*/
.sec-frase {
	padding:80px 0;
 }

.sec-frase h2 {
    color: #e63b36;
    font-size: 120px;
    font-family: 'Bebas Neue', cursive;
    line-height: 0.8;
}
.sec-frase h2:last-child{
	margin-left:20%;
}
.outline-text {
  color: transparent;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #e63b36;
}
/*--------------

.mask-img-speakers {
    position: absolute;
    left: 0%;
    top: 0%;
    right: 0%;
    bottom: 0%;
    z-index: 9;
    background-color: rgba(0, 0, 0, 0.25);
}
--------------*/


.rotate-90-cw {
	-webkit-animation: rotate-90-cw 0.4s linear infinite both;
	        animation: rotate-90-cw 0.4s linear infinite both;
}
.rotate-center {
	-webkit-animation: rotate-center 0.6s ease-in-out infinite both;
	        animation: rotate-center 0.6s ease-in-out infinite both;
} 
 
@-webkit-keyframes rotate-90-cw {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
}
@keyframes rotate-90-cw {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
}



 
@-webkit-keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}


.btn-close {
    box-sizing: content-box;
    width: 2em;
    height: 2em;
    padding: .25em .25em;
    color: #000;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    border: 0;
    border-radius: .25rem;
    opacity: .5;
    position: absolute;
    top: 10px;
    right: 10px;
    background-size: 50px;
    z-index: 10;
}

a.conoce {
    padding: 5px 40px;
    background: #A2CFBA;
    border-radius: 30px;
    text-decoration: none;
    color: #243361;
    font-size: 27px;
    text-transform: uppercase;
    font-family: 'Bebas Neue';
		transition:0.3s all;
}


a.conoce:hover{
 }


.navbar-expand-md .navbar-nav .nav-link {
    padding: 8px 0px;
  margin-left: 26px;
   position: relative;
  font-weight: 500;
	text-transform:uppercase;	
		}

.navbar-expand-md .navbar-nav .nav-link:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: #f9cb47;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  transition: 0.3s; }

.navbar-expand-md .navbar-nav .active::before,
.navbar-expand-md .navbar-nav .nav-link:hover::before {
  width: 100%; }

.navbar-brand {
  color: #fff; 
	width:130px;
}

.navbar-expand-md .navbar-nav .nav-link:focus,
.navbar-expand-md .navbar-nav .nav-link:hover,
.navbar-expand-md .navbar-nav .nav-link:hover:before {
  color: #f9cb47; }

.navbar-expand-md .navbar-nav .active > .nav-link,
.navbar-expand-md .navbar-nav .nav-link.active,
.navbar-expand-md .navbar-nav .nav-link.active:before,
.navbar-expand-md .navbar-nav .nav-link.open,
.navbar-expand-md .navbar-nav .open > .nav-link {
  color: #f9cb47; }

.navbar-expand-md .navbar-toggler {
  background: transparent;
  border: 0;
  border-radius: 0px;
  margin: 5px;
  cursor: pointer;
  float: right; }

.navbar-expand-md .navbar-toggler i {
  color:#f9cb47 !important; }

.navbar-expand-md .navbar-toggler:focus {
  outline: none; }



footer{
	border-top:10px solid #9bccce;
	padding:30px 0;
}


footer h6 {color:#000;}


/* ========================================================================== 
  -2.5 Scroll To Up 
   ========================================================================== */
.back-to-top {
	display:none;
   position: fixed;
  bottom: 18px;
  right: 15px;
	    text-decoration: none;
}

.back-to-top i {
  display: block;
  width: 36px;
  height: 36px;
  line-height: 36px;
  color: #fff;
  font-size: 14px;
  text-align: center;
  border-radius: 100%;
  background-color: #e63b36;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

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

@media screen and (max-width: 767px) {
	
	h1 {
    font-size: 140px; 
	}
	.intro h2 { 
    font-size: 70px; 
	}
	
	.intro h3 {
    font-size: 28px;
  }
	.intro p {
			font-size: 21px; 
	}
	
.promo-video {  
    min-height: auto; 
}	

.sec-quote h2 {
    color: #fff;
    font-size: 40px;
    font-family: 'Bebas Neue', cursive;
}
.sec-description h2 {
     font-size: 80px; 
}

.forma-04 {
    right: 0%;
    bottom: 0;
    width: 100px;
}


.sec-quote {
    padding: 120px 0;
    position: relative;		
}

.forma-05 {
    width: 70px;
    left: 10px;
    top: 10px;
			-webkit-animation: rotate-center 0.6s ease-in-out infinite both;
	        animation: rotate-center 0.6s ease-in-out infinite both;
}
.forma-02 {
    right: 0;
    width: 75px;
    top: -45px;
}
.forma-01 {
    top: auto;
    left: 0;
    width: 130px;
    bottom: 0;
}
.forma-03 {
    right: 5%;
    bottom: 0;
    width: 100px;
}


.cont-protagonista .mini-data {
    position: relative;
 
    display: block;
    overflow: hidden;
}

.cont-protagonista .mini-data.prot-01 {
     background: #263062;
}
 

.cont-protagonista .mini-data.prot-02 {
    background: url(../img/over-03.svg) no-repeat center #e63b36;
    background-size: cover;
}
.cont-protagonista .mini-data.prot-03 {
    background: url(../img/over-04.svg) no-repeat center #a2cfba;
    background-size: cover;
}
.cont-protagonista .mini-data.prot-04 {
    background: url(../img/over-05.svg) no-repeat center #f7c745;
    background-size: cover;
}
.cont-protagonista h2 {
    position: absolute;
    bottom: auto;
    left: 30px;
    font-size: 42px;
    top: 50%;
}

.sec-frase h2 {
    color: #e63b36;
    font-size: 72px;
    font-family: 'Bebas Neue', cursive;
    line-height: 0.8;
}


}