/*
Theme Name:Fclwordl
Theme URI: Seoconsultingperu.com
Author: Seo Consulting 
Author URI: 
Description: Plantilla Básica Seo Consulting

*/
* {
    margin: 0;
    padding: 0
}

body {
    --color1: #8BC34A;
    --color2: #34495e;
    --color3: #505050;
    --font1: 'Roboto', sans-serif;
    --font2: 'Montserrat', sans-serif
}

header {
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    background: #fff
}



.fixed-btn {
    position: fixed;
    left: 7%;
    bottom: 20px;
    display: block;
    z-index: 100
}

.fixed-btn p {
    padding: 7px 15px;
    border-radius: 0 10px 10px 0;
    font-size: 14px;
    background: #29cb00;
    min-width: 200px;
    text-align: center
}

.fixed-btn i {
    background: #29cb00;
    color: #fff;
    display: inline-block;
    border: 7px solid #fff;
    width: 70px;
    height: 70px;
    text-align: center;
    line-height: 65px;
    border-radius: 50%;
    font-size: 50px;
    position: relative;
    z-index: 2;
    animation: wp 5s infinite
}

.thumb_blog{height: 212px; border-radius: 20px; overflow: hidden;}
.butons{max-width: 530px; padding: 15px 0px;}
.over {
    display: inline-block;
    color: var(--color1);
    transform: translateY(3px);
    margin-left: -13px;
    border-left-color: #fff;
    color: #fff;
    max-width: 0;
    overflow: hidden;
    transition: all 0.4s ease-in-out
}

.loca1 h3{ font-size: 20px; padding-top: 30px; padding-bottom:10px;}
.loca1 p{font-size: 17px; color: #666;}

.fixed-btn:hover .over {
    max-width: 300px
}
.log1{width: 544px;}

@keyframes wp {
    0% {
        transform: rotate(0deg);
        box-shadow: 0 0 1px 0 #000
    }

    50% {
        transform: rotate(45deg);
        box-shadow: 0 0 15px 0 #000
    }

    100% {
        transform: rotate(0eg);
        box-shadow: 0 0 1px 0 #000
    }
}

@keyframes wp2 {
    0% {
        max-width: 0;
        display: inline-block
    }

    50% {
        max-width: 300px
    }

    100% {
        max-width: 0;
        display: inline-block
    }
}

body::-webkit-scrollbar {
    background: #f8f8f9;
    width: 5px
}

body::-webkit-scrollbar-thumb {
    background: var(--color1);
    z-index: 300;
    border-radius: 1px
}

.container {
    width: 1200px;
    margin: 0 auto
}

.movil {
    display: none
}

.flex{
    display: flex;
    justify-content: space-between;
}

.flex2 , .row-center{
    display: flex;
    justify-content: space-between;
    align-items: center
}

h1,h2,h3,h4,h5,h6 {
    font-family: var(--font1);
    font-weight: 700
}

p,span,div,li {
    font-family: var(--font2);
    font-weight: 400
}

.grid_4 {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-column-gap: 30px;
    grid-row-gap: 30px
}

.grid_3 {
    display: grid;
    grid-template-columns: repeat(3,1fr)
}
.grid_2 {
    display: grid;
    grid-template-columns: repeat(2,1fr);
	grid-column-gap: 30px;
    grid-row-gap: 30px
}
.btn {
    background: #fff!important;
    padding: 14px 31px;
    color: #363636!important;
    display: inline-block;
    border-radius: 45px;
    font-size: 12px!important;
    font-weight: 900;
    border: 1px solid transparent;
    transition: all 0.4s
}

a {
    text-decoration: none
}

.timeline {
      position: relative;
      max-width: 650px;
      margin: 0 auto;
      padding-left: 0px;
      border-left: 4px solid var(--color2);
    }

    .timeline-event {
      position: relative;
      margin-bottom: 40px;
      padding-left: 20px;
    }

    .timeline-event::before {
      content: '';
      position: absolute;
      left: -12px;
      top: 0;
      width: 20px;
      height: 20px;
      background: var(--color2);
      border-radius: 50%;
      border: 4px solid white;
      box-shadow: 0 0 0 2px var(--color2);
    }
center h2{padding-bottom: 50px;}
    .timeline-event .year {
      position: absolute;
      left: -162px;
      top: 0;
      width: 120px;
      text-align: right;
      font-weight: bold;
      color: #333;
    }

    .timeline-event .content {
      background: white;
      padding: 15px 20px;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }


.btn:hover {
    border: 1px solid var(--color2);
    background: transparent!important
}

header a {
    font-size: 16px;
    color: var(--color1);
    text-decoration: none;
    font-weight: 700
}

.bord {
    padding-left: 23px;
    border-left: 1px solid var(--color1);
    display: flex
}

.bord i {
    margin-right: 10px;
    font-size: 31px;
    color: var(--color2)
}

.cabecera {
    width: 100%;
    padding: 3px 0;
    position: absolute;
    top: 20px;
}

.cabecera .menu {
    position: sticky;
    z-index: 100
}

.cabecera .menu li {
    list-style: none;
    display: inline
}

.cabecera .menu li a {
    color: #fff;
    display: inline-block;
    text-transform: uppercase;
    padding: 15px 20px;
    text-shadow: 3px 3px 3px #666;
    font-size: 15px;
    transition: all 0.4s;
    font-family: var(--font1);
}

.cabecera .menu li a:hover {
    background: #fff
}

.cabecera li ul.sub-menu {
    position: absolute;
    left: 0;
    background: #fff;
    transform: rotateX(90deg);
    transition: all 0.4s;
    top: -83px;
    opacity: 0;
    width: 150%
}

ul.sub-menu ul.sub-menu {
    box-sizing: border-box;
    width: 100%;
    top: 0px!important;
    left: 100%
}

ul.sub-menu ul.sub-menu li {
    display: block
}

.cabecera li:hover ul.sub-menu {
    transform: rotateX(0deg);
    top: 35px;
    z-index: 200;
    opacity: 1
}

.cabecera ul.sub-menu li {
    display: block
}

.cabecera ul.sub-menu li a {
    padding: 15px 50px 15px 20px;
    width: 100%;
    color: #333;
    display: block;
    box-sizing: border-box
}

.cabecera ul.sub-menu li a:hover {
    color: #fff
}

.cabecera li {
    position: relative
}

#icoNav_movil {
    width: 35px;
    z-index: 999;
    cursor: pointer;
    display: none
}

#icoNav_movil ul li {
    width: 100%;
    height: 5px;
    background: #fff;
    display: block;
    margin-bottom: 2px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    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: -5px!important
}

.closeNav ul li:nth-child(3) {
    transform: rotate(-45deg)
}

.slide {
    padding: 250px 0 170px;
    background-image: url(img/slide1.jpg);
    background-size: cover;
    background-position: center;
    animation-name: animTexto;
    animation-duration: 4s;
    background-position: center;
    -webkit-animation-fill-mode: forwards
}

.dr {
    animation-name: dr;
    animation-duration: 4s;
    background-position: center;
    -webkit-animation-fill-mode: forwards
}

@keyframes dr {
    from {
        transform: scale(.8)
    }

    to {
        transform: scale(1)
    }
}


.slide h3 {
    font-size: 48px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
    line-height: 48px
}

.slide p {
    font-size: 15px;
    font-family: var(--font2);
    color: #fff;
    margin-bottom: 50px
}

.box_info {
    padding: 80px 40px 60px;
    background: #8bc34a33;
    border-radius: 10px;
    display: inline-table;
    box-shadow: 0 0 19px 0 #dcdcdc
}

.box_info a {
    color: #646464;
    font-size: 30px;
    font-family: var(--font2);
    line-height: 30px
}

.box_info i {
    font-size: 36px;
    line-height: 30px;
    color: #fff;
}

.thumb-nos{width: 530px; height: 550px; overflow: hidden; border-radius: 30px; max-width: 100%;}
.thumb-nos img{width: 100%; height: 100%; object-fit: cover; object-position: center;}

.box_info.midle h2, .box_info.midle p{color: #fff;}


.box_info h2 {
    margin-top: 30px;
    font-size: 16px;
    font-family: var(--font2);
    color: #363636
}

.box_info p {
    font-size: 12px;
    margin-top: 20px;
    color: #363636;
    line-height: 1.7;
    margin-bottom: 30px
}

.midle {
    padding: 90px 50px 70px;
    margin-top: -25px;
    background: var(--color1);
    box-shadow: 0 0 19px 0 #dcdcdc;
    z-index: 20
}

.redes_f {
    position: fixed;
    top: 20%;
    right: 10px;
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
    box-shadow: -10px 0 20px 2px rgb(0 0 0 / 6%)
}

.redes_f a {
    display: block;
    padding: 7px;
    box-sizing: border-box;
    border-bottom: 1px solid #f1f3fc
}

.redes_f a i {
    font-size: 22px;
    color: #9396a5;
    background: #fff;
    padding: 8.5px 12px;
    border-radius: 5px;
    display: inline-block;
    transition: all 0.5s
}

.redes_f a:hover>i {
    background: #dff0ff
}

.padded-1 {
    padding: 120px 0 100px
}

.btn-item {
    color: #505050;
    background-color: #f4f4f4;
    padding: 25px 20px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer
}

.btn-item.active {
    color: #fff;
    background-color: var(--color2)
}

.list-container {
    max-height: 274px
}

.item-content {
    overflow: hidden;
    max-height: 0;
    transition: all 0.4s;
    padding-left: 49px
}

.item-content p {
    font-size: 12px;
    font-weight: 400;
    color: #363636
}

.btn-item::before {
    content: "\f078";
    font-family: 'FontAwesome';
    line-height: 14px;
    margin-right: 15px;
    font-size: 12px
}

.btn-item.active::before {
    content: "\f077"
}

.item {
    margin-bottom: 1px
}

.active+.item-content {
    max-height: 5em;
    transition: all 0.4s;
    padding: 10px 0 10px 49px
}

.txt-about {
    margin-left: 30px
}

.txt-about h3 {
    font-size: 36px;
    color: #363636;
    font-weight: 300!important
}

.txt-about h6 {
    color: var(--color2);
    margin: 15px 0 50px;
    font-size: 12px;
    font-weight: 300!important
}

.txt-about p {
    font-size: 12px;
    font-family: var(--font2);
    color: var(--color3);
    margin-bottom: 36px;
    line-height: 1.8
}

.services {
    background: var(--wpr-bg-3e891897-e281-4b33-a393-bd8164323283);
    background-size: cover;
    background-position: top;
    padding: 40px 0 80px
}

.services .container {
    background: #fff;
    box-sizing: border-box;
    padding: 80px 100px
}

.services h2 {
    padding: 20px 0
}

.services .grid_3 {
    grid-column-gap: 30px;
    grid-row-gap: 80px
}

.blog .grid_3 {
    grid-column-gap: 30px;
    grid-row-gap: 30px
}

.more {
    display: flex;
    justify-content: center;
    width: 100%
}

.more a {
    padding: 10px 15px;
    display: block;
    background: var(--color2);
    color: #fff;
    font-size: 15px;
    border-radius: 5px;
    margin: 30px 10px 0;
    transition: all 0.4s
}

.more a:hover {
    transform: scale(.9)
}

.services article p {
    color: #363636;
    line-height: 1.7
}

.tmb-serv{max-height: 240px; overflow: hidden; border-radius: 20px;}

.services article {
    max-width: 450px;
    margin: 0 auto;
    cursor: pointer;
    padding-bottom: 10px;
    border-bottom: 2px solid #fff
}

.services article:hover {
    border-bottom: 2px solid var(--color1);
    box-sizing: border-box
}

h3.title {
    font-size: 36px;
    font-weight: 700;
    padding-bottom: 20px
}

h3.title+p {
    padding-bottom: 30px
}

.contact-us {
    padding: 80px 0 70px;
    background: #f4f4f4
}

.contact-us .flex {
    justify-content: left
}

.contact-us a {
    color: #363636;
    font-size: 12px
}

.contact-us p {
    color: #505050;
    font-size: 14px;
    font-family: var(--font2);
    font-weight: 700
}

.thumb-about,.txt-about {
    width: 50%
}

.contact-us .flex i {
    color: var(--color2);
    font-size: 30px;
    padding-right: 40px
}

.txt_blog {
    padding: 30px;
    width: 100%;
    box-sizing: border-box
}

.txt_blog .fecha {
    padding: 10px 0;
    display: inline-block
}

.txt_blog h2,.txt_blog strong,.txt_blog p {
    color: #363636
}

.txt_blog h2 {
    font-size: 14px
}

.blog {
    padding: 60px 0
}

.blog article {
    box-shadow: 0 10px 11px 0 rgb(0 0 0 / 5%)
}

.txt_blog p {
    line-height: 1.6;
    padding-bottom: 15px;
    border-bottom: 1px solid #e9e9e9
}

.txt_blog a {
    margin-top: 20px;
    color: #363636;
    display: inline-block;
    width: 100%
}

footer {
    background: var(--color2);
    padding: 60px 0
}

footer h4 {
    color: #fff;
    font-size: 21px;
    margin-bottom: 25px
}

footer p,footer a {
    color: #fff;
    font-size: 15px;
    display: inline-block;
    width: 100%;
    line-height: 1.8
}

footer li {
    list-style: none
}

footer a {
    padding-bottom: 15px
}

footer i {
    font-size: 20px;
    line-height: 18px
}

.foot {
    padding-left: 60px
}

.copy {
    background: #000;
    padding: 20px 0
}

.copy a {
    color: #fff!important
}

.page-slide {
    height: 120px;
    border-bottom: 18px solid var(--color2);
}

.dark{background: #f7f7f7; padding:20px; border-radius: 20px; overflow: hidden;    height: 104px; display: flex; align-items: center;}

.slide-page {
    background: #F2F2F1;
    padding: 37px 0;
    border-bottom: 1px solid #ddd;
    margin-bottom: 40px
}

.page_serv article {
    width: 740px;
    max-width: 100%
}

.page_serv .formulario #enviar {
    background: var(--color2);
    color: #fff
}

.page_serv h1 {
    color: var(--color3);
    font-size: 30px
}

.page_serv article p {
    line-height: 25px;
    font-size: 15px;
    color: var(--color3);
    margin: 10px 0
}

ol,ul {
    list-style-position: inside
}

.page_serv h4 {
    padding-bottom: 15px;
    border-bottom: 1px solid #fff;
    font-size: 18px;
    margin-bottom: 15px
}

.page_serv article li {
    padding-bottom: 12px;
    line-height: 1.8;
    color: #676767;
    font-size: 1rem
}

/*** .page_serv .wp-block-columns {
    margin-top: 40px;
    background: #e8f4ff;
    padding: 40px
}****/

h2.wp-block-heading{padding: 30px 0px 15px; color: var(--color2);}

aside {
    width: 339px;
    max-width: 100%;
    display: block;
    margin-left: 50px
}

.horario {
    background: var(--color2);
    padding: 40px 35px 40px 35px;
    border-radius: 10px;
    color: #fff;
    margin-bottom: 30px;
    max-width: 100%;
    box-sizing: border-box
}

.formulario {
    background: var(--color1);
    padding: 40px 35px 40px 35px;
    border-radius: 10px;
    max-width: 100%;
    box-sizing: border-box
}

.formulario input {
    width: 100%;
    height: 30px;
    border: none;
    border-radius: 3px;
    background: #fff;
    margin-top: 5px
}

.formulario label {
    color: #fff;
    margin-bottom: 15px;
    display: block;
    font-size: 15px
}

.horario h3 {
    font-size: 22px
}

.horario ul li {
    display: flex;
    justify-content: space-between;
    padding: 13px 0;
    border-bottom: 1px solid #fff;
    margin-top: 13px;
    font-size: 15px
}

.page_serv {
    padding-top: 50px
}

.tag {
    display: inline-block;
    font-size: 11px;
    padding: 3px 5px;
    color: #333;
    border: 1px solid var(--color1);
    margin: 0 3px 3px 0;
    border-radius: 10px
}

.page_serv aside h4 {
    margin-top: 20px
}

.datos .flex {
    justify-content: inherit
}

.datos a {
    font-size: 17px;
    color: #333;
    line-height: 1.8;
    margin-bottom: 15px
}

.formulario h3 {
    color: #333;
    font-size: 15px
}

.nosotros .formulario {
    background: #fff;
    width: 650px;
    max-width: 100%;
    padding: 0
}

.nosotros .formulario input {
    border: 1px solid var(--color1);
    height: 40px
}

.formulario label {
    color: #333;
    margin-bottom: 10px
}

.formulario {
    max-width: 500px
}

.formulario p {
    color: #333;
    font-size: 15px
}

#enviar {
    background: var(--color1);
    width: 120px;
    display: inline-block;
    margin: 10px auto 0
}

.datos i {
    color: var(--color1);
    margin-right: 10px;
    font-size: 30px
}

.datos {
    width: 500px;
    max-width: 100%
}

@media only screen and (max-width: 1220px) {
    .container {
        width:800px
    }

    .barra {
        line-height: inherit;
        padding: 40px 0
    }

    .barra .btn {
        margin-top: 20px
    }

    .barra .flex2 {
        display: block;
        text-align: center
    }

    .services h2 {
        font-size: 19px
    }

    .grid_2 {
        grid-template-columns: repeat(1,1fr)
    }

    .grid_4 {
        grid-template-columns: repeat(2,1fr)
    }
}

@media only screen and (max-width: 850px) {
    .container {
        width:500px
    }

    header .info,header .btn {
        display: none
    }

    #icoNav_movil,.about-us .flex {
        display: block
    }

    .thumb-about,.txt-about {
        width: 100%
    }

    .foot {
        padding-left: 0px!important;
        padding: 15px 0
    }

    header .flex {
        align-items: center
    }

    .menu_header {
        position: fixed;
        left: -150%;
        top: 0;
        width: 100vw;
        height: 100vh;
        padding: 50px 30px;
        box-sizing: border-box;
        background: #fff;
        transition: all 0.4s
    }

    .cabecera li ul.sub-menu {
        max-width: 100%
    }

    .cabecera .menu li {
        display: block;
        padding: 0
    }

    .cabecera .menu li a {
        padding: 7px 20px;
        color: #000
    }

    .cabecera li ul.sub-menu {
        position: static;
        opacity: 1;
        transform: none
    }

    .cabecera ul.sub-menu li a {
        padding: 7px 20px
    }

    .grid_3 {
        grid-template-columns: repeat(1,1fr)
    }

    .product-item {
        height: 300px
    }

    .txt-proyect {
        padding: 93px 33px 0 37px
    }

    .nosotros .flex {
        display: block
    }

    .datos .flex {
        display: flex
    }

    .datos {
        margin-bottom: 50px
    }

    .datos br {
        display: none
    }

    .page_serv .flex {
        display: block
    }

    .page_serv aside {
        margin-left: 0px!important
    }
}

@media only screen and (max-width: 550px) {
    .container {
        width:92%
    }
	.log1, .butons{transform: scale(0.8); text-align: center; margin: 0 auto;}

    .movil {
        display: block;
        background-position: center!important
    }

    .slide {
        padding: 187px 0 81px;
        background-position: left
    }

    .more {
        display: block
    }

    .redes_f {
        right: -5px;
        z-index: 300
    }

    .redes_f a {
        padding: 3px
    }

    .txt-about {
        margin-left: 0
    }

    .active+.item-content {
        max-height: 6em
    }

    .services .container {
        padding: 50px
    }

    .services article {
        padding-bottom: 20px;
        border-bottom: 1px solid #e9e9e9;
        margin-bottom: 20px
    }

    .services .grid_3 {
        grid-row-gap: 30px
    }

    .grid_4 {
        grid-template-columns: repeat(1,1fr)
    }

    .buttons¿ {
        display: block;
        width: 100%
    }

    .buttons a {
        display: inline-block;
        margin: 10px auto
    }

    .aboutus .flex2 {
        display: block;
        text-align: center
    }

    .circle {
        margin: 10px auto
    }

    .txt-nosotros .flex2 {
        display: block;
        text-align: center
    }

    .copy .flex {
        display: block
    }

    footer {
        padding: 40px 0
    }
}