/* 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;

	/* 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: #D0E2EA;

	--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: #929292;
	--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: 16px;
	line-height: 24px;
	font-weight: 300;
}

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;
}

[class^="container"] {
	padding-left: 24px;
	padding-right: 24px;
}

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

	.container,
	.container-lg {
		max-width: 1240px;

	}
}

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

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	padding: 0 16px;
	border: 1px solid;
	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,
.button.button_primary:hover {
	border-color: var(--color--button-primary-hover-border);
	background-color: var(--color--button-primary-hover);
	color: var(--color--button-primary-text);
}

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

.button.blue:focus,
.button.button_primary:focus {
	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,
.button.button_secondary:hover {
	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,
.button.button_secondary:active {
	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,
.button.button_secondary:focus {
	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>svg path,
.button.button_secondary:hover>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 {
	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 {
	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 {
	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,
.button.bordered-white:active {
	color: var(--color--button-primary);
}

.button.bordered-white:hover {
	border-color: #fff;
	background-color: #fff;
}

.button.bordered-white:active {
	border-color: #edf6fa;
	background-color: #edf6fa;
}

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


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

.button.white:hover {
	border-color: #f6fafc;
	background-color: #f6fafc;
}

.button.white:active {
	border-color: #edf6fa;
	background-color: #edf6fa;
}

/* Transparent */
.button.transparent,
.button.transparent:hover,
.button.transparent:active {
	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 {
	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 */

/* #region  */
/* #endregion */

/* #region  */
/* #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;
	}
}