#zone-enseignants .header-mobile,
#zone-enseignants #portails { display: none; }

/* --- DESKTOP FIXES --- */
@media only screen and (min-width: 1220px) {
    .left.qm-activities-activity-image img {
        width: 168px;
        height: auto;
    }
}


/* --- CHANGES TO < 1220px --- */
@media only screen and (max-width: 1219px) {
    /*#zone-enseignants div { box-sizing: border-box; }*/

    #zone-enseignants #content div.innerwrap {
        background-image: none;
        width: 100%;
        min-width: 0;
    }

    #zone-enseignants #ze-contentwrap {
        padding: 0 20px;
    }

    #zone-enseignants #ze-menu {
        margin-top: 50px;
        background: url(/_assets/3e0249a37e7802c1c36db9f33f8055e6/Images/Opc/ze/fond-wider-crop.jpg) 50% 0 no-repeat;
        box-shadow: 0 0 12px 0 rgba(0,0,0,.25);
        max-height: 75px;
        position: relative;
    }

    #zone-enseignants #content div#ze-menu h1,
    #zone-enseignants.detail #content div#ze-menu a.bouton_accueil {
        position: absolute;
        top: -50px;
        left: 0;
    }

    #zone-enseignants #content div#ze-menu div#ze-topmenu {
        margin-top: -50px;
        width: 50px;
    }

    #zone-enseignants #content div#ze-menu #ze-topmenu-bottom {
        font-size: 18px;
    }

    #zone-enseignants #content #ze-top {
        background: url(/_assets/3e0249a37e7802c1c36db9f33f8055e6/Images/Opc/ze/fond-wider-crop.jpg) 100% -77px no-repeat;
    }

    #zone-enseignants .qm-activities-featured-slider {
        left: auto;
        width: auto;
        margin-left: 20px;
        margin-right: 20px;
    }

    #zone-enseignants .qm-activities-featured-slider-pagination {
        top: 4px;
    }

    #zone-enseignants .qm-activities-featured-panel {
        width: calc(100vw - 250px);
    }

    #zone-enseignants .qm-activities-featured-image {
        width: 50%;
    }

    #zone-enseignants .qm-activities-featured-image a {
        display: block;
    }

    #zone-enseignants .qm-activities-featured-image img {
        display: block;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    #zone-enseignants .qm-activities-featured-desc {
        width: 50%;
        margin-left: 0;
        padding-left: 16px;
    }


    #zone-enseignants #ze-content {
        width: 100%;
        padding: 0;
        margin: 0 auto 60px;
        max-width: 960px;
    }

    #zone-enseignants {
        content: '';
        display: block;
        clear: both;
    }

    #zone-enseignants .threecolumns {
        display: flex;
        align-items: stretch;
    }

    #zone-enseignants .threecolumns:after {
        content: '';
        display: block;
        clear: both;
    }

    #zone-enseignants #content .threecolumns .col1,
    #zone-enseignants #content .threecolumns .col3 {
        float: none;
        margin: 0;
        width: 30%;
        height: auto;
        min-height: 0;
    }

    #zone-enseignants #content .threecolumns .col2 {
        float: none;
        margin: 0;
        width: 40%;
        height: auto;
        min-height: 0;
        padding: 0 20px;
        background: none;
    }

    #zone-enseignants .threecolumns .col2 > div {
        background: url(/_assets/3e0249a37e7802c1c36db9f33f8055e6/Images/Opc/ze/boite-accueil-borderless.jpg) 50% 50% no-repeat;
        background-size: cover;
        padding: 10px;
        border: 1px solid #fff;
        border-left-color: #fff !important; /* have to override another !important... */
        outline: 3px solid #1C6A92;
    }

    #zone-enseignants div.imghr {
        width: auto;
        margin: 0 20px 20px;
    }

    #zone-enseignants #footer { padding: 0 20px; }


    /* --- RECHERCHE --- */
    #zone-enseignants.recherche #ze-menu,
    #zone-enseignants.recherche #content #ze-top,
    #zone-enseignants.detail #ze-menu {
        background-image: url(/_assets/3e0249a37e7802c1c36db9f33f8055e6/Images/Opc/ze/fond-detail-crop.jpg);
    }

    #zone-enseignants.recherche .qm-activities-formwrap {
        width: 100%;
        padding: 20px;
        margin: 0 auto;
        max-width: 960px;
    }

    #zone-enseignants .left50 {
        width: 50%;
        box-sizing: border-box;
        padding-right: 20px;
    }

    #zone-enseignants .left50 + .left50 {
        padding-right: 0;
        padding-left: 20px;
    }


    /* --- LISTE --- */
    #zone-enseignants.liste #content div.innerwrap {
        background: none;
    }

    #zone-enseignants.liste #content #ze-top {
        background: none;
        height: auto;
    }
    #zone-enseignants.liste #ze-menu {
        background-image: url(/_assets/3e0249a37e7802c1c36db9f33f8055e6/Images/Opc/ze/fond-detail-crop.jpg);
    }

    #zone-enseignants.liste #ze-top .tx-qm-activities {
        padding-top: 0;
    }
    #zone-enseignants.liste .qm-activities-formwrap.filterForm {
        width: auto;
        margin: 0 auto;
    }

    #zone-enseignants.liste .sortmenu {
        padding-top: 0.5em;
        background: url(/_assets/3e0249a37e7802c1c36db9f33f8055e6/Images/Opc/ze/fond-board-2.jpg);
        background-size: cover;
        border-radius: 0 0 12px 12px;
        box-shadow: 0 2px 8px 0 rgba(0,0,0,.5);
        position: relative;
    }
    #zone-enseignants.liste .sortmenu ul,
    #zone-enseignants.liste .qm-activities-filter {
        max-width: 960px;
        margin: 0 auto;
    }
    #zone-enseignants .sortmenu ul:after {
        content: '';
        display: block;
        clear: both;
    }
    #zone-enseignants.liste .qm-activities-filter {
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
        width: auto;
        height: auto;
        padding: 8px 16px;
        background: #0D93B7;
        line-height: 24px;
    }
    #zone-enseignants.liste .qm-activities-filter span.filter_by {
        margin-left: 0;
        padding-right: 12px;
        display: block;
        width: 100%;
    }
    #zone-enseignants.liste .qm-activities-filter label {
        flex: 0 0 auto;
        margin: 0 8px 0 0;
    }
    #zone-enseignants.liste .qm-activities-filter select {
        flex: 1 1 0px;
        width: auto;
        max-width: 20%;
        margin-top: 0;
        margin-right: 20px;
    }

    #zone-enseignants.liste #ze-content {
        padding: 12px;
    }
    #zone-enseignants .tx-qm-activities h3 {
        margin: 10px 0 20px;
    }
    #zone-enseignants .qm-activities-listtop {
        margin-top: 6px;
    }
    #zone-enseignants div.qm-activities-activity {
        width: auto;
        margin-bottom: 16px;
    }
    #zone-enseignants .qm-activities-activity-image {
        width: 20%;
    }
    #zone-enseignants .qm-activities-activity-image img {
        display: block;
        width: 100%;
        height: auto;
    }
    #zone-enseignants .qm-activities-activity-desc {
        width: 35%;
    }
    #zone-enseignants .qm-activities-activity-info {
        width: 45%;
    }
    #zone-enseignants .qm-activities-activity-info p {
        margin-bottom: 8px;
    }


    /* --- DETAIL / SINGLE VIEW --- */
    #zone-enseignants.detail #content #ze-top {
        background: url(/_assets/3e0249a37e7802c1c36db9f33f8055e6/Images/Opc/ze/fond-detail-crop2.jpg);
        background-position: 100% 50%;
        background-size: cover;
        height: auto;
        min-height: 0;
        margin-bottom: 32px;
        padding: 0 16px 16px;
        border-radius: 0 0 12px 12px;
        box-shadow: 0 2px 8px 0 rgba(0,0,0,.5);
    }
    #zone-enseignants.detail #content #ze-top:after {
        content: '';
        display: block;
        clear: both;
    }

    #zone-enseignants.detail .qm-activities-featured-image,
    #zone-enseignants.detail .qm-activities-featured-desc {
        width: 40%;
    }
    #zone-enseignants.detail .qm-activities-wrapdetail:after {
        content: '';
        display: block;
        clear: both;
    }

    #zone-enseignants.detail .qm-activities-wrapdetail .left70 {
        width: calc(100% - 308px);
        margin: 0;
        padding-right: 48px;
    }
    #zone-enseignants.detail .qm-activities-wrapdetail .left30 {
        width: 308px;
    }

    #zone-enseignants.detail .qm-activities-wrapdetail iframe {
        max-width: 100%;
        /* height = (max-width - right col - padding) x 16:9 ratio */
        height: calc((960px - 308px  48px) * .5625);
    }
}

/* --- TABLET --- */
@media only screen and (max-width: 1023px) {
    #zone-enseignants {
        min-width: 0;
    }

    /*
    #zone-enseignants #header { display: none; }
    #zone-enseignants .header-mobile { display: block; overflow: hidden; }
    */
    #zone-enseignants #portails { display: block; }

    #zone-enseignants div.innerwrap {
        min-width: 0;
        width: auto;
    }

    #zone-enseignants #content #ze-top {
        background-size: 150%;
        background-position: 50% 100%;
    }

    #zone-enseignants #content div#ze-menu #ze-topmenu-bottom {
        font-size: 16px;
        letter-spacing: -.5px;
    }

    #zone-enseignants .qm-activities-featured-panel {
        width: calc(100vw - 80px);
    }

    #zone-enseignants .qm-activities-featured-desc .bold {
        font-size: 12px;
    }

    #zone-enseignants #ze-content {
        padding: 20px 20px 0;
    }


    /* --- RECHERCHE --- */
    #zone-enseignants.recherche #content #ze-top {
        background-image: url(/_assets/3e0249a37e7802c1c36db9f33f8055e6/Images/Opc/ze/fond-board-2.jpg);
    }

    #zone-enseignants.recherche #ze-content {
        margin-bottom: 32px;
    }


    /* --- LISTE --- */
    #zone-enseignants.liste .sortmenu { border-radius: 0; }
    #zone-enseignants ul.f3-widget-paginator li a {
        padding: 0 6px;
    }
    #zone-enseignants ul.f3-widget-paginator li.current {
        padding: 0 8px;
    }



    /* --- DETAIL / SINGLE VIEW --- */
    #zone-enseignants.detail #ze-content {
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }

    #zone-enseignants.detail .qm-activities-wrapdetail iframe {
        /* height = (viewport width - sides - right col - padding) x 16:9 ratio */
        height: calc((100vw - 40px - 308px - 48px) * .5625);
    }

    #zone-enseignants .qm-activities-activity-detail h2 {
        line-height: 1.3;
    }

    #zone-enseignants .tx-qm-activities .qm-activities-activity-detail a {
        word-break: break-word;
    }
}


/* --- SMALL DEVICES --- */
@media only screen and (max-width: 920px) {
    /*--- MENU ---*/
    #zone-enseignants #content div#ze-menu div#ze-topmenu {
        position: absolute;
        top: 72px;
        right: 24px;
        width: 32px;
        height: 32px;
        background: url(/_assets/3e0249a37e7802c1c36db9f33f8055e6/Images/Opc/ze/menu-icon.svg) 50% 50% no-repeat;
        background-size: contain;
        opacity: .8;
    }

    #zone-enseignants #content div#ze-menu #ze-topmenu-bottom ul {
        position: absolute;
        top: 75px;
        right: 0;
        z-index: 10;
        width: 280px;
        background: url(/_assets/3e0249a37e7802c1c36db9f33f8055e6/Images/Opc/ze/fond-wider-crop.jpg) 0 -80px no-repeat;
        line-height: 54px;
        -webkit-box-shadow: 0 4px 12px -4px rgba(0,0,0,.5);
        -moz-box-shadow: 0 4px 12px -4px rgba(0,0,0,.5);
        box-shadow: 0 4px 12px -4px rgba(0,0,0,.5);
    }

    #zone-enseignants #content div#ze-menu #ze-topmenu-bottom ul {
        max-height: 0;
        overflow: hidden;
        transition: max-height .5s ease-in-out;
    }

    #zone-enseignants #content div#ze-menu #ze-topmenu-bottom.ze-topmenu-mobile-active ul {
        max-height: 200px;
    }

    #zone-enseignants #content div#ze-menu #ze-topmenu-bottom ul li {
        float: none;
        display: block;
        margin-left: 3px;
        margin-right: 3px;
        border-left: 1px solid rgba(255,255,255,.8);
        border-right: 1px solid rgba(255,255,255,.8);
    }

    #zone-enseignants #content div#ze-menu #ze-topmenu-bottom ul li:first-child {
        margin-top: 3px;
        border-top: 1px solid rgba(255,255,255,.8);
    }

    #zone-enseignants #content div#ze-menu #ze-topmenu-bottom ul li:last-child {
        margin-bottom: 3px;
        border-bottom: 1px solid rgba(255,255,255,.8);
    }

    #zone-enseignants #content div#ze-menu #ze-topmenu-bottom ul li.current {
        background-position: 10px 42px;
    }

    #zone-enseignants #content div#ze-menu #ze-topmenu-bottom ul li a {
        border-right: 0;
    }

    #zone-enseignants #content div#ze-menu #ze-topmenu-bottom ul li.ze-recherche.current {
        background-size: 84% 8px;
    }


    /*--- SLIDER ---*/
    #zone-enseignants #content #ze-top {
        padding-bottom: 50px;
        background: url(/_assets/3e0249a37e7802c1c36db9f33f8055e6/Images/Opc/ze/fond-wider-chalkboard.jpg) 100% 0 no-repeat;
        background-size: cover;
    }

    #zone-enseignants .qm-activities-featured-slider-playpause {
        left: 0;
        bottom: -36px;
    }

    #zone-enseignants #ze_pause {
        left: 30px;
    }

    #zone-enseignants .qm-activities-featured-slider-pagination {
        top: auto;
        bottom: -30px;
    }

    #zone-enseignants #content #ze-top,
    #zone-enseignants .qm-activities-featured-slider,
    #zone-enseignants .qm-activities-featured-panel {
        height: auto;
    }

    #zone-enseignants .qm-activities-featured-panel {
        position: relative;
        float: none;
    }

    #zone-enseignants .qm-activities-featured-title span.header {
        text-shadow: 0 0 20px rgba(0,0,0,.25);
    }

    #zone-enseignants .qm-activities-featured-image,
    #zone-enseignants .qm-activities-featured-image img {
        width: 100%;
    }

    #zone-enseignants .qm-activities-featured-image img {
        margin-bottom: 1px;
    }

    #zone-enseignants .qm-activities-featured-desc {
        position: absolute;
        left: 4px;
        right: 4px;
        bottom: 4px;
        width: auto;
        padding-right: 16px;
        padding-bottom: 8px;
        background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#bf000000',GradientType=0 ); /* IE6-9 */
    }

    #zone-enseignants .qm-activities-featured-desc .bold {
        display: none;
    }


    /* --- RECHERCHE --- */
    #zone-enseignants.recherche #content #ze-top {
        padding-bottom: 0;
    }

    #zone-enseignants.recherche .qm-activities-formwrap:after {
        content: '';
        display: block;
        clear: both;
    }

    #zone-enseignants.recherche button.search {
        margin-top: -20px;
    }


    /* --- LISTE --- */
    #zone-enseignants.liste #content #ze-top {
        padding-bottom: 0;
    }

    #zone-enseignants.liste .qm-activities-filter select:last-child {
        margin-right: 0;
    }

    #zone-enseignants .qm-activities-activity-image {
        width: 40%;
    }
    #zone-enseignants .qm-activities-activity-desc {
        width: 60%;
    }
    #zone-enseignants .qm-activities-activity-info {
        width: 100%;
        border: 0;
        margin-top: 16px;
        border-top: 1px solid #a9cadc;
        padding: 16px 0 0;
    }
    #zone-enseignants .qm-activities-activity,
    #zone-enseignants .qm-activities-activity-image,
    #zone-enseignants .qm-activities-activity-desc,
    #zone-enseignants .qm-activities-activity-info {
        height: auto;
        min-height: 0;
    }


    /* --- DETAIL / SINGLE VIEW --- */
    #zone-enseignants.detail #content #ze-top {
        background-image: url(/_assets/3e0249a37e7802c1c36db9f33f8055e6/Images/Opc/ze/fond-board-2.jpg);
    }

    #zone-enseignants.detail .qm-activities-featured-image,
    #zone-enseignants.detail .qm-activities-featured-desc {
        width: 50%;
    }
    #zone-enseignants.detail .qm-activities-featured-desc {
        background: transparent;
        position: static;
    }
    #zone-enseignants.detail .qm-activities-featured-desc .bold {
        display: block;
    }

    #zone-enseignants.detail {}
    #zone-enseignants.detail {}
    #zone-enseignants.detail {}
}


@media only screen and (max-width: 767px) {
    #zone-enseignants #ze-content {
        padding-left: 0;
        padding-right: 0;
    }

    #zone-enseignants .threecolumns {
        display: block;
    }

    #zone-enseignants #content .threecolumns .col1,
    #zone-enseignants #content .threecolumns .col2,
    #zone-enseignants #content .threecolumns .col3 {
        width: 100%;
        margin-bottom: 20px;
    }

    #zone-enseignants #content .threecolumns .col2 {
        padding: 0;
    }


    /* --- RECHERCHE --- */
    #zone-enseignants .qm-activities-formwrap .reset {
        padding-left: 0;
        clear: both;
        margin-top: -1em;
        margin-bottom: 1em;
    }

    #zone-enseignants #ze-top .left50 {
        width: 100%;
        padding: 0;
    }

    #zone-enseignants .qm-activities-fieldwrap {
        height: auto;
    }
    #zone-enseignants .qm-activities-fieldwrap:after {
        content: '';
        display: block;
        clear: both;
    }

    #zone-enseignants .qm-activities-fieldwrap-longer label {
        width: 138px;
    }

    #zone-enseignants.recherche .office_only:after {
        content: '';
        display: block;
        clear: both;
    }

    #zone-enseignants.recherche button.search {
        margin-top: 16px;
        margin-right: 0;
    }


    /* --- LISTE --- */
    #zone-enseignants ul.f3-widget-paginator { margin-left: 16px; }

    #zone-enseignants.liste .qm-activities-filter {
        display: block;
    }
    #zone-enseignants.liste .qm-activities-filter:after {
        content: '';
        display: block;
        clear: both;
    }
    #zone-enseignants.liste .qm-activities-filter label {
        float: left;
        clear: left;
    }
    #zone-enseignants.liste .qm-activities-filter select {
        margin-right: 0;
        width: calc(100% - 108px);
        max-width: 308px;
        float: left;
    }

    #zone-enseignants .qm-activities-activity-image,
    #zone-enseignants .qm-activities-activity-desc {
        width: 100%;
    }

    #zone-enseignants .qm-activities-activity-desc {
        padding-left: 0;
        padding-right: 0;
    }
    #zone-enseignants .qm-activities-filter {
        display: block;
    }
    #zone-enseignants .qm-activities-filter:after {
        content: '';
        display: block;
        clear: both;
    }
    #zone-enseignants .qm-activities-filter label {
        width: 100px;
        clear: left;
    }
    #zone-enseignants .qm-activities-filter select {
        width: 240px;
        max-width: calc(100% - 108px);
        margin-right: 0;
    }


    /* --- DETAIL / SINGLE VIEW --- */
    #zone-enseignants.detail .qm-activities-featured-image,
    #zone-enseignants.detail .qm-activities-featured-desc {
        width: 100%;
    }
    #zone-enseignants.detail .qm-activities-featured-desc { padding: 0 2px; }

    #zone-enseignants.detail .qm-activities-wrapdetail .left70,
    #zone-enseignants.detail .qm-activities-wrapdetail .left30 {
        width: 100%;
    }
    #zone-enseignants.detail .qm-activities-wrapdetail .left70 { padding-right: 0; }

    #zone-enseignants.detail .qm-activities-wrapdetail iframe {
        /* height = viewport width - sides x 16:9 ratio */
        height: calc((100vw - 40px) * .5625);
    }

    #zone-enseignants.detail .qm-activities-wrapdetail .left30 a.btnlien {
        margin: 0 auto;
    }

    #zone-enseignants.detail .qm-activities-wrapdetail .related {
        border-bottom: 0;
    }
    #zone-enseignants.detail .qm-activities-wrapdetail .related:after {
        content: '';
        display: block;
        clear: both;
    }

    #zone-enseignants.detail .qm-activities-wrapdetail .related img {
        margin: 0;
        width: 33.3%;
        height: auto;
        box-sizing: border-box;
    }
    #zone-enseignants.detail .qm-activities-wrapdetail .related .fixedwidth {
        width: 66.6%;
        padding-left: 20px;
    }
    #zone-enseignants.detail .qm-activities-wrapdetail .related h4 {
        margin-top: 0;
    }
}

@media only screen and (max-width: 600px) {
    /* --- RECHERCHE --- */
    #zone-enseignants.recherche .qm-activities-fieldwrap {
        display: flex;
    }

    #zone-enseignants.recherche .qm-activities-formwrap label {
        width: 84px;
        flex: 0 0 auto;
    }

    #zone-enseignants.recherche .qm-activities-formwrap input[type="text"],
    #zone-enseignants.recherche .qm-activities-formwrap select {
        width: calc(100% - 84px);
        flex: 1 1 0px;
    }
}

@media only screen and (max-width: 480px) {
    #zone-enseignants #content .qm-activities-featured-title span.header {
        margin-bottom: 6px;
        width: 96px;
        background-position: 0px 20px;
        font-size: 14px;
        line-height: 24px;
    }

    #zone-enseignants #content h2.qm-activities-featured-title a {
        font-size: 18px;
        margin-top: 0;
        margin-bottom: 8px;
    }

    #zone-enseignants .qm-activities-featured-desc p {
        font-size: 12px;
        line-height: 14px;
    }

    #zone-enseignants #content div#ze-menu {
        margin-top: 24px;
    }

    #zone-enseignants #content div#ze-menu h1,
    #zone-enseignants.detail #content div#ze-menu a.bouton_accueil {
        top: -23px;
        left: 6px;
    }

    #zone-enseignants #content div#ze-menu a.bouton_accueil {
        width: 200px;
        height: 96px;
        background-size: contain;
        background-repeat: no-repeat;
    }


    /* --- LISTE --- */
    #zone-enseignants.liste div.sortmenu {
        font-size: 16px;
        line-height: 44px;
    }


    /* --- DETAIL / SINGLE VIEW --- */
    #zone-enseignants.detail .qm-activities-wrapdetail .related img,
    #zone-enseignants.detail .qm-activities-wrapdetail .related .fixedwidth {
        width: 100%;
    }
    #zone-enseignants.detail .qm-activities-wrapdetail .related .fixedwidth{
        padding: 8px 0 0;
    }

    #zone-enseignants.detail .qm-activities-wrapdetail .left30 a.btnlien{
        background-position: 50% 0;
        width: 280px;
        background-size: 280px;
        height: 60px;
        line-height: 60px;
    }
}