/*
Theme Name: ivn-theme
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 1.1
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
:root {
	--primary-color: #13ae78;
	--secondary-color: #3f36dc;
	--gray: #888;
	--black: #111;
	--r1: 1rem;
	--r2: 2rem;
}

@media only screen and (min-width: 1200px) {
    html {
    	font-size: 18px !important;
    }
}
@media only screen and (min-width: 850px) and (max-width: 1199px) {
    html {
    	font-size: 16px !important;
    }
}
@media only screen and (max-width: 849px) {
    html {
    	font-size: 14px !important;
    }
}

.off-canvas-right .mfp-content {
	width: 90%
}
.lightbox-content {
	border-radius: var(--r2);
}
@media (max-width: 450px) {
	.mfp-container {
		padding-left: 0;
		padding-right: 0;
	}
}
.nav > li > a {
	text-transform: none;
	font-weight: normal;
	letter-spacing: none;
}

.bg-blur > .col-inner,
.header-wrapper.stuck .header-bg-color {
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
}

.last-bottom .col-inner {
	display: flex;
	flex-direction: column;
}
.last-bottom .col-inner .mt-a {
	margin-top: auto
}

p a,
.entry-content ul li a,
.col-inner p a,
.col-inner li a,
table td a,
#footer a,
.underline {
	text-decoration: underline
}
p a:hover,
.entry-content ul li a:hover,
.col-inner p a:hover,
.col-inner li a:hover,
table td a:hover,
#footer a:hover,
.underline:hover {
	text-decoration: none
}

.icon-box.middle {
	align-items: center;
}

/*accordeon*/
.accordion-title {
	padding-left: 20px
}
.accordion-title.active {
	font-weight: normal;
	background: none
}
.accordion-title:hover {
	color: var(--primary-color)
}
.accordion-item {
	position: relative
}
.accordion .toggle {
	position: absolute;
	right: 0;
	left: auto;
	height: 2.3em
}
/*end accordeon*/

/*tabs*/
.tab a {
	text-decoration: none !important
}
/*end tabs*/

.img-circle .img-inner,
.img-circle img {
	border-radius: 50%
}

.round-1 .img-inner,
.round-1 img, .round-1 .overlay,
.round-1 .section-bg-overlay,
.banner.round-1,
.banner.round-1 .banner-bg,
.round-1.section,
.round-1.section .bg-fill {
	border-radius: var(--r1);
}

.round-2 .img-inner,
.round-2 img, .round-2 .overlay,
.round-2 .section-bg-overlay,
.banner.round-2,
.banner.round-2 .banner-bg,
.round-2.section,
.round-2.section .bg-fill {
	border-radius: var(--r2);
}

/*list styles*/
ul li.bullet-checkmark:before, ul li.bullet-arrow:before, ul li.bullet-star:before {
	color: var(--primary-color);
}

.bullets-white li.bullet-checkmark:before,
.bullets-white li.bullet-arrow:before,
.bullets-white li.bullet-star:before {
	color: #fff;
}
.bullets-dark li.bullet-checkmark:before,
.bullets-dark li.bullet-arrow:before,
.bullets-dark li.bullet-star:before {
	color: #111;
}

ul li, ol li {
	border-bottom: none !important
}
/*end list styles*/

.button:not(.icon) {
	border-radius: 12px;
}
.button {
	font-weight: normal
}
.button:hover, .dark .button.is-form:hover, input[type=button]:hover, input[type=reset]:hover, input[type=submit]:hover {
	box-shadow: inset 0 0 0 100px rgba(255,255,255,.2);
}
.button.is-outline {
	border-width: 1px;
}

.button.wa-button {
  background-color: #34AF23 !important;
}
.button.telegram-button {
	background-color: #75B2E0 !important;
}
.button.wa-button span,
.button.telegram-button span {
	display: inline;
}

/*form styles*/
select {
	color: var(--black);
	background: none;
	border: 1px solid var(--black);
	box-shadow: none;
	transition: all 0.3s ease-in-out;
	height: 52px;
}
input[type="email"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
.form-round input[type="email"],
.form-round input[type="number"],
.form-round input[type="text"],
.form-round input[type="tel"],
.form-round input[type="url"],
.form-round input[type="password"] {
	color: var(--black);
	border: 1px solid var(--gray);
	border-radius: 12px;
	background: none;
	box-shadow: none;
	transition: all 0.3s ease-in-out;
	background: #fff;
	min-height: 59px;
}
input[type="email"]:hover,
input[type="number"]:hover,
input[type="text"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="password"]:hover,
textarea:hover,
select:hover {
	border-color: var(--black)
}
input[type="email"]:focus,
input[type="number"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
	color: var(--black);
	box-shadow: none;
	border-color: var(--primary-color);
}

.wpcf7-submit {
	padding: 10px 30px !important;
	font-weight: normal !important;

}

/*checkboxex and radio*/
input[type='checkbox'],
input[type='radio'] {
	appearance: none;
	cursor: pointer;
	width: 1em;
	min-width: 1em;
	height: 1em;
	position: relative;
	overflow: hidden;
	color: var(--gray);
	box-shadow: inset 0 0 0 1px var(--gray);
	background: transparent;
	transition: all 0.3s ease-in-out;
	margin-bottom: 0;
	display: inline-block;
}
input[type='checkbox'] {
	border-radius: 0;
	top: .25em;
}

input[type='radio'] {
	border-radius: 50px;
	top: .125em;
}

input[type='checkbox']:checked,
input[type='radio']:checked {
  background: var(--primary-color);
  box-shadow: inset 0 0 0 1px var(--primary-color);
}

input[type='checkbox']::after,
input[type='radio']::after {
	content: '';
	position: absolute;
	inset: 0;
	transition: all 0.3s ease-in-out;
	background: #fff;
	mask-repeat: no-repeat;
    mask-position: center;
    transform: scale(0);
}
input[type='checkbox']::after {
	mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1.75 -3 16 16"><path d="M11.53.23c-.15-.15-.36-.24-.57-.23h0c-.2,0-.39.09-.53.23L3.91,6.75l-2.59-2.59c-.14-.15-.33-.23-.54-.24-.23,0-.4.07-.55.21-.3.29-.31.78,0,1.1l3.14,3.14c.15.15.35.22.54.22s.39-.07.54-.22L11.52,1.32c.15-.14.23-.33.23-.54,0-.21-.08-.4-.22-.54ZM10.97.38h0s0,0,0,0Z"/></svg>');
    mask-size: 80%;
}
input[type='radio']::after {
	mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><circle class="cls-1" cx="5" cy="5" r="5"/></svg>');
    mask-size: 50%;
}

input[type='checkbox']:checked::after,
input[type='radio']:checked::after {
  transform: none;
}

.checkbox {
	display: flex;
	gap: 5px;
}

/*end form styles*/

@media only screen and (min-width: 1024px) {
/*************** LARGE ONLY  ***************/

}

@media only screen and (max-width: 550px) {		
	.nowrap.row {
		flex-flow: row nowrap !important;
		overflow-x: scroll;
		scroll-snap-type: x mandatory;
	}
	.nowrap.row > .col {
		min-width: calc(100% - 50px);
		scroll-snap-align: center;
	}
}

@media only screen and (min-width: 680px) and (max-width: 1023px) {
/*************** TABLET CSS  ***************/
	
}

@media only screen and (max-width: 679px) {
/*************** MOBILE CSS  ***************/

}