@charset "utf-8";

body {padding: 0; margin: 0; width: 100%; height: 100vh; background-color: black;}
h1 {padding: 0; margin: 0;}
.grid_exp {position: relative; margin: 0 auto; padding: 50px 0 170px; width: 100%; max-width: 1500px; min-height: calc(100vh - 30px);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); column-gap: 100px; text-align: left; justify-content: center;}
.secciones_exp {grid-column: auto / span 1; padding: 0 10%;}
main {padding: 150px 0; text-align: center;}
.txt {font: 200 normal 1em 'Montserrat', sans-serif; color: white; text-decoration: none;}

/*PORTADA*/
#portada {position: relative; width: 100%; height: 100vh; overflow: hidden;}
#portada img {width: 100vw; min-height: 100vh;}
/*HEADER*/
header {top:0; position: fixed; z-index: 1; width: 100%; background-color:rgb(20,20,20); margin: 0; padding: 0; text-align: center;}
#nombre {font: 200 normal 45px 'Montserrat', sans-serif; text-decoration: none; margin: 0 20px 0 12px; padding: 0; color: #f0ad4e;}
nav {display: inline-block; position: relative; vertical-align: top;}
nav ul {padding: 0; margin: 0;}
nav ul li{display: inline-block; position: relative; margin: 0; padding: 18px 10px;}
nav ul li:hover {background-color:#f0ad4e; box-shadow: inset 0 0 3px 1px rgba(0,0,0,0.5); transition: ease .5s;}
nav ul li a {font: 300 normal 15px 'Montserrat', sans-serif; color: whitesmoke; text-decoration: none;}
nav ul li:hover a{color: black; font: 500 normal 15px 'Montserrat', sans-serif;}

/*EXPERIENCIA Y VIDEOS*/
#contacto a {text-decoration: none; font-size: 10px;}
#contacto a:hover {text-decoration: none; color: white;}
#videobook {margin-top: 80px;}
.tri {width: 0; height: 0;  border-top: 10px solid transparent; border-bottom: 10px solid transparent;	display:inline-block;	vertical-align: center;	}
.izq {border-left: 20px solid #f0ad4e; margin-right: 30px;}
.der {border-right: 20px solid #f0ad4e; margin-left: 30px;}

.seccion {font-size: 25px; margin: 100px auto 30px; padding-bottom: 20px; color: #f0ad4e; transition: all .1s ease-in-out;}
.seccion2 {font-size: 22px; position: relative; color: #f0ad4e; width: 100%; display: inline-block;  transition: all .1s ease-in-out; margin: 0;}
.titulo {font-size: 18px; margin: 20px 0 0; color: #f0ad4e;}
.datos {font-size: 14px; margin: 7px 0 0;}
.videos {width: 60%; max-width: 50vw; height: 500px; padding: 50px 0; margin: 40px 0; border-bottom: 2px ridge #f0ad4e;}
/*GALERIA*/
* {box-sizing: border-box;}
.column {position: relative; display: inline-block;  max-width: 92vw;}
.previa {margin: 0 -4px -6px 0; width: auto; height: 200px; padding: 10px 0;
   border-top: 2px ridge #f0ad4e; border-bottom: 2px ridge #f0ad4e; filter:brightness(85%); }
.previa:hover {filter:brightness(110%);}
.mySlides {position: relative; display: none; height: 100vh;  margin: 0 auto;}
.titleGallery {color:white; font: 200 normal 25px 'Montserrat', sans-serif;}
/*CAJA GALERIA*/
.modal {display: none; position: fixed; z-index: 3; top: 0; left:0; width: 100%; height: 100vh; overflow: hidden; background-color: black; align-items: center;}
.forma{position: fixed; z-index: 3;	top: 0;}
/*BOTONES*/
.close {z-index: 3; color: white; position: fixed; font-size: 35px;	right: 5px; top: 5px; font-weight: bold;
  padding: 0 20px; background-color: rgba(100, 100, 100, .3); border-radius: 5px;}
.close:hover, .close:focus {color: #999; text-decoration: none; cursor: pointer; background-color: rgba(0, 0, 0, 0.5);}
.cursor {cursor: pointer; z-index: 2;}
.prev, .next {z-index: 3; cursor: pointer; position: fixed; width: 3%; max-width: 100px; min-width: 50px;
  top: 50%;	padding: 30px 0; background-color:rgba(100, 100, 100, .3); color: white; font-weight: bold;
   font-size: 20px; transition: 0.6s ease; border-radius:3px; user-select: none; -webkit-user-select: none; margin: 0;}
.prev:hover, .next:hover {background-color: rgba(0, 0, 0, 0.5); color: #999;}
.next {right: 5px;} .prev {left: 5px;}

/*CONTACTO*/
#contacto {width: 70%; max-width: 400px; display: inline-block;}
.titol {font-size: 18px; Color: #f0ad4e; vertical-align: top;}
.titol_llamada {font-size: 18px; Color: #f0ad4e; vertical-align: top; text-align: left; margin: 50px 0 30px ; padding-bottom: 30px; border-bottom: 2px ridge #f0ad4e; }
#contacto a[href^="tel:"] {display: inline-block; margin: 20px 30px 20px 15px; font-size: 16px;	color: #f0ad4e; text-decoration: none;}
#contacto a[href^="tel:"]::before {content: "\260e";}

/*FORMULARIO*/
#contacto label {display:block; position: relative; text-align: left; margin-top: 15px; letter-spacing:1px;
	color: #f0ad4e;	font-size: 14px;}
#contacto form {margin: 0 auto; width:100%; max-width: 400px; min-width: 100px;}
#contacto input, #contacto textarea {width:100%; background:#666666;
  padding:0 5px ; font: 200 normal 14px 'Montserrat', sans-serif; color:white;}
#contacto input {height: 27px;}
#contacto textarea {height:100px; margin-top: 5px; }
#contacto #submit {display: block; width:85px; height:35px; border:none; cursor:pointer;}
/*PROTECTOR FORMULARIO*/
.verif {display: none;}
.g-recaptcha {position: relative; padding: 10px 0; margin-bottom: 100px;}
#i-recaptcha {position: relative;}

/*FOOTER*/
footer {display: block; position: relative; text-align: center;  width: 100%;  margin: 0 auto 10px;}
footer a {text-decoration: none; font-size: 12px; color: #f0ad4e; margin-left: 7px;}
footer p {display: inline-block; font-size: 12px;}

@media (max-width: 768px) {
  /*HEADER*/
  #nombre {font-size: 35px; }
  nav ul li{padding: 9px 5px;}
  nav ul li:hover a{font-size: 12px;}
  nav ul li a{font-size: 12px; margin: 0 2px;}
  /*GALERIA*/
  .mySlides {height: auto; width: auto; max-height: 100%; max-width: 100vw; margin: 0 auto;} 
  .videos {width: 100%; max-width: 100%; height: 65vh; min-height: 300px; padding: 30px 0;}
  .column {margin: 0; padding: 0;}
  .seccion2 {margin: 50px 0;}
 
  #portada img {height: 120vh; width: auto; margin: 60px 0 0 -40px;}
}