@import url('https://fonts.googleapis.com/css?family=Alegreya+SC|Istok+Web:400,700|Montserrat:400,500');
/* font-family: 'Montserrat', sans-serif; --- for logo name and headers.
font-family: 'Alegreya SC', serif;  --- for Quotations
font-family: 'Istok Web', sans-serif; ---for main text */

@font-face {
  font-family: 'bodoni';
  src: url('../fonts/Bodoni 72 Smallcaps Book.ttf') format('woff');
}/* For quotes*/


@font-face {
    font-family: 'heiti-light';
    src: url("//db.onlinewebfonts.com/t/209cc623f7e199b28118233d2d3be7bb.eot");
    src: url("//db.onlinewebfonts.com/t/209cc623f7e199b28118233d2d3be7bb.eot?#iefix") format("embedded-opentype"),
    }/* For text*/

@font-face {
    font-family: 'heiti-medium';
    src: url("//db.onlinewebfonts.com/t/0ba7db29f9f2b275516bb07240367237.eot");
    src: url("//db.onlinewebfonts.com/t/0ba7db29f9f2b275516bb07240367237.eot?#iefix") format("embedded-opentype"),
   } /* For logo Name an headers*/

@font-face {
  font-family: 'tamil';
  src: url('../fonts/Tamil MN.ttc') format('woff');
}/* For for intro text*/




/* --------------------------Fonts-------------------------- */

/* menus, headers, and logos */

h1,
a,
h2 {
    font-family: 'heiti-medium','Montserrat', sans-serif;
}

/* for quotations */

.quote {
    font-family: 'bodoni','Alegreya SC', serif;
    color: rgb(255, 240, 128);
}

/* for text */

p {
    font-family: 'heiti-light','Istok Web', sans-serif;
    color: #ffff;
}


/* ----------------------------Modal------------------------ */

#map-modal.closed{
    display: none;
}

#map-modal.open{
    display:flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 9;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(101, 102, 110, 0.8);

}

.inner-modal{
    padding: 7%;
    background-color: rgba(93, 94, 94, 0.8);
    border-radius: 12px;
}

.close {
    position: absolute; 
    left:77vw;
    bottom: 77vh;
    height: 3em;
    width: 3em;
}


#map{
    min-height: 50vh;
    min-width: 50vw;
    border-radius: 12px;
    border: 5px solid rgb(209, 91, 44);
   
}



.close:hover{
    height: 4em;
    width: 4em;
}


/* -----------------------All flexed elements-------------------------- */

#nav-container,
.nav-logo{
     display: flex;
     display: -webkit-flex;

}

/* -----------------------Nav bar-------------------------- */

#nav-container {
    height: 10%;
    width: 100%;
    position: fixed;
    background-color: rgba(144, 137, 137, .97);
    flex-direction: row;
    justify-content: space-around;
    margin-top: -15px;
    padding-top: 1%;
    overflow: hidden;
    z-index: 9;
}

.mobile-nav-button{
    display: block;
    margin-top: 1em;
    margin-left: -70%;
    background-color: rgba(144, 137, 137, .97);
    border: none;

}

.button-img {
    max-height: 2.6em;
}

.flex-container, 
.nav-logo-img, 
.nav-logo,
.mobile-nav {
    display: none;
}

.flex-container a:hover{
    color: rgba(255, 183, 81, 1);
    font-size: 1.9em;

}

.open-nav{
     display:flex;
     display: -webkit-flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-around;
     position: fixed;
     z-index: 9;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     overflow: auto;
     background-color: rgba(226, 198, 170, 1);

}

.open-nav a {
  text-decoration: none;
  color: rgb(28, 49, 68);
  font-size: 1.5em;
}

.open-nav .nav-logo{
    display: flex;
    display: -webkit-flex;
}

.open-nav .nav-logo .nav-logo-img{
     display: block;
     margin: auto;
     max-width: 6vmax;
     background-color: rgba(226, 198, 170, 1);



}

/* ----------------------index main text-------------------- */

#opening-text p.main-text{
    font-family: 'tamil', 'Istok Web', sans-serif;
}


/* -----------------------footer-------------------------- */

#footer-container{
    background-color: rgba(146, 163, 175, .97);
    height: 20vh;
    width: 100%;
    z-index: 999;
}

.grid-container,
.tab-n-desk-foot {
    display: none;
    background-color: rgba(146, 163, 175, .97);


}

#foot-flex-container{
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    height: 100%;
}

.mobile-foot {
    display: block;
    height: 10vh;
    width: 10vw;
    background-size: contain;
    background-repeat: no-repeat;
    margin:0;
}

.address-one{
    background-image: url("../images/placeholder.png");
}

.address-two{
    background-image: url("../images/placeholders.png");
}

.address-one:hover,
.address-two:hover{
    cursor: pointer;
}

.phone{
    background-image: url("../images/old-handphone.png");
}

.fb{
    background-image: url("../images/facebook-logo.png"); 
}

.facebook-link{
    background-color: rgba(146, 163, 175, .97);

}

@media only screen and(min-width: 768px){
    
    .grid-container {
        padding: 0 1vw;
    }
}

@media only screen and (max-width: 823px) and (min-height: 314px) and (orientation: landscape) {
  /* -----------------Nav bar-------------------- */
  #nav-container {
    height: 20vh;
  }
}

@media only screen and (min-width:767px){
 
/* -----------------------Nav bar-------------------------- */
    #nav-container{
        background-image: none;
    }
    .flex-container {
      /* flex-grow: 2; */
        display: flex;
        display: -webkit-flex;
        width: 80%;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        text-shadow: 1px 1px 0 rgba(28, 49, 68, .06),
        -1px 1px 0 rgba(28, 49, 68, .06),
        1px -1px 0 rgba(28, 49, 68, .06),
        -1px -1px 0 rgba(28, 49, 68, .06),
        0px 1px 0 rgba(28, 49, 68, .06),
        0px -1px 0 rgba(28, 49, 68, .06),
        -1px 0px 0 rgba(28, 49, 68, .06),
        1px 0px 0 rgba(28, 49, 68, .06),
        2px 2px 0 rgba(28, 49, 68, .06),
        -2px 2px 0 rgba(28, 49, 68, .06),
        2px -2px 0 rgba(28, 49, 68, .06),
        -2px -2px 0 rgba(28, 49, 68, .06),
        0px 2px 0 rgba(28, 49, 68, .06),
        0px -2px 0 rgba(28, 49, 68, .06),
        -2px 0px 0 rgba(28, 49, 68, .06),
        2px 0px 0 rgba(28, 49, 68, .06),
        1px 2px 0 rgba(28, 49, 68, .06),
        -1px 2px 0 rgba(28, 49, 68, .06),
        1px -2px 0 rgba(28, 49, 68, .06),
        -1px -2px 0 rgba(28, 49, 68, .06),
        2px 1px 0 rgba(28, 49, 68, .06),
        -2px 1px 0 rgba(28, 49, 68, .06),
        2px -1px 0 rgba(28, 49, 68, .06),
        -2px -1px 0 rgba(28, 49, 68, .06);

    }

    .mobile-nav-button{
        display: none;
    }

    a {
        text-decoration: none;
        color: white;
        font-size: 1.5em;

    }

    .nav-logo {
        display: flex;
        align-items: center;
    }

    .nav-logo-img {
        display: block;
        margin: auto;
        max-width: 4vmax;
        background-color: rgba(144, 137, 137, .97);

    }

/* -----------------------footer-------------------------- */
    #footer-container{
        height: 45vh;
        /* margin-top: em; */
    }
    #foot-flex-container,
    .mobile-foot{
        display:none;
    }

    .tab-n-desk-foot {
        display: block;
    }

    .grid-container {
        display: grid;
        display: -ms-grid;
        grid-template-areas: 
        "em title-one title-one title-one title-one . title-two title-three empt"
        "emp address-one address-one address-two address-two . phone-number facebook empty";
        padding: 0 2vw;

    }

    .address-header{
        grid-area: title-one;
    }

    #gmaps-one{
        grid-area: address-one;
    }

    #gmaps-two{

        grid-area: address-two;
    }

    #gmaps-one:hover,
    #gmaps-two:hover{
        cursor: pointer;
    }

    .phone-header{
        grid-area: title-two;
        text-align: center;
    }

    .phone-number{
        grid-area: phone-number;
        text-align: center;

    }

    .facebook-link{
        grid-area: facebook;
    }

    .facebook-header{
        grid-area: title-three;
    }

    .facebook-link{
        display: flex;
        flex-direction: row;
        align-content: center;
    }

    .facebook-link img{
        max-width: 1.7em;
        max-height: 1.7em;
        margin-top: .3em;
    }
    

}