/*Header local color styles*/

.header_contact_container a{
	background: #000;
	color: #fff;
}
.header_contact_container a:hover{
	background: #39AEC2;
}
.header_w nav{
	background: #fff;
}
.header_logo{
	background: #fff;
}
.header_nav{
	background: #fff;
}
.header_logo svg .logo_path{
	fill:#000;
}

.header_r_block{
	background: #EDF3F5;
}
/****************HERO SPLIT BLOCK****************/
.hero_split_container{
	display: grid;
	grid-template-columns: 80px repeat(11, 1fr 30px) 1fr 80px;
	grid-template-areas: 
	". hero_left hero_left hero_left hero_left hero_left hero_left hero_left hero_left hero_left hero_left hero_left hero_left hero_left hero_right hero_right hero_right hero_right hero_right hero_right hero_right hero_right hero_right hero_right hero_right"
}
/***Hero left***/
.hero_left{
	grid-area: hero_left;
	padding-top: 100px;
}
.hero_left h1{
	margin-bottom: 50px;
	font-weight: 400;
}
.hero_left h1 span {
	background: rgba(255,177,3,.7);
	padding: 0 5px;
	text-decoration: none!important;
}
.hero_left h1 strong {
    font-weight: 500;
}
.light_h1{
	font-weight: 400;
}
.hero_left .sub_italic{
	margin-bottom: 20px;
}
/*Input*/

.faq_search{
	grid-area: faq_search;
	grid-area: blog_tb_search_form;
	position: relative;
	max-width: 500px;
	margin-bottom: 50px;
}
#search_label{
	border: 3px solid #39AEC2;
	padding: 30px 93px 30px 28px;
	font-size: 1em;
	width: calc(100% - 127px);
	font-variation-settings: 'wght' 300;
	background: #EDF3F5;
	transition: .2s;
}
#search_label::placeholder{
	color: rgba(0,0,0,.5);
}
#search_label:hover{
	background: #fff;
	transition: .2s;
}
#search_label:focus{
	background: #39AEC2;
	color: #fff;
	transition: .2s;
}
#search_label:focus::placeholder{
	color: rgba(255,255,255,.5);
	transition: .2s;
}
#search_label:focus:-ms-input-placeholder{
	color: rgba(255,255,255,.5);
	transition: .2s;
}
#search_label::-ms-input-placeholder{
	color: rgba(255,255,255,.5);
	transition: .2s;
}
#search_button{
	position: absolute;
	right: 28px;
	top: 25px;
	width: 40px;
	height: 40px;
	border:none;
	background: url(../img/faq/search_icon.svg);
	background-repeat: no-repeat;
}
#search_label:focus + #search_button{
	background: url(../img/faq/search_icon_white.svg);
	background-repeat: no-repeat;
}
#search_button:hover{
	cursor: pointer; 
}

/***Hero right***/
.hero_right{
	padding-top: 100px;
	grid-area: hero_right;
	background: #EDF3F5;
	align-items: center;
}
.hero_right_container{
	display: grid;
	height: 100%;
	grid-template-columns: 30px auto 80px;
	grid-template-rows: max-content max-content auto max-content;
	grid-template-areas: 
	". hero_right_h2 ."
	". hero_right_desc ."
	". hero_faces ."
	". hero_faces_p .";
}
.hero_right h2{
	text-align: center;
	grid-area: hero_right_h2;
	margin-bottom: 30px;

}
.hero_right_desc{
	text-align: center;
	grid-area: hero_right_desc;
	color: rgba(0,0,0,.7);
}
.hero_right_desc a{
	color: #000;
	text-decoration: underline;
	font-family: "IBM Plex Mono";
	color: rgba(0,0,0,1);
}
.hero_faces{
	grid-area: hero_faces;
	display: grid;
	width: 100%;
	justify-content: center;
	/*grid-template-columns: repeat(5, 40px);*/
	grid-column-gap: 20px;
	margin-bottom: 10px;
}
.hero_face{
	width: 40px;
	height: 40px;
	border-radius: 50%;
	align-self: end;
}
.hero_face_1{
	background: center/cover url(../img/faq/faq_person_1.png);
}
.hero_face_2{
	background: center/cover url(../img/faq/faq_person_2.png);
}
.hero_face_3{
	background: center/cover url(../img/faq/faq_person_3.png);
}
.hero_face_4{
	background: center/cover url(../img/faq/faq_person_4.png);
}
.hero_face_5{
	background: center/cover url(../img/faq/faq_person_5.png);
}
.hero_faces_p{
	text-align: center;
	grid-area: hero_faces_p;
	margin-bottom: 50px;
	align-self: end;
	color: rgba(0,0,0,.5);
	font-size: .8em;
}
.hero_faces_p span{
	font-size: 1.2em;
	color: #C24139;
}


/*FAQ CONTAINER*/

.faq_container{
	margin: 100px 0; 
	display: grid;
	grid-template-columns: 50px repeat(12, 1fr) 50px;
	grid-column-gap: 30px;
	grid-template-areas: 
	". . faq_group_container faq_group_container faq_group_container faq_group_container faq_group_container faq_group_container faq_group_container faq_group_container faq_group_container faq_group_container . .";
}
.faq_group_container{
	display: grid;
	grid-area: faq_group_container;
	grid-row-gap: 65px;
}
.faq_group_title {
    font-size: 2em;
    line-height: 1.4em;
    font-family: "IBM Plex Sans";
    font-weight: 500;
}
.faq_group{
	display: grid;
	grid-template-rows: max-content;
	grid-row-gap: 30px;
}
.faq_point{
	border: 3px solid #D0DADD;
}
.faq_point input {
	display: none;
}

.faq_point input + label{
	display: grid;
	align-items: center;
	justify-content: center;
	float: left;
	outline: none;
	width: 84px;
	height: 84px;
	border-right: 3px solid #D0DADD;
	transition: .2s ease-out;
	cursor: pointer;
}

.faq_point input + label:hover svg{
	fill: #39AEC2;
}
.faq_point input + label svg{
	width: 24px;
	height: 24px;

	fill: #D0DADD;
	transition: .2s ease-out;
}

.faq_point input:checked + label{
	background: #D0DADD;
	transition: .2s ease-in;
}
.faq_point input:checked + label svg{
	fill: #fff;
	transform: rotate(45deg);
	transition: .2s ease-in;
}

.faq_point input:checked + label:hover{
	background: #fff;
}
.faq_point input:checked + label:hover svg{
	fill: #39AEC2;
}
.faq_point input:checked + label + p, .faq_point input:checked + label + h2 {
	color: rgba(0,0,0,.8);
	transition: .2s;
	font-variation-settings: 'wght' 600;
	margin: 0;
    /*padding: 0;*/
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
.faq_point input:checked + label + p + article, .faq_point input:checked + label + h2 + article{
	display: grid;
}

.faq_point_title{
	height: 84px;
    display: grid;
    align-items: center;
    padding-left: 30px;
	color: rgba(0,0,0,.5);
	transition: .2s;
	
    font-family: 'PTRootUI', BlinkMacSystemFont, -apple-system, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif !important;
    font-weight: 400!important;
    font-size: 20px!important;
    line-height: 1.4em!important;
}

/*FAQ ARTICLE*/

.faq_point article{
	border-top: 3px solid #D0DADD;
	padding: 50px 0;
	display: none;
	grid-template-columns: repeat(10, 1fr);
	grid-column-gap: 30px;
	grid-template-areas: 
	". . article_container article_container article_container article_container article_container article_container . .";
}

.article_container{
	grid-area: article_container;
	display: grid;
	grid-template-rows: max-content;
	grid-row-gap: 30px;
}
.faq_point article strong {
	font-variation-settings: 'wght' 700;
	color: #000;
}
.faq_point article p{
	color: rgba(0,0,0,.7);
	line-height: 1.5em;
	font-variation-settings: 'wght' 350;
}
.faq_point article h3{
	font-size: 1.4em;
	margin-top: 20px;
}

.faq_article_ol, .article_container ol, .article_container ul {
	width: calc((4 * 100% - 2 * 30px) / 6);
	margin-bottom: 30px;
	counter-reset: my-awesome-counter;
}
.faq_article_ol li, .article_container ol li {
	color: rgba(0,0,0,.7);
	list-style: none;
	font-size: 1em;
	line-height: 1.5em;
	margin-bottom: 50px;
	padding-left: 50px;
    counter-increment: my-awesome-counter;
	position: relative;
}
.article_container ul li {
    color: rgba(0,0,0,.7);
    position: relative;
    font-size: 1em;
    line-height: 1.5em;
    margin-bottom: 50px;
    padding-left: 50px;
}
.faq_article_ol li:last-child, .article_container ol li:last-child, .article_container ul li:last-child{
	margin-bottom: 0;
}
.faq_article_ol li::before, .article_container ol li::before{
	content: counter(my-awesome-counter) ".";
	font-weight: 700;
 	font-family: "IBM Plex Mono";
	color: #39AEC2;
	list-style: none;
	font-size: 1em;
	line-height: 1.5em;
	position: absolute;
	left: 0;
}
.article_container ul li:before {
    display: block;
    content: '';
    position: absolute;
    top: 0.5em;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #39AEC2;
}
.article_container span {
	background: rgba(255,177,3,.7); 
	padding: 0 5px;
	color: #000;
	text-decoration: none!important;
}
.article_container em {
	font-family: "IBM Plex Mono";
}
/*STILL HAVE A QUESTION*/

.still_question_block{
	display: grid;
	grid-template-columns: 50px repeat(12, 1fr) 50px;
	grid-template-areas: ". . . . still_qbc still_qbc still_qbc still_qbc still_qbc still_qbc . . . .";
}
.still_question_block_container{
	grid-area: still_qbc;
}
.still_question_block h2{
	text-align: center;
	margin-bottom: 10px;
}
.still_question_block p{
	text-align: center;
	width: 80%;
	margin: 0 auto;
	font-size: .8em;
	line-height: 1.4em;
	color: rgba(0,0,0,.8);
}

.button_split{
	margin: 50px 0 100px 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 30px;
}

.split_link{
	display: grid;
	grid-template-rows: max-content;
	grid-template-areas: 
	"b_l_a"
	"b_l_p";
}
.blog_link .a_arrow{
	grid-area: b_l_a;
	text-align:center;
	border: 3px solid #39AEC2;
	padding: 20px 0;
	font-size: 1.4em;
}
.blog_link .a_arrow span{
	margin: 0;
}
.blog_link .a_arrow:hover{
	text-decoration: none;
}

.blog_link .a_arrow:hover span{
	transform: translateX(-10px);
	transition: .2s ease-in-out;
}
.contact_link .a_arrow{
	grid-area: b_l_a;
	text-align: center;
    display: block;
    padding: 20px 0;
    background: #FFB103;
    border: 3px solid #FFB103;
    color: #000;
    text-decoration: none;
    font-family: "IBM Plex Mono";
    font-weight: 500;
    font-size: 1.4em;
}
.contact_link .a_arrow:hover{
    border: 3px solid #000;
}
.blog_link p, .contact_link p{
	margin-top: 10px;
	color: rgba(0,0,0,.5);
	grid-area: b_l_p;
	text-align: center;
	font-size: 0.7em;
}
.contact_link p{
	color: rgba(0,0,0,.8);
}


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

	.hero_split_container{
	display: grid;
	grid-template-columns: 40px repeat(11, 1fr 30px) 1fr 40px;

	grid-template-areas: 
	". hero_left hero_left hero_left hero_left hero_left hero_left hero_left hero_left hero_left hero_left hero_left hero_left hero_right hero_right hero_right hero_right hero_right hero_right hero_right hero_right hero_right hero_right hero_right hero_right";
	}
	.hero_right_container{
		grid-template-columns: repeat(5, 1fr 30px) 1fr 40px;
		grid-template-areas: 
		". hero_right_h2 hero_right_h2 hero_right_h2 hero_right_h2 hero_right_h2 hero_right_h2 hero_right_h2 hero_right_h2 hero_right_h2 hero_right_h2 ."
		". hero_right_desc hero_right_desc hero_right_desc hero_right_desc hero_right_desc hero_right_desc hero_right_desc hero_right_desc hero_right_desc hero_right_desc ."
		". hero_faces hero_faces hero_faces hero_faces hero_faces hero_faces hero_faces hero_faces hero_faces hero_faces ."
		". hero_faces_p hero_faces_p hero_faces_p hero_faces_p hero_faces_p hero_faces_p hero_faces_p hero_faces_p hero_faces_p hero_faces_p .";
	}

	.hero_left h1{
		margin-right: 50px;
	}
	.faq_point article{
		grid-template-areas: ". article_container article_container article_container article_container article_container article_container article_container article_container .";
	}
}


@media screen and (max-width: 1080px){
	.header_r_block{
		background: none;
	}
	.hero_split_container{
	display: grid;
	grid-template-columns: 10px repeat(6, 1fr) 10px;
	grid-column-gap: 30px;

	grid-template-areas: 
	". hero_left hero_left hero_left hero_left hero_left hero_left ."
	"hero_right hero_right hero_right hero_right hero_right hero_right hero_right hero_right";
	}
	.hero_left h1{
		margin-right: 0;
	}
	.faq_search{
		max-width: none;
	}
	.hero_right{
		padding-top: 50px;
	}
	.hero_right_container{
		grid-template-columns:10px repeat(5, 1fr 30px) 1fr 10px;
		grid-template-areas: 
		". . hero_right_h2 hero_right_h2 hero_right_h2 hero_right_h2 hero_right_h2 hero_right_h2 hero_right_h2 hero_right_h2 hero_right_h2 . ."
		". . hero_right_desc hero_right_desc hero_right_desc hero_right_desc hero_right_desc hero_right_desc hero_right_desc hero_right_desc hero_right_desc . ."
		". . hero_faces hero_faces hero_faces hero_faces hero_faces hero_faces hero_faces hero_faces hero_faces . ."
		". . hero_faces_p hero_faces_p hero_faces_p hero_faces_p hero_faces_p hero_faces_p hero_faces_p hero_faces_p hero_faces_p . .";
	}
	.hero_faces{
		margin-top: 50px;
	}
	.faq_container{
		grid-template-columns: 10px repeat(6, 1fr) 10px;
		grid-template-areas:
		". faq_group_container faq_group_container faq_group_container faq_group_container faq_group_container faq_group_container ."
		;
	}
	.faq_point_title{
		font-size: .8em;
	}
	.faq_point article{
		grid-template-columns: repeat(6, 1fr);
		grid-template-areas:
		". article_container article_container article_container article_container .";
	}
	.faq_article_ol, .article_container ol, .article_container ul{
		width: 100%;
	}
	.still_question_block{
		grid-template-columns: 10px repeat(6, 1fr) 10px;
		grid-column-gap: 30px;
		grid-template-areas: 
		". still_qbc still_qbc still_qbc still_qbc still_qbc still_qbc .";
	}
}


@media screen and (max-width: 600px){
	.hero_split_container{
		grid-template-columns: 0 repeat(4, 1fr) 0;
		grid-row-gap: 20px;
		grid-template-areas: 
		". hero_left hero_left hero_left hero_left  ."
		"hero_right hero_right hero_right hero_right hero_right hero_right"
	}
	#search_label{
		font-size: .8em;
	}
	.faq_point article{	
    	grid-template-columns: repeat(4, 1fr);
		grid-row-gap: 20px;
    	grid-template-areas: "article_container article_container article_container article_container";
	}
	.faq_container{
		grid-template-columns: 0 repeat(4,1fr) 0;
		grid-template-areas: 
		". faq_group_container faq_group_container faq_group_container faq_group_container .";
		grid-row-gap: 20px;
	}
	.article_container{
		margin:0 30px;
	}
	.faq_point input + label, .faq_point_title{
    	height: 100px;
	}
	.still_question_block{
	    grid-template-columns: 0 repeat(4, 1fr) 0;
	    grid-column-gap: 20px;
	    grid-template-areas: ". still_qbc still_qbc still_qbc still_qbc .";
	}
	.still_question_block p{
		width: 100%;
	}
	.button_split{
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 1fr;
		grid-row-gap: 50px;
	}

}