/* 
Moon Disk 

bright yellow f2d13e
musty yellow d6b831
burnt sienna db6831

*/

@font-face {
    font-family: "megrim";
    src: url(Megrim-Regular.ttf);
    font-display: swap;
}

@font-face {
    font-family: "montserrat";
    src: url(Montserrat-Regular.ttf);
    font-display: swap;
}

#backofficeresult {
    width: 90vw;
    height: 80vh;
    /*padding: 50px;
    margin: 20px;*/
}

#backofficeresultsh2 {
    padding: 5px;
    margin: 0px;
    font-family: montserrat;
    font-weight: normal;
}

.currencyinput {
    font-family: "montserrat";
    color: #fff;
    font-size: 23px;
    /*border: 1px inset #ccc;*/
}
.currencyinput input {
    border: 0;
}

a:link, a:visited {
    color: #d6b831;
}

a:hover {
    color: #fff;
}

p, ul {
    font-family: "montserrat";
    font-weight: normal;
}

h2 {
    font-family: "megrim";
    font-weight: normal;
}

.logo {
    position:fixed; 
	top:0; 
	left:0;

    height: 135px;
    width: 135px;
}

/*.center and topcenter are generally h1*/
.center {
    font-family: "megrim";
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 4rem;
    color: white;
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    position: relative;

    opacity: 0;
    /*position: relative;*/
    bottom: -40px; /* was -40px*/
    transition: all 0.8s ease-out;
}

.topcenter {
    font-family: "megrim";
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 4rem;
    color: white;
    top: 10%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    position: relative;

    opacity: 0;
    /*position: relative;*/
    bottom: -40px; /* was -40px*/
    transition: all 0.8s ease-out;
}

.submit-button:hover {
    color: #fff;
    background-color: #d6b831; /*was 616467*/
}

.submit-button {
    font-family: "megrim";

    /*display: inline-block;*/
    outline: none;
    cursor: pointer;
    font-size: 28px; /* was 14px*/
    line-height: 1;
    border-radius: 500px;
    transition-property: background-color,border-color,color,box-shadow,filter;
    transition-duration: .3s;
    border: 1px solid transparent;
    letter-spacing: 2px;
    min-width: 250px; /*was 160px*/
    /*text-transform: uppercase;*/
    white-space: normal;
    /*font-weight: 700;*/
    text-align: center;
    padding: 16px 14px 18px;
    /*padding: 25px;*/
    text-align: center;
    justify-content: center;
    vertical-align: middle;
    color: #ffffff;
    box-shadow: inset 0 0 0 2px #ffffff;
    background-color: transparent;
    height: 60px; /*was 48px*/
    font-weight: normal;

    display: flex; /* was inline*/
    align-items: center;
    left: 50%;
    top: 15%;
    transform: translateY(-50%);/*was 30*/
    -ms-transform: translateY(-50%);/*was 30*/

    -webkit-transform: translateY(50%);

    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: relative;
}

body, html {
    scroll-behavior: smooth;
    height: 100%;
    margin: 0;
}
  
.home1 {
    /* The image used */
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("homestart.webp");

    /* Full height */
    height: 100vh; 

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg1 {
    /* The image used */
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("europe.webp");

    /* Full height */
    height: 100vh; 

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg2 {
    /* The image used */
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("yurts.webp");

    /* Full height */
    height: 100vh; 

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.holiday {
    /* The image used */
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("holiday.webp");

    /* Full height */
    height: 100vh; 

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.travel {
    /* The image used */
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("travel.webp");

    /* Full height */
    height: 100vh; 

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.portal {
    /* The image used */
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("portal.webp");

    /* Full height */
    height: 100vh; 

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.blackfriday {
    /* The image used */
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("naturesquare.webp");

    /* Full height */
    height: 100vh; 

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.contactformdiv {
    /* The image used */
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("contactform.webp");

    /* Full height */
    height: 100vh;

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

label {
    text-align: center;
    align-items: center;
    font-family: montserrat;
    color: #fff;
    font-size: 20px;
}

select, option {
    font-family: montserrat;
    outline: none;
    cursor: pointer;
    font-size: 18px; /* was 14px*/
    line-height: 1;
    border-radius: 500px;
    /*transition-property: background-color,border-color,color,box-shadow,filter;
    transition-duration: .3s;*/
    border: 1px solid transparent;
    /*letter-spacing: 2px;*/
    min-width: 160px; /*was 160px*/
    /*text-transform: uppercase;*/
    white-space: normal;
    font-weight: 200px; /*was 700*/
    text-align: center;
    padding: 16px 14px 18px;
    margin: 5px;
    text-align: center;
    justify-content: center;
    vertical-align: middle;
    color: #ffffff;
    box-shadow: inset 0 0 0 2px #ffffff;
    background-color: transparent;
    height: 24px; /*was 48px*/
}

input {
    font-family: montserrat;
    outline: none;
    cursor: pointer;
    font-size: 18px; /* was 14px*/
    line-height: 1;
    border-radius: 500px;
    transition-property: background-color,border-color,color,box-shadow,filter;
    transition-duration: .3s;
    border: 1px solid transparent;
    /*letter-spacing: 2px;*/
    min-width: 160px; /*was 160px*/
    /*text-transform: uppercase;*/
    white-space: normal;
    font-weight: 200px; /*was 700*/
    text-align: center;
    padding: 16px 14px 18px;
    margin: 5px;
    text-align: center;
    justify-content: center;
    vertical-align: middle;
    color: #ffffff;
    box-shadow: inset 0 0 0 2px #ffffff;
    background-color: transparent;
    height: 24px; /*was 48px*/
}

.contactform {
    display: inline-block; /* was flex, before then inline*/
    /*align-items: center;*/
    /*align-items: right;*/
    /*align-self: right;*/
    /*Make bubbles the way client wanted*/
    text-align: center;
    left: 50%;
    top: 10%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);

    -webkit-transform: translateY(-50%);
    -webkit-transform: translateX(-50%);

    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: relative;
}

.contact:hover{
    color: #fff;
    background-color: #d6b831;
}

.contact {
    font-family: "megrim";

    /*display: inline-block;*/
    outline: none;
    cursor: pointer;
    font-size: 28px; /* was 14px*/
    line-height: 1;
    border-radius: 500px;
    transition-property: background-color,border-color,color,box-shadow,filter;
    transition-duration: .3s;
    border: 1px solid transparent;
    letter-spacing: 2px;
    min-width: 250px; /*was 160px*/
    text-transform: uppercase;
    white-space: normal;
    font-weight: 700;
    align-items: center;
    padding: 16px 14px 18px;
    /*padding: 25px;*/
    text-align: center;
    justify-content: center;
    vertical-align: middle;
    color: #ffffff;
    box-shadow: inset 0 0 0 2px #ffffff;
    background-color: transparent;
    height: 60px; /*was 48px*/

    display: flex; /* was inline*/
    align-items: center;
    left: 50%;
    top: 50%;
    transform: translateY(-50%);
    transform: translateX(-50%);

    -ms-transform: translateY(-50%);
    -ms-transform: translateX(-50%);
    position: relative;
}

img {
    height: 100vh;
    background-size: cover;
}

.show{
    opacity: 1;
    bottom: 0;
}

footer {
    position: relative;
    height: 0px;
    width: 100%;
    background-color: #333333;
}

.marketing-consent {
    position: absolute;
    width: 100%;
    color: #fff;
    line-height: 10px;
    font-size: 0.7em;
    text-align: center;
    /*bottom: 20px;*/
}

p.copyright {
    position: absolute;
    width: 100%;
    color: #fff;
    /*line-height: 40px;*/
    font-size: 1em;
    text-align: center;
    bottom:0;
}

#error, #result {
    font-family: "montserrat";
    color: #fff;
    text-align: center;
    font-weight: normal;
}

/*@media screen and (min-width: 768px){*/
/*==================CSS for Small Modile Device like Phones==================*/
@media screen and (max-width: 700px){ /*was 800*/
    #backofficeresult {
        width: 90vw;
        height: 80vh;
        /*padding: 50px;
        margin: 20px;*/
    }

    #backofficeresult:link {
        color: #d6b831;
    }

    #backofficeresultsh2 {
        padding: 3px;
    }

    h1 {
      font-size: 8rem;
      font-weight: normal;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeSpeed;
    }
    .contact {
        font-weight: normal;
    }

    .logo {
        position:fixed; 
        top:0; 
        left:0;

        /*-webkit-transform: translateX(50%);*/
        /*transform: translateX(calc(100vw - 150px));*/
        /*-ms-transform: translateX(-50%);*/

        height: 135px;
        width: 135px;
    }

    .radiobuttonlabel {
        min-width: 50px;
    }

    span {
        font-family: montserrat;
        outline: none;
        cursor: pointer;
        font-size: 18px; /* was 14px*/
        line-height: 1;
        border-radius: 500px;
        transition-property: background-color,border-color,color,box-shadow,filter;
        transition-duration: .3s;
        border: 3px solid transparent;
        /*letter-spacing: 2px;*/
        min-width: 160px; /*was 160px*/
        /*text-transform: uppercase;*/
        white-space: normal;
        font-weight: 200px; /*was 700*/
        text-align: center;
        padding: 10px 8px 12px;
        margin: 5px;
        text-align: center;
        justify-content: center;
        vertical-align: middle;
        color: #ffffff;
        box-shadow: inset 0 0 0 2px #ffffff;
        background-color: transparent;
        height: 24px; /*was 48px*/
    }

    input {
        display: inline-block;
        padding: 10px 8px 12px;
        border: 2px solid #fff;
        outline: #fff;
        outline-width: #fff;
        box-shadow: #fff;
        border-color: #fff;
    }

    .topcenter {
        padding-top: 100px;
    }

    .contactform {
        /*padding: 40px;
        margin: 40px;*/
        padding-top: 10px;
        display: inline-block; /* was flex, before then inline*/
        /*align-items: center;*/
        align-items: center;
        align-self: center;
        /*Make bubbles the way client wanted*/
        text-align: center;
        justify-content: center;
        /*left: 50%;*/
        top: 10%;
        transform: translateY(-50%);
        transform: translateX(-50%);

        -webkit-transform: translateY(-50%);
        -webkit-transform: translateX(-50%);
        position: relative;
    }

    .submit-button {
        top: 5%;
    }
}

/*==================CSS for iPads and Tablets==================*/
@media screen and (min-width: 701px) and (max-width: 1025px){
    h1 {
        font-size: 6rem;
        font-weight: normal;
    }

    .logo {
            position:fixed; 
            top:0; 
            left:0;
    
            height: 135px;
            width: 135px;
    }
  
    input {
        display: inline-block;
        padding: 10px 8px 12px;
        border: 2px solid #fff;
        outline: #fff;
        outline-width: #fff;
        box-shadow: #fff;
        border-color: #fff;
    }

    .topcenter {
        padding-top: 100px;
    }

    .contactform {
        /*padding: 40px;
        margin: 40px;*/
        padding-top: 30px;
        display: inline-block; /* was flex, before then inline*/
        /*align-items: center;*/
        align-items: center;
        align-self: center;
        /*Make bubbles the way client wanted*/
        text-align: center;
        justify-content: center;
        /*left: 50%;*/
        top: 10%;
        transform: translateY(-50%);
        transform: translateX(-50%);

        -webkit-transform: translateY(-50%);
        -webkit-transform: translateX(-50%);
        position: relative;
    }

    .submit-button {
        top: 5%;
    }  
}