/* Small devices (landscape phones, 576px and up) */

@media (orientation: portrait) {
    .contact_sign {
        width:94%;
    }
    .maxwidth.eduhome {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }
    .compuwindow {
        justify-content:flex-start !important;
    }
    .compuwindow img {
        width: 30px;
        height: 30px;
    }
    .compuwindow span {
       line-height:.9rem;
       margin-top:7px;
    }
    .card-group {
        display: flex;
        flex-flow: row wrap !important;
    }
    .top_steps .card {
        min-height: 80px;
        text-align: center;
        flex:1;
    }
    .bottom_steps .card {
        min-height: 80px;
        text-align: center;
        flex:1;
    }
    .bgview {
        margin-top:24vh !important;
    }
    .bgview1 {
        margin-top:29vh !important;
    }
    .bgview2 {
        margin-top:16vh !important;
    }
    .bgview3 {
        margin-top:34vh !important;
    }
    .center_titles {
        display:flex;
        flex-flow:column;
    }
      .highlight_items div:first-child {
        margin-right:0px;
        margin-bottom:20px;
    }
    .highlight_items div:last-child {
        margin-left:0px;
        margin-top:20px;
    }
    .edu_bubble {
        flex-flow:column;
        width:96%;
        background-color:#DA7E07;
        border-radius:14px;
        padding:40px;
        justify-content:center;
        align-items:space-around;
        margin:40px auto 0 auto;
    }
    .edu_bubble svg {
        display:flex;
        flex:1;
        font-size:3.6rem;
        font-weight:800;
        line-height:1.4;
        color:white;
        margin-right:0px;
        margin-bottom:20px;
    }
    .edu_bubble span {
        font-size:1.3rem;
        font-weight:400;
        color:white;
        padding:0;
        margin:0;
    }
    .edu-hero-center {
        width: 96%;
        }
    .edu-hero img {
        flex: none;
        position: relative;
        object-fit: cover;
        width: 100%;
        height: 250px;
    }
    .edu_title {
        font-size:1.3rem !important;
        color:#2c2c2c;
    }
    .q_span {
        line-height: 1.3;
        font-size:.8rem;
    }
    .edu-hero-center img {
        flex: none;
        position: relative;
        object-fit: cover;
        width: 100%;
        height: 250px;
    }
    .full-container {
        height: auto !important;
    }
    .quiz_title {
        margin-top: 24px;
        font-size: 1.1rem;
        white-space:normal;
    }
    .quiz_btn2 {
        display:flex;
        flex:1, 1, 100%;
        margin:20px auto 0 auto;
        color:rgb(77, 77, 77);
        font-size:1.2rem;
        font-weight:800;
        background-color:white;
        padding:4px 22px;
        border-radius:8px;
        overflow:hidden;
    }
    .quiz_right {
        display:none;
    }
    .quiz_text {
        margin-top: 78px;
        margin-left: 0px;
        font-family: 'Montserrat', sans-serif;
        font-weight: 500;
        color: white;
        font-size:.8rem;
        max-height:94px;
    }
    .quiz_container {
        margin-top: 270px;
        width: 96%;
        height: 100%;
        flex-flow: column;
        padding-bottom:20px;
    }
    .wcrp_monitor {
        background-image: url(../svg/education/monitor_desk-01.svg);
        background-repeat: no-repeat;
        background-position: bottom center;
        background-size: auto 100%;
        height: auto;
        padding-top: 80px;
        overflow: hidden;
    }
    .wcrp_screen {
        justify-content:flex-start;
        max-width: 100%;
        height: 512px;
        flex-flow:column;
    }
    .screen_left {
        min-height:25%;
        max-height: 25%;
        width: 100%;
        margin-left:0;
        margin-top:14px;
    }
    .screen_right {
        min-height:25%;
        max-height: 25%;
        width: 100%;
        margin-right:0;
    }
}
@media (min-width: 256px) { 
    .niveles_info {
        min-height:480px;
        flex-flow:column;
        flex-direction:column-reverse;
    }
    .n_images {
        min-height:480px;
    }
    .n_images img {
        width:100%;
        height:auto;
        float:left;
        margin-right:auto;
        margin-left:10px;
        margin-bottom:20px;
    }
    .niveles_left div:last-child {
        width:100%;
    }
}
@media (min-width: 576px) { 
    .niveles_info {
        min-height:460px;
        flex-flow:column;
        flex-direction:column-reverse;
    }
    .n_images {
        min-height:460px;
    }
    .n_images img {
        width:100%;
        height:auto;
        float:left;
        margin-right:auto;
        margin-left:10px;
        margin-bottom:20px;
    }
    .niveles_left div:last-child {
        width:100%;
    }
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 
    .niveles_info {
        flex-flow:row;
        min-height:370px;
    }
    .n_images {
        min-height:370px;
    }
    .n_images img {
        height:auto;
        height:330px;
        float:left;
        margin-right:auto;
        margin-left:10px;
        margin-bottom:20px;
    }

    .quiz_right {
        align-items: flex-end;
    }
    .quiz_btn2 {
        display:none;
    }
    .edu_landing_head {
        max-width:94%;
        align-self:center;
        justify-self:center;
        margin:0 auto;
    }
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
    .niveles_info {
        min-height:410px;
        flex-flow:row;
    }
    .n_images {
        min-height:380px;
    }
    .n_images img {
        height:auto;
        min-height:360px;
        float:left;
        margin-right:auto;
        margin-left:40px;
        margin-bottom:20px;
    }

    .quiz_right {
        display:flex;
        flex-grow:.5;
        align-items:flex-end;
        justify-content:center;
    }
}
/* Extra large devices (large desktops, 1200px and up) */
@media (max-width: 1100px) {
    .new_sect {
        border-radius: 14px;
        overflow: hidden;
        margin: 0 auto;
        max-width: 94%;
    }
    .edu_maxwidth {
        width: 94%;
        max-width: 94%;
        margin: 0 auto;
    }
    .maxwidth {
        width: 94%;
        max-width: 94%;
        margin: 0 auto;
    }
}
/* short height screens */
@media screen and ( min-height: 300px ) and (orientation: landscape) {
    .mod1_static_bg {
        background-image: url(../img/education/wcrp_module_scene_ideal_desktop.png), url(../svg/interactive/sustainable_community/bg_clouds.svg);
        background-repeat: no-repeat;
        background-position: left 12px;
        background-size: 100% auto;
        background-attachment: fixed;
        background-color: rgb(181, 221, 236);
        transition: all 600ms ease-in-out;
    }
    .mod4_static_bg {
        background-image: url(../img/education/module_4_bg_scene_short.png), url(../svg/interactive/sustainable_community/bg_clouds.svg);
        background-repeat: no-repeat;
        background-position: center -60px;
        background-size: 100% auto;
        background-attachment: fixed;
        background-color: rgb(181, 221, 236);
        transition: all 600ms ease-in-out;
    }
    .mod2_static_bg {
        background-image: url(../svg-bg/module2_scene-01.svg), url(../svg/interactive/sustainable_community/bg_clouds.svg);
        background-repeat: no-repeat;
        background-position: center 80px;
        background-size: 100% auto;
        background-attachment: fixed;
        background-color: rgb(181, 221, 236);
        transition: all 600ms ease-in-out;
    }
    .whiteboard {
        min-height: 36vh;
        max-width: 90%;
    }
    .bgview {
        margin-top:24vh !important;
    }
    .bgview1 {
        margin-top:29vh !important;
    }
    .bgview2 {
        margin-top:16vh !important;
    }
    .bgview3 {
        margin-top:34vh !important;
    }

}
@media screen and ( min-height: 760px ) and (orientation: landscape) {
    .mod1_static_bg {
        background-image: url(../img/education/wcrp_module_scene_ideal_desktop.png), url(../svg/interactive/sustainable_community/bg_clouds.svg);
        background-repeat: no-repeat;
        background-position: bottom center;
        background-size: 100% auto;
        background-attachment: fixed;
        background-color: rgb(181, 221, 236);
        transition: all 600ms ease-in-out;
    }
    .mod4_static_bg {
        background-image: url(../img/education/module_4_bg_scene_short.png), url(../svg/interactive/sustainable_community/bg_clouds.svg);
        background-repeat: no-repeat;
        background-position: bottom center;
        background-size: 100% auto;
        background-attachment: fixed;
        background-color: rgb(181, 221, 236);
        transition: all 600ms ease-in-out;
    }
    .mod2_static_bg {
        background-image: url(../svg-bg/module2_scene-01.svg), url(../svg/interactive/sustainable_community/bg_clouds.svg);
        background-repeat: no-repeat;
        background-position: bottom center;
        background-size: 100% auto;
        background-attachment: fixed;
        background-color: rgb(181, 221, 236);
        transition: all 600ms ease-in-out;
    }
    .whiteboard {
        min-height: 46vh;
        max-width: 90%;
    }
    .bgview {
        margin-top:46vh !important;
    }
    .bgview1 {
        margin-top:52vh !important;
    }
    .bgview2 {
        margin-top:22vh !important;
    }
    .bgview3 {
        margin-top:50vh !important;
    }

}