@import "fonts.css";

/* basic */

a:focus {
    outline: 0px;
}

a,
a:hover {
    text-decoration: none !important;
}

h1,h2,h3,h4,h5,h6
{
    font-family: var(--roboto4);
}

ul,
ol {
    margin-bottom: 0;
    list-style: none;
    padding-left: 0;
}

body {
    line-height: 25px;
    font-style: normal;
    color: #333;
    background-color: #fff;
    font-size: 15px;
    overflow-x: hidden;
    font-family: var(--roboto2);
    letter-spacing: 0px;
}

.cursor
{
    cursor: pointer;
}

.container
{
    max-width: 95%;
}

.small-heading1
{
    font-size: 18px;
    font-family: var(--roboto5);
    position: relative;
    display: inline-block;
    padding-bottom: 5px;
}

.small-heading1:before
{   
  content: '';
  position:absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  border-top:1px solid var(--color1);
  border-bottom:1px solid var(--color1);
}      

/*
===================================
*/

.nav-top
{
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 10;
}

.topbar
{
    padding:8px 0 5px;
}
.topbar .left-topbar
{
    /*float: right;*/
}
.topbar .left-topbar a
{
    color: var(--white);
    font-family: var(--roboto3);
    font-size: 14px;
}
.topbar .left-topbar a:not(:last-child)
{
    margin-right: 10px;
}


.topbar .right-topbar
{
    float: right;
}
.topbar .right-topbar a
{
    color: var(--white);
    font-family: var(--roboto3);
    font-size: 14px;
}
.topbar .right-topbar a:not(:last-child)
{
    margin-right: 10px;
}

/*
====================================
*/

.navigation .logo
{
    display: block;
    padding:5px 0;   
}

.navigation .logo .logo-icon
{
    display: table-cell;
    vertical-align: middle;
}
.navigation .logo .logo-icon .image-logos
{
    width: 100px;
}
.navigation .logo .logo-text
{
    display: table-cell;
    vertical-align: middle;
    font-family: var(--serif2);
    color: var(--white);
    text-shadow: 2px 2px 15px rgba(255,255,255,.3);
    font-size: 20px;
}

.navigation > .container{
    border: 1px solid rgba(255,255,255,.2);
    -webkit-box-shadow: 0px 0px 43px 10px rgba(0,0,0,.35);
    -moz-box-shadow: 0px 0px 43px 10px rgba(0,0,0,.35);
    box-shadow: 0px 0px 43px 10px rgba(0,0,0,.35);
}

.navigation
{
    margin-top: 10px;
}
.navigation .navbars .main-ul
{
    float: right;
}
.navigation .navbars .main-ul li.main-li
{
    float: left;
    margin:28px 0;
}
.navigation .navbars .main-ul li.main-li a
{
    font-family: var(--roboto4);
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0;
    color: var(--white);
    display: block;
    padding:5px 7px;
    cursor: pointer;
}
.navigation .navbars .main-ul li.main-li a i
{
    font-size: .8em;
}


.navigation .navbars .main-ul li.main-li.dropdown1
{
    position: relative;
}

.navigation .navbars .main-ul li.main-li.dropdown1 .sub-menu1
{
    position: absolute;
    top: 170%;
    min-width: 180px;
    transition: all .2s linear;
}

@media screen and (min-width: 768px)
{
.navigation .navbars .main-ul li.main-li.dropdown1 .sub-menu1
{
    opacity: 0;
    visibility: hidden;
}


    .navigation .navbars .main-ul li.main-li.dropdown1 .sub-menu1.not-last
    {
        left: 8px;
    }
    .navigation .navbars .main-ul li.main-li.dropdown1 .sub-menu1.last
    {
        right: 8px;
    }
    .navigation .navbars .main-ul li.main-li.dropdown1:hover .sub-menu1
    {
        top: 100%;
        opacity: 1;
        visibility: visible;
    }
}

.navigation .navbars .main-ul li.main-li.dropdown1 .sub-menu1:before
{
    content: '';
    position: absolute;
    top: -8px;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    border-bottom: 8px solid var(--color2);
}
.navigation .navbars .main-ul li.main-li.dropdown1 .sub-menu1.not-last:before
{
    left: 0;
}
.navigation .navbars .main-ul li.main-li.dropdown1 .sub-menu1.last:before
{
    right: 0;
}
.navigation .navbars .main-ul li.main-li.dropdown1 .sub-menu1 li a
{
    background-color: var(--color2);
    font-family: var(--roboto3);
    color: var(--black);
    display: block;
    padding:5px 15px;
    text-transform: capitalize;
    border-bottom: 1px solid #ddd57a;
    white-space: nowrap;
    cursor: pointer;
}
.navigation .navbars .main-ul li.main-li.dropdown1 .sub-menu1 li:last-child a
{
    border-bottom: 0px;
}
.navigation .navbars .main-ul li.main-li.dropdown1 .sub-menu1 li:hover > a
{
    color: var(--white);
    background-color: var(--color1);
}


.navigation .navbars .main-ul li.main-li.dropdown1 .dropdown2
{
    position: relative;
}
.navigation .navbars .main-ul li.main-li.dropdown1 .dropdown2 .sub-menu2
{
    position: absolute;
    top: 0;
    transition: all .2s linear;
}


@media screen and (min-width: 768px)
{
    .navigation .navbars .main-ul li.main-li.dropdown1 .dropdown2 .sub-menu2
    {
        opacity: 0;
        left: 120%;
        visibility: hidden;
    }

    .navigation .navbars .main-ul li.main-li.dropdown1 .dropdown2:hover .sub-menu2
    {
        opacity: 1;
        visibility: visible;
        left: 100%;
    }
}

.navigation .navbars .main-ul li.main-li.dropdown1 .dropdown2 .sub-menu2 li a
{
    border-bottom: 1px solid #ddd57a;
    display: block;
}

.navigation .navbars .main-ul li.main-li.dropdown1 .dropdown2 .sub-menu2 li a.anchor2 i
{
    float: right;
}




/*=============================*/
.sub-menu1-facilities
{
    background-color: var(--color2);
    transition: all .2s linear; 
}


.navigation .navbars .main-ul li.main-li .sub-menu1-facilities li a
{
    background-color: var(--color2);
    font-family: var(--roboto3);
    color: var(--black);
    display: block;
    padding:5px 15px;
    text-transform: capitalize;
    border-bottom: 1px solid #ddd57a;
    white-space: nowrap;
}
.navigation .navbars .main-ul li.main-li .sub-menu1-facilities li:hover a
{
    background-color: var(--color1);
    color: var(--color2);
}

@media screen and (min-width: 768px)
{
    .sub-menu1-facilities
    {

        width: 50%;
        left: 80%;
        transform: translateX(-80%);
        position: absolute;
        top: 70%;
        opacity: 0;
        visibility: hidden;    
        -webkit-column-count: 2; 
        -moz-column-count: 2;  
        column-count: 2; /* divides text in 2 columns */ 
    }
    .main-li.dropdown12:hover .sub-menu1-facilities
    {
        opacity: 1;
        visibility: visible;
    }

    .sub-menu1-facilities:before
    {
        content: '';
        position: absolute;
        top: -8px;
        left: 50%;
        transform: translateX(-50%);
        border-right: 8px solid transparent;
        border-left: 8px solid transparent;
        border-bottom: 8px solid var(--color2);
    }
}

/*=============================*/




#clone
{
    position: fixed;
    top: -120%;
    left: 0;
    width: 100%;
    z-index: 20;
    background-color: var(--color1);
    transition: all .3s linear;
}
#clone.show-nav
{
    top: 0;
}
#clone .navigation > .container
{
    box-shadow: none;
    border: none;
}


/*
====================================
*/
#slider
{
    position: relative;
}
#slider .school-detail
{
    position: absolute;
    left: 50%;
    z-index: 8;
    transform: translateX(-50%);
}

@media screen and (min-width: 1140px)
{
    #slider .school-detail
    {
        top: 210px;
    }
}

#slider .school-detail .box
{
    text-align: center;
}
#slider .school-detail .box .school-name h4
{   
    font-family: var(--serif2);
    color: var(--white);
    font-size:50px;
    margin-top: 10px;
    text-shadow: 2px 2px 15px rgba(255,255,255,.3);
    margin-bottom: 10px;
}  
#slider .school-detail .box .school-name span.span1
{
    font-size: 27px;
    margin-top: 15px;
    font-family: var(--serif2);
    text-transform: capitalize;
    text-shadow: 2px 2px 15px rgba(255,255,255,.3);
}
#slider .school-detail .box .school-name span
{   
    font-family: var(--roboto3);
    color: var(--white);
    font-size:16px;
    text-transform: uppercase;
    text-shadow: 2px 2px 15px rgba(255,255,255,.1);
    letter-spacing: 1px;
    display: block;
}   
#slider .school-detail .box .school-name span.span2
{
    margin-top: 3px;
    font-size: 15px;
    text-transform: capitalize;
    display: inline-block;
    border-bottom: 1px solid #666;
}   


#slider .carousel-item
{
    width: 100%;
    height: 100vh;
}
#slider.carousel-fade .carousel-item {
    opacity: 0;
    transition-duration: .6s;
    transition-property: opacity;
}
#slider.carousel-fade .carousel-item.first
{
    transition-duration: 2s;

}

#slider.carousel-fade .carousel-item:before
{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.7);
}

#slider.carousel-fade .carousel-item-next.carousel-item-left,
#slider.carousel-fade .carousel-item-prev.carousel-item-right,
#slider.carousel-fade .carousel-item.active {
    opacity: 1
}

#slider.carousel-fade .active.carousel-item-left,
#slider.carousel-fade .active.carousel-item-right {
    opacity: 0
}

#slider.carousel-fade .active.carousel-item-left,
#slider.carousel-fade .active.carousel-item-prev,
#slider.carousel-fade .carousel-item-next,
#slider.carousel-fade .carousel-item-prev,
#slider.carousel-fade .carousel-item.active {
    transform: translateX(0);
    transform: translate3d(0, 0, 0)
}

#slider .carousel-control-next-icon,
#slider .carousel-control-prev-icon {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0,0,0,.7);
    background-size: 70%;
    opacity: 0;
    transition: all .3s linear;

}
#slider .carousel-control-prev-icon
{
    left: 50px;
}
#slider .carousel-control-next-icon
{
    right: 50px;
}


#slider:hover .carousel-control-prev-icon
{
    left: 10px;
    opacity: 1;
}
#slider:hover .carousel-control-next-icon
{
    right: 10px;
    opacity: 1;
}

#slider .carousel-control-next,
#slider .carousel-control-prev {
    opacity: 1;
}

#slider .carousel-control-prev-icon {
    background-image: url(../img/prev.png);
}

#slider .carousel-control-next-icon {
    background-image: url(../img/next.png);
}



/*
=========================
*/

section.home-about
{
    margin-top: 40px;
}

section.home-about .image1.about-image
{
    padding: 30px 30px 20px;
}

section.home-about .image3.about-image{
    padding: 20px;
    margin-top: -90px;
    background: var(--white);
    margin-left: -30px;
}

.affiliation-detail
{
    display: inline-block;
    font-family: var(--roboto4);
    font-size: 25px;
    padding: 0px;
    border-radius: 3px;
    margin-top: 15px;
    color: var(--color1);
    text-transform: capitalize;
    line-height: 30px;
}


/*
============================
*/

.heading1 span
{
    font-family: var(--serif2);
    font-size: 27px;
    color:#6f7173;
    display: block;
    margin-bottom:10px;
}
.heading1 span.small-punchline
{
    font-family: var(--roboto3);
    font-size: 15px;
    color:#6f7173;
    display: block;
    margin-bottom:10px;
    margin-top: -12px;
}
.heading1 h4
{
    font-family: var(--serif2);
    font-size: 35px;
    color: var(--color1);
}

body.innerPage .heading1 h4
{
    font-size: 30px;
}

/*
=================================
*/

.readmore a
{
    font-family: var(--roboto4);
    text-transform: uppercase;
    display: inline-block;
    letter-spacing: 0;
    background-color: var(--color1);
    padding:7px 20px;
    color: var(--color2);
    border-radius: 25px;
    font-size: 14px;
    border:2px solid var(--color1);
    transition: all .2s ease-in-out;
}
.readmore a:hover
{
    background-color: transparent;
    color: var(--color1);
}

/*
===================================
*/
.about-div
{
    padding:100px 30px;
}
.about-div .heading1
{
    margin-bottom: 25px;
}
.about-div .desc p
{
    margin-bottom: 25px;
    text-align: justify;
}

/*
===============================
*/

section.facilities
{
    margin-top: 40px;
}

section.facilities .facility-head-text
{
    margin:50px 0; 
}

#facilities .testimonial{
    margin:5px 10px;
    position: relative;
    box-shadow: 0 0 10px rgba(0,0,0,.3);
}
#facilities .testimonial .overlay
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgb(0, 0, 0));
    background: -o-linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgb(0, 0, 0));
    background: -moz-linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgb(0, 0, 0));
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgb(0, 0, 0));
    z-index: 1;
    transition: all .3s linear;
}
#facilities .testimonial .overlay a
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
}
#facilities .testimonial .overlay .faci-name
{
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 0;
    padding:7px 12px;
    font-family: var(--roboto4);
    color: var(--white);
    font-size: 18px;
    text-transform: capitalize;
    line-height: 24px;
    letter-spacing: 1px;
}

#facilities .testimonial:hover .overlay
{
    background:rgba(0,0,0,.5);
}
#facilities .testimonial .image img
{
    border-radius: 10px;
}

/* 
//////////////////////
*/

.owl-theme .owl-controls
{
    left: -250px !important;
    text-align: left !important;
    bottom: 20px !important;

}

.owl-theme .owl-controls .owl-buttons div
{
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background-color: transparent !important;
    border:2px solid var(--color1) !important;
}
.owl-theme .owl-controls .owl-buttons div i{

    font-size: 70% !important;
    line-height: 35px !important;
    color: var(--color1);
}

/* 
========================================
*/

section.vision-mision
{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    position: relative;
    margin-top: -50px;
    z-index: -1;
}

section.vision-mision .half-bg
{
    position: absolute;
    width: 50%;
    height: 100px;
    top: 0;
    left: 0;
    background-color: var(--color2);
    z-index: 2;
}

section.vision-mision .background-color
{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(161, 44, 45, .9);
     /*background-color: rgba(0,0,0, .6); */
    top: 0;
    left: 0;
}

section.vision-mision .vision-container
{
    padding: 120px 0 80px;
    position: relative;
    z-index: 2;
    max-width: 70%;
    text-align: center;
    margin:auto;
}
section.vision-mision .vision-container .heading1 h4
{
    color: var(--color2);
    text-shadow: 2px 2px 15px rgba(0,0,0,.3);
    margin-bottom: 0px;
}
section.vision-mision .vision-container .heading1 .punchline
{
    color: var(--color2);
    text-shadow: 2px 2px 15px rgba(0,0,0,.3);
    font-family: var(--roboto2);
    font-size: 15px;
    margin-bottom: 20px;
}
section.vision-mision .vision-container .desc-vision p
{
    color: var(--white);
    font-family: var(--roboto3);
    font-size: 15px;
    margin-bottom: 0;
}

/* 
=================================
*/

section.gallery-home
{
    margin-top: 50px;
}
section.gallery-home .heading1
{
    margin-bottom: 20px;
    text-align: center;
}

.image-gallery-box .image
{
    position: relative;
    overflow: hidden;
}
.image-gallery-box .image img{
    width: 100%;
    transform: scale(1) rotate(0deg);
    transition: all .5s linear;
}
.image-gallery-box:hover .image img{
    
    transform:scale(1.2) rotate(-10deg);
}

.image-gallery-box
{
    position: relative;
    margin-bottom: 25px;
    box-shadow: 0 0 15px rgba(0,0,0,.3);
}
.image-gallery-box .overlay
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    transform:scale(0);
    transition: all .3s linear;
}
.image-gallery-box:hover .overlay
{
    transform:scale(1);
}
.image-gallery-box .overlay a{
    position: absolute;
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
    border:1px solid rgba(255,255,255,.5);
}
.image-gallery-box .overlay a i{
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 2em;
    color: var(--color2);
}
.image-gallery-box .overlay a span{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 1.2em;
    color: var(--white);
    font-family: var(--roboto4);
    display: block;
    text-align: center;
}


/*
***************************************************
News 
***************************************************
*/
#news-events
{
    margin-top: 20px;
   
    padding-right: 20px;
}
#news-events ul
{
    width: 100%;
    height: 500px !important;
    overflow: hidden;
}

#news-events ul li
{
    height: auto !important;
    border-bottom: 1px dotted #ccc;
    padding: 5px 0;
}
#news-events ul li .newsRow .dates
{
    width: 70px;
    height:auto;
    border-radius: 3px;
    background-color: var(--color1);
    float: left;
    text-align: center;
    float: left;
    margin-right: 10px;
}
#news-events ul li .newsRow .dates span:nth-child(1)
{
    font-size: 20px;
    font-family: var(--roboto4);
    color: var(--dark);
    display: block;
    padding: 0;
    padding-top: 7px;
    background-color: var(--color2);
}
#news-events ul li .newsRow .dates span:nth-child(2)
{
    font-size: 18px;
    font-family: var(--roboto4);
    color: var(--color2);
    display: block;
    padding: 2px;
}

#news-events ul li .newsRow .title
{
    font-family: var(--roboto4);
    font-size: 16px;
    margin-bottom: 5px;
    width: 90%;
}
#news-events ul li .newsRow .title a
{
    color: var(--color12); 
}

#news-events ul li .newsRow .desc
{
    display: inline-block;
    width: 82%;
    position: relative;
}

#news-events ul li .newsRow .desc .file
{
    position: absolute;
    top: 0;
    right: 0;
    font-size: 1.2em;
}

#news-events ul li .newsRow .desc .descs
{
    font-family: var(--roboto2);
    color:#000;
    font-size: 15px;
    line-height: 1.3;
}
#news-events ul li .newsRow .desc a
{
    color:var(--color1);
    font-family: var(--roboto4);
    display: block;
    padding:3px 0;
}
#news-events ul li .newsRow .desc a .fa
{
    transition: margin-left .2s linear;
}
#news-events ul li .newsRow .desc a:hover .fa
{
    margin-left: 5px;
}

/*
=================================
*/

.footer
{
    background-color: var(--color1);
    padding:50px 0 20px;
    margin-top: 40px;
}
.footer .ftr_box .ftr_head
{
    color: var(--color2);
    font-family: var(--roboto5);
    font-size: 20px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.footer .ftr_box ul
{
    -webkit-column-count: 2; 
    -moz-column-count: 2;  
    column-count: 2; /* divides text in 2 columns */ 
}
.footer .ftr_box ul li
{
    margin-bottom: 5px;
}
.footer .ftr_box ul li a
{
    display: block;
    color: var(--white);
    font-family: var(--roboto3);
    position: relative;
    padding-left: 15px;
    transition: all .3s linear;
}
.footer .ftr_box ul li a:before
{
    content: '\f101';
    font-family: fontawesome;
    position: absolute;
    left: 0;
    top: 0;
}

.footer .ftr_box ul li:hover a
{
    padding-left: 25px;
}

.address-row
{
    margin-bottom: 7px;
}
.address-row span.icon
{
    display: table-cell;
    vertical-align: top;
}
.address-row span.icon i
{
    color: var(--color2);
}
.address-row span.values
{
    display: table-cell;
    vertical-align: top;
    padding-left: 10px;
}
.address-row span.values .head
{
    display: block;
    font-family: var(--roboto4);
    text-transform: uppercase;
    font-size: 16px;
    color: var(--color2);
    line-height: 1.2;
}
.address-row span.values .detail
{
    display: block;
    font-family: var(--roboto3);
    font-size: 15px;
    color: var(--white);
    line-height: 1.6;
}
.address-row span.values .detail a
{
    color: var(--white);
}  

.copyright
{
    background-color: var(--color2);
    font-family: var(--roboto3);
    font-size: 15px;
    letter-spacing: 0;
    padding:5px 0;
    color: var(--black);
    text-align: center;
}
.copyright a
{
    color: var(--black); 
    font-family: var(--roboto4);
}

/*
====================================
*/

.page-banner
{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 350px;
}
.page-banner .dark-container
{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    position: relative;
}
.page-banner .dark-container .content-box
{
    position: absolute;
    bottom: 30px;
    left: 30px;
}
.page-banner .dark-container .content-box .banner-title
{
    font-family: var(--serif2);
    color: var(--white);
    font-size: 35px;
    margin-bottom: 5px;
}
.page-banner .dark-container .content-box .breadcrumbs a
{
    font-family: var(--roboto3);
    color: var(--white);
    font-size: 14px;
    letter-spacing: 0;
}
.page-banner .dark-container .content-box .breadcrumbs a:not(:last-child)
{
    padding-right: 8px;
}
.page-banner .dark-container .content-box .breadcrumbs a:not(:last-child):after
{
    content: '\f101';
    font-family: fontawesome;
    margin-left:8px;
}
.page-banner .dark-container .content-box .breadcrumbs a:last-child
{
    font-family: var(--roboto4);
}


/*
==============================
*/

.width_about_image
{
    width: 500px;
}
.width_about_image.right
{
    float: right;
    margin-left: 40px;
}

body.innerPage .about-div
{
    padding:0px 0px 0 30px;
}
body.innerPage .about-div p
{
    margin-bottom: 12px;
}

body.innerPage .about-div .heading1
{
    margin-bottom: 10px;
}


.abouts-image
{
    width: 400px;
    position: relative;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.abouts-image.right
{
    float: right;
    margin-left: 20px;
}

.abouts-image.left
{
    float: left;
    margin-right:20px;
    margin-left:50px;
}

.abouts-image .borders
{
    border: 10px solid #ccc;
    position: absolute;
    top: -20px;
    width: 95%;
    height: 95%;
    display: block;
    z-index: -1;
}
.abouts-image.left .borders
{
    left: -20px;
}
.abouts-image.right .borders
{
    right: -20px;
}

.abouts-image.message-name .name
{
    background-color: var(--color1);
    display: block;
    width: 100%;
    padding:8px 20px;
    color: var(--color2);
    font-family: var(--serif2);
    font-size: 22px;
    text-align: center;
}

.abouts-image.message-name .email
{
    background-color: var(--color1);
    display: block;
    width: 100%;
    padding: 0px 20px 7px;
    color: var(--color2);
    font-family: var(--roboto3);
    font-size: 16px;
    text-align: center;
    margin-top: -8px;
}


.abouts-image.message-name.message-name2
{
    width: 200px;
    margin-left: 0;
    margin-top: 0;
}
.abouts-image.message-name.message-name2 .name
{
    font-size: 18px;
    line-height: 18px;
}

/*
================================
*/
.list-items ul
{
    margin-bottom: 15px;
}
.list-items ul li
{
    position: relative;
    padding-left: 20px;
    font-size: 15px;
    margin-bottom: 8px;
}
.list-items ul li:before
{
    position: absolute;
    content: '\f144';
    top: 0;
    left: 0;
    color: var(--color1);
    font-family: fontawesome;
}

/*
==================================
*/

#no-more-tables
{
    margin-top: 20px;
}
#no-more-tables .table thead th
{
    background-color: var(--color1);
    color: var(--color2);
    padding:.55rem 1rem;
    font-weight: normal;
    font-family: var(--roboto4);
    text-align: center;
}
#no-more-tables .table tbody td
{
    padding:.55rem 1rem;
    font-family: var(--roboto3);
    text-align: center;
    font-size: 15px;
    vertical-align: middle;
    border-right:1px solid #ccc;
    border-bottom:1px solid #ccc;
}

#no-more-tables .table tbody td[data-title="House"]{

    font-family: var(--roboto4);
}

#no-more-tables .table tbody tr td:first-child
{
    border-left:1px solid #ccc;
}

#no-more-tables .table tbody td[data-title="Download"] a
{
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: #F9EE76;
    border-radius: 3px;
    text-align: center;
    color: var(--gray);
}
#no-more-tables .table tbody td[data-title="Download"] a i
{
    line-height: 40px;
    color: var(--color1);
}

#no-more-tables .table tbody td[data-title="Download"] a:hover
{
    background-color: var(--color1);
}
#no-more-tables .table tbody td[data-title="Download"] a:hover i
{
    color: var(--color2);
}


/*
=====================================
Accordion
=====================================
*/
#accordion
{
    margin-top: 20px;
}
#accordion .card
{
    margin-bottom: 10px;
}

#accordion .card .card-header
{
    padding:0;
}

#accordion .card .card-header .card-link
{
    display: block;
    padding: 7px 10px;
    color: var(--color1);
    text-transform: capitalize;
    background-color: #ededed;
    font-family: var(--roboto4);
}

#accordion .card .card-header .card-link.theme-active
{
    background:url(../img/pattern2.png) repeat var(--color1);
    color: var(--color2);
}


#accordion .card .card-header .card-link span
{
    float: right;
    width: 20px;
    height: 20px;
    line-height: 18px;
    font-size: 12px;
    text-align: center;
}


#accordion .card div .card-body
{
    padding:30px 30px;
}

#accordion .card .card-header .card-link.theme-active span
{
  border-color: #fff;
}
#accordion .card .card-body .gallery-box
{
    margin-bottom: 10px;
}
#accordion .card .card-body .gallery-box .detail .name,
#accordion .card .card-body .gallery-box .detail .Activity
{
    color: #000;
    font-family: var(--roboto3);
    text-transform: uppercase;
    text-align: center;
    line-height: 20px;
}

#accordion .card .card-body .gallery-box
{
  text-align: center;
}




#accordion.result .card .card-body .gallery-box .image
{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align:center;
    -moz-box-align:center;
    -ms-flex-align:center;
    -webkit-align-items:center;
    align-items:center;
}
#accordion.result .card .card-body .gallery-box .image img
{
    width: auto;
    height: auto;
    margin: auto;
}

@media screen and (min-width:1140px)
{
    #accordion.result .card1 .card-body .gallery-box .image
    {
        height: 251px;
    }
    #accordion.result .card1 .card-body .gallery-box .image img
    {
        max-height: 251px;
    }


    #accordion.result .card2 .card-body .gallery-box .image
    {
        height: 173px;
    }
    #accordion.result .card2 .card-body .gallery-box .image img
    {
        max-height: 173px;
    }
}


#accordion .card .card-body .subSectionDiv
{
  border:1px solid var(--color2);
  padding:10px;
  padding-top: 0px;
  margin-bottom: 15px;
  margin-top: 0px;
  position: relative;
}

#accordion .card .card-body .subSectionDiv .house-name
{
  padding: 5px 0px;
}


#accordion .card .card-body .subSectionDiv .house-name h3
{
    color: var(--color2);
    font-size: 18px;
    font-family: var(--roboto3);
    text-transform: uppercase;
    display: inline-block;
}


/*
===========================
*/

#accordion.result .card div .card-body
{
    position: relative;
    padding: 60px;
}
#accordion.result .card-header
{
    border-bottom: 0px;
}
#accordion.result .card div .card-body .span-append
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#accordion.result .card div .card-body .span-append span.one,
#accordion.result .card div .card-body .span-append span.two,
#accordion.result .card div .card-body .span-append span.three,
#accordion.result .card div .card-body .span-append span.four
{
    position: absolute;
    display: block;
    background-size: cover;
}
#accordion.result .card div .card-body .span-append span.one,
#accordion.result .card div .card-body .span-append span.three
{
    width: 100%;
    height: 45px;
    left: 0;
    background-image: url(../img/landscape-border.png);
    background-repeat: repeat-x;
}
#accordion.result .card div .card-body .span-append span.two,
#accordion.result .card div .card-body .span-append span.four
{
    height: 100%;
    width: 45px;
    top: 0;
    background-image: url(../img/stand-border.png);
    background-repeat: repeat-y;
}
#accordion.result .card div .card-body .span-append span.one
{
    top: 0;
}
#accordion.result .card div .card-body .span-append span.two
{
    right: 0;
}
#accordion.result .card div .card-body .span-append span.three
{
    bottom: 0;
}
#accordion.result .card div .card-body .span-append span.four
{
    left: 0;
}



/*
===================
*/

#myform.subject .form-group label
{
    font-family: var(--roboto4);
    color: var(--dark);
    font-size: 17px;
}
#myform.subject .form-group .custom-select
{
    font-family: var(--roboto3);
    font-size: 15px;
}
#myform.subject .form-group .custom-select:focus
{
    box-shadow: none;
}

/*
===========================
*/

#accordion .student-image-gallery .title span
{
    font-family: var(--roboto4);
    display: block;
    text-align: center;
    color: var(--color1);
    text-transform: uppercase;
}
#accordion .student-image-gallery .title span.student-name
{
    font-size: 17px;
}
#accordion .student-image-gallery .title span.student-title
{
    font-size: 14px;
    text-transform: uppercase;
    color: var(--gray);
    font-family: var(--roboto4);
}

#accordion.result .student-image-gallery .title span.student-title
{
    color: #000;
    line-height: 20px;
}

/*
===========================
*/
.image-gallery-facilities .gallery-box
{
    margin-bottom: 20px;
}
.image-gallery-facilities .gallery-box .image
{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align:center;
    -moz-box-align:center;
    -ms-flex-align:center;
    -webkit-align-items:center;
    align-items:center;
    position: relative;
    overflow: hidden;
}
.image-gallery-facilities .gallery-box .image img
{
    width: auto;
    height: auto;
    margin: auto;
}

@media screen and (min-width:1140px)
{
    .image-gallery-facilities .gallery-box .image
    {
        height: 197px;
    }
    .image-gallery-facilities .gallery-box .image img
    {
        max-height: 197px;
    }


    .image-gallery-facilities.four-colomn .gallery-box .image
    {
        height: 192px;
    }
    .image-gallery-facilities.four-colomn .gallery-box .image img
    {
        max-height: 192px;
    } 

    .image-gallery-facilities.annulareport .gallery-box .image
    {
        height: 400px;
    }
    .image-gallery-facilities.annulareport .gallery-box .image img
    {
        max-height: 400px;
    }
}

.image-gallery-facilities.annulareport .gallery-box .image
{
    box-shadow: 0 0 10px rgba(0,0,0,.1);
    border:1px solid #ddd;
}

.image-gallery-facilities .gallery-box .image .overlay
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    background-color: rgba(0,0,0,0.7);
    transform: rotate(25deg);
    transform-origin: top left;
    opacity: 0;
    transition: all .2s linear;
}
.image-gallery-facilities .gallery-box:hover .image .overlay
{
    opacity: 1;
    transform: rotate(0deg);
}
.image-gallery-facilities .gallery-box .image .overlay i
{ 
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 2em;
    color: var(--color2);
}

.image-gallery-facilities .gallery-box .title
{
    font-family: var(--roboto4);
    font-size: 18px;
    text-align: center;
    padding:10px;
    color: var(--color1);
}



/*
******************************************
*/
.myformDesign
{
    padding-right: 30px;
    margin-top: 30px;
}
.myformDesign .form-group .inputdiv
{
    position: relative;
}

.myformDesign .form-group .inputdiv .fa
{
  position: absolute;
  top: 9px;
  left: 5px;
  color: var(--gray);
}

.myformDesign .form-group label
{
    font-family: var(--roboto4);
    color: #4a4646;
}
.myformDesign .form-group .form-control
{
  padding-left: 27px;
}

.myformDesign .form-group .inputdiv .form-control
{
    border: 0px;
    border-bottom: 2px solid #dedbdb;
    border-radius: 0;
    font-size: 15px;
    font-family: var(--monte3);
    color: #726b6b;
}
.myformDesign .form-group .inputdiv .animatedRow
{
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background-color: var(--color1);
    transition: width .2s linear;
}
.myformDesign .form-group .inputdiv .animatedRow.showRow
{
    width: 100%;
}
.myformDesign .form-group .inputdiv .form-control:focus
{
    box-shadow: none;
    border-bottom-color:var(--color1); 
}
.myformDesign .form-group .inputdiv textarea.form-control
{
    resize: none;
}


.myformDesign .form-group .inputdiv .form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #999;
  font-size: 14px;
  font-family: var(--roboto3)
}
.myformDesign .form-group .inputdiv .form-control::-moz-placeholder { /* Firefox 19+ */
  color: #999;
  font-size: 14px;
  font-family: var(--roboto3)
}
.myformDesign .form-group .inputdiv .form-control:-ms-input-placeholder { /* IE 10+ */
  color: #999;
  font-size: 14px;
  font-family: var(--roboto3)
}
.myformDesign .form-group .inputdiv .form-control:-moz-placeholder { /* Firefox 18- */
  color: #999;
  font-size: 14px;
  font-family: var(--roboto3)
}


.myformDesign .form-group .capacha-div
{
    margin-top: 25px;
}

.myformDesign .submitButton
{
    background-color: var(--color1);
    cursor: pointer;
    color: var(--color2);
    border:0px;
    padding: 5px 25px;
    box-shadow: 0 0 10px rgba(0,0,0,.3);
    font-family: var(--roboto4);
    text-transform: uppercase;
}
@media screen and (min-width: 1140px)
{
    .myformDesign .submitButton
    {
        display: table;
        margin:auto;
        margin-top: 15px;
    }

}
/*
============================
*/

.contact-info-box
{
    background-color: #F3F4F4;
    padding:0 20px;
    padding-bottom: 20px;
    border-radius: 5px;
    height: 170px;
    margin-top: 30px;
    margin-bottom: 40px;
    border: 1px solid #dbd9d9;
    box-shadow: 0 0 15px rgba(0,0,0,.1);
}
.contact-info-box .icons
{
    width: 60px;
    height: 60px;
    background-color: var(--color1);
    display: inline-block;
    border-radius: 50%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    top: -30px;
}
.contact-info-box .icons img
{
    padding: 13px;
}
.contact-info-box .detail-box
{
    text-align: center;
    margin-top: -15px;
}
.contact-info-box .detail-box .title
{
    display: block;
    font-family: var(--roboto5);
    font-size: 16px;
    margin-bottom: 5px;
}
.contact-info-box .detail-box .value
{
    font-family: var(--roboto3);
    font-size: 16px;
    color:#484848;
}
.contact-info-box .detail-box .school-name
{
    font-family: var(--roboto5);
    font-size: 16px;
    display: block;
    color:#000;
}
.contact-info-box .detail-box .value a
{
     color:#484848;
}

.contact-info-box .detail-box.social-media .value
{
    text-align: left;
    display: table;
    margin: auto;
}
.contact-info-box .detail-box.social-media .value a i
{
    text-align: center;
}

/*
==============================
*/

#no-more-tables.myInvisbleForm table thead
{
    background-color: var(--white);
}

#no-more-tables.myInvisbleForm table thead tr th, 
#no-more-tables.myInvisbleForm table tbody tr td
{
    text-align: justify;
}

#no-more-tables.myInvisbleForm .table-striped tbody tr:nth-of-type(2n+1)
{
    background-color: var(--white);
}
#no-more-tables.myInvisbleForm table tbody tr
{
    margin-top: 10px;
    margin-bottom: 10px;
}
#no-more-tables.myInvisbleForm table tbody tr td
{
    padding: 10px .75rem;
    border:0px;
}
#no-more-tables.myInvisbleForm .table tbody tr td:first-child
{
    border-left: 0;
}
#no-more-tables.myInvisbleForm table tbody tr td[data-title="Icon"]
{
    color: var(--color1);
    text-align: center;
}
#no-more-tables.myInvisbleForm table tbody tr td[data-title="Detail"]
{
    vertical-align: top;
}
#no-more-tables.myInvisbleForm table tbody tr td[data-title="Detail"] .detail .date
{
    color: #181717;
    font-size: 13px;
    font-family: var(--roboto4);
    margin-bottom:5px;
}
#no-more-tables.myInvisbleForm table tbody tr td[data-title="Detail"] .detail .date .fa
{
    color: #181717;
}
#no-more-tables.myInvisbleForm table tbody tr td[data-title="Detail"] .detailTitle
{
    font-family: var(--roboto5);
    margin-bottom: 3px;
    font-size: 16px;
}
#no-more-tables.myInvisbleForm table tbody tr td[data-title="Detail"] .detailDesc
{
    font-family: var(--roboto3);
}

#no-more-tables.myInvisbleForm.retires table tbody tr td[data-title="Detail"]
{
    padding: 15px;
}

/*
================================
*/
.social-media .facebook,
.social-media .instagram
{
    display: block;
    margin-bottom: 7px;
}
.social-media .facebook i,
.social-media .instagram i
{
    display: inline-block;
    width: 30px;
    height: 30px;
    color: var(--white);
    border-radius: 5px;
}

.social-media .facebook span,
.social-media .instagram span
{
    font-family: var(--roboto4);
    font-size: 14px;
}
.social-media .facebook i
{
    background-color: #658BF7;
}
.social-media .instagram i
{
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
}
.social-media .facebook i,
.social-media .instagram i
{
    line-height: 30px;
}

/*
==========================
*/

.gallery-sidebar
{
    margin-left: 15px;
    background-color: #f1f1f1;
    padding: 20px 0;
    margin-top: 20px;
    box-shadow: 0 0 15px rgba(0,0,0,.2);
    border: 1px solid #e1dede;
}
.gallery-sidebar .sidebar-heading
{
    font-family: var(--serif2);
    color: var(--color1);
    font-size: 25px;
    margin-bottom: 15px;
    padding:0 20px;
}
.gallery-sidebar ul li
{
    font-family: var(--roboto3);
}
.gallery-sidebar ul li a
{
    color: var(--dark);
    display: block;
    padding:4px 20px;
    border-bottom: 1px solid #ccc;
    padding-left: 35px;
    position: relative;
    transition: all .3s ease;
}
.gallery-sidebar ul li:last-child a
{
    border-bottom: 0px;
}
.gallery-sidebar ul li:hover a,
.gallery-sidebar ul li.active a
{
    background-color: var(--color1);
    color: var(--color2);
}
.gallery-sidebar ul li a:before
{
    content: '\f101';
    font-family: fontawesome;
    position: absolute;
    top: 3px;
    left: 15px;
}



/*
=======================================
pagination
=======================================
*/
.paginationBox
{
    margin-top: 10px;
}

.paginationBox .pagination .page-item a.page-link
{
  box-shadow: none;
  border-color:#999393;
}

.paginationBox .pagination .page-item.active a.page-link,
.paginationBox .pagination .page-item:hover a.page-link
{
    background-color: var(--color1);
    border-color: var(--color1);
    color: #fff;
}

.paginationBox .pagination .page-item a.page-link
{
    color: #000;
    font-size: 15px;
}


/*

=====================================
*/

.facility-download
{
    float: right;
    margin-bottom: 15px;
}
.facility-download a
{
    display: inline-block;
    padding:7px 15px;
    background-color: var(--color1);
    color: var(--color2);
    transition: all .2s linear;
    font-family: var(--roboto3);
    border-radius: 5px;
}
.facility-download a:hover
{
    color: var(--color1);
    background-color: var(--color2);
}

.seprator-image
{
    text-align: center;
    margin:15px 0;
}