@charset "utf-8";

  body {
    font-family: 'Didact';
    margin: 0px ;
    padding: 0px ;
    color: #303841 ;
    background-color: #EEEEEE ;
    line-height: 1em ;
    padding-top: 85px ;
    line-height: normal ;
  }

  #main-header {
    background: #393E46 ;
    z-index: 100 ;
    height: 80px ;
    width: 100% ;
    left: 0 ;
    top: 0 ;
    position: fixed ;
  }

  #main-header a {
    color: #EEEEEE ;
  }

  nav {
    float: right;
  }

  nav ul {
    margin: 0 ;
    padding: 0 ;
    list-style: none ;
    padding-right: 20px ;
  }

  nav ul li {
    display: inline-block;
    line-height: 80px ;
  }

  nav ul li a {
    display: block ;
    padding: 0 10px ;
    text-decoration: none ;
	  transition: all linear 0.5s ;
  }

  nav ul li a:hover {
    background: #00ADB5 ;
	  font-size: 1.1em ;
	  transition: all linear 0.5s ;
  }

  #contenido {
    background: #FFFFFF ;
    width: 85% ;
    max-width: 1000px ;
    margin: 20px auto ;
    box-shadow: 0 0 10px rgba(0,0,0,.3);
    padding-bottom: 50px ;
    padding: 40px ;

  }

  #drones {
    font-family: 'Didact';
    float: left ;
    padding: 15px 0 0 20px ;
    text-decoration: none ;
  }

  #drones .nombre:hover {
      color: #00ADB5
  }
  #drones .nombre {
    text-transform: uppercase ;
    padding: 20px 0 0 20px ;
    padding-left: 10px ;
    display: block ;
    font-weight: 700 ;
    color: #EEEEEE ;
  }

  #footer {
  background: #222831 ;
	color: white;
	text-align: left;
	padding: 20px;
	margin-top: 40px;
}
	#footer p {
		margin: 0;
    color: #EEEEEE ;
	}

	#footer a {
		color: #00FFF5 ;
	}

  h1 {
    text-align: center ;
  }

  h2 {
    text-align: center ;
  }

  h3 {
    text-align: center ;
  }

  h4 {
    text-align: center ;
  }



  #video {
	text-align: center;


}
  .centro {
  margin: 10px auto;
  display: block;
  width: 60% ;
  transition: all 5s linear ;
  }

  .centro:hover {
    filter:invert(100%);
    transition: all  1s linear ;
  }

  /* Imagen desenfocada y vibrante */


  .fondo:hover {
    filter: blur(2px);
    animation: shake 0.5s;
    animation-iteration-count: infinite;
  }

  @keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
  }


  #derecha {
    border-radius: 50px ;
    width:55% ;
    float: right;
    padding: 15px ;
    max-width: 475px ;
    transition: all 1s ease-out;
    animation-delay: 1s;
  }

  #derecha:hover {
    animation: shake 0.5s;
    animation-iteration-count: infinite;
    filter: hue-rotate(180deg);
  }

  #izquierda {
    border-radius: 40px;
    width: 50% ;
    float: left ;
    padding: 15px ;
    max-width: 450px ;
  }

  #izquierda:hover {
    filter: grayscale(60%);
    animation: shake 0.5s;
    animation-iteration-count: infinite;
  }

    @font-face {
    		font-family: "Didact" ;
    		src: url("../fonts/DidactGothic-Regular.ttf")
    	}

      #lista2 {
          counter-reset: li;
          list-style: none;
          *list-style: decimal;
          font: 15px 'trebuchet MS', 'lucida sans';
          padding: 0;
          margin-bottom: 4em;
          text-shadow: 0 1px 0 rgba(255,255,255,.5);
      }

      #lista2 ol {
          margin: 0 0 0 2em;
      }

      #lista2 li{
          position: relative;
          display: block;
          padding: .4em .4em .4em 2em;
          *padding: .4em;
          margin: .5em 0;
          background: #ddd;
          color: #444;
          text-decoration: none;
          border-radius: .3em;
          transition: all .3s ease-out;
      }

      #lista2 li:hover{
          background: #eee;
      }

      #lista2 li:hover:before{
          transform: rotate(360deg);
      }

      #lista2 li:before{
          content: counter(li);
          counter-increment: li;
          position: absolute;
          left: -1.3em;
          top: 50%;
          margin-top: -1.3em;
          background: #87ceeb;
          height: 2em;
          width: 2em;
          line-height: 2em;
          border: .3em solid #fff;
          text-align: center;
          font-weight: bold;
          border-radius: 2em;
          transition: all .3s ease-out;
      }





/* Modo Smartphone */
@media all and (max-width: 640px) {


  * {
    box-sizing: border-box ;
  }
  body {
    margin: 0px ;
    padding: 0px ;
    color: #303841 ;
    background-color: #EEEEEE ;
    line-height: 1em ;
    padding-top: 85px ;
    line-height: normal ;
    overflow-y: scroll ;
    overflow-x: hidden ;

  }

  #main-header {
    background: #393E46 ;

    height: 80px ;
    width: 100% ;
    left: 0 ;
    top: 0 ;
    position: absolute;
  }

  #main-header a {
    color: #EEEEEE ;
  }

  nav {
    float: right;
    position: absolute;
    top: 0;
    left:-220px ;
    height: auto;
    border-bottom: 4px solid #008891;
    background-color: #393E46 ;
    border-right:4px solid #008891;
    transition:all .5s ease ;
  }

  nav ul {
    margin: 0 ;
    padding: 0 ;
    list-style: none ;
    padding-left: 10px ;
    padding-right: 10px ;
  }
/* Mmenú lateral */
  nav ul li {
    display: block;
    width: 100%;
    margin: 0 auto ;
    line-height: 2;
    position: relative ;
    background-color:transparent;
    text-align:center;
    color:rgba(221, 231, 228, 1);
  }



/* Fixed para que se desplace con la pagina */
.menu-toogle {
  position: fixed ;
  width: 35px ;
  line-height: 1.1 ;
  text-align: center;
  top: 1px ;
  left: 0px ;
  border-top-right-radius: 9px;
  border-bottom-right-radius: 9px ;
  background-color: #696969 ;
  transition: all .5s ease ;
  z-index: 10 ;
}

.menu-toogle:before {
  content:"☰";
  font-size: 32px ;
  color: white ;
}

.checkbox {
  display: none ;

}
.checkbox:checked ~ nav {
  left:0px;
  position: fixed ;
}
.checkbox:checked ~ .menu-toogle {
  left:153px ;
  position: fixed ;
}
.checkbox:checked ~ .main-w {
  margin-left:200px ;
}

  nav ul li a {
    display: static ;
    padding: 0 10px ;
    text-decoration: none ;
    transition: all linear 0.5s ;
}

  nav ul li a:hover {
    background: #00ADB5 ;
    font-size: 1em ;
    transition: all linear 0.5s ;
}

  #contenido {
    background: #FFFFFF ;
    width: 85% ;
    max-width: 1000px ;
    margin: 20px auto ;
    box-shadow: 0 0 10px rgba(0,0,0,.3);
    padding-bottom: 50px ;
    padding: 40px ;

  }

  #drones {
    float: right ;
    padding: 15px 40% 0 20px ;
    text-decoration: none ;
  }

  #drones .nombre:hover {
      color: #00ADB5
  }
  #drones .nombre {
    text-transform: uppercase ;
    padding: 20px 0 0 20px ;
    padding-right: 10px ;
    display: block ;
    font-weight: 700 ;
    color: #EEEEEE ;
  }

  #footer {
	background: #222831 ;
	color: white;
	text-align: left;
	padding: 20px;
	margin-top: 40px;
}
	#footer p {
		margin: 0;
    color: #EEEEEE ;
	}

	#footer a {
		color: #00FFF5 ;
	}

  h1 {
    text-align: center ;
  }

  h2 {
    text-align: center ;
  }

  h3 {
    text-align: center ;

  }

  h4 {
    text-align: center ;
  }

/* Para que los vídeos del iframe sean adaptables */

#video iframe {
  text-align: center ;
  width: 100% ;
  height: 100% ;
}
}