/* Normal */
@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 300;
	src: local("Roboto Light"), local("Roboto-Light"),
		url(/css/fonts/Roboto-Light.woff2) format("woff2"),
		url(/css/fonts/Roboto-Light.woff) format("woff");
}

@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 400;
	src: local("Roboto"), local("Roboto-Regular"),
		url(/css/fonts/Roboto-Regular.woff2) format("woff2"),
		url(/css/fonts/Roboto-Regular.woff) format("woff");
}

@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 500;
	src: local("Roboto Medium"), local("Roboto-Medium"),
		url(/css/fonts/Roboto-Medium.woff2) format("woff2"),
		url(/css/fonts/Roboto-Medium.woff) format("woff");
}

@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 700;
	src: local("Roboto Bold"), local("Roboto-Bold"),
		url(/css/fonts/Roboto-Bold.woff2) format("woff2"),
		url(/css/fonts/Roboto-Bold.woff) format("woff");
}

/* Italic */
@font-face {
	font-family: "Roboto";
	font-style: italic;
	font-weight: 300;
	src: local("Roboto Light"), local("Roboto_Italic-Light"),
		url(/css/fonts/Roboto_Italic-Light.woff2) format("woff2"),
		url(/css/fonts/Roboto_Italic-Light.woff) format("woff");
}

@font-face {
	font-family: "Roboto";
	font-style: italic;
	font-weight: 400;
	src: local("Roboto"), local("Roboto_Italic-Regular"),
		url(/css/fonts/Roboto_Italic-Regular.woff2) format("woff2"),
		url(/css/fonts/Roboto_Italic-Regular.woff) format("woff");
}

@font-face {
	font-family: "Roboto";
	font-style: italic;
	font-weight: 500;
	src: local("Roboto Medium"), local("Roboto_Italic-Medium"),
		url(/css/fonts/Roboto_Italic-Medium.woff2) format("woff2"),
		url(/css/fonts/Roboto_Italic-Medium.woff) format("woff");
}

@font-face {
	font-family: "Roboto";
	font-style: italic;
	font-weight: 700;
	src: local("Roboto Bold"), local("Roboto_Italic-Bold"),
		url(/css/fonts/Roboto_Italic-Bold.woff2) format("woff2"),
		url(/css/fonts/Roboto_Italic-Bold.woff) format("woff");
}

:root {
	--height--promo: 0px;
	--height--header: 70px;
	--height--header--promo: 80px;

	/* Theme variables */
	--color--text: #181818;
	--color--primary-bg: #018DDA;
	--color--border: #D0E2EA;
	--color--arrow: #505050;
	--color--popup: #ffffff;
	--color--popup-hover: #F6FAFC;

	/* Header */
	--color--header-bg: #ffffff;
	--color--header-item-hover: #17C0FF;
	--color--header-user-text: #181818;

	--box-shadow--header: 0 4px 20px rgba(177, 193, 199, 0.25);

	/* Footer */
	--color--footer-title: #ffffff;
	--color--footer-text: #BDBDBD;

	--color--footer-link-hover: #ffffff;

	/* Button */
	--color--button-primary: #17C0FF;
	--color--button-primary-text: #FFFFFF;
	--color--button-primary-border: #17C0FF;
	--color--button-primary-hover: #00abeb;
	--color--button-primary-hover-border: #00abeb;
	--color--button-primary-active: #009dd8;
	--color--button-primary-active-border: #009dd8;
	--color--button-primary-focus: #009dd8;
	--color--button-primary-focus-border: #009dd8;

	--color--button-secondary: #ffffff;
	--color--button-secondary-text: #17C0FF;
	--color--button-secondary-border: #17C0FF;
	--color--button-secondary-hover: #00abeb;
	--color--button-secondary-hover-border: #00abeb;
	--color--button-secondary-hover-text: #FFFFFF;
	--color--button-secondary-active: #009dd8;
	--color--button-secondary-active-border: #009dd8;
	--color--button-secondary-focus: #009dd8;
	--color--button-secondary-focus-border: #009dd8;

	--color--button-tertiary: rgba(23, 192, 255, 0.1);
	--color--button-tertiary-text: #17C0FF;
	--color--button-tertiary-border: #17C0FF;
	--color--button-tertiary-hover: rgba(23, 192, 255, 0.2);
	--color--button-tertiary-hover-border: #17C0FF;
	--color--button-tertiary-hover-text: #17C0FF;
	--color--button-tertiary-active: rgba(23, 192, 255, 0.1);
	--color--button-tertiary-active-border: #009DD8;
	--color--button-tertiary-focus: rgba(23, 192, 255, 0.1);
	--color--button-tertiary-focus-border: #009DD8;

}

[data-theme="manycam-light"] {
	--color--text: #FFFFFF;
	--color--primary-bg: #232323;
	--color--border: #505050;
	--color--arrow: #ffffff;
	--color--popup: #282828;
	--color--popup-hover: #353535;

	/* Header */
	--color--header-bg: #121212;
	--color--header-item-hover: #4094f7;
	--color--header-user-text: #0E73F6;

	--box-shadow--header: none;

	/* Footer */
	--color--footer-bg: #018DDA;
	--color--footer-title: #ffffff;
	--color--footer-text: #BDBDBD;
	--color--footer-link-hover: #4094F7;

	/* Button */
	--color--button-primary: #4094F7;
	--color--button-primary-text: #FFFFFF;
	--color--button-primary-border: #4094F7;
	--color--button-primary-hover: #0E73F6;
	--color--button-primary-hover-border: #0E73F6;
	--color--button-primary-active: #0452C8;
	--color--button-primary-active-border: #0452C8;
	--color--button-primary-focus: #4094F7;
	--color--button-primary-focus-border: #0452C8;

	--color--button-secondary: rgba(64, 148, 247, 0.1);
	--color--button-secondary-text: #0E73F6;
	--color--button-secondary-border: #4094F7;
	--color--button-secondary-hover: rgba(64, 148, 247, 0.2);
	--color--button-secondary-hover-border: #4094F7;
	--color--button-secondary-hover-text: #0E73F6;
	--color--button-secondary-active: rgba(64, 148, 247, 0.4);
	--color--button-secondary-active-border: #4094F7;
	;
	--color--button-secondary-focus: rgba(64, 148, 247, 0.1);
	--color--button-secondary-focus-border: #0452C8;

	--color--button-tertiary: rgba(64, 148, 247, 0.1);
	--color--button-tertiary-text: #0E73F6;
	--color--button-tertiary-border: #4094F7;
	--color--button-tertiary-hover: rgba(64, 148, 247, 0.2);
	--color--button-tertiary-hover-border: #4094F7;
	--color--button-tertiary-hover-text: #0E73F6;
	--color--button-tertiary-active: rgba(64, 148, 247, 0.4);
	--color--button-tertiary-active-border: #4094F7;
	;
	--color--button-tertiary-focus: rgba(64, 148, 247, 0.1);
	--color--button-tertiary-focus-border: #0452C8;
}

html,
body {
	height: 100%;
	min-height: 100%;
	min-width: 300px;
	margin: 0;
	padding: 0;
}

html {
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	line-height: 24em;
	font-weight: 300;
	scroll-behavior: smooth;
}

@media (min-width: 768px) {
	html {
		font-size: 14px;
	}
}

@media (min-width: 992px) {
	html {
		font-size: 16px;
	}
}

body {
	line-height: 1;
	overflow-y: scroll;
	overflow-x: hidden;
	font-family: 'Roboto', sans-serif;

}

#content {
	width: 100%;
	padding: 0;
	box-sizing: border-box;
	cursor: default;
	position: relative;
	padding-top: calc(var(--height--promo) + var(--height--header));
}

.hide {
	display: none !important;
}

a {
	cursor: pointer;
}

a:hover {
	text-decoration: none;
}
.link{
	text-decoration: underline;
	color: #17C0FF;
}
.link:hover{
	text-decoration: underline;
	color: #17C0FF;

}
[class^="container"] {
	padding-left: 24px;
	padding-right: 24px;
}
.container-content {
	padding-left: 20px !important;
	padding-right: 20px !important;;
}

/* Expression [class^="container"] doesn't work in @media ¯\_(ツ)_/¯  */
@media (min-width: 1440px) {

	.container,
	.container-lg {
		/* 1240px + 48px (paddings) */
		max-width: 1288px;
	}

	.container-md {
		max-width: 1280px;
	}
}

/* TODO review button */
/* #region Button */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	padding: 0 16px;
	border: 1px solid transparent;
	box-sizing: border-box;
	border-radius: 6px;
	font-weight: 500;
	font-size: 16px;
	white-space: nowrap;
	cursor: pointer;
	transition: 0.3s;
	user-select: none;
	line-height: 50px;
	text-align: center;
	color: var(--color--text);
	outline: none;
}

.button:disabled {
	opacity: 0.5;
}

.button>*+* {
	margin-left: 2px;
}

.button.rounded {
	height: 38px;
	border-radius: 30px;
	line-height: 36px;
}

/* Primary */
.button.blue,
.button.button_primary {
	border-color: var(--color--button-primary-border);
	background-color: var(--color--button-primary);
	color: var(--color--button-primary-text);
}

.button.blue:hover:not(:disabled),
.button.button_primary:hover:not(:disabled) {
	border-color: var(--color--button-primary-hover-border);
	background-color: var(--color--button-primary-hover);
	color: var(--color--button-primary-text);
}

.button.blue:active:not(:disabled),
.button.button_primary:active:not(:disabled) {
	border-color: var(--color--button-primary-active-border);
	background-color: var(--color--button-primary-active);
	color: var(--color--button-primary-text);
}

.button.blue:focus:not(:disabled),
.button.button_primary:focus:not(:disabled) {
	border-color: var(--color--button-primary-focus-border);
	outline: 3px solid var(--color--button-primary-focus-border);
	background-color: var(--color--button-primary-focus);
	color: var(--color--button-primary-text);
}

/* Secondary*/
.button.bordered-blue,
.button.button_secondary {
	border-color: var(--color--button-secondary-border);
	background-color: var(--color--button-secondary);
	color: var(--color--button-secondary-text);
}

.button.bordered-blue:hover:not(:disabled),
.button.button_secondary:hover:not(:disabled) {
	border-color: var(--color--button-secondary-hover-border);
	background-color: var(--color--button-secondary-hover);
	color: var(--color--button-secondary-hover-text);

}

.button.bordered-blue:active:not(:disabled),
.button.button_secondary:active:not(:disabled) {
	border-color: var(--color--button-secondary-active-border);
	background-color: var(--color--button-secondary-active);
	color: var(--color--button-secondary-hover-text);

}

.button.bordered-blue:focus:not(:disabled),
.button.button_secondary:focus:not(:disabled) {
	border-color: var(--color--button-secondary-focus-border);
	outline: 3px solid var(--color--button-secondary-focus-border);
	background-color: var(--color--button-secondary-focus);
	color: var(--color--button-secondary-hover-text);

}

.button.bordered-blue:hover:not(:disabled)>svg path,
.button.button_secondary:hover:not(:disabled)>svg path {
	fill: var(--color--button-secondary-hover-text);
}

/* Tertiary?? */
.button.button_tertiary {
	border-color: var(--color--button-tertiary-border);
	background-color: var(--color--button-tertiary);
	color: var(--color--button-tertiary-text);
}

.button.button_tertiary:hover:not(:disabled) {
	border-color: var(--color--button-tertiary-hover-border);
	background-color: var(--color--button-tertiary-hover);
	color: var(--color--button-tertiary-hover-text);

}

.button.button_tertiary:active:not(:disabled) {
	border-color: var(--color--button-tertiary-active-border);
	background-color: var(--color--button-tertiary-active);
	color: var(--color--button-tertiary-hover-text);

}

.button.button_tertiary:focus:not(:disabled) {
	border-color: var(--color--button-tertiary-focus-border);
	outline: 3px solid var(--color--button-tertiary-focus-border);
	background-color: var(--color--button-tertiary-focus);
	color: var(--color--button-tertiary-hover-text);
}



/* Bordered White??? */
.button.bordered-white {
	border-color: #fff;
	color: #fff;
}

.button.bordered-white:hover:not(:disabled),
.button.bordered-white:active:not(:disabled) {
	color: var(--color--button-primary);
}

.button.bordered-white:hover:not(:disabled) {
	border-color: #fff;
	background-color: #fff;
}

.button.bordered-white:active:not(:disabled) {
	border-color: #edf6fa;
	background-color: #edf6fa;
}

.button.bordered-white:hover:not(:disabled)>svg path,
.button.bordered-white:active:not(:disabled)>svg path {
	fill: var(--color--button-primary);
}


/* White??? */
.button.white {
	border-color: #fff;
	background-color: #fff;
	color: var(--color--button-primary);
}

.button.white:hover:not(:disabled) {
	border-color: #f6fafc;
	background-color: #f6fafc;
}

.button.white:active:not(:disabled) {
	border-color: #edf6fa;
	background-color: #edf6fa;
}

/* Transparent */
.button.transparent,
.button.transparent:hover:not(:disabled),
.button.transparent:active:not(:disabled) {
	background-color: transparent;
	border-color: transparent;
	color: var(--color--text);
}



.button>span {
	display: inline-block;
	font-size: 16px;
	font-weight: 500;
	vertical-align: middle;
}

.button.shadow {
	box-shadow: 0 16px 24px rgba(23, 192, 255, 0.2);
}

.button.shadow:hover:not(:disabled) {
	box-shadow: 0 6px 10px rgba(23, 192, 255, 0.2);
}

/* #endregion */

/* #region Carousel */
#carousel-custom-dots {
	position: absolute;
	bottom: 30px;
	/* right: 200px; */
	z-index: 1;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

#carousel-custom-dots>button.owl-dot {
	display: inline-block;
	height: 10px;
	width: 10px;
	margin: 0 10px 0 0;
	border-radius: 50%;
	background-color: #d0e2ea;
	vertical-align: middle;
	border: 0;
	padding: 0px;
}

#carousel-custom-dots>button.owl-dot.active {
	background-color: #17c0ff;
	cursor: default;
}

/* #endregion */



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

	#carousel-custom-dots {
		bottom: 10px;
	}

}

/* TODO remove if not used */
@media screen and (max-width: 980px) {
	.ps__rail-y {
		margin: 60px 10px 0;
	}
}

/* #region Text */
.h1 {
	font-weight: bold;
	font-size: 32px;
	line-height: 48px;
}

.h2 {
	font-weight: bold;
	font-size: 32px;
	line-height: 48px;
}

.h3 {
	font-weight: 500;
	/* 24px */
	font-size: 1.5rem;
	/* 32px */
	line-height: 2rem;
}

.h4 {
	font-weight: 500;
	/* 18px */
	font-size: 1.125rem;
	/* 24px */
	line-height: 1.5rem;
}

.h5 {
	font-weight: 500;
	/* 16px */
	font-size: 1rem;
	/* 24px */
	line-height: 1.5rem;
}


.p1 {
	font-weight: normal;
	/* 24px */
	font-size: 24px;
	/* 36px */
	line-height: 36px;
}

.p2 {
	font-weight: normal;
	/* 18px */
	font-size: 18px;
	/* 36px */
	line-height: 36px;
}

.p3 {
	font-weight: 300;
	/* 16px */
	font-size: 16px;
	/* 32px */
	line-height: 32px;
}
@media (min-width: 576px){
	.h1 {
		font-weight: bold;
		/* 64px */
		font-size: 4rem;
		/* 75px */
		line-height: 4.6875rem;
	}
	
	.h2 {
		font-weight: bold;
		/* 48px */
		font-size: 3rem;
		/* 60px */
		line-height: 3.75rem;
	}
}