@charset "utf-8";
.menuWrap{
    background-color: #333333;
}

h1{
    width: 100%;
    text-align: center;
    /*padding: 50px 0 20px 0;*/
}

.pageSubtitle, .pageSubtitle h2{
    margin: 0 auto;
    font-size: 20px;
    font-weight: 300;
    color: #4d4d4d;
}

.marginTop{
    min-height: 670px;
}

/* Responsive Video Embed */
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.videoDescription{
    background-color: #1B1B1B;
    padding: 10px;
    font-size: 14px;
    color: #FFF;
    border-top: 1px solid #474747;
}

.imageSpan{
    width: 100%;
    height: 100%;
}

.jumpToContactUs {
    font-size: 21px;
    font-weight: 300;
    margin: 10px 0 0;
    line-height: 26px;
}
.innerImage, .innerImageDiv{
    float: left;
}

.innerImageDiv{
    padding-top:15px;
    padding-bottom:15px;
}

.socialShareIcons{
    float: left;
    margin-top: 10px;
}

.addthis_toolbox{
    width: 300px;
}

.innerContent{
    color:#484848;
}

.richtext{
    font-size: 17px;
}

.subTitle{
    border-top: 1px solid #ACACAC;
    border-bottom: 1px solid #ACACAC;
    margin-bottom: 31px;
    font-size: 18px;
}

.lineSeparator{
    background-color:#ACACAC;
    height:1px;
    width:100%;
    margin-top: 31px;
    margin-bottom: 40px;
}

/* Mobile */
@media (max-width:480px){
    .subTitle{
        font-size: 16px;
    }
    .services-box{
    padding-top: 8px;
    padding-bottom: 1px;
    min-height:none;
}
    
    
}



.shareButton {

}
ul.shareList {
    display: none;
    position: absolute;
    width: 250px;
    list-style: none;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    top: 50px;
    border: 1px solid #232325;
    padding: 0;
    left: 0px;
    z-index: 12;
}
.shareButton .toolTipTop {
    display: none;
    background: url('https://new.tayarut-school.co.il/site/images/langListTop.png') no-repeat 16px 42px;
    width: 19px;
    height: 9px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
    padding: 55px 0 0 0;
    width: 250px;
}
.shareButton:hover .toolTipTop, .shareButton:hover ul.shareList {
    display: block;
}
ul.shareList li {
    border-top: 1px solid #000000;
    background: #232325;
}
ul.shareList li:first-child {
    border-top: none;
}

h4 {
    font-size: 20px;
    border-bottom: 1px solid #DEDEDE;
    padding-bottom: 5px;
}
.richtext {
    margin: 14px 0 0;
    font-size: 15px;
    font-weight: 400;
    font-family: Arial;
}
.contentDetails {
    margin: 16px 0 0;
    list-style: none;
    padding: 0;
}
.contentDetails li {
    display: inline;
    border-right: 1px solid #E5B36E;
    border-left: 1px solid #6EB2E3;
    padding-right: 28px;
    padding-left: 28px;
}
.contentDetails li img {
    margin: 0px 7px 3px 0;
}
.contentDetails li span {
    margin: 2px 0 0;
}
.contentDetails li:first-child {
    border-left: none;
    padding-left: 0;
}
.contentDetails li:last-child {
    border-right: 0;
    padding-right: 0;
}
.subContent {
    border-left: 3px solid #2B2B2B;
    padding: 0 0 0 16px;
    font-size: 18px;
    margin: 18px 0 0;
}

.bgImage {
    min-height:150px;
    z-index: 1;
    top: 0;
    left: 0;
}




#recent-work h2 {
    color: #202022;
    font-size: 36px;
    margin-bottom:30px;
    font-weight: 300;
}

.portfolio-filters {
    margin-left: 0px;
    width: 100%;
    padding-left: 0px;
    margin-bottom: 60px;
    list-style-type: none;
}

.portfolio-filters li:last-child, .portfolio-filters li:last-child:hover{
    border-left: none;
}
.portfolio-filters li {
    position: relative;
    border-left: 1px solid #cdcdcd;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    background: none;
    color: #333333;
    font-size: 18px;
    padding: 0px 10px;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.port-single-desc strong{
    font-weight: 700;
    color:#555;
}
.port-single-desc{
    margin-bottom: 10px !important;
    padding: 10px 20px !important;
}
.portfolio-filters li:hover, .portfolio-filters li.active {
    background-color: transparent;
    border: none;
    color: #3f8efb;
    border-left: 1px solid #cdcdcd;

}

.portfolio-filters .filter:last-child{
    margin: 0;
}


/*=========================================================*/
/*========= Portflio and blog image hover overlay =========*/
/*=========================================================*/
.portfolio-item{
    margin-bottom: 20px;
    /*width:33.3%;*/
}
.image-sec{
    border: 1px solid #DCDCDC;
    background: #F7F7F7;
    position: relative;
}
.image-overlay {
    position: absolute;
    text-align: center;
    background:rgba(245, 67, 37, 0.8);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.image-overlay p{
    position: absolute;
    top: 50%;
    color:#fff;
    margin-top:-10px;
    width: 100%;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.image-overlay p i{
    font-size: 44px;
    color:#fff;
}
/*.image-sec:hover .image-overlay{
    opacity: 1;
}*/

/*use for mixitup*/
#recent-work {
    min-height: 100vh;
}
#grid .mix {
    display: none;
    opacity: 0;
}

#grid{
    opacity: 0;
}

.linkWrap{
    display:block;
}

.itemWrap {
    display: block;
    width: 260px;
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
    z-index:776;
    height:220px;
    position: absolute;
}
/*.itemWrap .itemImgOverlay {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0);
    -o-transition: background 0.3s ease;
    -ms-transition: background 0.3s ease;
    -moz-transition: background 0.3s ease;
    -webkit-transition: background 0.3s ease;
    transition: background 0.3s ease;
}*/

.services-box:hover .itemWrap{
    background-color:rgba(0, 0, 0, 0.39);
    z-index:7777;
    width:260px;
    height:220px;
    z-index:1;
}



.services-box {
    color: #fff;
    width:260px;
    height:220px;
    text-align: center;
    margin-bottom: 5px;
    overflow: hidden;

}
.services-box .image {
    width: 260px;
    height: 220px; 
    margin: 0 auto;
    transition: transform .2s; /* Animation */
    position: relative;
}
.services-box h3 {
    color: #fff;
    font-size: 22px;
    min-height: 48px;
    position: absolute;
    top: 150px;
    right: 30px;
    left: 0;
    width: 200px;
    text-align: right;
    z-index:776;
}

.services-box:hover .image {
    transform: scale(1.5);
}


.services-box p {
    font-size: 14px;
    font-weight: 300;
    line-height: 22px;
    max-height: 160px;
    overflow: hidden;
}
.portfolio-item a:hover p, .portfolio-item a:focus p{
    text-decoration: none;
}
.portfolio-item a:hover, .portfolio-item a:hover path, .portfolio-item a:hover rect, .portfolio-item a:hover polygon, .portfolio-item a:hover circle, .portfolio-item a:hover ellipse{
    fill: #ff8300 !important;
}
.portfolio-item a:hover .services-box h3, .portfolio-item a:focus .services-box h3  {
    color:#fff;
    z-index:777;
}
.portfolio-item a:hover .services-box {}


.bannerRichtext{
    /*width: 390px;*/
    max-width: 80%;
    font-size:28px;
    display: flex;
    align-items: center;
        padding-top: 15px;
}
.bannerRichtext p{
    /*font-size:28px;*/
    font-size: 18px;
    color: #333;
}

.servicesBoxLearnMoreLink, .servicesBoxLearnMoreLink:visited{
    display: block;
    color: #00aeef;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
}

.servicesBoxLearnMoreLink:hover, .servicesBoxLearnMoreLink:focus{
    color: #fd8200;
}





.bannerWrap {
    /* width: 460px;
    height: 360px; */
    position: absolute;
    top: 35px;
    /*border: 5px #ffffff solid;
    border-radius: 20px;
    background-color: rgba(25, 25, 25, 0.5);*/
}
.bannerContent {
    /* position: absolute; */
    padding: 18px 30px;
    font-style: italic;
    color: #ffffff;
}


/*---------  XS ( max 1500 ) ---------*/
@media(max-width: 1500px){
    .bannerWrap {
        top: 7px;
    }
    hr {
      margin-top: 7px;
      margin-bottom: 10px;
    }    
}


/*---------  XS ( max 1200 ) ---------*/
@media(max-width: 1300px){

    .bannerContent {
        padding: 15px 30px;
        line-height: 26px;
        
    }
}


/*---------  XS ( max 1200 ) ---------*/
@media (max-width:1200px){
    .bannerWrap {
        top: 7px;
    }
    #notfound  h2 {
        font-size: 18px;
        margin:20px 0;
    }
    .bannerRichtext p{
        font-size:18px;
    }
}

/*---------  XS ( max 991 ) ---------*/
@media(max-width:991px){
    .bgImage {
        min-height:50px;
    }


    .bannerWrap {
        position: static;
        width: auto;
        height: auto;
        background: none;
        border: 0;
        border-radius: 0;
    }
    .bannerContent {
        position: static;
        color: #000000;
    }
}

/*---------  XS ( max 768 ) ---------*/
@media (max-width:768px){
    .innerImage{
        margin:auto;
        float: none !important;
    }
    .btn-theme {
        width: 100%;
    }
    .innerContent{
        padding-right:0;
    }

    .portfolio-filters li{
        width: auto;
        height: auto;
        padding: 10px;
        font-size: 14px;
        min-width: 130px;
        display: block;
    }

    .portfolio-filters li:hover, .portfolio-filters li.active{
        /*line-height: 0px;*/
    }

    .pageSubtitle, .pageSubtitle h2{
        font-size: 18px;
    }

    #recent-work h2{
        font-size: 30px;
    }
}

/*---------  XS ( max 480 ) ---------*/
@media (max-width:480px){
    
    .portfolio-item{
        margin-bottom: 0px;
    }
    .portfolio-filters {
      margin: 12px 0;
      padding: 0px;
    }
    .portfolio-filters li{
        width: 100%;
        border-left: none;
        background-color: rgba(70, 138, 231, 0.65);
        border-radius: 9px;
        margin-bottom: 10px;
    }
    .portfolio-filters li:hover, .portfolio-filters li.active{
        border-left:none;

    }
    .contactUsContainer {
      padding: 25px 0 35px 0;
      margin-top: 0px;
    }
    .services-box{
        margin: 10px;
    }
    .services-box h3{
        right: 40px;
    }
    .bannerWrap{
        display: none;
    }

    .bgImage{
        display: none;
    }
}