:root {
	--color-primary: #725ADD;
	--color-primary-mid-light: #3399FF;
	--color-primary-light: #14B6FA;
	--color-background-light: #EBF5FF;
	--color-link-primary: #5676E5;
	--color-link-selected: #471CA5;
	--color-text-primary: #1156FF;
	--color-text-primary-light: #5676E5;
	--color-text-secondary: #854AD8;
}

a {
	text-decoration: none;
	color: inherit;
}

html, body {
	margin: 0;
	padding: 0;
}

body, textarea, input, button {
	font-family: Avenir;
	font-size: 16px;
}

body.scroll-lock {
	overflow: hidden;
}

body {
	background-color: var(--color-background-light);
}

h1, h2, h3, h4, h5, h6 {
	margin-top: 0;
	margin-bottom: 0;
}

.omsbtn-regular {
	padding: 5px 20px;
	border-radius: 50px;
	border: none;
	color: white;
	font-weight: bold;
	cursor: pointer;
	font-family: Gilroy;
	line-height: 180%;
	transition: transform 0.2s ease;
}
.omsbtn-regular:hover {
	transform: translateX(2px);
	outline: 1px solid yellow;
}

.omsbtn-gradient {
	font-weight: 500;
	border: none;
	color: white;
	background: linear-gradient(to right, var(--color-primary) 0%, var(--color-primary-light) 100%);
	border-radius: 100px;
	cursor: pointer;
	transition: transform 0.2s ease;
}
.omsbtn-gradient:hover {
	transform: translateX(2px);
	outline: 1px solid yellow;
}

.omstext-gradient {
	background: linear-gradient(to right, var(--color-primary) 0%, var(--color-primary-light) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.omsbtn-white {
	font-weight: 500;
	color: var(--color-link-primary);
	background: white;
	background-clip: padding-box;
	border: solid 1px transparent;
	position: relative;
	border-radius: 100px;
	cursor: pointer;
	transition: transform 0.2s ease;
}
.omsbtn-white:before {
	content: '';
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: -1;
	margin: -1px; /* !importanté */
	border-radius: inherit; /* !importanté */
	background: linear-gradient(to right, var(--color-primary) 0%, var(--color-primary-light) 100%);
}

.omssep-gradient {
	width: 100px;
	height: 10px;
	background: linear-gradient(to right, var(--color-primary) 0%, var(--color-primary-light) 100%);
}

.omssep-white {
	width: 100px;
	height: 10px;
	background-color: white;
}

.oms-center {
	text-align: center;
}

/* ARROWS */
.oms-arrow {
	border: solid white;
	border-width: 0 2px 2px 0;
	display: inline-block;
	padding: 4px;
}
.oms-arrow.right {
	transform: rotate(-45deg);
}
.oms-arrow.left {
	transform: rotate(135deg);
}
.oms-arrow.up {
	transform: rotate(-135deg);
}
.oms-arrow.down {
	transform: rotate(45deg);
}

.oms-check {
	display: inline-block;
	transform: rotate(45deg);
	height: 15px;
	width: 8px;
	border-bottom: 3px solid var(--color-primary);
	border-right: 3px solid var(--color-primary);
}
.oms-check.mid-light {
	border-bottom-color: var(--color-primary-mid-light);
	border-right-color: var(--color-primary-mid-light);
}
.oms-check.light {
	border-bottom-color: var(--color-primary-light);
	border-right-color: var(--color-primary-light);
}

.oms-x:after{
	display: inline-block;
	content: "\00d7"; /* This will render the 'X' */
	color: #C31424;
	font-size: 2em;
}

/* TRANSISTION */
.oms-vp-trigger {
	transition: opacity 0.3s ease, transform 0.3s ease;
}
.oms-vp-handown {
	opacity: 0;
    transform: translateY(30px);
}

/* FONTS */

@font-face {
	font-family: Avenir;
	font-style: normal;
	font-weight: 400;
	
	src: url(../fonts/SVN-Avenir\ Next\ Regular.woff2);
}
@font-face {
	font-family: Avenir;
	font-style: normal;
	font-weight: 600;
	src: url(../fonts/SVN-Avenir\ Next\ DemiBold.woff2);
}
@font-face {
	font-family: Avenir;
	font-style: italic;
	font-weight: 600;
	src: url(../fonts/SVN-Avenir\ Next\ DemiBold\ Italic.woff2);
}
@font-face {
	font-family: Avenir;
	font-style: normal;
	font-weight: 900;
	src: url(../fonts/SVN-Avenir\ Next\ Bold.woff2);
}
@font-face {
	font-family: Avenir;
	font-style: italic;
	font-weight: 400;
	src: url(../fonts/SVN-Avenir\ Next\ Italic.woff2);
}
@font-face {
	font-family: Avenir;
	font-style: normal;
	font-weight: 500;
	src: url(../fonts/SVN-Avenir\ Next\ Medium.woff2);
}
@font-face {
	font-family: Gilroy;
	font-style: normal;
	font-weight: 600;
	src: url(../fonts/SVN-Gilroy\ Bold.woff2);
}
@font-face {
	font-family: iCiel;
	font-style: normal;
	font-weight: 600;
	src: url(../fonts/iCiel-SamsungSharpSans-Bold.woff2);
}