/* extra Small devices ( 500px and up) */
@media (max-width: 500px) {
    #issueSection {
        img {
            width: 20px;
        }
        h2 {
            margin-top: 5px;
            margin-bottom: 0;
            font-size: 0.8em;
            line-height: 1em;
        }
        h3 {
            font-size: 10px;
            line-height: 1em;
            margin-top: 5px;
            margin-bottom: 0.9375em;
        }
    }
}


@media (max-width: 768px) {
header .header__logo {
            width: 95px;
            height: 95px;
        }






/* Small devices (tablets, 768px and up) */

@media (min-width: 768px) {
    .inner-section {
        margin: 0 20px;
    }
    //Header
    header {
        height: 94px;
        background: transparent;
        .header__logo {
            width: 255px;
            height: 94px;
        }
        #search {
            background: #eee;
            #SearchResultsBox_SearchTextBox {
                background: #eee;
            }
            input::placeholder {
                color: lightgrey;
            }
            #SearchResultsBox_SearchButton {
                background-color: #eee;
            }
        }
        .toggle-button {
            top: 35px;
            right: 30px;
        }
        #search {
            margin-top: 39px;
            right: 80px;
        }
    }
    .masthead {
        h1 {
            text-align: left;
        }
    }
    #issueSection {
        margin: 58px 0 0 0;
        img {
            width: 28px;
        }
        h2 {
            margin-top: 10px;
            margin-bottom: 0;
            color: #019bbd;
            font-size: 1.3em;
            line-height: 1.1em;
        }
        h3 {
            color: #18194f;
            font-size: 1.1em;
            line-height: 1.4em;
            margin-top: 5px;
            margin-bottom: 0.9375em;
        }
    }
    #latest-news {
        .latest-news-box {
            margin-top: 20px;
        }
    }
}



///* Medium devices (desktops, 992px and up) */
//
@media (min-width: 992px) {

    //.slideout-panel {
    //    margin-left: 256px;
    //}

    header {
        position: relative;
        top: 0;
        padding: 17px 19px;
        height: 126px;
        background: transparent;
        .toggle-button {
            display: none;
        }
        #main-nav {
            li {
                a {
                    padding: 0 4px;
                }
            }
        }
        .header__right {
            position: relative;
            float: right;
            .nav--inline {
                display: inline-block;
                margin-top: 32px;
                padding: 4px 0;
                margin-right: 15px;
            }
            .nav {
                float: left;
                list-style: none;
                font-size: 13px;
                li {
                    display: inline-block;
                }
                .nav--inline a {
                    font-weight: 700;
                    padding: 0 8px;
                    -webkit-transition: opacity 0.2s;
                    transition: opacity 0.2s;
                }
                li a {
                    padding: 0 8px;
                    color: #1A296B !important;
                    display: inline-block;
                    text-decoration: none;
                    font-weight: 700;
                }
            }
        }
        #search {
            margin-top: 24px;
            right: 80px;
            position: relative;
            background: #eee;
            right: 0;
            #SearchResultsBox_SearchTextBox {
                background: #eee;
            }
            #SearchResultsBox_SearchButton {
                background-color: #eee;
            }
        }
    }
    .header__right {
        position: relative;
        float: right;
    }
    .nav--inline {
        float: left;
        display: inline-block;
        margin-top: 28px;
        padding: 4px 0;
        margin-right: 15px;
    }
    #search {
        background: #eee;
        padding: 0;
        margin-top: 20px;
        float: left;
        width: 200px;
        #SearchResultsBox_SearchTextBox {
            background: #eee;
            width: 82%;
        }
        #SearchResultsBox_SearchButton {
            background-color: #eee;
            width: 18%
        }
    }

    #headerVisionImage {
        width: 72%;
    }
    /*---Article---*/

    #article {
        .video_section, .image_section {
             .caption-box {
                 position: absolute;
                 bottom: 0;
             }
         }
    }


    #footer {
        .sys_row {
            position: relative;
        }
       #connectLogo {
            position: absolute;
            bottom: 42px;
            left: 66%;
            width: 75%;
            margin-left: 15px;
        }
    }
}
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    header {
        #main-nav {
            li {
                a {
                    padding: 0 10px;
                }
            }
        }
    }
    #issueSection {
        margin: 75px 0 0 0;
    }
}
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1441px) {
    header {
        #main-nav {
            li {
                a {
                    padding: 0 10px;
                    font-size: 16px;
                }
            }
        }
    }
}