/*// Extra large devices (large desktops) - default*/
/*Normally CSS stuff in style.css*/
/*I will put here things affected by screen sizes*/

/*##########CSS Dropcap or the Big letter in a <p> on the left of sections###########*/
/*Missing: Changing margins & sizes for differents screen sizes - Write media queries*/

.DropCapDiv {
    /*padding-right: 0;*/
    /*padding-right: 30px;*/
}

.dropcap {
    padding: 0;
    margin-top: 10px;
    letter-spacing: 0;
    font-size: 6.2em;
    text-align: start;
    line-height: 1;
    font-weight: bold;
    color: #229ad6;
    text-shadow: #229ad6 .01em .01em;
}

/*##########END OF CSS Dropcap or the Big letter in a <p> on the left of sections###########*/
#GalleriesSection {
    /*padding-bottom: 50px;*/
}

#ArrowLinksSection {
    /*padding-bottom: 50px;*/
}

#ToolkitsSection {
    /*padding-bottom: 50px;*/
}

@media only screen and (min-width: 1420px)  and (max-width: 1500px) {

    /*body {*/
        /*!*for  testing queries - GREY  *!*/
        /*background-color: grey !important;*/
    /*}*/

    .dropcap {
        padding: 0;
        font-size: 6.2em;
        text-align: start;
        /*text-align: center !important;*/
        line-height: 1;
        font-weight: bold;
        color: #229ad6;
        text-shadow: #229ad6 .03em .03em;
    }

    h5.turqoiseArrows {
        font-size: 20px !important;
        padding-left: 15px;
        width: 100%;
    }

}

@media only screen and (min-width: 1200px)  and (max-width: 1419px) {

    /*body {*/
        /*!*for  testing queries  *!*/
        /*background-color: orange !important;*/
    /*}*/

    .dropcap {
        padding: 0;
        font-size: 6.2em;
        text-align: center !important;
        line-height: 1;
        font-weight: bold;
        color: #229ad6;
        text-shadow: #229ad6 .03em .03em;
    }

    /*#GalleriesSection {*/
    /*!*padding-bottom: 50px;*!*/
    /*}*/
    /*#ArrowLinksSection {*/
    /*!*padding-bottom: 50px;*!*/
    /*}*/
    /*#ToolkitsSection {*/
    /*!*padding-bottom: 50px;*!*/
    /*}*/
    h5.turqoiseArrows {
        font-size: 20px !important;
        padding-left: 15px;
        width: 100%;
    }

}

/*//Bootstrap LG  -  Large devices (desktops, less than 1200px)*/
@media (max-width: 1199.99px) {

    /*body {*/
        /*!*for  testing queries*!*/
        /*background-color: red !important;*/
    /*}*/

    .dropcap {
        padding: 0;
        font-size: 5.2em;
        text-align: center !important;
        line-height: 1;
        font-weight: bold;
        color: #229ad6;
        text-shadow: #229ad6 .02em .02em;
    }

    #GalleriesSection {
        /*padding-bottom: 50px;*/
    }

    #ArrowLinksSection {
        /*padding-bottom: 50px;*/
    }

    #ToolkitsSection {
        /*padding-bottom: 50px;*/
    }

    h3 {
        font-size: large !important;
    }

    h5.turqoiseArrows {
        font-size: 20px !important;
        padding-left: 15px;
        width: 100%;
    }

    .headersLead {
        /*Should have the Full page headline arrow*/
        /*headers of Section arrow - default is on Large arrow*/
        /*See responsive.css for media queries and changing the arrows accordingly*/

        padding-top: 5px;
        padding-bottom: 5px;
        background-image: url('../images/Full_page_headline_arrow_turquoise.png');
        background-size: 100% 100%;
        color: white;
        /*padding: 5px;*/
        /*for moving text a litle bit*/
        padding-left: 10px;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizelegibility;
        font-weight: bold;
        width: 50%;
    }

}

/*// Bootstrap MD  - Medium devices (tablets, less than 992px)*/
/*We want to show 2 slides only here*/
/*100% /2*/
@media (max-width: 991.99px) {

    /*body {*/
        /*!*for testing queries*!*/
        /*background-color: green !important;*/
    /*}*/

    .dropcap {
        padding: 0;
        font-size: 4.2em;
        text-align: center !important;
        line-height: 1;
        font-weight: bold;
        color: #229ad6;
        text-shadow: #229ad6 .01em .01em;
    }


    h3 {
        font-size: large !important;
    }

    h5.turqoiseArrows {
        font-size: 15px !important;
        padding-left: 10px;
        width: 100%;
    }

    #CineLogoImage {
        /*height: auto;*/
        /*width: auto;*/
        /*max-width: 150px;*/
        /*max-height: 100px;*/
    }

    #CineLogoImageDIV {
        /*Give a little of padding so that nav bar don't appear on top of Galleries initially*/
        padding-bottom: 30px;
        /*align-self: right;*/

    }

    .headersLead {
        /*Should have the Full page headline arrow*/
        /*headers of Section arrow - default is on Large arrow*/
        /*See responsive.css for media queries and changing the arrows accordingly*/
        padding-top: 5px;
        padding-bottom: 5px;
        background-image: url('../images/Full_page_headline_arrow_turquoise.png');
        background-size: 100% 100%;
        color: white;
        /*padding: 5px;*/
        /*for moving text a litle bit*/
        padding-left: 10px;
        padding-top: 5px;
        padding-bottom: 5px;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizelegibility;
        font-weight: bold;
        width: 60%;
    }

}

/*// Bootstrap SM - Small devices (landscape phones, less than 768px)*/
@media (max-width: 767.99px) {

    /*body {*/
    /*!*for testing queries*!*/
    /*background-color: blue;*/
    /*}*/
    .dropcap {
        padding: 0;
        font-size: 5.2em;
        text-align: center !important;
        line-height: 1;
        font-weight: bold;
        color: #229ad6;
        text-shadow: #229ad6 .01em .01em;
        /*display: none;*/
    }

    .crop {
        width: 100%;
    }

    #LogoAligner {
        float: left !important;
    }

    h3 {
        font-size: small !important;
    }

    h5.turqoiseArrows {
        font-size: 20px !important;
        /*padding-left: 5px;*/
        /*background-size: cover;*/
        /*width: 100%;*/
        color: white;

        background-image: url('../images/Arrow_r_medium_turquoise.png');
        background-size: 100% 100%;
        width: 40%;

        padding-left: 15px;
    }

    #ArrowsRow {
        text-align: center !important;
    }

    #ToolkitsSection div.col-md-3 {
        /*padding-bottom: 20px;*/
    }

    #ExhibitsSection div.col-md-3 {
        /*padding-bottom: 20px;*/
    }

    #LogoAligner {
        text-align: right;
    }

    .headersLead {
        /*Should have the Full page headline arrow*/
        /*headers of Section arrow - default is on Large arrow*/
        /*See responsive.css for media queries and changing the arrows accordingly*/

        background-image: url('../images/Full_page_headline_arrow_turquoise.png');
        background-size: 100% 100%;
        color: white;
        /*padding: 5px;*/
        /*for moving text a litle bit*/
        padding-left: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizelegibility;
        font-weight: bold;
        width: 60%;
    }

}

/*Bootstrap XS - Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.99px) {
    /*This media Query should be divided by 2 so that turquoise arrows look good*/
    /*body {*/
    /*!*for testing queries*!*/
    /*background-color: yellow;*/
    /*}*/
    .dropcap {

        display: none;
    }

    h3 {
        font-size: small !important;
    }

    h5.turqoiseArrows {
        font-size: 15px !important;
        padding-left: 5px;
        padding-top: 7px;
        padding-bottom: 7px;
        /*background-size: cover;*/
        width: 75%;
    }

    #ToolkitsSection div.col-md-3 {
        padding-bottom: 20px;
    }

    #ExhibitsSection div.col-md-3 {
        padding-bottom: 20px;
    }

    #LogoAligner {
        text-align: right;
    }

    .headersLead {
        /*Should have the Full page headline arrow*/
        /*headers of Section arrow - default is on Large arrow*/
        /*See responsive.css for media queries and changing the arrows accordingly*/
        align-content: center;
        background-image: url('../images/Arrow_r_medium_turquoise.png');
        background-size: 100% 100%;
        color: white;
        /*padding: 5px;*/
        /*for moving text a litle bit*/
        padding-left: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizelegibility;
        font-weight: bold;
        /*font-size: 8px;*/
        width: 80%;
    }

}