/* HOME */


.menu-bar{*zoom:1; width: 100%; height: 140px; background-color: #5a5a5a; z-index: 1001; position: relative}

.portafolio-title{position: relative; display: inline-block; z-index: 1002}
.img-will{width: 100%; height: auto; position: relative; z-index: 1001; top: 15px; text-align: center}
    .img-will img{max-width: 100%; height: auto}

.menu-bar2{width: 100%; height: 50px; background-color: #828a8f; z-index: 1000; border-bottom: solid 2px #fff; box-shadow: 2px 2px 10px}

.menu{text-align: center; width: 100%; padding: 0}
.menu li{display: inline-block; color: #fff; font: normal 18px 'Questrial', sans-serif; height: 48px; padding: 15px 0; position: relative}
.menu a li{color: #fff}
.menu a li:hover{text-decoration: none;}
.menu a li:hover{background-color: #1f3b77; cursor: pointer}

.menu button{color: #fff}
.menu button:hover{background-color: #1f3b77; cursor: pointer}

.menu ul{text-align: center}

.menu-1{background-color: #355fba; width: 50%; float: left}
.menu-2{background-color: #355fba; width: 50%; z-index: 1002}
.active{background-color: #2c51a0 !important;}

.dropdown ul{left: 52.5%; width: 45%; padding: 0}
.dropdown-menu{padding: 0px 0 10px !important;}
.dropdown-menu li{display: block; }


.fixed{position:fixed; top:0}
.relative{position:relative;}


#contenido{position: relative; z-index: 999; padding-bottom: 30px;}
.about-title{width: 100%; height: 40px; background-color: #23252b; position: relative; z-index: 100; margin: 10px 0 0; text-align: center; color: #fff; font: normal 20px 'Questrial', sans-serif; padding:12px}
.about-desc{}

.perfil-text{color: #2e2e2e;font: normal 16px 'Questrial', sans-serif; text-align: justify; padding: 30px 20px; widows: 100%; height: auto; background-color: rgba(255, 255, 255, 0.5); }

.fondo{background-color: #f4f7f9}
.centrado{text-align: center}

.img-group{width: 100%; height: auto; margin-bottom: 20px}
.img-group img{display: inline-block; }
.hobbies-1{width: 50%; height: auto; float: left}
.hobbies-2{width: 50%; height: auto; float: right}

.footer-box{width: 100%; height: 100px; background-color: #355fba; padding: 40px; text-align: center; }
.footer-box p{font: normal 16px 'Questrial', sans-serif; color: #fff}

/* PORTAFOLIO */

.port-box{margin: 5px 0 20px; width: 100%}
.img-box{width: 32%; height: auto; margin: 10px 0.5% 8px; display: inline-block; } 

.img-box-e{width: 24%; height: auto; margin: 10px 0 5px; display: inline-block; } 

.port-btn{background-color: #c1cbd3}
.port-btn:hover{background-color: #a8b0b7  }

.img-box-1{float: left;}
.img-box-2{}
.img-box-3{float: right;}
.img-box-4{margin-right: 5px}
.img-box-5{margin-left: 5px}

.port-img{width: 100%; height: auto;}
.port-img img{width: 100%; height: 100%}
.desc-box{font: normal 14px 'Questrial', sans-serif; line-height: 1.3; color: #2c2f31; }
.port-title{background-color: #8d9398; padding: 5px; margin: 0; position: relative; color:#e7edf0 }
.port-title-2{background-color: #aeb0b1; padding: 5px; margin: 0; position: relative; color:#e7edf0 }
.port-title-2:hover{background-color: #8a9196}
.port-title-2 a{color:#e7edf0}
.port-title-2 a:hover{text-decoration: none}
.port-desc{padding: 5px; margin: 0; position: relative}

.port-vid{ height: 0; overflow: hidden; padding-bottom: 47.7%; padding-top: 30px; position: relative;}
.port-vid iframe{height: 100%; left: 0; position: absolute; top: 0; width: 100%;}
.img-box-v, .img-box-w{width: 49%; margin: 10px 0; display: inline-block; } 


.desc-box{font: normal 14px 'Questrial', sans-serif; line-height: 1.3; color: #2c2f31; }
.desc-box-v{font: normal 14px 'Questrial', sans-serif; line-height: 1.3; color: #2c2f31; background-color: #c1cbd3; padding: 10px 0 0; margin: 0; position: relative; height: 100px}
.desc-box-w{font: normal 14px 'Questrial', sans-serif; line-height: 1.3; color: #2c2f31; background-color: #c1cbd3; padding: 10px 0 0; margin: 0; position: relative; height: 150px}


/* MODAL */

/* The Modal (background) */
.modal {display: none; position: fixed;z-index: 1005; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.75); ;     }

/* Modal Content */
.modal-content {position: relative; background-color: #fefefe; margin: auto; padding: 0; width: 90%; max-width: 800px;margin-top: 110px}

.modal-content-2 {max-width: 500px !important}


/* The Close Button */
.close {color: #fff !important; position: absolute; top: 200px; right: 25px; font-size: 35px; font-weight: bold; z-index: 10019;    }

.close:hover, 
.close:focus { color: #999; text-decoration: none; cursor: pointer;}

/* Hide the slides by default */
.mySlides {display: none; border: solid 2px #fff}

/* Next & previous buttons */
.prev,
.next {cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -50px; color: #fff !important; font-weight: bold; font-size: 20px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none;
  -webkit-user-select: none;}


/* Position the "next/prev buttons" */
.prev {left: 0; border-radius: 3px 0 0 3px;}
.next {right: 0; border-radius: 3px 0 0 3px;}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {background-color: rgba(0, 0, 0, 0.8); text-decoration: none}

.active,
.demo:hover {opacity: 1;}

img.hover-shadow {transition: 0.3s;}

.hover-shadow:hover {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }


.form-box{width: 100%; height: 400px; background-color: #d4dae2; padding: 40px; text-align: center}
.user-text, .mail-text, .phone-text{width: 45%; height: 40px; padding: 10px; font: normal 16px 'Questrial', sans-serif; margin-bottom: 5px; border: none}
.message-text{width: 45%; height: auto; padding: 10px; font: normal 16px 'Questrial', sans-serif; margin-bottom: 5px; border: none}

.btn-enviar{width: 150px; height: 40px; border: none; background-color: #207382; color: #fff; font: normal 16px 'Questrial', sans-serif; }
.btn-enviar:hover{background-color: #0d434d; }

.img-group-cont{width: 100%; height: 100%}
.cont-img{width: auto; height: 135px; margin: 0 -2px}

.text-mail-succes{ font: normal 16px 'Questrial', sans-serif; top: 150px}

/* VARIOS */

.cuadro-borrar{width: 100%; height: 1000px; background-color: #bdc1c6}
button{border: none; padding: 0; cursor: pointer}

.error-text{width: 100%; height: 600px; display: block; text-align: center; font: bold 24px 'Questrial', sans-serif; margin: 0; padding-top: 100px;}




/* RESPONSIVE */

@media screen and (max-width:1000px){
  
}


@media only screen and (max-width:500px){
    .menu-bar{height: 90px;}
    .img-will{width: 100%; height: 100%; top: 20px}
    .img-will img{width: 100%; height: auto; }
    .menu li{height: 42px; font: normal 16px 'Questrial', sans-serif;}
    .menu-bar2{height: 44px}
    
    .dropdown ul{left: 5%; width: 90%; padding: 0 }

    
    .about-title{height: 35px; font: normal 14px 'Questrial', sans-serif; margin: 15px 0 10px}
    .perfil-text{font: normal 14px 'Questrial', sans-serif; padding: 15px }
    
    .img-group{margin-bottom: 0}
    .hobbies-1, .hobbies-2{width: 100%; height: auto}
    
    .img-box-1, .img-box-2, .img-box-3, .img-box-4, .img-box-5{width: 100%; margin: 0 0 15px }
    
    .fondo{background-color: #fff}

    .close {top: 170px; right: 15px; font-size: 45px}
    
    .desc-box-w{height: 200px}
    .desc-box-w2{height: 170px !important}

    .port-title{background-color: #63696d;}
    
    .form-box{padding: 15px; height: 380px}
    .user-text, .mail-text, .phone-text, .message-text{width: 100%; }
    
    
    
}