@charset "utf-8";

/* Header Form CSS -------------------------------------------------------------------- */


/* Large screens ----------- */

@media only screen and (min-width: 1824px) {
	.header-form-button {
        font-size: 16px !important;
    }
}


/* Desktops and laptops ----------- */

@media only screen and (min-width: 980px) and (max-width:1823px) {
    /*Button Styling*/
    .header-form-button {
        font-size: .9vw !important;
    }
}


/* Universal Style header contact form */

.header-container-style {
    width: 95%;
    font-size: 18px !important;
    font-weight: 100;
    padding: 8px !important;
    border-radius: 5px;
    border: none !important;
}
select.header-container-style {
    width: 100%;
    padding: 7px !important;
/* 	padding-right: 75px !important; */
}

.header-form-button {
    margin-left: 5px;
    background-color: rgba(142, 165, 12, 1) !important;
    color: #fff !important;
    padding: 8px 15px 8px 15px !important;
    text-shadow: none;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    font-weight: 100;
}

#header-grid-container {
    display: grid;
    grid-template-columns: 0.25fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "col1 col2 col3 col4 col5 col6 col7";
}

.header-form-fields {
    align-self: center;
    justify-self: start;
}

#col1 {
    grid-area: col1;
    align-self: center;
    justify-self: center;
    padding-top: 5px;
}

#col2 {
    grid-area: col2;
    align-self: center;
    justify-self: start;
    color: white;
    font-weight: 300;
}

#col3 {
    grid-area: col3;
}

#col4 {
    grid-area: col4;
}

#col5 {
    grid-area: col5;
}

#col6 {
    grid-area: col6;
	width: 98%;
}

#col7 {
    grid-area: col7;
}

.countryheader{
	font-weight:600;
	color:#8EA50B;
}


/* Footer Form CSS ------------------------------------------------------------------------- */


/* Smartphones (portrait and landscape) ----------- */

@media only screen and (min-width: 320px) and (max-width: 500px) {
    /* Styles */
    /*Button Styling*/
    .footer-form-button {
        width: 100% !important;
    }
    #footer-grid-container {
        display: grid;
        gap: 10px 0px;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(6, .5fr);
        grid-template-areas: "ftr-r1-c1" "ftr-r1-c2" "ftr-r1-c3" "ftr-r1-c4" "ftr-r1-c5" "ftr-r1-c6" ".";
    }
    .footer-form-fields {
        align-self: center;
        justify-self: start;
        width: 100%;
    }
    #ftr-r1-c1 {
        grid-area: ftr-r1-c1;
    }
    #ftr-r1-c2 {
        grid-area: ftr-r1-c2;
    }
    #ftr-r1-c3 {
        grid-area: ftr-r1-c3;
    }
    #ftr-r1-c4 {
        grid-area: ftr-r1-c4;
    }
    #ftr-r1-c5 {
        grid-area: ftr-r1-c5;
    }
    #ftr-r2-c3 {
        grid-area: ftr-r1-c6;
        align-self: center;
		justify-self: center;
        padding-top: 10px;
    }
    #ftr-r2-c1 {
        grid-area: ftr-r2-c1;
        padding-top: 10px;
        color: white;
        font-weight: 200;
    }
}


/* iPads (portrait and landscape) ----------- */

@media only screen and (min-width: 501px) and (max-width: 1024px) {
    /* Styles */
    /*Button Styling*/
    .footer-form-button {
        width: 80% !important;
    }
    #footer-grid-container {
        display: grid;
        gap: 10px 0px;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(4, .5fr);
        grid-template-areas: "ftr-r1-c1 ftr-r1-c2" "ftr-r1-c3 ftr-r1-c4" "ftr-r1-c5 ftr-r1-c5" "ftr-r2-c3 .";
    }
    .footer-form-fields {
        align-self: center;
        justify-self: start;
        width: 95%;
    }
    #ftr-r1-c1 {
        grid-area: ftr-r1-c1;
    }
    #ftr-r1-c2 {
        grid-area: ftr-r1-c2;
    }
    #ftr-r1-c3 {
        grid-area: ftr-r1-c3;
    }
    #ftr-r1-c4 {
        grid-area: ftr-r1-c4;
    }
    #ftr-r1-c5 {
        grid-area: ftr-r1-c5;
		width: 98%;
    }
    #ftr-r2-c3 {
        grid-area: ftr-r2-c3;
        align-self: center;
        padding-top: 10px;
		
    }
    #ftr-r2-c1 {
        grid-area: ftr-r2-c1;
        padding-top: 10px;
        color: white;
        font-weight: 200;
    }
}


/* Desktops and laptops ----------- */

@media only screen and (min-width: 1024px) {
    /* Styles */
    /*Button Styling*/
    .footer-form-button {
        font-size: .9vw !important;
        width: 100%;
        margin-top: 25px;
    }
    #footer-grid-container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        grid-template-areas: "ftr-r1-c1 ftr-r1-c2 ftr-r1-c3 ftr-r1-c4 ftr-r1-c5" ". . ftr-r2-c3 . .";
    }
    .footer-form-fields {
        align-self: center;
        justify-self: center;
        width: 95%;
    }
    #ftr-r1-c1 {
        grid-area: ftr-r1-c1;
    }
    #ftr-r1-c2 {
        grid-area: ftr-r1-c2;
    }
    #ftr-r1-c3 {
        grid-area: ftr-r1-c3;
    }
    #ftr-r1-c4 {
        grid-area: ftr-r1-c4;
    }
    #ftr-r1-c5 {
        grid-area: ftr-r1-c5;
		width: 98%;
    }
    #ftr-r2-c3 {
        grid-area: ftr-r2-c3;
        align-self: center;
    }
    
    #ftr-r2-c1 {
        grid-area: ftr-r2-c1;
        color: white;
        font-weight: 200;
    }
}


/* Large screens ----------- */

@media only screen and (min-width: 1824px) {
    /* Styles */
    .footer-container-style {
        width: 95% !important;
    }
    .footer-form-button {
        font-size: 18px !important;
    }
    #footer-grid-container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        grid-template-areas: "ftr-r1-c1 ftr-r1-c2 ftr-r1-c3 ftr-r1-c4 ftr-r1-c5" ". . ftr-r2-c3 . .";
    }
    .footer-form-fields {
        align-self: center;
        justify-self: start;
    }
    #ftr-r1-c1 {
        grid-area: ftr-r1-c1;
    }
    #ftr-r1-c2 {
        grid-area: ftr-r1-c2;
    }
    #ftr-r1-c3 {
        grid-area: ftr-r1-c3;
    }
    #ftr-r1-c4 {
        grid-area: ftr-r1-c4;
    }
    #ftr-r1-c5 {
        grid-area: ftr-r1-c5;
		width: 98%;
    }
    #ftr-r2-c3 {
        grid-area: ftr-r2-c3;
        align-self: center;
    }
    #ftr-r2-c1 {
        grid-area: ftr-r2-c1;
        color: white;
        font-weight: 200;
    }
}


/* Universal Styles Footer --------*/

.footer-container-style {
    width: 100%;
    font-size: 18px !important;
    font-weight: 100;
    padding: 8px !important;
    border-radius: 5px;
    border: none !important;
}


/*Button Styling*/

.footer-form-button {
    background-color: rgba(142, 165, 12, 1) !important;
    color: #fff !important;
    padding: 10px 15px 10px 15px !important;
    text-shadow: none;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    font-weight: 100;
}


/* Contact us Form CSS ------------------------------------------------------------------- */


/* Smartphones (portrait and landscape) ----------- */

@media only screen and (min-width: 320px) and (max-width: 500px) {
    #contact-us-grid-container {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: .5fr .5fr .5fr .5fr .5fr .5fr .5fr .5fr .5fr 1fr .5fr;
        gap: 0px 0px;
        grid-template-areas: "ctu-r1-c1" "ctu-r1-c2" "ctu-r2-c1" "ctu-r2-c2" "ctu-r3-c1" "ctu-r3-c2" "ctu-r4-c1" "ctu-r4-c2" "ctu-r5-c1" "ctu-r6-c1" "ctu-r7-c1";
    }
    .rx2-contact-us-form-field {
        width: 95%;
    }
    .rx2-contact-us-form-select {
        width: 95%;
    }
    .rx1-contact-us-form-field {
        width: 95%;
    }
    .rx1-contact-us-form-select {
        width: 95%;
    }
    #ctu-r1-c1 {
        grid-area: ctu-r1-c1;
    }
    #ctu-r1-c2 {
        grid-area: ctu-r1-c2;
    }
    #ctu-r2-c1 {
        grid-area: ctu-r2-c1;
    }
    #ctu-r2-c2 {
        grid-area: ctu-r2-c2;
    }
    #ctu-r3-c1 {
        grid-area: ctu-r3-c1;
    }
    #ctu-r3-c2 {
        grid-area: ctu-r3-c2;
    }
    #ctu-r4-c1 {
        grid-area: ctu-r4-c1;
    }
    #ctu-r4-c2 {
        grid-area: ctu-r4-c2;
    }
    #ctu-r5-c1 {
        grid-area: ctu-r5-c1;
    }
    #ctu-r6-c1 {
        grid-area: ctu-r6-c1;
    }
    #ctu-r7-c1 {
        grid-area: ctu-r7-c1;
        justify-self: end;
        align-self: center;
        padding-right: 5%;
    }
}


/* Desktops and laptops ----------- */

@media only screen and (min-width: 501px) {
    #contact-us-grid-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: .5fr .5fr .5fr .5fr .5fr 1fr .5fr;
        gap: 0px 0px;
        grid-template-areas: "ctu-r1-c1 ctu-r1-c2" "ctu-r2-c1 ctu-r2-c2" "ctu-r3-c1 ctu-r3-c2" "ctu-r4-c1 ctu-r4-c2" "ctu-r5-c1 ctu-r5-c1" "ctu-r6-c1 ctu-r6-c1" ". ctu-r7-c1";
    }
    .rx2-contact-us-form-field {
        width: 90%;
    }
    .rx2-contact-us-form-select {
        width: 90%;
    }
    .rx1-contact-us-form-field {
        width: 95%;
    }
    .rx1-contact-us-form-select {
        width: 95%;
    }
    #ctu-r1-c1 {
        grid-area: ctu-r1-c1;
    }
    #ctu-r1-c2 {
        grid-area: ctu-r1-c2;
    }
    #ctu-r2-c1 {
        grid-area: ctu-r2-c1;
    }
    #ctu-r2-c2 {
        grid-area: ctu-r2-c2;
    }
    #ctu-r3-c1 {
        grid-area: ctu-r3-c1;
    }
    #ctu-r3-c2 {
        grid-area: ctu-r3-c2;
    }
    #ctu-r4-c1 {
        grid-area: ctu-r4-c1;
    }
    #ctu-r4-c2 {
        grid-area: ctu-r4-c2;
    }
    #ctu-r5-c1 {
        grid-area: ctu-r5-c1;
    }
    #ctu-r6-c1 {
        grid-area: ctu-r6-c1;
    }
    #ctu-r7-c1 {
        grid-area: ctu-r7-c1;
        justify-self: end;
        align-self: center;
        padding-right: 5%;
    }
}


/* Universal styles for Contact Us Page Form */

 ::placeholder {
    color: black;
}

.contact-us-form-button {
    width: 100% !important;
    background-color: rgba(142, 165, 12, 1) !important;
    color: #fff !important;
    padding: 10px !important;
    text-shadow: none;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    font-weight: 100;
}

.ctu-form-style {
    font-size: 18px !important;
    font-weight: 100;
    padding: 8px !important;
    border-radius: 5px;
    border-width: 1px;
}


/* Universal Code for all forms ------------------------------------ */

/* disables weird issues with the select dropdown */
.disablewebkit{
	-webkit-appearance:none;
}


/* Triggers loading dots when the form has been submitted */

.loading:after {
    content: '.';
    animation: dots 1s steps(5, end) infinite;
}

@keyframes dots {
    0%,
    20% {
        color: rgba(0, 0, 0, 0);
        text-shadow: .25em 0 0 rgba(0, 0, 0, 0), .5em 0 0 rgba(0, 0, 0, 0);
    }
    40% {
        color: white;
        text-shadow: .25em 0 0 rgba(0, 0, 0, 0), .5em 0 0 rgba(0, 0, 0, 0);
    }
    60% {
        text-shadow: .25em 0 0 white, .5em 0 0 rgba(0, 0, 0, 0);
    }
    80%,
    100% {
        text-shadow: .25em 0 0 white, .5em 0 0 white;
    }
}