/*   
Theme Name: Alfa
Theme URI: http://www.alfaskolen.no/
Description: Custom Wordpress theme for Alfaskolen.no
Author: Fahd Idaghdour
Author URI: http://synergie-media.com
Version: 1.0
*/


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

/* ==========================================================================
   Reset 2020 ^^
   ========================================================================== */

*,*::before,*::after {box-sizing: border-box;}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd {margin: 0;}
ul, ol{list-style: none; padding: 0;}
html {scroll-behavior: smooth;}
body {min-height: 100vh;text-rendering: optimizeSpeed;line-height: 1.5;}
a:not([class]) {text-decoration-skip-ink: auto;}
img,picture {max-width: 100%;display: block;}
input,button,textarea,select {font: inherit;}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important;}}

p {font-weight: 400;}

img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto;}
a img.alignright {float:right; margin:0 0 1em 1em}
a img.alignleft {float:left; margin:0 1em 1em 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}

/* ==========================================================================
   General
   ========================================================================== */
body {font-family: 'Poppins', sans-serif; font-size: 16px; color: #37455f; line-height: 1.3;}
.row {width: 100%; max-width: 1200px; margin: 0 auto;}
.btn { border: 2px solid #fff; color: #fff; text-transform: uppercase; text-decoration: none; border-radius: 10px;letter-spacing: 1px; font-size: 14px; padding: 10px 20px; margin: 0 20px 20px 0; display: inline-block; }
.btn.primary { background: #fff; color: #846e81; font-weight: 500; }
a.link {text-decoration: underline; color: #846e81;}
section {width: 100%;}
.container { padding-top: 160px; }

.header {width: 100%;  padding: 20px; background: #846e81 ; }
.home .header {background: transparent; position: absolute; top: 0; left: 0; z-index: 2;}
.header a {color: #fff; text-decoration: none;}
.header .row {display: flex; align-items: center; }
.header .logo {display: block;}
.header .logo img {max-width: 130px;}
.home .header .logo img {max-width: 150px;}
.header nav {margin-left: 30px; flex-grow: 2;}
.header nav ul { list-style: none; flex-grow: 2; padding: 0; border-left: 1px solid rgba(255, 255, 255, 0.3); display: flex; align-items: center; }
.header nav ul li {display: inline-block; margin: 0 0 0 26px; font-size: 16px; overflow: hidden;}
.header nav ul li a {text-shadow: 1px 1px 4px rgba(0,0,0,0.3); position: relative; /*padding-bottom: 8px;*/ display: block;}
.header nav ul li a:after {content: ""; position: absolute; bottom: 0px; left: -100%; width: 100%; height: 2px; background: #fff; transition: all .4s cubic-bezier(0.46, 0, 0.07, 1);}
.header nav ul li a:hover:after, .header nav ul li.current-menu-item a:after, .header nav ul li.current-page-ancestor a:after, .header nav ul li.current-post-ancestor a:after {left: 0;transition: all .4s cubic-bezier(0.46, 0, 0.07, 1);}
.header nav ul li.highlighted {padding: 6px 13px;border-radius: 8px; border: 2px solid #fff;  background: #fff;color: #846e81;font-size: 16px;}
.header nav ul li.highlighted a {color: #846e81; text-shadow: none; padding-bottom: 0;}
.header nav ul li.highlighted a:after {display: none;}
.header nav ul li.highlighted:hover {background: none; } 
.header nav ul li.highlighted:hover a {color: #fff;} 
.header nav ul li a span {font-size: 12px; opacity: 0.7;}


.header .btn { text-shadow: 1px 1px 4px rgba(0,0,0,0.3);}
.header .headerlogin {padding: 5px 10px; margin: 0 !important; }
.header .headerlogin:hover {background: #fff; color: #846e81;}

.header .menu-lang {margin-right: 20px}
.header .menu-lang li {display: inline-block; font-size: 13px; padding-right: 5px; border-right: 1px solid rgba(255,255,255,0.2);}
.header .menu-lang li:last-of-type {border : none; padding-right: 0;}
.header .menu-lang li.current-lang a {font-weight: 500; text-decoration: underline;}
.header .menu-lang li a:hover {text-decoration: underline;}

.breadcrumb {width: 100%; margin-bottom: 15px; margin-top: 15px;}
.breadcrumb ul {margin-top: 0;}
.breadcrumb li {display: inline-flex; align-items: center; justify-content: center; font-size: 13px; padding-left: 7px;}
.breadcrumb li:first-child {padding-left: 0;}
.breadcrumb li a { text-decoration: none; color: #000; }
.breadcrumb li a:hover {text-decoration: underline;}
.breadcrumb li span { margin-left:7px; display: block; }

.mobmenu {display: none; position: fixed; flex-direction: column; justify-content: space-between; top:0; left: 0; background: #846e81; padding: 17px 30px 30px 30px; width: 100vw; height: 100vh; z-index: 999;  }
.mobmenu nav {}
.mobmenu nav ul {}
.mobmenu nav li {padding: 10px 0;}
.mobmenu nav li a {color: #fff; text-decoration: none; font-size: 25px;}
.mobmenu nav li a span { font-size: 17px; opacity: .7;}
.mobmenu nav ul li.highlighted {padding: 6px 13px; text-align: center; margin-top: 30px; border-radius: 8px; border: 2px solid #fff;  background: #fff;color: #846e81;font-size: 16px;}
.mobmenu nav ul li.highlighted a {color: #846e81; text-shadow: none;}
.mobmenu nav ul li.highlighted a:after {display: none;}
.mobmenu nav ul li.highlighted:hover {background: none; } 
.mobmenu nav ul li.highlighted:hover a, .mobmenu nav ul li.highlighted a:hover {color: #fff;} 
.mobmenu .headerlogin {margin-bottom: 0;}

.mobmenu .menu-lang {margin-right: 20px}
.mobmenu .menu-lang li {display: inline-block; font-size: 20px; padding-right: 10px; margin-right: 10px; border-right: 1px solid rgba(255,255,255,0.2);}
.mobmenu .menu-lang li:last-of-type {border : none; padding-right: 0; margin-right: 0;}
.mobmenu .menu-lang li a {color: #fff;text-decoration: none;}
.mobmenu .menu-lang li.current-lang a {text-decoration: underline;}
.mobmenu .menu-lang li a:hover {text-decoration: underline;}

.show {display: flex !important;}

footer {padding: 20px; background: #846e81; color: #fff; font-weight: 300;  font-size: 14px;}
footer .row { display: flex; align-items: center; }
footer a {color: #fff; margin: 0 5px;}
footer p {font-weight: 300; flex-grow: 2; margin-left: 20px; padding-left: 20px; border-left: 1px solid rgba(255, 255, 255, 0.3);}
footer .logo img { width: 130px; }
footer .term {margin-left: auto; align-self: flex-end;}

/* ==========================================================================
   Home
   ========================================================================== */

.hero { padding-top: 120px; position: relative; background-size: cover; color: #fff;   }
.hero:before {content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 100%; 
background: rgba(132,110,129,0.5);
background: linear-gradient(135deg, rgba(132,110,129,1) 25%, rgba(132,110,129,0) 80%);}
.hero .row {position: relative; z-index: 1; height: 100%; display: flex; align-items: center; padding: 60px 20px 150px 20px;  }
.hero article {flex: 0 0 52%; height: 100%; display: flex; justify-content: space-between; flex-direction: column; }
.hero article p {font-size: 16px; font-weight: 300; margin-bottom: 40px; max-width: 560px;}
.hero article h1 {font-size: 50px; line-height: 1.3; margin-bottom: 30px; text-shadow: 1px 1px 4px rgba(0,0,0,0.3);}
.hero article div {}
.hero a.link {color: #fff; margin-left: 20px;}
.hero .btn.primary {background: #ffa126; color: #fff; border-color: #ffa126;}
.hero .btn.primary:hover {background: none; border-color: #fff;}

.numbers {margin-top: -60px; position: relative; z-index: 2; margin-bottom: 30px;}
.numbers .row {border-radius: 10px; overflow: hidden; padding: 20px; background: #fff; 
box-shadow: 0px 0px 12px -4px rgba(0,0,0,0.5);
-webkit-box-shadow: 0px 0px 12px -4px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 12px -4px rgba(0,0,0,0.5);}
.numbers .statistics {  display: flex; justify-content: space-around;}
.numbers .statistics img {display: block;}
.numbers .statistics .item {display: flex; justify-content: center; font-size: 15px;}
.numbers .statistics .item img, .item span {align-self: center;}
.numbers .statistics .item img {margin-right: 10px;}
.rating {display: none;}

.quickaccess { padding: 20px 20px 70px 20px; text-align: center;}
.quickaccess h5 {text-align: center;color: #37455f !important; font-size: 24px; font-weight: 500; margin-bottom: 60px;}
.quickaccess .quicklevels {display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 35px;
width: 100%; max-width: 1200px; margin: 0 auto;}
.quickaccess .level {}
.quickaccess .level img {width: 90px; display: block; max-width: 100%; margin-bottom: 25px;}
.quickaccess .level p {font-size: 16px;font-weight: 500; text-transform: uppercase; letter-spacing: 1px; margin: 0;}
.quickaccess .level a {display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 10px;
 width: 100%; height: 100%; min-height: 210px; font-weight: 500; background: #f7f6fa; color: #000;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important; text-decoration:none; border-radius:5px; }
.quickaccess .level a:hover {background: #846e81; color: #fff; }
.quickaccess .level a:hover img {filter: invert(100%);}


.blank {padding: 60px 20px; text-align: center;}
.blank h1 {margin-bottom: 30px;}
.blank p {max-width: 920px; margin: 0 auto; font-size: 18px; margin-bottom: 30px;}
.blank .embed {max-width: 960px; background: #eee; border-radius: 10px; height: 200px; display:flex; justify-content: center; align-items: center; margin: 0 auto 60px auto;}
.blank .blanktest {font-size: 16px;}

.homemore {padding: 80px 20px 160px 20px; background-image: url('img/vid-bg.jpg'); background-size: 100%; background-repeat: no-repeat ; color: #fff; text-align: center;}
.homemore .vidembed {width:100%; max-width: 960px; height: 520px; margin: 0 auto 80px auto; background-position: center center; background-image: url('img/vid-cover.png'); background-color: #fff; 
background-size: cover; border-radius: 10px; position: relative; 
box-shadow: 0px 0px 12px 1px rgba(0,0,0,0.4);
-webkit-box-shadow: 0px 0px 12px 1px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 12px 1px rgba(0,0,0,0.4);}
.homemore .vidembed:after {display:  none;content: ''; position: absolute; top: calc(50% - 45px); left: calc(50% - 45px); width: 91px; height: 91px;
background-image: url('img/play.png'); background-repeat: no-repeat; z-index: 2;}
.homemore .vidembed:hover {cursor: pointer;}
.homemore h1 {margin-bottom: 30px;}
.homemore p {max-width: 920px; margin: 0 auto; font-weight: 300; font-size: 18px; margin-bottom: 70px;}
.homemore .seocontent {color: #37455f; text-align: initial; display: flex; column-gap: 100px;}
.homemore .seocontent h1 { margin-bottom: 20px;  }
.homemore .seocontent p { margin-bottom: 20px; font-size: 16px; text-align: justify; }

.homecompanies {padding: 40px 20px; background: #faf8f6; margin-bottom: 80px; }
.homecompanies .row {position: relative; padding-left: 500px;  min-height: 200px; display: flex; align-items: center;}
.homecompanies .row img {position: absolute; left: 0; top: -100px;}
.homecompanies .row article h1 { margin-bottom: 20px; font-size: 32px; }
.homecompanies .row article p {margin-bottom: 30px;}

.hometeacher {padding: 60px 0;}


.featured_courses {padding: 0 20px 80px 20px;}
.featured_courses .row {display: grid; grid-gap: 35px; grid-template-columns: 1fr 1fr;}
.featured_courses .row .fbloc {position: relative;}
.featured_courses .row .fbloc a {display: block; position: relative; text-decoration: none; border-radius: 10px; overflow: hidden;}
.featured_courses .row .fbloc a:before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
background: rgb(0,103,103);
background: linear-gradient(56deg, rgba(0,103,103,1) 0%, rgba(255,255,255,0) 55%);}
.featured_courses .row .fbloc img {border-radius: 10px; display: block;}
.featured_courses .row .fbloc .freebadge {padding: 10px 25px; z-index: 2;  border-radius: 0 6px 6px 0;color: #FFF;position: absolute;left: 0;top: 20px;background: #FF0000; text-transform: uppercase;}
.featured_courses .row .fbloc h1 {position: absolute; z-index: 2; border-left: 6px solid #FFF; bottom: 20px; left: 20px; padding: 4px 15px;
color: #fff;font-weight: 600;font-size: 28px;max-width: 365px; transition: all .4s cubic-bezier(0.46, 0, 0.07, 1);}
.featured_courses .row .fbloc a:hover h1 {padding: 4px 15px 4px 25px; transition: all .4s cubic-bezier(0.46, 0, 0.07, 1); max-width: 375px; left: 30px;}


/* ==========================================================================
   Single
   ========================================================================== */
.container {padding: 0px 20px 60px 20px; background: #faf8f6; min-height: 100vh; display: flex;}
.single {display: flex;column-gap: 30px;}
.post {background: #fff; border-radius: 20px; padding: 25px 0 40px 0; width: calc(100% - 330px); min-height: 100px;}
.post h1.posttitle {color: #bb2649 ; font-size: 25px; font-weight: 600; padding: 0 25px; margin-bottom: 20px;}
.post .postcover {width: 100%; max-width: 100%; display: block; border-radius:20px; margin-bottom: 25px;}
.post article {padding: 0 25px; font-size: 15px;}
.post article h1, .post article h2 { font-size: 22px; font-weight: 600; margin-bottom: 25px;}
.post article p {margin-bottom: 20px; text-align: justify;}
.post article a {color: #846e81; text-decoration: underline;}
.post article a:hover {text-decoration: none;}
.post article ul {padding-left: 20px; margin-bottom: 30px;}
.post article li { margin-bottom: 5px; }
.post article ul li::before {content: "\26AC";color: #846e81; font-weight: 700;display: inline-block; width: 1em; margin-left: -1em;}
.post article .promo {padding: 40px 20px 0 20px; position: relative; color: #846e81;background: #faf8f6; border-radius: 10px;
 border: 2px dashed #846e81; text-align: center; margin: 40px 0 60px 0;}
.post article .promo p { font-size: 18px; text-align: center; margin: 0 auto 30px auto; max-width: 660px; }
.post article .promo a {margin-bottom: 0; border-radius: 0 0 10px 10px; padding: 15px 20px; display:  inline-block ; background: #bb2649; opacity: 1; border: none; margin-bottom: -15px; color: #fff; text-decoration: none; }
.post article .promo a:hover {text-decoration: underline;}
.post article .tabs { margin: 30px 0 40px 0; }
.post article .tab {width: 100%;color: white;overflow: hidden; margin-bottom: 10px; }
.post article .tab-label {display: flex; justify-content: space-between; padding: 1em; align-items: center; font-weight: 500; cursor: pointer; 
   color: #846e81; background: #faf8f6; border: 1px dashed #37455f; padding-right: 35px; position: relative; border-radius: 8px;}
.post article .tab-label:hover { background: #ffa126; color: #fff;}
.post article .tab-label::after {content: "❯";width: 1em;height: 20px;text-align: center;transition: all 0.35s; align-self: flex-end; margin-left: auto; position: absolute; right: 10px;}
.post article .tab-content {max-height: 0;padding: 0 1em;color: #2c3e50;background: white;transition: all 0.35s;}
.post article .tabs input {position: absolute;opacity: 0;z-index: -1;}
.post article .tabs input:checked + .tab-label {background: #ffa126; color: #fff;}
.post article .tabs input:checked + .tab-label::after {transform: rotate(90deg); }
.post article .tabs input:checked ~ .tab-content {max-height: fit-content;padding: 1em;}
.post article .tab-label span {color: #000;}
.post article .tabs input:checked + .tab-label span, .post article .tab-label:hover span {color: #fff;}
.post article .tab-label span small {background: #846e81; padding:5px; border-radius:3px; margin:0 5px; color: #fff;  }

.singlefull article {width: 100%;}
.singlefull article .card {border-radius: 15px}
.singlefull article .container .row { margin:0 !important; padding: 30px 10px 20px 10px; }
.singlefull article .alert {padding: 20px !important;}
.singlefull article form {padding: 0 !important;}
.singlefull article form .gender {justify-content: space-between !important;}
.singlefull article form .gender .form-check .form-check-input {margin: 0 5px 0 0 !important;}
.singlefull article .container form .row {padding: 10px 0 0 0 !important}
.singlefull article .container form .row>* { }
.singlefull article .container form .row div:nth-child(2n+1) {padding-left: 0 !important; padding-right:5px !important;}
.singlefull article .container form .row div:nth-child(2n) {padding-left: 5px !important; padding-right:0 !important;}
.singlefull article .container form .btn-outline-secondary {margin: 0 !important}

.mapembed {width: 100% !important;}

.sidebar {flex: 0 0 300px;}
.sidebar .widgets {}
.sidebar .widgets .sideblock {border-radius: 20px 20px 0 0; overflow: hidden; border: 10px solid #f3eee9; margin-bottom: 20px;}
.sidebar .widgets .sideblock:nth-child(2n) {border-radius: 0 0 20px 20px;}
.sidebar .widgets .sideblock span {color: #846e81; padding: 10px; font-size: 20px; display: block; font-weight: 600;}
.sidebar .widgets .sideblock a {text-decoration: none;}
.sidebar .widgets .sideblock.blocktest {background: #ffa126; border-color: #ffa126; color: #fff;}
.sidebar .widgets .sideblock.blocktest span {color: #fff; text-align: center; padding-top: 15px;}


.prog { width: 100%; display: flex; flex-direction: column; }
.prog h2 {margin-bottom: 40px;}
.prog article { width: 50%; font-size: 14px;}
.prog article p { margin-bottom: 30px;}
.prog-list { margin-bottom: 40px; width: 100%; display: flex; align-items: center; position: relative; background: #fff; border-radius: 20px; padding: 20px;
-webkit-box-shadow: 6px 6px 26px -10px rgba(0,0,0,0.25);
-moz-box-shadow: 6px 6px 26px -10px rgba(0,0,0,0.25);
box-shadow: 6px 6px 26px -10px rgba(0,0,0,0.25);}
/*.prog-list::after {content: ''; position: absolute; bottom: -40px; left: calc(50% - 50px); width: 100px; height: 1px; border-bottom: 1px dashed #dfd2d2;}*/
.prog-list:last-child {margin-bottom: 10px;}
/*.prog-list:last-child::after {display: none;}*/
.prog-list article { padding-left: 30px; flex: 0 0 60%;}
.prog-list img { border-radius: 5px; width: 40%; height: auto;}
.prog-list .btn { margin-top: 20px;  border-color: #846e81; color: #846e81;}
.prog-list .btn:hover {background: #846e81; color: #fff;}
.prog-list:nth-child(even) article {padding-left: 0px; padding-right: 30px; order: 1;}
.prog-list:nth-child(even) img {order: 2;}


.blog { width: 100%; display: flex; flex-direction: column; padding: 30px; background: #fff; border-radius: 20px;}
.blog .blog-list h2 a {margin-bottom: 40px; color: #37455f; text-decoration: none;}
.blog article { width: 50%; font-size: 14px;}
.blog article p { margin-bottom: 30px;}
.blog article span {color:#846e81 ; margin-bottom: 5px; display: block;}
.blog-list { margin-bottom: 80px; width: 100%; display: flex; align-items: center; position: relative;}
.blog-list::after {content: ''; position: absolute; bottom: -40px; left: calc(50% - 50px); width: 100px; height: 1px; border-bottom: 1px dashed #dfd2d2;}
.blog-list:last-child {margin-bottom: 10px;}
.blog-list:last-child::after {display: none;}
.blog-list article { padding-left: 30px; flex: 0 0 60%;}
.blog-list img { border-radius: 5px; width: 40%; height: auto;}
.blog-list .btn { margin-top: 20px;  border-color: #846e81; color: #846e81;}
.blog-list .btn:hover {background: #846e81; color: #fff;}


/* ==========================================================================
   Wizard
   ========================================================================== */
#placementtestapp {}
#placementtestapp .card {}
#placementtestapp .card-body {}
#placementtestapp .card-title {margin:0 !important; width: 100%; text-align:center; color: #846e81 !important;}
#placementtestapp .b-row {padding: 32px 0;}
#placementtestapp .w-contents .btn {background:#f7f6fa; border: none; padding: 40px 10px !important; font-weight:500; /*max-width : 200px; width: 100%; */ margin: 20px !important;}
#placementtestapp .w-contents .btn .d-flex {flex-direction:column; padding-top: 0;}
#placementtestapp .w-contents .btn span.icon {width: 90px; height: 90px; background-position: center center; background-repeat: no-repeat; margin-bottom: 20px; display: block;}
#placementtestapp .w-contents .btn span.icon.Beginner {background-image:url('http://wp.alfaskolen.smdev.ma/wp-content/uploads/2022/04/beginner.png')}
#placementtestapp .w-contents .btn span.icon.Intermediate {background-image:url('http://wp.alfaskolen.smdev.ma/wp-content/uploads/2022/04/intermediate.png')}
#placementtestapp .w-contents .btn span.icon.Advanced {background-image:url('http://wp.alfaskolen.smdev.ma/wp-content/uploads/2022/04/advanced.png')}
#placementtestapp .w-contents .btn span.icon.Admission {background-image:url('http://wp.alfaskolen.smdev.ma/wp-content/uploads/2022/06/admission.png')}

#placementtestapp .w-contents .btn:hover, #placementtestapp .w-contents .btn.active:hover {background:#846e81 !important; color: #fff !important;}
#placementtestapp .w-contents .btn.active {background:#ffa126; color: #fff !important;}
#placementtestapp .w-contents .btn:hover span.icon {filter: invert(100%);}
#placementtestapp .taketest {text-align:center; margin-bottom: 20px !important;}

#placementtestapp .stepOne.card-body .w-contents .b-row {display: flex; justify-content: center;}
#placementtestapp .stepOne.card-body .w-contents .btn {padding: 0 !important; min-height: 210px; display: flex; flex-direction: column; justify-content: center;}

#placementtestapp .stepTwo.card-body .w-contents .btn {padding: 20px 10px !important;margin: 0px !important; box-shadow: initial !important; border: 5px solid #fff;     border-radius: 13px;}
#placementtestapp .stepTwo.card-body .w-contents .btn span.icon {display: none;}
#placementtestapp .wizard-nav {display: flex; justify-content: flex-end; flex-direction: row; gap: 20px;}
#placementtestapp .wizard-nav .btn {padding: 10px 30px !important;}
#placementtestapp .wizard-nav .btn-secondary {background-color: #846e81!important; color: #fff; border: 1px solid #846e81 !important; font-size: 13px; margin: 0 !important;}
#placementtestapp .wizard-nav .btn-secondary.m-1 {margin: 0 !important}
#placementtestapp .wizard-nav .btn-primary {color: #fff !important; background-color: #ffa126!important; border-color: #ffa126!important;}

#placementtestapp .stepTree.card-body .w-contents .btn {padding: 20px 10px !important; margin: 10px 20px !important;     margin: 0 !important;border: 5px solid #fff;box-shadow: none !important;border-radius: 12px;}
#placementtestapp .stepTree.card-body .w-contents .btn span.icon {display: none;}

#placementtestapp .stepTree.card-body ul.courses-results button.btn {border: 1px solid #846e81; padding: 10px 20px !important; color: #846e81 !important; background: #fff !important;}
#placementtestapp .stepTree.card-body ul.courses-results button.btn:hover {background:#846e81!important; color: #fff !important;}
#placementtestapp .stepTree.card-body ul.courses-results button.btn.btn-success {color: #fff !important; background:#ffa126 !important; border-color: #ffa126 !important;}
#placementtestapp .stepTree.card-body ul.courses-results li {box-shadow: none !important; margin-bottom: 0; border-bottom: 1px solid #eee !important;}
#placementtestapp .stepTree.card-body ul.courses-results {padding: 0 30px; margin: 0 auto 30px auto; max-width: 1200px;}
#placementtestapp .stepTree.card-body .carousel-item h5 { margin-bottom: 20px !important; }
#placementtestapp .stepTree.card-body .carousel-item .d-block {display: flex !important; align-items: center;}
#placementtestapp span.badge {min-width: 80px;}
#placementtestapp span.bg-danger.badge {background-color: #A65F6D !important;font-weight: 300;/*letter-spacing: 1px;*/font-size: 10px;}
#placementtestapp span.bg-success.badge {background-color: #00628f !important;font-weight: 300;/*letter-spacing: 1px;*/font-size: 10px;}
#placementtestapp .stepTree.card-body .carousel-item .d-block .me-1 {color:#846e81 !important ;}

#placementtestapp hr.text-seconday {display: none;}
#placementtestapp .card .d-flex {padding: 15px 15px 0 15px;}
#placementtestapp .card li .d-flex {padding: 0 !important;}
#placementtestapp .card .d-flex .ms-3 {margin: 0 !important; text-align: left;}

#placementtestapp .stepTree.card-body ul.courses-results li {text-align: left; padding: 15px !important; background-color: transparent !important;}
#placementtestapp .stepTree.card-body ul.courses-results button.btn {padding: 5px 20px !important; margin-left: 20px !important;}

#placementtestapp span.claim-spot {font-size: 11px !important;}
#placementtestapp form .d-flex {padding: 0 !important;}
#placementtestapp form input::placeholder {font-size: 13px !important; color: #888 !important;}
#placementtestapp form span {font-size: 13px;}
#placementtestapp form hr {margin: 40px auto 25px auto;width: 100%;max-width: 100px;}
#placementtestapp form .form-check { margin-bottom: 30px;}
#placementtestapp form .form-check .text-start.form-check-label {font-size: 13px;}
#placementtestapp form .form-check label, #placementtestapp form .form-check input {cursor: pointer;}
#placementtestapp .container {display: block;}
.thankYouPageContent span {line-height: 1.6 !important; background: #ffa126 !important; color: #fff !important;}
#placementtestapp form .alert {padding: 1rem !important;}


.grecaptcha-badge {display:none;}

/* ==========================================================================
   Plugins
   ========================================================================== */
#placementtestapp .container {
    min-height: auto;
    padding: inherit!important;
    background: transparent;
}
#placementtestapp .container.carousel-inner {
    padding: 0 80px!important;
}


.slick-next:before, .slick-prev:before {font-size: 30px!important; color: #000!important;}
.slick-next {right: 0!important;z-index: 99 !important;}
.slick-prev {left: 0!important;z-index: 99 !important;}
.carousel-control-prev { height: 40px !important;width: 50px !important;top: 51px !important ;left: calc(50% - 200px) !important;}
.carousel-control-next { height: 40px !important;width: 50px !important;top: 51px !important ;right: calc(50% - 200px) !important;}

.slick-disabled {visibility: hidden !important;}
.slider-nav .item-sessions button { width: 100%; border: 0; background: #846e81; color: #fff; font-size: 1rem; font-weight: 500; text-transform: uppercase; padding: 15px 10px; border-radius: 8px; }
.slider-nav .item-sessions {padding: 0 5px;}
.slider-nav .slick-current .item-sessions button { background: #ffa126; color: #fff; position: relative; margin-bottom: 10px;}
.slider-nav .slick-current .item-sessions button:after {content:''; position: absolute; top: 100%; left: calc(50% - 3px); width: 0; height: 0;
    border-top: solid 5px #ffa126;
    border-left: solid 6px transparent;
    border-right: solid 6px transparent;}
.slider-nav .item-sessions button:hover {background: #f7f6fa; color: #000; cursor: pointer;}
.slider-nav .slick-current .item-sessions button:hover {background: #ffa126 !important; color: #fff !important; }
.slider-nav .slick-arrow { text-indent: -9999px; border: 0; z-index: 99; background: none; border-radius: 50%; width: 32px; height: 32px; position: absolute; top: calc(50% - 16px);
-webkit-box-shadow: 0px 0px 12px 0px #fff; 
box-shadow: 0px 0px 12px 0px #fff; }
.slider-nav .slick-arrow:hover {cursor: pointer;}
.slider-nav .slick-arrow.slick-prev {background: #fff url(img/left1.png); left: 0;}
.slider-nav .slick-arrow.slick-next {background: #fff url(img/right1.png); right: 0;}



.slider-months {}
.slider-months h5 { width: 100%; text-align: center; font-size: 16px; }
.slider-months ul {list-style: none; padding: 0 !important; margin: 0;}
.slider-months .item-month ul li:before {display: none !important;}
.slider-months .item-month ul li {display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed #eee;}
.c-item-dates, .c-item-select {  }
.c-item-info {flex: 0 0 40%;}
.c-item-select .c-item-prixe {margin-right: 10px;}
.c-item-sub {width: 100%; display: block;}
.class-item-classroom {text-align: center;}
.c-item-info .available-places {display: block; font-size: 12px;}
.slider-months span.badge {border-radius: 3px; padding: 2px 5px; color:#fff; margin-left: 5px; width: 80px; display: block;}
.slider-months span.bg-danger.badge {background-color: #A65F6D !important;font-weight: 300;letter-spacing: 1px;font-size: 10px; margin: 0 0 5px 0;}
.slider-months span.bg-success.badge {background-color: #00628f !important;font-weight: 300;letter-spacing: 1px;font-size: 10px;}
.slider-months .slick-arrow { text-indent: -9999px; border: 0; z-index: 99; background: none;  width: 24px; height: 24px; position: absolute; top: 24px;}
.slider-months .slick-arrow:hover {cursor: pointer;}
.slider-months .slick-arrow.slick-prev {background: url(img/left2.png); left: calc(50% - 120px) !important;}
.slider-months .slick-arrow.slick-next {background: url(img/right2.png); right: calc(50% - 120px) !important;}
.c-item-select button.select {border: 1px solid #846e81;border-radius: 4px; padding: 5px 10px; width: 106px; color: #846e81;background: #fff;}
.c-item-select button.select:hover {cursor: pointer; background: #846e81; color: #fff;}
.slider-months .slick-slide {opacity: 0 !important;}
.slider-months .slick-slide.slick-active {opacity: 1 !important;}
.available-places {display: block; width: 100%; font-size: 12px; color: #d62347;}

.slick-arrow.slick-disable {display: none;}


.hamburger {
  position: absolute; right: 32px; top: 32px;
  padding: 7px 0px;
  display: none;
  cursor: pointer;
  float: right;
  transition-property: opacity, -webkit-filter;
  transition-property: opacity, filter;
  transition-property: opacity, filter, -webkit-filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  z-index:  9998;
  overflow: visible; }

.hamburger-box {
  width: 25px;
  height: 18px;
  display: inline-block;
  position: relative; }

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
  width: 23px;
  height: 2px;
  background-color: #fff;
  border-radius: 4px;
  position: absolute;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  transition-duration: 0.15s;
  transition-timing-function: ease; }
.hamburger-inner::before, .hamburger-inner::after {
  content: "";
  display: block; }
.hamburger-inner::before {
  top: -7px; }
.hamburger-inner::after {
  bottom: -7px; }
 
/*
 * Squeeze
 */
.hamburger--squeeze .hamburger-inner {
  transition-duration: 0.1s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--squeeze .hamburger-inner::before {
    transition: top 0.1s 0.14s ease, opacity 0.1s ease; }
  .hamburger--squeeze .hamburger-inner::after {
    transition: bottom 0.1s 0.14s ease, -webkit-transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    transition: bottom 0.1s 0.14s ease, transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    transition: bottom 0.1s 0.14s ease, transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--squeeze.is-active .hamburger-inner {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  transition-delay: 0.14s;
  background: #fff;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  .hamburger--squeeze.is-active .hamburger-inner::before {
    top: 0;
    background: #fff;
    opacity: 0;
    transition: top 0.1s ease, opacity 0.1s 0.14s ease; }
  .hamburger--squeeze.is-active .hamburger-inner::after {
    bottom: 0;
    background: #fff;
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
    transition: bottom 0.1s ease, -webkit-transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: bottom 0.1s ease, transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: bottom 0.1s ease, transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1); }

.hamburger--squeeze.is-active {position: fixed;}


/* 
** Contact Form 7 Styles 
*/
.wpcf7-form input[type="text"], 
.wpcf7-form input[type="email"], 
.wpcf7-form input[type="url"], 
.wpcf7-form input[type="password"], 
.wpcf7-form input[type="search"], 
.wpcf7-form input[type="number"], 
.wpcf7-form input[type="tel"], 
.wpcf7-form textarea {
    color: #1f252b;
    width: 100%;
    max-width: 500px;
    padding: 12px 16px;
    border-radius: 4px;    
    border: 1px solid #e7dddd;
    border-left: 4px solid #846e81;
}

.wpcf7-form textarea {max-width: 100%;}
.wpcf7-form p {
    margin: 0 0 28px;
}

.wpcf7-form label {}
.wpcf7-form label span {display: block; margin-top: 7px;}
.wpcf7-text:focus, 
.wpcf7-textarea:focus {
    outline: 1px solid rgba(84, 222, 197, 0.9);
    outline-offset: 0;
}
div.wpcf7-mail-sent-ok {
    border: 0;
    background: #5471de;
    color: #fff;
    padding: 18px;
}
div.wpcf7-acceptance-missing,
div.wpcf7-validation-errors {
    border: 0;
    background: #f9443b;
    color: #fff;
    padding: 18px;
}
span.wpcf7-not-valid-tip {
    color: #f9443b;
}
/* 
** Button Styles 
*/
.wpcf7-form .wpcf7-submit {
    background-color: #846e81;
    border: 0;
    color: #fff;
    border-radius: 8px;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 15px;
    width: auto;
    padding: 14px 42px;
    letter-spacing: 2px;
    font-size: 14px;
}
.wpcf7-form .wpcf7-submit:hover {
    cursor: pointer;
    box-shadow: 0px 7px 16px -7px rgba(0, 0, 0, 0.4);
    border: 0;
}


/* ==========================================================================
   Media Query
   ========================================================================== */

@media only screen and (max-width: 1200px) { 
.hero article h1 {font-size: 40px;}
.home .header .logo img { max-width: 140px; }
.hero article {flex: 0 0 60%;}
.hero {background-position: center center;}
}

@media only screen and (max-width: 920px) { 
.quickaccess .quicklevels {grid-template-columns: repeat(3, 1fr);}
}

@media only screen and (max-width: 768px) { 
.numbers {display: none; }
.hero article { flex: 0 0 100%; }
.header nav {display: none;}
.hero article h1 {font-size: 24px;}
.hero a.link {display: block; margin-left: 0;}
.hero .row {padding: 60px 20px 100px 20px;}
h1 {font-size: 24px ;}
.blank p, .homemore p {font-size: 14px;}
.homemore {background-size: auto; padding: 80px 20px 80px 20px;}
.homemore .seocontent {flex-direction: column;}
.seoleft {margin-bottom: 30px;}
.homecompanies {margin-bottom: 0;}
.homecompanies .row {padding-left: 0; flex-direction: column-reverse;}
.hometeacher {padding: 40px 20px;}
footer .row {flex-direction: column;}
footer p {padding-left: 0; margin-left: 0; border: none; margin-bottom: 20px;}
.footerlogo {margin-bottom: 20px ;}
#placementtestapp .stepOne.card-body .w-contents .b-row {flex-flow: wrap;}
.homecompanies .row img {position: initial;}
.prog-list { flex-direction: column; }
.prog-list img {width: 100%;}
.prog {padding: 20px;}
.prog article {width: 100%; padding: 20px 0 0 0}
.prog h2 {margin-bottom: 20px; }
.prog article p {margin-bottom: 10px;}
.prog-list:nth-child(even) img {order: initial;}
.single {flex-direction: column;}
.post {width: 100%; margin-bottom: 40px;}
.sideblock img {max-width: initial; width: 100%;}
.blog-list { flex-direction: column; }
.blog-list img {width: 100%;}
.blog article {width: 100%;}
.blog-list:nth-child(even) img {order: initial;}
.header .headerlogin, .header .menu-lang {display: none;}
.hamburger { display: inline-block; }
.c-item-info {flex: 0 0 calc(100% - 102px);padding-bottom: 10px;}
.class-item-classroom {flex: 0 0 102px; padding-right: 5px;}
.c-item-dates, .c-item-select {flex: 0 0 50%;}
.slider-months .item-month ul li {flex-wrap: wrap;}
.c-item-select {display: flex;justify-content: flex-end;padding-right: 5px; align-items: flex-end; flex-direction: column;}
.col-5[data-v-d3d930c8] {width: 100% !important;}

#placementtestapp .stepTree.card-body ul.courses-results {padding: 0px !important;}
#placementtestapp .stepTree.card-body ul.courses-results li {padding: 15px 0 !important;}
#placementtestapp .stepTree.card-body .carousel-item .d-block {flex-direction: column;}
#placementtestapp .stepTree.card-body .text-muted[data-v-d3d930c8] {display: block; text-align: center;}
#placementtestapp .card .stepTree.card-body li .d-flex {width: 100% !important;}
.row>*[data-v-6e463776] {padding-right: 0 !important; padding-right: 0 !important;}
#placementtestapp .card-body {padding: 0 !important;}
#placementtestapp .form-check {flex-direction: column;}
#placementtestapp .form-outline {flex-direction: column;}
#placementtestapp .stepTree.card-body .w-contents .btn {font-size: 13px !important;}

.carousel-control-next {right: 0 !important;}
.carousel-control-prev {left: 0 !important}

.featured_courses .row { grid-gap: 35px; grid-template-columns: 1fr; }
.post article {padding: 0 10px;}
.post article .tab-label {flex-direction: column; padding: 10px 10px 30px 10px; text-align: center;}
.post article .tab-label::after {right: calc(50% - 10px); bottom: 5px; transform: rotate(90deg);}
.post article .tab-label span {margin-top: 15px; text-align: center;}
.post article .tab-label span small {display: block; margin-top: 5px; }
.quickaccess .quicklevels {grid-template-columns: repeat(2, 1fr);}

}

@media only screen and (max-width: 380px) { 
.quickaccess .quicklevels {grid-template-columns: 1fr;}
}


/********* register form *********/
.singlefull article #Main-App .container form .row div:nth-child(2n),
.singlefull article #Main-App .container form .row div:nth-child(2n+1) {
    padding-right: calc(var(--bs-gutter-x)*0.5) !important;
    padding-left: calc(var(--bs-gutter-x)*0.5) !important;
}
.singlefull article #Main-App .container form .row.listsrow div:nth-child(2n),
.singlefull article #Main-App .container form .row.listsrow div:nth-child(2n+1) {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
svg.vs__open-indicator {
    margin-right: 10px;
}
.hear_about svg.vs__open-indicator {
    margin-right: -10px;
}
.hear_about .vs__dropdown-menu {
    width: calc(100% - 24px) !important;
    left: 12px !important;
}
.big-title {
    padding-left: 12px;
    padding-top: 12px;
}
.for-login-label {
    margin-left: 17px !important;
}
h5.log-in-header {
    margin-left: 4px;
}