@media all and (max-width:1024px){
    .smallVisuals .shape4 {width: 180px;left: 5px;}
    .lessonSlider, .lessonBtnHolder, .result {max-width: 600px;}
    .number {font-size: 85px;margin-right: 15px;}
    .certificateHolder, .a4Page {width: 100%;}
    .secondBlock {margin-bottom: 50px;}
    .lessonItem .listingImage {
    width: 100px;height: 100px;
    }
    .certForm .inputEntity input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
      color: #747474;
      font-size: 15px;
      line-height: normal;
    }
    .certForm .inputEntity input::-moz-placeholder { /* Firefox 19+ */
      color: #747474;
      font-size: 15px;line-height: normal;
    }
    .certForm .inputEntity input:-ms-input-placeholder { /* IE 10+ */
      color: #747474;
      font-size: 15px;line-height: normal;
    }
    .certForm .inputEntity input:-moz-placeholder { /* Firefox 18- */
      color: #747474;
      font-size: 15px;line-height: normal;
    }
}
@media all and (max-width:768px){
    .lessonItem .listingImage {
    width: 100px;
    height: 100px;
    }
    .shape2 {
    width: 300px;
    }
    .lessonDetails + .shape1 + .shape2 + .shape3 + .shape4 {
        display: none;
    }
    .certificateTitle, .firstBlock , .secondBlock, .thirdBlock {margin-bottom: 15px;}
    .certificateHolder .lessonBtnHolder {margin: 0 auto;}
    .certificatePage h3 {font-size: 16pt;}
    .a4Page {height: 610px;}
    .lessonItem h3 {font-size: 18px;}
        .result {padding: 20px!important;}
    .resultIcon {display: none;}
    .result.correctResult {background: #6ac259;}
    .result.wrongResult {background: #ea314b;}
}
@media all and (max-width: 767px) {
    .shape4 , .shape5  {display: none;}
    .smallVisuals .shape6 {
        width: 180px;
        height: 180px;
    }
    .statusForm {padding: 0;}
    .lessonLsiting {
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
    }
    .shape2 {
        width: 250px;
        height: 318px;
    }
    .shape1 {
        width: 200px;
        height: 200px;
        left: 0;
        bottom: 0;
            background-size: contain;
    }
     .smallVisuals .shape3 {
        width: 220px;
        height: 250px;
            top: -50px;
    }
     .smallVisuals .shape7 {
        width: 60px;
        right: 10px;
        top: -10px;
    }
    header li.language a{
        font-size: 14px;
        z-index: 10;
        position: relative;
    } 
    .detailListing .owl-carousel li {
        padding-left: 0;
        padding-right: 0;
    }
    .lessonSlider {max-width: 100%; width: 100%;}
    .result {width: 90%; margin: 0 auto;padding-left: 110px;}
    .wrongResult .resultIcon::before, .correctResult .resultIcon::before {
        width: 40px;
        height: 40px;
        margin-top: -20px;
        margin-left: -20px;
    }
    input[type=radio ]:not(old) + label:after {top: 8px;}
    .result h3, .resultsListing .result h3 {font-size: 18px;}
    .resultIcon {left: -90px;}
        .mainIntro {
        -webkit-transform: translate(0%,0%);
        -o-transform: translate(0%,0%);
        -ms-transform: translate(0%,0%);
         transform: translate(0%,0%); 
         top: 30%;
         left: 20px;
         right: 20px;
    }
    .lessonBtnHolder .normalBtn {
        min-width: inherit;
        width: 100%;
        margin-bottom: 20px;
    }
    .mainIntro h1 {font-size: 40px;}
    .lessonLsiting.show  {
        position: relative;
        left: 0;
        margin: 200px auto 0;
        text-align: center;
        -webkit-transform: scale(1) translate(0,0);
        -o-transform: scale(1) translate(0,0);
        -ms-transform: scale(1) translate(0,0);
        transform: scale(1) translate(0,0);
    }
        .lessonLsiting  ul {margin: 0 auto; }
        .lessonLsiting li {
            margin-bottom: 38px;
            padding-left: 0;
            padding-right: 0;
            text-align: center;
            height: 165px;
        }
    .lessonItem h3 {width: 180px;margin: 0 auto;}
    .rightContent {display: none;}
   .lessonIcon {width: 100px;height: 100px;margin: 120px auto 10px;}
    .detailContent .leftContent {width: 100%;}
    .leftContent h3 {font-size: 25px;}
    .number {font-size: 40px;}
    .question {width: 70%; font-size: 20px;padding: 13px 0;}
    .stackedInput > div {margin-bottom: 20px;font-size: 16px;}
    input[type=checkbox]:not(old) + label, input[type=radio ]:not(old) + label {line-height: 18px;}
    input[type=checkbox]:not(old) + label:before, input[type=radio ]:not(old) + label:before {top: 0;}
    .certForm h3 {font-size: 20px;text-align: left;}
    .a4Page .imageHolder{opacity: 0;}
    .certificateHolder .lessonBtnHolder {width: 80%;margin: 50px auto;}
    .lessonBtnHolder {margin: 0 20px;}
    .result {font-size: 13px; min-height: initial;}
    .resultsListing .result span {display: block;}
    .certForm {width: 90%;margin: 0 auto;}
    .certForm h3 {width: 100%;}
    .certificatePage {background-color: #FFF;padding: 20px;}
    .certificateHolder .secondaryBtn {
        text-align: center;
        display: block;
        margin-bottom: 20px;
        float: none;
        margin-right: 0;
    }
    .resultsListing > h3 {
        margin-bottom: 45px;
        font-size: 25px;
    }

    .lessonSlider {width: 90%;}
    .leftContent p {font-size: 16px;}
    .detailListing .owl-carousel {width:85%;margin: 0 auto;}
    .quizContainer .owl-carousel {width:100%;margin: 0 auto;}
}

@media all and (max-width: 375px) {
    .mainIntro h1 {font-size: 30px;}
    .mainIntro h1 p{display: inline-block;}
    .mainIntro {top: 40%;}
    .smallVisuals .shape6 {width: 100px;height: 100px;}
    .mainIntroText{font-size: 18px;}
    .lessonItem h3 {width: 125px;}
    .lessonItem h3 {font-size: 16px;}
    .lessonScroll {height: 290px;}
    .leftContent h3 {font-size: 20px;}
    .question {padding: 9px 0;}
}


@media print{
    @page {size: landscape;margin: 0mm;}
    .a4Page .imageHolder{
        opacity: 1;
    }

}