/*
Theme Name: Skin Twenty One
Description: Theme Created For Epic Skin
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: 
Text Domain: Skin Twenty One
*/
#page-loop #accordionExample .accordion-item .accordion-header button{
	background: #a3c29a !important;
	color: white !important;
	box-shadow: none !important;
}

.accordion-button::after {
	background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#ffffff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
}
.accordion-button:not(.collapsed)::after {
background-image:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#ffffff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
}
/*-----------------------------------*/
/*------- Global Styles Start -------*/
/*-----------------------------------*/

img{
	max-width:100%;
	height:auto;
}

.link-main{
	width: max-content;
	text-decoration: none;
	padding: calc(.667em + 2px) calc(1.333em + 2px);
	font-size: 1.125em;
}
p:empty:before {display: none;}
p{font-size: 1.2rem;}
html{
	scroll-behavior: smooth;
	overflow-x: hidden;
}
h1,h2,h3,h4,p,a{
    font-family: 'Lato', sans-serif;
    font-weight: normal;
}
body
{
	margin:0;
	padding:0;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.bg-green{background-color: #a3c29a !important;}
.bg-dgreen{background-color: #669955 !important;}
.bg-lgreen{background-color: #b3ccaa !important;}
.bg-brown{background-color: #9e978a !important;}
.bg-grey{background-color: #cfcac4 !important;}
.bg-lite{background-color: rgba(0,0,0,0.03) !important;}

.text-green{color: #a3c29a !important;}
.text-dgreen{color: #669955 !important;}
.text-lgreen{color: #b3ccaa !important;}
.text-brown{color: #9e978a !important;}
.text-grey{color: #cfcac4 !important;}

.text-undeline{text-decoration: underline !important;}
.text-upper{text-transform: uppercase !important;}
.text-center{text-align: center !important;}
.text-right{text-align: right !important;}
.text-bold{font-weight: 600 !important;}
.text-lower{text-transform: lowercase;}

.pos-relative{position: relative !impotant;}
.pos-absolute{position: absolute;}
.padded{padding: 6vw 0;}
.half-padded{padding: 3vw 0;}

btn-main a{
	font-weight: bold;
	padding: 10px 20px;
}
/*-------- Global Styles end --------*/

/*-----------------------------------*/
/*----- Front Page Styles Start -----*/
/*-----------------------------------*/

#offerings .card img{
	width: 100%;
	padding: 5px;
	margin-bottom: 10px;

}
#offerings .card{
	box-shadow: 10px 10px 11px 4px rgba(0,0,0,0.1);
	border: none;
}


/*------ Front Page Styles end ------*/

/*-----------------------------------*/
/*------- Header Styles Start -------*/
/*-----------------------------------*/


#search-addon {
  background: no-repeat;
  border-left: none;
}

.search .form-control {
  border-right: none;
}

.contact-info a{
	color: black;
	text-decoration: none;
	padding: 10px;
}
.contact-info a:hover{	color: #a3c29a;}

.navbar-brand img{max-width:150px;}

#mainMenu a{
	color: white;
	text-decoration: none;
	padding: 6px;
	font-weight: bold;
	text-transform: uppercase;
}

.current_page_item a, .current-menu-item a, #mainMenu a:hover{	color: #669955 !important;}

/*-------- Header Styles End --------*/

/*-----------------------------------*/
/*------ Contact Styles Start -------*/
/*-----------------------------------*/

/*------- Contact Styles End --------*/

/*-----------------------------------*/
/*------- About Styles Start --------*/
/*-----------------------------------*/

/*-------- About Styles End ---------*/


/*-----------------------------------*/
/*------- Single Styles Start -------*/
/*-----------------------------------*/

#page-banner{
	height: 600px;
	background-size: cover;
	background-position: top center;
}

.single-course .course-image{
	background-size: cover;
	background-position: center;
}
.single-course .course-content p{font-size: 14px;}

/*-------- Single Styles End --------*/



/*-----------------------------------*/
/*------- Footer Styles Start -------*/
/*-----------------------------------*/

#vss-banner{
	background-size: cover;
	background-position: top;
}

#footer-links li a{
	color: grey;
	text-decoration: none;
}

/*-------- Footer Styles End --------*/


/*-----------------------------------*/
/*--- Transformation Styles Start ---*/
/*-----------------------------------*/


/*--- Transformation Styles End -----*/

/*-----------------------------------*/
/*-------- Page Styles Start --------*/
/*-----------------------------------*/

/*-----------------------------------*/
/*------- Archive Styles Start ------*/
/*-----------------------------------*/

/*------- Archive Styles End --------*/

/*-----------------------------------*/
/*----- Responsive Styles Start -----*/
/*-----------------------------------*/

@media only screen and (max-width: 2100px){
    #news .single-news{max-width: 25%;}
}

@media only screen and (max-width: 1700px){
    #news .single-news {max-width: 33.3333%;}
}

@media (max-width:1460px) and (min-width:1200px) {
    #team-content .single-member{
        flex: 0 0 20%;
        max-width: 20%;
    }
}

@media only screen and (max-width: 1399px){
    .wp-block-toolset-blocks-container > .tb-container-inner {
        max-width: 1140px !important;
        padding: 20px;
    }
    
}

@media only screen and (max-width: 1300px){
	#sme .container-fluid {padding: 0 !important;}
}

@media only screen and (max-width: 1200px){
    #news .single-news {max-width: 50%;}
    #page-image .fp-header h1 {
        font-size: 4.5rem !important;
        padding: 0 20px;
    }

}

@media only screen and (max-width: 991px){
    #page-image .container-xl {
        padding: 150px 0;
    }
    #page-image .fp-header h1 {
        font-size: 3rem !important;
        padding: 0 30px;
    }

    .wp-block-columns{flex-direction: column;}
    #homeHeader{
        position: relative;
        background: black !important;
    }
    #mainMenu li a{
        font-size: 14px;
        display: block;
        height: auto !important;
        border-top: 0.1px solid white;
    }
    #mainMenu {
        overflow-x: scroll;
        display: block;
        max-height: 90vh;
        text-align: center;
        background-color: black;
    }

    #mainMenu .sub-menu {
        display: block;
        position: relative;
        background: rgba(0,0,0,0.2);
        margin-top: 0;
    }
    #mainMenu .sub-menu li{
        border-bottom: 2px solid #242424;
        padding: 0 !important;
    }
    #mainMenu .sub-menu li a{
         background: rgba(255,255,255,0.2);
    }
    .mobile-show{display: block;}
    .mobile-hide{display: none;}
    #footer-links .divinsions,
    #footer-links .social,
    #footer-links .partners{
        justify-content: center !important;
        margin-top: 20px;
    }
    #footer-links h6{
        font-size: 20px;
        text-decoration: underline;    
    }
	.single-sme .sme-overlay {
		min-height: 20vw;
		padding: 20px;
	}
	#transformation #first-container{ padding: 0 10px 50px !important;}
	 #transformation .tb-container { padding: 50px 10px !important;}
}

@media only screen and (max-width: 860px){
    #news .single-news{max-width: 100%;}
    #news .single-news .news-image{
        width: 100%;
        position: relative;
        height: 60vw
    }
    #news .single-news{padding: 0 !important;}
    #news .single-news .news-content{
        opacity: 1;
        padding: 10px 0 !important;
        height: inherit;
    }
}

@media only screen and (max-width: 767px){
    #work .single-news .news-image{
        width: 100%;
        position: relative;
        height: 60vw
    }
    #work .single-news{padding: 0 !important;}
    #work .single-news .news-content{
        opacity: 1;
        padding: 10px 0 !important;
        height: inherit;
    }
    #main-footer .footer-contact, 
    #main-footer .footer-location, 
    #main-footer .footer-menu{
        padding: 10px 40px;
    }
  
    .display-2 {font-size: 60px !important;}
    .single-news .news-image{
        width: 100%;
        position: relative;
        height: 60vw
    }
    .single-news{padding: 0 !important;}
    .single-news .news-content{
        opacity: 1;
        padding: 10px 0 !important;
        height: inherit;
    }
    .newsletter-signup h5{
        text-align: center;
        margin-top: 30px;
    }
    #case-study .news-content .w-100{display: none;}
    .single-news .news-image{min-height: 120px;}
    
    .single-news .news-content{padding: 30px !important;}
    .single-news .news-content h6{font-size: 30px !important;}
    
	.news-image {height: 60vw;}
    .prev-article, .back, .next-article{
        padding-right: 0 !important;   
        padding-left: 0 !important;  
        margin-top: 10px !important;
    }
	.single-sme .sme-overlay {min-height: 30vw;}
    #single-section .prod-image{padding-top: 10px !important;}
    #single-section.bg-grey .row{flex-direction: column-reverse !important;}
}


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

    #form_newsletter-signup .frm_form_field, #form_newsletter-signup .frm_submit { width: 100%; }
    #form_newsletter-signup > div:nth-child(1) > fieldset:nth-child(1) > div:nth-child(2) {
      flex-direction: column;
      margin-top: 20px;
    }
    #form_newsletter-signup .frm_button_submit {
      padding: 20px 45.5% !important;
      margin: 0;
    }


}

@media only screen and (max-width: 575px){
    .post-btn.mt-4{ margin-top: 10px !important;   }
	.single-sme .sme-overlay {min-height: 50vw;}
}

@media only screen and (max-width: 530px){
     #team-content .single-member{
        flex: 0 0 100%;
        max-width: 100%;
    }
    #page-image .fp-header h1 {
        font-size: 2.8rem !important;
        padding: 0 20px;
    }
}

@media only screen and (max-width: 430px){
    #page-image .fp-header h1 {
        font-size: 2.2rem !important;
    }
}

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