/*
Theme Name: 228 Marketing Child
Theme URI: https://228marketing.com/wp-theme
Author: 228Marketing
Author URI: https://228marketing.com
Description: Tema hijo oficial. Agencia 228 Marketing
Version: 1.0.0
License: GNU General Public License v2 or later
Template: mkt228
*/

/*VARS*/
:root{
  /*Colors*/
  --black:#000000;
  --blue:#2b7182;
  --grey:#8c8c8c;
  /*Fonts*/
  --main-font:'Manrope', sans-serif!important;
}
/*ESTRUCTURA*/
#m228_main:not(.header-transparent):before{content: ""; display: block; height: 86px; width: 100%;}
.narrow-col{max-width: 1100px; margin-left: auto; margin-right: auto;}
#main-cont{margin: 80px 0px;}
.m228_hide_header #main-cont{margin-top: 0px;}

/*Fonts*/
html{font-family: var(--main-font); font-size: 15px; line-height: 1.4; font-weight: normal;}
h1{font-size: 2.2rem;}
h2{font-size: 2rem;}
h3{font-size: 1.6rem;}
h4{font-size: 1.3rem;}
.small-text{font-size: 0.6em;}
.big-text{font-size: 1.2em;}

/*Color*/
.c-black{color: var(--black);}
.b-black{background: var(--black);}
.c-blue{color: var(--blue);}
.b-blue{background: var(--blue);}

/*COMMON ELEMENTS*/
/*Recurrent element 1*/

/*SLICK SLIDERS*/
.slider-arrow{}
.slider-arrow.next-arrow{}
.slider-arrow.next-arrow:hover{}
.slider-arrow.prev-arrow{}
.slider-arrow.prev-arrow:hover{}

/*SUPER FORMS*/
.super-form *{font-family: var(--main-font);}

/*228 MODAL*/
.mkt_modal{justify-content: center; align-items: center;}
.mkt_modal .mkt_modal_cont{max-width: 800px; width: 90vw; background: white; height: fit-content; padding: 30px 40px; box-sizing: border-box; position: relative;}
.mkt_modal .mkt_modal_close{position: absolute; top: 15px; right: 25px; color: black; font-weight: 900; font-size: 22px;}

/*HEADER*/
#header-row{position: fixed; background: #ffffffcc; box-shadow: 0px 5px 10px #00000020;}
.header-wr.full-box{display: flex; align-items: center; padding-top: 10px; padding-bottom: 10px; justify-content: flex-start;}
.header-logo-wr{display: flex; align-items: center; font-size: 18px; letter-spacing: 1px; width: 130px;}
.header-cta-wr{text-align: right; width: 20%; font-size: 13px; color: var(--blue);}
.header-cta-wr:hover{text-decoration: underline;}
.header-menu-wr{padding-left: 60px; color: var(--grey); width: calc(80% - 130px); }
.header-menu-wr li{display: inline-block; margin-right: 20px; }
.header-menu-wr li.active, .header-menu-wr li:hover{color: var(--blue); font-weight: 600;}

/*FOOTER*/
.footer-row{background: var(--blue); color: white; position: relative; z-index: 10;}
.footer-links-wr{display: flex; justify-content: space-between; width: 100%; max-width: 900px; margin: auto;}
.footer-links-wr p{padding: 0px 5px; font-size:13px;}

/*BUTTONS*/
a.button{line-height: 1.6; padding: 0.5em 2em; border: 1px solid var(--black); transition: all var(--transition); cursor: pointer;}
a.button.black.solid{border-color: var(--black); background: var(--black); color: white;}
a.button.black.solid:hover{background: white; color: var(--black)}
a.button.black.outline{border-color: var(--black); background: transparent; color: var(--black);}
a.button.black.outline:hover{background: var(--black); border-color: var(--black); color: white;}

/*GENERAL*/
#main-cont{margin: 0px;}
.paint-background{background-image: url("/wp-content/uploads/fondo.jpg"); min-height: 100vh; width: 100vw; background-position: center; background-size: auto; background-repeat: repeat;}
.felipe-name{text-transform: uppercase; font-weight: 500; letter-spacing: 1.5px;}
.felipe-name span{color: var(--blue); font-weight: 600;}
.inner-cont{max-width: 1060px; padding: 50px; background: white;}

/*HOME*/
.home-cont{background-image: url("/wp-content/uploads/portada.png"); height: 100vh; width: 100vw; background-position: center; background-size: cover;}

/*ABOUT*/
.about-cont{padding-top: 150px; padding-bottom: 60px;}
.about-inner-cont h1{margin-bottom: 30px;}
.about-inner-cont p{margin-bottom: 80px; max-width: 80%; margin-left: auto; margin-right: auto; font-size: 16px; line-height: 1.8;}
.about-inner-cont img{max-width: 100%;}

/*GALLERY*/
.gallery-cont{padding-top: 150px; padding-bottom: 60px;}

/*EVENTS*/
.event-inner-cont.inner-cont{background: transparent;}
.event-cont{padding-top: 150px; padding-bottom: 60px;}
.event-block{display: flex; justify-content: space-between; margin-bottom: 40px;}
.event-img-block{width: 38%;}
.event-img-block img{max-width: 100%; width: 100%; height: auto;}
.event-text-block{width: 60%; background: white; padding: 40px; position: relative;}
.event-title{font-size: 20px; font-weight: 500; display: block; margin-bottom: 25px;}
.event-desc{font-size: 13px; max-width: 80%; display: block;}
.event-date{position: absolute; color: var(--grey); font-weight: 800; font-size: 22px; right: 15px; bottom: 10px; text-transform: uppercase; opacity: 0.7;}
.event-link a{color: var(--blue); text-decoration: underline;}

/*CONTACT*/
.contact-cont{padding-top: 150px; padding-bottom: 60px;}
.contact-inner-cont{padding: 80px;}
.contact-inner-cont>div{margin-top: 40px; justify-content: space-between;}
.contact-inner-cont img{max-width: 360px;}
.contact-inner-cont>div>*{width: 50%;}
.contact-inner-cont h1{font-weight: 600; color: var(--blue); text-align: center;}
.wpcf7-form.init{display: flex; flex-direction: column; justify-content: flex-start; align-items: baseline;}
.wpcf7-form input, .wpcf7-form textarea{width: 300px; margin-bottom:5px; border: 1px solid var(--grey); border-radius: 4px; padding: 4px 10px; text-align: left; font-family: var(--main-font);}
.wpcf7-form input[type="submit"]{background: var(--blue); color: white; border: none; width: auto; padding: 6px 20px; opacity: 0.8; cursor: pointer;}
.wpcf7-form input[type="submit"]:hover{opacity: 1;}
.contact-text p{font-size: 13px; width: 300px;}
.wpcf7-not-valid-tip{font-size: 12px; position: relative; top: -3px;}
.wpcf7 form.invalid .wpcf7-response-output{font-size: 13px; padding-top: 10px; padding-bottom: 10px;}

/*RESPONSIVE*/
@media only screen and (max-width:1024px){
.inner-cont{max-width: 90vw;}
.contact-inner-cont img{max-width: 90%; padding-right: 20px;}
}

@media only screen and (max-width:800px){
  /*Menú*/
#menu-mb-trigger{display: inline-block; position: fixed; z-index: 999; color: var(--blue); background: transparent; top: 8px; right: 15px; border-radius: 30px; padding: 3px 15px; border: 1px solid var(--blue); cursor: pointer;}
.header-menu-wr{display: none;}
.header-wr.full-box{justify-content: space-between;}
.header-cta-wr{padding-right: 200px;}
#menu-movil{padding: 70px 30px; width: 80%; color: var(--blue); background: #fafafa; position: fixed; top: 45px; left: 0px; max-width: 300px; height: calc(100vh - 45px); z-index: 99; border-right: 2px solid var(--blue);}
#menu-menu-2 li{padding: 15px 0px; position: relative; transition: all var(--transition);}
#menu-menu-2 li a{cursor: pointer;}
#menu-menu-2 li:hover{color: black; text-decoration: underline;}
/*Footer*/
.footer-links-wr{flex-wrap: wrap; justify-content: center;}
/*General*/
.inner-cont{padding:30px;}
.contact-cont, .event-cont, .gallery-cont, .about-cont{padding-top: 100px;}
/*About*/
.about-inner-cont h1{font-size: 1.8rem;}
.about-inner-cont p{font-size: 14px;}
.about-inner-cont p{max-width: 90%;}
/*Galería*/
#gallery-1>.fg-gallery-item{margin-bottom: 30px;}
/*Exposiciones*/
.event-block{flex-direction: column;}
.event-block>div{width: 100%;}
.event-date{right: 8px; bottom: 5px; font-size: 18px;}
.event-text-block .c-blue{display: block;}
/*Contacto*/
.contact-inner-cont img{display: none;}
.contact-inner-cont>div>*{width: 100%;}
}

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



/*
felipe.bravo.garcia@gmail.com
*/