@font-face {
    font-family: 'Lato-Black';
    src: url('../Fonts/Lato-Black.ttf') format('truetype');
}

@font-face {
    font-family: 'Lato-BlackItalic';
    src: url('../Fonts/Lato-BlackItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'Lato-Bold';
    src: url('../Fonts/Lato-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Lato-BoldItalic';
    src: url('../Fonts/Lato-BoldItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'Lato-Italic';
    src: url('../Fonts/Lato-Italic.ttf') format('truetype');
}

@font-face {
    font-family: 'Lato-Light';
    src: url('../Fonts/Lato-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'Lato-LightItalic';
    src: url('../Fonts/Lato-LightItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'Lato-Regular';
    src: url('../Fonts/Lato-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Lato-ThinItalic';
    src: url('../Fonts/Lato-ThinItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'Lato-Thin';
    src: url('../Fonts/Lato-Thin.ttf') format('truetype');
}

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}
/*THIS CODE IS FOR SAMSUM G7 SERIES IN REGARDS TO ISSUES IN RENDERING BACKGROUND COLORS PROPERLY*/
html {
    height: 100%;
    min-height: 100%;
}
body {
    background-color: #d3dcec;
    font-family: Lato-Regular;
}
a {
    text-decoration: none;
}

ul {
    list-style: none;
}

/*LARGE IMAGE WITH TEXT*************************************************************************************************************/
.divBlueBackground {
    width: 100%;
    background-image: url('../Images/DefaultPage/TopDivBlueBackground.png');
    background-size: contain;  
    padding-bottom: 50px;
}
.divLargeImage {
    position: relative;
    text-align: center;
    color: white;
}
.divLargeText {
    text-align: left;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-family: Lato-bold;
    font-size: calc(16px + (60 - 16) * ((100vw - 300px) / (1600 - 300)));
    text-shadow: 3px 2px 4px #000000;
    width: 90%;
}
.divLargeText_SubTitle {
    font-family: Lato-bold;
    font-size: calc(11px + (30 - 11) * ((100vw - 300px) / (1600 - 300)));
}
.divSmallText {
    text-align: left;
    position: absolute;
    top: 50%;
    left: 10%;
    width: 70%;
    color: #fff;
    font-family: Lato-Regular;
    font-size: calc(12px + (20 - 12) * ((100vw - 300px) / (1600 - 300)));
    text-shadow: 3px 2px 4px #000000;
}
.TopLargeImage {
    margin-top: 0px;
}
@media (max-width: 1118px) { 
    .TopLargeImage {
        margin-top: -10px;
    }
    .divSmallText {
        top: 50%;
        left: 5%;
        width: 80%;
    }
}
@media (max-width: 800px) {
    .divSmallText {
        top: 50%;
        left: 5%;
        width: 80%;
    }
}
@media (max-width: 700px) {
    .divSmallText {
        top: 50%;
        left: 5%;
        width: 80%;
    }
}
@media (max-width: 600px) {
    .divSmallText {
        top: 50%;
        left: 5%;
        width: 80%;
    }
}
@media (max-width: 500px) {
    .divSmallText {
        top: 50%;
        left: 5%;
        width: 80%;
    }
    .divLargeText_SubTitle {
        font-family: Lato-bold;
        font-size: calc(10px + (30 - 10) * ((100vw - 300px) / (1600 - 300)));
    }
}
/*SPECIAL LINKS*********************************************************************************************************/
.speciallinkblock {
    text-align: center;
    width: 100%;
    color: #fff;
    font-family: Lato-light;
    font-size: calc(12px + (16 - 12) * ((100vw - 300px) / (1600 - 300)));
}
.specialtitle {
    font-family: Lato-Bold;
    font-size: calc(20px + (34 - 20) * ((100vw - 300px) / (1600 - 300)));
    text-shadow: 3px 2px 4px #000000;
}
.speciallink {
    margin: 0 auto;
    position: relative;
    top: -20px;
    text-align: center;
    width: 70%;
    background-color: #014671;
    border: 1px solid #7acafc;
    padding-top: 10px;
    padding-bottom: 10px;
}
.specialanchor {
    color: #fff;
    text-decoration: none;
    padding-left: 10px;
}
    .specialanchor:hover {
        color: #9fbef1;
        text-decoration: underline;
    }
.divlinks {
    text-align: left;
    padding-top: 3px;
    padding-left: 10px;
    padding-bottom: 3px;
}
hr.style-about {

    overflow: visible; /* For IE */
    padding: 0;
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(159, 190, 200, 0.75), rgba(0, 0, 0, 0));
    text-align: center;
    width: 30%;
}
@media (max-width: 800px) {
    .speciallink {
        width: 80%;
    }
}
@media (max-width: 500px) {
    .speciallinkblock {
        position: relative;
        top: 17px;
    }
    .speciallink {
        width: 95%;
    }
}
/*THREE EVENTS DISPLAYED************************************************************************************************/
.container {
    margin: 0 auto;
    width: 100%;
    display: flex;
    align-items: stretch;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.items {
    color: #000;
    width: 30%;
    background-color: #a8c0de;
}
.itemimage {
   width:100%;
   text-align: center;
   padding-top: 15px;
}
@media (max-width: 1250px) {
    .container {
        flex-direction: column;
        align-items: unset;
        align-items: center;
        justify-content: center;
    }

    .items {
        width: 95%;
        padding-top: 10px;
        border-bottom: 8px solid #d3dcec;
        padding-bottom: 40px;
    }
}
/*THREE EVENTS DISPLAYED************************************************************************************************/
.event_grid-container {
    display: grid;
    position: relative;
    top: -101px;
    justify-content: center;
    align-content: center;
    grid-gap: 10px;
    grid-auto-flow: column;
}
.divEventDesc {
    font-family: Lato-Regular;
    font-size: calc(14px + (16 - 14) * ((100vw - 300px) / (1600 - 300)));
    padding: 20px;
}
.event_child {
    background-color: #eff3f5;
    width: 400px;
    height: 100%;
}
#spaTitle1, #spaTitle2, #spaTitle3 {
    font-family: Lato-bold;
    font-size: calc(16px + (18 - 16) * ((100vw - 300px) / (1600 - 300)));
}
#spaCity1 {
    padding-left: 5px;
}
#spaLocationDetails1 {
    padding-left: 8px;
}
@media (max-width: 1250px) {
    .event_grid-container {
        grid-auto-flow: row;
        margin: 0 auto;
        width: 80%;
    }
}
@media (max-width: 600px) {
    .event_grid-container {
        position: relative;
        top: -50px;
        width:60%;
    }
}

/*FOUR SERVICES DISPLAYED************************************************************************************************/
.divServices {
    margin: 0 auto;
    width: 95%;
    text-align: center;
    background-color: #0071b9;
    Color: #fff;
    text-shadow: 3px 2px 4px #000000;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 70px;
    font-family: Lato-bold;
    font-size: calc(35px + (45 - 35) * ((100vw - 300px) / (1600 - 300)));
}
    .divServices > div > p  {
        text-shadow: none;
        font-family: Lato-bold;
        font-size: calc(12px + (12 - 12) * ((100vw - 300px) / (1600 - 300)));
        color: #efefef;
    }
    .divServices > div > p > img {
        position: relative;
        top: 4px;
        padding-right: 10px;
    }
    .divServices > div > p > span {
        padding-left: 10px;
    }
.ServiceBlock {
    margin: 0 auto;
    width: 100%;
    text-align: center;
    margin-top: 35px;
}
table, th{
    margin: 0 auto;
    text-align: left;
    border: none;
    font-family: Lato-regular;
    font-size: calc(10px + (10 - 10) * ((100vw - 300px) / (1600 - 300)));
    text-shadow: none;
    padding-right: 10px;
    padding-bottom: 5px;
    border: 1pt solid black;
    width: 50%;
}    

.ServiceButton {
    position: relative;
    top: 2px;
    left: 5px;
    font-family: Lato-regular;
    font-size: calc(10px + (10 - 10) * ((100vw - 300px) / (1600 - 300)));
    border-radius: 3px;
    padding: 2px;
    border: none;
    background: #9fbef1;
    text-shadow: none;
    box-shadow: 0px 0.5px 1px rgba(0, 0, 0, 0.1), inset 0px 0.5px 0.5px rgba(255, 255, 255, 0.5), 0px 0px 0px 0.5px rgba(0, 0, 0, 0.12);
    color: #000;
}
    .ServiceButton:focus {
        background: #679ceb;
    }
.ServiceButton2 {
    position: relative;
    top: -1px;
    left: 5px;
    font-family: Lato-regular;
    font-size: calc(10px + (10 - 10) * ((100vw - 300px) / (1600 - 300)));
    border-radius: 3px;
    padding: 2px;
    border: none;
    background: #9fbef1;
    text-shadow: none;
    box-shadow: 0px 0.5px 1px rgba(0, 0, 0, 0.1), inset 0px 0.5px 0.5px rgba(255, 255, 255, 0.5), 0px 0px 0px 0.5px rgba(0, 0, 0, 0.12);
    color: #000;
}
.ServiceButton2:focus {
    background: #679ceb;
}
.service-list-container {
        display: grid;
        position: relative;
        top: -40px;
        justify-content: center;
        align-content: center;
        grid-gap: 90px;
        grid-auto-flow: column;
    }
.a {
    text-align: center;
    font-family: Lato-bold;
    font-size: calc(10px + (16 - 10) * ((100vw - 300px) / (1600 - 300)));
}
@media (max-width: 800px) {
    table, th {
        width: 60%;
    } 
    .service-list-container {
        grid-gap: 10px;
    }
}
@media (max-width: 600px) {
    table, th {
        width: 100%;
    }
    .a {
        margin: 0 auto;
        width: 80%;
    }
}
/*OUR MISSION***********************************************************************************************/
.missionblock {
    margin: 0 auto;
    width: 90%;
}
.OurMission {
    margin: 0 auto;
    background-image: linear-gradient(0deg, rgba(2,0,36,.85) 0%, rgba(9,9,121,.85) 35%, rgba(0,212,255,.95) 100%), url('../images/DefaultPage/MetisSymbol2.png');
    overflow: auto;
    color: #fff;
    padding: 20px 20px 90px 20px;
    text-shadow: 3px 2px 4px #000000;
}
#OurMission2, #OurMission3 {
    display: none;
}

.mission-title {
    font-family: Lato-bold;
    font-size: calc(16px + (22 - 16) * ((100vw - 300px) / (1600 - 300)));
}
.mission-body {
    font-family: Lato-regular;
    font-size: calc(12px + (16 - 12) * ((100vw - 300px) / (1600 - 300)));
}
.alignimage {
    text-align:unset ;
}
.missionimage {
    float: right;
    margin: 0 0 0 15px;
}
.missionanchor {
    color: #fff;
    text-decoration: underline;
}
hr.style-footer {
    overflow: visible; /* For IE */
    padding: 0;
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(200, 200, 200, 0.75), rgba(0, 0, 0, 0));
    text-align: center;
}
hr.style-eight {
    overflow: visible; /* For IE */
    padding: 0;
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    text-align: center;
}
    hr.style-eight:after {
        content: "Our Mission";
        font-family: Lato-bold;
        font-size: calc(30px + (42 - 30) * ((100vw - 300px) / (1600 - 300)));
        display: inline-block;
        position: relative;
        top: -0.7em;
        padding: 0 0.25em;
        background: #d2dbec;
    }
.mission-thumbs {
    margin: 0 auto;
    display: grid;
    position: relative;
    top: -80px;
    justify-content: center;
    align-content: center;
    grid-gap: 20px;
    grid-auto-flow: column;
    padding: 20px;
    width: 40%;
}
.spa-thumb-nail1 {
    border-top: 8px solid red;
}
@media (max-width: 1000px) {
    .mission-thumbs {
        width: 50%;
    }
}
@media (max-width: 800px) {
    .OurMission {
        width: 95%;
        grid-template-columns: 7r 2r;
    }
    .mission-thumbs {
        width: 70%;
    }
    .alignimage {
        margin: 0 auto;
        text-align: center;
    }
    .missionimage {
        float: none;
        margin: 0 0 0 0px;
        padding-bottom: 15px;
    }
}
.footer {
    margin: 0 auto;
    text-align: center;
    color: #fff;
    background-color: #004d71;
    padding: 40px;
    font-family: Lato-light;
    font-size: calc(12px + (14 - 12) * ((100vw - 300px) / (1600 - 300)));
}
.button-12 {
    display: flex;
    position: relative;
    top: 5px;
    width: 100px;
    flex-direction: column;
    align-items: center;
    padding: 4px 14px;
    font-family: Lato-regular;
    font-size: calc(12px + (12 - 12) * ((100vw - 300px) / (1600 - 300)));
    border-radius: 6px;
    border: none;
    background: #9fbef1;
    box-shadow: 0px 0.5px 1px rgba(0, 0, 0, 0.1), inset 0px 0.5px 0.5px rgba(255, 255, 255, 0.5), 0px 0px 0px 0.5px rgba(0, 0, 0, 0.12);
    color: #000;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

    .button-12:focus {
        box-shadow: inset 0px 0.8px 0px -0.25px rgba(255, 255, 255, 0.2), 0px 0.5px 1px rgba(0, 0, 0, 0.1), 0px 0px 0px 3.5px rgba(58, 108, 217, 0.5);
        outline: 0;
    }
.footer-company-logo {
    padding-right: 10px;
}