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

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


     
    * {
        box-sizing: border-box;
    }

    /************* capabilities video *************/

    .capabilities_content{
        font-family: "Roboto";
        width: 48%;
        margin: 0 1% 1.25em 1%;
        float: left;
    }
                
    /************* wrappers *************/

        #folklorico{
            padding: 20px;
            background-color: #f9d96c;
            margin: 2em 0 2em 0;
        }
            .folk_box1{
                /*border: 1px solid lime;*/
                width: 100%;
                float: left;
            }
            .folk_box2{
                /*border: 1px solid lime;*/
                width: 100%;
                float: left;
            }
            .folk_box3{
                /*border: 1px solid orange;*/
                width: 100%;
                padding-right: 0; 
                float: left;
            }
            .folk_box4{
                /*border: 1px solid lime;*/
                width: 100%;
                margin: 0 0 0 0;
                float: left;
            }
                .folk_box4 img{
                    width: 100%;
                }
            .folk_box5{
                /*border: 1px solid cyan;*/
                width: 100%;
                float: left;
            }
        #autonodyne{
            width: 100%;
            float: left;
        }
            #ffm{
                width: 95%;
                margin: 0 2.5%;
                float: left;
            }
                #ffm video{
                    width: 100%;
                }

    /************* artwork *************/

    #page-labels{
        width: 60%;
        float: left;
        /*border: 1px solid red;*/
    }
    #electronic-arts{
        width:96%;
        float: left;
        margin: 0 2%;
    }

    #inspire2{
        width: 100%;
        margin: 0 auto;   
    }

    #auto-displays1{
        width: 95%;
        margin: 0 2.5%;
        float: left;    
    }
        #auto-displays1 img{
            width: 100%;        
        }
    #auto-displays2{
        width: 95%;
        margin: 1em 2.5% 0 2.5%;
        float: left;
    }
        #auto-displays2 img{
            width: 100%;        
        }
    #auto-displays3{
        /*border: 1px solid lime;*/
        width: 95%;
        margin: 0 2.5%;
        float: left;
    }
        #auto-displays3 img{
            width: 100%;
        }
    #auto-behaviors{
        width: 95%;
        margin: 0 2.5%;
        float: left;
    }
        #auto-behaviors img{
            width: 100%;
        }
    #behaviors-video{
        width: 80%;
        margin: .5em 10% 1em 10%;
        display: none;
    }
    #video1{
        width: 100%;
        display: none;
    }
}


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

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

        #folklorico{
            margin-bottom: 2em;
        }
}

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

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

#folklorico{
            padding: 50px;
            background-color: #f9d96c;
            margin: 2em 0 2em 0;
        }
            .folk_box1{
                /*border: 1px solid lime;*/
                width: 100%;
                float: left;
            }
            .folk_box2{
                /*border: 1px solid lime;*/
                width: 100%;
                float: left;
            }
            .folk_box3{
                /*border: 1px solid orange;*/
                width: 50%;
                padding-right: 20px; 
                float: left;
            }
            .folk_box4{
                /*border: 1px solid lime;*/
                width: 80%;
                margin: 1em 10% 1em 10%;
                float: left;
            }
                .folk_box4 img{
                    width: 100%;
                }
            .folk_box5{
                /*border: 1px solid cyan;*/
                width: 50%;
                float: left;
            }
    #auto-behaviors{
        width: 70%;
        margin: 0 15%;
    }
    #auto-displays3{
        /*border: 1px solid lime;*/
        width: 60%;
        margin: 0 20%;
    }

}

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

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

    .highlight{color: #51a2d6;}
}

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

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


}

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

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


}

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

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


}