.review .content p:first-of-type,
.intro p,
p.intro {
    font-size: 20px;
    line-height: 28px;
    font-weight: 300;
}
.product_image {
    width: 290px;
    margin: 0 auto 0;
    display: table;
}

.svg.triangle-on-page {
    position: absolute;
    z-index: 1;
    width: 1800px;
    fill: rgba(0,175,178,0.1);
    top: -700px;
    left:-30%;
}
.svg.triangle-in-footer {
    position: absolute;
    z-index: 1;
    fill: #D6336C;
    top: -20px;
    left: 80%;
    z-index: 100;
    width: 200px;
    transform: rotate(100deg);
    transform-origin: center center;
}
/* ZOEK EEN WEBSITE */

#check_domain_result .servicetype {
    background: #FFF;
    overflow: hidden;
    padding: 15px 20px;
    border-left: 1px solid #DDD;
    border-right: 1px solid  #DDD;
    border-bottom: 1px solid #DDD;
}

#check_domain_result .servicetype:first-of-type {
}
#check_domain_result .servicetype:last-of-type {
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

#check_domain_result .servicetype h4{
    margin: 0;
    font-size: 18px;
    line-height: 26px;
}
#check_domain_result .servicetype p{
    font-size: 14px;
    line-height: 22px;
    margin: 0;
}
.search-dir {
    position: relative;
    margin: 40px 0 10px;
}
.search-dir input[type="url"],
.search-dir input[type="text"]{
    width: 100%;
    line-height: 64px;
    border-radius: 16px;
    border: 1px solid #DDD;
    font-size: 21px;
    padding: 0 20px;
}
.search-dir.active input[type="url"],
.search-dir.active input[type="text"] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.search-dir .reset {
    position: absolute;
    width: 60px;
    height: 60px;
    right: 100px;
    top: 2px;
    padding: 15px;
}
.search-dir .btn {
    position: absolute;
    right: 8px;
    top: 8px;
    margin: 0;
    line-height: 50px;
    font-size: 18px;
    padding: 0 20px;
    border-radius: 32px;
}
.g-recaptcha {
    margin: 20px auto;
    display: table;
}
.icon-switch {
    width: 100px;
    height: 100px;
    background: url("images/switch_sprite.png") no-repeat left top;
    background-size: 500px;
}
.icon-switch.pos-1{
    background-position: left top;
}
.icon-switch.pos-2{
    background-position: -100px top;
}
.icon-switch.pos-3{
    background-position: -200px top;
}
.icon-switch.pos-4{
    background-position: -300px top;
}
.icon-switch.pos-5{
    background-position: -400px top;
}

/* SVG's */

.svg.bg-header-home {
    position: absolute;
    z-index: -1;
    width: 1800px;
    fill: #6741D9;
    left: 50%;
    margin-left: -900px;
    top: -650px;
}
.svg.bg-header-voordelen {
    position: absolute;
    z-index: -1;
    width: 1800px;
    fill:#D6336C;
    left: 50%;
    margin-left: -750px;
    top: -700px;
    transform: rotate(-40deg);
}
.svg.bg-header-standen {
    position: absolute;
    z-index: -1;
    width: 1800px;
    fill:#00AFB2;
    left: 50%;
    margin-left: -930px;
    top: -700px;
}
.svg.triangle-1 {
    position: absolute;
    z-index: 1;
    width: 200px;
    fill:#D6336C;
    right: 50%;
    top:250px;
    margin-right: -600px;
}
.svg.triangle-2 {
    position: absolute;
    z-index: 1;
    width: 400px;
    fill:#FA5252;
    left: 50%;
    top:250px;
    margin-right: -600px;
}
.svg.bg-slider {
    position: absolute;
    z-index: -1100;
    width: 100%;
    fill:#FA5252;
    left: -10px;
    top:30px;
}
.svg.square-1 {
    position: absolute;
    z-index: 1;
    width: 200px;
    fill:#D6336C;
    right: 50%;
    top:250px;
    margin-right: -600px;
}
.svg.square-2 {
    position: absolute;
    z-index: 1;
    width: 150px;
    fill:#6741D9;
    left: 50%;
    top:550px;
    margin-left: 600px;
}

.svg.triangle-pos-1 {
    position: absolute;
    z-index: -1;
    width: 600px;
    fill:#6741D9;
    left: 80px;
    top:-80px;
    transform: rotate(-25deg);
}
.svg.triangle-pos-2 {
    position: absolute;
    z-index: -1;
    width: 500px;
    fill:#FA5252;
    right: 100px;
    top:-50px;
    transform: rotate(20deg);
}
.svg.triangle-pos-4 {
    position: absolute;
    z-index: -1;
    width: 500px;
    fill:#6741D9;
    right: 80px;
    top:-40px;
}

.svg.square-pos-3 {
    position: absolute;
    z-index: -1;
    width: 450px;
    fill:#00AFB2;
    left: 150px;
    top:-70px;
}
.svg.square-pos-5 {
    position: absolute;
    z-index: -1;
    fill:#00AFB2;
    width: 500px;
    left: -200px;
    top:-70px;
    transform: rotate(-10deg);
}
.svg.triangle-on-page-1 {
    position: absolute;
    z-index: 1;
    width: 1800px;
    fill: rgba(0,175,178,0.1);
    top: -700px;
    right:-20%;
}
.svg.triangle-top {
    position: absolute;
    z-index: -1200;
    width: 100vw;
    fill: rgba(0,175,178,0.1);
    top:-15vh;
    left: -5vw;
}
.school.main-home .svg.triangle-top {
    top:-10vh;
    left: -5vw;
    width: 90vw;
    transform: rotate(-15deg);
}
.svg.triangle-below-page-1 {
    position: absolute;
    z-index: -1000;
    width: 1400px;
    fill: rgba(0,175,178,0.1);
    bottom: -500px;
    left:-13%;

}
.svg.triangle-on-page-2 {
    position: absolute;
    z-index: 1;
    width: 270px;
    fill:#FA5252;
    top: 800px;
    left: 50%;
    margin-left: 300px;
}
.svg.line-1 {
    position: absolute;
    z-index: -1;
    width: 800px;
    left: 50%;
    top: 205px;
}
.svg.line-5 {
    position: absolute;
    z-index: -1;
    width: 1200px;
    right: 50%;
    bottom: -55px;
}
.svg.line-2 {
    position: absolute;
    z-index: -1;
    width: 1200px;
    right: 50%;
    margin-right: 400px;
    top: -150px;
}
.svg.line-2 * {
    stroke: #FFF!important;
}
.svg.line-2 .line2 {
    fill: #FFF!important;
}
.svg.line-3 {
    position: absolute;
    z-index: -1;
    width: 1200px;
    left: 50%;
    margin-left: -200px;
    top: -70px;
}

.svg.line-contact{
    position: absolute ;
    z-index: -1;
    width: 50vw;
    top: 140px;
    left: 50%;
    margin-left: -25vw;
    transform: rotate(180deg);
}
.svg.line-footer{
    position: absolute ;
    z-index: -1;
    width: 800px;
    top: -130px;
    left: 50%;
    margin-left: -400px;
    transform: rotate(180deg);
}
.svg.triangle-footer {
    position: absolute;
    z-index:1;
    width: 200px;
    fill:#D6336C;
    top: -40px;
    left: 0%;
}
.copy {
    position: relative;
    width: 500px;
    line-height: 50px;
    font-size: 18px;
    padding: 0 88px 0 8px;
    border-radius: 4px;
    border: 1px solid #DDD;
    margin: 25px 0 35px;
}
.copy input{
    border: 0;
    width:100%;
    font-family: Courier, sans-serif;
    font-size: 20px;
}
.copy button{
    border: 0;
    background: #CCC;

    border-radius: 3px;
    position: absolute;
    right: 6px;
    top:10px;
    font-size: 12px;
    text-transform: lowercase;
}
.copy .feedback{
    position: absolute;
    color: #666;
    font-size: 11px;
    line-height: 24px;
    padding: 0 10px;
    bottom: -25px;
    left: 0px;
    border-radius: 3px;
}
.attention {
    float: left;
    margin: 0 10px 20px 0px;
}

.question {
    position: relative;
    margin-bottom: 20px;
}


.quote {
    padding: 0 20px!important;
    margin-bottom: 30px;
    margin-top: 100px;
    margin-top: 100px;
}
.quote p.inset{
    font-size: 25px;
    line-height: 36px;
    text-indent: -7px;
    text-align: center;
}
.quote .info-wrapper {
    padding: 20px 20px;
    position: relative;
    border-radius: 8px;
}
.quote .author {
    font-weight: 500;
}
.quote-slider .author {
    font-size: 15px;
    margin-top: 20px!important;
    text-align: center;
    display: block;
}
.quote-slider .avatar {
    float: left;
    clear: left;
    width: 65px;
    height: 65px;
    margin-bottom: 10px;
    border: 1px solid #FFF;
}

/* RESELLERS */

#accordion h6.ui-accordion-header::before{
    width: 12px;
    height: 2px;
    right: 20px;
    top: 24px;
    border-bottom: 2px solid #00AFB2;
    border-right: 2px solid #00AFB2;
    border-radius: 8px;
    position: absolute;
    content: "";
    display: block;
    transform: rotate(0deg);
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}
#accordion h6.ui-accordion-header::after{
    width: 12px;
    height: 2px;
    right: 20px;
    top: 24px;
    border-bottom: 2px solid #00AFB2;
    border-right: 2px solid #00AFB2;
    border-radius: 2px;
    position: absolute;
    content: "";
    display: block;
    transform: rotate(-90deg);
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}
#accordion h6.ui-accordion-header.ui-accordion-header-active::after{
    transform: rotate(0deg);
}
.resellers .row.intro p {
    font-size: 110%;
    line-height: 150%;
}.btn img {
     width: 40px;
     float: right;
     margin-left: 10px;
 }
h6.ui-accordion-header{
    width: 100%;
    font-size: 18px;
    margin:20px 0 0;
    padding:10px 50px 10px 20px;
    line-height: 28px;
    cursor: pointer;
    position: relative;
    font-weight: 500;
    background: #FFF;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    box-shadow: 0 5px 10px -5px rgba(0,0,0,0.25);
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}
.faq_sticky_list h6.ui-accordion-header.ui-accordion-header-active{
    background: rgba(0,175,178,0.075);
    box-shadow: none;
}

#accordion .ui-accordion-content {
    background: rgba(0,175,178,0.075);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    padding: 10px 20px;
}
#accordion .ui-accordion-content a {
    color: #00AFB2;
}
#accordion .ui-accordion-content a.btn {
    border-color: #00AFB2;
}
.cat_list li a{
    position: relative;
    cursor: pointer;
    text-decoration: none;
    line-height: 30px;
    font-size: 15px;
    padding: 5px 20px;
    background: #CCC;
    margin: 0 10px 10px 0;
    display: table;
    border-radius: 8px;
    float: left;
    color: #1c1c1c;
}
.cat_list li a:hover {
    opacity: 0.9;
}
.avatar {
    border-radius: 50%;
    max-width: 150px;
    margin: 0 auto 20px;
    display: table;

}
.name_plate.hor {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
    margin: 20px 0 0 20px;
}
.name_plate.hor .avatar {
    max-width: 50px;
    margin: 0 20px 0 0;
}
.name_plate.hor .docent.naam {
    width: auto;
    text-align: left;
}
.single-support .box-shadow,
.review .box-shadow {
    margin-top: 0;
}
.name_plate {
    overflow: hidden;
    text-align: center;
    font-size: 15px;
    line-height: 26px;
}
.name_plate .plate,
.name_plate .plate * {
    font-size: 15px;
}
.name_plate .docent {
    font-size: 15px;
    line-height: 26px;
}
.name_plate .docent.naam {
    width: 100%;
    display: block;
    font-weight: 400;
}
.review-grid p {
    margin-bottom: 0;
}
.resellers .col-6.new-quote {
    padding: 0 30px 0 0;
}
.resellers .col-6.new-quote .padding {
    padding: 15px 20px 20px;
}
.figcaption {
    margin-top: -40px;
    font-size: 13px;
    display: block;
}
.resellers h3 {
    margin: 60px 0 0;
    color: #1c1c1c;
}
.resellers .watismyndrvoorschool h2 {
    margin-top: 0px;
}
.resellers .verkoop h2 {
    margin-top: 10px;
}
.resellers ul.res-menu ul.submenu li,
.resellers ul.res-menu ul.submenu {
    width: 100%;
    padding: 0;
}
.resellers ul.res-menu ul.submenu li {
    line-height: 30px;
    font-size: 15px;
    cursor: pointer;
}

.resellers ul.res-menu div {
    font-weight: 500;
    width: 100%;
    float: left;
    display: block;
    font-size: 13px;
    border-bottom: 1px solid #DDD;
    line-height: 30px;
    margin-bottom: 10px;
}
.resellers ul.res-menu div#link-aanvullend {
    margin-top: 30px;
}
.resellers .additional {
    margin: 20px 0 0;
    font-size: 14px;
    font-weight: 500;
}

.reason::before {
    content:"";
    height: 48px;
    width: 48px;
    border-radius: 50%;
    background: #D6336C;
    text-align: center;
    color: #FFF;
    line-height: 48px;
    font-weight: 500;
    font-size: 20px;
    display: table;
    margin: 20px auto 10px;
}
.reason.one::before {
    content:"1";
}

.home.school .first::after,
.reason.four::after,
.reason.one::after {
    width: 250px;
    height: 600px;
    display: block;
    position: absolute;
    left: -280px;
    top:0;
    content:"";
    background: url("images/leraar.png");
    background-size: cover;
}
.home.school .first::after {
    left: 50%;
    margin-left: 190px;
    background: url("images/lerares.png");
    background-size: cover;
    top: -100px;
}
.reason.four::after {
    left: auto;
    right: -280px;
    background: url("images/lerares.png");
    background-size: cover;
}
.reason.two::before {
    content:"2";
}
.reason.three::before {
    content:"3";
}
.reason.four::before {
    content:"4";
}
.reason.five::before {
    content:"5";
}
.reason.six::before {
    content:"6";
}
.reason.seven::before {
    content:"7";
}
.lang-switch {
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,0);
    border-radius: 16px;
    height: 32px;
    overflow: hidden;
    margin-top: 18px;
    margin-left: 14px;
    position: absolute;
    right: 23px;
    padding: 8px 10px 8px 10px;
    top:-5px;
    z-index: 1010;
    box-shadow: 0 3px 6px 0 rgba(0,0,0,0.15);
}
.lang-switch:hover {
    height: auto;
    background: rgba(255,255,255,1);
}

.lang-switch .en,
.lang-switch .nl,
.lang-switch .de {
    background: url("images/de.gif");
    background-size: contain;
    width: 26px;
    text-indent: -9999px;
    height: 16px;
    display: block;
    position: relative;
    border-radius: 3px;
    margin-bottom: 10px;
    order:2;
}
.lang-switch div:last-child {
    margin-bottom: 0;
}
.lang-switch .en {
    background: url("images/en.png");
    background-size: cover;
    order: 3;
    display: none;
}
.parent-pageid-3990 .lang-switch .en,
.page-id-3990 .lang-switch .en{
    display: block;
}
.parent-pageid-4210 .lang-switch .en,
.parent-pageid-3990 .lang-switch .de,
.page-id-4210 .lang-switch .en,
.page-id-3990 .lang-switch .de{
    display: none;
}
.lang-switch .nl {
    background: url("images/nl.gif");
    background-size: contain;
    order: 1;
}
.current-lang-en .lang-switch .en,
.current-lang-de .lang-switch .de {
    order: 0;
    margin-bottom: 10px ;
}
.lang-switch a {
    display: flex;
    align-items: center;
    flex-direction: column;
    font-size: 12px;
    line-height: 32px;
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none;
    padding: 1px 14px 0!important;
}
.top-menu .svg-logo {
    width: 45px;
    fill: #FFF;
    margin-right: 20px;
    margin-left: 2px;
}
.top-menu .svg-logo * {
    fill: #FFF;
}
/* TOGGLE CATEGORIES */

.categories h5{
    line-height: 30px;
    margin-top: 30px;
}
.categories .content .container ul{
    list-style-type: disc;
}

.categories .content .container ul li{
    padding-left: 1px;
}

/* CSS FOR TOGGLE BUTTON */

.toggle-menu {
    display: none;
    width: 70px;
    height: 70px;
    cursor: pointer;
    padding: 0!important;
    right: 10px;
    top: 0;
    margin: 0!important;
    position: fixed;
    z-index: 1020;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.toggle-menu .bar{
    width: 25px;
    height: 2px;
    position: absolute;
    background: #1c1c1c;
    border-radius: 4px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;

}
.toggle-menu .bar.top-bar{
    top: 27px;
    left: 27px;
}
.toggle-menu .bar.middle-bar{
    top: 50%;
    margin-top: -1px /*height of bar / 2*/ ;
    left: 27px;
    width: 14px;
}
.toggle-menu .bar.bottom-bar{
    bottom: 27px;
    left: 27px;
}

.menu-active .toggle-menu .bar.top-bar{
    -ms-transform: rotate(45deg); /* IE 9 */
    -ms-transform-origin: 0 0; /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    -webkit-transform-origin: 0 0; /* Chrome, Safari, Opera */
    transform: rotate(45deg);
    transform-origin: 0 0;
}
.menu-active .toggle-menu .bar.middle-bar{
    opacity: 0;
}
.menu-active .toggle-menu .bar.bottom-bar{
    -ms-transform: rotate(-45deg); /* IE 9 */
    -ms-transform-origin: 0 100%; /* IE 9 */
    -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
    -webkit-transform-origin: 0 100%; /* Chrome, Safari, Opera */
    transform: rotate(-45deg);
    transform-origin: 0 100%;
}
.menu-active .toggle-menu .bar.top-bar,
.menu-active .toggle-menu .bar.bottom-bar {
    width: 21px;
    left: 32px;
}
.home.school .breadcrumbs,
.home.school .breadcrumbs {
    display: none;
}
.nav-settings {
    margin: 0 0 40px 0;
    position: relative;
}
.nav-settings p {
    font-size: 14px;
    font-weight: 500;
    line-height: 43px;
    margin: 0 20px 0 0;
}
.nav-settings::before {
    position: absolute;
    width: 100%;
    bottom: 0;
    height: 1px;
    background-color: #DDD;
    content: "";
    z-index: -1;
}
.nav-settings .tab  {
    border: 1px solid #DDD;
    background: #FFF;
    text-decoration: none;
    line-height: 43px;
    padding: 0 15px;
    border-right: 0;
    color: #999;
    position: relative;
    font-size: 15px;
}
.nav-settings .tab:first-of-type {
    border-top-left-radius: 5px;
}
.nav-settings .tab:last-child  {
    border-right: 1px solid #DDD;
    border-top-right-radius: 5px;
}
.nav-settings .tab.active  {
    border-bottom: 1px solid #FFF;
    color: #1c1c1c;
    padding: 0 35px 0 15px;
}
.nav-settings .tab.active::before {
    width: 100%;
    border: 1px solid #DDD;
    border-bottom: none;
    background-color: #FFF;
    height: 5px;
    content: "";
    display: block;
    left: 0;
    top: -5px;
    position: absolute;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.nav-settings .tab.active::after  {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    position: absolute;
    border-bottom: 1px solid #1c1c1c;
    border-left: 1px solid #1c1c1c;
    transform: rotate(-45deg);
    top: 50%;
    right: 15px;
    margin-top: -6px;
}
.nav-settings .tab:hover{
    color: #1c1c1c;
}

@media (min-width: 1024px)  {

/* BG VOOR SCHOOL MENU */

.page-id-1953 .row.menu-wrapper,
.parent-pageid-1953 .row.menu-wrapper {
    background: #1c1c1c ;
}
.row.menu-wrapper {
    margin:0;
    top:0;
    z-index: 1000;
    background: #1c1c1c;
    position: absolute;
}
    .scrolls .row.menu-wrapper {
        position: fixed;
        top: -60px;
    }
    .menu-wrapper::after {
        display: block;
        content: "";
        width: 100%;
        background: #FFF;
        z-index: 999;
        box-shadow: 0 0 4px 0 rgba(0,0,0,0.15);
        top: 60px;
        left: 0;
        position: absolute;
        height: 70px;
    }
    .top-menu {
        width: 100%;
        height: 60px;
        padding: 0 80px 0 20px;
        z-index: 1000;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        position: relative;
    }
    .top-menu > div {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
    .top-menu a,
    .top-menu span {
        color: #FFF;
        font-size: 15px;
        text-decoration: none;
        padding: 10px 20px;
        font-weight: 300;
        text-transform: lowercase;
    }
    .top-menu ul {
        display:flex;
        flex-direction: row;
        justify-content: center;
        position: relative;
    }
    .top-menu span,
    .top-menu ul li a{
        color: #FFF;
        text-decoration: none;
        padding: 10px 20px;
        position: relative;
        opacity: 0.6;
        font-size: 15px;
        cursor: pointer;
    }
    .school-active .top-menu ul.menu > li:first-child > a,
    .error404 .top-menu ul.menu > li:first-child > a,
    .top-menu ul.menu > li:hover > a,
    .top-menu span:hover,
    .top-menu ul.menu > li > ul.sub-menu > li.current_page_item > a,
    .top-menu .current-lang-de  ul li.current_page_item > a,
    .top-menu ul.menu li.current_page_item > a,
    .top-menu ul.menu > li.current-menu-item > a,
    .top-menu ul.menu li.current-page-ancestor > a {
        opacity: 1;
    }
    .school-active .top-menu ul.menu > li:first-child > a::after,
    .error404 .top-menu ul.menu > li:first-child > a::after,
    .top-menu .current-lang-de .menu > ul > li > a::after,
    .top-menu ul.menu > li > a::after{
        width: 15px;
        height: 15px;
        transform: rotate(45deg);
        background: #FFF;
        display: block;
        content: "";
        position: absolute;
        left: 50%;
        bottom: -40px;
        border-radius: 3px;
        margin-left: -8px;
        z-index: 0;
        -webkit-transition: all .15s ease-in-out;
        -moz-transition: all .15s ease-in-out;
        -ms-transition: all .15s ease-in-out;
        -o-transition: all .15s ease-in-out;
        transition: all .15s ease-in-out;

    }
    .top-menu ul.menu > li:hover > a::after{
        bottom: -24px;
    }
    .school-active .top-menu ul.menu > li:first-child > a::after,
    .error404 .top-menu ul.menu > li:first-child > a::after,
    .top-menu ul.menu > li.current-menu-item > a::after,
    .top-menu ul.menu > li.current-page-ancestor > a::after{
        bottom: -23px;
    }
    .school-active .top-menu ul.menu > li:first-child > ul.sub-menu,
    .error404 .top-menu ul.menu > li:first-child > ul.sub-menu,
    .top-menu ul.menu > li > ul.sub-menu {
        position: absolute;
        top: 44px;
        width: 1150px;
        left: -84px;
        height: 70px;
        display: none;
        justify-content: flex-start;
        z-index: 1000;
    }
    /* HOME ICON
    .top-menu ul.menu > li > ul.sub-menu li.home {
        text-indent: -9999px;
        padding-left: 10px;
    }
    .top-menu ul.menu > li > ul.sub-menu li.home a{
        background-image: url("images/icon_home.svg");
        width: 30px;
        heigth: 20px;
        background-size: 17px;
        background-repeat: no-repeat;
        opacity: 0.75;
        display: block;
        background-position: center 24px;
    }
    */

    .school-active  .top-menu ul.menu > li:first-child > ul.sub-menu,
    .error404 .top-menu ul.menu > li:first-child > ul.sub-menu,
    .top-menu ul.menu > li.current-menu-item > ul.sub-menu,
    .top-menu ul.menu > li.current-page-ancestor > ul.sub-menu {
        display: flex;
    }

    .top-menu ul.menu > li > ul.sub-menu > li > a {
        color: #1c1c1c;
        line-height: 70px ;
        padding: 0 18px;
        position: relative;
        opacity:0.7;
        font-size: 17px;
    }
    .top-menu ul.menu > li > ul.sub-menu > li:hover > a {
        opacity:1;
    }
    .top-menu ul.menu ul.sub-menu li > ul.sub-menu {
        left: -9999px;
        width: 220px;
        top: 68px;
        border-radius: 6px;
        padding: 0;
        position: absolute;
        background: #FFF;
        overflow: hidden;
        z-index: 100;
        box-shadow: 0 3px 6px 0 rgba(0,0,0,0.15);
        -webkit-transition: top 0.15s ease-in-out;
        -moz-transition: top 0.15s ease-in-out;
        -ms-transition: top 0.15s ease-in-out;
        -o-transition: top 0.15s ease-in-out;
        transition: top 0.15s ease-in-out;
    }
    .top-menu ul.menu > li > ul.sub-menu > li.menu-item-has-children:hover > ul.sub-menu {
        left: 0px;
        top: 60px;
    }
    .top-menu ul.menu > li > ul.sub-menu > li.menu-item-has-children {
        position: relative;
    }
    .top-menu ul.menu > li > ul.sub-menu > li.menu-item-has-children > a {
        padding-right: 40px;
        -webkit-transition: all 0.15s ease-in-out;
        -moz-transition: all 0.15s ease-in-out;
        -ms-transition: all 0.15s ease-in-out;
        -o-transition: all 0.15s ease-in-out;
        transition: all 0.15s ease-in-out;
    }
    .top-menu ul.menu > li > ul.sub-menu > li.menu-item-has-children > a::after {
        content: "";
        display: block;
        width: 8px;
        height: 8px;
        position: absolute;
        border-bottom:1px solid #1c1c1c;
        border-left:1px solid #1c1c1c;
        transform: rotate(-45deg);
        top: 50%;
        right: 15px;
        margin-top: -6px;
    }
    .top-menu ul.menu > li > ul.sub-menu > li > ul.sub-menu {
        flex-direction: column;
    }
    .top-menu ul.menu > li > ul.sub-menu > li > ul.sub-menu li {
        width: 100%;
        float: left;
    }
    .top-menu ul.menu > li > ul.sub-menu > li > ul.sub-menu li a{
        line-height: 45px;
        padding: 0 20px;
        color: #1c1c1c;
        width: 100%;
        display: table;
        opacity:1;
        font-size: 16px;
    }
    .top-menu ul.menu > li > ul.sub-menu > li > ul.sub-menu li a:hover{
        background: #f5f5f5;
    }
    .top-menu ul.menu > li > ul.sub-menu > li.cta {
        position: absolute;
        right: 20px;
    }
    .top-menu ul.menu > li > ul.sub-menu > li.cta a{
        background: #00AFB2;
        border-radius: 20px;
        line-height: 40px!important;
        margin-top: 15px;
        color: #FFF;
        opacity: 1;
        display: table;
        padding: 0 25px;
    }
    .parent-pageid-4084 .top-menu ul.menu > li > ul.sub-menu > li.cta a,
    .parent-pageid-4154 .top-menu ul.menu > li > ul.sub-menu > li.cta a,
    .page-id-1953 .top-menu ul.menu > li > ul.sub-menu > li.cta a,
    .parent-pageid-1953 .top-menu ul.menu > li > ul.sub-menu > li.cta a {
        background: #D6336C;
    }
    .menu-wrapper .cta-menu {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    .top-menu .mobile-nav {
        display: none;
    }
}
@media (max-width: 1023px)  {
    h1.large{
        font-size: 8vw;
        line-height: 100%;
    }
    h1.medium{
        font-size: 10vw;
        line-height: 100%;
    }
    .lang-switch {
        right: 75px;
        margin-top: 20px;
        z-index: 900;
    }
    .toggle-menu {
        display: block;
    }
    .row.menu-wrapper {
        width: 100%;
        max-width: 100%;
        top: 0;
        left: 0;
        height: 70px;
        position: fixed;
        margin: 0;
        z-index: 1020;
        background: #FFF;
        border-bottom: 1px solid #DDD;
    }

    .top-menu .svg-logo {
        width: 50px;
        margin: 8px 0 0 0 ;
    }
    .top-menu .svg-logo * {
        top :10px;
        fill: #1c1c1c;
    }
    .top-menu {
        position: absolute;
        width: 100%;
        height: 70px;
        top: 0;
        padding: 0 80px 0 20px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }

    .mobile-mask {
        position: fixed;
        left: -300px;
        top: 0;
        height: 100%;
        overflow: hidden;
        width: 300px;
        z-index: 1000 ;
        background: #1c1c1c;
        -webkit-transition: left 0.25s ease-in-out;
        -moz-transition: left 0.25s ease-in-out;
        -ms-transition: left 0.25s ease-in-out;
        -o-transition: left 0.25s ease-in-out;
        transition: left 0.25s ease-in-out;
    }
    .menu-active .mobile-mask {
        left: 0;
    }
    .top-menu ul.menu {
        position: absolute;
        top: 0px;
        display:flex;
        flex-direction: column;
        left: 0;
        width: 100%;
        max-width: 300px;
        height: 100%;
        -webkit-transition: left 0.25s ease-in-out;
        -moz-transition: left 0.25s ease-in-out;
        -ms-transition: left 0.25s ease-in-out;
        -o-transition: left 0.25s ease-in-out;
        transition: left 0.25s ease-in-out;
    }
        .top-menu .first-level-active ul.menu {
            left: -300px;
        }
        .top-menu .mobile-nav {
            position: absolute;
            top: 0;
            display: block;
            z-index: 1050;
            left: 300px;
            -webkit-transition: left 0.25s ease-in-out;
            -moz-transition: left 0.25s ease-in-out;
            -ms-transition: left 0.25s ease-in-out;
            -o-transition: left 0.25s ease-in-out;
            transition: left 0.25s ease-in-out;
         }
            .top-menu .first-level-active .mobile-nav {
               left: 0;
            }
            .top-menu .back-to-level_0{
                color: #FFF;
                cursor: pointer;
                margin: 20px 20px;
            }
    .top-menu ul {
        display:flex;
        flex-direction: column;
    }
        .top-menu ul.menu > li > ul {
            display: none;
        }
        .top-menu ul.menu > li.current-menu-item > ul.sub-menu,
        .top-menu ul.menu > li.current-page-ancestor > ul {
            display: flex;
        }
    .top-menu a{
        width: 100%;
        line-height: 45px;
        padding: 0 20px;
    }
    .top-menu *{
        color: #FFF;
        text-decoration: none;
    }
        .top-menu ul.menu li a {
            position: relative;
            width: 100%;
            display: table;
        }
        .top-menu ul.menu > li > a,
        .top-menu ul.menu > li.current-menu-item > a,
        .top-menu ul.menu > li.current-page-ancestor > a {
            font-weight: 500;
            line-height: 70px;
            margin-top: 20px;
            border-top: 1px solid #666;
            position: relative;
        }
        .top-menu ul.menu > li.current-menu-item > a,
        .top-menu ul.menu > li.current-page-ancestor > a {
            margin: 0;
            border: 0;
        }
        .top-menu ul.menu > li:not(.current-menu-parent) {
            order: 10;
        }

        .top-menu ul.menu > li > a::after,
        .top-menu ul.menu > li.current-page-ancestor > a::after {
            width: 10px;
            height: 10px;
            right: 20px;
            top: 25px;
            border-bottom: 2px solid #fff;
            border-right: 2px solid #fff;
            position: absolute;
            content: "";
            display: block;
            transform: rotate(-45deg);
        }
        .top-menu ul.menu > li > a::after {
            top: 30px;
        }

    .top-menu ul.menu > li.current-menu-ancestor > a::after,
    .top-menu ul.menu > li.current-page-ancestor > a::after {
            transform: rotate(45deg);
        }
            .top-menu ul.menu ul.sub-menu > li > ul.sub-menu {
                position: absolute;
                left: 300px;
                top: 0px;
                width: 100%;
                max-width: 300px;
                height: 100%;
                padding-top: 70px;
                display: none;
            }

            .top-menu ul.menu ul.sub-menu > li.sub-active > ul.sub-menu {
                display: table;
            }
        .menu > li > ul.sub-menu > li.menu-item-has-children > a::after {
            width: 10px;
            height: 10px;
            right: 20px;
            top: 19px;
            border-bottom: 1px solid #fff;
            border-right: 1px solid #fff;
            position: absolute;
            content: "";
            display: block;
            transform: rotate(-45deg);
        }
    .menu ul.sub-menu  li.cta a {
        width: calc(100% -  40px);
        border-radius: 30px;
        margin: 20px 0 20px 20px;
        background: #00AFB2;
        color: #FFF;
        text-align: center;
    }
    .page-id-1953 .menu ul.sub-menu  li.cta a,
    .parent-pageid-1953 .menu ul.sub-menu  li.cta a {
        background: #D6336C;
    }
    .not-for-mobile {
        display: none!important;
    }
    .lang-switch {
        box-shadow: none;
    }
    .lang-switch:hover {
        box-shadow: 0 3px 6px 0 rgba(0,0,0,0.15);
    }

    .home.school .first::after {
        display: none;
    }
}

@media (max-width: 768px) {
    .top-menu  {
        padding: 0 15px;
    }
    h1.large{
        font-size: 12vw;
        line-height: 100%;
    }
    h1.medium{
        font-size: 8vw;
        line-height: 100%;
    }
}

@media (max-width:1200px) and (min-width:1023px){
    .top-menu ul.menu > li > ul.sub-menu,
    .container {
        width: 1020px;
    }
    .top-menu ul.menu > li > ul.sub-menu > li > ul.sub-menu li a,
    .top-menu ul.menu > li > ul.sub-menu > li > a {
        padding: 0 12px;
    }

}