/* BELOW THIS POINT IS MEDIA QUERY */
    
      /*  by default, the container width is 1520px.
        in order to keep things responsive, take your new height,
        and then subtrack it by 100. use this new number as the 
        "max-width" value below
        */

            @media only screen and (max-width: 1420px) {
                
                #header {
                    height: 290px;  
                }
                
                #blogHeader {
                    height: 290px;  
                }

                /* the order of the items is adjusted here for responsiveness!
      since the sidebars would be too small on a mobile device.
      feel free to play around with the order!
      */
                #flex {
                    flex-wrap: wrap;
                }
                
                main {
                    order: 1;
                    margin: 20px auto auto 20px;
                    width: 70%;
                }

                #leftSidebar {
                    order: 2;
                    width: 30%;
                    margin-top: 0px;
                }

                #rightSidebar {
                    order: 3;
                    width: 100%;
                }
                
                .box-black {
                    margin-top: 10px;
                }
                
                #out-box iframe {
                  float: none;
                  }
                 
                #navbar ul {
                    margin: 0px;
                    left: -8px;
                }
                
                #navbar li a img{
                    width: 100%;
                }
              
            }
            
            @media only screen and (max-width: 1270px) {
                
                #header {
                    height: 260px;  
                }
                
                #blogHeader {
                    height: 260px;  
                }
                
                #flex {
                    flex-wrap: wrap;
                }
                
            @media only screen and (max-width: 960px) {
                
                #flex {
                    flex-wrap: wrap;
                }
                
                aside {
                    width: 100%;
                }                
                
                #header {
                    height: 190px;  
                }
                
                #blogHeader {
                    height: 190px;  
                }
                
            }
                
            @media only screen and (max-width: 750px) {
                
                #flex {
                    flex-wrap: wrap;
                }
                
                aside {
                    width: 100%;
                }  
                
                #header {
                    height: 150px;  
                }
                
                #blogHeader {
                    height: 150px;  
                }
                
                main {
                    order: 1;
                    margin: 3% 20px auto 20px;
                }

                #leftSidebar {
                    order: 2;
                    width: 100%;
                    margin-top: 20px;
                }
                
                .box-black {
                  flex-direction: row;
                  justify-content: space-between;
                  align-content: flex-end;
                  margin-top: 20px;
                  margin-bottom: 0px;
                  }
                  
                .box-black img{
                  width: 100%;
                  padding: 10px;
                  margin-right: 0px;
                  margin-left: 0px;
                }
                  
                #out-box iframe{
                  width: 250px;
                  height: 250px;
                  margin: 0px;
                  }

                #rightSidebar {
                    order: 3;
                }
            }
                
            @media only screen and (max-width: 610px) {
                
                #flex {
                    flex-wrap: wrap;
                }
                
                #header {
                    height: 120px;  
                }
                
                #blogHeader {
                    height: 120px;  
                }
            }