body,
html {
    margin: 0;
    font-family: 'Source Sans Pro', sans-serif;
}

.sec {

    position: relative;
    height: 100vh;
    -webkit-box-sizing: border-box;
    /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;
    /* Firefox, other Gecko */
    box-sizing: border-box;
}

a {
    color: inherit;
    text-decoration: none;
}

#sec1 {

    background-size: cover;
    background-repeat: no-repeat;
    background-image: url('assets/banner.jpg');
}

#sec3 {
    background-color: #297184
}

.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.8);
    /* Black w/ opacity */
}

/* Modal Content */

.modal-content {
    background-color: #fefefe;
    margin: 6%;
    height: 93%;
   
    
}

.modal-content #sec2 {}

#sec4 {}

#sec6 {}

#sec5 {
    box-shadow: 0px -45px 114px 0px rgba(16, 85, 127, 0.08);
    height: 80vh;
}

.logoM {
    max-height: 10%;
    height: 10%;
    position: absolute;
    top: 8vh;
    left: 8vw;
    margin: auto;
}

.logoR {
    max-height: 110vh;
    height: 110vh;
    position: absolute;
    bottom: -60vh;
    right: 0;
    width: 50vw;
}

.logoF {
    max-height: 100%;
    width: auto;
    height: 30%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 10vw;
    margin: auto;

}

.ct {
    display: flex;
    /* flex-direction: column;*/
    align-items: center
    /* justify-content: center;*/
}


.mvm {
    justify-content: center;
    width: 100%;
    height: 100%;
    color: white;
}

.mvm h1 {
    font-size: 10vw;
}

.cmM {
    margin-left: 5vw;
    margin-right: 5vw;
}

.cmM h2 {
    font-size: 5vw;
    font-weight: 400;
}

.btn > h2 {
    transition: all 0.5s;
}

.btn > .unLW {
    transition: all 0.5s;
}

.btn:active .unLW {
    width: 52%;
    height: 0.7vh;
}

.unLW {
    width: 50%;
    height: 0.3vh;
    background-color: white;
    bottom: 0;
}

.wrapper-mod {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items:stretch;
    position: relative;
    height: 76%;
}

.item1{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
        padding-left: 2%;
   
    
}
.lin{
    flex-grow: 1;
    display: flex;
     align-items: center;
    
}
.ln2{
    flex-grow: 4;
    padding-left: 1%;
    font-size: 3vw;
}
.cir2{
    align-items: center;
    border: 4px solid rgb(118, 190, 208);
    margin-left: 2vw;
    text-align: center;
    color: rgb(118, 190, 208);
    flex-grow: 1;
    width: 5vw;
    height: 5vw;
    max-width: 5vw;
    max-height: 5vw;
    border-radius: 5vw;
    font-size: 3.5vw;
}
.item2{
    display: none;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
}

.cicleFix{
    width:15vw; /* 20% of the viewport width */
    height: 15vw;
    background-color: rgb(209,234,240);
    border-radius:7.5vw;
    display: flex;
    align-items: center;
    justify-content: center;
    
        
}
.cicleFix > img {
    height: 60%;
    
}

.mod-item {

    flex-grow: 1;
    flex-basis: 0;
    width: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bg{
    border-left: none;
}


.mod-item > div {
    color: rgb(118, 190, 208);
    text-align: center;
    width: 50%;
    cursor: pointer;
}

.mod-item > div > img{
   width: 30%;
}

.b23 {
    display: none;
}
.cj {

    position: absolute;
    width: 100vw;
    height: 70vh;

}

#sSec {
    width: 40%;
    position: absolute;
    min-height: 97vh;
    top: 0;
    left: 0;
    background-color: #f9fbfd;
}

.cTi {
    position: relative;
    display: flex;
    /* flex-direction: column;*/
    align-items: center;
    /* justify-content: center;*/
    height: 30vh;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    color: black;
    width: 88vw;
}

.cTil {
    padding-left: 12vw;
}

.wy {
    width: 86vw;
    margin-left: 8vw;

}

.wy img {
    margin-left: 1vw;
    height: 10vw;
    width: 10vw;
}

.wy > div {
    padding-top: 3.5vw;
    padding-bottom: 3.5vw;
    margin-left: 5vw;
}

.wy > div > h2 {
    font-size: 3vw;
    font-weight: 400;
}

.ttd {
    justify-content: center;
    height: 100%;
    color: white;
    background-image: url('assets/banner2.png');
}


.txc {
    width: 80%;
}

.txc p {

    text-align: inherit;
}

.txc h1 {

    text-align: center;
}

#mcSec {

    width: 100vw;
    position: relative;
    height: 100vh;


}

#tSec {
    width: 100vw;
    position: relative;
    min-height: 5vh;
    top: 0;
    left: 0;
    right: 0;
    background-color: #d2eaef;
}

#trmSec {
    width: 100vw;
    position: relative;
    min-height: 6.2vh;
    top: 0;
    left: 0;
    right: 0;

}

.perc > div {

    height: 33.3%;
    max-height: 100%;
    text-align: center;
}

.cn h1 {
    width: 100%;
    color: #297184;
    font-size: 5vh;
    font-weight: 300;

}

.cn h2 {
    width: 100%;
    font-weight: 200;


}

.cn {
    width: 100%;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 3vh;
}

.rTi {
    display: flex;
    /* flex-direction: column;*/
    align-items: center;
    /* justify-content: center;*/
    height: 10vh;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;

    color: black;
    font-size: 4vw;

}

.rTic {
    justify-content: center;
    text-align: center;
}

.parentP {

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding: 5%;
    position: relative;
}

.parentPChild {
    flex-grow: 1;
    height: 25vh;
    margin: 2.5%;
    display: flex;
    cursor: pointer;
}

.childA {
    position: relative;
    height: 100%;
    flex-grow: 1;

}

.childB {
    position: relative;
    height: 100%;
    width: auto;
    flex-grow: 2;
}

.package_update {
    font-size: 1.5vh;
    text-align: center;
    width: 80vw;
    height: 17.5vh;
    margin-bottom: 2.5vw;
    margin-top: 2.5vw;
    margin-left: 10vw;
    margin-right: 10vw;
    float: left;
}

.previous_update {
    font-size: 1.5vh;
    text-align: center;
    width: 80vw;
    height: 17.5vh;
    margin-bottom: 2.5vw;
    margin-top: 2.5vw;
    margin-left: 10vw;
    margin-right: 10vw;
    float: left;
}

.sb {
    box-shadow: 0px 0px 80px 0px rgba(16, 85, 127, 0.08);
}


.cir {
    max-height: 10vw;
    max-width: 10vw;
    width: 10vw;
    height: 10vw;
    border: 4px solid rgb(118, 190, 208);
    border-radius: 6vw;
    margin-left: 6vw;
    font-size: 3vw;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.cir > img {
    height: 60%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.cir h1 {
    color: rgb(118, 190, 208);
    margin-top: 10%;
}

.t2 {
    font-size: 0.7em;
    text-align: inherit;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);


}

.t2 h1 {
    font-weight: 400;
}

.frm {

    text-align: center;
    width: 90vw;
    height: 17vh;
    margin-bottom: 2.5vw;
    margin-top: 2.5vw;
    margin-left: 2.5vw;
    margin-right: 2.5vw;
    float: left;

}

.forCon {
    transition: all 0.5s;
    font-size: 0.6em;
    width: 60%;
    height: 50%;
    margin-left: 20%;
    margin-right: 20%;
    top: 0;
    bottom: 0;

}

.unL {
    width: 100%;
    height: 10%;
    background-color: black;
    bottom: 0;
}

.rTil {
    padding-left: 6vw;
}

#footer {
    position: absolute;
    overflow: hidden;
    min-height: 16vh;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100vw;
    background-color: #297184;
    color: white;
}

#mpSec {
    width: 90vw;
    position: relative;
    height: 56vh;
    left: 6vw;
    top: 0;
}


.map {
    margin-left: 3%;
    width: 90%;
    height: 50vh;
    background-color: black;

}

.rd {
    width: 100%;
    color: black;
}

.rd h3 {
    margin-left: 25%;
    margin-right: 25%;
    font-weight: 400;


}


.hdd {
    display: none;

}

.mvv {
    top: 0;
    right: 0;
    padding-right: 5vw;
    width: 50%;
    height: 100%;
    position: absolute;
    font-size: 1.8vw;

}


.mvv h1 {
    font-weight: 400;

}

.omp h1 {

    font-size: 3vw;
    font-weight: 400;
}


@media only screen and (min-width: 750px) {
    
    .bg{
        border-left: solid 1px rgb(41, 113, 132);
    }
    .modal-content{
         height: 84%;
    }
    .cir2{
    align-items: center;
    max-height: 2vw;
    max-width: 2vw;
    width: 2vw;
    height: 2vw;
    border: 4px solid rgb(118, 190, 208);
    border-radius: 2vw;
    margin-left: 2vw;
    font-size: 1.5vw;
    text-align: center;
    color: rgb(118, 190, 208);
    flex-grow: 1;
    }
    .ln2{
        flex-grow: 4;
        padding-left: 1%;
        font-size: 1.5vw;
    }
    .parentP{
       flex-direction: row; 
    }
    
    .wrapper-mod{
        flex-direction: row;
    }
    
    .item2{
        display: flex;
    }
    #footer {
        position: relative;
        overflow: hidden;
        min-height: 16vh;
        top: 12vh;
        right: 0;
        left: 0;
        width: 100vw;
        background-color: #297184;

    }

    .hdd {
        display: inline;

    }
    .mvv {
        display: none !important;
    }

    #sSec {
        width: 40%;
        position: absolute;
        min-height: 97vh;
        top: 0;
        left: 0;
        background-color: #f9fbfd;
    }



    .sIm {
        width: 50%;
        position: relative;
        min-height: 100vh;
        top: 0;
        bottom: 0;
        left: 0;
        background-size: cover;
        background-repeat: no-repeat;
        background-image: url('assets/banner2.png');
    }



    #mpSec {
        width: 90vw;
        position: relative;
        min-height: 56vh;
        left: 6vw;
        top: 0;
    }

    .rTi {

        height: 20vh;
        font-size: 2vw;

    }

    .enL {
        width: 16vw;
        left: 7vw;
    }



    .fDl {

        height: 100%;
        position: absolute;
        width: 50%;
        color: white;
    }

    .fDr {
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        width: 50%;
        color: white;
    }

    .cDr {

        font-size: 16px;
        max-height: 100%;
        max-width: 100%;
        width: auto;
        height: 60%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: -6vw;
        margin: auto;
        text-align: left;
    }

    .cDl {
        max-height: 100%;
        max-width: 100%;
        width: auto;
        height: 60%;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 15vw;
        margin: auto;
        text-align: left;

    }

    .cDl > h1,
    .cDr > h1 {
        font-size: 1.8vw;
        font-weight: 400;
        width: 80%;
        margin-top: 0px;
    }


    .map {
        width: 69%;
        background-color: black;
    }

    .rd {
        width: 31%;
        color: black;
    }

    .rd h3 {
        margin-left: 25%;
        margin-right: 25%;
        font-weight: 400;


    }

    .package_update {
        font-size: 1.5vh;
        text-align: center;
        width: 45vw;
        height: 28vh;
        margin-bottom: 2.5vw;
        margin-top: 2.5vw;
        margin-left: 5vw;
        margin-right: 2.5vw;
        float: left;
    }

    .previous_update {
        font-size: 1.5vh;
        text-align: center;
        width: 40vw;
        height: 28vh;
        margin-bottom: 2.5vw;
        margin-top: 2.5vw;
        margin-left: 2.5vw;
        margin-right: 5vw;
        float: left;
    }



    .cir {
        align-items: center;
        max-height: 6vw;
        max-width: 6vw;
        width: 6vw;
        height: 6vw;
        border: 4px solid rgb(118, 190, 208);
        border-radius: 3.2vw;
        margin-left: 4vw;
        position: absolute;
        font-size: 2vw;

    }

    .cir h1 {
        color: rgb(118, 190, 208);
        margin-top: 5%;
    }



    .t2 {
        font-size: 1em;
        text-align: inherit;


    }

    .t2 h1 {
        font-weight: 400;
    }

    .frm {

        text-align: center;
        width: 40vw;
        height: 28vh;
        margin-bottom: 2.5vw;
        margin-top: 2.5vw;
        margin-left: 2.5vw;
        margin-right: 5vw;
        float: left;

    }

    .forCon {
        transition: all 0.5s;
        font-size: 0.7em;
        width: 50%;
        height: 25%;
        margin-left: 12.5%;
        margin-right: 12.5%;
        padding-left: 12.5%;
        padding-right: 12.5%;
        top: 0;
        bottom: 0;
        cursor: pointer;

    }

    .forCon:hover .unL {
        height: 11%;
        width: 102%;
    }
    .forCon:hover {
        cursor: pointer;
        font-size: 0.8em;
    }


    .unL {
        width: 100%;
        height: 10%;
        background-color: black;
        bottom: 0;
    }

    #mcSec {

        width: 95vw;
        position: relative;
        min-height: 100vh;
        left: 5vw;
        top: 0;
        bottom: 0;

    }

    .ttd {
        background-image: url('');
        justify-content: center;
        width: 50%;
        color: white;
    }

    .txc {
        width: 80%;

    }

    .txc h1 {
        font-size: 4vw;
        text-align: center;
    }

    .txc p {
        font-size: 1.5vw;
        text-align: inherit;
    }

    .mvm {
        justify-content: center;
        width: 100%;
        height: 100%;
        color: white;
    }

    .mvm h1 {
        font-size: 5vw;
    }

    .logoM {
        display: block;
        max-height: 95px;
        max-width: 306px;
        width: auto;
        height: auto;
        position: absolute;
        top: 8vh;
        left: 8vw;
    }

    .unLW {
        width: 20%;
        height: 0.3vh;
        background-color: white;
        bottom: 0;
    }

    .cmM {
        margin-left: 22vw;
        margin-right: 22vw;
    }

    .cmM h2 {
        font-size: 1.5vw;
        font-weight: 400;
    }


    .logoR {
        max-height: 110vh;
        height: 110vh;
        position: absolute;
        bottom: -72vh;
        right: 0;
        margin: auto;
        width: auto;


    }

    .perc {
        display: flex;
        height: 40vh;
        max-height: 40vh;
        margin-top: 30vh;
        margin-right: 10vw;
        margin-left: 10vw;

    }

    .perc > div {
        flex: 1;
        /*grow*/
        height: 100%;
        max-height: 100%;
        text-align: center;
    }

    .cn h1 {

        color: #297184;
        font-size: 13vh;
        font-weight: 300;

    }

    .cn h2 {
        font-weight: 200;
    }

    .cn {
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        margin: 5vh;
    }


    .cTi {
        position: relative;
        display: flex;
        /* flex-direction: column;*/
        align-items: center;
        /* justify-content: center;*/
        height: 30vh;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        color: black;
        font-size: 1.6vw;
    }

    .cTil {
        padding-left: 12vw;
    }

    .cj {

        position: absolute;
        width: 100vw;
        height: 70vh;

    }

    .wy {
        width: 86vw;
        padding-left: 14vw;
        margin-left: 0;
    }

    .wy img {
        margin-left: 1vw;
        height: 3vw;
        width: 3vw;
    }

    .wy > div {
        padding-top: 0.3vw;
        padding-bottom: 0.3vw;
        margin-left: 2vw;
    }

    .wy > div > h2 {
        font-size: 1.5vw;
        font-weight: 400;
    }



    .logoF {
        height: 50%;
    }
    .btn {
        cursor: pointer;
    }

    .btn > h2 {
        transition: all 0.5s;
    }

    .btn .unLW {
        transition: all 0.5s;
    }

    .btn:hover .unLW {
        width: 21%;
        height: 0.7vh;
    }


}






#container {}