@import "../../../poza/assets/css/style.min.css";

/* Your CSS code goes here
-------------------------------------- */

/*----FONT AND GENERAL DEFINITIONS-----*/
@font-face {
    font-family: 'OpenSansHebrewCondensed-Regular';
    src: url('../../fonts/OpenSansHebrewCondensed-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSansHebrewCondensed-Bold';
    src: url('../../fonts/OpenSansHebrewCondensed-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSansHebrewCondensed-ExtraBold';
    src: url('../../fonts/OpenSansHebrewCondensed-ExtraBold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Tajawal-Regular';
    font-style: normal;
    font-weight: 400;
    src: local('Tajawal'), local('Tajawal-Regular'), url(https://fonts.gstatic.com/s/tajawal/v1/Iura6YBj_oCad4k1nzSBC45I.woff2) format('woff2');
    unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
}

@font-face {
    font-family: 'Tajawal-Bold';
    font-style: normal;
    font-weight: 700;
    src: local('Tajawal Bold'), local('Tajawal-Bold'), url(https://fonts.gstatic.com/s/tajawal/v1/Iurf6YBj_oCad4k1l4qkHrRpiYlJ.woff2) format('woff2');
    unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
}

@font-face {
    font-family: 'Tajawal-ExtraBold';
    font-style: normal;
    font-weight: 800;
    src: local('Tajawal ExtraBold'), local('Tajawal-ExtraBold'), url(https://fonts.gstatic.com/s/tajawal/v1/Iurf6YBj_oCad4k1l5anHrRpiYlJ.woff2) format('woff2');
    unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
}

body.admin-bar .sticky-header.sticky-header, #container .sticky-header {
    display: none !important;
}

body {
    font-family: 'Tajawal-Regular', 'OpenSansHebrewCondensed-Regular' !important;
    overflow-x: hidden;
}

p, a {
    font-size: 18px;
    font-family: 'Tajawal-Regular', 'OpenSansHebrewCondensed-Regular';
	overflow-wrap: break-word;
}

h1 {
    font-family: 'Tajawal-Bold', 'OpenSansHebrewCondensed-Bold' !important;
}

h2 {
    font-size: 46px;
    font-family: 'Tajawal-Regular', 'OpenSansHebrewCondensed-Regular' !important;
    letter-spacing: 0 !important;
}

h3 {
    letter-spacing: 0 !important;
    font-family: 'Tajawal-Regular', 'OpenSansHebrewCondensed-Regular' !important;
}

h4 {
    font-family: 'Tajawal-Regular', 'OpenSansHebrewCondensed-Regular' !important;
}

p a {
    color: #030303 !important;
}

a:hover {
    text-decoration: underline;
    color: #030303;
}

a:focus {
    color: #030303 !important;
}

span a {
    color: #030303 !important;
}

span a:hover {
    text-decoration: underline;
    color: #030303 !important;
}

#pojo-a11y-toolbar .pojo-a11y-toolbar-toggle a {
    background-color: #e2e2e2 !important;
    color: #000 !important;
}

#pojo-a11y-toolbar.pojo-a11y-toolbar-left .pojo-a11y-toolbar-toggle {
    top: 90px; /* position so doesn't overlap the breadcrumbs */
}

#pojo-scroll-up {
    background-color: #e2e2e2 !important;
}

#pojo-scroll-up a {
    color: #000 !important;
}

.fa-chevron-up {
    color: #000;
}

body:not(.page-template-page-signup) input[type="submit"],
body:not(.page-template-page-signup) .button,
body:not(.page-template-page-signup) .button.size-small,
body:not(.page-template-page-signup) .button.size-large,
body:not(.page-template-page-signup) .button.size-xl,
body:not(.page-template-page-signup) .button.size-xxl {
    background-color: #e2e2e2 !important;
    color: #000 !important;
    border-color: #000 !important;
}

/*----HEADER------*/

#header .logo {
    text-align: right;
    display: flex;
    overflow: visible;
}

.logo-text {
    margin: 12px 15px 0 0;
}

.logo div.logo-text a {
    font-family: 'Tajawal-ExtraBold', 'OpenSansHebrewCondensed-ExtraBold';
    font-size: 40px;
    color: #262c2c;
    font-weight: normal;
}

.logo div.logo-text span {
    font-family: "Tajawal-Regular", "OpenSansHebrewCondensed-Regular";
    font-size: 24px;
    color: #262c2c;
    display: block;
}


/*---NAVBAR----*/
#header .nav-main {
    border-top: none;
    border-bottom: none;
    display: flex;
    justify-content: space-between;
}

.sf-menu a, .mobile-menu a {
    font-family: "Tajawal-Regular", "OpenSansHebrewCondensed-Regular" !important;
}

.nav-main ul {
    margin: 0;
}

body.rtl .sf-menu li.sfHover > ul, body.rtl .sf-menu li:hover > ul {
    top: 44px;
    display: block !important;
}

.sf-menu > li {
    margin: 0 0 0 25px;
}

.sf-menu > li > a {
    border-top: none;
    padding: 0;
    font-size: 20px;
    width: auto;
}

.sf-menu > li > .sub-menu > li{
	position: relative;
	cursor: pointer;
}

ul.sf-menu.sf-menu li li li.sfHover > ul, 
ul.sf-menu.sf-menu li li li:hover > ul, 
ul.sf-menu.sf-menu li li.sfHover > ul, 
ul.sf-menu.sf-menu li li:hover > ul{
	top: 0;
}

.nav-main .nav-main-inner .sf-menu .sub-menu li {
    background-color: black !important;
    border-top: 1px solid white;
}

.nav-main .sf-menu .sub-menu li a {
    color: white !important;
    /*padding: 10px 10px 10px 0;*//* Lea 2021: commented because makes submenu items too tall*/
}

.nav-main .current_page_item a {
    border-bottom: 1px solid;
    border-color: #313131 !important;
    color: #313131;
    height: 48px;
}

nav-main .sf-menu li.current-menu-item > a, .nav-main .sf-menu li.current-menu-ancestor > a {
    border-bottom: 1px solid;
    border-color: #313131 !important;
    color: #313131;
    height: 48px;
}

.sf-menu a:hover, .sf-menu li.active a, .sf-menu li.current-menu-item > a, .sf-menu li.current-menu-ancestor > a,
.mobile-menu a:hover, .mobile-menu li.current-menu-item > a {
    color: #313131 !important;
}

#responsive-menu-pro-container #responsive-menu-pro ul {
    margin-right: 2rem;
}

.icons-navbar .menu-icons {
    list-style-type: none;
    display: flex;
    margin-top: 5px;
}

.icons-navbar .menu-icons li {
    margin-left: 10px;
    /* for when the icons wrap: */
    margin-bottom: 10px;
}

.icons-navbar .menu-icons li:last-child {
    margin-left: 0;
}

.icons-navbar .google a, .icons-navbar .webtop a, .icons-navbar .smartschool a, .icons-navbar .campus a, .icons-navbar .facebook a,
.icons-navbar .instegram a, .icons-navbar .instagram a, .icons-navbar .youtube a, .icons-navbar .emergency a, .icons-navbar .zoom a, 
.icons-navbar .tiktok a, .icons-navbar .eduil365 a {
    text-indent: -9999px;
    display: inline-block;
    background-image: url("../images/icons.png?ver=0.2");
    background-repeat: no-repeat;
    height: 42px;
    width: 40px;
}

.webtop a {
    background-position: 0 -88px;
}

.smartschool a {
    background-position: 0 -43px;
}

.campus a {
    background-position: 0 0;
}

.google a {
    background-position: 0 -133px;
}

.facebook a {
    background-position: 0 -178px;
}

.instegram a,
.instagram a {
    background-position: 0 -223px;
}

.youtube a {
    background-position: 0 -268px;
}

.emergency a {
    background-position: 0 -314px;
}

.radio a {
    background-position: 0 -359px;
}

.zoom > a {
    background-position: 0 -404px;
}

.tiktok a {
    background-position: 0 -449px;
}

.eduil365 a {
    background-position: 0 -494px;
}

/*----BODY-HOME-PAGE-----*/

.home #primary .container {
    max-width: none;
    width: auto;
}

.home #primary #content {
    margin-bottom: -10px;
    margin-top: 13px;
}

.read-more {
    display: block;
    margin: 0 auto;
    background-color: transparent;
    border-color: #313131;
    line-height: initial;
}

.read-more:hover {
    background-color: transparent;
}

.read-more a {
    color: #030303;
    font-size: 22px;
}

.read-more a:hover {
    color: #030303;
    text-decoration: underline;
}

/*--remove the arrows images from main image-slider--*/
.ms-nav-prev, .ms-nav-next {
    opacity: 0 !important;
}

/*------NEW-CARUSELA-----*/
.widget_text, .widget_block, .widget_pojo_social_links {
    list-style: none;
}

.section-2 {
    margin: 30px 0 25px 0;
}

.section-2 h2 {
    text-align: center;
    font-size: 46px;
}

.wonderplugincarousel {
    /*max-width:1082px !important;*/
}

.wonderplugincarousel.wonderplugincarousel .amazingcarousel-prev {
    left: -1% !important;
    background: rgba(0, 0, 0, 0) url("../images/arrows.png") no-repeat scroll left top !important;
}

.wonderplugincarousel.wonderplugincarousel .amazingcarousel-next {
    right: -1% !important;
    background: rgba(0, 0, 0, 0) url("../images/arrows.png") no-repeat scroll right top !important;
}

.wonderplugincarousel.wonderplugincarousel .amazingcarousel-item-container {
    border: none !important;
    box-shadow: none !important;
}

.wonderplugincarousel.wonderplugincarousel .amazingcarousel-title {
    margin-bottom: 10px !important;
    font-size: 26px !important;
    font-family: "Tajawal-Regular", "OpenSansHebrewCondensed-Regular" !important;
    margin-top: auto !important;
}

.wonderplugincarousel.wonderplugincarousel .amazingcarousel-title a {
    margin-bottom: 10px !important;
    font-size: 26px !important;
    font-family: "Tajawal-Regular", "OpenSansHebrewCondensed-Regular" !important;
    margin-top: auto !important;
    color: #333333 !important;

}

.amazingcarousel-nav {
    display: none !important;
}

.wonderplugincarousel .amazingcarousel-item .amazingcarousel-item-container {
    width: 240px !important;
    height: auto !important;
    margin: 0 !important;
}

.wonderplugincarousel .amazingcarousel-item .amazingcarousel-item-container:hover {
    background-color: #f5f5f5 !important;
}

.amazingcarousel-image-fix-wrapper {
    width: 240px !important;
    height: 160px !important;
    margin-left: -10px;
}

.amazingcarousel-image {
    width: 240px !important;
    height: 180px !important;
}

.wonderplugincarousel.wonderplugincarousel .amazingcarousel-image div {
    background-color: transparent !important;
}

.wonderplugincarousel.wonderplugincarousel .amazingcarousel-image div a {
    opacity: 0 !important;
}

.amazingcarousel-title {
    unicode-bidi: plaintext !important;
}

/*CARUSELA*/
.section-2{
    margin: 30px 0 25px 0;
}
 .section-2 h2{
    text-align: center;
    font-size: 46px;
}
/* 	Lea 01/2021: needed for aleshrak slideshow. Important not to let this impact shtekelis and mmoshe.
	Lea 27/3/22: commenting out because aleshrak doesn't show that slideshow now, and it's interfering alony */
/* .custom-html-widget .pojo-slideshow .bx-wrapper{
    max-width: 1140px !important;
} */

/* .slide .carousel-image{
    height:87%;
} 
.pojo-slideshow .slide .bx-caption{
    opacity: 1;
}
.bx-wrapper .bx-caption{
    background: transparent;
}
.bx-wrapper .bx-caption span{
    color:#3f3f3f;
    font-family:"Tajawal-Regular","OpenSansHebrewCondensed-Regular";
    font-size:24px;
    padding-bottom: 16px;
    font-weight: normal;
}
.slide div:first-child{
    background-color:white;
    padding: 15px;
}
.slide div:first-child:hover{
    background-color: #f5f5f5;
    padding: 15px;
    cursor: pointer;
}*/
.bx-wrapper .bx-prev,.bx-wrapper .bx-next{
    border-radius: 25px;
    background-position-y:-30px;
    background:none;
    position: relative;
}

.bx-wrapper .bx-prev:after,.bx-wrapper .bx-next:after{
    content: "\f137";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    position: absolute;
    font-size: 40px;
    color: #818181;
    top:-78%;
    left:0%;
    margin: 0;
    z-index: 1;
}
.bx-wrapper .bx-next:after{
    content: "\f138";
    left:-4%;
}

/*---SECTION-3----*/
.section-3 {
    background-color: #f6f5f5;
    padding-bottom: 40px;
}

.section-3 h2 {
    text-align: center;
    font-size: 46px;
    padding-top: 25px;
}

.important-posts {
    display: flex;
    justify-content: center;
    list-style-type: none;
    padding-right: 0;
}

.important-posts li {
    width: 270px;
    margin-right: 10px;
    padding: 10px;
    background-color: #f6f5f5;
}

.important-posts li:hover {
    background-color: white;
}

.post-text {
    text-align: center;
    font-size: 18px;
    color: #313131;
    width: 92%;
    padding-right: 20px;
    word-break: break-word;
}

.post-text h3 {
    margin-bottom: 10px;
    font-size: 26px;
    font-family: "Tajawal-Regular", "OpenSansHebrewCondensed-Regular";
    line-height: 25px;
}

.important-posts .post-text p {
    color: #313131;
}

/*--SECTION-4---*/
.section-4 {
    background-image: url('../images/messeges.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 28px;
}

.section-4 h2 {
    text-align: center;
    font-size: 46px;
    padding: 30px 0 0 0;
    margin: 0;
}

.section-4 .important-posts {
    padding: 30px 0 60px;
}

.section-4 .important-posts li {
    width: 270px;
    padding: 0;
    background-color: transparent;
}

.section-4 .important-posts li:hover {
    background-color: #f6f5f5;
}

/*---SECTION-5-----*/
.section-5 h2 {
    text-align: center;
    margin: 70px 0;
    font-size: 46px;
}

.section-5 .important-posts {
    margin-bottom: 80px;
}

.section-5 .important-posts li {
    width: 260px;
    padding: 10px;
    background-color: transparent;
    margin-right: 20px;
}

.section-5 .important-posts li:hover {
    background-color: #f6f5f5;
}

.section-5 .important-posts li a img, .section-3 .important-posts li a img {
    width: 240px !important;
    height: 160px !important;
}

/*---YOUTUBE-ZONE---*/
.youtube-zone {
    background-color: #e1e1e1;
}

.youtube-zone ul {
    display: flex;
    justify-content: center;
    list-style-type: none;
}

.youtube-zone ul li {
    width: 33.2%;
    padding: 40px 0;
}

.youtube-zone ul li:first-child {
    padding-left: 40px;
}

/*-----FOOTER-----*/

#footer a {
    color: #ffffff !important;
}

#container #footer {
    background-color: #20201d;
}

#footer .container {
    width: 100vw;
    position: relative;
    left: auto;
    right: auto;
    margin-left: 0;
    margin-right: 0;
	padding: 20px 60px 0 60px
}

#footer .container .widget_text h5 {
    color: white;
}

/*#footer .container .widget-inner h5 span {
    margin-right: 8px;
}*/

#footer .container .widget_custom_html .widget-inner h5 span {
    margin-right: 0;
}

#sidebar-footer {
    padding-top: 0;
}


.row .col-sm-4 {
    width: 24.8%;
}

#sidebar-footer a:focus {
    color: white !important;
}

.widget_text .widget-inner, .widget_nav_menu .widget-inner {
    padding-top: 40px;
}

#sidebar-footer .widget ul {
    padding-right: 0;
}

.custom-html-widget {
    font-family: "Tajawal-Regular", "OpenSansHebrewCondensed-Regular";
}

.widget_pojo_google_maps {
    padding-left: 0 !important;
    margin-bottom: 0 !important;
}

/*.widget_pojo_social_links {
    margin-top: -90px;
}*/

.widget_pojo_social_links ul.social-links li a .social-icon::before {
    color: black;
    background-color: white;
}

.custom-embed iframe {
    height: 400px !important;
}

.widget-title span {
    color: white;
    font-size: 24px;
    font-family: "Tajawal-Regular", "OpenSansHebrewCondensed-Regular";
}

#sidebar-footer .widget .custom-html-widget, #sidebar-footer .widget ul li a, .widget-inner .textwidget p {
    font-size: 18px;
    color: white;
}

#sidebar-footer .widget ul li:before {
    content: "• ";
}

#sidebar-footer .widget_pojo_social_links ul li:before {
    content: "";
}

#footer .row section:nth-child(3) {
    width: 20%;
}

#footer .row section:nth-child(4) {
    width: 30%;
}

#container #copyright {
    background-color: #313131;
}

.pull-right-copyright {
    float: none;
    text-align: center;
    font-size: 18px;
    color: white;
    font-family: "Tajawal-Regular", "OpenSansHebrewCondensed-Regular";
}

/*#footer {
    margin-right: -15px;
}*/

/*-----PAGES + SINGLE-PAGE-----*/
.current {
    color: #030303 !important;
}

.page #title-bar, .single #title-bar, .category .title-bar {
    background-color: #cad4dd;
}

.page #title-bar, .category .title-bar {
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-size: cover !important;
    height: 100px !important;
}

.page #title-bar .title-bar-default {
    padding-top: 25px;
}

.page #title-bar .title-primary, .single #title-bar .title-primary {
    font-size: 46px;
    font-family: "Tajawal-Regular", "OpenSansHebrewCondensed-Regular";
}

.page #title-bar div.breadcrumbs, .page #title-bar div.breadcrumbs a,
.single #title-bar div.breadcrumbs, .single #title-bar div.breadcrumbs a,
.category #primary #breadcrumbs, .category #primary #breadcrumbs a {
    font-family: "Tajawal-Regular", "OpenSansHebrewCondensed-Regular";
    font-size: 18px;
    font-style: normal;
    color: #6f6f6f;
}

.category .grid-item .inbox .caption h4.grid-heading, .page .grid-item .inbox .caption h4.grid-heading {
    margin-bottom: 5px;
}

.category .grid-item .inbox .caption h4.grid-heading, .page .grid-item .inbox .caption h4.grid-heading {
    font-family: 'Tajawal-Bold', "OpenSansHebrewCondensed-bold";
    color: #313131;
}

.page .grid-item .inbox .image-link .media-object {
    height: 240px !important;
    width: 360px !important;
}

.page .grid-item .inbox .caption .entry-excerpt {
    font-family: "Tajawal-Regular", "OpenSansHebrewCondensed-Regular";
    color: #313131;
    margin-bottom: 5px;
    letter-spacing: 0.5px;
}

.inbox .image-link:hover .overlay-image {
    opacity: 0;
}

.inbox .image-link .entry-date {
    background-color: black;
    height: 55px;
}

.inbox .image-link:hover .entry-date {
    display: block;
}

.inbox .image-link .entry-date .entry-date-inner {
    display: block;
}

/*.image-link figcaption{
    display: none;
}*/

.single p a {
    border-bottom: 1px dotted #030303;
}

.single p a:hover {
    border-bottom: none;
}

/*----CATEGORY-------*/

.category .entry-header {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    background-color: #cad4dd;
    background-size: cover;
    padding: 0 20px;
}

.category #primary #breadcrumbs {
    margin-top: 40px;
}

.category .page-title .entry-title {
    font-size: 42px;
    font-family: "Tajawal-Regular", "OpenSansHebrewCondensed-Regular" !important;
    line-height: 1;
}

.category .entry-header #breadcrumbs, .category .page-title h1 {
    margin-top: 35px !important;
}

#grid-items {
    margin-top: 30px;
}

.caption a span {
    color: #030303 !important;
}

#title-bar .title-primary.new-line-title {
    display: block;
}

#title-bar .title-primary.new-line-title + .breadcrumbs {
    text-align: right;
    display: block;
}

/* Fix the problem of smash the category text one line at another on the 385 pixel small screen */

@media (min-width: 320px) and (max-width: 420px) {

    .category .entry-header {
        flex-direction: column-reverse;
        justify-content: center;
        padding-bottom: 25px;
    }

    #primary #breadcrumbs {
        line-height: 0;
    }

    .category .entry-header #breadcrumbs {
        margin: 0 !important;
    }
}

@media (max-width: 767px) {
    #title-bar .title-primary {
        line-height: 1.1;
    }
}

/*----SINGLE-PAGE-----*/
.single #title-bar {
    height: auto;
    padding: 20px 0;
}

.single .attachment-post-thumbnail {
    width: 100%;
    height: 400px;
    margin-bottom: 30px;
}

.single .entry-post {
    margin-right: 0;
    margin-left: 0;
}

.single-post .entry-post {
    max-width: 1120px;
}

.single .entry-post .entry-header .page-title h1 {
    text-align: right;
    margin-top: 0;
}

.single .post .media-object {
    height: 400px;
    width: 100%;
    object-fit: cover;
}

.single .entry-post {
    margin-top: 20px;
}

.single .entry-post .entry-header .entry-meta {
    display: none;
}

/* 404 Page */

.error404 #content article h1 {
    line-height: 1;
}

.error404 #content input.search-field {
    width: 350px;
    max-width: 100%;
    margin: 0 auto 20px;
    height: 50px;
}

/*Related posts*/
.yarpp-related {
    margin-top: 30px !important;
    clear: both;
}

.yarpp-thumbnails-horizontal {
    display: flex;
    flex-wrap: wrap;
}

.yarpp-related.yarpp-related h3 {
    font-weight: normal;
}

@media only screen and (max-width: 550px) {

    .yarpp-related.yarpp-related h3 {
        text-align: center;
    }

    .yarpp-thumbnails-horizontal {
        flex-direction: column;
        align-items: center;
    }

    .yarpp-related a.yarpp-thumbnail:first-child,
    .yarpp-thumbnail.yarpp-thumbnail:first-child > img {
        margin-right: 5px !important;
    }
}

.yarpp-related a.yarpp-thumbnail {
    height: auto;
    color: #3d3d3d;
    border: none;
    text-decoration: underline;
}

.yarpp-related a.yarpp-thumbnail:first-child {
    margin-right: 0;
}

.yarpp-thumbnail:first-child > img, .yarpp-thumbnail-default {
    margin-right: 0 !important;
}

.yarpp-related a .yarpp-thumbnail-title {
    text-align: right;
    font-weight: normal;
    /* trim title after 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/*----MOBILE-DESIGHN----*/

@media (min-width: 320px) and (max-width: 900px) {
    html {
        overflow-x: hidden !important;
    }

    .nav-main .navbar-collapse .mobile-menu {
        width: 100vw;
        background-color: black;
    }

    .nav-main .navbar-collapse .mobile-menu li a {
        font-family: "Tajawal-Regular", "OpenSansHebrewCondensed-Regular";
        color: white !important;
        border-bottom: 1px solid white !important;
        padding: 10px 10px 10px 0;
    }

    .nav-main .navbar-collapse .mobile-menu .sub-menu li a {
        padding-right: 40px;
    }

    .nav-main .navbar-collapse .mobile-menu .sub-menu li a::after {
        content: "°";
        vertical-align: sub;
        margin-left: 5px;
    }

    .nav-main .navbar-collapse .mobile-menu li a span:hover {
        color: white;
    }

    .navbar-toggle .icon-bar {
        background-color: #000000 !important;
        margin: 0 auto;
    }

    body.pojo-a11y-negative-contrast .navbar-toggle .icon-bar {
        border: 1px solid #fff;
    }

    body.pojo-a11y-light-background .navbar-toggle .icon-bar {
        border: 1px solid #000;
    }

    #header .logo {
        justify-content: space-between;
        direction: ltr;
        flex-wrap: wrap;
    }

    #header .nav-main-inner ul:first-child {
        margin-top: 20px;
        margin-bottom: -25px;
    }

    .logo-text {
        display: block;
        text-align: center;
        width: 100%;
    }

    .logo-img {
        width: 85%;
    }

    .logo .navbar-toggle {
        margin-left: 0 !important;
        width: 14%;
    }

    #header .nav-main {
        flex-wrap: wrap;
    }

    /*.nav-main .navbar-collapse{*/
    /*    margin: 0 auto 3rem;*/
    /*}*/
    .icons-navbar {
        margin: 0 auto;
    }

    .icons-navbar .menu-icons {
        justify-content: center;
        margin-bottom: 0;
        padding-bottom: 20px;
        padding-right: 0;
    }


    .navbar-toggle .icon-bar {
        background-color: #313131;
        height: 4px;
    }

    .pojo-slideshow-wrapper .slide {
        margin-right: 0 !important;
    }

    .slide div:first-child {
        background-color: #f6f5f5;
    }

    .section-2 {
        margin-bottom: 0;
    }

    .section-3 {
        margin-top: 20px;
    }

    .section-3 h2 {
        margin-top: 0;
    }

    .important-posts {
        flex-wrap: wrap;
    }

    .section-4 {
        background-image: url('../images/mas-mob.png');
        background-repeat: no-repeat;
        background-size: cover;
    }

    .section-5 h2 {
        margin: 20px 0;
    }

    .youtube-zone ul {
        flex-wrap: wrap;
        padding: 0 30px;
    }

    .youtube-zone ul li {
        width: 100%;
    }

    #footer .container.container {
        padding-right: 0;
        padding-left: 0;
    }

    .row .col-sm-4 {
        width: auto !important;
    }

    #footer .row section:nth-child(-n+3) {
        padding-right: 43px;
		padding-left: 43px;
    }

    .widget_pojo_social_links {
        margin-top: 30px;
        margin-bottom: 0;
        text-align: center;
    }

    #sidebar-footer .widget.widget_pojo_social_links {
        margin-bottom: 15px;
    }

    .breadcrumbs.hidden-xs {
        display: block !important;
    }

}

@media (max-width: 559px) {

    .section-4 {
        background-size: 110% 100%;
        background-position-y: -5px;
        background-position-x: 0px;
    }

    .section-4 .important-posts {
        padding: 30px 0 18px;
    }

    .read-more {
        /*transform: translateY(-6px);*/
    }

}

/*--- to fix the space between logos----*/
@media (min-width: 768px) and (max-width: 900px) {
    .logo-text {
        width: auto;
    }

    .logo-img {
        width: auto;
    }


}

/* add space between the ort logo and menu in mobile */
@media (max-width: 767px) {
    body.rtl #header .logo .logo-img {
        margin-bottom: 10px;
    }

    #breadcrumbs {
        line-height: 1.7;
        padding-top: 20px;
    }
}

/* fix the header on tablet */
@media (min-width: 768px) and (max-width: 900px) {
    #header > div > div {
        display: flex;
        justify-content: flex-end !important;
    }

    #header > div > div > div.logo-img {
        flex: 1;
        display: flex;
    }

    #header > div > div > nav {
        order: 1;
    }

    #header .nav-main {
        flex-basis: 100%;
        display: flex;
        justify-content: flex-end;
    }


}

/* style the icons on footer */

@media (max-width: 1440px) {
    #footer .container {
        padding-right: 80px;
        padding-left: 80px;
    }

    #footer .container #pojo_google_maps-2,
	#footer .container #pojo_google_maps-3 /* needed for ariel */	{
        width: 100% !important;
		padding-right: 0; /* needed for ariel */
    }

	#footer .container #pojo_google_maps-2 .widget-title,
	#footer .container #pojo_google_maps-3 .widget-title{
		padding-right: 41px;
	}
	
    #footer .menu-icons {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        padding-left: 0;
    }

    #footer .menu-icons li::before {
        content: "";
        margin-right: 5px;
        margin-left: 5px;
    }


    /* #footer .menu-icons li:last-child::before {
        content: "";
        margin-right: 0;
        margin-left: 0;
    } */
    #footer #sidebar-footer > div > div {
        display: flex;
        flex-wrap: wrap;
    }

    #footer .widget_text,
    #footer .widget_nav_menu {
        flex-basis: 33%;
    }

    #footer .widget_pojo_social_links {
        flex-basis: 100%;
    }

}

@media (max-width: 706px) {
    #footer .widget_text {
        flex-basis: 100%;
    }

    #footer .row .widget_nav_menu {
        flex-basis: 50%;
        padding-right: 38px;
        padding-left: 0;
    }

    #footer .row .widget_nav_menu ~ .widget_nav_menu {
        padding-right: 15px;
    }

}

@media (max-width: 420px) {
    #footer .row .widget_nav_menu.widget_nav_menu {
        padding-right: 43px;
        flex-basis: 100%;
    }
}

@media (min-width: 900px) and (max-width: 1024px) {
    #footer #pojo_google_maps-2 {
        width: 36%;
    }
}

/* justify footer on leptop divices */

@media (min-width: 900px) and (max-width: 1440px) {
    #sidebar-footer .row .widget_nav_menu {
        flex-basis: 25% !important;
    }

    /*#footer #pojo_google_maps-2 {
        flex-basis: 25%;
    }
    #footer .widget_pojo_social_links {
        order: 1;
    }*/
}

@media (min-width: 1441px) {
    #sidebar-footer > div > div.row {
        display: flex;
        flex-wrap: wrap;
    }

    #sidebar-footer .widget_pojo_social_links {
        /*order: 1;*/
        flex-basis: 35%;
    }

    /* #sidebar-footer .widget_pojo_google_maps {
         flex: 1;
     }*/
}

@media (min-width: 886px) and (max-width: 1440px) {
    #header > div > div > div.logo-img {
        flex: none;
    }

    #header .logo {
        flex-wrap: wrap;
    }

}

@media (max-width: 1440px) {
    .hidden-xs {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1440px) {
    #header .logo > button.navbar-toggle.visible-xs {
        display: block !important;
        order: 1;
        width: 100%;
        direction: rtl;
    }

    .navbar-toggle .icon-bar {
        background-color: #313131 !important;
        height: 4px;
    }

    .nav-main .navbar-collapse .mobile-menu {
        width: 100vw;
        background-color: black;
    }

    .navbar-collapse.collapse.in {
        overflow: scroll !important;
    }

    .nav-main .navbar-collapse .mobile-menu li a {
        color: white !important;
        border-bottom: 1px solid white !important;
    }


}

@media (min-width: 901px) and (max-width: 1440px) {
    #header .logo {
        justify-content: flex-start;
    }

    #header .logo > button.navbar-toggle.visible-xs {
        margin: 0 1.6rem;
    }

    div.logo-text {
        flex-basis: 67%;
    }

	#header .nav-main {
        flex-wrap: wrap;
        width: 100%;
        order: 1;
    } 

    .nav-main .navbar-collapse .mobile-menu .sub-menu li a {
        padding-right: 40px;
    }

    .nav-main .navbar-collapse .mobile-menu .sub-menu li a::after {
        content: "°";
        vertical-align: sub;
        margin-left: 5px;
    }

}

@media (min-width: 901px) and (max-width: 1440px) {

    /* bring the footer icons closer to the social links */
    #footer .icons-navbar {
        margin: 20px 30px 0 0;
    }

    #footer .menu-icons {
        padding-bottom: 10px;
        margin-bottom: 0;
    }

    #footer #nav_menu-4 {
        /* order: 5;*/
        display: block;
        margin-top: -88px;
        padding-right: 15px;
    }

    .widget_pojo_google_maps {
        order: 4;
    }
}

@media (max-width: 1024px) and (min-width: 1024px) {

    #footer .widget_pojo_google_maps {
        width: 24%;
        flex-basis: 24%;
        transform: translateX(-7px);
    }

}

@media (max-width: 420px) {
    #main > .entry-header h1 {
        margin-bottom: -3px;
    }
}

.centered-content {
    max-width: 680px;
    margin: 0 auto;
}

.pojo-load-more.button {
    background-color: transparent !important;
    line-height: initial;
    color: #000 !important;
    border-color: #000 !important;
}

/* fix accessibility */

body.pojo-a11y-light-background #wonderplugincarousel-container-1 .amazingcarousel-prev {
    left: -1% !important;
    background: rgba(0, 0, 0, 0) url(../images/arrows.png) no-repeat scroll left top !important;
}

body.pojo-a11y-negative-contrast #wonderplugincarousel-container-1 .amazingcarousel-prev {
    left: -1% !important;
    background: yellow url(../images/arrows.png) no-repeat scroll left top !important;
}

body.pojo-a11y-light-background #wonderplugincarousel-container-1 .amazingcarousel-next {
    right: -1% !important;
    background: rgba(0, 0, 0, 0) url(../images/arrows.png) no-repeat scroll right top !important;
}

body.pojo-a11y-negative-contrast #wonderplugincarousel-container-1 .amazingcarousel-next {
    right: -1% !important;
    background: yellow url(../images/arrows.png) no-repeat scroll right top !important;
}

body.pojo-a11y-light-background #wonderplugincarousel-container-1 .wonderplugincarousel.wonderplugincarousel .amazingcarousel-image div,
body.pojo-a11y-negative-contrast #wonderplugincarousel-container-1 .wonderplugincarousel.wonderplugincarousel .amazingcarousel-image div {
    background-color: transparent !important;
}

.addAccessibility {
    outline: 3px solid #b4d5f2;
    outline-offset: 5px;
}

.nav-main .sf-menu .sub-menu li a:hover {
    text-decoration: underline;
}


#arrowSliderAccessibility:focus::after {
    content: "";
    background-color: #81defead;
    width: 30px;
    height: 30px;
    display: block;
}

#pojo-a11y-toolbar > div.pojo-a11y-toolbar-overlay > div > ul > li > a:focus {
    outline: 3px solid #88d2f6;
    outline-offset: -2px;
}

.accessibilityGrayscale {
    filter: grayscale(1);
}

#pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a.active {
    background-color: purple !important;
}

/*
fixed the The disappearance of the icons in a bright background
 and the opposite contrast
*/
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar) .menu-icons > li.google > a,
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar) .menu-icons > li.webtop > a,
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar) .menu-icons > li.smartschool > a,
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar) .menu-icons > li.campus > a,
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar) .menu-icons > li.facebook > a,
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar) .menu-icons > li.instegram > a,
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar) .menu-icons > li.instagram > a,
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar) .menu-icons > li.youtube > a,
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar) .menu-icons > li.googleinstagram > a,
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar) .menu-icons > li.emergency > a,
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar) .menu-icons > li.zoom > a,
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar) .menu-icons > li.tiktok > a,
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar) .menu-icons > li.eduil365 > a {
    background-image: url(../images/icons.png?ver=0.1) !important;
}

body.pojo-a11y-light-background :not(#pojo-a11y-toolbar) .menu-icons .google > a {
    background-position: 0 -133px !important;
}

body.pojo-a11y-light-background :not(#pojo-a11y-toolbar) .menu-icons .webtop > a {
    background-position: 0 -88px !important;
}

body.pojo-a11y-light-background :not(#pojo-a11y-toolbar) .menu-icons .smartschool > a {
    background-position: 0 -43px !important;
}

body.pojo-a11y-light-background :not(#pojo-a11y-toolbar) .menu-icons .campus > a {
    background-position: 0 0 !important;
}

body.pojo-a11y-light-background :not(#pojo-a11y-toolbar) .menu-icons .emergency > a {
    background-position: 0 -314px !important;
}

body.pojo-a11y-light-background :not(#pojo-a11y-toolbar) .menu-icons .facebook > a {
    background-position: 0 -178px !important;
}

body.pojo-a11y-light-background :not(#pojo-a11y-toolbar) .menu-icons .youtube > a {
    background-position: 0 -268px !important;
}

body.pojo-a11y-light-background :not(#pojo-a11y-toolbar) .menu-icons .instegram > a,
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar) .menu-icons .instagram > a {
    background-position: 0 -223px !important;
}

body.pojo-a11y-light-background :not(#pojo-a11y-toolbar) .menu-icons .emergency > a {
    background-position: 0 -314px !important;
}

body.pojo-a11y-light-background :not(#pojo-a11y-toolbar) .menu-icons .zoom > a {
    background-position: 0 -404px !important;
}

body.pojo-a11y-light-background :not(#pojo-a11y-toolbar) .menu-icons .tiktok > a {
    background-position: 0 -449px !important;
}

body.pojo-a11y-light-background :not(#pojo-a11y-toolbar) .menu-icons .eduil365 > a {
    background-position: 0 -494px !important;
}

/*a11y-negative-contrast*/

body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .menu-icons > li.google > a,
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .menu-icons > li.webtop > a,
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .menu-icons > li.smartschool > a,
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .menu-icons > li.campus > a,
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .menu-icons > li.facebook > a,
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .menu-icons > li.instegram > a,
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .menu-icons > li.instagram > a,
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .menu-icons > li.youtube > a,
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .menu-icons > li.googleinstagram > a,
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .menu-icons > li.emergency > a,
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .menu-icons > li.zoom > a,
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .menu-icons > li.tiktok > a,
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .menu-icons > li.eduil365 > a{
    background-image: url(../images/icons.png?ver=0.1) !important;
}

body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .menu-icons .google > a {
    background-position: 0 -133px !important;
}

body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .menu-icons .webtop > a {
    background-position: 0 -88px !important;
}

body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .menu-icons .smartschool > a {
    background-position: 0 -43px !important;
}

body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .menu-icons .campus > a {
    background-position: 0 0 !important;
}

body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .menu-icons .emergency > a {
    background-position: 0 -314px !important;
}

body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .menu-icons .facebook > a {
    background-position: 0 -178px !important;
}

body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .menu-icons .youtube > a {
    background-position: 0 -268px !important;
}

body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .menu-icons .instegram > a,
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .menu-icons .instagram > a {
    background-position: 0 -223px !important;
}

body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .menu-icons .emergency > a {
    background-position: 0 -314px !important;
}

body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .menu-icons .zoom > a {
    background-position: 0 -404px !important;
}

body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .menu-icons .tiktok > a {
    background-position: 0 -449px !important;
}

body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .menu-icons .eduil365 > a {
    background-position: 0 -494px !important;
}

body.pojo-a11y-negative-contrast .responsive-menu-pro-inner, body.pojo-a11y-negative-contrast .responsive-menu-pro-inner::before, body.pojo-a11y-negative-contrast .responsive-menu-pro-inner::after {
    background-color: #fff;
}

/* a11y-high-contrast */
body.pojo-a11y-high-contrast :not(#pojo-a11y-toolbar) .menu-icons > li.google > a,
body.pojo-a11y-high-contrast :not(#pojo-a11y-toolbar) .menu-icons > li.webtop > a,
body.pojo-a11y-high-contrast :not(#pojo-a11y-toolbar) .menu-icons > li.smartschool > a,
body.pojo-a11y-high-contrast :not(#pojo-a11y-toolbar) .menu-icons > li.campus > a,
body.pojo-a11y-high-contrast :not(#pojo-a11y-toolbar) .menu-icons > li.facebook > a,
body.pojo-a11y-high-contrast :not(#pojo-a11y-toolbar) .menu-icons > li.instegram > a,
body.pojo-a11y-high-contrast :not(#pojo-a11y-toolbar) .menu-icons > li.instagram > a,
body.pojo-a11y-high-contrast :not(#pojo-a11y-toolbar) .menu-icons > li.youtube > a,
body.pojo-a11y-high-contrast :not(#pojo-a11y-toolbar) .menu-icons > li.googleinstagram > a,
body.pojo-a11y-high-contrast :not(#pojo-a11y-toolbar) .menu-icons > li.emergency > a,
body.pojo-a11y-high-contrast :not(#pojo-a11y-toolbar) .menu-icons > li.zoom > a,
body.pojo-a11y-high-contrast :not(#pojo-a11y-toolbar) .menu-icons > li.tiktok > a,
body.pojo-a11y-high-contrast :not(#pojo-a11y-toolbar) .menu-icons > li.eduil365 > a{
    background-image: url(../images/icons.png?ver=0.1) !important;
}

body.pojo-a11y-high-contrast :not(#pojo-a11y-toolbar) .menu-icons .google > a {
    background-position: 0 -133px !important;
}

body.pojo-a11y-high-contrast :not(#pojo-a11y-toolbar) .menu-icons .webtop > a {
    background-position: 0 -88px !important;
}

body.pojo-a11y-high-contrast :not(#pojo-a11y-toolbar) .menu-icons .smartschool > a {
    background-position: 0 -43px !important;
}

body.pojo-a11y-high-contrast :not(#pojo-a11y-toolbar) .menu-icons .campus > a {
    background-position: 0 0 !important;
}

body.pojo-a11y-high-contrast :not(#pojo-a11y-toolbar) .menu-icons .emergency > a {
    background-position: 0 -314px !important;
}

body.pojo-a11y-high-contrast :not(#pojo-a11y-toolbar) .menu-icons .facebook > a {
    background-position: 0 -178px !important;
}

body.pojo-a11y-high-contrast :not(#pojo-a11y-toolbar) .menu-icons .youtube > a {
    background-position: 0 -268px !important;
}

body.pojo-a11y-high-contrast :not(#pojo-a11y-toolbar) .menu-icons .instegram > a,
body.pojo-a11y-high-contrast :not(#pojo-a11y-toolbar) .menu-icons .instagram > a {
    background-position: 0 -223px !important;
}

body.pojo-a11y-high-contrast :not(#pojo-a11y-toolbar) .menu-icons .emergency > a {
    background-position: 0 -314px !important;
}

body.pojo-a11y-high-contrast :not(#pojo-a11y-toolbar) .menu-icons .zoom > a {
    background-position: 0 -404px !important;
}

body.pojo-a11y-high-contrast :not(#pojo-a11y-toolbar) .menu-icons .tiktok > a {
    background-position: 0 -449px !important;
}

body.pojo-a11y-high-contrast :not(#pojo-a11y-toolbar) .menu-icons .eduil365 > a {
    background-position: 0 -494px !important;
}

body.pojo-a11y-high-contrast .responsive-menu-pro-inner, body.pojo-a11y-high-contrast .responsive-menu-pro-inner::before, body.pojo-a11y-high-contrast .responsive-menu-pro-inner::after {
    background-color: #fff !important;
}

.menu-icons .webtop > a {
    background-position: 0 -88px !important;
}

/** Signup Page (Landing page) - Begin **/
.page-template-page-signup a {
    cursor: pointer;
    color: #030303;
    font-size: inherit;
    text-decoration: underline;
}

.page-template-page-signup a:hover {
    border-bottom: none;
}

.page-template-page-signup article section:not(:last-child) {
    margin-bottom: 4rem;
}

.page-template-page-signup .entry-post {
    background-color: #94d7f7;
    padding: 6rem 20%;
    background-size: cover;
    position: relative;
}

.page-template-page-signup .entry-post:before {
    content: "";
    display: block;
    position: absolute;
    background: url("../images/signup-form-background-desktop.png?ver=1") top right no-repeat;
    background-size: cover;
    width: 28rem;
    height: 13rem;
    left: -9rem;
    top: 0;
}

.page-template-page-signup .entry-post:after {
    content: "";
    display: block;
    position: absolute;
    background: url("../images/signup-form-background-desktop.png?ver=1") bottom right no-repeat;
    background-size: cover;
    width: 31rem;
    height: 9rem;
    left: 30%;
    bottom: 0;
}

.page-template-page-signup .entry-title {
    font-family: 'Tajawal-Bold', "OpenSansHebrewCondensed-bold", Arial, sans-serif !important;
    margin-top: 0;
}

.page-template-page-signup .pojo-form,
.page-template-page-signup .wpcf7-form {
    position: relative;
    padding: 0;
}

.page-template-page-signup .pojo-form:before,
.page-template-page-signup .wpcf7-form:before {
    content: "";
    display: block;
    width: 27rem; /* I don't know why */
    height: 13rem;
    background: url("../images/signup-form-background-desktop.png?ver=1") right -15rem no-repeat;
    background-size: cover;
    position: absolute;
    right: -23rem;
    top: 20%;
}

.page-template-page-signup .pojo-form:after,
.page-template-page-signup .wpcf7-form:after {
    content: "";
    display: block;
    width: 27rem; /* I don't know why */
    height: 21rem;
    background: url("../images/signup-form-background-desktop.png?ver=1") right -35rem no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 20%;
}

.page-template-page-signup .wpcf7-form .field-group > p {
    font-weight: bold;
    margin-bottom: 10px;
}

.page-template-page-signup .wpcf7-form .field-group > p input[type="text"],
.page-template-page-signup .wpcf7-form .field-group > p input[type="email"],
.page-template-page-signup .wpcf7-form .field-group > p input[type="tel"] {
    font-weight: normal;
    direction: rtl; /* override the cf7 style that aligns email and phone fields to the left */
}


.page-template-page-signup .wpcf7-form .field-group > p select {
    background-color: #fff;
    display: block;
    width: 100%;
    padding: 10px 12px;
}

.page-template-page-signup .wpcf7-form .field-group > p select option{
   font-family: 'Tajawal-Regular', 'OpenSansHebrewCondensed-Regular', Arial, sans-serif;
}

.page-template-page-signup .pojo-form [class*="field-group form_field_"],
.page-template-page-signup .wpcf7-form [class*="field-group form_field_"] {
    float: none;
    padding: 0;
}

.page-template-page-signup .pojo-form .form-message.form-message-success,
.page-template-page-signup .wpcf7-form .form-message.form-message-success {
    color: #45633A !important;
}

.page-template-page-signup .wpcf7-form input[type="submit"] {
    border-color: #000000;
    padding: 9px 27px;
	line-height: initial;
}

.page-template-page-signup .wpcf7-form input[type="submit"],
.page-template-page-signup .wpcf7-form input[type="submit"]:hover {
    background-color: rgba(49,49,49,1);
	color: #ffffff;
}

.page-template-page-signup .phone-number-wrapper {
    background-color: #512859;
    color: #fff;
    text-align: center;
    padding: 4.5rem 0;
    font-size: 4rem;
    position: relative;
}

.page-template-page-signup .phone-number-wrapper:before {
    content: '\f095';
    display: block;
    font-family: FontAwesome, "Open Sans", Arial, sans-serif;
    border: 6px solid #fff;
    border-radius: 50%;
    width: 9rem;
    height: 9rem;
    margin: 0 auto;
    /* vertical align middle */
    line-height: 8rem;
}

.page-template-page-signup a.phone-number {
    color: #fff !important;
    font-size: inherit;
}

.page-template-page-signup .phone-number-answer {
    font-weight: bold;
}

.page-template-page-signup .wpcf7-form .wpcf7-response-output {
    margin-top: 18px;
}

.page-template-page-signup .wpcf7 form.invalid .wpcf7-response-output,
.page-template-page-signup .wpcf7 form.unaccepted .wpcf7-response-output,
.page-template-page-signup .wpcf7 form.payment-required .wpcf7-response-output,
.page-template-page-signup .wpcf7 form.failed .wpcf7-response-output,
.page-template-page-signup .wpcf7 form.aborted .wpcf7-response-output,
.page-template-page-signup .wpcf7 form.sent .wpcf7-response-output {
    border: none;
    color: red;
    padding-right: 0;
    margin-right: 0;
}

.page-template-page-signup .wpcf7 form.invalid .wpcf7-response-output::before,
.page-template-page-signup .wpcf7 form.unaccepted .wpcf7-response-output::before,
.page-template-page-signup .wpcf7 form.payment-required .wpcf7-response-output::before,
.page-template-page-signup .wpcf7 form.failed .wpcf7-response-output::before,
.page-template-page-signup .wpcf7 form.aborted .wpcf7-response-output::before,
.page-template-page-signup .wpcf7 form.sent .wpcf7-response-output::before {
    content: "\f00d";
    display: inline-block;
    font-family: fontawesome;
    font-weight: 400;
    font-style: normal;
    vertical-align: middle;
    margin-left: 5px;
}

.page-template-page-signup .wpcf7 form.sent .wpcf7-response-output {
    color: #45633A;
}

.page-template-page-signup .wpcf7 form.sent .wpcf7-response-output::before {
    content: "\f00c";
}

.page-template-page-signup .majors-list {
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
}

.page-template-page-signup .major-item {
    text-align: center;
    padding: 1rem;
    position: relative;
    border: 7px solid #edeeea;
    border-radius: 1rem;
}

.page-template-page-signup .major-item:before {
    content: "";
    display: block;
    background-color: #94d7f7;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    z-index: -1;
}

.page-template-page-signup .major-name {
    background-color: #fff;
    padding: 2rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-weight: bold;
    font-size: 2.5rem;
}

.page-template-page-signup .school_details {
    background-color: #dbedf6;
    padding: 4rem 10rem 4rem;
    font-size: 2.5rem;
}

.page-template-page-signup .school_details ul {
    list-style-image: url(../images/purple-arrow.png);
    text-align: justify;
}

.page-template-page-signup .school_details li {
    margin-bottom: 2rem;
    line-height: 1.3;
}

.page-template-page-signup .slogan {
    font-size: 4.8rem;
    font-weight: bold;
    text-align: center;
    font-family: 'Tajawal-Bold', "OpenSansHebrewCondensed-bold", Arial, sans-serif !important;
    color: #154a76;
}

/* special style for mmoshe contact form */
.wpcf7-form[action*="mmoshe"] div.field-container{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}


@media (max-width: 767px) {
    .page-template-page-signup .entry-post {
        background-image: none;
        padding: 4rem 5% 21rem;
        position: relative;
    }

    /* the white arrow in the top left corner */
    .page-template-page-signup .entry-post:before {
        content: "";
        display: block;
        background: url("../images/signup-form-background-mobile.png?ver=1.0") 0 top no-repeat;
        position: absolute;
        width: 7rem;
        height: 5rem;
        left: 2%;
        top: 0;
    }

    /* the envelope and yellow arrow on the bottom */
    .page-template-page-signup .entry-post:after {
        content: "";
        display: block;
        background: url("../images/signup-form-background-mobile.png?ver=1.0") 50% bottom no-repeat;
        width: 22rem;
        height: 21rem;
        position: absolute;
        bottom: 0;
        right: 50%;
        margin-right: -11rem; /* half the width */
    }

    .page-template-page-signup .entry-title {
        font-size: 2.8rem;
        letter-spacing: initial;
    }

    .page-template-page-signup .pojo-form:before,
    .page-template-page-signup .pojo-form:after,
    .page-template-page-signup .wpcf7-form:before,
    .page-template-page-signup .wpcf7-form:after {
        content: none;
    }

    .page-template-page-signup .entry-post .label-field {
        font-size: 2.4rem;
    }

    .page-template-page-signup .pojo-form .form-actions {
        position: relative;
    }

    .page-template-page-signup .pojo-form .form-actions:before {
        content: "";
        display: block;
        width: 13rem;
        height: 8rem;
        position: absolute;
        background: url("../images/signup-form-background-mobile.png?ver=1.0") left -8.5rem no-repeat;
        left: 0;
        margin-left: -5%;
    }

    .page-template-page-signup .phone-number-answer {
        display: block;
    }

    .page-template-page-signup .majors-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .page-template-page-signup .school_details {
        padding: 4rem 5rem 4rem;
    }

}

@media (min-width: 768px) and (max-width: 1024px) {
    .page-template-page-signup .entry-post {
        padding: 4rem 15%;
    }

    .page-template-page-signup .majors-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 420px) {
    .page-template-page-signup .majors-list {
        grid-template-columns: initial;
    }

    /* Show onךy first 5 majors */
    .page-template-page-signup .major-item {
        display: none;
    }

    .page-template-page-signup li.major-item:nth-child(1),
    .page-template-page-signup li.major-item:nth-child(2),
    .page-template-page-signup li.major-item:nth-child(3),
    .page-template-page-signup li.major-item:nth-child(4),
    .page-template-page-signup li.major-item:nth-child(5) {
        display: initial;
    }
}

/** Signup Page (Landing page) - End **/

/** Bogroim Campaign 2023 **/
/* Tsofiya: Added #header and !important to override pojo accessibility tools style */
div.logo-text{
	flex-basis: auto;
}
.graduate-campaign{
	display:flex; 
	
}

.graduate-campaign a.bogrim-text{
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	direction: rtl !important;
	text-indent: -9999px;
}

@media screen and (max-width: 768px){
	.graduate-campaign{
		flex-grow:1; 
		justify-content: center;
		margin: 20px 0;
	}	
	
	#header .graduate-campaign a.bogrim-text{
		background-image: url("../images/banerimatarim.jpg") !important;
		height: 50px;
		max-width: calc(100vw - 30px);
		width: 320px;
	}
}

/* <img src="<?php echo get_stylesheet_directory_uri(); ?>" /> */
@media screen and (min-width: 769px) and (max-width:1120px){
	.graduate-campaign{
		margin: 30px 0 20px;
	}	
	
	#header .graduate-campaign a.bogrim-text{
		background-image: url("../images/banerimatarimtablet.jpg") !important;
		width: 100vw;
		height: 90px;
	}
}

@media screen and (min-width: 1121px){
	.graduate-campaign{
		align-self: center; 
		flex-grow:1; 
		justify-content:end;
	}	
	
	#header .graduate-campaign a.bogrim-text{
		background-image: url("../images/banerimatarim.jpg") !important;
		width: 320px;
		height: 50px;
	}
}
/** Bogroim Campaign - End **/