/* CSS Document */
/*
*
*   Geeklopers
*   Autor: Sergio Carreón
*   30 de Junio del 2015
*
*/	

    p,ul,h1,h2,h3,h4,h5 { margin: 0; padding: 0;}

    body { z-index: 0; font-size: 14px; font-family: 'gotham_book_regular';}

    header { z-index: 10; position: fixed; top: 0; left: 0; width: 100%; background-color: rgba(255,255,255,0.5);}
    header .section.section1 { background-color: rgba(255,255,255,0.5); color: #555; text-align: center; padding: 10px; font-family: 'gotham_bold_regular';}
    header .section.section2 nav ul { margin: auto; width: 800px;}
    header .section.section2 nav ul li { display: inline-block; margin: 0 -2.5px}
    header .section.section2 nav ul li a {display: block; padding: 28px 40px 30px 40px; color: #FFF; font-family: 'gotham_bold_regular'; letter-spacing: 2px; text-decoration: none;}
    header .section.section2 nav ul li a.green { background-color: rgba(0,166,81,0.5);}
    header .section.section2 nav ul li a.yellow { background-color: rgba(255,245,104,0.5);}
    header .section.section2 nav ul li a.blue { background-color: rgba(0,174,239,0.5);}
    header .section.section2 nav ul li a.green:hover { background-color: rgba(0,166,81,0.9);}
    header .section.section2 nav ul li a.yellow:hover { background-color: rgba(255,245,104,0.9);}
    header .section.section2 nav ul li a.blue:hover { background-color: rgba(0,174,239,0.9);}
    header .section.section2 nav ul li:first-child a { padding: 2px 20px;}

    footer { z-index: 0; overflow: hidden;}
    footer .section.section1 .weather { margin: auto;}
    footer .section { padding: 20px 0;}
    footer .section.section1 { background-color: #312185; color: #FFF; min-height: 157px; padding: 45px 0;  text-align: center;}
    footer .section.section1 p { font-size: 31px; font-family: 'gotham_bold_regular'; margin-top: 20px;}
    footer .section.section2 { background-color: #603913; color: #FFF; text-align: center;}
    footer .section.section2 ul { margin-bottom: 15px;}
    footer .section.section2 ul li { font-size: 12px; font-family: 'gotham_bold_regular'; display: inline-block;}
    footer .section.section2 ul li a { font-size: 12px; font-family: 'gotham_bold_regular'; color: #FFF;}
    footer .section.section2 ul li a:hover { color: #FFF;}
    footer .section.section2 small { display: block;}
    footer .section.section2 small a { color: #FFF;}
    footer .section.section2 small a:hover { color: #FFF;}

    section { z-index: 0;}
    
    .index .slider { width: 100%; min-height: 700px; background-position: center top;}
    .index .slider.slider1 { background-image: url('../images/index_slider1.jpg');}
    .index .slider.slider2 { background-image: url('../images/index_slider2.jpg');}
    .index .slider.slider3 { background-image: url('../images/index_slider3.jpg');}
    .index .slide a.carousel-control { background-image: none;}
    .index .slider h1 { font-size: 200px; line-height: 105px; text-align: center; padding-top: 350px; color: #FFF; text-shadow: 0px 3px 6px #666; font-family: 'gotham_bold_regular';}
    .index .slider h1 span { font-size: 80px;}

    .empresa .section { padding: 10px 0;}
    .empresa .section h1 { text-align: center; color: #FFF; text-shadow: 0px 3px 6px #666; font-family: 'gotham_bold_regular';}
    .empresa .section h5 { color: #382b7c; font-family: 'gotham_bold_regular'; font-size: 25px; margin-bottom: 10px;}
    .empresa .section p { color: #382b7c; margin-bottom: 10px; text-align: justify;}
    .empresa .section p span { color: #382b7c; font-family: 'gotham_bold_regular';}
    .empresa .section.section1 { background-image: url('../images/empresa_landing1.jpg'); background-position: center top; height: 765px;}
    .empresa .section.section1 h1 { font-size: 174px; margin-top: 200px;}
    .empresa .section.section3 { background-image: url('../images/empresa_landing2.jpg'); background-position: center top; height: 445px;}
    .empresa .section.section3 h1 { font-size: 132px; margin-top: 60px;}
    .empresa .section.section5 { background-image: url('../images/empresa_landing3.jpg'); background-position: center top; height: 445px;}
    .empresa .section.section5 h1 { font-size: 72px; margin-top: 100px;}
    .empresa .section.section5 ul { margin: 0; padding: 0; width: 400px; margin: auto;}
    .empresa .section.section5 ul li { color: #FFF; font-size: 25px; list-style: none; text-shadow: 0px 3px 6px #666;}
    .empresa .section.section2 { padding: 40px 0;}
    .empresa .section.section4 { padding: 40px 0;}
    .empresa .section.section6 { padding: 40px 0;}

    .productos { min-height: 100vh; background-image: url('../images/productos_landing.jpg'); background-position: center top; background-repeat: no-repeat; background-size: cover;}
    .productos .categories { margin-top: 100px;}
    .productos .categories .categorie { min-height: 195px; overflow: hidden; text-align: center; background-color: rgba(255,255,255,0.3); margin-bottom: 10px;}
    .productos .categories .categorie .title h3 { color: #FFF; font-family: 'gotham_bold_regular'; font-size: 30px; text-align: left; padding: 64px 0 0 50px;}
    .productos .categories .categorie .products { padding: 10px 0;}
    .productos .categories .categorie .products img { margin: 0 5px; width: 92px;}
    
    .productos .categories .categorie.categorie1 .products { padding-top: 55px;}
    .productos .categories .categorie.categorie2 .products { padding-top: 55px;}
    .productos .categories .categorie.categorie3 .products { padding-top: 55px;}
    .productos .categories .categorie.categorie4 .products { padding-top: 55px;}

    .productos .producto { margin-top: 150px; margin-bottom: 30px;}
    .productos .producto h3 { color: #FFF; font-family: 'gotham_bold_regular'; text-shadow: 0px 3px 6px #666; font-size: 30px; margin-bottom: 10px;}
    .productos .producto h3 a { color: #FFF; }
    .productos .producto h4 { color: #FFF; font-family: 'gotham_bold_regular'; text-shadow: 0px 3px 6px #666; font-size: 20px; margin-bottom: 10px;}
    .productos .producto img { width: 100%;}
    .productos .producto h5 { color: #FFF; font-family: 'gotham_bold_regular'; margin-bottom: 5px; }
    .productos .producto span { color: #FFF; font-family: 'gotham_bold_regular'; margin-bottom: 20px; display: block;}
    .productos .producto p { color: #FFF; margin-bottom: 10px;}
    .productos .producto .description { background-color: rgba(49,33,133,0.7); padding: 10px; margin-top: 10px; }
    .productos .producto .description ul li { color: #FFF;}
    .productos #producto .fila1{height: 100vh; display: flex; align-items: center;}

    .contacto { background-image: url('../images/contacto_landing.jpg'); background-position: center top; padding: 0;}
    .contacto .section { padding: 20px 0; background-color: rgba(255,255,255,0.3);}
    .contacto .section.section1 h1 { color: #382b7c; font-family: 'gotham_bold_regular'; font-size: 70px; line-height: 55px; letter-spacing: -7px; margin-top: 125px;}
    .contacto .section.section2 { padding-top: 0;}
    .contacto .section.section2 p { color: #382b7c; background-color: rgba(255,255,255,0.7); padding: 5px;}
    .contacto .section.section2 small { font-size: 12px; color: #FFF;}
    .contacto .section.section2 form { margin-top: 70px;}
    .contacto .section.section2 form input { background-color: #382b7c; border-radius: 0; border: 0;  color: #FFF;}
    .contacto .section.section2 form textarea { height: 150px; resize: none; background-color: #382b7c; border-radius: 0; border: 0; color: #FFF;}
    .contacto.contacto1 { background-image: none;}
    .contacto.contacto1 form input { background-color: #382b7c; border-radius: 0; border: 0;  color: #FFF;}
    .contacto.contacto1 form textarea { height: 150px; resize: none; background-color: #382b7c; border-radius: 0; border: 0; color: #FFF;}
    
/* Responsive */
@media (min-width: 1600px) {
    /*body { border: 2px solid black;}/**/

    .index .slider { min-height: 950px !important;}
}
@media (min-width: 1200px) and (max-width: 1599px) {
    /*body { border: 2px solid yellow;}/**/ 
    
    .index .slider h1 { font-size: 150px; line-height: 80px; padding-top: 250px;}
    .index .slider h1 span { font-size: 60px;}
    
}
@media (min-width: 992px) and (max-width: 1199px) {
    /*body { border: 2px solid green;}/**/    
    
    .index .slider h1 { font-size: 100px; line-height: 60px; padding-top: 270px;}
    .index .slider h1 span { font-size: 40px;}

    .contacto .section.section2 form { margin-top: 90px;}
}
@media (min-width: 768px) and (max-width: 991px) {
    /*body { border: 2px solid blue;}/**/
    
    .index .slider h1 { font-size: 75px; line-height: 45px; padding-top: 400px;}
    .index .slider h1 span { font-size: 30px;}

    header .section.section2 nav ul li a { padding: 28px 30px 30px 30px;}
    
    .index .slider { min-height: 950px !important;}

    .empresa .section.section1 h1 { font-size: 140px; margin-top: 220px;}
    .empresa .section.section3 h1 { font-size: 110px; margin-top: 70px;}
    .empresa .section.section5 h1 { font-size: 72px; margin-top: 100px;}
}
@media (max-width: 991px) {
    /*body { border: 2px solid blue;}/**/

    .productos .categories .categorie .title h3 { padding: 30px 0 10px; text-align: center; text-shadow: 0px 3px 6px #666;}
}
@media (max-width: 767px) {
    /*body { border: 2px solid orange;}/**/
    header { position: static; }
    header .section.section1 {display: none;}
    header .section.section2 {padding: 15px 0;}

    header .section.section2 nav ul { width: auto;}
    header .section.section2 nav ul li { width: 33%;}
    header .section.section2 nav ul li:first-child { width: 100%; text-align: center;}
    header .section.section2 nav ul li a { padding: 10px 5px; text-align: center; font-size: 12px;}

    footer .section.section1 p { font-size: 25px;}
    
    .index .slider h1 { font-size: 50px; line-height: 30px; padding-top: 300px;}
    .index .slider h1 span { font-size: 20px;}

    .empresa .section.section1 h1 { font-size: 80px; margin-top: 230px;}
    .empresa .section.section3 h1 { font-size: 50px; margin-top: 150px;}
    .empresa .section.section5 h1 { font-size: 40px; margin-top: 140px;}
    .empresa .section.section5 ul { width: 300px;}
    .empresa .section.section5 ul li { font-size: 20px; }

    .contacto .section.section1 h1 { font-size: 40px; line-height: 35px; letter-spacing: -4px; margin-top: 160px;}
    .contacto .section.section2 form { margin-top: 70px;}
    .contacto .section.section2 form input { background-color: #382b7c; border-radius: 0; border: 0;  color: #FFF;}
    .contacto .section.section2 form textarea { height: 150px; resize: none; background-color: #382b7c; border-radius: 0; border: 0; color: #FFF;}
    .contacto.contacto1 { background-image: none;}
    .contacto.contacto1 form input { background-color: #382b7c; border-radius: 0; border: 0;  color: #FFF;}
    .contacto.contacto1 form textarea { height: 150px; resize: none; background-color: #382b7c; border-radius: 0; border: 0; color: #FFF;}
    
    .productos .section1 {text-align: center; padding: 10px 0;}
    .productos .categories { margin-top: 0px;}
    .productos .categories .categorie { min-height: 100px; padding-bottom: 10px;}
    .productos .categories .categorie .title h3 { font-size: 20px;}
    .productos .categories .categorie .products img { width: 70px; margin: 10px;}

    .productos .producto { margin-top: 50px;}
    .productos #producto .fila1 {display: block; height: auto;}

}
@media (max-width: 480px) {
    /*body { border: 2px solid red;}/**/
}

input[type="text"]::-webkit-input-placeholder { color: #FFF;}
input[type="text"]:-moz-placeholder { color: #FFF;}
input[type="text"]::-moz-placeholder {color: #FFF;}
input[type="text"]:-ms-input-placeholder { color: #FFF;}
textarea.form-control::-webkit-input-placeholder { color: #FFF;}
textarea.form-control:-moz-placeholder { color: #FFF;}
textarea.form-control::-moz-placeholder {color: #FFF;}
textarea.form-control:-ms-input-placeholder { color: #FFF;}