/* 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{
        width: 100%;
    }

    /************* text *************/
    p {
        /*border: 1px solid red;*/
        font-family:'Roboto', sans-serif;
        font-weight: 300;
        font-size: 1em;
        line-height: 1.45em;
        color: #676767;
    }
     .home-intro{
        /*border: 1px solid red;*/
        font-size: 1.25em;
        line-height: 1.45em;
        color: #676767;
    }
    .editors-note{
        font-family:'Roboto', sans-serif;
        font-size: .9em;
        font-weight: 300;
        color: #c33c46;
        line-height: 1.5em;
        text-align: center;
        background-color: rgba(255,255,255,.5);
        display: block;
        width: 90%;
        margin: 1em auto 1em auto;
        border: 1px solid #c33c46;
        font-style: italic;
        padding: 10px;
    }
    .chat2{
        font-size: 1em;
        font-weight: 400;
        line-height: 1.75em;
        margin-bottom: 1.5em;
        color: #c2c2c2;
    }
    .chat3{
        font-size: 1em;
        font-weight: 300;
        line-height: 1em;
        text-align: center;
        color: rgba(96, 97, 97, .7);
        padding: 1em 0;
    }
    .cutline{
        font-family:'Roboto', sans-serif;
        font-size: .9em;
        line-height: 1.5em;
        font-weight: 700;
        margin: .5em 0 1em 0;
        padding: 0 10px;
        width: 100%;
        float: left;
    }
    .cutline_centered{
        font-family:'Roboto', sans-serif;
        font-size: .9em;
        line-height: 1.5em;
        font-weight: 700;
        text-align: center;
        margin: .5em 0 1em 0;
        padding: 0 10px;
        width: 100%;
        float: left;
    }

    /****************************** WEB PROMO ************************************/

    .web_promo{
        width: 40%;
        font-family: "Roboto";
        font-weight: 300;
        font-size: 1em;
        background-color: #f7f7f7;
        padding: 20px 10px 10px 10px;
        text-align: center;
        border-radius: 15px;
        margin: 0 30%;
        float: left;
    }
    .web_promo a{
        text-decoration: none;
        cursor: pointer;
        color: rgba(106, 135, 162, 1);
        vertical-align: middle;
    }
    .web_promo a:hover{
        font-weight: 700;
    }
    #learn_icon4{
        width: 40px;
        height: 40px;
        margin: 0 auto 1em auto;
        display: block;
    }
    .promo_text{
        font-weight: 100;
        font-size: 1.25em;
        line-height: 1.5em;
        float: left;
        padding: 0;
        margin: 0;
    }       

     /****************************** LEARN MORE BUTTON1 ************************************/

    .learn-more1{
        font-family:'Roboto', sans-serif;
        font-size: .8em;
        line-height: 1em;
        font-weight: 400;
        text-align: center;
        text-transform: uppercase;
        padding: 10px 20px; 
        border-radius: 15px;
        background-color: #f9db6b;
    }
    .learn-more1 a{
        text-decoration: none;
    }
    #lm_center{
        width: 150px;
        float: left;
        margin: 1em 0 1em 43%;
        transition: .5s;
    }
    #lm_inline{
        width: 150px;
        transition: 1s;
        display: inline-block;
        margin-left: 10px;
        float: left;
        border: none;
    }
    #learn_icon{
        width: 30px;
        float: right;
        display: inline;
        z-index: 1;
        margin: -45px 2em 0 0;
    }
    #learn_icon2{
        width: 30px;
        display: inline;
        margin: 0 3px -.6em 3px;
    }
    /*when inset in "bar-label"*/
    #learn_icon3{
        width: 30px;
        float: right;
        display: inline;
        z-index: 1;
        margin: -65px 2em 0 0;
    }
    /*color span*/
    .learn-more_db{
        color: lightgrey;
    }
    /*italic span*/
    .italic{
        font-style: italic;
    }
    .learn-more1:hover{
        cursor: pointer;
        background-color: black;
        color: #f9db6b;
        font-weight: 700;
        transform: scale(1.1, 1.1);
    }
     /****************************** LEARN MORE BUTTON1 ************************************/

    .learn-more2 a{
        font-family:'Roboto', sans-serif;
        font-size: .8em;
        line-height: 1em;
        font-weight: 400;
        text-align: center;
        text-transform: uppercase;
        text-decoration: none;
        padding: 10px 20px; 
        border-radius: 15px;
        background-color: #f9db6b;
        width: 150px;
        float: left;
        margin: 1em 0 1em 43%;
        transition: 1s;
    }
    .learn-more2 a:hover{
        cursor: pointer;
        background-color: black;
        color: #f9db6b;
        font-weight: 700;
        transform: scale(1.1, 1.1);
    }

    /************* lists *************/

    .listing1{
        font-family:'Roboto', sans-serif;
        font-size: 1em;
        font-weight: 300;
        line-height: 1.5em;
        list-style-position: outside;
        color: #676767;
    }

    .listing2{
        font-family:'Roboto', sans-serif;
        font-size: 1em;
        line-height: 1.5em;
        list-style-position: outside;
        font-weight: 300;
        color: #676767;
        padding: 0px;
        margin-left: 10px;
        width: 100%;
        float: left;
    }
    .listing2 li{
        padding: 0 0 0 0;
    }


    /************* headlines *************/

    .h1{
        font-family: 'Roboto Slab', serif;
        font-weight: 700;
        font-size: 2em;
        line-height: 1.25em;
        color: #676767;
        margin-top: 1em;
        margin-bottom: .5em;
        float: left;
        width: 100%;
    }
    .profile_main-hed{
        /*border: 1px solid lightblue;*/
        font-family: 'Roboto', sans-serif;
        font-size: 2.5em;
        font-weight: 300;
        line-height: 1.25em;
        color: lightgrey;
        margin-top: .5em;
        margin-bottom: 1em;
        width: 100%;
        float: left;
    }
    .profile_main-hed2{
        /*border: 1px solid lightblue;*/
        font-family: 'Roboto', sans-serif;
        font-size: 3em;
        font-weight: 300;
        line-height: 1.25em;
        color: #676767;
        margin-top: .5em;
        margin-bottom: .5em;
        width: 100%;
        float: left;
    }


    /************* subheads *************/

    /*page topper label*/
    .section_label{
        font-family: "Roboto";
        font-weight: 300;
        font-size: 1.5em;
        border-bottom: 5px solid black;
        display: inline-block;
        margin: 1em 0;
    }
    /*from the studio label*/
    .sub1{
        font-family: 'Roboto Slab', serif;
        font-weight: 700;
        font-size: 1.25em;
        text-transform: uppercase;
        margin-top: 0em;
        margin-bottom: 1em;
    }
    /*inline subhead*/
    .sub2{
        font-family: 'Roboto Slab', serif;
        font-weight: 700;
        font-size: 1.25em;
        color: #676767;
        text-transform: uppercase;
        text-align: left; 
        width: 100%;
        margin-top: 1em;
        margin-bottom: 1em;
        float: left;   
    }
    .sub3{
        font-family: 'Roboto Slab', serif;
        font-weight: 700;
        font-size: 1.25em;
        margin-top: 1em;
        margin-bottom: .5em;
        color: #676767;
        text-align: left;    
    }
    .sub4{
        font-family: 'Roboto Slab', serif;
        font-size: 1em;
        width: 100%;
        float: left;
        font-weight: 700; 
        text-align: center;
        margin: 1.5em 0 1em 0;
        color: #676767;
        text-transform: uppercase;
        display: block;
    }
    .sub5{
        font-family: 'Roboto Slab', serif;
        font-size: .9em;
        width: 100%;
        float: left;
        font-weight: 700; 
        text-align: center;
        margin: 1em 0 1em 0;
        color: #676767;
        /*text-transform: uppercase;*/
    }
    .footnote{
        font-family: "Roboto";
        font-weight: 300;
        font-size: .8em;
        width: 100%;
        float: left;
        margin: 1em 0;

    }
    /************* spans *************/
    .bold1{
        font-weight: 700;
    }
    .red{
        color: red;
    }
    .bullet{
        font-weight: 800;
        font-size: 1em;
        display: inline-block;
    }
                

    /************* text color *************/

    #type-chartuse{color: rgba(168, 136, 151, 1);}
    #type-white{color: #fff;}
    #type-grey{color: #c2c2c3;}
    #type-dark-gray{color: rgba(96, 97, 97, .7);}
    #type-turquoise{color: #8b747e;}
    #type-dark-blue{color: rgba(56, 121, 147, 1);}
    #type-link-blue{color: rgba(106, 135, 162, 1);}
    #type-cyan1{color: rgba(40, 169, 225, 1);}
    #type-red{color: #81c5ed;}
    #type-white{color: white;}
    
    /*section label bars*/
    #info_bar{border-bottom-color: #29a8e0;}
    #illo_bar{border-bottom-color: #5da6b1;}
    #design_bar{border-bottom-color: #838bb1;}
    #elect_bar{border-bottom-color: #a78897;}
    #about_bar{border-bottom-color: #ed9a97;}
    #studio_bar{border-bottom-color: #f3ad7f;}

    #design_color{border-bottom-color: #838bb1;}
    #electronic-arts_color{color: #a78897;}
    #studio_color{color: #EDA878;}


    /************* background colors *************/
    #dark-blue{background-color: rgba(56, 121, 147, 1);}
    #turquoise{background-color: rgba(94, 166, 178, 1);}
    #purple{background-color: rgba(131, 139, 177, 1);}
    #chartuse{color: rgba(168, 136, 151, 1);}
    #pink{background-color: rgba(237, 154, 151, 1);}
    #orange{background-color: rgba(244, 173, 127, 1);}
    #dark-grey{background: rgba(96, 97, 97, 1);}
    #white{background-color: #ffffff;}
    #light-gray{background-color:#f7f7f7;}


    /************* wrappers *************/

    .text_wrapper{
        /*border: 1px solid lightblue;*/
        width: 100%;
        padding: 0 15px;
        margin: 0 auto;
        display: block;
    }
    .modal-container{
        display: none;
    }

    /*devices*/
    .rule_full-width{
        border-top: 1px solid #c6c7c8;
        width: 100%;
        margin: 2em 0 2em 0;
        float: left;
    }
}


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

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

    #home_page, #infographics_page, #illustration_page, #design_page, #electronic-arts_page, #about-me_page, #studio_page{
        width: 100%;
    }

    .text_wrapper{
        /*border: 1px solid lime;*/
        width: 400px;
        margin: 0 auto;
        padding: 0 0;
        display: block;
        float: none;
    }
    .editors-note{
        width: 60%;
        }
}

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

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

    #home_page, #infographics_page, #illustration_page, #design_page, #electronic-arts_page, #about-me_page, #studio_page{
        width: 100%;
    }
        #intro_container{
            /* border: 1px solid pink;*/
             width: 60%;
             margin: 0 20%;
             float: left;
        }
    .profile_main-hed{
        font-size: 3em;
    }
    .text_wrapper{
       /* border: 1px solid pink;*/
        width: 600px;
        margin: 0 auto;
        padding: 0 0;
        display: block;
        float: none;
    }

}

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

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

    #home_page, #infographics_page, #illustration_page, #design_page, #electronic-arts_page, #about-me_page, #studio_page{
        width: 100%;
    }
  
    .text_wrapper{
        /*border: 1px solid yellow;*/
    }


}

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

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

    #home_page, #infographics_page, #illustration_page, #design_page, #electronic-arts_page, #about-me_page, #studio_page{
        /*border: 1px solid orange;*/
        width: 100%;
    }
    
}

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

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

    #home_page, #infographics_page, #illustration_page, #design_page, #electronic-arts_page, #about-me_page, #studio_page{

    }
    .text_wrapper{
        /*border: 1px solid cyan;*/
    }
}

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

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

    #home_page, #infographics_page, #illustration_page, #design_page, #electronic-arts_page, #about-me_page, #studio_page{
        /*border: 1px solid red;*/
        width: 100%;
    }
    .text_wrapper{
        /*border: 1px solid red;*/
    }
}