/*---------------------------------------== 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 (max-device-width : 1024px) and (orientation : landscape) {
    #volume-container{
        display: none !important;
    }

    #bar-container {
        width: calc(100% - 3.5rem) !important;
    }
}

/* iPads (portrait) ----------- */
@media only screen and (max-device-width : 1024px) and (orientation : portrait) {
    /* Styles */
    #volume-container{
        display: none !important;
    }

    #bar-container {
        width: calc(100% - 3.5rem) !important;
    }
}

/*---------------------------------------== 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) { 
    .modal-sm {
        width: 400px;
    }
}

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

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

    #container-info{
        display: table;
    }

    #container-info > div{
        display: table-cell;
        vertical-align: top;
        float: inherit;
    }
}

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

}


@media (max-width: 767px) { 

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

    .arrow {
        width: 18px;
        height: 40px;
    }

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

    .wrapper-topic{
        display: block;
    }

    .wrapper-topic > div{
        display: inline-block;
    }

    .wrapper-topic.has_comments .container-pagine{
        width: 100%;
        margin: 1.5rem 0;
    }

    .container-titolo{
        width: 100%;
        margin: 1.5rem 0;
    }

    .wrapper-topic.has_comments .container-statistiche, .wrapper-topic:not(.has_comments) .container-statistiche{
        width: auto;
    }

    .container-info{
        width: auto;
    }

}

@media (max-width: 767px) and (orientation : portrait) {

    #video-controls{
        left: 0;
        width: 100%;
        bottom: calc(20% + 7.5rem);
    }

    #video-embed{
        transform: none;
        -webkit-transform: none;
        top: 10rem;
    }

    #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: -webkit-inline-box;
        display: -ms-inline-flexbox;
        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), (max-height: 500px) {

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

    #video-controls{
        height: 5rem;
        width: 70%;
        left: 30%;
    }

    #video-embed{
        top: 40%;
    }

    #status-container, #volume-container, #status, #volume{
        height: 2.5rem;
        width: 2.5rem;
    }

    #bar-container {
        height: 2.5rem;
        width: calc(100% - 5rem);
        padding: 0 1.5rem;
    }

    #slider{
        left: 1.5rem;
        right: 1.5rem;
    }

    #tempo-video{
        font-size: 1.2rem;
    }

    #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) {
    #spacer-menu{
        height: 7rem;
        display: block;
        width: 100%;
    }

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

    #header{
        position: fixed;
        left: 0;
        right: 0;
        width: 100%;
        background: #FFF;
        z-index: 50;
    }

    #menu-top{
        position: relative;
        height: 7rem;
        border-bottom: 1px solid #666;
        border-bottom: 1px solid var(--main-color);
    }

    #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);
        -webkit-transition: left 500ms linear, background-color .35s, opacity .175s cubic-bezier(.215,.61,.355,1), -webkit-transform .175s cubic-bezier(.215,.61,.355,1);
        transition: left 500ms linear, background-color .35s, opacity .175s cubic-bezier(.215,.61,.355,1), -webkit-transform .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);
        transition: left 500ms linear, background-color .35s, transform .175s cubic-bezier(.215,.61,.355,1),opacity .175s cubic-bezier(.215,.61,.355,1), -webkit-transform .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: #666;
        background: var(--main-color);
        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: #666;
        background: var(--main-color);
        -webkit-transition: background-color .35s,-webkit-transform .175s cubic-bezier(.215,.61,.355,1),opacity .175s cubic-bezier(.215,.61,.355,1);
        -webkit-transition: background-color .35s, opacity .175s cubic-bezier(.215,.61,.355,1), -webkit-transform .175s cubic-bezier(.215,.61,.355,1);
        transition: background-color .35s, opacity .175s cubic-bezier(.215,.61,.355,1), -webkit-transform .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);
        transition: background-color .35s, transform .175s cubic-bezier(.215,.61,.355,1),opacity .175s cubic-bezier(.215,.61,.355,1), -webkit-transform .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: #666;
        background: var(--main-color);
    }

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

    #menu-mobile>#wrapper-mobile #fad-mobile-container ul {
        background: #666;
        background: var(--main-color);
    }

    #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: #666;
        color: var(--main-color);
        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 #666;
        border-bottom: 2px solid var(--main-color);
    }

    #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) and  (min-height: 501px){ 
    .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;
    }

    .container-sponsor{
        margin: 0;
    }
}

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

    #video-embed{
        transform: none;
        -webkit-transform: none;
        top: 10rem;
    }

    #video-controls{
        left: 0;
        width: 100%;
        bottom: calc(20% + 7.5rem);
    }

    .capitolo-titolo{
        width: 65%;
    }

    .capitolo-quiz{
        width: 35%;
    }

    #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: -webkit-inline-box;
        display: -ms-inline-flexbox;
        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;
    }

    .container-titolo{
        width: 35%;
    }

    .wrapper-topic.has_comments .container-pagine{
        width: 25%;
    }

    .wrapper-topic:not(.has_comments) .container-statistiche{
        width: 45%;
    }
}

@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%;
		font-size: 1.2rem !important;
    }
	
	.menu-desktop ul li:not(.li-button):not(.fadclosed) a {
    color: #666;
    color: var(--main-color);
    text-transform: uppercase;
    font-size: 1.2rem;
    text-decoration: none;
    padding: 0 .2rem .75rem .2rem;
    font-weight: 700;
    position: relative;
    display: inline-block;
	}

    #accedi-menu {
        font-size: 1.2rem !important;
        height: 5rem;
        width: 15rem;
        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) { 

}