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

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



    * {box-sizing: border-box;}

    /*wrappers*/
    #footer{
        font-family: "Roboto";
        font-size: .9em;
        font-weight: 300;
        line-height: 1.5em;
        width: 100%;
        float: left;
        background-color: #f7f7f7;
        padding: 3em 0 3em 0;
        margin: 2em 0 0 0;
    }
    .footer_wrapper{
        /*border: 1px solid lightblue;*/ 
        width: 275px;
        margin: 0 auto;
        display: block;
    }
    .footer_wrapper a{
        text-decoration: none;
        color: rgba(106, 135, 162, 1);
    }
    .footer_wrapper a:hover{
        color: rgba(40, 169, 225, 1);
        font-weight: 700;
    }
    .footer-url{
        /*border: 1px solid red; */
        width: 100%;
        float: left;
        margin-bottom: 20px;
    }
    .box1{
        /*background-color: yellow;*/
        width: 100%;
        float: left;
    }
    .box2{
        /*background-color: lime;*/
        width: 100%;
        float: left;
    }
    .box2_logo{
        /*border: 1px solid pink;*/
        width: 45%;
        float: left;
    }
    .box2_logo img{
        /*border: 1px solid red;*/
        width: 90%;
        float: left;
    }  

    .box2_ideas{
        margin-left: 5%;
        width: 50%;
        float: left;
    }        
    .box3{
        width: 100%;
        /*background-color: pink;*/
        border-left: none;
        border-right: none;
        float: left;
        margin: 1em 0 0 0;
    }
    .contact-wrapper{
        /*border: 1px solid cyan;*/
        width: 100%;
        padding: 0 0 5px 0;
        float: left;
    }
    .contact-wrapper a{
        text-decoration: none;
        color: rgba(106, 135, 162, 1);
    }
    .contact-wrapper a:hover{
        color: rgba(40, 169, 225, 1);
        font-weight: 700;
    }
    #contact-logos{
        width: 40px;
        height: 40px;
        margin: 0 10px 0 10px;
        float: left;
        padding: 0px;
        display: block;
    }
    #contact-logos img{
        width: 30px;
        height: 30px;
    }
    #contact_text{
        /*border: 1px solid pink;*/
        font-size: .9em;
        padding: 8px 0 0 10px;
        line-height: 1.5;
        margin-bottom: 1em;
    }
    .box4{
        width: 100%;
        /*background-color: cyan;*/
        float: left;
        margin: 2em 0 0 0;
    }
    .media{
        width: 50%;
        float: left;
    }
    #social-media-logos{
        /*border: 1px solid pink;*/
        width: 25px;
        height: 25px;
        margin: auto;
        display: block;
        float: none;
    }
}

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

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

    .footer_wrapper{
        /*border: 1px solid lime;*/ 
        width: 100%;
        padding: 0 30px;
        margin: 0 auto;
        display: block;
    }
    .box1{
        /*background-color: yellow;*/
        width: 100%;
        float: left;
    }
    .box2{
        /*background-color: lime;*/
        width: 40%;
        float: left;
    }
    .box2_logo{
        /*border: 1px solid lime;*/
        width: 45%;
        float: left;
    }
    .box2_logo img{
        /*border: 1px solid lime;*/
        width: 80%;
        float: left;
    }  
    .box2_ideas{
        margin-left: 5%;
        width: 50%;
        float: left;
    }        
    .box3{
        width: 60%;
        /*background-color: pink;*/
        border-left: 1px solid lightgrey;
        border-right: none;
        margin: 0 0 0 0;
        float: left;
    }
    .contact-wrapper{
        /*border: 1px solid lime;*/
        width: 100%;
        padding: 0 0 5px 0;
        float: left;
    }
    .contact-wrapper a{
        text-decoration: none;
        color: rgba(106, 135, 162, 1);
    }
    .contact-wrapper a:hover{
        color: rgba(40, 169, 225, 1);
        font-weight: 700;
    }
    #contact-logos{
        /*border: 1px solid lime;*/
        width: 40px;
        height: 40px;
        margin: 0 10px 0em 10px;
        padding: 0px;
        display: block;
        float: left;
    }
    #contact-logos img{
        /*border: 1px solid lime;*/
        width: 30px;
        height: 30px;
    }
    #contact_text{
        /*border: 1px solid lime;*/
        font-size: .9em;
        margin: 0;
        padding: 12px 0 0 0;
        line-height: 1.5;
    }
    .box4{
        /*background-color: cyan;*/
        width: 20%;
        margin: 1.5em 40% 0 40%; 
        float: left;
    }
    .media{
        /*border: 1px solid lime;*/
        width: 50%;
        float: left;
    }
    #social-media-logos{
       /* border: 1px solid lime;*/
        width: 30px;
        height: 30px;
        margin: auto;
        display: block;
        float: none;
    }
}

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

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


   .footer_wrapper{
        /*border: 1px solid pink;*/ 
        width: 650px;
        margin: 0 auto;
        display: block;
        float: none;
    }
    .footer_wrapper a{
        text-decoration: none;
        color: rgba(106, 135, 162, 1);
    }
    .footer_wrapper a:hover{
        color: rgba(40, 169, 225, 1);
        font-weight: 700;
    }
    .footer-url{
        /*border: 1px solid pink;*/ 
        width: 100%;
        float: left;
        margin-bottom: 20px;
    }
    .box1{
        /*background-color: pink;*/
        width: 100%;
        float: left;
    }
    .box2{
        /*background-color: lime;*/
        width: 40%;
        float: left;
    }
    .box2_logo{
        /*border: 1px solid pink;*/
        width: 45%;
        float: left;
    }
    .box2_logo img{
        /*border: 1px solid pink;*/
        width: 100%;
        float: left;
    }  
    .box2_ideas{
        margin-left: 5%;
        width: 50%;
        float: left;
    }        
    .box3{
        width: 50%;
        /*background-color: pink;*/
        border-left: 1px solid lightgrey;
        border-right: 1px solid lightgrey;
        float: left;
    }
    .contact-wrapper{
        /*border: 1px solid pink;*/
        width: 100%;
        padding: 0 0 5px 0;
        float: left;
    }
    .contact-wrapper a{
        text-decoration: none;
        color: rgba(106, 135, 162, 1);
    }
    .contact-wrapper a:hover{
        color: rgba(40, 169, 225, 1);
        font-weight: 700;
    }
    #contact-logos{
        /*border: 1px solid pink;*/
        width: 40px;
        height: 40px;
        margin: 0 10px 0em 10px;
        padding: 0px;
        display: block;
        float: left;
    }
    #contact-logos img{
        width: 20px;
        height: 20px;
    }
    #contact_text{
        /*border: 1px solid pink;*/
        font-size: .9em;
        /*width: 77%;*/
        display: block;
        margin: 0;
        padding: 10px 0 0 0;
        line-height: 1.5;
        margin-bottom: 1em;
        float: left;                    
    }
    .box4{
        /*border: 1px solid pink;*/
       /* background-color: cyan;*/
        width: 10%;
        margin: 0 0 0 0;
        float: left;
    }
    .media{
        /*border: 1px solid pink;*/
        width: 100%;
        float: left;
    }
    #social-media-logos{
        /*border: 1px solid pink;*/
        width: 30px;
        height: 30px;
        margin: 0 0 20px 0;
        display: block;
        float: right;
    }
}

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

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

    .footer_wrapper{
        /*border: 1px solid yellow;*/ 
        width: 750px;
        margin: 0 auto;
        display: block;
        float: none;
    }
    .footer_wrapper a{
        text-decoration: none;
        color: rgba(106, 135, 162, 1);
    }
    .footer_wrapper a:hover{
        color: rgba(40, 169, 225, 1);
        font-weight: 700;
    }
    .footer-url{
        /*border: 1px solid yellow;*/ 
        width: 100%;
        float: left;
        margin-bottom: 20px;
    }
    .box1{
        /*background-color: yellow;*/
        width: 100%;
        float: left;
    }
    .box2{
        /*background-color: lime;*/
        width: 40%;
        float: left;
    }
    .box2_logo{
        /*border: 1px solid yellow;*/
        width: 45%;
        float: left;
    }
    .box2_logo img{
        /*border: 1px solid yellow;*/
        width: 90%;
        float: left;
    }  
    .box2_ideas{
        margin-left: 5%;
        width: 50%;
        float: left;
    }        
    .box3{
        width: 50%;
        /*background-color: pink;*/
        border-left: 1px solid lightgrey;
        border-right: 1px solid lightgrey;
        float: left;
    }
    .contact-wrapper{
        /*border: 1px solid yellow;*/
        margin: 0 0 0 10px;
        padding: 0 0 5px 0;
        width: 97%;
        float: left;
    }
    .contact-wrapper a{
        text-decoration: none;
        color: rgba(106, 135, 162, 1);
    }
    .contact-wrapper a:hover{
        color: rgba(40, 169, 225, 1);
        font-weight: 700;
    }
    #contact-logos{
        /*border: 1px solid yellow;*/
        width: 40px;
        height: 40px;
        margin: 0;
        float: left;
        padding: 0px;
        display: block;
    }
    #contact-logos img{
        width: 25px;
        height: 25px;
    }
    #contact_text{
        /*border: 1px solid pink;*/
        /*width: 85%;*/
        padding: 10px 0 0 0px;
        margin-left: 2%;
        line-height: 1.5;
        margin-bottom: 1em;
        float: left;
    }
    .box4{
        /*border: 1px solid yellow;*/
       /* background-color: cyan;*/
        width: 10%;
        margin: 0 0 0 0;
        float: left;
    }
    .media{
        /*border: 1px solid yellow;*/
        width: 100%;
        float: left;
    }
    #social-media-logos{
        /*border: 1px solid yellow;*/
        width: 30px;
        height: 30px;
        margin: 0 0 20px 0;
        float: right;
    }
}

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

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

    .footer_wrapper{
       /* border: 1px solid orange;*/ 
    }
}

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

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

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

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

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

    .footer_wrapper{
       /* border: 1px solid red;*/ 
    }
}