﻿body {
    font-family: 'Heebo','Vardana', Arial;
}

/* The Modal (background) */
.ContactModal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 20; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    margin: 0%;
}

/* Modal Content */
    .ContactModal .modal-content {
        position: fixed;
        margin: 0%;
        padding: 0px;
        width: 26%;
        bottom: 0;
        margin-right: 10px;
        margin-bottom: 10px;
        /*max-width: 492px;
max-height: 390px;*/
        background-color: rgba(24, 39, 46, 0.7686274509803922);
        /* background-color: #fa9900; */
        /*border: 1px solid #888;*/
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        border-radius: 42px;
        /*-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s;*/
    }

@media screen and (max-width: 1250px) {	
	.ContactModal .modal-content {
		/* margin: 0 2%; */
		width: 40%;
	}
}

@media screen and (max-width: 880px) {	
	.ContactModal .modal-content {
		margin: 0 2%;
		width: 96%;
	}
	
	.ContactModal .contact-modal-body {
		padding: 1% 0;
	}
	
	.ContactModal h2 {
		font-size: 18px;
	}
	
	.ContactModal .contact-input, .txtRemarks {
		padding: 5px;
	}
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }

    to {
        top: 0;
        opacity: 1
    }
}

@keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }

    to {
        top: 0;
        opacity: 1
    }
}

/* The Close Button */
.closeContact {
    color: #fff;
    font-size: 28px;
    font-weight: bold;
}

    .closeContact:hover,
    .closeContact:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

.modal-header {
    padding: 0px !important;
    padding: 2px 16px;
    background-color: #fa9900 ;
    color: white;
    padding-right: 10px !important;
    border-bottom: 0px solid;
    border-radius: 0px;
    /* border-top-left-radius: 42px; */
    /* border-top-right-radius: 42px; */
	
	border-bottom: 1px solid #e9ecef;
    border-top-left-radius: .3rem;
    border-top-right-radius: .3rem;
    border: 1px solid #4d4d4d;
	border-top: 2px solid #4d4d4d;
    border-right: 2px solid #4d4d4d;
    border-left: 2px solid #4d4d4d;
}

.contact-header p {
	font-size: 30px;
    color: #4d4d4d;
    line-height: 1;
}

.contact-modal-body {    
	padding-bottom: 5%;
    display: block;
    width: 100%;
	background: #fff;
	border-right: 2px solid #4d4d4d;
    border-left: 2px solid #4d4d4d;
	border-bottom: 2px solid #4d4d4d;
	border-radius: 0 0 29px 29px;
}

.modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

.modal-content .contact-header {
    color: #ffffff;
    padding-bottom: 12px;
}

.contact-us-button {
	background-color: #fa9900 ;
    width: 100%;
    color: #fff;
    font-size: 16px;
    border: 1px solid #FF5722;
}

.contact-us-button:active {
	background-color: rgba(241, 90, 36, 0.85) !important;	
	color: #fff !important;
}

.contact-us-button:hover {
	background-color: rgba(241, 90, 36, 0.95) !important;	
	color: #fff !important;
}

.stext-center {
    max-width: 100%;
}

.contact-input , .txtRemarks{
        width: 100%;
    /* background: rgba(255, 255, 255, 0) !important; */
    border: 1px solid #4d4d4d;
    /* border-color: grey; */
    padding: 2px 9px;
    color: #4d4d4d;
    border-radius: 10px;
}

.txtRemarks {
    padding-right: 7px;
    border-radius: 10px;
}

.contact {
    color: white;
}

.contact-us-remarks {
	margin: 10px 0 0 0;
}

.agree_to_news_letter {
    color: #4d4d4d;
    text-align: right;
    float: right;
}

.ContactModal .col-lg-4, .ContactModal .col-md-12 { 
	padding-left: 7px;
	padding-right: 7px;
}

.contactUsContainer {
	background: rgba(246, 246, 246, 0.8313725490196079);
    padding-bottom: 10px;
	max-width: 100%;
	min-height: 200px;
    height: auto;
}


