@font-face {
	font-family: 'Open Sans';
	src: url('../fonts/OpenSansRegular.eot');
	src: url('../fonts/OpenSansRegular.eot') format('embedded-opentype'),
	url('../fonts/OpenSansRegular.woff2') format('woff2'),
	url('../fonts/OpenSansRegular.woff') format('woff'),
	url('../fonts/OpenSansRegular.ttf') format('truetype'),
	url('../fonts/OpenSansRegular.svg#OpenSansRegular') format('svg');
}
@font-face {
	font-family: 'Open Sans Extra Bold';
	src: url('../fonts/OpenSansExtraBold.eot');
	src: url('../fonts/OpenSansExtraBold.eot') format('embedded-opentype'),
	url('../fonts/OpenSansExtraBold.woff2') format('woff2'),
	url('../fonts/OpenSansExtraBold.woff') format('woff'),
	url('../fonts/OpenSansExtraBold.ttf') format('truetype'),
	url('../fonts/OpenSansExtraBold.svg#OpenSansExtraBold') format('svg');
}
@font-face {
	font-family: 'Open Sans Bold';
	src: url('../fonts/OpenSansBold.eot');
	src: url('../fonts/OpenSansBold.eot') format('embedded-opentype'),
	url('../fonts/OpenSansBold.woff2') format('woff2'),
	url('../fonts/OpenSansBold.woff') format('woff'),
	url('../fonts/OpenSansBold.ttf') format('truetype'),
	url('../fonts/OpenSansBold.svg#OpenSansBold') format('svg');
}

html {
	overflow-y: scroll;
}
.font-weight-0,
.font-weight-0::before,
.font-weight-0::after,
input[type="text"],
html,
body {
	font-family: 'Open Sans', sans-serif;
	font-weight: normal !important;
}
.font-weight-bold,
.font-weight-bold::before,
.font-weight-bold::after,
.font-weight-3,
.font-weight-3::before,
.font-weight-3::after {
	font-family: 'Open Sans Bold', sans-serif;
	font-weight: normal !important;
}
.font-weight-extrabold,
.font-weight-extrabold::before,
.font-weight-extrabold::after,
.font-weight-4,
.font-weight-4::before,
.font-weight-4::after,
.font-weight-5,
.font-weight-5::before,
.font-weight-5::after {
	font-family: 'Open Sans Extra Bold', sans-serif;
	font-weight: normal !important;
}
@media (min-width: 1200px) {
	html,
	body {
		font-size: 1.6vw;
	}
}
@media (max-width: 1199px), (orientation: portrait) {
	html,
	body {
		font-size: 1.8vw;
	}
}

body.debug .bg-white {
	background-color: gray !important;
}

img {
	max-width: 100%;
	max-height: 100%;
	margin: auto;
}

a {
	color: inherit !important;
	text-decoration: none !important;
}
p {
	margin-bottom: 0.5rem;
}
@media (max-width: 1199px) {
}

.bounds {
	width: 85%;
	margin: auto;
}
@media (max-width: 1200px), (orientation: portrait) {
	.bounds {
		width: 100%;
	}
}
/*d-none used in js, so it must rule*/
.d-none {
	display: none !important;
}

.btn {
	cursor: pointer;
}

.border-1 {
	border-width: 0.15rem !important;
}

/*body.debug .ok {*/
/*	background-color: green !important;*/
/*}*/
/*body.debug .ko {*/
/*	background-color: grey !important;*/
/*}*/
.bg-hover-blue:hover,
.bg-blue {
	background-color: #253B7F !important;
}
.bg-hover-green:hover,
.bg-green {
	background-color: #0DA2A8 !important;
}
.bg-hover-white:hover,
.bg-white {
	background-color: #fff !important;
}
.bg-hover-black:hover,
.bg-black {
	background-color: #17092B !important;
}
.bg-gray {
	background-color: #B1B1B1 !important;
}
.bg-lightblue {
	background-color: #14ABBD !important;
}

.color-hover-blue:hover,
.color-blue {
	color: #253B7F !important;
	fill: #253B7F !important;
}
.color-hover-lightblue:hover,
.color-lightblue {
	color: #0a5cb9 !important;
	fill: #0a5cb9 !important;
}
div.exer.match .to-sort div[data-field="item"]:hover,
div.exer:not(.match) div[data-field="col"]::before,
div.exer.match div[data-field="item"]::before,
.color-hover-green:hover,
.color-green {
	color: #0DA2A8 !important;
	fill: #0DA2A8 !important;
}
.color-hover-white:hover,
.color-white {
	color: #fff !important;
	fill: #fff !important;
}
.color-hover-black:hover,
.color-black {
	color: #17092B !important;
	fill: #17092B !important;
}

.word-scrambled .word .letter,
.border-blue {
	border-color: #253B7F !important;
}
.border-green {
	border-color: #0DA2A8 !important;
}
.border-black {
	border-color: #17092B !important;
}
.border-white {
	border-color: #fff !important;
}

/*HOME*/
.logo,
.helps {
	position: absolute;
	top: 1rem;
}
.logo {
	left: 0;
	width: 5rem;
	height: 4rem;
	background-image: url("../images/logo.png");
	background-position: top left;
}
.helps {
	right: 0;
}

/*SUB-HOME*/
@media (orientation: landscape) {
	.sub-home .header.nav {
		min-height: 13vh;
	}
	.sub-home .big-btns-container {
		min-height: 87vh;
	}
}
/*big btn divided in 2 pieces (games)*/
.half-btns-container div:last-child {
	top: 0;
	opacity: 0;
}
.half-btns-container:hover div:last-child {
	opacity: 1;
}
.half-btns-container a  {
	opacity: .4;
}
.half-btns-container a:hover  {
	opacity: 1;
}
html.touch .exers-list-container.invisible {
	visibility: visible !important;
}
.exers-list a {
	min-width: 2.1rem;
}

/*SUB-HOME SMALL BUTTONS*/




footer.breadcrumbs,
footer.nav {
	bottom: 0;
}
footer.nav {
	left: 0;
}
@media (orientation: landscape) {
	footer.breadcrumbs {
		padding-bottom: 4vh !important;
	}
	.resource-container {
		min-height: 100vh;
		padding-bottom: 3.1rem;
	}
}


/*MODAL*/
.modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1050;
	display: none;
	overflow: hidden;
	outline: 0;
	/*background-color: rgba(0,0,0,0.4);*/
}
.fade {
	opacity: 0;
	-webkit-transition: opacity .15s linear;
	transition: opacity .15s linear;
}
.fade.show {
	opacity: 1;
}
.modal-open .modal {
	overflow-x: hidden;
	overflow-y: auto;
}
.modal-dialog {
	position: relative;
	width: auto;
	margin: .5rem;
	pointer-events: none;
}
.modal-dialog {
	max-width: 500px;
	margin: 1.75rem auto;
}
.modal-dialog-centered {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	min-height: -webkit-calc(100% - (.5rem * 2));
	min-height: calc(100% - (.5rem * 2));
}
.modal-dialog-centered {
	min-height: -webkit-calc(100% - (1.75rem * 2));
	min-height: calc(100% - (1.75rem * 2));
}
.modal-content {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;
	width: 100%;
	pointer-events: auto;
	background-clip: padding-box;
	outline: 0;

	cursor: auto;
}
.modal-xl .modal-content {
	padding-bottom: 0;
}
.modal-backdrop {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 3;
	background-color: #000;
}
.modal-backdrop.show {
	opacity: .5 !important;
}
.modal-header .close {
	position: absolute;
	right: 0;
	top: 0;
	-webkit-transform: translate(100%, -100%);
	transform: translate(100%, -100%);
	-webkit-transition: .2s;
	transition: .2s;
	-webkit-transform-origin: center center;
	transform-origin: center center;
	text-decoration: none;
	font-weight: 300;
	text-shadow: none;
	opacity: 1;
	outline: 0;
	line-height: 0.5;
}
.modal-header .close:hover {
	/*-webkit-transform: translate(100%, -100%) scale(1.1);*/
	/*transform: translate(100%, -100%) scale(1.1);*/
}
.close {
	float: right;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
	color: #000;
	text-shadow: 0 1px 0 #fff;
	opacity: .5;
}
button.close {
	padding: 0;
	background-color: transparent;
	border: 0;
	-webkit-appearance: none;
}
.modal .close {
	padding: 0.5rem;
}
.close:not(:disabled):not(.disabled) {
	cursor: pointer;
}
@media (min-width: 576px) {
	.modal-dialog {
		max-width: 500px;
		margin: 1.75rem auto;
	}
	.modal-dialog-centered {
		min-height: -webkit-calc(100% - (1.75rem * 2));
		min-height: calc(100% - (1.75rem * 2));
	}
	.modal-sm {
		max-width: 300px;
	}
}
@media (min-width: 992px) {
	.modal-lg {
		max-width: 800px;
	}
}
@media (min-width: 992px) {
	.modal-xl {
		width: 70vw;
		/*max-width: 1200px;*/
		max-width: none;
	}
}

#modal-help b {
	letter-spacing: 1px;
}

#modal-result .msg-ko {
	color: red;
}

#modal-result.ko .msg-ok,
#modal-result:not(.ko) .msg-ko {
	display: none;
}
/*video boxes*/
div[data-id="box3"] a {
	min-height: 6.1rem;
}
/*audio boxes*/
div[data-id="box4"] a {
	line-height: 0.2 !important;
}

.resource-container.bg-white {
	/*background-color: grey !important;*/
}


/*GESTIONE ECCEZIONI*/
div[data-field="exer"][data-id="??"] {

}


/*AUDIO*/
.jp-audio .jp-interface {
	height: auto;
}
.jp-audio .jp-type-single .jp-progress,
.jp-volume-controls,
.jp-volume-bar,
.jp-volume-controls button {
	position: relative;
	left: 0;
	top: 0;
	width: auto;
}
.jp-current-time,
.jp-duration {
	font-style: normal;
}
.jp-play,
.jp-volume-controls button {
	width: 2rem;
	height: 2rem;
}
button.jp-stop,
button.jp-play {
	overflow: hidden;
	text-indent: -9999px;
	border: none;
	cursor: pointer;
}
.jp-play,
.jp-play:focus {
	background-image: url("../images/play.svg");
	background-size: contain;
	background-position: center;
}
.jp-state-playing .jp-play,
.jp-state-playing .jp-play:focus{
	background-image: url("../images/pause.svg");
	background-size: contain;
	background-position: center;
}
.jp-stop,
.jp-stop:focus {
	width: 1.5rem;
	height: 1.5rem;
	margin-top: 0;
	margin-left: 0.5rem;
	background-image: url("../images/stop.svg");
	background-size: 70%;
	background-position: center;
}
.jp-seek-bar,
.jp-play-bar,
.jp-volume-bar,
.jp-volume-bar-value {
	background-image: none;
}
.jp-audio .jp-progress {
	 height: 0.3rem;
	overflow: visible;
 }
.jp-play-bar {
	overflow: visible !important;
}
.jp-play-bar::after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	width: 1rem;
	height: 1rem;
	-webkit-transform: translate(50%, -50%);
	transform: translate(50%, -50%);
	background-color: inherit;
	border-radius: 100%;
}
.jp-volume-bar,
.jp-volume-bar-value {
	height: 0.25rem;
}
.jp-volume-controls button.jp-mute {
	background-image: url("../images/volume.svg");
	background-size: contain;
	background-position: left;
}
.jp-volume-controls button.jp-mute:hover,
.jp-state-muted .jp-volume-controls button.jp-mute {
	background-image: url("../images/volume-muted.svg");
	background-size: contain;
	background-position: left;
}

video {
	cursor: pointer;
}