/* Модалки */
#modals{
	display: flex;
    justify-content: center;
	align-items: center;
	top: 0;
	left: 0;
	height: 100%;
	height: 100dvh;
	width: 100%;
	z-index: 100;
    position: fixed;
    pointer-events: none;
}
#modals .modal_form{
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: auto!important;
	pointer-events: none;
	background: none;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px;
    position: absolute;
    z-index: 101;
    /*transform: scale(0);*/
    opacity: 0;
}
#modals .modal_form .modal_inner{
	background: var(--color-2-1);
    color: var(--color-1-1);
	height: auto;
    padding: 24px;
    max-height: 100%;
    /*height: 100%;*/ /* чтобы контент прокручивался */

    display: flex;
    flex-direction: column;
}
#modals .modal_form .content{
    height: 100%;
    overflow: auto;
}

#modals .modal_form.visible{
    opacity: 1;
    /*transform: scale(1);*/
}
#modals .modal_form.visible .modal-close{
    cursor: pointer;
}
#modals .modal_form.visible .modal-close,
#modals .modal_form.visible .modal_inner{
	pointer-events: all;
    
}
#modals .modal_form .modal-close{
	line-height: 0;
	font-size: 0;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	margin-left: auto;
	border-radius: 50%;
	background: var(--color-1-1) var(--sprt) center -532px / 52px auto no-repeat;
    margin-bottom: 16px;

	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-tap-highlight-color: transparent;
    outline: none;
    -webkit-user-select: none;	
}

.modal_overlay{
    display: none;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--dark);
    opacity: 0.5;
}
#modals .modal_overlay.visible{
    display: block;
    pointer-events: all;
    cursor: pointer;
}

/* scrollbars */
.firefox #modals .modal_form .modal_inner>.content{
	scrollbar-width: thin;
    /* плашка-бегунок, фон */
    scrollbar-color: var(--scrollbar-foreground) var(--scrollbar-background);
}
#modals .modal_form .modal_inner>.content {
    --scrollbar-foreground: #adadad;
    --scrollbar-background: rgba(255, 255, 255, 0);
    --scrollbar-fake-background: #f3f4f5;
    --scrollbar-size: 5px;
    --scroll-thumb-start: 40px;
    --scroll-thumb-end: 40px;
    --scrollbar-radius: 20px;
    padding-right: 1px; /* экстра-отступ */
    margin-right: -1px;
}

#modals .modal_form .modal_inner>.content::-webkit-scrollbar {
    width: var(--scrollbar-size);
    /* в основном для вертикальных полос прокрутки */
    height: var(--scrollbar-size);
    /* в основном для горизонтальных полос прокрутки */
    border-radius: var(--scrollbar-radius);
}

#modals .modal_form .modal_inner>.content::-webkit-scrollbar-thumb {
    /* плашка-бегунок */
    background: var(--scrollbar-foreground);
    /* фон */
    border-radius: var(--scrollbar-radius);
}

#modals .modal_form .modal_inner>.content::-webkit-scrollbar-track {
    /* фон */
    background: var(--scrollbar-background);
}

#modals .modal_form .modal_inner>.content::-webkit-scrollbar-track-piece:end {
    /* чтобы скроллбар шел не с самого верха */
    background: rgba(255, 255, 255, 0);
    margin-bottom: var(--scroll-thumb-end);
}

#modals .modal_form .modal_inner>.content::-webkit-scrollbar-track-piece:start {
    background: rgba(255, 255, 255, 0);
    margin-top: var(--scroll-thumb-start);
}


/* modals */

/* remove standart cf7 styles */
body form.sent .wpcf7-response-output,
body form.invalid .wpcf7-response-output{
	display: none!important;
}
/* body .wpcf7-not-valid-tip{
	display: none!important;
} */
body .wpcf7-list-item{
	margin: unset;
}

/* custom styles */
#modals .modal_form .modal_inner > .heading{
	font-size: 24px;
	font-family: var(--font-headings);
	font-weight: 700;
	line-height: normal;
}
#modals .modal_form .content .inner > .img{
	width: 146px;
	margin-left: auto;
	margin-top: 0;
	margin-bottom: auto;

	display: none;
}
#modals .modal_form .content .inner > .img img{
	object-fit: contain;
}
#modals .modal_form .form__inner .acceptance .wpcf7-list-item-label .disclamer{
	margin-top: -3px;
}
#modals .modal_form .form__inner .acceptance-row{
	margin-top: calc(1rem + 5px);
}
#modals .modal_form .form__inner .row.actions{
	margin-top: calc(1rem + 3px);
	position: relative;
}
#modals .modal_form .form__inner .acceptance .wpcf7-list-item-label .disclamer{
	font-size: 10px;
}

/* thanks */
#modals .modal_form#thanks .modal_inner > .heading{
	margin-bottom: 24px;
}
/**/

@media (min-width: 560px){
	#modals .modal_form .modal-close{
		margin-bottom: 7px;
	}
	#modals .modal_form .modal_inner > .heading{
		font-size: 32px;
		margin-bottom: 0;
	}
	#modals .modal_form .cf{
		font-size: 18px;
	}
	#modals .modal_form .cf form > p{
		margin: 16px 0 24px;
	}
	#modals .modal_form .cf input[type="submit"]{
		font-size: 16px;
		min-width: 212px;
	}
	#modals .modal_form .content .inner > .img{
		width: 186px;
	}
	#modals .modal_form .form__inner .acceptance .wpcf7-list-item-label .disclamer{
		font-size: 14px;
	}
	
	/* thanks */
	#modals .modal_form#thanks .modal_inner > .content{
		font-size: 18px;
	}
	#modals .modal_form#thanks .modal-close{
		margin-bottom: 0;
	}
}

@media (min-width: 650px){
	#modals .modal_form .form__inner .acceptance .wpcf7-list-item-label .disclamer{
		margin-top: unset;
	}
}

@media (min-width: 768px){
	#modals .modal_form .modal_inner{
		padding: 32px;
	}
	#modals .modal_form .modal-close{
	}
	#modals .modal_form#universal .content > .inner{
		display: flex;
	}
	#modals .modal_form .cf{
		max-width: 390px;
	}
	#modals .modal_form .content .inner > .img{
		pointer-events: none;
		padding-left: 40px;
		flex-shrink: 0;
		width: 230px;
		display: block;
	}
	#modals .modal_form .modal_inner > .heading{
		font-size: 36px;
		padding-right: 190px;
	}
	#modals .modal_form .form__inner .acceptance .wpcf7-list-item-label .disclamer{
		margin-top: -4px;
		line-height: 130%;
	}
}

@media (min-width: 968px){
	#modals .modal_form .modal-close{
		margin-top: -22px;
		margin-right: -22px;
	}
	#modals .modal_form .modal_inner{
		padding: 46px;
	}
}

@media (min-width: 1100px){
	#modals .modal_form .content .inner > .img{
		width: 250px;
		padding-left: 50px;
	}
}

@media (min-width: 1200px){
	#modals .modal_form .modal_inner > .heading{
		font-size: 42px;
		font-weight: 500;
	}
	#modals .modal_form .cf{
		font-size: 20px;
		max-width: 440px;
	}
	#modals .modal_form .cf ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
		font-size: 18px;
	}
	#modals .modal_form .cf ::-moz-placeholder { /* Mozilla Firefox 19+ */
		font-size: 18px;
	}
	#modals .modal_form .cf :-ms-input-placeholder { /* Internet Explorer 10-11 */
		font-size: 18px;
	}
	#modals .modal_form .cf ::-ms-input-placeholder { /* Microsoft Edge */
		font-size: 18px;
	}
	#modals .modal_form .cf ::placeholder { /* Most modern browsers support this now. */
		font-size: 18px;
	}
	#modals .modal_form .cf input[type="text"], 
	#modals .modal_form .cf textarea, 
	#modals .modal_form .cf input[type="email"]{
		font-size: 18px;
		padding: 11px 20px 10px;
	}
	#modals .modal_form .cf form > p{
		margin: 18px 0 46px;
	}
	#modals .modal_form .form__inner .acceptance-row{
		margin-top: 24px;
	}
	#modals .modal_form .form__inner .row.actions{
		margin-top: 30px;
	}
	#modals .modal_form .content .inner > .img{
		margin-top: 14px;
	}
	#modals .modal_form .cf input[type="submit"]{
		padding: 13px 20px 13px;
		font-size: 18px;
	}
	
	/* thanks */
	#modals .modal_form#thanks .modal_inner > .content{
		font-size: 20px;
	}
}

@media (min-width: 1360px){
	#modals .modal_form .modal_inner{
		padding: 60px;
	}
	#modals .modal_form .modal-close{
		margin-top: -38px;
        margin-right: -38px;
	}
	#modals .modal_form .modal_inner > .heading{
		font-size: 48px;
	}
	#modals .modal_form .cf{
		max-width: 510px;
	}
	#modals .modal_form .content .inner > .img{
		width: 290px;
        padding-left: 60px;
	}
	
	/* thanks */
	/* #modals .modal_form#thanks .modal_inner > .content{
		font-size: 22px;
	} */
	#modals .modal_form#thanks .modal_inner > .heading{
		margin-bottom: 18px;
	}
}

@media (min-width: 1730px){
	#modals .modal_form .modal_inner{
		padding: 68px 80px 80px;
		border-radius: 72px;
	}
	#modals .modal_form#universal .modal_inner{
		min-width: 1126px;
	}
	/* #modals .modal_form .modal_inner > .heading{
		margin-top: -12px;
	} */
	#modals .modal_form .modal-close{
		margin-top: -28px;
        margin-right: -40px;
	}
	#modals .modal_form .cf{
		max-width: 530px;
	}
	#modals .modal_form .cf input[type="submit"]{
		min-width: 228px;
	}
	#modals .modal_form .content .inner > .img{
		width: 393px;
        padding-left: 74px;
		margin-top: 0;
	}
	
	/* thanks */
	/* #modals .modal_form#thanks .modal_inner > .heading{
		margin-bottom: 30px;
	} */
	/* #modals .modal_form#thanks .modal_inner > .content{
		font-size: 24px;
	} */
}

/* upd */
@media (max-width: 559px){
	#modals .modal_form .modal_inner{
		position: relative;
	}
	#modals .modal_form .modal-close{
		position: absolute;
		right: 24px;
		z-index: 2;
		margin-top: 0;
	}
	#modals .modal_form .modal_inner > .heading{
		margin-top: 10px;
		padding-right: 42px;
		font-size: 20px;
	}
}

/* just colors update */