/* XX-SMALL MOBILE: LIGHT BLUE; ************************************/

@media only screen and (min-width: 20em) {



    * {
        box-sizing: border-box;
    }

    #home_page, #infographics_page, #illustration_page, #design_page, #electronic-arts_page, #about-me_page, #studio_page{
        /*border: 1px solid lightblue;*/
    }
        
    /************* wrappers *************/

    .full_wrapper{
        width: 300px; margin: 0 auto; display: block;
    }
    #jmf{width: 100%; background-color: #f9d96c; padding: 10px; float: left; margin-top: 2em;}
    #p2z{width: 100%; padding: 10px; float: left;}
    
    /*MINDNODE MAP*/
    .jmf_wrapper1{width: 100%; float: right; margin: 0 0 0 0; position: relative;}
       .jmf_box1{width: 100%;}
    
    /*HOW TO READ THE MAP*/
    .jmf_wrapper2{width: 100%; float: right; margin: 0 0 0 0; position: relative;}
        .jmf_box2{width: 100%;}
    
    /*SCHOOL MAP*/
    .jmf_wrapper3{width: 100%; float: left; margin: 0 0%;}
    
    /*DECISION MAP*/
    .jmf_wrapper4{width: 100%; float: right; margin: 0 0%;}
    
    /*INDICATORS*/
    .jmf_wrapper5{width: 100%; margin: 0 0%; float: left;}
        .jmf_box3{width: 100%; margin: 0 0%; float: left;}
        .jmf_box4{width: 100%; margin: 0 0%; float: left;}
    
    /*ALTERNATE UX*/
    .jmf_wrapper6{width: 100%; margin: 0 0%; float: left;}
        .jmf_box5{width: 100%; margin: 1em 0;float: left;}
    
    /*GROUP/ORGANIZATION PROFILE*/
    .jmf_wrapper7{width: 100%; margin: 0 0%; float: left;}
        .jmf_box6{width: 100%; margin: 0 0%; float: left;}
        .jmf_box7{width: 100%; margin: 0 0%; float: left; position: relative;}
        .jmf_box8{width: 100%; margin: 0 0%; float: left;}
        .jmf_box9{width: 100%; margin: 0 0%; float: left; position: relative;}

    /*DAC EXPLAINER*/
    .p2z_wrapper1{width: 100%; float: right; position: relative; margin: 0 0 0 0;}
        .p2z_box1{width: 100%; float: left; position: relative;}

    /*DAC MAP*/
    .p2z_wrapper2{width: 100%; float: left; margin: 1em 0 0 0;}
        .p2z_box2{width: 100%; float: left; position: relative;}
    
    /*STYLE GUIDES*/
    .p2z_wrapper3{width: 100%; float: left; margin: 0 0%;}
        .p2z_box3{width: 100%; float: left; margin: 0 0%;}
        .p2z_box4{width: 100%; float: left; margin: 0 0%;}
        .p2z_box5{width: 100%; float: left; margin: 0 0%;}
    
    /*WEBSITE*/
    .p2z_wrapper4{width: 100%; float: left; margin: 0 0%;}
        .p2z_box6{width: 100%; float: left; margin: 0 0%;}
        .p2z_box7{width: 100%; float: left; margin: 0 0%;}
    
    /*PRICES*/
    .p2z_wrapper5{width: 100%; float: left; margin: 0 0%;}
        .p2z_box8{width: 100%; float: left; margin: 0 0%;}
    
    /*POSTERS*/
    .p2z_wrapper6{width: 100%; float: left; margin: 0 0%;}
        .p2z_box9{width: 100%; float: left; margin: 0 0%;}
        .p2z_box10{width: 100%; float: left; margin: 0 0%;}
        .p2z_box11{width: 100%; float: left; margin: 0 0%;}
        .p2z_box12{width: 100%; float: left; margin: 0 0%;}

    /*PRODUCTS*/
    .p2z_wrapper7{width: 100%; float: right; margin: 0 0 0 0; position: relative;}
        .p2z_box13{width: 100%; float: left; margin: 0 0%;}
    
    /*COLLATERAL*/
    .p2z_wrapper8{width: 100%; float: left; margin: 0 0%;}    
        .p2z_box14{width: 100%; float: left; margin: 0 0%;}
        .p2z_box15{width: 100%; float: left; margin: 0 0%;}
        .p2z_box16{width: 100%; float: left; margin: 0 0%;}
        .p2z_box17{width: 100%; float: left; margin: 0 0%;}
        .p2z_box18{width: 100%; float: left; margin: 0 0%;}
        .p2z_box19{width: 100%; float: left; margin: 0 0%;}
        .p2z_box20{width: 100%; float: left; margin: 0 0%;}
    
    /*VIDEO*/
    .p2z_wrapper9{width: 100%; float: left; margin: 0 0;}  
        .p2z_box21{width: 100%; float: left; margin: 0 0;}

    /*LOGOTYPE*/  
    .p2z_wrapper10{width: 100%; float: left; margin: 0 0%;}    
        .p2z_box22{width: 100; float: left; margin: 0 0%;}

/************* artwork *************/
    #icon_expand1{
        width: 25%; 
        z-index: 1;
        position: absolute;
        right: 5px;
        top: 5px;
}

    #school-map{width: 100%;}
    
    #mindnode_map{width: 100%; float: right;}
    
    #instructions{width: 100%;}
    
    #decision-map{width: 100%; margin: 0 0;}
    
    #indicator1{width: 100%; margin: 0 0;}
    #indicator2{width: 100%; margin: 0 0;}
    
    #alternate_ux{width: 100%; margin: 0 0;}
    
    #cat-profile1{width: 100%; margin: 0 0;}
    #cat-profile2{width: 100%; margin: 0 0;}
    #org-profile1{width: 100%; margin: 0 0;}
    #org-profile2{width: 100%; margin: 0 0;}

    #dac_proto{width: 100%; margin: 0 0;} 

    #guides{width: 100%;}
    
    #dac_map{width: 100%; border: 1px solid #dedce1;}    
    
    #choice{width: 100%;}
    #sea-rise{width: 100%;}
    #gulf-stream{width: 100%; border: 1px solid #dedce1;}
    #protect-mom{width: 100%;}

    #homepage{width: 100%; border: 1px solid #dedce1;}
    #overview{width: 100%; border: 1px solid #dedce1;}

    #products{width: 100%;}
    #prices{width: 100%;}

    #collateral{width: 100%;}
    #reports{width: 65%; margin: 0 22.50%;}
    #papers{width: 90%}

    #logotype{width: 100%;}
    
    #intro_video{width: 100%;}
}


    
/** X-SMALL: SMARTPHONES LANDSCAPE: LIME *************************************/

@media only screen and (min-width: 30em) {

    #home_page{
        /*background-color: lime;*/
    }
    .full_wrapper{
        width: 90%; padding: 0 5%; display: block;
    }
     #intro{width: 80%; margin: 0 10%;}
    
    #jmf{width: 100%; background-color: #f9d96c; padding: 50px 10px 50px 10px; float: left;}
    #p2z{width: 100%;padding: 50px 10px 0 10px; float: left;}

    /*MINDNODE MAP*/
    .jmf_wrapper1{width: 100%; float: right; margin: 0 0px 0px 0px; position: relative;}
    /*MAP GUIDE*/
    .jmf_wrapper2{width: 100%; float: right; margin: 0 0px 0px 0px; position: relative;}
    /*SCHOOL MAP*/
    .jmf_wrapper3{width: 90%; float: left; margin: 0 5%;}
    /*DECISION MAP*/
    .jmf_wrapper4{width: 90%; float: left; margin: 0 5%;}
    /*INDICATORS*/
    .jmf_wrapper5{width: 100%; margin: 0 0%; float: left;}
        .jmf_box3{width: 70%; margin: 0 15%; float: left;}
        .jmf_box4{width: 70%; margin: 0 15%; float: left;}
    /*ALTERNATE UX*/
    .jmf_wrapper6{width: 90%; margin: 0 5%; float: left;}
    /*GROUP/ORGANIZATION PROFILE*/
    .jmf_wrapper7{width: 100%; margin: 0 0; float: left;}
    .container_profile{width: 100%; margin: 0 0%; float: left;}
        .jmf_box6{width: 80%; margin: 0 10%; float: left;}
        .jmf_box7{width: 80%; margin: 0 10%; float: right; position: relative;}
        .jmf_box8{width: 80%; margin: 0 10%; float: left;}
        .jmf_box9{width: 80%; margin: 0 10%; float: right; position: relative;}
    /*DAC EXPLAINER*/
    .p2z_wrapper1{width: 90%; float: right; position: relative; margin: 0 5% 0 5%;}
    /*DAC-MAP*/    
    .p2z_wrapper2{width: 100%; float: left; margin: 0 0;}
    /*STYLE GUIDES*/
    .p2z_wrapper3{width: 80%; float: left; margin: 0 10%;}
        .p2z_box3{width: 90%; float: left; margin: 0 5%;}
        .p2z_box4{width: 90%; float: left; margin: 0 5%;}
        .p2z_box5{width: 90%; float: left; margin: 0 5%;}    
    /*WEBSITE*/
    .p2z_wrapper4{width: 80%; float: left; margin: 0 10%;}
        .p2z_box6{width: 100%; float: left; margin: 0 0%;}
        .p2z_box7{width: 100%; float: left; margin: 0 0%;}
    /*PRICES*/
    .p2z_wrapper5{width: 90%; float: left; margin: 0 5%;}
    /*POSTERS*/
    .p2z_wrapper6{width: 90%; float: left; margin: 0 5%;}
        .p2z_box9{width: 49%; float: left; margin: 0 .5%;}
        .p2z_box10{width: 49%; float: right; margin: 0 .5%;}
        .p2z_box11{width: 49%; float: left; margin: 0 .5%;}
        .p2z_box12{width: 49%; float: right; margin: 0 .5%;}
    /*PRODUCTS*/
    .p2z_wrapper7{width: 90%; float: right; margin: 0 5% 0 5%;position: relative;}
    /*COLLATERAL*/
    .p2z_wrapper8{width: 90%; float: left; margin: 0 5% 50px 5%;}    
        .p2z_box14{width: 49%; float: left; margin: 0 .5%; height: 250px;}
        .p2z_box15{width: 49%; float: left; margin: 0 .5%; height: 250px;}
        .p2z_box16{width: 49%; float: left; margin: 0 .5%; height: 250px;}
        .p2z_box17{width: 49%; float: left; margin: 0 .5%; height: 250px;}
        .p2z_box18{width: 49%; float: left; margin: 0 .5%; height: 250px;}
        .p2z_box19{width: 49%; float: left; margin: 0 .5%; height: 250px;}
        .p2z_box20{width: 80%; float: left; margin: 0 10%; height: 150px;}
    /*VIDEO*/
    .p2z_wrapper9{width: 90%; float: left; margin: 0 5%;}  
    /*LOGOTYPE*/  
    .p2z_wrapper10{width: 90%; float: left; margin: 0 5%;}
}

/** SMALL: TABLETS PORTRAIT: PINK; *************************************/

@media only screen and (min-width: 48em) {

    #home_page{
     /*background-color: pink;*/
    }

    .full_wrapper{
        width: 600px; margin: 0 auto; display: block;
    }
     #intro{width: 60%; margin: 0 20%;}
    
    #jmf{width: 100%; background-color: #f9d96c; float: left;}
    #p2z{width: 100%; padding: 50px; float: left;}

    /*MINDNODE MAP*/
    .jmf_wrapper1{width: 50%; float: right; margin: 0 -75px 10px 10px; position: relative;}
    /*MAP GUIDE*/
    .jmf_wrapper2{width: 50%; float: right; margin: 0 -75px 10px 10px; position: relative;}
    /*SCHOOL MAP*/
    .jmf_wrapper3{width: 80%; float: left; margin: 0 10%;}
    /*DECISION MAP*/
    .jmf_wrapper4{width: 80%; float: left; margin: 0 10%;}
    /*INDICATORS*/
    .jmf_wrapper5{width: 80%; margin: 0 10%; float: left;}
    /*ALTERNATE UX*/
    .jmf_wrapper6{width: 80%; margin: 0 10%; float: left;}
    /*GROUP/ORGANIZATION PROFILE*/
    .jmf_wrapper7{width: 90%; margin: 0 5%; float: left;}
    /*DAC EXPLAINER*/
    .p2z_wrapper1{width: 50%; float: right; position: relative; margin: 0 -75px 0 20px;}   
    /*DAC-MAP*/    
    .p2z_wrapper2{width: 100%; float: left; margin: 0 0;}
    /*STYLE GUIDES*/
    .p2z_wrapper3{width: 100%; float: left; margin: 0 0%;}
        .p2z_box3{width: 32%; float: left; margin: 0 .5%;}
        .p2z_box4{width: 32%; float: left; margin: 0 .5%;}
        .p2z_box5{width: 32%; float: left; margin: 0 .5%;}       
    /*WEBSITE*/
    .p2z_wrapper4{width: 80%; float: left; margin: 0 10%;}
    /*PRICES*/
    .p2z_wrapper5{width: 90%; float: left; margin: 0 5%;}
    /*POSTERS*/
    .p2z_wrapper6{width: 90%; float: left; margin: 0 5%;}
    /*PRODUCTS*/
    .p2z_wrapper7{width: 60%; float: right; margin: 0 -100px 0 10px ;position: relative;}
    /*COLLATERAL*/
    .p2z_wrapper8{width: 100%; float: left; margin: 0 0%;}    
        .p2z_box14{width: 24%; float: left; margin: 0 .5%; height: 240px;}
        .p2z_box15{width: 24%; float: left; margin: 0 .5%; height: 240px;}
        .p2z_box16{width: 24%; float: left; margin: 0 .5%; height: 240px;}
        .p2z_box17{width: 24%; float: left; margin: 0 .5%; height: 240px;}
        .p2z_box18{width: 24%; float: left; margin: 0 .5%; height: 240px;}
        .p2z_box19{width: 24%; float: left; margin: 0 .5%; height: 240px;}
        .p2z_box20{width: 49%; float: left; margin: 0 .5%; height: 240px;}
    /*LOGOTYPE*/  
    .p2z_wrapper10{width: 90%; float: left; margin: 0 5%;}
}

/** MEDIUM: TABLET LANDSCAPE / DESKTOP: YELLOW; *************************************/

@media only screen and (min-width: 64em) {

    #home_page{
        /*background-color: yellow*/
    }
     #intro{width: 50%; margin: 0 25%;}

    .full_wrapper{width: 800px; margin: 0 auto; display: block;
    }
    /*MINDNODE MAP*/
    .jmf_wrapper1{width: 60%; float: right; margin: 0 -175px 10px 10px; position: relative;}
    /*MAP GUIDE*/
    .jmf_wrapper2{width: 60%; float: right; margin: 0 -175px 10px 10px; position: relative;}
    /*SCHOOL MAP*/
    .jmf_wrapper3{width: 80%; float: left; margin: 0 10%;}
    /*DECISION MAP*/
    .jmf_wrapper4{width: 80%; float: left; margin: 0 10%;}
    /*INDICATORS*/
    .jmf_wrapper5{width: 70%; margin: 0 15%; float: left;}
        .jmf_box3{width: 49%; margin: 0 .5%; float: left;}
        .jmf_box4{width: 49%; margin: 0 .5%; float: left;}    
    /*ALTERNATE UX*/
    .jmf_wrapper6{width: 60%; margin: 0 20%; float: left;}
    /*GROUP/ORGANIZATION PROFILE*/
    .container_profile{width: 80%; margin: 0 10%; float: left;}
    .jmf_wrapper7{width: 90%; margin: 0 5%; float: left;}    
        .jmf_box6{width: 49%; margin: 0 .5%; float: left;}
        .jmf_box7{width: 49%; margin: 0 .5%; float: right; position: relative;}
        .jmf_box8{width: 49%; margin: 0 .5%; float: left;}
        .jmf_box9{width: 49%; margin: 0 .5%; float: right; position: relative;}
    /*DAC EXPLAINER*/
    .p2z_wrapper1{width: 40%; float: right; position: relative; margin: 0 -100px 0 20px;}   
    /*DAC-MAP*/
    .p2z_wrapper2{width: 100%; float: left; margin: 0 0%;}
    /*STYLE GUIDES*/
    .p2z_wrapper3{width: 80%; float: left; margin: 0 10%;}
    /*WEBSITE*/
    .p2z_wrapper4{width: 70%; float: left; margin: 0 15%;}
        .p2z_box6{width: 49%; float: left; margin: 0 .5%;}
        .p2z_box7{width: 49%; float: left; margin: 0 .5%;}
    /*PRICES*/
    .p2z_wrapper5{width: 60%; float: left; margin: 0 20%;}
    /*POSTERS*/
    .p2z_wrapper6{width: 70%; float: left; margin: 0 15%;}    
        .p2z_box9{width: 24%; float: left; margin: 0 .5%;}
        .p2z_box10{width: 24%; float: right; margin: 0 .5%;}
        .p2z_box11{width: 24%; float: left; margin: 0 .5%;}
        .p2z_box12{width: 24%; float: right; margin: 0 .5%;}
    /*PRODUCTS*/
    .p2z_wrapper7{width: 50%; float: right;margin: 0 -80px 10px 10px;position: relative;}
    /*COLLATERAL*/
    .p2z_wrapper8{width: 70%; float: left; margin: 0 15%;}    
        .p2z_box14{height: auto;}
        .p2z_box15{height: auto;}
        .p2z_box16{height: auto;}
        .p2z_box17{height: auto;}
        .p2z_box18{height: auto;}
        .p2z_box19{height: auto;}
        .p2z_box20{height: auto;}
    /*VIDEO*/
    .p2z_wrapper9{width: 70%; float: left; margin: 0 15%;}  
    /*LOGOTYPE*/
    .p2z_wrapper10{width: 70%; float: left; margin: 0 15%;}    
}

/* LARGE: DESKTOP: ORANGE; ************************************/

@media only screen and (min-width: 85.375em) {

    #home_page{
        /*background-color: orange;*/
    }
    #jmf{width: 100%; background-color: #f9d96c; padding: 100px 0 50px 0; float: left;}
    #p2z{width: 100%;padding: 50px;float: left;}
    .full_wrapper{width: 800px; margin: 0 auto; display: block;}
    /*MINDNODE MAP*/
    .jmf_wrapper1{width: 70%; float: right; margin: 0 -175px 10px 10px; position: relative;}
    /*MAP GUIDE*/
    .jmf_wrapper2{width: 70%; float: right; margin: 0 -175px 10px 10px; position: relative;}
    /*SCHOOL MAP*/
    .jmf_wrapper3{width: 60%; float: left; margin: 0 20%;}
    /*DECISION MAP*/
    .jmf_wrapper4{width: 60%; float: left; margin: 0 20%;}
    /*INDICATORS*/
    .jmf_wrapper5{width: 60%; margin: 0 20%; float: left;}
        .jmf_box3{width: 49%; margin: 0 .5%; float: left;}
        .jmf_box4{width: 49%; margin: 0 .5%; float: left;}    
    /*ALTERNATE UX*/
    .jmf_wrapper6{width: 50%; margin: 0 25%; float: left;}
    /*GROUP/ORGANIZATION PROFILE*/
    .jmf_wrapper7{width: 60%; margin: 0 20%; float: left;}
        .jmf_box6{width: 49%; margin: 0 .5%; float: left;}
        .jmf_box7{width: 49%; margin: 0 .5%; float: left; position: relative;}
        .jmf_box8{width: 49%; margin: 0 .5%; float: left;}
        .jmf_box9{width: 49%; margin: 0 .5%; float: left; position: relative;}    
        /*DAC EXPLAINER*/
    .p2z_wrapper1{width: 50%; float: right;position: relative;margin: 0 -175px 10px 10px;}
    /*DAC-MAP*/
    .p2z_wrapper2{width: 80%; float: left; margin: 0 10%;}
    /*STYLE GUIDES*/
    .p2z_wrapper3{width: 70%; float: left; margin: 0 15%;}
        .p2z_box3{width: 32%; float: left; margin: 0 .5%;}
        .p2z_box4{width: 32%; float: left; margin: 0 .5%;}
        .p2z_box5{width: 32%; float: left; margin: 0 .5%;}         
    /*WEBSITE*/
    .p2z_wrapper4{width: 70%; float: left; margin: 0 15%;}
        .p2z_box6{width: 49%; float: left; margin: 0 .5%;}
        .p2z_box7{width: 49%; float: left; margin: 0 .5%;}    
    /*PRICES*/
    .p2z_wrapper5{width: 50%; float: left; margin: 0 25%;}
     /*POSTERS*/
    .p2z_wrapper6{width: 70%; float: left; margin: 0 15%;}  
        .p2z_box9{width: 24%; float: left; margin: 0 .5%;}
        .p2z_box10{width: 24%; float: right; margin: 0 .5%;}
        .p2z_box11{width: 24%; float: left; margin: 0 .5%;}
        .p2z_box12{width: 24%; float: right; margin: 0 .5%;}

    /*PRODUCTS*/
    .p2z_wrapper7{width: 60%; float: right;margin: 0 -60px 10px 10px;position: relative;}
    /*VIDEO*/
    .p2z_wrapper9{width: 50%; float: left; margin: 0 25%;}  
    /*LOGOTYPE*/  
    .p2z_wrapper10{width: 50%; float: left; margin: 0 25%;}    
}

/* X-LARGE: DESKTOP: CYAN; ************************************/

@media only screen and (min-width: 120em) {

    #home_page{
        /*background-color: cyan;*/
    }
    .full_wrapper{width: 800px; margin: 0 auto;display: block;}

    /*MINDNODE MAP*/
    .jmf_wrapper1{width: 70%; float: right; margin: 0 -250px 10px 10px; position: relative;}
    /*MAP GUIDE*/
    .jmf_wrapper2{width: 70%; float: right; margin: 0 -250px 10px 10px; position: relative;}
    /*SCHOOL MAP*/
    .jmf_wrapper3{width: 50%; float: left; margin: 0 25%;}
    /*DECISION MAP*/
    .jmf_wrapper4{width: 60%; float: left; margin: 0 20%;}
    /*INDICATORS*/
    .jmf_wrapper5{width: 60%; margin: 0 20%; float: left;}
    /*ALTERNATE UX*/
    .jmf_wrapper6{width: 50%; margin: 0 25%; float: left;}
    /*GROUP/ORGANIZATION PROFILE*/
    .jmf_wrapper7{width: 60%; margin: 0 20%; float: left;}
        .jmf_box6{width: 49%; margin: 0 .5%; float: left;}
        .jmf_box7{width: 49%; margin: 0 .5%; float: left; position: relative;}
        .jmf_box8{width: 49%; margin: 0 .5%; float: left;}
        .jmf_box9{width: 49%; margin: 0 .5%; float: left; position: relative;}    
    /*DAC EXPLAINER*/
    .p2z_wrapper1{width: 50%; float: right;position: relative;margin: 0 -175px 10px 10px;}
    /*DAC-MAP*/
    .p2z_wrapper2{width: 80%; float: left; margin: 0 10%;}
    /*STYLE GUIDES*/
    .p2z_wrapper3{width: 70%; float: left; margin: 0 15%;}    
    /*WEBSITE*/
    .p2z_wrapper4{width: 70%; float: left; margin: 0 15%;}
        .p2z_box6{width: 49%; float: left; margin: 0 .5%;}
        .p2z_box7{width: 49%; float: left; margin: 0 .5%;}    
    /*PRICES*/
    .p2z_wrapper5{width: 50%; float: left; margin: 0 25%;}
     /*POSTERS*/
    .p2z_wrapper6{width: 80%; float: left; margin: 0 10%;}  
        .p2z_box9{width: 24%; float: left; margin: 0 .5%;}
        .p2z_box10{width: 24%; float: right; margin: 0 .5%;}
        .p2z_box11{width: 24%; float: left; margin: 0 .5%;}
        .p2z_box12{width: 24%; float: right; margin: 0 .5%;}
    /*PRODUCTS*/
    .p2z_wrapper7{width: 60%; float: right;margin: 0 -200px 10px 10px;position: relative;}
    /*VIDEO*/
    .p2z_wrapper9{width: 40%; float: left; margin: 0 30%;}  
    /*LOGOTYPE*/  
    .p2z_wrapper10{width: 50%; float: left; margin: 0 25%;}    
  
}

/* XX-LARGE: DESKTOP: RED; ************************************/

@media only screen and (min-width: 160em) {

    #home_page{
        background-color: red;
    }
}