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

body {
	background: #fff;
	font-family: 'Lato', Arial, sans-serif;
	color: #fff;
}

.wrapper {
	margin: 0 auto 100px auto;
	max-width: 1024px;
}

.stage {
	list-style: none;
	padding: 0;
}

/*************************************
Build the scene and rotate on hover
**************************************/

.scene {
	width: 260px;
	height: 400px;
	margin: 30px;
	float: none;
	display: inline-block;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	perspective: 1000px;
}

.movie {
	width: 260px;
	height: 400px;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: translateZ(-130px);
	-moz-transform: translateZ(-130px);
	transform: translateZ(-130px);
	-webkit-transition: -webkit-transform 350ms;
	-moz-transition: -moz-transform 350ms;
	transition: transform 350ms;
}

.movie:hover {
	-webkit-transform: rotateY(-78deg) translateZ(20px);
	-moz-transform: rotateY(-78deg) translateZ(20px);
	transform: rotateY(-78deg) translateZ(20px);
}

/*************************************
Transform and style the two planes
**************************************/

.movie .poster, 
.movie .info {
	position: absolute;
	width: 260px;
	height: 400px;
	background-color: #fff;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}

.movie .poster  {
	-webkit-transform: translateZ(130px);
	-moz-transform: translateZ(130px);
	transform: translateZ(130px);
	background-size: cover;
	background-repeat: no-repeat;
}

.movie .info {
	-webkit-transform: rotateY(90deg) translateZ(130px);
	-moz-transform: rotateY(90deg) translateZ(130px);
	transform: rotateY(90deg) translateZ(130px);
	border: 1px solid #B8B5B5;
	font-size: 0.75em;
}

/*************************************
Shadow beneath the 3D object
**************************************/

.csstransforms3d .movie::after {
	content: '';
	width: 260px;
	height: 260px;
	position: absolute;
	bottom: 0;
	box-shadow: 0 30px 50px rgba(0,0,0,0.3);
	-webkit-transform-origin: 100% 100%;
	-moz-transform-origin: 100% 100%;
	transform-origin: 100% 100%;
	-webkit-transform: rotateX(90deg) translateY(130px);
	-moz-transform: rotateX(90deg) translateY(130px);
	transform: rotateX(90deg) translateY(130px);
	-webkit-transition: box-shadow 350ms;
	-moz-transition: box-shadow 350ms;
	transition: box-shadow 350ms;
}

.csstransforms3d .movie:hover::after {
	box-shadow: 20px -5px 50px rgba(0,0,0,0.3);
}

/*************************************
Movie information
**************************************/

.info header {
	color: #FFF;
	padding: 7px 10px;
	font-weight: bold;
	height: 195px;
	background-size: contain;
	background-repeat: no-repeat;
	text-shadow: 0px 1px 1px rgba(0,0,0,1);
}

.info header h1 {
	margin: 0 0 2px;
	font-size: 1.4em;
}

.info header .rating {
	border: 1px solid #FFF;
	padding: 0px 3px;
}

.info p {
	padding: 1.2em 1.4em;
	margin: 2px 0 0;
	font-size: 1.23em;
	font-weight: 500;
	color: #666;
	line-height: 1.4em;
	border-top: 10px solid #555;
	text-align: justify;
}

/*************************************
Generate "lighting" using box shadows
**************************************/

.movie .poster,
.movie .info,
.movie .info header {
	-webkit-transition: box-shadow 350ms;
	-moz-transition: box-shadow 350ms;
	transition: box-shadow 350ms;
}

.csstransforms3d .movie .poster {
	box-shadow: inset 0px 0px 40px rgba(255,255,255,0);
}

.csstransforms3d .movie:hover .poster {
	box-shadow: inset 300px 0px 40px rgba(255,255,255,0.8);
}

.csstransforms3d .movie .info, 
.csstransforms3d .movie .info header {
	box-shadow: inset -300px 0px 40px rgba(0,0,0,0.5);
}

.csstransforms3d .movie:hover .info, 
.csstransforms3d .movie:hover .info header {
	box-shadow: inset 0px 0px 40px rgba(0,0,0,0);
}

/*************************************
Posters and still images
**************************************/

.scene:nth-child(1) .movie .poster {
  background-image: url(../img/team/Freddy-Vader.png);
}

.scene:nth-child(2) .poster {
  background-image: url(../img/team/market.jpg);
}

.scene:nth-child(3) .poster {
  background-image: url(../img/team/BossSistem.png);
}

.scene:nth-child(4) .poster {
  background-image: url(../img/team/analyst.png);
}

.scene:nth-child(5) .poster {
  background-image: url(../img/team/totoro.jpg);
}

.scene:nth-child(6) .poster {
  background-image: url(../img/team/Gus.png);
}

.scene:nth-child(7) .poster {
  background-image: url(../img/team/testerI.jpg);
}

.scene:nth-child(8) .poster {
  background-image: url(../img/team/testerII.jpg);
}

.scene:nth-child(9) .poster {
  background-image: url(../img/team/diseno.jpg);
}

.scene:nth-child(10) .poster {
  background-image: url(../img/team/social.jpg);
}

.scene:nth-child(11) .poster {
  background-image: url(../img/team/multimedia.jpg);
}

.scene:nth-child(12) .poster {
  background-image: url(../img/team/staff.jpg);
}

.scene:nth-child(13) .poster {
  background-image: url(../img/team/help.jpg);
}

.scene:nth-child(14) .poster {
  background-image: url(../img/team/service.jpg);
}

.scene:nth-child(1) .info header {
	background-image: url(../img/team/Boss-1.jpg);
	background-position: center;
}

.scene:nth-child(2) .info header {
	background-image: url(../img/team/market-1.jpg);
	background-position: center;
}

.scene:nth-child(3) .info header {
	background-image: url(../img/team/BossSistem-1.jpg);
	background-position: center;
}

.scene:nth-child(4) .info header {
	background-image: url(../img/team/analyst-1.jpg);
	background-position: center;
}

.scene:nth-child(5) .info header {
	background-image: url(../img/team/totoro-1.jpg);
	background-position: center;
}

.scene:nth-child(6) .info header {
	background-image: url(../img/team/Gus-1.jpg);
	background-position: center;
}

.scene:nth-child(7) .info header {
	background-image: url(../img/team/Jr-1.jpg);
	background-position: center;
}

.scene:nth-child(8) .info header {
	background-image: url(../img/team/charly-1.jpg);
	background-position: center;
}

.scene:nth-child(9) .info header {
	background-image: url(../img/team/Diseno-1.jpg);
	background-position: center;
}

.scene:nth-child(10) .info header {
	background-image: url(../img/team/social-1.jpg);
	background-position: center;
}

.scene:nth-child(11) .info header {
	background-image: url(../img/team/multimedia-1.jpg);
	background-position: center;
}

.scene:nth-child(12) .info header {
	background-image: url(../img/team/staff-1.png);
	background-position: center;
}

.scene:nth-child(13) .info header {
	background-image: url(../img/team/help-1.jpg);
	background-position: center;
}

.scene:nth-child(14) .info header {
	background-image: url(../img/team/Service-1.jpg);
	background-position: center;
}

/*************************************
Fallback
**************************************/
.no-csstransforms3d .movie .poster, 
.no-csstransforms3d .movie .info {
	position: relative;
}

/*************************************
Media Queries
**************************************/
@media screen and (max-width: 60.75em){
	.scene {
		float: none;
		margin: 30px auto 60px;
	}
}




/****************
--- FOOTER ---
****************/

/*sections*/
section.dark-background,
section.image-background,
section.video-background,
section.color-background {
  color: rgba(255,255,255,.8);
}
/*heading*/
h1, h2, h3, h4, h5, h6 {
  font-family: 'Roboto', sans-serif;
  color: #272b2e;
  margin-top: 10px;
}
.dark-background h1, .dark-background h2, .dark-background h3, .dark-background h4, .dark-background h5, .dark-background h6,
.color-background h1, .color-background h2, .color-background h3, .color-background h4, .color-background h5, .color-background h6,
.image-background h1, .image-background h2, .image-background h3, .image-background h4, .image-background h5, .image-background h6,
.video-background h1, .video-background h2, .video-background h3, .video-background h4, .video-background h5, .video-background h6 {
  color: #f9f9f9;
}
/*blockquote*/
blockquote p {
  font-size: 17px;
  font-family: Lora,Georgia,Times,serif;
  font-style: italic;
  font-weight: 400;
}
blockquote footer {
  background-color: transparent;
  border: none;
}

/* ------------------
----SOCIAL ICONS ----
-------------------*/
.social-icons { 
  padding: 0;
}
.social-icons li {
  margin: 0;
  list-style: none;
  display: inline-block;
}
.social-icons li {
  margin: 3px 1px;
}

/*default-medium*/
.social-icons li a .fa {
  color: #fff;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 100%;
  -webkit-transition: all 0.05s ease-in-out;
  -moz-transition: all 0.05s ease-in-out;
  -ms-transition: all 0.05s ease-in-out;
  -o-transition: all 0.05s ease-in-out;
  transition: all 0.05s ease-in-out;
}

/*circle*/
.social-icons.circle li a .fa {
  border-radius: 100%;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
}
/*social icons light*/
.social-icons.light li a .fa {
  background-color: transparent;
  color: #c7c7c7;
  border: 1px solid #c7c7c7;
  font-size: 45px;
}

/*fill-hover-color*/
.social-icons.fill-hover-color li a .fa-facebook:hover { 
  background-color: #3b5998;
  color: #fff;
  border-color: #3b5998;
}
.social-icons.fill-hover-color li a .fa-twitter:hover {
  background-color: #55acee;
  color: #fff;
  border-color: #55acee;
}
.social-icons.fill-hover-color li a .fa-youtube:hover {
  background-color: #cc181e;
  color: #fff;
  border-color: #cc181e;
}
/*social animation effect*/

/* -------------
----FOOTER -----
--------------*/
footer {
  display: block;}
footer {
  font-size: 14px;
  border-top: 1px solid rgba(0,0,0,.08);
  background-color: #f9f9f9;
}
.foote-conten{
  position:relative;
  width:100%;
  height:auto;
}
.foote-conten .content-container-logo img{
  width:10%;
  position:absolute;
  top:50%;
  left:10%;
  -webkit-transform:translate(-50%, -50%);
  -ms-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
  z-index:3
}
.foote-conten .content-container-link a{
  position:absolute;
  top:20%;
  right:58%;
  z-index:3
}
.foote-conten .content-container-link1 a{
  position:absolute;
  top:18%;
  right:10%;
  z-index:3
}
.foote-conten .content-container-social ul{
  position:absolute;
  top:30%;
  right:25%;
  z-index:3
}
footer .content {
  padding: 20px 0;
}
footer.dark-background {
  border-top: 10px solid rgba(255,255,255,.08);
  background-color: #363b3f;
}
/*copyright*/
.copyright {
  background-color: #f4f4f4;
  padding: 20px 0;
  text-align: center;
  border-top: 1px solid #ececec;
}
.copyright.dark-background {
  background-color: #272b2e;
  border-top: 0;
}
.copyright p {
  margin-bottom: 0;
}

/* -------------
---- BOTON CONTACTO -----
--------------*/
.btn-right a{
  font-size: 35px;
  color: #fff;
  float: left;
  margin: 20px;
  -webkit-transition: margin 0.5s ease-out;
  -moz-transition: margin 0.5s ease-out;
  -o-transition: margin 0.5s ease-out;
}

.btn-right:hover a{
  margin-right:  2px;
}
/* -------------
---- BOTON HACIA ARIBA -----
--------------*/
.btn-upwards a{
  font-size: 45px;
  color: #fff;
  float: left;
  margin: 20px;
  -webkit-transition: margin 0.5s ease-out;
  -moz-transition: margin 0.5s ease-out;
  -o-transition: margin 0.5s ease-out;
}

.btn-upwards:hover a{
  margin-top:  2px;
}


/* -------------
---- FOOTER RESPOSIVE -----
--------------*/
@media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape){
  footer .content {
    padding: 30px 0;
  }
  .foote-conten .content-container-logo img{
    width:15%;
    position:absolute;
    top:45%;
    left:12%;
    -webkit-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    transform:translate(-50%, -50%);
    z-index:3
  }
  .foote-conten .content-container-link a{
    position:absolute;
    top:10%;
    right:52%;
    z-index:3
  }
  .foote-conten .content-container-social ul{
    position:absolute;
    top:10%;
    right:22%;
    z-index:3
  }
  .foote-conten .content-container-link1 a{
    position:absolute;
    top:0px;
    right:5%;
    z-index:3
  }
  .div-img .imge-25 {
    display: inline-block;
    left: 0;
    position: absolute;
    margin-left: ;
    margin-top: -63%;
    width: 100%;
    max-height: 100%;
    z-index: 2;
    transform: scale(0.4);
    -ms-transform: scale(0.4);
    -moz-transform: scale(0.4);
    -webkit-transform: scale(1.0);
    -o-transform: scale(0.4);
    -webkit-transition: all 1.3s ease-in-out;
    -moz-transition: all 1.3s ease-in-out;
    -ms-transition: all 1.3s ease-in-out;
    -o-transition: all 1.3s ease-in-out;
  }
}
@media screen and (max-width : 767px){

  footer .content {
    padding: 40px 0;
  }
  .foote-conten .content-container-logo img{
    width:30%;
    position:absolute;
    top:25%;
    left:20%;
    -webkit-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    transform:translate(-50%, -50%);
    z-index:3
  }
  .foote-conten .content-container-link a{
    position:absolute;
    top:15%;
    right:10%;
    z-index:3
  }
  .foote-conten .content-container-social ul{
    position:absolute;
    top:65%;
    right:65%;
    z-index:3
  }
  .foote-conten .content-container-link1 a{
    position:absolute;
    top:55%;
    right:20%;
    z-index:3
  }
  .div-img .imge-22 {
    display: inline-block;
    width:30%;
    position:absolute;
    top:10%;
    left:10%;
    z-index:3
  }
  .div-img .imge-23 {
    display: inline-block;
    left: 0;
    margin-left: 4%;
    margin-top: 20%;
    width: 100%;
    z-index: 1;
    transform: scale(0.4);
    -ms-transform: scale(0.4);
    -moz-transform: scale(0.4);
    -webkit-transform: scale(0.8);
    -o-transform: scale(0.4);
    -webkit-transition: all 1.3s ease-in-out;
    -moz-transition: all 1.3s ease-in-out;
    -ms-transition: all 1.3s ease-in-out;
    -o-transition: all 1.3s ease-in-out;
  }
  .div-img .imge-24 {
    display: inline-block;
    margin-left: 8%;
    margin-top: -10%;
    width: 90%;
    z-index: -1;
    transform: scale(0.4);
    -ms-transform: scale(0.4);
    -moz-transform: scale(0.4);
    -webkit-transform: scale(0.89);
    -o-transform: scale(0.4);
    -webkit-transition: all 1.3s ease-in-out;
    -moz-transition: all 1.3s ease-in-out;
    -ms-transition: all 1.3s ease-in-out;
    -o-transition: all 1.3s ease-in-out;
  }

  .div-img .imge-25 {
    display: inline-block;
    left: 0;
    position: absolute;
    margin-left: 4%;
    margin-top: -87%;
    width: 100%;
    max-height: 100%;
    z-index: 2;
    transform: scale(0.4);
    -ms-transform: scale(0.4);
    -moz-transform: scale(0.4);
    -webkit-transform: scale(0.7);
    -o-transform: scale(0.4);
    -webkit-transition: all 1.3s ease-in-out;
    -moz-transition: all 1.3s ease-in-out;
    -ms-transition: all 1.3s ease-in-out;
    -o-transition: all 1.3s ease-in-out;
  }
}

.loading {
  background: url('../img/loading.gif') no-repeat center center;
} 
  
.wrap-3d {
  width: 100%;
  height: 100%;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  background-color: #f0f0f0;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 150rem;
          perspective: 150rem;
  -webkit-perspective-origin: 50% 110%;
          perspective-origin: 50% 110%;
}



/* -------------------- menu --------------------- */
@-webkit-keyframes floating {
  0%, 100% {
    -webkit-transform: translateY(-5%);
            transform: translateY(-5%);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes floating {
  0%, 100% {
    -webkit-transform: translateY(-5%);
            transform: translateY(-5%);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
.item-caption {
  display: block;
  position: relative;
  float: left;
  width: 50%;
}

.item-3d:nth-child(odd) .item-caption {
  padding-left: 10%;
}
@media (max-width: 600px) {
  .item-3d:nth-child(odd) .item-caption {
    padding-left: 5%;
  }
}

.item-3d:nth-child(even) .item-caption {
  text-align: right;
  padding-right: 10%;
}
@media (max-width: 600px) {
  .item-3d:nth-child(even) .item-caption {
    padding-right: 5%;
  }
}

.item-caption p {
  font-size: 87.5%;
  line-height: 1.333;
  margin-bottom: 1.25rem;
}
@media (max-width: 600px) {
  .item-caption p {
    margin-bottom: 0.5rem;
  }
}

.item-caption p a {
  position: relative;
  display: inline-block;
  margin-bottom: 0.3rem;
}
.item-caption p a:before {
  content: '';
  position: absolute;
  right: 1rem;
  bottom: 3px;
  left: 0;
  height: 1px;
  background-color: #08c;
  opacity: 0;
  -webkit-transition: opacity 0.25s;
  transition: opacity 0.25s;
}
.item-caption p a:after {
  content: '\003E';
  padding-left: 0.5rem;
  text-decoration: none;
}
.item-caption p a:hover:before, .item-caption p a:active:before, .item-caption p a:focus:before {
  opacity: 0.5;
}

.intro {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 15% 2rem;
  text-align: center;
}
.intro:after {
  content: '\2193';
  position: absolute;
  bottom: 20%;
  left: 0;
  width: 100%;
  font-size: 150%;
  -webkit-animation: scroll-arrw 1s -1s infinite linear;
          animation: scroll-arrw 1s -1s infinite linear;
}

@-webkit-keyframes scroll-arrw {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 0;
  }
  50% {
    -webkit-transform: translateY(80%);
            transform: translateY(80%);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(160%);
            transform: translateY(160%);
    opacity: 0;
  }
}

@keyframes scroll-arrw {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 0;
  }
  50% {
    -webkit-transform: translateY(80%);
            transform: translateY(80%);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(160%);
            transform: translateY(160%);
    opacity: 0;
  }
}
.intro h1 {
  font-size: 250%;
  font-weight: normal;
  color: #303030;
}

.intro p {
  margin-bottom: 2rem;
  font-size: 175%;
  line-height: 1.4286;
}

 /*INICIO MENU*/
.menu
{
	list-style: none;
	line-height: 42px;
	margin: 2em auto;
	/*outline: 1px solid red;*/
	padding-left: 0;
	width: 15em;
}

.menu a
{
	background: url(icons.png) no-repeat left top;
	color: #ddd;
	display: block;
	padding-left: 2em;
	text-decoration: none;
	text-transform: uppercase;
	--webkit-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
	width: 100%;
}

.menu a:hover
{
	margin-left: 1em;
}

.menu li
{
	box-shadow: 3px 0 rgba(255,255,255,.2) inset;
	margin-bottom: 5px;
	padding-left: .8em;
	/*outline: 1px solid green;*/
	--webkit-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
}

.menu li:hover
{
	box-shadow: 15em 0 rgba(255,255,255,.2) inset;
}

.menu li:nth-child(2) a
{
	background-position: 0 -42px;
}

.menu li:nth-child(3) a
{
	background-position: 0 -84px;
}

.menu li:nth-child(4) a
{
	background-position: 0 -126px;
}

.menu li:nth-child(5) a
{
	background-position: 0 -168px;
}

.menu li:last-child a
{
	background-position: 0 -210px;
}
/*FIN MENU*/

/*Damos estilos al menú*/
.nav {
  position:absolute;
  width:200px;
  height:100vh;
  top:0;
  left:-220px; /*Ocultamos el menú en la parte izquierda para que no se vea a menos que pulsemos sobre la hamburguesa*/
  padding-top:47px;
  background-color: rgba(29, 33, 32, 1);
  /*border-right:4px solid rgba(114, 126, 3, 1);*/
  transition:all .5s ease; /*Damos a la caja del menú una transición para que tenga un desplazamiento suave*/
}
   /*Estilos de los li del menú*/
   .nav__item {
     display:block;
     width:96%;
     margin:4px auto;
     line-height:2;
     position:relative; /*Le damos una posición relativa para posteriormente añadirle el triangulo que indica que se está en la página actual del menú*/
     border-bottom:.5px solid rgba(59, 62, 61, 1);
     border-top:.5px solid rgba(59, 62, 61, 1);
     background-color:transparent;
     font-family: 'Lato', sans-serif;
     text-align:left;
     color:rgba(221, 231, 228, 1);
   }
       /*Damos colocamos el triangulo negro a la pestaña del menú dónde nos encontramos actualmente*/
       .current:before {
          content:"";
          width:0;
          height:0;
          position:absolute; /*Le damos al before una posición absoluta relativa al li que lo contiene*/
          border-top:17px solid transparent;
          border-left:15px solid #1D2120;
          border-bottom:17px solid transparent;
          top:0px;
          right:-15px; /*Lo posicionamos -15px a la derecha de su contenedor*/
          z-index:4; /*le otorgamos un z-index alto para que se posicione arriba de otros elementeos*/
       }
      /*Colocamos el borde verde al triangulo por medio de otro trangulo verde*/
      .current:after {
          content:"";
          width:0;
          height:0;
          position:absolute;/*Le damos al after una posición absoluta relativa al li que lo contiene*/
          border-top:16.5px solid transparent;
          /*border-left:17px solid rgba(114, 126, 3, 1);*/
          border-bottom:17px solid transparent;
          top:.5px;
          right:-21px;
          z-index:1;  /*le otorgamos un z-index bajo para que se posicione debajo del trinagulo negro*/
      }
  /*Estos son los estilos de la hamburguesa del menú que abre y cierra el mismo*/
  .menu-toogle {
    position:fixed; /*Lo posicionamos absolutamente para poder darle una posición y poder moverlo según el menú esté abierto o cerrado*/
    width: 35px;
    line-height:1.1;
    text-align:center;
    top:6.5px; /*Le damos una posición top y left en donde queramos que se encuentre la hamburguesa del menú*/
    left: 8px; 
    border-radius:3px;
    background-color: #142b25;
    transition: all .5s ease; /*Añadimos una transición para que realice un desplazamineto suave*/
    z-index:10;
  }
    /*Añadimos la haburguesa y le damos unos estilos*/
    .menu-toogle::before {
      content:"☰";
      font-size:32px;
      color:white;
    }

/* Le damos unos estilos al contenedor principal*/
.main-w {
  width:100%;
  height:100vh;
  transition: all .5s ease;
}   
    .header-w figure {
      width:100%;
      height:150px;
      text-align:center;
      position:relative;
    }
        .header-w figure:before {
          content:"O";
          width:15px;
          height:15px;
          position:absolute;
          background-color:white;
          border-radius:100%;
          color:#A9BC00;
          font-size:120%;
          font-wheight:bolder;
          font-family:verdana;
          left:42vw;
          top:9vw;     
        }
        .header-w figure:after {
          content:"O";
          width:15px;
          height:15px;
          position:absolute;
          background-color:white;
          border-radius:100%;
          color:#A9BC00;
          font-size:120%;
          font-wheight:bolder;
          font-family:verdana;
          left:50.8vw;
          top:9vw; 
        }
    .featured-img {
      margin:3em 6vw 0 0;
      border:4px solid white;
      border-radius:100%;
    }
    .header-w__description {
      width:80%;
      height:auto;
      margin:0 auto;
      padding:1em;
      line-height:2;
      text-align:center;
      color:rgba(33, 36, 8, 1);
    }
        .header-w__title
        {
          font-size:300%;
          font-family:Lobster;
          margin:1em 0 0 0;
        }
        .header-w__title2 {
          font-size:250%;
          font-family:Lobster;
          margin:0;
        }
    .paragraph {
      width:80%;
      margin:0 auto;
      text-align:center;
      font-family:'Source Sans Pro', sans-serif;
    }

    /*Estos son los estilos que le dan la funcionalidad al menú*/
    /*El checkbox según esté activado o no hará que el menú aparezca o desaparezca*/
    .checkbox {
      display:none; /*Ocultamos el checkbox pues no nos interesa que se vea*/
    }
    .checkbox:checked ~ .nav {
      left:0px; /*Le quitamos el left negativo para que el menú vuelva a su posición original*/
      position:fixed; /* Fijamos el menú lateral para que se desplace cuando hagamos scroll*/
    }
    .checkbox:checked ~ .main-w {
      margin-left:200px; /*Cuando el checkbox asigna un margen al contenedor principal para que se desplace junto con el menú*/
    }
    .checkbox:checked ~ .menu-toogle { 
      left:208px;
      position:fixed; /*Fijamos la hamburgues para que se desplace junto con el menú*/
    }

/*POSICION RESPONSIVE MENU*/
/*nav {
	background: rgba(0,0,0,.8);
	box-sizing: border-box;
	left: -18em;
	height: 100%;
	padding-right: .25em;
	padding-top: 3em;
	position: absolute;
	top: 0;
	transition: all .3s;
	z-index: 20;
}

nav.mostrar {
	left: 0;
}

#mostrar-nav {
	background: url(menu-icon.png);
  background-color: #333;
	cursor: pointer;
	left: 2em;
	height: 30px;
	position: absolute;
	top: 2em;
	width: 30px;
	z-index: 30;
} 
*/
/****************
--- LOGO ---
****************/
.title{
  width:10%;
  height: 45%;
  position:absolute;
  top:10%;
  left:50%;
  -webkit-transform:translate(-50%, -50%);
  -ms-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
  z-index:3
}
.title1{
  width:10%;
  position:absolute;
  top:1%;
  left:50%;
  -webkit-transform:translate(-50%, -50%);
  -ms-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
  z-index:3
}
.title2{
  width:10%;
  position:absolute;
  top:2.1%;
  left:50%;
  -webkit-transform:translate(-50%, -50%);
  -ms-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
  z-index:3
}