/*
Theme Name:   EQUISOP - WmtPress Child
Description:  Child theme para personalizacion EXTREMA
Author:       Victor Sauhing Erazo
Author URI:   https://webmastech.com
Template:     wmtpress
Version:      1.0.0
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  wmtpress-child
*/

@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');

@font-face { font-family: 'CenturyGothic'; src: url(assets/fonts/CenturyGothic.otf); }

.WmtPage *, .site-footer *{ transition: all .2s ease;}

/* --------------------------------> DEFINING COLORS - START */

:root {
	--font-1: 'Raleway', sans-serif;
	--font-2: 'CenturyGothic', sans-serif;
	
   --color-1: #b20400; --color-2: #333333; --color-3: #666666;
	--color-1-o: #b20400EE; --color-2-o: #333333ef; --color-3: #666666;

	--color-required: #ba0000;
	--rhomboid: polygon(1rem 0, 100% 0, calc( 100% - 1rem ) 100%, 0% 100%);
	--hexagon: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
	--arrow: polygon(1rem 0, 100% 0, calc(100% - 1rem) 50%, 100% 100%, 1rem 100%, 0 50%);

	--hexagon-1: polygon(1rem 0%, calc(100% - 1rem) 0%, 100% 50%, calc(100% - 1rem) 100%, 1rem 100%, 0% 50%);
	--hexagon-a: polygon(100% 0, 100% 80%, 80% 100%, 0 100%, 0 20%, 20% 0);

	--arrowbox-top : polygon(50% 0, calc(50% + 1rem) 1rem, 100% 1rem, 100% 100%, 0 100%, 0 1rem, calc(50% - 1rem) 1rem);
	--arrowbox-top-right : polygon(80% 0, 90% 1rem, 100% 1rem, 100% 100%, 0 100%, 0 1rem, 70% 1rem);

	--nav-height: 55px;
	--text-shadow: 0px 0px 3px #000000cc, 0px 0px 3px #000000cc, 0px 0px 3px #000000cc, 0px 0px 3px #000000cc;

}

body{ font-family: var(--font-1); font-size: 0.975rem; line-height: 1.7; color: #000; }

.bgpattern-1{ background-image: url(images/pattern-1.png); background-position: center, center; background-repeat: repeat, repeat; background-attachment: initial; background-origin: initial; background-clip: initial; background-size: 500px; }
.bgpattern-2{ background-image: url(images/pattern-2.png); background-position: center, center; background-repeat: repeat, repeat; background-attachment: initial; background-origin: initial; background-clip: initial; background-size: 500px; }
.bgpattern-3{ background-image: url(images/pattern-20.png); background-position: center, center; background-repeat: repeat, repeat; background-attachment: initial; background-origin: initial; background-clip: initial; background-size: 500px; }

.bgolor-white-gradient { background: #FFF; background: linear-gradient(#FFF, #FFF, #DADADA); }
.bgcolor-3-gradient{ background: var(--color-3); background: linear-gradient( var(--color-3), #4d5d6f); }

/*** NAVIGATION CSS ***/
.nav-desktop *,  .nav-mobile *{ transition: all .2s ease;}

.nav-desktop ul li.current-menu-item > a, .nav-desktop ul li.current-menu-parent > a{ color: var(--color-1)!important; }

.nav-desktop ul li.current-menu-item > a { color:var(--color-1)!important; }
.nav-desktop ul li::after{ content: ''; width: 1%; height: 2px; display: block; margin-top: 4px; background-color: transparent!important;}

.nav-desktop ul li:hover::after{ background-color: #000!important; width:100%; transition: width 0.5s;}
.nav-desktop ul li.current-menu-item::after, .nav-desktop ul li.current-menu-parent::after{ width:100%; background-color: var(--color-1)!important;}

.nav-desktop ul li{ display:block; text-align: center; margin: 0 0 0 10px; position:relative; }
.nav-desktop ul li a{ color: #000; font-family: var(--font-2); font-size: 0.95rem; display: block; text-transform: uppercase; text-decoration: none; padding: 4px 0.5rem 0 0.5rem; font-weight: bold; }
/*.nav-desktop ul li > a{ -webkit-clip-path: var(--arrow); clip-path: var(--arrow);}*/

.nav-desktop li:hover > .sub-menu { display: block; }
.nav-desktop .sub-menu { position: absolute; display:none; top: 100%; right: 0; z-index: 99; min-width: 15rem; line-height: 35px; margin:0; list-style: none; }
.nav-desktop ul.sub-menu::before { content: ''; background-color: var(--color-1); width:100%; height: 1rem; clip-path: var(--arrowbox-top-right); display: block;}
.nav-desktop .sub-menu li{ margin: 0; margin: 0; background: #FFF; padding: 5px; box-shadow: 0 0 3px #00000066;}
.nav-desktop .sub-menu li a{ font-size: 0.85rem; line-height: 1.5; text-transform: initial; }


.nav-mobile{ display:none; position: absolute; width: 0; height: 100vh; padding: 1rem; z-index: 4; background-color: var(--color-2-o); background-size: 250px; box-shadow: inset 0 0 50px #000; line-height: 40px;  list-style:none;}
.nav-mobile ul{ padding: 0;}
.nav-mobile ul li:hover > a{background: #000; color: #FFF; text-shadow: 2px 2px 3px #000;} 
.nav-mobile ul li.current-menu-item > a{ background: var(--color-1-o)!important; color: #FFF!important; text-shadow: 2px 2px 3px #000; }
.nav-mobile li{display: block; float: inherit; margin: 0; margin-bottom: 0.5rem; }
.nav-mobile li a{ color:#fff; font-family: var(--font-2); text-shadow: 2px 2px 3px #000; font-size: 1.5rem; display: block; text-decoration: none; padding: 0 0.5rem; text-align: center; clip-path: var(--hexagon-1); }
.nav-mobile .sub-menu{width: 90%; margin: 0 auto; line-height: 30px; background: #00000099; padding: 1.5rem 0.5rem 0.5rem 0.5rem; clip-path: var(--arrowbox-top);}
.nav-mobile .sub-menu li{ margin: 2px 0; }
.nav-mobile .sub-menu li a{ font-size: 1.25rem; line-height: 1.3; padding: 5px;  }

@media screen and (max-width: 768px){
	.nav-is-visible .nav-mobile{ display:block; width: 50%; }

	.NavTrigger { text-align: center; background: var(--color-2); color: #FFF; font-size: 1rem; width: 33px; height: 30px; line-height: 30px; clip-path: var(--hexagon);}
	.NavTrigger:hover, .nav-is-visible .NavTrigger{background: var(--color-1-o);}
}

@media screen and (max-width: 586px){
	.nav-is-visible .nav-mobile{display: block; width: 100%; }
}


.Banner{min-height:70vh;box-shadow: inset 0 0 10px 1px #000000aa; border-bottom: 5px solid var(--color-1); }
.BannerTitle{ text-shadow: 2px 2px 5px #000; padding-top: 10%; background: linear-gradient( transparent, #00000066, #6b0200bb ); width: 100%;  }
.BannerTitle div{ padding: 0 1rem; } 
.BannerTitle .after-border::after{ box-shadow: 2px 2px 5px #000;}

@media screen and (max-width: 1200px){
	.BannerTitle{padding-top: 20%; }
}
@media screen and (max-width: 768px){
	.Banner{min-height:50vh; }
	.BannerTitle{padding-top: 25%; }
}
@media screen and (max-width: 586px){
	.Banner{min-height:40vh; }
	.BannerTitle{padding-top: 30%; }
}

/* CONTACT FORM */
.ContactForm{ font-family: var(--font-2); }
.ContactForm label{font-size: 1rem; margin-bottom: 0.5rem; font-weight: bold; color: var(--color-1);}
.ContactForm input, .ContactForm textarea, .ContactForm select{width: 100%; max-height: 7rem; background:#FAFAFA; border-radius: 15px; }
.ContactForm .wpcf7-form-control-wrap{ display: block; margin-bottom: 0.75rem;}

.ContactForm .btn-submit{ background: var(--color-1); color:#FFF; font-size: 1rem; text-transform: capitalize; display: block; max-width: 70%; margin: 10px auto; border-radius: 5px; border: 0; font-weight: bold; padding: 0.5rem 1rem;}
div.wpcf7-validation-errors, div.wpcf7-acceptance-missing { border-radius:5px; line-height: 1.2; background: #fff7d5; }
div.wpcf7-mail-sent-ok { border-radius:5px; background: #e9ffe5; line-height: 1.2; }

.ContactForm .ajax-loader{ margin: 0 auto; display: none;}
.ContactForm .wpcf7-form.submitting .ajax-loader{ display: block;}

.ContactForm .wpcf7 form .wpcf7-response-output { margin: 0; padding: 0.25rem; }

/* POST VEIW */
@media screen and (max-width: 991px){
	.PostViewer{max-width: 275px; }
	.PostViewer h1{ font-size: calc(1.275rem + .3vw)!important;}
}


/* COMMENT FORM */
.comment-form{ background: var(--color-light-1); padding: 1rem; border-radius: 5px;	}
.comment-form label{ font-weight: bold;}
.comment-form label b{ color: var(--color-required);}

.comment-body{ border-radius: 5px; background: var(--color-light-1); }
.comment-list, .comment-list .children{list-style: none; padding: 0;}
.comment-list .children{padding-left: 40px;}
.comment-list .avatar{ border-radius: 5px;}

.comment-list .comment-reply-link{ padding: 5px 10px;	background: var(--color-2); color: #FFF; border-radius: 5px; margin: 0 10px;}

.comment-list .children .comment-body{background: #FFF!important; box-shadow: 0 0 5px #ccc;}


/* MESSAGE FORM */
.MessageForm .FormFields{padding: 1rem;}
.MessageForm input[type="text"], .MessageForm input[type="email"], .MessageForm input[type="date"], .MessageForm select, .MessageForm textarea{ width: 100%; margin: 0.4rem 0; background: #FFF!important;  border:none!important; border-bottom: 1px solid #FFF!important; box-shadow: 0 0 0 transparent!important;  outline: none; border-radius: 20px; padding: 10px 15px; }
.MessageForm input[type="text"]::placeholder, .MessageForm input[type="email"]::placeholder, .MessageForm textarea::placeholder { color: #AAA; font-size: 1rem; font-family: var(--font-2); }
.MessageForm textarea{ height: 10.3rem;}
.MessageForm .btn-submit{ border:0; background: #000!important; color: #FFF; font-weight:bold;  padding: 0.5rem 1.5rem; border-radius: 6px; font-size: 1rem;}

.MessageForm .wpcf7-not-valid-tip { color: #c71c1c; text-align: center;}
.MessageForm .wpcf7 form .wpcf7-response-output { 	margin: 1rem 0 0 0; }

/* PAGE NAVIGATION */
.PageNav a{ display:block; padding: 0.75rem 1rem; text-align: center; font-weight: bold; color:#FFF; font-size: 1rem;}

.PageNav .prev, .PageNav .next {background: transparent; opacity: 0.5; font-family: var(--font-2);}
.PageNav .prev:hover, .PageNav .next:hover {opacity: 1;}
.PageNav .prev a{ background: var(--color-2); text-align: left; text-decoration: none; }
.PageNav .next a{ background: #000;  text-align: right; text-decoration: none;}

/* POST NAVIGATION */
.PostNav a div{background:#00331caa;}
.PostNav .PrevPost{ -webkit-clip-path: polygon(1rem 0, 100% 0, calc( 100% - 1rem ) 50%, 100% 100%, 1rem 100%, 0 50%); clip-path: polygon(1rem 0, 100% 0, calc( 100% - 1rem ) 50%, 100% 100%, 1rem 100%, 0 50%); }
.PostNav .NextPost{ -webkit-clip-path: polygon(0 0, calc( 100% - 1rem )  0, 100% 50%, calc( 100% - 1rem ) 100%, 0 100%, 1rem 50%); clip-path: polygon(0 0, calc( 100% - 1rem ) 0, 100% 50%, calc( 100% - 1rem )  100%, 0 100%, 1rem 50%);}


/*------------------------------ SLICK CSS ------------------------------*/
.slick-slider *{ transition: all 0s;}
.slick-initialized .slick-slide {padding: 0; }


.slick-dots { width: 100%!important; }
.slick-dots li, .slick-dots li button{width: 15px!important; height: 15px!important;}
.slick-dots .slick-active button:before { opacity: 1!important; color: var(--color-1)!important; }
.slick-dots li button:before { opacity: 0.35!important; font-size: 13px!important; color: #000!important; }

.slick-prev, .slick-next { z-index: 9!important; width: 2rem!important; height: 2rem!important; }
.slick-prev { left: 1rem!important; }
.slick-next { right: 1rem!important; }
.slick-next:before { float: right; }
.slick-prev:before, .slick-next:before {font-size: 2rem!important; line-height: 2rem!important;color: #FFF!important;}


.HomeBanner.slick-dotted.slick-slider {margin-bottom: 0!important;}
.HomeBanner .slick-dots { bottom: 25px!important; }
.HomeBanner .slick-dots li button:before { opacity: 1!important; color: #FFF!important; }
.HomeBanner .slick-dots .slick-active button:before { opacity: 1!important; color: var(--color-1)!important; }


.grecaptcha-badge{display: none!important;}


.hexagon-1{ width: 125px; height: 110px; font-size: 50px; line-height: 110px; text-align: center; -webkit-clip-path: var(--hexagon); clip-path: var(--hexagon); }
.squared:after{content: ""; display: block; padding-bottom: 100%;}

.color-1 .after-border::after{ background-color: var(--color-1)!important;}
.color-f .after-border::after{ background-color: #FFF!important;}



/*------------------------------ GALLERY CSS ------------------------------*/
.Gallery .Item{ width:100%; background-size: cover!important; background-position: center center; clip-path: var(--hexagon-a); }
.squared:after{content: ""; display: block; padding-bottom: 100%;}
.rectangled:after{content: ""; display: block; padding-bottom: 88%;}

/*------------------------------ POST CSS ------------------------------*/
h1{ color: var(--color-1); font-weight: bold; font-family: var(--font-2); }
h2{ color: var(--color-1); font-weight: bold; font-family: var(--font-2); }