/* 
  This CSS file contains the custom css styles for the Schoolzine Website template 
  When adding to this file use the following comment example:
*/

/* 
  Added by: Your Name
  Date: Date Added
  Descriptoin: A breif description of the change 
*/
/* latin-ext */
@font-face {
  font-family: 'Kaushan Script';
  font-style: normal;
  font-weight: 400;
  src: local('Kaushan Script'), local('KaushanScript-Regular'), url(https://fonts.gstatic.com/s/kaushanscript/v5/qx1LSqts-NtiKcLw4N03IO87R-l0-Xx_7cYc0ZX1ifE.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Kaushan Script';
  font-style: normal;
  font-weight: 400;
  src: local('Kaushan Script'), local('KaushanScript-Regular'), url(https://fonts.gstatic.com/s/kaushanscript/v5/qx1LSqts-NtiKcLw4N03IEd0sm1ffa_JvZxsF_BEwQk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

.kaushanSFont{font-family:'Kaushan Script', sans-serif;}

.school-name, .search-bar{display:none;}
.swiper-container.wrapper{max-width:100%;width:100%;}
.school-info{background:#ffffff; height:80px; z-index:101;}
.school-logo{
    position:relative;
    top:auto;
    right:auto;
    width:auto;
    background: none;
    border: none;
    float:left;
    line-height:0;
    margin-left: -40px;
    margin-top: 1px;
    z-index: 999;
}

.main-nav {position:relative; background:#ffffff; box-shadow:none; height:79px;}
.main-nav ul.wrapper {/*float:right;*/ max-width:auto; width:auto;}
.main-nav.width-6 li,.main-nav.width-5 li, .main-nav.width-4 li, .main-nav.width-3 li, .main-nav.width-2 li, .main-nav.width-7 li, .main-nav.width-8 li, .main-nav.width-9 li, .main-nav.width-10 li{width:auto;}
.main-nav li {width:auto; padding:0;}
.main-nav li > ul li {padding:0;}
.swiper-container{height: calc(100% - 59px);padding-top:80px;}

#topContent{padding: 50px 0; text-align: center;}
#topContent h1{text-align: center; font-size:37px;margin-bottom:20px; line-height: 44px;}
  #topContent p{margin-bottom:20px; font-size: 18px; line-height: 1.6em;}
  #topContent p.kaushanSFont{font-size:25px;}

#topTiles{padding: 50px 0;}
#topTiles .column{width:24%; margin-right:1%; float: left;}
  #topTiles .column a{display: block; background:#0b3b87;padding:10px; color:#fdb61c; font-size:15px;}
    #topTiles .column a span.fa{color:#fdb61c; font-size:12px;}
  #topTiles .column a.img {padding:0;max-width: 100%;}
    #topTiles .column a img{max-width:100%;}
#faceSkip{margin-bottom: 30px;}
.latest-news{display: none;}
body#tasDoe #facebookFeed{border:2px solid #00438a; background:#00438a;}
body#tasDoe .learnersFirst{right:auto; left:90px;}
body#tasDoe .school-logo{top:auto;}

@media screen and (min-width: 980px) {
#topTiles .column a.homeTilePadding {padding: 19px 10px !important;}
}

@media screen and (max-width: 980px) {
    #topTiles .column {width: 48%; margin-bottom: 1%;}
}

#homeSecond h2{font-size:42px; color:#4f4f4f; text-transform:uppercase;line-height:normal;}

.footOne img{display:none;}
 body#tasDoe .main-footer-wrapper #side-item-59 .item-header.main-txt{display:none;}

.clearfix:after { visibility: hidden;  display: block;  font-size: 0;  content: " ";  clear: both;  height: 0;}
.clearfix { display: inline-block; }

* html .clearfix { height: 1%; }
.clearfix { display: block; }

body#tasDoe .main-nav li a{padding:0; line-height:75px; height: auto; color: #124b4a !important;}
body#tasDoe .main-nav li > ul li a {padding: 5px 40px 5px 20px;  height: auto; line-height: 30px;}

body#tasDoe.is-mobile .main-nav li .mobile-only li{background:#ccc !important;}

@media screen and (max-width: 980px) {
    .main-nav li {padding:0 5px;}
        .main-nav li a {font-size:12px;}
}
    
@media screen and (max-width:769px){
    #topContent {box-sizing:border-box; padding:0 20px;}
    #topContent h1{margin-top:20px; line-height: initial;}
    #topTiles .column{width:48%; margin-right:2%;}
    body#tasDoe .school-logo{position:absolute;}
    .school-name{display:block;}
    
    .main-nav > ul.wrapper > li {padding:0;}
    body#tasDoe .learnersFirst{    top: 0;    left: 140px;    height: 60px;}
    body#tasDoe .main-nav li a{padding:0 0 0 15px; line-height:40px;}
}
@media screen and (max-width:480px){
     #topTiles .column{width:96%; margin-left:2%;}
}
body#tasDoe.is-mobile .main-nav{height: auto; top: 0; clear: both;}
.is-mobile .main-nav ul.wrapper{background: #fff; width:100%; float:none; margin:0;    clear: both;}
.is-mobile .swiper-container{padding-top: 60px;}

.learnersFirst {
    display: none;
}

body#tasDoe .main-header {
    padding-bottom: 0px;

}

.blurb h2 {
    font-size: 22px;
}

img#tasDoeLogo {
    display: none;
}

@media screen and (max-width: 450px){
body#tasDoe .school-logo {
    left: 38px;
}
}




body#tasDoe .main-nav li a {
    padding: 14px 0px;
    line-height: 17px;
}

/*code to vertically align menu */

@media screen and (min-width: 770px){
.main-nav ul.wrapper, body#tasDoe .main-nav li, body#tasDoe .main-nav li {

    display: flex !important;
    align-items: center !important;
    justify-items: center !important;
    }

    body#tasDoe .main-nav li {
            padding: 0 9px;
            width: 12%;
            height: 79px;
    }
    
    .main-nav li > ul {
        top: 79px !important;
    }
    
    body#tasDoe .main-nav li a {
        color: #fff;
    }
    
    .main-nav > ul > li:hover > a {
        color: #d4d4d4 !important;
    }
    
}

@media screen and (min-width: 980px){
    body#tasDoe .main-nav li {
            width: 12%;
    }
}

@media screen and (min-width: 770px) and (max-width: 980px) {
    body#tasDoe .main-nav li {
        width: 14%;
    }
    
    .botTileResponsive {
        width: 480px !important;
    }
}

/*End of code to vertically align menu */

#nav-site > ul > li > a {margin: 0 auto;}

@media screen and (max-width: 769px){
    .is-mobile .show-children {
        padding-top: 0 !important;
    }
    
    body#tasDoe .main-nav li a {
        padding: 14px 0 14px 10px;
    }
}

#tile-home .tile-header {text-align: center;}


h3.schoolMotto {margin: 0 0 20px 0 !important;}

.bg-app {
    opacity: 1;
    background-size: cover;
}

#app-tile a {color: #fff;}

@media screen and (max-width: 590px) and (min-width: 451px) {
    #tile-id-71 .sz-tile .tile-1.right.tile-link-list {
        width: 201px;}
    #tile-id-71 .tile-link-list {
        right: -23px;}
    #tile-id-71 .tile-internal {
        padding: 14px !important;
    }
}

/*#tile-id-71 .tile-1 {*/
/*    width: 201px;*/
/*}*/


@media screen and (max-width: 980px) {
    #tile-id-66.tile.tile-2 {
    width: 240px;
}
}

@media screen and (max-width: 980px) {
    #tile-id-74.tile.tile-2 {
    width: 240px;
}
}


@media screen and (max-width: 769px) {
    #app-tile.tile.tile-1,  #tile-id-74.tile.tile-1, #tile-id-73.tile.tile-1, #tile-id-65.tile.tile-1, #tile-id-66.tile.tile-2, #tile-id-74.tile.tile-2 {
    width: 50%;
}
}

@media screen and (max-width: 582px) {
    #tile-id-35.tile.tile-1, #app-tile.tile.tile-1,  #tile-id-74.tile.tile-1, #tile-id-73.tile.tile-1, #tile-id-65.tile.tile-1, #tile-id-66.tile.tile-2, #tile-id-74.tile.tile-2 {
    width: 100%;
}
}


@media screen and (max-width: 769px) {
    #tile-id-65.tile.tile-1, .tile-link-list {
    right: 0px;
    }
}


