﻿
body{
}
#GridTop {
    display: none;
}
.KindergartenHome { border: 2px solid #0477bf; border-radius: 10px 0; background-color:transparent; }
.KindergartenHome:hover { color:#fff !important; }

.jamboreeHome:hover { color:#fff !important; }

.snoezelenHome:hover { color:#fff !important; }

.RightCategoryListTitle {background-color:#0477bf;}


#PageBreadCrumps {display:none;}
#SiteHeaderContainer {display:none}
#SiteFooterContainer {display:none}
#UnderSiteFooterContainer {display:none;}
#GridRight {display:none}
#AboveBoxSiteFooterForm {display:none}


.BoxesContainer {width:100%;text-align:center;margin-top: 80px;}

#logo-icon {max-width:220px;margin:0 auto;margin-bottom:40px}

#GridPage {width:100%;}
h1 { text-align: center;font-size:500%; }

#SiteContainer {height: 100vh;position: relative;}
#SiteGridContainer, #AboveSiteFooterContainer, #SiteGrid {background-color: #ededed; background-color: #ededed;}

#SiteGridContainer {margin-top:0;padding-top:45px}
#GridFooter {display:none;}

@media(max-width:991px){
    h1 { text-align: center;font-size:300%; }
}

@media(max-width:767px){
    h1 {text-align: center;font-size: 200%;}

}

#GridPage {width:100%;}




@media(min-width:992px) and (max-width:1920px) {
    h1 {font-size:500%}
    #SiteGridContainer {padding:0 85px;height: 75vh;}


    #logo-icon {max-width:225px;}
    #IntroMain { padding-top: 40px; }
    #IntroMain .introEng{position:  fixed;top: 10px;left: 10px;background:  #103a7e;color: #fff;border-radius: 0px 10px;height: 40px;font-size: 170%;padding: 3px 15px;}
    .BoxesContainer {margin-top: 35px;}
    #AboveSiteFooterContainer {margin-top:0;height: calc(25vh - 40px);min-height: 0;}
    #AboveBoxSiteFooterImage {height: 200px;background-image: url(../../../000Frames/site/images/intro_footer.png);background-size: cover;}
}
     #AboveBoxSiteFooterImageSec {height: 40px;background-color: #f9dba2;display:block !important;}
    .BoxesContainer {width:100%}
    .box {width: 17.6%;display: inline-block;margin-right: -4px;padding: 14.5px;background-color: #fff;}
    .box img {border-radius: 0 0px 0 0;display:block;position:absolute;}
    .box .textbox {padding:5px;font-size: 163%;width: 100%;text-align: center;right: 0;color: #000;border-radius:0px 0px 0px 10px;}
    /*
    .green {background-color:#6abc34;}
    .bluelight {background-color:#00a0d4;}
    .blue {background-color:#0f3a7e;}
    
    .orange {background-color:#f08300;}
    .pink {background-color:#d933db;}
    .purple {background-color:#903fda;}
*/
.box .textbox {
        padding: 5px 0;
    display: table;
    vertical-align: middle;
    height: 54px;
    float: none;

}
.box .textbox .textboxInner {
    vertical-align: middle;
    display: table-cell;
    height: 100%;

}


    @media(min-width:1300px){ 
            .box .textbox {font-size: 159% !important;}
    }

@media(min-width:990px) and (max-width:1440px) { 
            .box .textbox {font-size:160% !important;height: 75px;}
            #logo-icon {max-width: 175px;}
            h1 {font-size:400%;/* margin-bottom: 10px; */}
            .BoxesContainer {margin-top: 20px;}
}
@media(min-width:1170px) and (max-width:1440px) { 
    #logo-icon {max-width: 145px;margin-bottom: 20px;}
    h1 {font-size: 250%;}
    .BoxesContainer{margin-top: 0px;}
}


    @media(min-width:1170px) and (max-width:1920px) {
        .box {padding: 0;margin: 0 0.5%;border: 1px solid #fff;}
        .box .textbox {padding:5px 0 ;}
    }
    @media(min-width:992px)and (max-width:1170px) {
        .BoxesContainer {margin-top: 30px;}
    }
    
    @media(min-width:992px)and (max-width:1300px) {
        #SiteGridContainer {padding: 0 4.4%}
        .box {padding: 0.3%;margin: 6px;}
    }

    @media (min-width:768px) and (max-width:991px){
       
        .box {width:33%;padding:15px;}
        h1 {font-size:360%;}
        .box .textbox { font-size:130%;position:relative;top:-1px; }
        #logo-icon {max-width:180px;}
        #AboveSiteFooterContainer {margin-top:0;}
        #AboveBoxSiteFooterImage {height: 224px !important;background-image:url(../../../000Frames/site/images/intro_footer.png) !important;width: 100% !important;}
         

    }

    @media(max-width:768px){
        .box {width: 17.6%;}
        .box {width: 46%;padding: 3px;margin: 8px;}
        
        .BoxesContainer {margin-top: 5vw;padding:0 10px;}
        #SiteGridContainer {padding-top: 11vw;}
        #AboveSiteFooterContainer {min-height:0;margin-top: 0;/* position: absolute; */bottom: 0;width: 100%;}

    }

        @media(max-width:767px){
            #logo-icon {max-width:100px;margin-bottom:10px;}
        }

   

    

#GridTop .GridTopImage {display:none}
#MenuForSmallDisplaySection {display:none;}

#AboveBoxSiteFooterImage {background-image:url(../../../000Frames/site/images/intro_footer.png);height: 100%;min-height: 0;}
.box-image-container {overflow:hidden;position:relative;padding-bottom:74%;width: 95%;margin: 2.5% auto 0;}
.box-image {
    transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -ms-transition: all 1.5s ease;
    -webkit-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;

}

.box-image:hover {
    transform: scale(1.1);
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.1, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')";
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.1, M12=0, M21=0, M22=1.5, SizingMethod='auto expand');
    overflow: hidden;
}





 
 @media(max-width:767px){
        .box .textbox {font-size: 156%;height: 68px;line-height: 131%;}    
         #AboveBoxSiteFooterImage {min-height: 139px !important;}    
    }
   

@media (max-width:550px){
    .box {padding: 1px;margin: 2.5vw 1vw;}
}
    

@media(max-width:360px){
        .box{}
        .box .textbox {font-size: 136%;height: 50px;line-height: 108%;} 
         #logo-icon {max-width: 90px;margin-bottom:10px;}
         h1 {font-size: 150%;}
         .BoxesContainer {margin-top: 0vw;}
         #AboveBoxSiteFooterImage {min-height: 114px !important;}
    }

