:root{--user-section-background:#f2f2f2;--user-section-border-color:#ccc; --faded-black:#5c5d5e;
    --white-color:#fff; --primary-color:#00BADD; --rghtslde-width:81.7%; --lftslde-width:17%;
    --black:#000; --i-name-height:50px; --primary-dark-color:#037ABD; --accent-color:#A479B3; 
    --nav-bar-color:#4575bd; --orange: #0007a1}
@media(min-width: 1280px) {
    :root{--header-logo-width:34px; --viewport:1200px; --normal-font-size:13px; --large-font-size:15px;
    --text-large-padding-h:16px; --searchbox-width:300px; --very-large-font-size:20px; --small-font-size:11px;
    --six-rows:16.666666%; --five-rows:20%; --three-rows:33.333333%; --search-viewport:900px}
    .viewport{width:var(--viewport); margin:0 auto}
    .dummy{height: 100px;}
}
@media(min-width: 1100px) and (max-width: 1279px) {
    :root{--header-logo-width:34px; --viewport:1000px; --normal-font-size:11.5px;  --large-font-size:15px;
    --text-large-padding-h:10px; --searchbox-width:300px;  --very-large-font-size:20px; --small-font-size:10px;
    --six-rows:16.666666%; --three-rows:33.333333%; --search-viewport:900px; --five-rows:20%;}
    .viewport{width:var(--viewport); margin:0 auto}
    .dummy{height: 100px;}

}
@media(min-width: 720px) and (max-width: 1099px) {
    :root{--header-logo-width:34px; --viewport:96%;  --normal-font-size:10.5px;  --large-font-size:13px;
        --text-large-padding-h:10px; --searchbox-width:200px;  --very-large-font-size:16px;  --small-font-size:8px;
        --six-rows:33.333333%; --three-rows:33.333333%; --five-rows:25%;}
    .viewport{width:var(--viewport); margin:0 auto}
    .dummy{height: 120px;}

}
@media(min-width: 480px) and (max-width: 719px) {
    :root{--header-logo-width:70px; --viewport:96%;  --normal-font-size:10.5px;  --large-font-size:11.5px;
        --text-large-padding-h:10px; --searchbox-width:200px;--rghtslde-width:100%; --lftslde-width:0%;
        --very-large-font-size:14px; --small-font-size:8px; --six-rows:50%; --i-name-height:20px;
        --three-rows:49.333333%; --five-rows:50%;}
    .viewport{width:var(--viewport); margin:0 auto}
    .dummy{height: 150px;}
}
@media(min-width: 400px) and (max-width: 479px) {
    .dummy{height: 160px;}
    :root{--header-logo-width:70px; --viewport:96%;  --normal-font-size:10.5px;  --large-font-size:11.5px;
        --text-large-padding-h:10px; --searchbox-width:200px;--rghtslde-width:100%; --lftslde-width:0%;
        --very-large-font-size:14px;  --small-font-size:8px;  --six-rows:50%; --i-name-height:20px;
        --three-rows:100%; --five-rows:50%;}
    .viewport{width:var(--viewport); margin:0 auto}}
@media(max-width: 399px) {
    :root{--header-logo-width:60px; --viewport:96%;  --normal-font-size:10.5px;  --large-font-size:11.5px;
        --text-large-padding-h:10px; --searchbox-width:200px;--rghtslde-width:100%; --lftslde-width:0%;
        --very-large-font-size:14px;  --small-font-size:8px;  --six-rows:50%; --i-name-height:20px;
        --three-rows:100%; --five-rows:50%;}
    .dummy{height: 180px;}
    .viewport{width:var(--viewport); margin:0 auto}

}

.modaal-overlay{z-index: 999999 !important}
.modaal-wrapper {z-index: 9999991 !important}
body{margin: 0; padding: 0; text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased; margin-top: -1px; font-family: sans-serif;}
* {-webkit-box-sizing: border-box;box-sizing: border-box;}
img{width: 100%;}
ul{margin: 0; padding: 0;}
a{font-family: 'Open Sans', Arial, Helvetica, 'Nimbus Sans L', sans-serif;
    font-size: 13px; line-height: 20px; font-weight: normal; color: inherit;
    font-style: normal; text-transform: none; text-decoration: none;}
.svg-wrp{display: inline-flex; justify-content: center; cursor: pointer;
    align-items: center; border: 1px solid #7f7f7f;
    border-radius: 50%; width: 35px; height: 35px;
    line-height: 30px; text-align: center;}
.svg-wrp svg{stroke: #7f7f7f; width:15px}
.form-control{background-color: #fff;
    border: 1px solid #ccc;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    -webkit-transition: border linear .2s,box-shadow linear .2s;
    -moz-transition: border linear .2s,box-shadow linear .2s;
    -o-transition: border linear .2s,box-shadow linear .2s;
    transition: border linear .2s,box-shadow linear .2s;
    display: inline-block;
    padding: 25px 10px;
    margin-bottom: 10px;
    font-size: 16px;
    resize: none;
    line-height: 20px;
    color: #555;
    vertical-align: middle;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    width: 100%;}
.pg-ttl-wrap{width:100%; position: relative;}
.pg-ttl-in{position: absolute; top: 0; bottom: 0;left: 0; right: 0;
    display: flex; align-items: center; justify-content: center;}
.pg-ttl{border:1px solid #fff; padding:40px 80px; 
    color: white; background: rgba(255, 255, 255, .1);
    -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1); font-family: poppins;
    font-size: 40px; font-weight: bold;}
.his-wrap{width:80%; margin:0 auto; padding:40px 0;}
.his-wrap .his-ctn{width: 70%; margin: 0 auto; background: rgba(255, 255, 255, .1);
    -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1); padding:20px;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);}
.his-ttle{font-family: poppins; font-weight: bold;
    color: var(--nav-bar-color); font-size: 50px;}
.his-ctn p{user-select:none; font-family: sans-serif; font-size: 14px; line-height: 1.7em;}
.testimony{margin-bottom:15px;}
.testimony .test-hd{background: var(--nav-bar-color); padding: 10px; font-weight: bold; color: white;}
.testimony p{margin: 0; font-size: 15px;}
.testimony b{font-size: 14px;}
.watermark{position: fixed; opacity: .03; width: 60%; left: 20%;}
.wwb{text-align: center; font-family: mt-bold; font-size: 20px; margin-top:30px}
.wwb .line{width:80px; height: 2px; background-color: red; margin:5px auto}
.wwb p{max-width: 80%; font-size: 15px; margin:10px auto}
.boxwrap{display: flex; flex-wrap: wrap; margin-top:30px}
.boxwrap .box{background-color: white; width: 45%;  font-family: mt-bold;
    -webkit-box-shadow: inset 10px 20px 10px rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.075);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.075); 
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.075);
    border-radius: 20px; margin-top:20px; margin-bottom: 20px;}
.boxwrap .box:nth-child(odd){margin-left: auto; margin-right:2%}
.boxwrap .box:nth-child(even){margin-right: auto; margin-left: 2%;}
.box .title{margin-top:30px; text-align: center; color: red; font-size: 20px;}
.box .desc{margin:5px 15px 30px; color: #000; font-size: 15px; text-align: center;}
.black-wrap{ margin:40px 0;width:100%; padding:70px 0; background:url('../fls/bg-4.png') fixed #000; background-size: cover;}
.black-wrap .container{display: flex;}
.black-wrap .box{background-color: rgba(0,0,0,0.5); width: 45%;  font-family: mt-bold; border-radius: 20px; margin-top:20px; margin-bottom: 20px;}
.black-wrap .desc{color: white;}
.black-wrap .box:nth-child(odd){margin-left: auto; margin-right:2%}
.black-wrap .box:nth-child(even){margin-right: auto; margin-left: 2%;}
.boxwrap .bigbox{width: 100%;}
.hd-wrp{ text-align: center;}
.hd-wrp h4{font-size: 25px; font-family: poppins; font-weight: 500; margin: 0 0 30px; 
    display: inline-block; text-transform: uppercase;}
.hd-wrp h4:after{content: "";height: 2px; display: block; width: 70%; transition: all linear 0.2s; -o-transition: all linear 0.2s;
    -moz-transition: all linear 0.2s; -webkit-transition: all linear 0.2s; background-color: var(--primary-dark-color); margin: 10px auto 0;}
.albums-wrap{padding:30px 0}
.albums-wrap .albums{display: flex; flex-wrap: wrap; justify-content: center;}
.albums .album{padding: 5px; float:none; margin: 10px 0; display: block;}
.album-in{padding:15px; background: var(--white-color); border-radius: 20px;}
.album-in .img-grp{border-radius: 20px; display: flex; flex-wrap: wrap; overflow: hidden;}
.album .img-grp div{width: 50%; padding-bottom: 50%;
    height: 0; overflow: hidden;}
.album-in p{text-align: center; font-family: sans-serif; font-size: 13px; font-weight: bold; text-transform: uppercase; margin-top: 10px; margin-bottom: 0;}
.gal-img{width: 100%; padding-bottom: 100%; height: 0; overflow: hidden;}
footer{background: #04003c;
    text-align: center;
    color: white !important;
    padding: 20px;
    font-family: sans-serif !important;
    font-weight: bold !important; font-size: 14px !important;}
@media(min-width: 480px) and (max-width: 767px) {
    .boxwrap .box{width:90%; margin:15px auto}
    .black-wrap .box {width:90%; margin:15px auto; padding-top:15px; padding-bottom: 15px;}
    .boxwrap .box:nth-child(odd) {margin: 15px auto}
    .black-wrap .box:nth-child(odd){margin: 15px auto}
    .boxwrap .box:nth-child(even){margin: 15px auto}
    .black-wrap .box:nth-child(even){margin: 15px auto}
    .black-wrap .container{display: block;}
}
@media (max-width: 480px) {
}

@media(max-width: 479px) {
    .pg-ttl-wrap{width: 100%; min-height: 300px; overflow: hidden;}
    .pg-ttl-wrap img{height: 100%; width: auto;}
    .pg-ttl{padding: 10px 15px; font-size: 20px;}
    .his-wrap{width: 100%;}
    .his-wrap .his-ctn {width: 90%;}
    .his-ttle {font-size: 30px;}
    .boxwrap .box{width:90%; margin:15px auto}
    .black-wrap .box {width:90%; margin:15px auto;  padding-top:15px; padding-bottom: 15px;}
    .boxwrap .box:nth-child(odd) {margin: 15px auto}
    .black-wrap .box:nth-child(odd){margin: 15px auto}
    .boxwrap .box:nth-child(even){margin: 15px auto}
    .black-wrap .box:nth-child(even){margin: 15px auto}
    .black-wrap .container{display: block;}
}

.events-wrap{width:90%; display: flex; flex-wrap: wrap; margin-top:60px; justify-content: center;}
.events-wrap .events{width:25%; border-radius: 20px; margin:20px 2%; background: white; padding-bottom:10px; overflow: hidden;}
.events .ev-img{cursor:pointer; width:100%; overflow: hidden; height:200px; position: relative;}
.events .ev-img .ov{background: rgba(0,0,0,.7); position: absolute; width: 100%; 
    height: 100%; top:0; left:0; opacity: 0; transition:all 0.3s ease-in-out ;}
.ov p{height: 200px; line-height: 200px; color:white; font-family: sans-serif; font-size:30px; text-align: center;}
.ev-img img{min-width: 100%; min-height: 100%; transition: all 0.3s ease-in-out}
.ev-img:hover img{transform: scale(1.05)}
.ev-img:hover .ov{opacity: 1;}
.events p{margin:0; padding:0; font-family: mt-bold;}
.events .title{font-size:20px; padding:10px; color:#000}
.events .desc{font-size: 15px; padding: 3px 10px; line-height: 18px;}
.events .time{background:#000; color:white; font-weight: bold; padding: 6px 10px; margin:5px 0}
.events .venue{font-size: 15px; color:red;padding: 3px 10px;}
.vxmodal {display: none; position: fixed;z-index: 99999999999999999999999999999999999999999999999999999999999999998; padding-top: 100px; /* Location of the box */
    left: 0;top: 0; width: 100%; height: 100%; overflow: auto;background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9);}

.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}
.modal-content, #caption {
    animation-name: zoom;
    animation-duration: 0.6s;
}
@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}
.vxclose {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}
.vxclose:hover,
.vxclose:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}
@media only screen and (max-width: 700px){
    .modal-content {width: 100%;}
}

@media(max-width: 1000px){
}
@media (max-width: 979px) {
    
}

@media(min-width: 480px) and (max-width: 767px) {
    .events-wrap .events {width:90%; margin:15px auto;}
    .srv-tm{width:80%; top:auto;margin:15px auto;}
    .events-wrap{width:100%;margin:auto;}
    .container{display: block;}
}
@media (max-width: 480px) {
    .events-wrap .events {width:90%; margin:15px auto;}
    .srv-tm{width:80%; top:auto;margin:15px auto;}
    .events-wrap{width:100%;margin:auto;}
    .container{display: block;}
}