/*
Theme Name: Fire

Theme URI: Seoconsultingperu.com
Author: Seo Consulting 
Author URI: 
Description: Plantilla Básica Seo Consulting

*/


*{padding: 0; margin: 0;}
body{--color1: #1c2f42; --color2: #d73839; --color3: #fff; --font1:"Raleway", sans-serif; --font2: "Raleway", sans-serif;  }
.container{width: 1165px; margin: 0 auto;}
.row{display: flex; justify-content: space-between;} .direction{flex-direction: row-reverse;}
.padded{padding: 100px 0px;}

.fix-btn{position: fixed; right: 10px; bottom: 10px; display: block; z-index: 2222;}
.fix-btn::before{ content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 30px;
-webkit-animation: ripple 3s infinite;animation: ripple 3s infinite;box-shadow: 0 0 0 2px rgba(101, 181, 48, 0.5);}

.grid_5{display: grid; grid-template-columns: repeat(5, 3fr); grid-column-gap: 0px;}
.grid_4{display: grid; grid-template-columns: repeat(4, 3fr); grid-column-gap: 30px; grid-row-gap: 30px;}
.grid_3{display: grid; grid-template-columns: repeat(3, 3fr); grid-column-gap: 30px; grid-row-gap: 30px;}
.grid_2{display: grid; grid-template-columns: repeat(2, 3fr);}
.row-center{display: flex; align-items: center; justify-content: space-between;}
#icoNav_movil{background: var(--color3); width: 51px; height: 51px; border-radius: 50%; padding: 18px 15px;  box-sizing: border-box; margin-left: 10px; display: none;}
.movil{display: none;}
#icoNav_movil ul li {width: 100%;height: 2px;background: var(--color1);display: block;margin-bottom: 4px;transition: all 0.5s ease-in-out;}
.closeNav ul li:nth-child(1){opacity:0;}
.closeNav ul li:nth-child(2){transform:rotate(45deg);margin-bottom:-2px !important;}
.closeNav ul li:nth-child(3){transform:rotate(-45deg);}
a{text-decoration: none;}
h1,h2,h3,h4,h5,h6{font-family: var(--font1);}
a,p,span,li,div{font-family: var(--font2);}

.nav-menu ul{list-style: none;}
.nav-menu ul li{display: inline-block;}
.nav-menu ul li a{display: block; padding: 0px 15px; line-height: 50px; color: #fff;}

ul.sub-menu{
    display: block !important;
}
.nav-menu li{
    position: relative;
}
.nav-menu li ul.sub-menu{
    position: absolute;
	max-height: 0px;
    overflow: hidden;
    transition: all 0.4s ease-in-out;
    background: var(--color2);
    min-width: 300px;
	z-index: 2222;
}
.nav-menu li ul.sub-menu li::before{
	display: none;
}
.nav-menu li ul.sub-menu li{display: block;}

.nav-menu li ul.sub-menu li a{
    width: 100%; color: #fff;
	line-height: 43px; display: block;
	padding: 0px 30px !important;
}
.nav-menu li ul.sub-menu li a:hover{
	background: #fff; color: var(--color1);
}
.nav-menu li:hover > ul.sub-menu{
    max-height: 500px;

}

.phone-btn{
    position: relative;
    padding: 5px;border-radius: 50%;
    margin-right: 12px; font-size: 24px;
    box-shadow: 0 0 0 2px rgba(101, 181, 48, 0.5);
    width: 40px;height: 40px; line-height: 40px;color: #65b530;text-align: center;
}
.phone-btn::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -webkit-animation: ripple 3s infinite;
    animation: ripple 3s infinite;
    box-shadow: 0 0 0 2px rgba(101, 181, 48, 0.5);
}
@keyframes ripple{
    70% {
        box-shadow: 0 0 0 70px rgba(255, 255, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}
.cabecera{background: var(--color1); padding: 10px 0px;}
.cabecera .btn{margin-right: 30px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;}
.btn{line-height: 50px; padding: 0px 30px; background: #fff; color: var(--color1);}
.phone-btn + div p{font-size: 21px; font-weight: 700; color: var(--color3);}
.phone-btn + div span{font-size: 15px; font-weight: 400; color: var(--color3);}

.servicios{padding: 70px 0px;}
.servicios article{ border:1px solid #EFE6E1;}
.servicios article h2{color: var(--color2); font: 20px var(--font2); padding-bottom: 10px;}
.servicios article p{color: var(--color1); font: 15px var(--font2); padding-bottom: 15px;}
.servicios article .row-center a{padding: 10px 30px; background: #f2f2f2; color: #666;}
.servicios article .row-center a:nth-child(2){background: var(--color1); color: #fff;}
.servicios article .txt-serv{padding: 30px;}

.thumb-serv{max-height: 205px; width: 100%; overflow: hidden;}
.txt-nos h4{font-size: 14px;}
.txt-nos h4 img{margin-top: -3px; margin-right: 7px; display: inline-block;vertical-align: middle;}
.txt-nos h3{font-size: 40px; padding: 10px 0px 20px 0px;}.txt-nos p{font-size: 16px; line-height: 1.8; color: var(--color1);}
.txt-nos ul{margin-left: 26px;}.txt-nos ul li{ font-size: 16px; line-height: 1.9; color: var(--color1);}
.txt-nos a.btn{display: inline-block; margin-top: 10px;}

.txt-nos{width: 50%;}
.services{width: 100%; height: 340px; border-radius: 4px; overflow: hidden; box-sizing: border-box;}
.txt-servicios{ padding: 20px; color: #fff; box-sizing: border-box; background: rgba(0,0,0,0.5); width: 100%; height: 100%;  display: flex;align-items: end;}

.serv{padding: 80px 0px;}
.txt-servicios a{background: #fff; color: var(--color1); padding:7px 30px; display: inline-block; letter-spacing: 1px; margin-top:0px;opacity: 0;
max-height: 0px; transition: all 0.4s ease-in-out;}
.txt-servicios:hover  a{opacity: 1; max-height: 100px; margin-top: 20px;}
.title h3 img{margin-top: -3px;
    margin-right: 7px;
    display: inline-block;
    vertical-align: middle;}
.title h4{color: var(--color1); font-size: 40px;}
.title{padding-bottom: 30px;}


.banner1{background: url(img/ban1.jpg); padding: 60px 0px 80px; position: relative; background-size: cover;     background-attachment: fixed;}
.banner1::before{ content: ""; display: block;background: var(--color1); position: absolute; top: 0; left: 0; width: 100%; height: 100%;
opacity: 0.7; z-index: 0;}
.px{ width: 40%;  position: relative; height: 250px;}
.p1::before{ content: ""; display: block;background: var(--color2); position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0.7; z-index: -1;}
.p2{position: relative; z-index: 2;}
.banner1 .p1{ background: url(img/px.jpg); background-size: cover;padding: 100px 70px; width: 100%; box-sizing: border-box; position: absolute; top: -100px;
color: #fff; text-align: center; z-index: 3;}
.telf{display: flex; align-items: center; width: 120px; margin: 15px auto; font-size: 30px; color: #fff;}
.telf::before, .telf::after{    display: block;
    content: "";
    border-bottom: 0;
    flex-grow: 1;
    border-top: 1px dashed  #fff;
}
.banner1 .svg{position: absolute; bottom: -1px; fill: #fff;}

.banner1 .p1 p{font-size: 21px;}.banner1 .p1 h5{font-size: 42px; margin-bottom: 20px;}
.banner1 .p2{width: 45%; color: #fff;}
.banner1 .p2 h4{font-size: 14px; color: var(--color2);}
.banner1 .p2 h3{font-size: 42px; padding: 20px 0px;}
.banner1 .p2 p{font-size: 16px;}

.nosotros{padding: 60px 0px 30px;}

.parent {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}
.parent div{background-size: auto 100% !important; background-position: center !important; border: 1px solid #fff; transition: all 0.4s ease-in-out;}
.parent div:hover{background-size: auto 110% !important;}
.calidad{padding-bottom: 40px;}

.div1 { grid-area: 1 / 1 / 3 / 2; }
.div2 { grid-area: 1 / 2 / 2 / 3; }
.div3 { grid-area: 2 / 2 / 3 / 3; }
.div4 { grid-area: 1 / 3 / 3 / 4; }
.div5 { grid-area: 1 / 4 / 2 / 5; }
.div6 { grid-area: 2 / 4 / 3 / 5; }

.txt-proy{padding: 60px 40px; background: var(--color1); color: #fff;}
.txt-proy h3{border-bottom: 1px solid #fff; padding-bottom: 5px; margin-bottom: 15px;}
.txt-proy p{line-height: 25px;}


footer{
    background: url(img/footer.jpg);
    background-size: cover;
    padding: 80px 0px 0px;
}
.f1{
    width: 87%;  
	margin-right: 42px; 
}
.f1 p{
	text-align: justify;
}
.f2{
    width: 250px;
}
.f3{
    width: 250px;
}
.f1 a{
    color: #ccc;
    padding: 8px 20px;
    border: 1px solid #ccc;
    display: inline-block;
    margin-top: 20px;
}
footer h4{
    font-size: 18px;
    font-weight: bold;
    color: #ccc;
    margin-bottom: 18px;
}
footer p, footer a{
    color: #ccc;
    display: block;
    font-size: 14px;
}
footer a{
    margin-bottom: 10px;
}
.f3 img{ 
    opacity: 0.7;
}
.redes{
    display: flex;
}
footer .redes a{
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border: 2px solid #ccc;
    border-radius: 50%;
    padding: 0px !important;
    margin: 5px;
}

.copy{
    padding: 22px 0px 26px;
    border-top: 1px solid #373737;
    margin-top: 60px;
}

.box-f {
    padding: 0px 43px 22px 43px;
    border-right:1px solid #373737;

}
.box-f i{
    color: var(--color3);
    font-size: 20px;
    padding-right: 15px;
}
.box-f a{
    line-height: 20px;
    font-size: 16px;
    margin-bottom: 0px;
}
.boxs{
    border-bottom:  1px solid #373737;
    margin-bottom: 60px;
}


.box-contact{
    padding: 40px;
    width: 70%;
    box-sizing: border-box;
}
.box-contact h3.title{
    font-size: 30px;
}
.formulario h3.title{
    margin-bottom: 38px;
}
.box-form{
    box-shadow: 0 0 30px 0 rgb(27 68 163 / 7%);
    margin-top: -140px;
    background: #fff;
    z-index: 100;
    position: sticky;
}
.box-form .grid_2{
	margin-top: 27px;
}
.box-contact input, .box-contact select, .box-contact textarea{
    width: 100%;
    height: 48px;
    border: 1px solid #e4e4e4;
    padding: 12px 15px 11px;
    box-sizing: border-box;
    font: 14px var(--font2);
    color: #666;
    outline: none;
    background-color: #fdfdfd;
}
.box-contact textarea{
    margin-top: 29px;
    height: 90px;
}
.txt-contact{
    width: 30%;
    box-sizing: border-box;
    padding: 40px;
}
.txt-contact i{
    font-size: 25px;
    color: var(--color2);
    text-align: left;
    padding-right: 10px;
}
.txt-contact h4{
    font-size: 20px;
    color: var(--color1);
}
.txt-contact a{
    font-size: 16px;
    color: var(--color1);
}
.txt-contact .row{
    justify-content: flex-start;
}
.title h4{
    font-size: 30px;
}
.title h3{
    font-size: 25px;
}
.box-form .redes{
    margin-top: 40px;
}
.txt-contact .row{
    margin-bottom: 15px;
}


aside{width: 336px;}
.page-serv article{width: 67%;}.page-serv {padding: 30px 0px;}
.asd{padding: 40px; box-shadow: 0 5px 83px 0 rgba(27,26,26,0.12);}
.content{color: #666; font-size: 15px; margin: 10px 0px; line-height: 28px;}
.content p{padding: 5px 0px;}
.direction{flex-direction: row-reverse;}
.asd ul{list-style: none;}
.asd h4{font-size: 20px; padding-bottom: 10px;}
.asd li a{display: block; background: var(--color1); padding: 20px; width: 100%; color: #fff; margin-bottom: 10px; box-sizing: border-box;}

.asd.dark{margin-top: 20px; background: url(img/slider1.jpg); background-size: cover; position: relative; padding: 60px 40px; background-position: center;}
.asd.dark::before{content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; background: var(--color2); opacity: 0.6;}
.asd.dark h4{font-size: 22px; color: #fff;}.asd.dark span{position: relative; z-index: 2;}
.asd.dark p{font-size: 16px; color: #fff; padding: 15px 0px;}
.asd.dark a{background: #fff; color: var(--color1); padding: 10px 20px; display: inline-block; font-size: 20px; width: 100%; text-align: center;
box-sizing: border-box;}




@media only screen and (max-width: 1165px){
    .container{width: 900px;}
    .logo img{height: 70px;}
    .nav-menu ul li a{font-size: 14px;}
    a.btn span{padding: 0px 20px;}
    .ph{display: none;} .cabecera .btn{margin-right: 0px;}
    .px{width: 48%;}
    .servicios .grid_3, footer .grid_4, .boxs{grid-template-columns: repeat(2, 3fr); display: grid;}
    .box-f .row-center{justify-content: start;}
    .parent {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 1fr);
    }
    
    .div1 { grid-area: 1 / 1 / 3 / 2; }
    .div2 { grid-area: 1 / 2 / 2 / 3; }
    .div3 { grid-area: 2 / 2 / 3 / 3; }
    .div4 { grid-area: 3 / 2 / 5 / 3; }
    .div5 { grid-area: 3 / 1 / 4 / 2; }
    .div6 { grid-area: 4 / 1 / 5 / 2; }
}


@media only screen and (max-width: 910px){
    .container{width: 600px;}
    #icoNav_movil{display: block;margin-right: 10px;}
    .nav-menu{position: fixed; left: -100%; width: 61vw; height: 100vh; background: var(--color3); padding: 30px 40px;top: 0; transition: all 0.4s; overflow: scroll; z-index: 999;}
    .nav-menu ul li{display: block;}
    .nav-menu ul li a{color: #000 !important; display: block; padding: 17px 0px !important; 
    border-bottom: 1px solid #ffffff2b; font-size: 14px !important; line-height: 27px;}

    .nosotros .container>.row-center{display: block;}.txt-nos{width: 100%;}
    .banner1 .row-center{display: block;}
    .px, .banner1 .p2, .banner1 .p1{width: 100%; position: relative;}
    .banner1{padding-bottom: 100px;}
	.calidad .row-center img{width: 100%;}
    .servicios .grid_3{grid-template-columns: repeat(1, 3fr);}
    .page-serv .direction{display: block;}
    .page-serv article, .page-serv aside{width: 100%; display: block; margin-bottom: 20px;}
}
@media only screen and (max-width: 610px){
    .container{width: 400px; max-width: 97%;} 
    .entry .row-center{display: block;}
	.form-page{
        padding-left: 0px;
    }
    .box-form .row-center{
        display: block;
    }
    .box-contact, .txt-contact{
        width: 100%;
    }
    .tabs_links{grid-template-columns: repeat(2, 3fr);}.title h3{display: inline;}
    .grid_3{grid-template-columns: repeat(1, 3fr);}
    .txt-nos .row-center{display: block;}
    .parent {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, 1fr);
    }
		.txt-proy{padding: 100px 10% !important;}
	.txt-proy br{display: none;}
    .div1 { grid-area: 1 / 1 / 2 / 2; }
    .div2 { grid-area: 2 / 1 / 3 / 2; }
    .div3 { grid-area: 3 / 1 / 4 / 2; }
    .div4 { grid-area: 5 / 1 / 6 / 2; }
    .div5 { grid-area: 4 / 1 / 5 / 2; }
    .div6 { grid-area: 6 / 1 / 7 / 2; }
    .txt-proy{padding: 180px 40px;}
    .servicios .grid_3, footer .grid_4, .boxs{grid-template-columns: repeat(1, 3fr);}
    .box-f{padding: 20px 0px;}.boxs{background: var(--color2); padding: 10px;}
    .calidad .row-center{grid-template-columns: repeat(2, 3fr); display: grid;}
    .banner1 .p1{padding: 80px 40px;}
    .txt-nos .row-center div img{width: 100%; margin-top: 10px; height: auto;}
    .banner1 .svg{bottom: -2px;}.cabecera .btn{display: none;}
}
@media only screen and (max-width: 410px){
    .cabecera .btn{display: none;}.logo img{height: 80px;}
    
}