/* 
    Base, menu, MAIN, signin footer
    Loader, Message, g-recaptcha, signin_form
    p.text { slide-copy  disclaimer
*/
/******************************
******************************
******************************

Base

******************************
******************************
******************************/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html,body
{
    min-width: 100%;
    width: 100%;
    margin: 0px;
    overflow-x: hidden; 
}
body {
    color: #171717;
    font-size: 15px;
    box-sizing: border-box;
    letter-spacing: .3px;
}
/* List */
ul {
    list-style: none;
}
/* Link */
a {
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}
div.cta-wrapper {
    display: grid;
    justify-items: center;
    padding: 30px 0 100px 0;
}
a.cta {
    margin: 20px 0;
    background-color: #000;
    padding: 20px 50px;
    color: #fff;
    border-radius: 8px;
    font-size: 14px;
    width: 280px;
    text-align: center;
    font-family: InterR;
    box-shadow: 0px 10px 20px 1px rgba(0, 0, 0, 0.253);
}
a.cta:hover {
    background-color: rgb(46, 46, 46);
}
@media screen and (max-width: 1280px) {
    div.cta-wrapper {
        padding: 10px 0 50px 0;
    }
    a.cta {
        margin: 20px 0;
        padding: 15px 30px;
        font-size: 14px;
        width: 240px;
    }
}
@media screen and (max-width: 576px) {
    div.cta-wrapper {
        width: 340px;
        margin: auto;
        padding: 10px 0 30px 0;
        display: grid;
        justify-items: flex-start;
    }
    a.cta {
        margin: 0px 0;
        padding: 15px 40px;
        font-size: 12px;
        min-width: 150px;
    }
}
/* Text */
form, textarea, input, button, 
select, option, div, header, footer,
h3, h5, h4, h5, h6, p  {
    font-family: arial,sans-serif;
}
h1 {
    font-family: InterExBo, arial, sans-serif;
}
h2 {
    font-family: InterExBo, arial, sans-serif;
}
label, input, p {
    font-family: InterR, arial, sans-serif;
}
h1, h2, h3, h5, h4, h5, h6 {
    font-weight: 900;
}
h1, h2, h3, h5, h4, h5, h6, p {
    line-height: 1.5;
    letter-spacing: .7;
}
h1 {
    font-size: 70px;
    margin: 10px 0;
}
h1.page-title,
h1.page-title-2 {
    font-size: 80px;
    line-height: 1;
}
h2 {
    font-size: 60px;
    margin-bottom: 10px;
}
h3 {
    font-size: 45px;
}
h4 {
    font-size: 35px;
    margin-bottom: 10px;
}
h5 {
    font-size: 30px;
    margin-bottom: 30px;
}
h6 {
    font-size: 23px;
}
p {
    font-size: 20px;
    line-height: 2;
    font-weight: 400;
    color: #4F4F4F; 
    margin-bottom: 20px; 
}
ol {  
    padding: 15px 0;
    display: flex;
    flex-flow: column nowrap;
    row-gap: 10px;
}
/* ul {  
    padding: 10px 10px;
    display: flex;
    flex-flow: column nowrap;
    row-gap: 10px;
}
ul li {
    font-family: InterVar, sans-serif;
    font-size: 18px;
    line-height: 1.5;
    font-weight: 500;
    color: #6D6D6D;
} */
ol li {
    font-family: InterVar, sans-serif;
    font-size: 18px;
    line-height: 1.5;
    font-weight: 500;
    color: #6D6D6D;
    margin-left: 30px;
}
@media screen and (max-width: 1280px) {
    h2 {
        font-size: 45px;
    }
    h3 {
        font-size: 40px;
    }
    h5 {
        font-size: 25px;
        margin-bottom: 15px;
    }
    p  {
        font-size: 16px;
    }
    ol li  {
        font-size: 16px;
    }
    h1.page-title-2 {
        font-size: 70px;
        line-height: 1;
    }
}
@media screen and (max-width: 768px) {
    h2 {
        font-size: 40px;
    }
    h3 {
        font-size: 35px;
    }
    h5 {
        font-size: 23px;
        margin-bottom: 15px;
    }
    p {
        font-size: 16px;
    }
    h1.page-title-2 {
        font-size: 60px;
        line-height: 1;
    }
}
@media screen and (max-width: 576px) {
    h1, h2, h3, h5, h4, h5, h6 {
        line-height: 1.4;
    }
    h1, h2, h3, h5, h4, h5, h6, p {
        text-align: left;
    }
    h1 {
        font-size: 50px;
        margin: 10px 0;
    }
    h1.page-title {
        font-size: 90px;
    }
    h1.page-title-2 {
        font-size: 70px;
    }
    h2 {
        font-size: 40px;
    }
    h3 {
        font-size: 35px;
    }
    h5 {
        font-size: 23px;
        margin-bottom: 15px;
    }
    h6 {
        font-size: 20px;
        margin-bottom: 15px;
    }
    p {
        font-size: 16px;
        line-height: 1.8;
    }
}

/* IMAGE */
img {
    width: inherit;
    height: inherit;
}
@media screen and (max-width: 576px) {
    .image_wrapper {
        width: 340px;
    }
}

/* Form */
form {
    font-family: OpenSansReg;
    letter-spacing: .7px;
}
form label {
    font-size: 20px;
    line-height: 1;
    font-weight: 500;
    color: #454545;
    margin-bottom: 15px;
    display:table; clear: both;
}
input {
    outline: none;
    border: 0.5px solid rgba(69, 69, 69, 0.53);
    border-radius: 12px;
    font-size: 20px;
    padding: 15px 30px;
    font-family: OpenSansReg;
    background-color: #fff;
    width: 100%;
}
@media screen and (max-width: 576px) {
    input {
        border-radius: 8px;
        font-size: 18px;
        padding: 15px 20px;
        width: 100%;
    }
}
textarea {
    outline: none;
    border: 0.5px solid rgba(69, 69, 69, 0.53);
    border-radius: 12px;
    font-size: 20px;
    padding: 12px 20px;
    font-family: OpenSansReg;
    background-color: #fff;
    width: 100%;
}
textarea:focus {
    outline: none;
    border: 0.5px solid rgba(69, 69, 69, 0.53);
}
@media screen and (max-width: 576px) {
    textarea {
        height: 400px;
    }
}
input:focus {
    outline: none;
    border: 0.5px solid rgba(69, 69, 69, 0.53);
}
input[type="text"] {
    background-color: transparent;
    width: 100%;
}
input[type="number"] {
    background-color: transparent;
    width: 100%;
}
input[type="date"] {
    background-color: transparent;
    width: 100%;
}
input[type="file"] {
    background-color: transparent;
    border: none;
    padding: 0;
    border-radius: 0;
    margin-top: 20px;
}
input[type="submit"] {
    font-size: 16px;
    background-color: transparent;
    width: 300px;
    border-radius: 8px;
    padding: 20px 0px;
    letter-spacing: .7px;
    margin: 20px auto;
    cursor: pointer;
    text-align: center;
    text-transform: uppercase;
    outline: none;
}
button[type="submit"] {
    outline: none;
    cursor: pointer;
    text-align: center;
    letter-spacing: .7px;
    box-shadow: none;
}
@media screen and (max-width: 576px) {
    input[type="submit"] {
        font-size: 14px;
        width: 200px;
        padding: 15px 0px;
    }
}

select {
    width: 100%;
    padding: 15px 20px;
    margin-bottom: 15px;
    border: 0.5px solid rgba(69, 69, 69, 0.53);
    border-radius: 8px;
    font-size: 18px;
    color: #333333;
    background-color: #fff;;
    font-family: OpenSansReg;
    -webkit-appearance: none;  /*Removes default chrome and safari style*/
    -moz-appearance: none;  /*Removes default style Firefox*/
}
select::-ms-expand {
    display: none;
}
select:focus {
    outline: none;
}
option {
    width: inherit;
    padding: 15px 20px;
    margin-bottom: 15px;
    border: 1px solid rgb(197, 197, 197);
    border-radius: 8px;
    font-size: 18px;
    color: #333333;
    font-family: OpenSansReg;
}
.form-group {
    margin-bottom: 30px;
    width: inherit;
}
.form-col-1 {
    margin-bottom: 0px;
    width: 48.5%;
}
.form-col-1:nth-child(1) {
    margin-bottom: 0px;
    width: 48.5%;
    margin-right: 3%;
}
.form-group-col-2 {
    margin-bottom: 30px;
    display: grid;
    display: flex;
    flex-flow: row nowrap;
    width: inherit;
}
.form-group-col-2 .form-group {
    width: 49%;
}
.form-group-col-2 .form-group:nth-child(1) {
    margin-right: 2%;
}
@media screen and (max-width: 576px) {
    .form-col-1 {
        margin-bottom: 0px;
        width: 100%;
    }
    .form-col-1:nth-child(1) {
        margin-bottom: 30px;
        width: 100%;
        margin-right: 0%;
    }
    .form-group-col-2 {
        margin-bottom: 30px;
        display: flex;
        flex-flow: column nowrap;
        width: inherit;
    }
    .form-group-col-2 .form-group {
        width: 100%;
    }
    .form-group-col-2 .form-group:nth-child(1) {
        margin-right: 0%;
    }
}
.submit-wrapper {
    width: 100%;
    display: grid;
    margin: 20px 0;
    /* justify-items: center; */
    /* justify-content: right; */
}
.form_heading {
    font-size: 30px;
    margin-bottom: 30px;
    font-weight: 900;
}
/* Video */
.video_wrapper {
    width: 993.802816899px;
    height: 630px;
}
.video_wrapper iframe {
    width: inherit;
    height: inherit;
}
video {
    width: inherit;
    height: inherit;
}
video:focus {
    border: none;
    outline: none;
}

@media screen and (max-width: 1536px) {
    .video_wrapper {
        height: 472.5px;
        width: 745.352112674px;
    }
}
@media screen and (max-width: 576px) {
    .video_wrapper {
        height: 221.875000001px;
        width: 350px;
    }
}


/* Loader */
#loader {
    border: 5px solid rgb(179, 179, 179);
    border-radius: 50%;
    border-top: 5px solid rgb(0, 0, 0);
    border-left: 5px solid rgb(0, 0, 0);
    width: 50px;
    height: 50px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -25px;
    margin-left: -25px;
    display: none;
    z-index: 1000;
}
.loader-animation {
    display: block !important;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
}
@media screen and (max-width: 1560px) {
    #loader {
        border: 5px solid rgb(179, 179, 179);
        border-radius: 50%;
        border-top: 5px solid rgb(0, 0, 0);
        border-left: 5px solid rgb(0, 0, 0);
        width: 50px;
        height: 50px;
        position: fixed;
        top: 50%;
        left: 50%;
        margin-top: -25px;
        margin-left: -25px;
        display: none;
        z-index: 1000;
    } 
}
/* Safari */
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(720deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(720deg); }
}
/* Message */
#form-response {
    width: 100%;
    display: grid;
}
#form-response > div {
    height: 45px;
    width: 100%;
    display: grid;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    text-align: center;
    transform-origin: top;
    animation: 5s msgResponse ease-out forwards;
    border-radius: 8px;
    font-family: var(--font-5);
    font-weight: bold;
}
#form-response > div.success {
    color: #fff;
    background-color: #31AB4D;
    border: none;
}
#form-response > div.error {
    color: #fff;
    background-color: #DC3545; 
    border: none;
}
@keyframes msgResponse {
    0% {
        transform: translateY(-10px);
        opacity: 0;
    }
    10% {
        transform: translateY(10px);
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    99% {
        transform: translateY(10px);
    }
    100% {
        transform: translateY(-10px);
        opacity: 0;
    }
}
/* g-recaptcha */
.g-recaptcha > div {
    height: inherit;
}
.g-recaptcha > div > div {
    height: inherit;
}

/* signin_form */
.signin_form #email-error,
.signin_form #password-error {
    color: red;
    margin-top: 5px;
    margin-left: 5px;
    padding: 0;
}
.signin_form .g-recaptcha > div {
    margin: 5px auto;
}

/* Base end */

/******************************
******************************
******************************

Menu

******************************
******************************
******************************/
/* Menu start */
#mobList {
    display: grid;
    grid-template-rows: repeat(8, 70px);
    justify-items: flex-start;
    background-color: rgb(255, 255, 255);
    width: 50%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 101;
    padding: 100px 0;
    height: 100vh;
    transform: translateX(-101%);
    overflow-Y: scroll;
}
#mobList > .list-item {
    padding: 0 50px;
}
#mobList > .list-item a {
    font-size: 14px;
}
#navBtn {
    display: none;
}
.show_list {
    animation: .5s pull ease-in-out forwards;
}
.hide_list {
    animation: .5s push ease-in-out forwards;
}
@keyframes pull {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0%);
    }
}
@keyframes push {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
}
#bgOverlay {
    width: 100vw;
    height: 100vh;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.548);
    opacity: 0;
    z-index: -1;
}
/* Animations: Background Overlay */
.dark {
    animation: .4s dark_transition ease-in-out forwards;
}
.light {
    animation: .4s light_transition ease-in-out forwards;
    
}
@keyframes dark_transition {
    0% {
        opacity: 0;
        z-index: -1;
    }
    1% {
        z-index: 99;
    }
    100% {
        opacity: 1;
        z-index: 99;
    }
}
@keyframes light_transition {
    0% {
        opacity: 1;
        z-index: 99;
    } 
    99% {
        z-index: 99;
    }
    100% {
        opacity: 0;
        z-index: -1;
    }
}
.hide {
    opacity: 0;
}
.show {
    opacity: 1;
}
.rotate-left {
    transform: rotateZ(45deg);
    transition: .5s;
    position: absolute;
    top: 0px;
}
.rotate-left-rev {
    transform-origin: center;
    animation: .5s ani-rev-left ease-in-out forwards;
}
@keyframes ani-rev-left {
    0% {
        transform: rotateZ(45deg);
    }
    100% {
        transform: rotateZ(0deg);
    }
}
.rotate-right {
    transform: rotateZ(-45deg);
    transition: .5s;
    position: absolute;
    top: 0px;
}
.rotate-right-rev {
    transform-origin: center;
    animation: .5s ani-rev-right ease-in-out forwards;
}
@keyframes ani-rev-right {
    0% {
        transform: rotateZ(-45deg);
    }
    100% {
        transform: rotateZ(0deg);
    }
}
.show {
    opacity: 1;
}
@media screen and (max-width: 1280px) {
    #navBtn {
        display: grid;
        grid-template-rows: auto;
        grid-template-columns: 1fr;
        row-gap: 5px;
        cursor: pointer;
        width: 28px;
        height: 19px;
        margin-left: auto;
        position: relative;
        z-index: 1000;
    }
    #navBtn span {
        width: 28px;
        height: 3px;
        background-color: #4f4f4f;
    }
}
@media screen and (max-width: 576px) {
    #mobList {
        width: 80%;
    }
}
@media screen and (max-width: 414px) {
    #mobList {
        width: 85%;
    }
}



/******************************
******************************
******************************

MAIN START

******************************
******************************
******************************/
@font-face {
    font-family: AntipastoProtrial;
    src: url('../font/AntipastoPro-Bold_trial.ttf') format("truetype");
}
@font-face {
    font-family: AntipastoProExBo;
    src: url('../font/AntipastoPro-ExtraBold_trial.ttf') format("truetype");
}
@font-face {
    font-family: Genericons;
    src: url('../font/Genericons.woff2') format("woff2"),
        url('../font/Genericons.woff') format("woff");
}
@font-face {
    font-family: InterM;
    src: url('../font/Inter-Medium.woff2') format("woff2"),
        url('../font/Inter-Medium.woff') format('woff');
}
@font-face {
    font-family: InterExBo;
    src: url('../font/Inter-ExtraBold.woff2') format("woff2"),
        url('../font/Inter-ExtraBold.woff') format('woff');
}
@font-face {
    font-family: InterB;
    src: url('../font/Inter-Bold.woff2') format("woff2"),
        url('../font/Inter-Bold.woff') format('woff');
}
@font-face {
    font-family: InterR;
    src: url('../font/Inter-Regular.woff2') format("woff2"),
        url('../font/Inter-Regular.woff') format('woff');
}
@font-face {
    font-family: InterVar;
    src: url('../font/Inter-VariableFont_slnt,wght.woff2') format("woff2"),
        url('../font/Inter-VariableFont_slnt,wght.woff') format('woff');
}

/* POPPINS */
@font-face {
    font-family: PoppinsBo;
    src: url('../font/Poppins-Bold.woff2') format("woff2"),
    url('../font/Poppins-Bold.woff') format('woff');
}
@font-face {
    font-family: PoppinsExBo;
    src: url('../font/Poppins-ExtraBold.woff2') format("woff2"),
    url('../font/Poppins-ExtraBold.woff') format('woff');
}
/* OPEN SANS */
@font-face {
    font-family: OpenSansReg;
    src: url('../font/OpenSans-Regular.woff2') format("woff2"),
    url('../font/OpenSans-Regular.woff') format('woff');
}

/******************************
******************************
******************************

HEADER

******************************
******************************
******************************/
/* NAVIGATION START */
.logo_and_menu {
    width: 1300px;
    /* width: 1500px; */
    display: grid;
    grid-template-columns: 420px 880px;
    /* grid-template-columns: 420px 1080px; */
    margin: auto;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 0px;
}
.logo_and_name {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}
.logo_wrapper {
    width: 65px;
    height: auto;
}
.logo_wrapper img {
    width: inherit;
    height: inherit;
}
.name_wrapper {
    width: 250px;
    height: auto;
    margin-left: 20px;
}
.name_wrapper img {
    width: inherit;
    height: inherit;
}
.navigation_list {
    width: 900px;
    /* width: 1080px; */
    margin-left: 0px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
}
.list-item {
    padding: 20px 8px;
}
.list-item a {
    color: #171717;
    font-family: InterM;
    font-size: 13px;
    font-weight: 500;
}
/* NAVIGATION END */


@media screen and (max-width: 1280px) {
    .navigation_list {
        display: none;
    }
    .logo_and_menu {
        width: 900px;
        grid-template-columns: 300px 600px;
        padding-top: 20px;
        padding-bottom: 0px;
    }
    .logo_and_name {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
    }
    .logo_wrapper {
        width: 50px;
        height: auto;
    }
    .logo_wrapper img {
        width: inherit;
        height: inherit;
    }
    .name_wrapper {
        width: 200px;
        height: auto;
        margin-left: 10px;
    }
}
@media screen and (max-width: 768px) {
    .navigation_list {
        display: none;
    }
    .logo_and_menu {
        width: 700px;
        grid-template-columns: 300px 400px;
        padding-top: 20px;
        padding-bottom: 0px;
    }
    .logo_and_name {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
    }
    .logo_wrapper {
        width: 50px;
        height: auto;
    }
    .logo_wrapper img {
        width: inherit;
        height: inherit;
    }
    .name_wrapper {
        width: 200px;
        height: auto;
        margin-left: 10px;
    }
}
@media screen and (max-width: 576px) {
    .navigation_list {
        display: none;
    }
    .logo_and_menu {
        width: 340px;
        grid-template-columns: 200px 140px;
        padding-top: 20px;
        padding-bottom: 0px;
    }
    .logo_wrapper {
        width: 40px;
        height: auto;
    }
    .name_wrapper {
        width: 150px;
        height: auto;
        margin-left: 10px;
    }
}

/******************************
******************************
******************************

HOME

******************************
******************************
******************************/


/* Disclaimer */
.disclaimer_header {
    background-color: #FFDE59;
    text-transform: uppercase;
    display: flex;
    flex-flow: column nowrap;
    text-align: center;
    letter-spacing: .7px;
    position: relative;
    padding: 10px 0;
    color: #000;
}
.hide_disclaimer {
    display: none;
}
.close_disclaimer {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 20px;
    height: 20px;
}
#disclaimerForm {
    position: absolute;
    right: 0px;
    top: 50%;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    /* background-color: rgba(0, 0, 0, 0.109); */
}
#disclaimerForm input#close {
    position: absolute;
    z-index: 10;
    background-color: transparent;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    right: 0px;
    margin: 0;
    /* top: 0px; */
}
#disclaimerForm:before {
    content: '\f405';
    color: rgb(32, 32, 32);
    font-size: 25px;
    font-family: 'Genericons';
    position: absolute;
    top: 2px;
    right: 3px;
}
.sm-text {
    font-size: 12px;
    font-family: InterR,arial,sans-serif;
    font-weight: 900;
    padding: 10px 50px 10px 50px;
}
/* .lg-text {
    font-family: InterR,arial,sans-serif;
    font-size: 60px;
    padding: 50px 20px 10px 20px;
} */
@media screen and (max-width: 1280px) {
    .lg-text {
        font-size: 45px;
    }
}
@media screen and (max-width: 768px) {
    .lg-text {
        font-size: 35px;
    }
}
/* Section 1 */
#sectionOne {
    width: 100vw;
    /* height: 800px; */
    background-color: #fff;
    /* background-color: #FFFF99; */
    /* background-image: url('../img/bg.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0 -50px; */
}
/* Middle */
.middle {
    width: 1200px;
    display: grid;
    grid-template-columns: 700px 450px;
    margin: 30px auto 0px auto;
    column-gap: 50px;
}
.middle .left-column {
    width: 700px;
    display: grid;
    grid-template-rows: auto;
    align-items: center;
    margin-right: 0px;
}
.left_comtent {
    display: grid;
    row-gap: 10px;
    padding-top: 30px;
}
#siteTitle {
    font-family: AntipastoProExBo, Helvetica,arial,sans-serif;
    margin: 10px 0;
    line-height: 1;
    margin-right: 100px;
}
#siteTitle span {
    color: #49d0d6;
}
p.text {
    font-size: 18px;
    margin: 0;
    color: rgb(0, 0, 0);
    /* color: rgb(131, 131, 131); */
    font-family: InterR, Helvetica,arial,sans-serif;
    line-height: 1.5;
    margin-right: 100px;
}

.middle_img_wrapper {
    width: 450px;
    height: auto;
}

/* bottom */
.bottom {
    width: 1200px;
    position: relative;
    margin: 40px auto 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    column-gap: 30px;
}
.bottom_text_wrapper {
    width: 370px;
}
h6.bottom-text {
    background-color: transparent;
    font-weight: 900;
    font-size: 15px;
    padding: 20px 20px;
    text-align: center;
    font-family: InterR, Helvetica,arial,sans-serif;
    border-radius: 8px;
    color: #171717;
    border: 1px solid #171717;
}
/* @media screen and (max-width: 1366px) {
    
    
} */
@media screen and (max-width: 1280px) {
    /* Section 1 */
    #sectionOne {
        width: 100vw;
        /* height: 750px; */
        background-position: 0 0px;
    }
    /* Middle */
    .middle {
        width: 900px;
        grid-template-columns: 500px 400px;
        margin: 60px auto 0px auto;
        column-gap: 0px;
    }
    .middle .left-column {
        width: 522px;
        margin-right: 0px;
    }
    .left_comtent {
        padding-top: 30px;
    }
    #siteTitle {
        font-size: 50px;
    }
    p.text {
        font-size: 15px;
        margin: 5px 0;
        line-height: 1.5;
        margin-right: 100px;
    }
    .middle_img_wrapper {
        width: 400px;
    }
    /* bottom */
    .bottom {
        width: 900px;
        margin: 60px auto 0 auto;
        column-gap: 20px;
    }
    .bottom_text_wrapper {
        width: 285px;
    }
    h6.bottom-text {
        font-size: 13px;
        padding: 15px 20px;
    } 
}
@media screen and (max-width: 768px) {
    /* Section 1 */
    #sectionOne {
        width: 100vw;
        /* height: 650px; */
        background-position: 0 0px;
    }
    /* Middle */
    .middle {
        width: 700px;
        grid-template-columns: 350px 350px;
        margin: 60px auto 0px auto;
        column-gap: 0px;
    }
    .middle .left-column {
        width: 350px;
        margin-right: 0px;
    }
    .left_comtent {
        padding-top: 30px;
    }
    #siteTitle {
        font-size: 35px;
        margin-right: 50px;
    }
    p.text {
        font-size: 15px;
        margin: 5px 0;
        line-height: 1.5;
        margin-right: 50px;
    }
    .middle_img_wrapper {
        width: 350px;
    }
    /* bottom */
    .bottom {
        width: 700px;
        margin: 60px auto 0 auto;
        column-gap: 10px;
    }
    .bottom_text_wrapper {
        width: 220px;
    }
    h6.bottom-text {
        font-size: 12px;
        padding: 15px 10px;
    } 
}
@media screen and (max-width: 576px) {
    /* Section 1 */
    #sectionOne {
        width: 100vw;
        /* height: 750px; */
    }
    /* Middle */
    .middle {
        width: 350px;
        grid-template-columns: 1fr;
        margin: 60px auto 0px auto;
        column-gap: 0px;
    }
    .middle .left-column {
        width: 350px;
    }
    .left_comtent {
        width: 350px;
        margin-right: 0;
        row-gap: 15px;
    }
    .middle .middle_img_wrapper {
        display: none;
    }
    .left_comtent {
        padding-top: 30px;
    }
    #siteTitle {
        font-size: 50px;
        line-height: 1;
        margin: 0;
        margin-right: 20px;
    }
    p.text {
        font-size: 16px;
        line-height: 1.8;
        margin: 0;
        margin-right: 20px;
    }
    .middle_img_wrapper {
        width: 400px;
    }
    a.cta.home-link {
        width: 200px;
        margin-top: 10px;
    }
    /* bottom */
    .bottom {
        width: 350px;
        column-gap: 10px;
        row-gap: 20px;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    .bottom_text_wrapper {
        width: 350px;
    }
    h6.bottom-text {
        padding: 10px 0px;
        font-size: 13px;
        line-height: 1.5;
        /* border: none; */
        text-align: center;
        border: 1px solid #757575;
        margin-bottom: 0;
    }   
}







/* Section 2 */
#sectionTwo {
    width: 1200px;
    padding: 55px 0 0 0;
    margin: 0 auto;
}
h6.section-heading {
    font-family: InterR, Helvetica,arial,sans-serif;
    font-size: 16px;
    line-height: 1;
    font-weight: 500;
}
.about_text {
    display: grid;
    grid-template-columns: 500px 700px;
    grid-column-gap: 0px;
    padding: 20px 0 0 0;
}
.about-left {
    width: 450px;
}
h4.about-title {
    font-family: AntipastoProExBo, Helvetica,arial,sans-serif;
}
.about-desc {
    font-family: InterR, Helvetica,arial,sans-serif;
    font-size: 18px;
}
.about_image_wrapper {
    width: 1050px;
    height: auto;
    margin: 0 auto;
}
.about_image_wrapper img {
    border-radius: 30px;
}

/* Subscribe */
.home_subscr {
    background-color: #F7DF58;
    width: 1200px;
    margin: 100px auto 100px auto;
    padding: 50px;
    text-align: center;
    border-radius: 20px;
}

h2.subscr_title {
    font-size: 50px;
    line-height: 1.2;
    font-family: AntipastoProExBo, Helvetica,arial,sans-serif;
}
p.subscr_text {
    font-family: InterR, Helvetica,arial,sans-serif;
    font-size: 20px;
    line-height: 1.5;
    font-weight: 400;
    width: 500px;
    margin: auto;
    color: rgb(44, 44, 44);
}
/* Subscribe form */
form#subscrForm {
    margin: 30px auto 10px auto;
    display: flex;
    flex-flow: row nowrap;
    width: 800px;
}
input#fname, input#email {
    padding: 20px 20px;
    border-radius: 12px;
    margin-right: 20px;
    font-family: InterR, Helvetica,arial,sans-serif;
    font-size: 18px;
    width: 310px;
    border: none;
    outline: none;
    background-color: #fff;
    /* box-shadow: 0px 10px 20px 1px rgba(0, 0, 0, 0.203); */
}
button.subscr_btn, span.subscr_btn {
    padding: 20px 20px;
    font-family: InterR, Helvetica,arial,sans-serif;
    font-size: 14px;
    border-radius: 12px;
    border: none;
    outline: none;
    background-color: #000;
    color: #fff;
    cursor: pointer;
    min-width: 180px;
    text-align: center;
    box-shadow: 0px 10px 20px 1px rgba(0, 0, 0, 0.253);
}
#name-error, #email-error {
    font-size: 16px;
    font-family: InterR, Helvetica,arial,sans-serif;
    text-align: left;
    margin: 5px auto;
    color: rgb(211, 0, 0);
    padding-left: 10px;
}
.input-group {
    position: relative;
}
@media screen and (max-width: 1280px) {
    #sectionTwo {
        width: 900px;
        padding: 50px 0 0px 0;
    }
    h6.section-heading {
        font-size: 15px;
    }
    .about_text {
        grid-template-columns: 350px 550px;
        padding: 20px 0 10px 0;
    } 
    .about-left {
        padding-right: 30px;
        width: 350px;
    }
    h4.about-title {
        font-size: 25px;
        line-height: 1.5;
    }
    .about-desc {
        font-size: 14px;
        line-height: 2.3;
    }
    .about_image_wrapper {
        width: 800px;
    }
    /* Subscribe */
    .home_subscr {
        width: 900px;
        margin: 100px auto 100px auto;
        padding: 50px;
        border-radius: 20px;
    }
    p.subscr_text {
        font-size: 16px;
        line-height: 1.5;
        font-weight: 400;
        width: 400px;
    }
    /* Subscribe form */
    form#subscrForm {
        margin: 30px auto 10px auto;
        width: 700px;
    }
    input#fname, input#email {
        padding: 15px 20px;
        margin-right: 15px;
        font-size: 16px;
        width: 265px;
    }
    button.subscr_btn, span.subscr_btn {
        padding: 15px 15px;
        font-size: 13px;
        border-radius: 12px;
        min-width: 150px;
    }
}
@media screen and (max-width: 768px) {
    #sectionTwo {
        width: 700px;
        padding: 50px 0 0px 0;
    }
    h6.section-heading {
        font-size: 15px;
    }
    .about_text {
        grid-template-columns: 300px 400px;
        padding: 20px 0 10px 0;
    } 
    .about-left {
        padding-right: 30px;
        width: 300px;
    }
    h4.about-title {
        font-size: 25px;
        line-height: 1.5;
    }
    .about-desc {
        font-size: 14px;
        line-height: 2;
    }
    .about_image_wrapper {
        width: 800px;
    }
    /* Subscribe */
    .home_subscr {
        width: 700px;
        margin: 80px auto 80px auto;
        padding: 50px 20px;
    }
    h2.subscr_title {
        font-size: 35px;
    }
    p.subscr_text {
        font-size: 16px;
        line-height: 1.5;
        font-weight: 400;
        width: 400px;
    }
    /* Subscribe form */
    form#subscrForm {
        margin: 30px auto 10px auto;
        width: 600px;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        row-gap: 10px;
    }
    input#fname, input#email {
        padding: 15px 20px;
        margin-right: 15px;
        font-size: 16px;
        width: 100%;
    }
    button.subscr_btn, span.subscr_btn {
        padding: 20px 20px;
        font-size: 14px;
        border-radius: 12px;
        width: 100%;
    }
}
@media screen and (max-width: 576px) {
    #sectionTwo {
        width: 340px;
    }
    h6.section-heading {
        font-size: 15px;
    }
    .about_text {
        grid-template-rows: auto;
        grid-template-columns: 1fr;
        padding: 20px 0 10px 0;
    } 
    .about-left {
        padding-right: 20px;
        width: 340px;
    }
    h4.about-title {
        font-size: 25px;
        line-height: 1.5;
    }
    .about-desc {
        font-size: 14px;
        line-height: 2.3;
    }
    .about_image_wrapper {
        width: 100vw;
        border-radius: 0;
        margin: 50px 0 0 0;
    }
    .about_image_wrapper img {
        border-radius: 0;
    }
    /* Subscribe */
    .home_subscr {
        width: 100vw;
        margin: 30px 0;
        padding: 100px 0;
        border-radius: 0;
    }
    .subscription_text {
        width: 280px;
        margin: 0 auto;
    }
    h2.subscr_title {
        font-size: 30px;
        margin-bottom: 10px;
    }
    p.subscr_text {
        line-height: 1.5;
        font-weight: 400;
        width: 280px;
    }
    /* Subscribe form */
    form#subscrForm {
        margin: 30px auto 10px auto;
        width: 280px;
        display: grid;
        grid-template-rows: auto;
        row-gap: 20px;
    }
    input#fname, input#email {
        padding: 15px 20px;
        margin-right: 15px;
        font-size: 16px;
        width: 280px;
    }
    button.subscr_btn, span.subscr_btn {
        padding: 20px 40px;
        font-size: 13px;
        border-radius: 12px;
        width: 280px;
    }
}
/* Section 3 */
#sectionThree {
    background-color: #eef5fd;
    width: 100vw;
}
.method_inner-div {
    width: 1300px;
    padding: 150px 170px;
    text-align: center;
    margin: auto;
}
.method_inner-div h2 {
    font-family: AntipastoProExBo, Helvetica,arial,sans-serif;
}
.method_inner-div h5 {
    font-family: AntipastoProtrial, Helvetica,arial,sans-serif;
}
.method_text {
    font-family: InterR, Helvetica,arial,sans-serif;
}
.method_link-wrapper {
    margin-top: 30px;
    display: grid;
    align-items: center;
    justify-content: center;
}
.method_link-wrapper a {
    background: #f7df58;
    color: #000;
    margin: 0;
    font-family: InterR;
}
.method_link-wrapper a:hover {
    background: #fce03e;
}
@media screen and (max-width: 1536px) {
    .method_inner-div {
        width: 1200px;
        padding: 150px 170px 150px 170px;
    }
    .method_text {
        margin-bottom: 50px; 
    }
    .method_inner-div h2 {
        margin-bottom: 10px;
    }
}
@media screen and (max-width: 1280px) {
    .method_inner-div {
        width: 900px;
        padding: 100px 120px;
    }
}
@media screen and (max-width: 768px) {
    .method_inner-div {
        width: 700px;
        padding: 80px 80px;
    }
}
@media screen and (max-width: 576px) {
    .method_inner-div {
        width: 330px;
        padding: 80px 0;
    }
    .method_text {
        margin-bottom: 0px; 
    }
    .method_text p {
        margin-bottom: 10px; 
    }
    .method_link-wrapper {
        width: 100vw;
        display: grid;
        justify-content: flex-start;
        margin-top: 30px;
    }
}
/* Section 4 */
.video_inner-div {
    width: 1200px;
    padding: 150px 100px 170px 100px;
    text-align: center;
    margin: auto;
}
.video_text {
    font-family: InterR, Helvetica,arial,sans-serif;
    margin: 0 auto;
    margin-bottom: 50px;
    width: 800px;

}
.video_inner-div h2 {
    font-family: AntipastoProtrial, Helvetica,arial,sans-serif;
    margin-bottom: 0;
}
.video_wrapper {
    margin: 0 auto 60px auto;
}
@media screen and (max-width: 1280px) {
    .video_inner-div {
        width: 900px;
        padding: 100px 0 150px 0;
    }
    .video_inner-div h2 {
        margin: 0;
    }
    .video_text {
        width: 600px;
        margin: 0 auto 40px auto;
    }
}
@media screen and (max-width: 768px) {
    .video_inner-div {
        width: 700px;
        padding: 100px 0 150px 0;
    }
    .video_inner-div h2 {
        margin: 0;
    }
    .video_text {
        width: 500px;
        margin: 0 auto 40px auto;
    }
    .video_text p {
        line-height: 2;
    }
    .video_wrapper {
        height: 335px;
        width: 600px;
    }
}
@media screen and (max-width: 576px) {
    .video_inner-div {
        width: 340px;
        padding: 100px 0 150px 0;
    }
    .video_wrapper {
        height: 195px;
        width: 340px;
    }
    .video_inner-div h2 {
        margin-bottom: 0px;
        font-size: 40px;
        text-align: center;
    }
    .video_inner-div p {
        text-align: center;
    }
    .video_text {
        width: 300px;
        margin-bottom: 10px;
    }
    .video_text p {
        font-size: 12px;
    }
}
.lighten {
    background-color: #292929 !important;
}


/* @media screen and (max-width: 1280px) {
    
    
} */








/* ABOUT PAGE */
.about_top-section {
    display: grid;
    grid-template-rows: auto;
    width: 100vw;
    height: 560px;
    background-image: linear-gradient(to left, rgb(92, 225, 230, 1), rgba(255, 222, 80, 1));
}
.about_section_inner-div {
    width: 1200px;
    margin: 0 auto;
    display: grid;
    align-items: flex-end;
    grid-template-columns: auto 350px;
}
/* Page title */
.page-title {
    display: grid;
    align-items: center;
}
div.page-title {
    margin-top: 0px;
    margin-bottom: 0px;
    height: 100%;
}
h1.page-title {
    margin: 0 0 80px 0;
    font-family: AntipastoProExBo, Helvetica,arial,sans-serif;
}
h1.page-title-2 {
    margin: 0 0 80px 0;
    font-family: AntipastoProExBo, Helvetica,arial,sans-serif;
}
/* Top image */
.top_img-wrapper {
    width: 380px;
    height: auto;
    display: grid;
    align-items: flex-end;
}

/* about_middle-section */
.about_middle-section {
    width: 1200px;
    margin: auto;
    padding: 100px 0 0 0;
}
.about_middle_image-wrapper {
    width: 400px;
    height: auto;
    float: left;
    margin-right: 90px;
    margin-bottom: 25px;
}
h2.about_heading-2 {
    font-family: AntipastoProExBo, Helvetica,arial,sans-serif;
    line-height: 1.2;
    text-align: center;
    margin-bottom: 70px;
}
.about_middle_row-2 {
    margin-bottom: 100px;
}
/* About text */
h3.about_text-heading {
    font-family: PoppinsBo, Helvetica,arial,sans-serif;
    font-size: 30px;
    margin-bottom: 20px;
    line-height: 1;
}
.about_middle-text {
    font-family: InterR, Helvetica,arial,sans-serif;
    font-size: 18px;
    line-height: 2;
    font-weight: 500;
    color: #6D6D6D;
}

@media screen and (max-width: 1280px) {
    .about_section_inner-div {
        width: 900px;
        grid-template-columns: auto 350px;
    }
    /* Top image */
    .top_img-wrapper {
        width: 350px;
        height: auto;
    }
    .about_middle-section {
        width: 900px;
    }
}
@media screen and (max-width: 768px) {
    .about_top-section {
        height: 500px;
    }
    .about_section_inner-div {
        width: 700px;
        grid-template-columns: auto 300px;
    }
    /* Top image */
    .top_img-wrapper {
        width: 300px;
        height: auto;
    }
    .about_middle-section {
        width: 700px;
    }
    .about_middle_image-wrapper {
        width: 340px;
        margin-right: 50px;
        margin-bottom: 10px;
    }
    div.page-title {
        padding-right: 30px;
    }
}
@media screen and (max-width: 576px) {
    .about_top-section {
        display: grid;
        grid-template-rows: 50px auto;
    }
    .about_section_inner-div {
        width: 340px;
        grid-template-columns: auto 340px;
    }
    /* Top image */
    .top_img-wrapper {
        display: none;
    }
    .about_middle-section {
        width: 340px;
    }
    h2.about_heading-2 {
        text-align: left;
        margin-bottom: 30px;
        font-size: 50px;
    }
    .about_middle_image-wrapper {
        width: 340px;
        margin-right: 90px;
        margin-bottom: 25px;
    }
    h1.page-title {
        margin: 0 0 30px 0;
    }
}

/******************************

BOOKING

******************************/

/* Booking form */
.booking-wrapper {
    width: 1300px;
    margin: 150px auto 0 auto;
}
.booking_header {
    padding: 0 50px;
    margin-bottom: 100px;
}
.booking_page-heading {
    font-family: InterExBo;
    font-size: 45px;
    margin-bottom: 50px;
    font-weight: 900;
    letter-spacing: 1.2px;
}

.booking_text {
    font-family: InterR;
    font-size: 20px;
    line-height: 1.8;
    font-weight: 500;
    color: #6D6D6D;
}

/* BOOKING FORM */
.booking_form {
    width: inherit;
    padding: 30px 150px;
}
h4.booking_heading {
    font-family: InterR;
    font-size: 25px;
    margin-bottom: 50px;
    line-height: 1.5;
    font-weight: 500;
}

.contact_group {
    width: inherit;
}
.form_row-1 {
    display: flex;
    flex-flow: row nowrap;
}
.form_row-1 .contact_group:nth-child(1) {
    margin-right: 40px;
}
.form_row-1 .contact_group {
    width: 480px;
}
.submit_wrapper {
    display: flex;
    justify-content: center;
}
@media screen and (max-width: 1280px) {
    .booking-wrapper {
        width: 800px;
        margin: 100px auto 0 auto;
    }
    .booking_header {
        padding: 0;
    }
    /* FORM */
    .booking_form {
        padding: 0;
    }
}
/* @media screen and (max-width: 576px) {

} */




div.plans-wrapper {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    width: auto;
    margin: 50px auto;
}
h2.plan_heading {
    font-family: AntipastoProExBo;
    font-size: 70px;
    line-height: 1.2;
    letter-spacing: .7;
    text-align: center;
    margin-bottom: 30px;
}
.plan_text-wrapper {
    width: 600px;
    margin: 0 auto 30px auto;
}
p.plan_text {
    font-family: InterR;
    font-size: 20px;
    line-height: 1.6;
    font-weight: 500;
    color: #6D6D6D;
    text-align: center;
}
.plans {
    width: 95%;
    display: flex;
    flex-flow: row nowrap;
    column-gap: 20px;
    align-items: center;
    justify-content: center;
}
.pricing_plan {
    border: 2px solid #B2AFAF;
    border-radius: 20px;
    padding: 50px;
    width: 390px;
}
.plan_header {
    display: flex;
    flex-flow: column nowrap;
}
h3.pricing_plan-heading {
    font-family: AntipastoProExBo;
    font-size: 42px;
    margin-bottom: 20px;
    line-height: 1;
    font-weight: 900;
}
h5.pricing_plan-subheading {
    font-family: InterR;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 20px;
}
p.pricing_plan-text {
    font-family: InterR;
    font-size: 18px;
    line-height: 1.5;
    font-weight: 500;
    color: #6D6D6D;
    padding-bottom: 40px;
    border-bottom: 1px solid #171717;
    margin: 0;
}
.plan_body {
    padding-top: 30px;
    padding-bottom: 10px;
    border-bottom: 1px solid #171717;
}
p.plan-info {
    font-family: InterR;
    font-size: 18px;
    line-height: 1;
    font-weight: 500;
    color: #6D6D6D;
    margin-bottom: 25px;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}
p.plan-info:before {
    content: '\f418';
    color: #6D6D6D;
    font-size: 28px;
    font-family: 'Genericons';
    margin-right: 10px;
    display: grid;
}
.plan_footer {
    padding-top: 40px;
}
.price {
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-end;
}
.price_amount {
    font-family: InterExBo;
    font-size: 42px;
    margin-bottom: 0px;
    line-height: 1;
    font-weight: 900;
}
.price_duration {
    font-family: InterR;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 500;
    color: #6D6D6D;
    margin-bottom: 0;
    margin-left: 10px;
}
input.btn-subscribe {
    margin: 40px 0 0 0;
    padding: 15px 20px;
    border-radius: 8px;
    font-size: 16px;
    width: 100%;
    font-family: InterR;
    text-transform: uppercase;
}
#signup1, #signup3 {
    border: 1px solid #171717;
    background-color: #fff;
    color: #171717;
}
#signup2 {
    border: none;
    background-color: #171717;
    color: #fff;
}
@media screen and (max-width: 1536px) {
    div.plans-wrapper {
        display: flex;
        flex-flow: column nowrap;
        width: auto;
        margin: 50px auto;
    }
    h2.plan_heading {
        font-size: 65px;
        line-height: 1.2;
        letter-spacing: .7;
        margin-bottom: 30px;
    }
    p.plan_text {
        font-size: 18px;
        line-height: 1.6;
        font-weight: 500;
    }
    .plan_text-wrapper {
        width: 600px;
        margin: 0 auto 30px auto;
    }
    .pricing_plan {
        border-radius: 20px;
        padding: 50px 40px;
    }
    h3.pricing_plan-heading {
        font-size: 42px;
        margin-bottom: 20px;
        line-height: 1;
        font-weight: 900;
    }
    h5.pricing_plan-subheading {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 20px;
    }
    p.pricing_plan-text {
        font-size: 15px;
        line-height: 1.8;
        font-weight: 500;
        padding-bottom: 30px;
        margin: 0;
    }
    .plan_body {
        padding-top: 30px;
        padding-bottom: 15px;
    }
    p.plan-info {
        font-size: 15px;
        line-height: 1;
        font-weight: 500;
        margin-bottom: 15px;
    }
    .price_amount {
        font-size: 42px;
        margin-bottom: 0px;
        line-height: 1;
        font-weight: 900;
    }
    .price_duration {
        font-size: 15px;
        line-height: 1.4;
        font-weight: 500;
        margin-bottom: 0;
        margin-left: 10px;
    }
    input.btn-subscribe {
        margin: 30px 0 0 0;
        padding: 12px 20px;
        border-radius: 8px;
        font-size: 15px;
        width: 100%;
    }
}






/* Plan details */
.plan_details {
    width: 1200px;
    margin: 150px auto;
}
.plan_details h1 {
    font-family: AntipastoProExBo;
    font-size: 70px;
    margin-bottom: 60px;
}
.text-group {
    margin-bottom: 60px;
}
.text-group h6 {
    font-family: InterM;
    margin-bottom: 20px;
    color: #000000;
}
.text-group p {
    font-family: InterM;
    font-size: 20px;
    margin-bottom: 0;
    line-height: 1.8;
}
#bookingForm select {
    background: url('../img/select_2.jpg');
    background-size: contain;
    background-repeat: no-repeat;
}
#booking_submit {
    background-color: rgb(20, 20, 20);
    color: rgb(255, 255, 255);
}
#bookingForm select {
    margin-bottom: 0;
}
#name-error-c, #email-error-c, #phone-error-c,
#b_name-error, #b_email-error,
#b_telephone-error, #surname-error, #agegroup-error, 
#hear-error, #experience-error, #date-error, #lessonError {
    font-size: 16px;
    font-family: InterR;
    color: rgb(211, 0, 0);
    margin-top: 5px;
}
@media screen and (max-width: 1280px) {
    .booking-wrapper {
        margin: 50px auto;
        width: 900px;
    }
    #booking_title {
        font-size: 60px;
    }
    .booking_page-heading {
        margin-bottom: 30px;
    }
    .booking_header {
        margin-bottom: 50px;
    }

    div.plans-wrapper {
        width: 1000px;
        margin: 100px auto;
    }
    h2.plan_heading {
        font-size: 50px;
        margin-bottom: 10px;
    }
    .plan_text-wrapper {
        width: 600px;
    }
    .plans {
        width: 100%;
        display: flex;
        flex-flow: row wrap;
        column-gap: 40px;
        row-gap: 40px;
        align-items: center;
        justify-content: center;
    }
    h3.pricing_plan-heading {
        margin-bottom: 10px;
    }
    h5.pricing_plan-subheading {
        font-size: 16px;
        margin-bottom: 10px;
    }
    p.pricing_plan-text {
        padding-bottom: 20px;
    }
    .plan_footer {
        padding-top: 20px;
    }
    .pricing_plan {
        border-radius: 12px;
        padding: 55px 40px;
    }
    /* PLAN DETAILS */
    .plan_details {
        width: 900px;
        margin: 100px auto;
    }
    .plan_details h1 {
        font-size: 60px;
    }
}
@media screen and (max-width: 768px) {
    .booking-wrapper {
        margin: 50px auto;
        width: 700px;
    }

    div.plans-wrapper {
        width: 700px;
        margin: 100px auto;
    }
    h2.plan_heading {
        font-size: 50px;
        margin-bottom: 10px;
    }
    .plan_text-wrapper {
        width: 600px;
    }
    .plans {
        width: 100%;
        display: flex;
        flex-flow: column nowrap;
        row-gap: 10px;
        align-items: center;
        justify-content: center;
    }
    .pricing_plan {
        width: 320px;
        margin-bottom: 30px;
    }
    
    /* PLAN DETAILS */
    .plan_details {
        width: 700px;
        margin: 100px auto;
    }
    .plan_details h1 {
        font-size: 60px;
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 576px) {
    .booking-wrapper {
        margin: 50px auto;
        width: 340px;
    }
    #booking_title {
        font-size: 50px;
    }
    .booking_page-heading {
        margin-bottom: 30px;
    }
    .booking_header {
        margin-bottom: 50px;
    }

    div.plans-wrapper {
        width: 340px;
        margin: 50px auto;
    }
    h2.plan_heading {
        font-size: 38px;
        margin-bottom: 10px;
    }
    .plan_text-wrapper {
        width: 340px;
    }
    .plans {
        width: 100%;
        display: flex;
        flex-flow: column nowrap;
    }
    .pricing_plan {
        width: inherit;
        margin-bottom: 30px;
    }
    .pricing_plan:nth-child(1) {
        margin-right: 0px;
        margin-bottom: 20px;
    }
    .pricing_plan:nth-child(2) {
        margin-right: 0px;
        margin-bottom: 20px;
    }
    /* PLAN DETAILS */
    .plan_details {
        width: 340px;
        margin: 100px auto;
    }
    .plan_details h1 {
        font-size: 35px;
        margin-bottom: 30px;
        line-height: 1;
    }
    .text-group h6 {
        font-size: 23px;
        margin-bottom: 20px;
    }
}







.methodology_sections-wrapper,
.methodology_content-wrapper,
.benefits_content-wrapper {
    width: 900px;
}
.benefits_content-wrapper {
    margin: 100px auto;
}
.methodology_content-wrapper {
    margin: 100px auto 100px auto;
}
.methodology_sections-wrapper {
    margin: 80px auto;
}
.methodology_sections-wrapper h3,
.methodology_content-wrapper h3,
.benefits_content-wrapper h3 {
    font-family: InterExBo;
    margin: 0 0 0px 0;
}
.method_image-wrapper,
.benefits_image-wrapper {
    width: inherit;
}
.methodology_content-wrapper img,
.benefits_content-wrapper img {
    width: inherit;
    height: auto;
    margin: 30px 0 0 0;
}
.methodology_sections-wrapper h5,
.methodology_content-wrapper h5,
.benefits_content-wrapper h5 {
    font-family: InterExBo;
    margin: 30px 0 0 0;
}
.methodology_sections-wrapper p,
.methodology_content-wrapper p,
.benefits_content-wrapper p {
    font-family: InterR;
    font-size: 20px;
    line-height: 1.8;
    font-weight: 500;
    color: #6D6D6D;
    margin: 30px 0 50px 0;
}
.methodology_sections-wrapper h6,
.methodology_content-wrapper h6,
.benefits_content-wrapper h6 {
    font-family: InterExBo;
    margin: 20px 0 0 0;
}
/* Methodology subscription */
.method_subscr {
    background-color: #F7DF58;
    width: 1200px;
    margin: 50px auto 0 auto;
    padding: 50px 0 60px 0;
    text-align: center;
    border-radius: 20px;
}
.methodology_content-wrapper.two {
    margin: 100px auto;
}

@media screen and (max-width: 1280px) {
    .benefits_content-wrapper,
    .methodology_content-wrapper {
        width: 900px;
    }
    .method_subscr {
        width: 900px;
    }
    #benefits-title {
        font-size: 70px;
    }
    #methodology-title {
        font-size: 70px;
    }
}
@media screen and (max-width: 768px) {
    .benefits_content-wrapper,
    .methodology_content-wrapper {
        width: 700px;
    }
    .method_subscr {
        width: 700px;
    }
    #benefits-title,#methodology-title {
        font-size: 50px;
    }
    .methodology_sections-wrapper, 
    .methodology_content-wrapper, 
    .benefits_content-wrapper {
        width: 700px;
    }
    .benefits_image-wrapper-2,
    .method_image-wrapper_two {
        width: 580px;
    }
}
@media screen and (max-width: 576px) {
    .methodology_sections-wrapper,
    .methodology_content-wrapper,
    .benefits_content-wrapper {
        width: 340px;
        margin: 50px auto;
    }
    .methodology_sections-wrapper .section .section-content h3,
    .methodology_sections-wrapper .section .section-content h5,
    .methodology_sections-wrapper .section .section-content h6, 
    .benefits_sections-wrapper .section .section-content h3,
    .benefits_sections-wrapper .section .section-content h5,
    .benefits_sections-wrapper .section .section-content h6 {
        margin: 10px 0 20px 0;
    }
    .methodology_sections-wrapper p {
        margin: 10px 0 30px 0;
    }
    .method_image-wrapper_two, 
    .benefits_image-wrapper-2 {
        width: 340px;
        margin: 0 auto;
    }
    #methodology-title {
        font-size: 55px;
    }
    .method_subscr {
        width: 100vw;
    }
}


/******************************
******************************
******************************

CONTACT

******************************
******************************
******************************/


.contact_wrapper {
    width: 1200px;
    margin: 120px auto;
}
.contact_heading{
    font-family: InterM;
    font-size: 30px;
    margin-bottom: 40px;
    line-height: 1;
}
.contact_desc {
    font-family: InterR;
    font-size: 20px;
    line-height: 2;
    font-weight: 500;
    color: #6D6D6D;
}
.contact_main {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    margin: 120px 0;
}
.contact_side {
    width: 400px;
    margin-top: 20px;
}
#map {
    width: 400px;
    height: 450px;
    margin-top: 10px;
}
.contact_info {
    margin-bottom: 70px;
}
.contact_address {
    margin: 20px 0;
    width: 380px;
    padding: 0 20px 0 20px;
    /* text-align: center; */
}
.contact_address .info_text {
    font-size: 14px;
    color: #000000;
    line-height: 1.7;
}
h4.info_heading {
    font-family: InterM;
    font-size: 25px;
    margin-bottom: 20px;
    line-height: 1;
    font-weight: 500;
}
.info_text {
    font-family: InterR;
    font-size: 18px;
    line-height: 2;
    font-weight: 500;
    color: #6D6D6D;
    margin-bottom: 0;
}
.contact_form {
    width: 700px;
}
#contactForm {
    width: inherit;
}
.contact_form_heading {
    margin-bottom: 50px;
    font-family: InterM;
    font-size: 25px;
    line-height: 1;
    font-weight: 500;
}
.contact label {
    font-family: InterR;
}

.contact input[type="text"]:focus {
    outline: none;
}
textarea#message:focus {
    outline: none;
}
.subscribe_group {
    margin-bottom: 30px;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}
.subscribe_group input {
    margin-right: 15px;
    width: 15px;
    height: 15px;
}
.subscribe_group span {
    font-family: InterR;
    font-size: 20px;
    line-height: 1;
    font-weight: 500;
    color: #6D6D6D;
}
.contact input[type="submit"] {
    margin: 20px 0 0 0;
    width: 200px;
    font-family: InterR;
    color: #fff;
    background-color: #000;
}

@media screen and (max-width: 1536px) {
    .contact_wrapper {
        width: 1100px;
        margin: 150px auto;
    }
    .contact_side {
        width: 400px
    }
    .contact_form {
        width: 600px;
    }
}

@media screen and (max-width: 1280px) {
    .contact_wrapper {
        width: 900px;
        margin: 100px auto;
    }
    .contact_main {
        display: flex;
        flex-flow: column nowrap;
        /* justify-content: space-between; */
        margin: 0px 0;
    }
    .contact_side {
        width: 900px;
    }
    .contact_info.contact_address {
        padding: 0;
        margin: 5px 0;
    }
    .info_text {
        width: 900px;
    }
    #map {
        width: 900px;
    }
    .contact_form {
        width: 900px;
        margin: 80px auto;
    }
}
@media screen and (max-width: 768px) {
    .contact_wrapper {
        width: 700px;
        margin: 100px auto;
    }
    .contact_side {
        width: 700px;
    }
    .info_text {
        width: 700px;
    }
    #map {
        width: 700px;
    }
    .contact_form {
        width: 700px;
        margin: 80px auto;
    }
}
@media screen and (max-width: 576px) {
    #contact_title {
        font-size: 60px;
    }
    .contact_wrapper {
        width: 340px;
        margin: 50px auto;
    }
    .contact_side {
        width: 340px
    }
    #map {
        width: 340px
    }
    .contact_form {
        width: 340px;
    }
    .info_text {
        width: 340px;
    }
    .contact_address {
        width: 340px;
    }
    .contact input[type="submit"] {
        margin: 20px 0 0 0;
        padding: 18px 0;
        font-size: 14px;
        width: 180px;
    }
    .subscribe_group span {
        line-height: 1.3;
    }
}


/******************************
******************************
******************************

FAQ

******************************
******************************
******************************/

.faq_wrapper {
    width: 1200px;
    margin: 100px auto;
    display: flex;
    flex-flow: column nowrap;
}
.category {
    padding: 30px 0;
    list-style: none;
}
.cat {
    font-family: InterM;
    font-size: 25px;
    font-weight: 500;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    line-height:2;
    cursor: pointer;
    color: #171717;
}
ul.faq {
    list-style: none;
    padding: 10px 0px 10px 80px;
    display: none;
}
li.q {
    font-family: InterM;
    font-size: 20px;
    padding: 40px 0;
    line-height: 1.5;
    font-weight: 500;
    cursor: pointer;
    color: #171717;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}
li.a {
    font-family: InterR;
    font-size: 18px;
    line-height: 2;
    font-weight: 500;
    color: #6D6D6D;
    margin-bottom: 0;
    padding: 0px 100px 50px 100px;
    display: none;
}
.block {
    border-bottom: 1px solid #C2D1D9;
}
.cat:before {
    content: '\f510';
    font-size: 25px;
    color: #171717;
    float: left;
    margin-right: 20px;
    font-family: 'Genericons';
}
li.q:before {
    content: '\f510';
    font-size: 20px;
    color: #171717;
    float: left;
    margin-right: 20px;
    font-family: 'Genericons';
}
.cat.active:before {
    content: '\f50e';
    font-size: 25px;
    color: #171717;
    float: left;
    margin-right: 20px;
    font-family: 'Genericons';
}
li.q.active:before{
    content: '\f50e';
    font-size: 20px;
    color: #171717;
    float: left;
    margin-right: 20px;
    font-family: 'Genericons';
}
@media screen and (max-width: 1536px) {
    .faq_wrapper {
        width: 1000px;
        margin: 130px auto;
    }
    .cat {
        font-size: 20px;
        font-weight: 500;
        line-height:2;
    }
    ul.faq {
        padding: 10px 25px 10px 50px;
    }
    li.q {
        font-size: 17px;
        padding: 40px 0;
    }
    li.a {
        font-size: 15px;
        padding: 0px 100px 50px 100px;
    }
}



/* Create FAQ */
.faq_form {
    width: 900px;
    margin: 0 auto;
}
.faq_group {
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
}
h4.faq_form_heading {
    font-family: PoppinsBo;
    font-size: 32px;
    margin-bottom: 80px;
    line-height: 1;
    font-weight: 100;
}
.faq_group label {
    font-family: InterR;
    font-size: 23px;
    line-height: 1;
    font-weight: 500;
    color: #000;
    margin-bottom: 20px;
}
input.faq_cat {
    font-family: InterM;
    font-size: 18px;
    font-weight: 500;
    line-height:1;
    color: #171717;
    border: 1px solid rgb(197, 197, 197);
    padding: 18px 30px;
    border-radius: 8px;
}
input.question {
    font-family: InterM;
    font-size: 18px;
    line-height: 1;
    font-weight: 500;
    color: #171717;
    padding: 18px 30px;
    margin-bottom: 15px;
    border: 1px solid rgb(197, 197, 197);
    border-radius: 8px;
}
textarea.answer {
    font-family: InterM;
    font-size: 18px;
    line-height: 1.5;
    font-weight: 500;
    color: #171717;
    margin-bottom: 15px;
    padding: 18px 30px;
    border: 1px solid rgb(197, 197, 197);
    outline: none;
    border-radius: 8px;
}
.faq_form input[type="submit"] {
    font-family: InterR;
}
input.faq_cat,
input.question:focus,
textarea.answer:focus {
    outline: none; 
}
@media screen and (max-width: 1280px) {
    .faq_wrapper {
        width: 900px;
        margin: 100px auto;
    }
    .faq_wrapper li.a {
        font-size: 15px;
        line-height: 2;
        padding: 0px 30px 50px 100px;
    }
}
@media screen and (max-width: 768px) {
    .faq_wrapper {
        width: 650px;
        margin: 100px auto;
    }
    .faq_wrapper li.a {
        font-size: 15px;
        line-height: 2;
        padding: 0px 30px 50px 50px;
    }
    .faq_form {
        width: 600px;
    }
    .create_section_wrapper {
        margin: 80px auto;
    }
}
@media screen and (max-width: 576px) {
    .faq_wrapper {
        width: 340px;
        margin: 60px auto;
    }
    .admin_page-wrapper .faq_form {
        width: 340px;
        margin: 60px auto;
    }
    .admin_page-wrapper li.ques {
        font-size: 20px;
        padding: 10px 0 20px 0;
    }
    .cat {
        font-size: 18px;
    }
    .cat:before {
        font-size: 20px;
        margin-right: 10px;
    }
    .cat.active:before {
        font-size: 20px;
        margin-right: 10px;
    }
    ul.faq {
        padding: 10px 0px 10px 0px;
    }
    li.q {
        font-size: 15px;
        padding: 15px 0;
    }
    .faq_wrapper li.a {
        font-size: 14px;
        line-height: 2;
        padding: 0px 0px 20px 0px;
    }
}

/******************************
******************************
******************************

TIMETABLE

******************************
******************************
******************************/

#plans-wrapper-timetable {
    margin-top: 0;
    margin-bottom: 50px;
}
.timetable_heading {
    font-family: AntipastoProExBo;
    font-size: 60px;
    text-align: center;
    margin-top: 130px;
    margin-bottom: 80px;
}
.timetable {
    width: 1400px;
    border: 2px solid #E8F9FA;
    display: grid;
    grid-template-columns: 180px auto;
    margin: 50px auto 0 auto;
}
.column_time {
    display: grid;
    grid-template-rows: repeat(13, 80px);
}
.column_days {
    display: grid;
    grid-template-columns: repeat(6, auto);
}
.day {
    display: grid;
    grid-template-rows: repeat(13, 80px);
}
.time:nth-child(odd),
.lesson:nth-child(odd) {
    background-color: #E8F9FA;
}
.time:nth-child(even),
.lesson:nth-child(even) {
    background-color: #fff;
}
.time {
    display: grid;
    align-items: center;
    justify-items: left;
}
.lesson {
    display: grid;
    align-items: center;
    justify-items: left;
}
.time, .lesson {
    padding: 15px;
    font-size: 16px;
    color: #5B5B5B;
    font-family: OpenSansReg;
}
.time:nth-child(1) {
    font-weight: 900;
}
.lesson:nth-child(1) {
    font-weight: 900;
}
.time_field {
    padding: 5px 10px;
    border-radius: 5px;
    border: 1px solid rgb(165, 165, 165);
    outline: none;
    width: 140px;
    font-size: 13px;
    color: #5B5B5B;
    font-family: OpenSansReg;
}
.booking_link-wrapper {
    width: 1400px;
    margin: auto;
    display: grid;
    justify-content: center;
}
.book-link.timetable_book-link {
    margin: 50px 0 150px 0;
}
/* Admin */
.timetable.admin-timetable {
    margin: 50px auto 0px auto;
}
#updateTimetable {
    padding-bottom: 50px;
}
.time_field:focus {
    border: 1px solid rgb(0, 155, 202);
    outline: none;
}
.input_submit-wrapper {
    width: 100vw;
    margin: auto;
    display: grid;
    justify-content: center;
}
.update_timetable {
    margin: 50px 0;
    border: 1px solid rgb(192, 192, 192);
    background-color: #fff;
    color: rgb(85, 85, 85);
    border-radius: 12px;
    font-family: OpenSansReg;
    width: 200px;
    font-weight: 900;
}

.update_timetable:hover {
    background-color: #E8F9FA;
}
.update_timetable:focus {
    outline: none;
}
/* CLASSES */
.classes {
    width: 1200px;
    margin: 50px auto;
}
.class_group {
    padding: 30px 0;
}
h6.class_heading {
    font-family: InterM;
    margin-bottom: 20px;
    color: #000000;
}
.class_desc {
    font-family: InterM;
    font-size: 20px;
    margin-bottom: 0;
    line-height: 1.8;
}
@media screen and (max-width: 1536px) {
    #timetable-title {
        margin-bottom: 20px;
        font-family: AntipastoProExBo;
        font-size: 90px;
        line-height: 1.2;
        letter-spacing: .7;
        font-weight: 900;
        margin-bottom: 60px;
    }
    .timetable {
        width: 1200px;
        border: 2px solid #E8F9FA;
        display: grid;
        grid-template-columns: 150px auto;
        margin: 100px auto 0 auto;
    }
    .time, .lesson {
        font-size: 14px;
    }
}
@media screen and (max-width: 1280px) {
    .timetable_heading {
        font-size: 60px;
        margin-top: 100px;
        margin-bottom: 30px;
    }
    .timetable {
        width: 900px;
        margin: 0px auto 0 auto;
    }
    .time, .lesson {
        padding: 8px;
        font-size: 14px;
    }
    /* CLASSES */
    .classes {
        width: 900px;
        margin: 50px auto;
    }
}
@media screen and (max-width: 768px) {
    #plans-wrapper-timetable {
        margin-top: 0;
        margin-bottom: 20px;
    }
    #timetable-cta-2 {
        margin-bottom: 30px;
    }
    .timetable {
        width: 650px;
        margin: 0 auto;
        overflow: scroll;
        transform: rotateX(180deg);
        overflow-y: hidden;
    }
    .timetable {
        grid-template-columns: 200px 900px;
    }
    .timetable_wrapper + .cta-wrapper {
        justify-items: center;
        padding: 50px 0;
    }
    .column_time, .column_days {
        transform: rotateX(180deg);
    }
    /* CLASSES */
    .classes {
        width: 650px;
        margin: 50px auto 0 auto;
    }
    .classes + .cta-wrapper {
        /* justify-items: center; */
        margin-bottom: 50px;
    }
}
@media screen and (max-width: 576px) {
    #plans-wrapper-timetable {
        margin-top: 0;
        margin-bottom: 20px;
    }
    .timetable {
        width: 340px;
        margin: 0 auto;
        overflow: scroll;
        transform: rotateX(180deg);
        overflow-y: hidden;
    }
    .timetable_wrapper + .cta-wrapper {
        justify-items: center;
        padding: 50px 0;
    }
    div.cta-wrapper#timetable-cta-1, 
    div.cta-wrapper#timetable-cta-2 {
        justify-content: center;
    }
    div.cta-wrapper#timetable-cta-1 .cta, 
    div.cta-wrapper#timetable-cta-2 .cta {
        width: 220px;
    }
    .column_time, .column_days {
        transform: rotateX(180deg);
    }
    /* CLASSES */
    .classes {
        width: 340px;
        margin: 50px auto 0 auto;
    }
    .classes + .cta-wrapper {
        /* justify-items: center; */
        margin-bottom: 50px;
    }
    .classes + .cta-wrapper > .cta {
        width: 220px;
    }
}
/******************************
******************************
******************************

CONFIRMATION

******************************
******************************
******************************/
#subscrPopup {
    height: 820px;
    width: 100vw;
    background-image: linear-gradient(to left, rgb(92, 225, 230, 1), rgba(255, 222, 80, 1));
    color: #000;
    padding: 20px 80px 0 80px;
    display: grid;
    align-items: flex-end;
    grid-template-columns: 1fr;
    grid-template-rows: 100px 700px;
    /* row-gap: 180px; */
}
.sub_top-row {
    width: 1300px;
    margin: 10px auto;
}
.sub-logo-wrapper {
    width: 300px;
    height: auto;
}
.sub_main-row {
    width: 1300px;
    display: flex;
    flex-flow: row nowrap;
    margin: 0px auto 0 auto;
}
.sub_text-wrapper {
    width: 800px;
    margin-top: 20px;
    margin-right: 20px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
}
h2.sub_pop-title {
    font-family: PoppinsExBo;
    font-size: 40px;
}
a.back-link {
    margin: 30px 0;
    background-color: #000;
    padding: 15px 20px;
    color: #fff;
    border-radius: 8px;
    font-size: 16px;
    width: 200px;
    text-align: center;
    font-family: InterR;
    box-shadow: 0px 10px 20px 1px rgba(0, 0, 0, 0.253);
}
.sub_pop_image {
    width: 550px;
    height: auto;
    margin-top: auto;
    display: grid;
    align-items: flex-end;
}


@media screen and (max-width: 1280px) {
    #subscrPopup {
        height: 820px;
        width: 100vw;
        padding: 20px 80px 0 80px;
        grid-template-columns: 1fr;
        grid-template-rows: 100px 700px;
        /* row-gap: 180px; */
    }
    .sub_top-row {
        width: 900px;
    }
    .sub-logo-wrapper {
        width: 250px;
    }
    .sub_main-row {
        width: 900px;
    }
    .sub_text-wrapper {
        width: 400px;
        margin-top: 20px;
        margin-right: 20px;
    }
    h2.sub_pop-title {
        font-size: 30px;
    }
    a.back-link {
        margin: 30px 0;
        padding: 15px 20px;
        border-radius: 8px;
        font-size: 16px;
        width: 200px;
    }
    .sub_text-wrapper {
        width: 350px;
    }
    .sub_pop_image {
        width: 500px;
    }
}
@media screen and (max-width: 576px) {
    #subscrPopup {
        height: 100vh;
        padding: 0px 0px 0 0px;
        grid-template-columns: 1fr;
        grid-template-rows: 80px 500px;
    }
    .sub_top-row {
        width: 350px;
    }
    .sub-logo-wrapper {
        width: 250px;
    }
    .sub_main-row {
        width: 350px;
    }
    .sub_pop_image {
        display: none;
    }
}


/******************************
******************************
******************************

SIGNIN

******************************
******************************
******************************/


.signin-wrapper {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color:rgb(241, 241, 241);
}
form.signin_form, 
form.reset_form {
    /* border: 1px solid rgb(197, 197, 197); */
    width: 600px;
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    justify-items: center;
    background-color: #fff;
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 30%);
    /* background-image: linear-gradient(to left, rgb(92, 225, 230, 1), rgba(255, 222, 80, 1)); */
}
form.signin_form {
    margin-top: -300px;
    margin-left: -300px;
}
form.reset_form {
    margin-top: -250px;
    margin-left: -300px;
}
div.signin-title {
    width: inherit;
    margin: 0 0 80px 0;
}
div.reset-title {
    width: inherit;
    margin: 0 0 60px 0;
}
h1.signin-title,
h1.reset-title {
    font-family: InterR;
    font-size: 25px;
    line-height: 1;
    padding: 30px 0;
    color: #ffffff;
    font-weight: 100;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin: 0;
    background-color: rgb(44, 44, 44);
}
.signin_inner {
    width: 450px;
    margin: 0 auto;
    padding: 0 0 100px 0;
}
.signin_group {
    margin-bottom: 30px;
}
.reset_form .signin_group {
    margin-bottom: 10px;
}
input#signinUsername, input#signinPassword, .reset_pass {
    font-family: InterR;
    padding: 20px 30px;
    font-size: 18px;
    border: 1px solid rgb(197, 197, 197);
    font-weight: 100;
    letter-spacing: .5px;
}
input#signinUsername:focus,
input#signinPassword:focus,
.resetpass:focus {
    border: 1px solid rgb(0, 133, 241);
    outline: none;
}
input[type="submit"].sign_in_btn {
    /* border: 1px solid rgb(197, 197, 197); */
    /* background-color: rgb(0, 133, 241); */
    color: #fff;
    padding: 20px 40px;
    font-size: 18px;
    border-radius: 8px;
    outline: none;
    text-transform: uppercase;
    margin: 0 auto 0 auto;
    width: 100%;
    letter-spacing: 2px;
    cursor: pointer;
    border: none;
    margin-top: 10px;
    background-color: rgb(44, 44, 44);
    margin-bottom: 20px;
}
input[type="submit"].sign_in_btn:hover {
    background-color: rgb(19, 19, 19);
}
.sign_in_btn:focus {
    outline: none;
}
/* FORGEOT PASSS LINK */
.forgot_pwd {
    width: 450px;
    text-align: center;
}
.forgot_pwd > a{
    color: rgb(0, 133, 241);
}

input[type="submit"].reset_btn {
    /* border: 1px solid rgb(197, 197, 197); */
    background-color: rgb(44, 44, 44);
    color: #fff;
    padding: 20px 40px;
    font-size: 16px;
    border-radius: 8px;
    outline: none;
    text-transform: uppercase;
    margin: 0 auto 0 auto;
    width: 100%;
    letter-spacing: 2px;
    cursor: pointer;
    border: none;
    margin-top: 10px;
}
input[type="submit"].reset_btn:hover {
    background-color: rgb(19, 19, 19);
}
/* RESET MESSAGE */
.check_mail, .invalid_mail {
    text-align: center;
    padding: 10px 0;
    width: 100%;
    margin: 20px 0 0 0;
}
.check_mail {
    background-color: rgb(0, 128, 179);
}
.invalid_mail {
    background-color: rgb(179, 0, 0);
}
.check_mail p,
.invalid_mail p {
    color: #fff;
    margin: 0;
    font-size: 14px;
    text-align: center;
}
@media screen and (max-width: 576px) {
    form.signin_form {
        /* border: 1px solid rgb(197, 197, 197); */
        width: 350px;
        position: absolute;
        top: 10%;
        left: 50%;
        margin-top: 0px;
        margin-left: -175px;
    }
    div.signin-title {
        margin: 0 0 60px 0;
    }
    h1.signin-title {
        font-size: 20px;
        padding: 20px 0;
    }
    h1.reset-title {
        font-size: 18px;
    }
    .signin_inner {
        width: 280px;
        padding-bottom: 60px;
    }
    .signin_group {
        margin-bottom: 20px;
    }
    .forgot_pwd {
        width: 280px;
    }
    input#signinUsername, input#signinPassword {
        padding: 15px 20px;
        font-size: 15px;
    }
    input[type="submit"].sign_in_btn {
        padding: 15px 40px;
        font-size: 15px;
        border-radius: 8px;
        margin: 0 auto 0 auto;
        width: 100%;
        letter-spacing: 2px;
        margin-top: 10px;
        margin-bottom: 20px;
    }
    input[type="submit"].reset_btn {
        padding: 15px 40px;
        font-size: 14px;
        height: 80px;
        white-space: normal;
        line-height: 1.5;
    }
}
/******************************
******************************
******************************

MAIN END

******************************
******************************
******************************/











/******************************
******************************
******************************

FOOTER

******************************
******************************
******************************/

#sectionFive {
    background-color: #bffcf8;
    width: 100vw;
}
footer {
    width: 1200px;
    padding: 40px 0 30px 0;
    margin: auto;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}
.footer_info {
    padding: 0px 0 30px 0;
    text-align: center;
    font-family: InterR;
    font-size: 14px;
    line-height: 2;
    font-weight: 400;
    color: #4F4F4F;
}
/* LEFT COLUMN */
.column_left {
    width: 250px;
    margin-right: 0px;
}
/* MIDDLE COLUMN */
.column_middle {
    display: flex;
    flex-flow: column nowrap;
    margin-right: 0px;
    width: 300px;
}
.column_middle a {
    margin-bottom: 15px;
    font-size: 16px;
    color: #000;
    font-family: InterR;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 1px;
}
/* RIGHT COLUMN */
.right-wrapper {
    width: 300px;
    /* width: 700px; */
    display: flex;
    flex-flow: column nowrap;
    margin-left: 50px;
    margin-right: 50px;
}
.column_right {
    display: flex;
    flex-flow: column wrap;
    width: inherit;
    /* width: 700px;
    height: 100px; */
}
.footer_contact_row {
    display: flex;
    flex-flow: row nowrap;
    margin-bottom: 15px;
    width: 300px;
}
.column_left_images_wrapper {
    display: flex;
}
.column_left_images_wrapper a {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    margin-bottom: 20px;
}
.img_one {
    width: 30px;
    height: auto;
    margin-right: 10px;
}
.img_one img {
    width: inherit;
    height: inherit;
}
.img_two {
    width: 150px;
    height: auto;
}
.img_two img {
    width: inherit;
    height: inherit;
}

.column_left_text p {
    font-family: InterR;
    font-size: 20px;
    line-height: 2;
    font-weight: 400;
    color: #4F4F4F;
    margin-bottom: 20px;
}
.socials {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}
.socials a:before {
    font-family: 'Genericons';
    font-weight: 500;
    color: rgb(0, 0, 0);
    margin-right: 15px;
}
.socials .link-insta:before {
    content: '\f215';
    font-size: 24px;
}
.socials .link-facebook:before {
    content: '\f204';
    font-size: 20px;
}
.socials .link-twitter:before {
    content: '\f202';
    font-size: 20px;
}


h6.footer_contact_title {
    margin-bottom: 20px;
}
.footer_contact_title {
    color: #000;
    font-family: InterR;
    font-size: 16px;
    font-weight: 900;
    width: 300px;
}

.footer_contact_row 
div:before {
    font-family: 'Genericons';
    font-weight: 500;
    color: #4F4F4F;
    margin-right: 15px;
}
.footer_contact_row 
.contact_icon-1,
.footer_contact_row 
.contact_icon-2,
.footer_contact_row 
.contact_icon-3 {
    display: grid;
    align-items: center;
    height: 30px;
}
.footer_contact_row 
.contact_icon-1:before {
    content: '\f410';
    font-size: 25px;
}
.footer_contact_row 
.contact_icon-2:before {
    content: '\f437';
    font-size: 25px;
}
.footer_contact_row 
.contact_icon-3:before {
    content: '\f417';
    font-size: 25px;
}
.footer_contact_row 
.contact_icon-4 {
    display: flex; 
    margin-right: 21px;
}
.footer_contact_row 
.contact_icon-4 i {
    font-size: 18px;
    margin-left: 5px;
    display: flex; 
    align-items: center;
    color: #4F4F4F; 
}
.footer_contact_row p {
    font-size: 16px;
    color: rgb(88, 88, 88);
    font-family: InterR;
    font-weight: 400;
    margin: 0;
    line-height: 1.8;
}
/* payment cards */
.pay-cards {
    display: grid;
    grid-template-columns: 165px repeat(3, 60px);
    grid-template-rows: 35px;
    column-gap: 7px;
    justify-content: flex-start;
}
.pay-cards .cc:nth-child(1) {
    width: 100%;
    height: 100%;
}
.pay-cards .cc:nth-child(2),
.pay-cards .cc:nth-child(3),
.pay-cards .cc:nth-child(4),
.pay-cards .cc:nth-child(5) {
    width: 100%;
    height: 100%;
}
.pay-cards > a#comgate-link {
    width: 100%;
    height: 100%;
}
.pay-cards > a#comgate-link > #comgate-link-div {
    width: 100%;
    height: 100%;
}
.pay-cards > a#comgate-link > #comgate-link-div > img {
    width: inherit;
    height: inherit;
}

.pay-cards .cc img {
    width: inherit;
    height: inherit;
}
@media screen and (max-width: 1280px) {
    footer {
        width: 1000px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        row-gap: 20px;
    }
    .column.column_left {
        width: 400px;
        margin: 0;
    }
    .column.column_middle {
        width: 400px;
        margin: 0;
    }
    .right-wrapper {   
        width: 400px;
        grid-row-start: 2;
        grid-column-start: 1;
        grid-column-end: 3;
        margin: 0;
    }
    .footer_contact_row {
        width: 400px;
    }
    .pay-cards {
        width: 450px;
        grid-row-start: 2;
        grid-column-start: 2;
        grid-column-end: 3;
    }
}
@media screen and (max-width: 768px) {
    footer {
        width: 600px;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: auto;
        row-gap: 30px;
    }
    .column.column_left {
        width: 600px;
        margin: 0;
    }
    .column.column_middle {
        width: 600px;;
        margin: 0;
    }
    .right-wrapper {
        width: 600px;  
        grid-row-start: 3;
        grid-column-start: 1;
        grid-column-end: 2;
    }
    .pay-cards {
        width: 450px;
        grid-row-start: 4;
        grid-column-start: 1;
        grid-column-end: 2;
        width:100%;
        justify-content: center;
    }
    .column.column_right {
        height: auto;
        width: 600px;
    }
    .footer_contact_row {
        width: 600px;
    }
    .column.column_left {
        display: grid;
        justify-items: center;
    }
    .socials {
        margin-right: 0;
        width: 100px;
    }
    .column_middle {
        text-align: center;
    }
    .column_middle a {
        font-size: 15px;
    }
    .footer_contact_title {
        width: inherit;
        text-align: center;
    }
    .column_right {
        display: grid;
        justify-items: center;
    }
    .footer_contact_row {
        display: grid;
        justify-content: center;
        column-gap: 10px;
        text-align: center;
    }
    .footer_contact_row p {
        text-align: center;
    }
    .footer_contact_row div:before {
        margin-right: 0px;
    }
    .footer_contact_row .contact_icon-4 {
        margin-right: 0px;
    }
    .footer_contact_row .contact_icon-4 i {
        margin: 8px auto 10px auto;
    }
}
@media screen and (max-width: 576px) {
    footer {
        width: 340px;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: auto;
        row-gap: 30px;
    }
    .column.column_left {
        width: 340px;
        margin: 0;
    }
    .column.column_middle {
        width: 340px;;
        margin: 0;
    }
    .right-wrapper {
        width: 340px;  
        grid-column-start: 1;
        grid-column-end: 2;
    }
    .column.column_right {
        height: auto;
        width: 340px;
    }
    .footer_contact_row {
        width: 340px;
    }
    .column.column_left {
        display: grid;
        justify-items: center;
    }
    .socials {
        margin-right: 0;
        width: 60px;
    }
    .column_middle {
        text-align: center;
    }
    .column_middle a {
        font-size: 15px;
    }
    .footer_contact_title {
        width: inherit;
        text-align: center;
    }
    .column_right {
        display: grid;
        justify-items: center;
    }
    .footer_contact_row {
        display: grid;
        justify-content: center;
        column-gap: 10px;
        text-align: center;
    }
    .footer_contact_row p {
        text-align: center;
    }
    .footer_contact_row div:before {
        margin-right: 0px;
    }
    .pay-cards {
        width: 350px;
        column-gap: 7px;
        row-gap: 10px;
        grid-template-columns: 130px repeat(3, 45px);
        grid-template-rows: 28px;
        justify-content: center;
    }
}


/* Admin */
.coming_soon {
    width: 800px;
    margin: 0 auto 0 0;
    font-family: InterR;
}
.coming_soon h5 {
    margin-bottom: 15px;
    font-size: 26px;
    letter-spacing: 1.5px;
}
.coming_soon input[type="submit"] {
    font-size: 14px;
    background-color: transparent;
    width: 220px;
    border-radius: 8px;
    padding: 15px 0px;
    letter-spacing: .7px;
    margin: 10px auto;
    background: #171717;
    color: #fff;
}
.admin_page-wrapper {
    display: flex;
    flex-flow: row nowrap;
    background-color: rgb(255, 255, 255);
}
.admin_page-wrapper {
    width: 100vw;
}
/* Admin menu */
.admin_menu_top {
    padding: 12px 0;
    font-family: InterVar;
    letter-spacing: 1px;
    background-color: #171717;
    width: 100vw;
    position: fixed;
    z-index: 101;
    top: 0;
}
.admin_menu_top .inner_div {
    width: 96vw;
    /* padding: 0 30px; */
    margin: auto;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    letter-spacing: .3px;
}
.admin_menu_top .inner_div #navBtn span {
    color: #fff;
    height: 2px;
    width: 26px;
}
.admin_menu_top .inner_div #navBtn .rotate-left {
    top: 9px;
    right: 3px;
}
.admin_menu_top .inner_div #navBtn .rotate-right {
    top: 9px;
    right: 3px;
}
.admin_menu_top a {
    color: rgb(255, 255, 255);
    font-size: 14px;
    margin: 0 50px 0 0;
}
.signout_form {
    width: 60px;
    display: flex;
    justify-content: flex-start;
}
input#signout {
    color: rgb(255, 255, 255);
    font-size: 14px;
    margin: 0 50px 0 0;
    background-color: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    padding: 0;
    width: inherit;
    margin-top: -3px;
    text-transform: capitalize;
}

.side {
    width: 18vw;
    background-color: #171717;
    padding: 50px 0;
    min-height: 100vh;
}
.item-group {
    width: inherit;
    list-style: none;
}
.item-group li {
    color: #fff;
    font-family: InterVar;
    font-size: 15px;
    padding: 30px 40px;
    line-height: 1;
    font-weight: 100;
    cursor: pointer;
    background-color: #171717;
    width: inherit;
    border-top: 1px solid rgb(32, 32, 32);
    border-bottom: 1px solid rgb(32, 32, 32);
}
.child-list {
    display: none;
}
.child-list li {
    color: rgb(148, 148, 148);
    font-size: 13px;
}




.admin_main{
    margin: 0px auto;
    width: 82vw;
}
.admin_text {
    width: 82vw;
    padding: 50px 100px 20px 100px;
    background-color: #fff;
}
.admin_text h1 {
    font-family: AntipastoProExBo;
    font-size: 50px;
}
.admin_text p {
    line-height: 1.6;
    font-family: InterR;
    font-weight: 500;
    color: rgb(117, 117, 117);
    font-size: 18px;
    margin-top: 30px;
}
.box-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 120px;
    column-gap: 20px;
    width: 70vw;
    margin: 50px auto;
    row-gap: 30px;
}
.admin_main a {
    height: 100px;
}
div.box-wrapper a {
    width: 320px;
    height: 100px;
    display: grid;
    align-items: center;
    /* justify-content: center; */
    color: #ffffff;
    font-family: InterVar;
    font-size: 18px;
    font-weight: 500;
    padding: 20px 40px;
    background-color: rgb(57, 171, 236);
}
div.box-wrapper a:hover {
    background-color: rgb(40, 137, 194);
}
/* .admin_main a:nth-child(1) {
    background-color: #9c0000;
}
.admin_main a:nth-child(2) {
    background-color: #0074c2;
}
.admin_main a:nth-child(3) {
    background-color: #ffbb00;
}
.admin_main a:nth-child(4) {
    background-color: #0074c2;
} */

/* Admin */
.methodology_sections-wrapper {
    width: 900px;
    margin: 60px auto;
    letter-spacing: .4px;
}
.bg-f {
    background-color: #fff;
}

/* Edit homepage */
.edit_section_wrapper {
    margin: 0 auto;
}
.side#mobList {
    width: 18vw;
    background-color: #171717;
    display: block;
    min-height: 100vh;
    height: auto;
    position: relative;
    padding: 80px 0;
    z-index: 99;
    top: 0px;
    transform: translateX(0%);
}
@media screen and (max-width: 1280px) {
    .coming_soon {
        width: 700px;
        margin: 0 auto 0 0;
    }
    .admin_menu_top .inner_div {
        width: 96vw;
    }
    .admin_main {
        width: 900px;
        margin: 0px auto;
    }
    .side {
        display: none;
    }
    .side#mobList {
        width: 350px;
        padding: 0;
        display: block;
        position: absolute;
        padding: 100px 0 50px 0;
        transform: translateX(-100%);
    }
    .admin_text {
        width: 900px;
    }
    .box-wrapper {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 80px;
        width: 900px;
        column-gap: 10px;
        margin: 30px 0;
    }
    div.box-wrapper a {
        width: 100%;
        height: 80px;
        padding: 0;
        text-align: center;
    }

}
@media screen and (max-width: 1024px) {
    .admin_menu_top .inner_div {
        width: 94vw;
    }
}
@media screen and (max-width: 768px) {
    .admin_menu_top .inner_div {
        width: 90vw;
    }
    .admin_menu_top a {
        font-size: 14px;
        margin: 0 30px 0 0;
    }
}
@media screen and (max-width: 576px) {
    .admin_main {
        width: 350px;
        margin: 0px auto;
    }
    .admin_text {
        width: 350px;
        padding: 50px 20px;
    }
    .admin_text p {
        margin: 10px 0;
    }
    .admin_text h1 {
        font-size: 40px;
    }
    .box-wrapper {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        row-gap: 10px;
        width: inherit;
        margin: 20px 0;
    }
    div.box-wrapper a {
        width: 100%;
        height: 50px;
        font-size: 14px;
    }
    .admin_menu_top .inner_div {
        width: 340px;
    }
    .admin_menu_top a {
        font-size: 12px;
        margin: 0 15px 0 0;
    }
    .signout_form {
        width: 60px;
    }
    input#signout {
        font-size: 12px;
        margin: 0;
    }
    .side#mobList {
        width: 300px;
    }
    .coming_soon {
        width: 350px;
    }
    .coming_soon input[type="submit"] {
        font-size: 14px;
        margin: 0 0 20px 0;
        width: 180px;
        border-radius: 8px;
        padding: 15px 0px;
    }
}


/******************************
******************************
******************************

ADMIN CONTACTS

******************************
******************************
******************************/


.contacts_outer_wrapper {
    display: flex;
    flex-flow: row nowrap;
    /* background-color: #eefaff; */
    /* background-color: #fffea7; */
    width: 100vw;
    font-family: OpenSansReg;
    letter-spacing: .7px;
    color: #171717;
}
.admin_contact-wrapper {
    height: inherit;
    background-color: #ececec;
    width: 300px;
}
.contacts_column-1 {
    height: 100vh;
    background-color: #ffffff;
    overflow: scroll;
    width: 25vw;
    display: grid;
    grid-template-rows: auto;
    align-content: flex-start;
    overflow: scroll;
}
.contacts_box {
    height: 220px;
    width: 25vw;
    padding: 0px 70px;
    /* background-color: #8260E4; */
    background-color: #ffffff;
    border-bottom: 1px solid rgb(199, 199, 199);
    font-family: InterVar;
    font-size: 15px;
    line-height: 1;
    font-weight: 100;
    color: rgb(19, 19, 19);
    display: grid;
    align-items: center;
    border-bottom: 1px solid #cfcfcf;
}
.contacts_box:hover {
    cursor: pointer;
    /* background-color: rgb(241, 241, 241); */
}
.contacts_box .admin_contacts-email p {
    font-size: 16px;
    letter-spacing: .3px;
    margin-bottom: 10px;
}
.contacts_box .admin_contacts-date p {
    font-size: 12px;
    letter-spacing: .2px;
    margin-bottom: 12px;
}
.contacts_box .admin_contacts-msg p{
    font-family: OpenSansReg;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 100;
    margin: 0;
    letter-spacing: .2px;
    /* color: #000; */
}
.contacts_box p {
    margin-bottom: 0;
}
.admin_contacts-date p {
    font-size: 12px;
}

/* Display message */
#displayMsg { 
    width: 75vw;
    padding: 0vw 0vw;
    background-color: #F2F3F5;
}
.active_msg{
    width: 60vw;
    padding: 0px 0px;
    margin: 0px 7.5vw;
    /* height: 100%; */
    min-height: 100vh;
    top: 0vw;
    display: none !important;
}

.msg_header {
    margin-bottom: 30px;
    padding: 60px 150px;
    border-top: 1px solid rgb(163, 163, 163);
    border-bottom: 1px solid rgb(163, 163, 163);
    background-color: #fff;
    margin-bottom: 5px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 30%);
}
p.subscription {
    margin: 0 0 20px 0;
    color: rgb(0, 0, 0);
}
#displayMsg .admin_contacts-msg {
    background-color: #fff;
    padding: 60px 150px;
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 30%);
}
.header_column-left {
    display: grid;
    grid-template-rows: auto;
    justify-items: flex-start;
}
.header_column-right {
    display: grid;
    grid-template-rows: auto;
    justify-items: flex-end;
}
#displayMsg .admin_contacts-name {
    line-height: 1.5;
}
#displayMsg .admin_contacts-name h3 {
    font-family: OpenSansReg;
    letter-spacing: .3px;
    font-size: 16px;
    line-height: 1;
    font-weight: 100;
    margin: 0 0 8px 0;
}
#displayMsg .admin_contacts-email p {
    font-family: OpenSansReg;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 100;
    margin: 0;
    letter-spacing: .3px;
}
.admin_contacts-msg p {
    font-family: OpenSansReg;
    font-size: 17px;
    line-height: 2;
    font-weight: 100;
    margin: 0 0 20px 0;
}
p.admin_contacts-date, p.admin_contacts-time {
    font-family: OpenSansReg;
    font-size: 15px;
    margin: 0 0 0px 0;
    letter-spacing: .3px;
}
p.admin_contacts-date {
    margin-right: 3px;
}
.show {
    display: block !important;
}
.contact-booking > .side#mobList {
    display: none;
}
@media screen and (max-width: 1280px) {
    .contacts_column-1 .csv-form input[type="submit"] {
        width: 100%;
    }
    .contacts_column-1 {
        width: 30vw;
    }
    .contacts_box {
        padding: 0px 20px;
        width: 28vw;
        height: 200px;
    }
    #displayMsg {
        width: 70vw;
        padding: 0vw 0vw;
    }
    .active_msg {
        width: 70vw;
        margin: 0;
    }
    .msg_header {
        margin-bottom: 5px;
        padding: 60px 50px;
    }
    #displayMsg .admin_contacts-msg {
        padding: 60px 50px;
    }
    .contacts_box .admin_contacts-msg p {
        font-size: 13px;
    }
    .contacts_box .admin_contacts-email p {
        font-size: 14px;
        letter-spacing: .3px;
        margin-bottom: 0px;
    }
    .contacts_box .admin_contacts-date p {
        font-size: 13px;
        margin-bottom: 5px;
    }
    .msg_header {
        margin-bottom: 30px;
        padding: 60px 50px;
        margin-bottom: 5px;
        flex-flow: column nowrap;
    }
    .header_column-left {
        margin-bottom: 5px;
    }
    .header_column-right {
        justify-items: flex-start;
    }
    .contact-booking .side#mobList {
        display: block;
    }
}
@media screen and (max-width: 768px) {
    .contacts_column-1 .csv-form input[type="submit"] {
        width: 100%;
    }
    .contacts_column-1 {
        width: 30vw;
    }
    .contacts_box {
        padding: 0px 20px;
        width: 30vw;
        height: 200px;
    }
    #displayMsg {
        width: 70vw;
        padding: 0vw 0vw;
    }
}

@media screen and (max-width: 576px) {
    .admin_page-wrapper.contact-booking {
        width: 100vw;
    }
    .contacts_outer_wrapper {
        width: 700px;
        margin: auto;
    }
    .contacts_column-1 {
        width: 350px;
    }
    .contacts_column-1 .csv-form input[type="submit"] {
        width: 100%;
        font-size: 15px;
    }
    .contacts_box {
        padding: 0px 50px;
        width: 100%;
        height: 100px;
    }
    .contacts_box .admin_contacts-msg {
        display: none;
    }
    #displayMsg .admin_contacts-msg {
        padding: 60px 30px;
    }
    #displayMsg {
        width: 350px;
    }
    .active_msg {
        width: 350px;
    }
    .msg_header {
        padding: 60px 30px;
    }
}
/******************************
******************************
******************************

PAYMENTS

******************************
******************************
******************************/


.payments_wrapper {
    width: 90vw;
    margin: 50px auto;
    display: flex;
    flex-direction: column;
    font-size: 13px;
    font-family: InterVar;
    line-height: 1.4;
    font-weight: 100;
    color: rgb(255, 255, 255);
    /* box-shadow: 0 2px 4px 0 rgb(0 0 0 / 30%); */
    /* padding: 50px; */
}
.payments-title {
    font-family: InterExBo;
    font-size: 35px;
    color: rgb(63, 63, 63);
    margin-bottom: 60px;
    letter-spacing: .2px;
    font-weight: 900;
    /* border-bottom: 1px solid rgb(194, 194, 194); */
    /* padding: 0 30px 30px 30px; */
    text-align: center;
}
.payment_row {
    border: 1px solid rgb(240, 240, 240);
    display: flex;
    flex-flow: row nowrap;
    letter-spacing: .2px;
}
.payment_row .info_heading,
.payment_row .info_wrapper {
    height: 120px;
    display: flex;
    align-items: center;
    justify-items: center;
    padding: 0px 20px;
    margin: 8px;
    box-sizing: border-box;
}
.payment_row .info_heading p,
.payment_row .info_wrapper p {
    margin: 0;
    font-size: 13px;
}
.payment_row .info_heading {
    font-weight: 900;
    font-size: 15px;
    justify-content: center;
    color: #000;
}
.payment_row .info_wrapper {
    font-weight: 500;
    font-size: 13px;
    color: #000;
    justify-content: center;
}
.payment_row .info_wrapper:nth-child(even),
.payment_row .info_heading:nth-child(even) {
    background-color: #FFFFFF;
}
.payment_row .info_wrapper:nth-child(odd),
.payment_row .info_heading:nth-child(odd) {
    background-color: #F0F1F3;
}
.payment_row .info_wrapper:nth-child(1),
.payment_row .info_heading:nth-child(1) {
    background-color: #2AC1E0;
    color: #fff;
    justify-content: center;
}
.slot-sm {
    width: 100px;
    text-align: right;
}
.slot-md {
    width: 200px;
}
.slot-lg {
    width: 350px;
}
.payments_wrapper .payment_row:nth-child(1) .info_heading {
    justify-content: center !important;
}
.payments_wrapper .payment_row:nth-child(1) .info_heading p{
    font-weight: 900 !important;
}

@media screen and (max-width: 1280px) {
    .payments_wrapper {
        width: 900px;
        height: 800px;
        overflow: scroll;
    }
    .payment_row {
        width: 1250px;
    }
    .payment_row .info_heading, 
    .payment_row .info_wrapper {
        height: 100px;
        padding: 0px 20px;
        margin: 5px;
    }
    .payment_row .info_heading p, 
    .payment_row .info_wrapper p {
        font-size: 12px;
    }
    .slot-sm {
        width: 100px;
    }
    .slot-md {
        width: 150px;
    }
    .slot-lg {
        width: 250px;
    }
}
@media screen and (max-width:768px) {
    .payments_wrapper {
        width: 700px;
        height: 700px;
        overflow: scroll;
    }
}
@media screen and (max-width: 576px) {
    .payments_wrapper {
        width: 340px;
        height: 700px;
        overflow: scroll;
    }
}


/******************************
******************************
******************************

edit_create

******************************
******************************
******************************/
/* GENERAL */
.tabs {
    margin-bottom: 100px;
}
.tabs > div {
    padding: 10px 10px;
    text-align: center;
    background-color: rgb(33, 186, 247);
    color: #000;
    cursor: pointer;
    border-radius: 20px;
    color: #fff;
    width: 100%;
    font-family: InterR;
    font-size: 14px;
}
.tabs > div:hover {
    background-color: rgb(29, 159, 211);
}
.section {
    padding: 0;
    border: 1px solid rgb(182, 182, 182);
    margin-top: 50px;
    margin-bottom: 100px;
    display: grid;
}
.section-content {
    padding: 60px 80px 80px 80px;
}

.edit_section_wrapper,
.create_section_wrapper {
    width: 1100px; 
    margin: 100px auto;
}

/* FORM */
.edt_form_wrapper {
    width: 1100px;
    margin: 0 auto;
}
.form_heading.edt_form_heading {
    font-family: InterExBo;
    font-size: 35px;
    margin-bottom: 60px;
    /* font-weight: 900; */
}

/* LINKS */
.create_link {
    width: 280px;
    height: 45px;
    margin-bottom: 50px;
    display: grid;
    align-items: center;
    text-align: center;
    color: #fff;
    background-color: rgb(57, 171, 236);
    font-family: InterVar;
    font-weight: 100;
}
.links-wrapper {
    margin: 0;
    display: grid;
    justify-content: flex-end;
    margin-top: -40px;
}
.links-inner-div {
    margin: 0;
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    border-top: 1px solid rgb(182, 182, 182);;
    border-left: 1px solid rgb(182, 182, 182);;
    border-right: 1px solid rgb(182, 182, 182);;
    justify-content: center;
    padding: 10px 50px;
    background-color: #fff;
}
.edit-link,
.del-link {
    font-weight: 500;
    color: #1f1f1f;
    display: grid;
    align-items: center;
    font-size: 16px;
    font-family: InterR;
}
.edit-link {
    margin-right: 40px;
}
.edit-link {
    color: rgb(25, 75, 155);
}
.del-link {
    color: rgb(165, 14, 14);
}


/* HOME START */
.tabs.home_tabs {
    width: 1100px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 20px;
    margin: 0px auto 100px auto;
    justify-content: center;
}

/* Edit forms */
.edit_forms_wrapper {
    width: 1000px;
    /* position: relative; */
    margin: 0 auto;
}
.btm_text_row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 20px;
}
.btm_text_row input {
    width: 100%;
} 
.edit_home {
    width: inherit;
    display: none;
    padding-bottom: 200px;
}
/* HOME END */


/* BOOKING START */
.edit_booking {
    display: none;
}
.tabs.booking_tabs{
    width:1100px;
    display: flex;
    flex-flow: row wrap;
    row-gap: 10px;
    justify-content: space-between;
}
.tabs.booking_tabs > div {
    width: 360px;
    padding: 10px 0;
}
/* BOOKING END */



/* METHODOLOGY SECTION */
.method_image-wrapper_two {
    width: 750px;
}

/* BENEFITS SECTION */
.benefits_image-wrapper-2 {
    width: 750px;
}
.benefits_image-wrapper-2 img {
    width: inherit;
    height: inherit;
}
/* HOME VIDEO */
.video_wrapper-2 {
    margin: 30px auto 10px auto;
}
/* Booking/contact */
.csv-form {
    display: flex;
    flex-direction: column;
}
.csv-form input[type="submit"] {
    border: none;
    margin: 0 0px;
    padding: 15px 10px;
    width: 96%;
    font-size: 16px;
    background-color: rgb(0, 120, 218);
    color: #fff;
    border-radius: 0px;
}
/* FOOTER */
.section-content.footer_contant {
    padding: 20px 60px;
}
.section-content.footer_contant p.link_name,
.section-content.footer_contant p.permalink {
    margin: 10px 0;
}


/* Booking options: age group */
.booking_options_wrapper {
    width: 500px;
    margin: 0 auto 100px 0;
}
.booking_options_wrapper-2 {
    width: inherit;
    margin: 0 auto 100px 0;
}
.booking_options_wrapper .section,
.booking_options_wrapper-2 .section {
    padding: 20px 50px;
}
.booking_options_wrapper h2,
.booking_options_wrapper-2 h2 {
    margin-bottom: 30px;
    font-family: InterB;
    font-size: 30px;
}
.age_section {
    display: grid;
    grid-template-columns: auto 60px 60px;
    align-items: center;
    margin: 10px 0;
    /* justify-content: center; */
}
.age_section p {
    margin: 0;
    font-size: 17px;
    font-family: InterM;
    color: rgb(63, 63, 63);
}

@media screen and (max-width: 1280px) {
    /* GENERAL */
    .edit_forms_wrapper {
        width: 900px;
        margin: 0 auto;
    }
    .edit_section_wrapper,
    .create_section_wrapper {
        width: 900px;
    }
    .edt_form_wrapper {
        width: 900px;
    }
    .edit_forms_wrapper input,
    .create_section_wrapper input {
        margin-top: 5px;
    }
    .btm_text_row {
        grid-template-columns: repeat(1, 1fr);
        row-gap: 30px;
    }
    .section-content {
        padding: 30px 50px 50px 60px;
    }
    /* ABOUT */
    .section.about_section .section-content {
        padding: 50px 50px 20px 50px;
    }
    .section-content .about_heading-2 {
        margin-top: 30px;
        margin-bottom: 10px;
    }
    .section-content .about_middle_row-2 {
        margin-bottom: 50px;
    }
    .section-content .about_middle_image-wrapper {
        width: 350px;
        margin-right: 50px;
        margin-bottom: 0px;
    }
}
@media screen and (max-width: 768px) {
    /* GENERAL */
    .edit_forms_wrapper {
        width: 700px;
        margin: 0 auto;
    }
    .edit_section_wrapper,
    .create_section_wrapper {
        width: 700px;
    }
    .edt_form_wrapper {
        width: 700px;
    }
}
.permalink {
    white-space: normal;
    word-wrap:break-word
}    
.submit-wrapper input:hover {
    background-color: #E8F9FA;
}
@media screen and (max-width: 576px) {
    .section {
        width: 340px;
        border: none;
        margin-top: 10px;
        margin-bottom: 50px;
    }
    .section-content {
        padding: 10px 0px;
        width: inherit;
    }
    .create_link {
        width: 340px;
    }
    .edit-link {
        margin-right: 20px;
    }
    .section-content .about_heading-2 {
        margin-top: 0px;
        margin-bottom: 10px;
    }
    .links-wrapper {
        margin: 0;
        display: grid;
        justify-content: flex-start;
        margin-top: 0px;
    }
    .links-inner-div {
        margin: 0;
        display: flex;
        flex-flow: row nowrap;
        width: 100%;
        border-top: none;
        border-left: none;
        border-right: none;
        background-color: #fff;
        padding: 10px 0px;
    }
    .tabs.home_tabs {
        width: 340px;
        display: flex;
        flex-flow: row wrap;
    }
    .edit_section_wrapper,
    .create_section_wrapper {
        width: 340px;
        margin: 50px auto;
    }
    .edit_forms_wrapper {
        width: 340px;
        margin: 50px auto;
    }
    .edit_forms_wrapper form {
        padding-bottom: 50px;
    }
    .edit_forms_wrapper input
    .create_section_wrapper input {
        margin-top: 5px;
    }
    .btm_text_row {
        grid-template-columns: repeat(1, 1fr);
        row-gap: 30px;
    }
    .section-content .about_middle_image-wrapper {
        width: 340px;
        margin: 0 auto 25px auto;
    }
    /* ABOUT */
    .section.about_section .section-content {
        padding: 10px 0px 20px 0px;
    }
    .section-content .about_middle_row-2 {
        margin-bottom: 10px;
        width: 340px;
    }

    /* FOOTER */
    .section-content.footer_contant {
        padding: 5px 0px;
    }

    /* Booking */
    .booking_options_wrapper .section, .booking_options_wrapper-2 .section {
        padding: 15px 0px;
    }
}
/* HOME and BOOKING PAGE */
@media screen and (max-width: 1280px) {
    .tabs.home_tabs,
    .tabs.booking_tabs {
        width: 900px;
        display: flex;
        flex-flow: row wrap;
        grid-gap: 20px;
    }
    .tabs.booking_tabs > div {
        width: 100%;
    }
}
@media screen and (max-width: 768px) {
    .tabs.home_tabs,
    .tabs.booking_tabs {
        width: 700px;
    }
}
@media screen and (max-width: 576px) {
    .tabs.home_tabs,
    .tabs.booking_tabs {
        width: 350px;
        grid-gap: 10px;
    }
    .tabs.booking_tabs > div {
        width: 100%;
    }
    .edt_form_wrapper {
        width: 350px;
    }
}

/******************************
******************************
******************************

EDIT FAQs

******************************
******************************
******************************/
.faq_c {
    margin-bottom: 30px;
}
.c_name {
    font-family: InterM;
    font-size: 25px;
    font-weight: 500;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    line-height:2;
    cursor: pointer;
    color: #171717;
}
ul.faq_list {
    list-style: none;
}
li.ques {
    font-family: InterM;
    font-size: 20px;
    padding: 40px 0;
    line-height: 1;
    font-weight: 500;
    cursor: pointer;
    color: #171717;
}
li.ans {
    font-family: InterVar;
    font-size: 18px;
    line-height: 2;
    font-weight: 500;
    color: #6D6D6D;
    margin-bottom: 0;
    padding: 0px 0px 20px 0px;
}
/* .q_a {
    border-bottom: 1px solid #C2D1D9;
} */


@media screen and (max-width: 576px) {
    .admin_page-wrapper .faq_form {
        width: 340px;
        margin: 0px auto;
    }    
    h4.faq_form_heading {
        font-size: 32px;
        margin-bottom: 30px;
    }
}

/******************************
******************************
******************************

CALENDAR

******************************
******************************
******************************/
.calendar {
    display: grid;
    justify-items: center;
}
.ui-widget.ui-widget-content {
    border: none;
    margin: 5px auto 0px auto;
    width: 345px;
}
table.ui-datepicker-calendar {
    border-spacing: 0px;
}
table.ui-datepicker-calendar thead th.col {
    color: #000000;
    font-size: 15px;
}
/* HEADER */
.ui-datepicker .ui-datepicker-header {
    position: relative;
    margin: 5px auto;
}
.ui-widget-header {
    border: 1px solid #ffffff;
    background: #ffffff;
    color: #000000;
    font-weight: bold;
    font-size: 18px;
    display: grid;
    justify-items: center;
    align-items: center;
}
.ui-corner-all {
    margin-top: 2px;
}
.ui-datepicker-calendar td {
    width: 45px;
    height: 45px;
    border: 1px solid gray;
}
.ui-datepicker-calendar td a {
    display: grid;
    text-align: center;
    align-items: center;
    width: 45px;
    height: 45px;
    margin: 0;
    color: #000;
    background-color: #fff;
    border: none;
    padding: 0;
    margin: 0;
}
.ui-datepicker-calendar td span {
    display: grid;
    text-align: center;
    align-items: center;
    color: #888888;
    width: 45px;
    height: 45px;
    width: inherit;
    height: inherit;
    border: none;
    padding: 0;
    margin: 0;
}
td > a.ui-state-default {
    border: none;
    font-size: 13px;
    padding: 0;
    margin: 0;
}
.ui-state-default, 
.ui-widget-content .ui-state-default, 
.ui-widget-header .ui-state-default, 
.ui-button, html .ui-button.ui-state-disabled:hover, 
html .ui-button.ui-state-disabled:active {
    background-color: #fff;
    border: none;
}

.ui-datepicker-calendar .ui-state-default:hover,
.ui-datepicker-calendar .ui-state-active {
    background-color: rgb(0, 0, 0);
    color: #fff;
    border: none;
}

.ui-widget-header td span {
    font-weight: 900;
    font-size: 14px;
    font-family: sans-serif;
}

/******************************
******************************
******************************

ADMIN BOOKING

******************************
******************************
******************************/
.active_bk{
    width: 60vw;
    padding: 50px 150px 50px 150px;
    margin: 0px 7.5vw;
    /* height: 100%; */
    min-height: 100vh;
    top: 0vw;
    display: none !important;
    background-color: #fff;
}

.showBk {
    display: block !important;
}

.bk_border {
    border-top: 1px solid #000;
}
.booking_row {
    display: flex;
    flex-flow: row nowrap;
    border-bottom: 1px solid #000;
    width: calc(60vw - 300px);
}
.booking_row > div.booking_col_1 {
    border-left: 1px solid #000;
}
.booking_row > div.booking_col_1,
.booking_row > div.booking_col_2 {
    width: 100%;
    display: grid;
    border-right: 1px solid #000;
    align-items: center;
}

.booking_col_full {
    width: inherit;
    display: grid;
    align-items: center;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
}
.bk_title {
    font-size: 16px;
    padding: 15px 30px;
    font-weight: 900;
    border-bottom: 1px solid #000;
    background-color: rgb(243, 243, 243);
    width: 100%;
}
.bk_info {
    font-size: 16px;
    padding: 15px 30px;
    /* border-bottom: 1px solid #000; */
}
.bk_info.info_exp {
    padding: 20px 30px;
}
.booking_column-1 {
    height: 100vh;
    height: 100vh;
    background-color: #ffffff;
    overflow: scroll;
    width: 20vw;
    display: grid;
    grid-template-rows: auto;
    align-content: flex-start;
    overflow: scroll;
}
.booking_box {
    height: 120px;
    width: 20vw;
    padding: 0px 70px;
    /* background-color: #8260E4; */
    background-color: #ffffff;
    border-bottom: 1px solid rgb(199, 199, 199);
    font-family: InterVar;
    font-size: 15px;
    line-height: 1;
    font-weight: 100;
    color: rgb(19, 19, 19);
    display: grid;
    align-items: center;
    border-bottom: 1px solid #cfcfcf;
    cursor: pointer;
}
/* .booking_box > div {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
} */
.booking_box .admin_contacts-email p {
    font-size: 16px;
    letter-spacing: .3px;
    margin-bottom: 10px;
}
.booking_box .admin_contacts-date p {
    font-size: 14px;
    letter-spacing: .2px;
    margin-bottom: 0px;
}
.switchColor {
    background-color: rgb(245, 245, 245);
}
@media screen and (max-width: 1280px) {
    .booking_column-1 {
        width: 30vw;
    }
    .booking_column-1 .csv-form input[type="submit"] {
        width: 100%;
    }
    .booking_box {
        padding: 0px 40px;
        width: 28vw;
        height: 100px;
    }
    .booking_box .admin_contacts-email p {
        margin: 0;
    }
    .booking_box .admin_contacts-email p {
        margin: 0;
    }
    #displayMsg {
        width: 70vw;
        padding: 0vw 0vw;
    }
    .active_bk {
        width: 70vw;
        margin: 0;
        padding: 0 30px;
    }
    .booking_row {
        width: 100%;
    }
}
@media screen and (max-width: 768px) {
    .booking_box {
        padding: 0px 40px;
        width: 30vw;
        height: 150px;
    }
    .booking_column-1 {
        border-right: 1px solid #cfcfcf;
    }
}
@media screen and (max-width: 576px) {
    .mainWrapper {
        width: 350px;
        margin: auto;
        overflow-x: scroll;
        transform: rotateX(180deg);
    }
    .contacts_outer_wrapper {
        transform: rotateX(180deg);
    }
    .booking_column-1 {
        width: 350px;
    }
    .booking_column-1 .csv-form input[type="submit"] {
        width: 100%;
        font-size: 15px;
    }
    .booking_box {
        padding: 0px 50px;
        width: 100%;
        height: 80px;
    }
    .active_bk {
        width: 350px;
        padding: 0;
    }
    .booking_row {
        width: 95%;
    }
    .bk_title, .bk_info {
        font-size: 13px;
    }
    .booking_col_full {
        width: 100%;
    }
}