@import url('https://fonts.googleapis.com/css?family=Dosis&display=swap');

h1,h2,h3,h4,h5{margin: 0;}
.page-template-live .wpcf7{background:#f2f2f2;padding: 4vw !important;}
.banner-wrapper{max-width: 100%;position: relative;padding-top: 7vw;}
.banner-wrapper img{max-width: 100%;}
.banner-wrapper .top{position: absolute;right: 50%;bottom: 45%;transform: translate(50%,50%);width: 90vw;text-align: center;color: #fff;}
.logo{width:14.875vw;display: block;margin: 0 auto 2vw;}
h1{font-size: calc(4vw + 3px);font-weight: bold;text-align: center;line-height: 1;}
span.en{font-size: 80%;color: #f0047f;font-family: 'Dosis',sans-serif;}
h2{font-size: calc(3vw + 3px);margin:0;line-height: .8;}
.desk-icon{display: inline-block;}
.htext{font-size: calc(1.8vw + 3px);margin-top: 2vw;}
.htext ul{display: flex;justify-content: center;font-weight: bold;}
.htext ul li:after{content:'•';display: inline-block;color: #f0047f;vertical-align: middle;margin:0 0.5vw;font-size: 90%;}
.htext ul li:last-of-type:after{display: none;}
#how{text-align: center;padding:3vw 0;}
h3{font-size: calc(3.5vw + 3px);font-weight: bold;}
#how p{font-size: calc(1.8vw + 3px);font-weight: bold;margin: 1vw 0 2vw;line-height: 1.1;}
#how ul{display: inline-flex;justify-content: center;flex-direction: column;}
#how li{font-size: calc(1.4vw + 3px);text-align: right;font-weight: 400;}
#how li:before{content:'•';display: inline-block;color: #f0047f;vertical-align: middle;margin:0 0.5vw;font-size: 90%;}
#how li .en{color: #0a0f2d;}
#how .btext{margin-bottom: 0;}
#how .ptext{color: #fff;background: #0a0f2d;border-radius: 0.75vw;display: inline-block;padding:0.75vw 5vw;}
#courses{background:#f2f2f2;text-align: center;padding:3vw 0}
#courses h3{color: #000;}
#courses .courses-wrapper{width:80vw;margin:auto}
#courses .course-list{display: flex;margin:auto -15px}
#courses .course-list .topic{flex:0 0 23%;max-width: 23%;text-align: left;font-family: Dosis,sans-serif;padding:0 15px}
#courses .course-list .topic header{font-weight: 600;font-size: calc(1.7vw + 3px);background: #0a0f2d;color: #fff;border-radius: 0.5vw;padding: 0.5vw 0;}
#courses .course-list .topic header *{vertical-align: middle;}
#courses .course-list .topic header img{padding: 0 0.5vw;width: 3.25vw;}
.heb{font-family: 'spoiler', sans-serif;}
 #courses .course-list .topic li:nth-child(1){border-top: 0.05vw solid #b6b8c6;margin-top: 1vw;}
#courses .course-list .topic li{ padding: 1vw;font-family: Dosis;border-bottom: 0.05vw solid #b6b8c6;color: #000;font-size: calc(1.1vw + 3px);}

@media (max-width: 1000px) {
    body{font-size: 4.5vw;}
    #how li{font-size: 1em;}
    .banner-wrapper .top{width: 100%;}
    .desk-icon{display: none;}
    .smaller-mobile{font-size: 0.75em;}
    h3,h1{font-size: 2.17em;}
    .logo{width: 41vw;}
    .htext{font-size: 1em;}
    .htext ul li:after{margin: 0 1vw;}
    h2{font-size: 1.5em;}
    .htext ul{flex-wrap: wrap;width: 80%;margin: auto;}
    #courses .courses-wrapper{width:92vw;}
    .htext ul li{}
    #courses .course-list .topic li:nth-child(1){margin-top: 4vw;}
    #courses h3 {font-size: 2.17em;margin-bottom: 2vw;}
    #courses .course-list .topic header img{margin: auto;width: 7vw;}
    #courses .course-list .topic header{font-size: 1.3em;text-align: center;padding: 1vw;}
    #courses .course-list{flex-wrap: wrap;justify-content: center;flex-direction: row-reverse;}
    #courses .course-list .topic{flex:0 0 50%;max-width: 36%;margin: 2vw;margin-top: 3vw;}
    #courses .course-list .topic li{font-size: 0.8em;}
    #how li .en{font-size: 90%;}
    #how .ptext{margin-top: 3vw;}
    #how p{font-size: 1.1em;}
}