/*---------------------------------------== SMARTPHONES ==-----------------------------------------*/
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 320px) and (max-device-width : 740px) and (orientation : landscape) {
	/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 420px) and (orientation : portrait){

}
/*---------------------------------------== IPADS ==-----------------------------------------*/

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
	/* Styles */

}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
	/* Styles */
}

/*---------------------------------------== LAPTOP ==-----------------------------------------*/

/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
	/* Styles */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
	/* Styles */
}

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { 
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { 
	#menu-mobile, #menu-mobile-bg{
		display: none !important;
	}

	.container-sponsor-fad .container-sponsors{
		margin: 0;
	}
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 

}


@media (max-width: 767px) { 

	#container-bar.change{
		left: 75% !important;
	}

	#menu-mobile {
		right: 15% !important;
	}

	.capitolo-titolo{
		width: 100%;
		display: inline-block;
		padding: 3rem 0 1rem;
	}

	.capitolo-quiz {
		width: 100%;
		display: inherit;
		vertical-align: middle;
		text-align: left;
		padding: 1rem 0;
	}

	#container-testo, #container-sponsor{
		padding: 2.5rem;
	}

	.domanda-soddifazione, .soddisfazione-risposte{
		display: inline-block;
		width: 100%
	}

	.domanda-soddifazione{
		margin-bottom: 1.5rem;
	}

}

@media (max-width: 767px) and (orientation : portrait) {
	#visualizzatore{
		width: 100%;
	}

	#container-zoom{
		width: 100%;
		height: 100%;
		padding: 0;
		padding-bottom: calc(20% + 7.5rem);
	}

	#indice-container {
		position: absolute;
		left: 0;
		bottom: 20%;
		height: 7.5rem;
		width: 100%;
	}

	#container-slides{
		width: 100%;
		left: 0;
		right: 0;
		top: initial;
		bottom: 0;
		height: 20%;
	}

	#slides{
		position: relative;
		width: 100%;
		height: 100%;
		padding: 2.5rem;
		display: inline-flex;
		margin-bottom: 0;
		overflow-y: hidden;
		overflow-x: auto;
	}

	#container-materiale{
		padding: 2.5rem;
	}

	.img-slide{
		width: initial;
		max-width: initial;
		height: 100%;
		float: left;
		max-height: 100%;
	}

	.img-slide + .img-slide{
		margin: 0;
		margin-left: 1rem;
	}

	#container-close{
		top: 1.5rem;
		right: 1.5rem;
	}
}

@media (max-width: 767px) and (orientation : landscape) {
	#visualizzatore{
		width: 95%;
	}

	#container-slides, #indice-container{
		width: 30%;
	}

	#container-zoom{
		padding-left: 30%;
	}

	#indice-container{
		height: 5rem;
	}

	#wrapper {
		padding: calc((5rem - 2.5rem) / 2) 5%;
	}

	#indice{
		width: initial;
		padding: 0 2rem;
		line-height: 2.5rem;
		border-radius: 2.5rem;
		height: 2.5rem;
		font-size: 1.3rem;
	}

	#container-frecce{
		height: 2.5rem;
		width: 6rem;
	}

	.frecce {
		height: 2.5rem;
		width: 2.5rem;
		border-radius: 2.5rem;
		padding: .3rem;
	}
}

@media (max-width: 991px) {
	#footer>div{
		text-align: center;
	}

	#menu-mobile-bg{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 75;
		background: rgba(0,0,0,0.5);
		display: none;
	}

	.menu-desktop, #menu-fad-container{
		display: none;
	}

	#menu-top{
		height: 7rem;
		position: fixed;
		left: 0;
		right: 0;
		background: #FFF;
		z-index: 50;
		border-bottom: 1px solid #A80F11;
	}

	#container-bar {
		position: absolute;
		display: block;
		left: 25px;
		top: 25px;
		width: 20px;
		height: 16px;
		z-index: 100;

		-webkit-transition: left 500ms linear, background-color .35s,-webkit-transform .175s cubic-bezier(.215,.61,.355,1),opacity .175s cubic-bezier(.215,.61,.355,1);
		transition: left 500ms linear, background-color .35s, transform .175s cubic-bezier(.215,.61,.355,1),opacity .175s cubic-bezier(.215,.61,.355,1);
	}

	#accedi-menu-mobile {
		position: absolute;
		display: inline-block;
		right: 25px;
		top: 10px;
		width: 20px;
		height: 16px;
		z-index: 50;

		background: #A80F11;
		font-size: 1.5rem;
		height: 5rem;
		width: 19rem;
		padding: 0;
		text-align: center;
		line-height: 5rem;
		border-radius: 4rem;
		color: #FFF;
		text-transform: uppercase;
		font-weight: 700;
	}

	.bar1, .bar2, .bar3 {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 3px;
		background: #A80F11;
		-webkit-transition: background-color .35s,-webkit-transform .175s cubic-bezier(.215,.61,.355,1),opacity .175s cubic-bezier(.215,.61,.355,1);
		transition: background-color .35s, transform .175s cubic-bezier(.215,.61,.355,1),opacity .175s cubic-bezier(.215,.61,.355,1);
		-webkit-transform: translateY(0) translateZ(0);
		transform: translateY(0) translateZ(0);
	}

	.bar1 {
		top: 0;
	}

	.bar2 {
		top: 6;
	}

	.bar3 {
		top: 12;
	}

	#container-bar.change{
		left: 45%;
	}

	.change .bar1 {
		-webkit-transform: translateY(6px) rotate(45deg);
		transform: translateY(6px) rotate(45deg);
		background: #bebbbb;
	}

	.change .bar2 {
		opacity: 0;
	}

	.change .bar3 {
		-webkit-transform: translateY(-6px) rotate(-45deg);
		transform: translateY(-6px) rotate(-45deg);
		background: #bebbbb;
	}

	#menu-mobile {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 50%;
		display: none;
		z-index: 99;
	}

	#menu-mobile>#wrapper-mobile {
		background: #FFF;
		position: relative;
		width: 100%;
		height: 100%;
		padding: 0 15px;
		/*padding-top: 8rem;
		padding-bottom: 7rem;*/
		overflow-y: auto;
	}

	#menu-mobile>#wrapper-mobile.fad{
		background: #A80F11;
	}

	#menu-mobile>#wrapper-mobile ul {
		background: #FFF;
		list-style: none;
		display: inline-block;
		position: relative;
		top: 0;
		vertical-align: top;
		padding: 2.5rem 0;
	}

	#menu-mobile>#wrapper-mobile #fad-mobile-container ul {
		background: #A80F11;
	}

	#menu-mobile>#wrapper-mobile ul li {
		position: relative;
		display: inline-block;
		width: 100%;
		font-size: 1.4rem;
		font-weight: 300;
	}

	#menu-mobile>#wrapper-mobile ul li a {
		color: #A80F11;
		font-weight: 700;
		text-transform: uppercase;
		text-decoration: none;
		position: relative;
		display: inline-block;
		width: 100%;
		padding: 15px 10px;
		font-size: 1em;
	}

	#menu-mobile>#wrapper-mobile ul li a span{
		padding-bottom: .5rem;
	}

	#menu-mobile>#wrapper-mobile ul li#esci{
		margin-top: 3rem;
	}

	#menu-mobile>#wrapper-mobile #fad-mobile-container ul li a {
		color: #FFF;
	}

	#menu-mobile>#wrapper-mobile ul li a.selected span{
		border-bottom: 2px solid #A80F11;
	}

	#menu-mobile>#wrapper-mobile #fad-mobile-container ul li a.selected span{
		border-bottom: 2px solid #FFF;
	}

	#container-testo h2{
		font-size: 4rem;
	}

	#fad-mobile-container, #menu-mobile-container{
		padding: 15px;
	}

	#menu-mobile-container{
		background: #FFF;
	}

	#scroll-button.show{
		opacity: 1;
	}

	#container-modulo{
		padding: 2.5rem 0;
	}
}

@media (min-width: 768px) and (max-width: 991px) { 
	.domanda-soddifazione{
		width: 70%;
	}

	.soddisfazione-risposte{
		width: 30%;
	}

	#visualizzatore{
		width: 100%;
	}

	#container-close{
		right: 2.5rem;
	}

	#container-materiale{
		padding: 2.5rem;
	}

	#indice-container{
		width: 100%;
	}

	#container-testo{
		padding: 4rem 5rem;
	}
}

@media (min-width: 768px) and (max-width: 991px) and (orientation : portrait) { 

	#container-zoom {
		width: 100%;
		height: 100%;
		padding: 0;
		padding-bottom: calc(20% + 7.5rem);
	}

	#indice-container {
		position: absolute;
		left: 0;
		bottom: 20%;
		height: 7.5rem;
		width: 100%;
	}

	#container-slides {
		width: 100%;
		left: 0;
		right: 0;
		top: initial;
		bottom: 0;
		height: 20%;
	}

	#container-close {
		top: 1.5rem;
		right: 1.5rem;
	}	

	#slides {
		position: relative;
		width: 100%;
		height: 100%;
		padding: 2.5rem;
		display: inline-flex;
		margin-bottom: 0;
		overflow-y: hidden;
		overflow-x: auto;
	}

	.img-slide {
		width: initial;
		max-width: initial;
		height: 100%;
		float: left;
		max-height: 100%;
	}

	.img-slide + .img-slide {
		margin: 0;
		margin-left: 1rem;
	}
}

@media (min-width: 992px) and (max-width: 1199px) { 
	#container-sponsor{
		padding: 4rem 2rem;
	}

	#container-testo{
		padding: 4rem 7.5rem;
	}

	#menu-top, .menu{
		height: 8rem;
	}

	.menu-desktop ul li{
		margin-right: 2%;
	}

	#accedi-menu {
		font-size: 1.5rem;
		height: 5rem;
		width: 17rem;
		line-height: 5rem;
		border-radius: 4rem;
	}

	#menu-fad .menu-desktop ul li:not(.li-button) a{
		font-size: 1.2rem;
	}

	#visualizzatore{
		width: 100%;
	}

	#container-close {
		top: 1.5rem;
		right: 1.5rem;
	}

	/*#container-slides{
		width: 25%;
	}

	#container-zoom{
		padding-left: 25%;
	}

	#indice-container{
		width: 25%;
	}*/
}

@media (min-width: 1200px) { 

}