/* Import Fonts */
@import url(http://fonts.googleapis.com/css?family=Coustard|Open+Sans);

body {
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	line-height: 21px;
	font-weight:400;
	-webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
	color: #777;
	background: #000;
}
h1, h2, h3, h4, h2, h6{
	font-family: 'Coustard', serif;
	color:#fff;
	font-weight: normal;
	letter-spacing: 1px;
}
h1{font-size: 63px; line-height: 70px; padding: 0; margin: 0;}
h2{font-size: 28px; line-height: 35px; padding: 0; margin: 0; color: #b7b7b7;}

a {
	color: #b7b7b7;
	text-decoration:none;
	font-weight: normal;
}
a:hover {text-decoration:underline;}


#maximage {
	display:none;
	position:fixed !important;
}

.gradient {
	left:0;
	height:100%;
	position:absolute;
	top:0;
	width:100%;
	z-index:999;
}

.show{display: block;}
.hide{opacity: 0;}

/* Set Page Elements */
.content { 
	float:left;
	margin:40px;
	position:absolute;
	top:350px;
	width:700px;
	z-index:9999;
	-webkit-font-smoothing:antialiased;
}
.content { 
	font-size: 1.4em;
}

@media only screen and (max-device-width: 640px){
	.content{
		width: 80%;
		top: 210px;
		font-size: 1.2em;
		color: lightgoldenrodyellow;
	}

	.content h1{
		font-size: 28px;
		line-height: normal;
	}

	.content h2{
		font-size: 14px;
	}
}


.top-head{
	width: 100%;
	height: 90px;
}

#logo {
	width:300px;
	z-index:1000;
	margin: 0px 30px ;
	float: left;
}

@media only screen and (max-device-width: 640px){
		#logo { margin-top: 30px;}
}

#menu-toogle{
	display: none;
}
.main-nav{
	border-left: 1px solid #b7b7b7;
	/*margin-left: 50px;*/
	margin-top:  5px;
	font-size: 22px;
	display: inline-block;
}
.main-nav ul li { 
	list-style: none;
	display: inline-block;
	/*padding-right: 20px;
	padding-left: 20px;*/
	/*border-left: 1px solid #b7b7b7;*/
	padding-bottom: .75rem;
	text-align: center;
	width: 200px;
}

@media only screen and (max-device-width: 640px){
	.main-nav ul li { 
		text-align: left;
		width: 150px;
		line-height: 30px;
	}
}

hr {
  height: .25rem;
  width: 150px;
  margin: 0;
  margin-left: 30px; /*Primer elemento unicamente*/
  background: #1ca5cc;
  border: none;
  transition: .3s ease-in-out;
}

@media only screen and (max-device-width: 640px){
	hr{
		display: none;
	}
}

.two:hover ~ hr {
  margin-left: 230px;
}

.three:hover ~ hr {
  margin-left: 440px;
}

.four:hover ~ hr {
  margin-left: 640px;
}

.main-nav ul li a{
	text-decoration: none;
}


@media only screen and (max-device-width: 640px){
	.main-nav ul li a.active{
		background-color: white;
	    border-radius: 7px;
	    padding: 5px 10px 5px 5px;
	    cursor: pointer;
	    text-align: left;
	   }
}


.main-nav ul li a.active {
	color: #40608f;
}



button.full-screen{ 
	position: absolute;
	top: 0;
	right: 0;
	width: 31px;
	height: 31px;
	background: url("../images/full-screen-btn.png");
	border: 0;
	cursor: pointer;
	opacity: .7;
}
button.full-screen:hover {opacity: 1;}

#arrow_left, #arrow_right {
	bottom:30px;
	height:42px;
	position:absolute;
	right:40px;
	width:42px;
	z-index:1000;
}
#arrow_left {
	right:95px;
}

#contacto p{
 font-size: 22px;
}
#contacto p.tel{
 font-size: 28px;
 margin: 10px 0;
}

#contacto p.tel a{
	color: #1ca5cc;
	 font-weight: bold;	
}


footer{
	font-size: 14px;
	color: white;
	position: absolute;
	right: 0px;
	bottom: 10px;
	width: 25%;
	padding-left: 20px;
	border-radius: 20px 0 0 20px;
	height: 30px;
	line-height: 30px;
	background-color: rgba(0,0,0,0.7);
}

@media only screen and (max-device-width: 640px){
	footer{
		width: 100%;
	    margin: 0px auto;
	    font-size: 12px;
	   	text-align: center;
	}
}




@media only screen and (max-device-width: 640px){
 .menu-toogle {
    position:absolute; /*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;
    }

	.nav {
		z-index: 10000;
	  position:absolute;
	  width:200px;
	  /*height:100vh;*/
	  height: 100%;
	  top:0;
	  left:-255px; /*Ocultamos el menú en la parte izquierda para que no se vea a menos que pulsemos sobre la hamburguesa*/
	  padding-top:20px;
	  background-color: rgba(29, 33, 32, 0.9);
	  border-right:4px solid #1ca5cc;
	  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:0 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:center;
	     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*/
	      }    


	/* Le damos unos estilos al contenedor principal*/
	.main-w {
	  width:100%;
	  /*height:100vh;*/
	  transition: all .5s ease;
	}   
	   
	    /*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ú*/
	    }
}