@charset "utf-8";
/* CSS Document */

html {
	box-sizing: border-box;
    padding: 0;
    margin: 0;
    height: 100vh;
}

*,
*::before,
*::after {
	box-sizing: inherit;
	margin: 0;
	padding: 0;
}

body {
	font-family: "Arial", "Helvetica", 'Helvetica Neue', "sans-serif";
	margin: 0;
	padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

header .NavSpace { /* to give space for top navbar*/
    width: 100%;
    background: #989FAC;
    min-height: 75px;
}







/*EXTRA LARGE MONITOR - START*/
@media screen and (min-width: 2100px){
    .HeroAbout {/*Hero Image and area*/
        display: flex;
        margin: 75px auto 0;
        width: 100%;
        min-height: 700px;
        background-image: url("images/About/QuestionsHero1440x560.jpg"); /*first rgba values give dark effect to image*/
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: contain;
        align-content: center;
        align-items: center;
        z-index: -1;
    }
    .ImgExample {
        margin: 0 auto;
        width: 40%;
        box-shadow: 5px 5px 10px;
        border: 2px solid #EFEFEF;
        border-radius: 15px;
    }
    .ImgExample img {
        width:100%;
        border-radius: 15px;
        margin: 0 auto;

    }
            /*LARGE MONITOR ABOUT IMAGE - START*/

    .AboutAside {
        display: flex;
        flex-direction: row;
        align-items:center;
        align-content: center;
        margin: 25px auto;
        width: 50%;

    }
    .AboutImg {
        display: block;
        flex: 1 0 40%;
    }
    .ThumbImg {
        height: 400px;
        object-fit: cover;
        box-shadow: 5px 5px 10px gray;
    }
    .AboutAsideText {
        display: flex;
        flex-direction: column;
        height: 90%;
        flex: 1 1 50%;
        border-left: 2px solid #DEDEE0;
        margin: 25px 0 25px 25px;
    }
    .AboutAsideText > h3 {
        padding: 15px 20px;
        height: auto;
        width: 100%;
        font-size: 2.25rem;
        color: #014F77;
    }

    
    .EndContent {
        width: 80%;
        padding: 20px 0;
        margin: 0 auto 75px;
        font-size: 2rem;
    }
    .h1End { /*Blue text intro for image gallery*/
        font-size: 2.75rem;
        line-height: 1.25;
        height: auto;
        margin: 0 auto;
        width: 100%;
        color: #016699;
        font-weight: 800;
        text-align: center;
    }


    /* EXTRA LARGE MONITOR - END*/ 
    }




















    @media screen and (min-width: 1622px) and (max-width: 2099px){
/*LARGE MONITOR SIZE - START*/
.HeroAbout {/*Hero Image and area*/
    display: flex;
    margin: 75px auto 0;
    width: 100%;
    min-height: 700px;
    background-image: url("images/About/QuestionsHero1440x560.jpg"); /*first rgba values give dark effect to image*/
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: contain;
    align-content: center;
    align-items: center;
    z-index: -1;
}
    
            /*LARGE MONITOR ABOUT IMAGE - START*/

    .ImgExample {
        margin: 0 auto;
        width: 40%;
        box-shadow: 5px 5px 10px;
        border: 2px solid #EFEFEF;
        border-radius: 15px;
    }
    .ImgExample img {
        width:100%;
        border-radius: 15px;
        margin: 0 auto;

    } 
    .AboutAside {
        display: flex;
        flex-direction: row;
        align-items:center;
        align-content: center;
        margin: 25px auto;
        width: 70%;

    }
    .AboutImg {
        display: block;
        flex: 1 0 40%;
    }
    .ThumbImg {
        height: 400px;
        object-fit: cover;
        box-shadow: 5px 5px 10px gray;
    }
    .AboutAsideText {
        display: flex;
        flex-direction: column;
        height: 90%;
        flex: 1 1 50%;
        border-left: 2px solid #DEDEE0;
        margin: 25px 0 25px 25px;
    }
    .AboutAsideText > h3 {
        padding: 15px 20px;
        height: auto;
        width: 100%;
        font-size: 2.25rem;
        color: #014F77;
    }

    
    .EndContent {
        width: 70%;
        padding: 20px 0;
        margin: 0 auto 75px;
        font-size: 2rem;
    }
    .h1End { /*Blue text intro for image gallery*/
        font-size: 2.75rem;
        line-height: 1.25;
        height: auto;
        margin: 0 auto;
        width: 100%;
        color: #016699;
        font-weight: 800;
        text-align: center;
    }
    



/*LARGE MONITOR Intro area - END*/  
}














/*MONITOR SIZE - START*/
@media screen and (min-width: 1281px) and (max-width: 1621px){
    .HeroAbout {/*Hero Image and area*/
        display: flex;
        margin: 75px auto 0;
        width: 100%;
        min-height: 550px;
        background-image:  url("images/About/QuestionsHero1440x560.jpg"); /*first rgba values give dark effect to image*/
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: contain;
        align-content: center;
        align-items: center;
        z-index: -1;
    }    

        /*MONITOR ABOUT IMAGE - START*/
    .ImgExample {
        margin: 25px auto;
        width: 50%;
        box-shadow: 5px 5px 10px;
        border: 2px solid #EFEFEF;
        border-radius: 15px;
    }
    .ImgExample img {
        width:100%;
        border-radius: 15px;


    } 
    .AboutAside {
        display: flex;
        flex-direction: row;
        align-items:center;
        align-content: center;
        margin: 25px auto;
        width: 70%;

    }
    .AboutImg {
        display: block;
        flex: 1 0 40%;
    }
    .ThumbImg {
        height: 300px;
        object-fit: cover;
        box-shadow: 5px 5px 10px gray;
    }
    .AboutAsideText {
        display: flex;
        flex-direction: column;
        height: 90%;
        flex: 1 1 50%;
        border-left: 2px solid #DEDEE0;
        margin: 25px 0 25px 25px;
    }
    .AboutAsideText > h3 {
        padding: 15px 20px;
        height: auto;
        width: 100%;
        font-size: 2rem;
        color: #014F77;
    }

    
    .EndContent {
        width: 70%;
        padding: 20px 0;
        margin: 0 auto 75px;
        font-size: 2rem;
    }
    .h1End { /*Blue text intro for image gallery*/
        font-size: 2.75rem;
        line-height: 1.25;
        height: auto;
        margin: 0 auto;
        width: 100%;
        color: #016699;
        font-weight: 800;
        text-align: center;
    }



  
}
/*MONITOR SIZE - END*/
























/*ABOUT*/
@media screen and (min-width: 621px) and (max-width: 1280px){
    .HeroAbout {/*Hero Image and area*/
        display: flex;
        margin: 75px auto 0;
        width: 100%;
        min-height: 400px;
        background-image: url("images/About/QuestionsHero1440x560.jpg"); /*first rgba values give dark effect to image*/
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: contain;
        align-content: center;
        align-items: center;
        z-index: -1;
    }


    
            /*TABLET/DESKTOP ABOUT IMAGE - START*/
        .ImgExample {
            margin: 20px auto;
            width: 60%;
            box-shadow: 5px 5px 10px;
            border: 2px solid #EFEFEF;
            border-radius: 15px;
        }
        .ImgExample img {
            width:100%;
            border-radius: 15px;
            margin: 0 auto;
    
        } 
        .AboutAside {
            display: flex;
            flex-direction: column;
            align-items:center;
            align-content: center;
            margin: 25px auto 0;
            padding: 0;
            width: 85%;

        }
        .AboutImg {
            display: block;
        }
        .ThumbImg {
            display: flex;
            flex: 1 2 40%;
            height: 300px;
            object-fit: cover;
            box-shadow: 5px 5px 10px gray;
        }
        .AboutAsideText {
            display: flex;
            flex-direction: column;
            height: 80%;
            flex: 1 1 50%;
            border-top: 2px solid #DEDEE0;
            margin: 25px 0 25px 25px;
        }
        .AboutAsideText > h3 {
            padding: 15px 20px 0;
            height: auto;
            width: 100%;
            font-size: 1.65rem;
            color: #014F77;
        }
    
        
        .EndContent {
            width: 80%;
            padding: 20px 0;
            margin: 25px auto 50px;

        }
        .h1End { /*Blue text intro for image gallery*/
            font-size: 2.25rem;
            line-height: 1.25;
            height: auto;
            margin: 0 auto;
            width: 100%;
            color: #016699;
            font-weight: 800;
            text-align: center;
        }
    




/*TABLET/DESKTOP SIZE - END*/
}




























/*MOBILE PORTRAIT VIEW - START*/
@media screen and (max-width: 620px){
    /*MOBILE SIZE - START*/
 /*Mobile ABOUT HERO IMAGE - START*/    
 .HeroAbout {/*Hero Image and area*/
    display: flex;
    margin: 100px auto 0;
    width: 100%;
    min-height: 300px;
    background-image:  url("images/About/QuestionsHero800x311.jpg"); /*first rgba values give dark effect to image*/
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: contain;
    align-content: center;
    align-items: center;
    z-index: -1;
}

     /*Mobile ABOUT HERO Area- END*/

    
            /*MOBILE ABOUT IMAGE - START*/
    .ImgExample {
        margin: 25px auto;
        width: 80%;
        box-shadow: 5px 5px 10px;
        border: 2px solid #EFEFEF;
        border-radius: 15px;
    }
    .ImgExample img {
        width:100%;
        border-radius: 15px;
        margin: 0 auto;

    } 

    .AboutAside {
        display: flex;
        flex-direction: column;
        align-items:center;
        align-content: center;
        margin: 25px auto;
        padding: 0;
        width: 90%;

    }
    .AboutImg {
        display: block;
        flex: 1 0 30%;
    }
    .ThumbImg {
        display: flex; 
        height: 250px;
        object-fit: cover;
        margin: 0 auto;
        padding: 0;
        box-shadow: 5px 5px 10px gray;
    }
    .AboutAsideText {
        display: flex;
        flex-direction: column;
        flex: 1 1 100%;
        border-top: 2px solid #DEDEE0;
        margin: 15px auto 0;
    }
    .AboutAsideText > h3 {
        padding: 15px 20px 0;
        height: auto;
        width: 100%;
        font-size: 1.35rem;
        color: #014F77;
    }

    
    .EndContent {
        width: 80%;
        padding: 20px 0;
        margin: 25px auto 50px;
    }
    .h1End { /*Blue text intro for image gallery*/
        font-size: 2.75em;
        line-height: 1.25;
        height: auto;
        margin: 0 auto;
        width: 100%;
        color: #016699;
        font-weight: 800;
        text-align: center;
    }
    
        
        .EndContent {
            width: 90%;
            padding: 0;
            padding: 20px 0;
            margin: 25px auto 50px;
        }
        .h1End { /*Blue text intro for image gallery*/
            font-size: 1.5rem;
            line-height: 1.25;
            height: auto;
            margin: 0 auto;
            width: 100%;
            color: #016699;
            font-weight: 800;
            text-align: center;
        }



}
/* MOBILE SIZE - END*/