@import url('https://fonts.googleapis.com/css?family=Roboto%3A300%2C400%2C500%2C700%2C900%7CVidaloka&#038');
/*
@import url('https://fonts.googleapis.com/css?family=Roboto');
Title: Creating an HTML5 enhanced responsive-ready contact form, with custom javascript feature detection
Tutorial on: http://www.onextrapixel.com
Author: http://www.toddmotto.com
*/

*
{
	margin:0;
	padding:0;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	-moz-font-smoothing:antialiased;
	-o-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}

body 
{
	max-width:800px;
    height:100%;
	font:400 14pt Roboto, Helvetica, Arial, sans-serif;
	color:#795809;
	background:#FFFFFF;
}

#contactForm 
{
	max-width:800px;
}

.wrapper 
{
	max-width:800px;
	width:100%;
}


#contact-form input[type="text"],
#contact-form input[type="password"],
#contact-form input[type="email"],
#contact-form input[type="phone"],
#contact-form input[type="date"],
#contact-form input[type="url"],
#contact-form select,
#contact-form textarea 
{
    padding:10px;
    height: 50px;
    background-color:#F7F3E7;
	border:0px ;
	font:300 #754609 18pt Roboto, Helvetica, Arial, sans-serif;
}

#contact-form button[type="button"] 
{
  font:#ae8700 19px Roboto, Helvetica, Arial, sans-serif;
  font-weight:600;
}

#contact-form input[type="checkbox"] 
{
	margin-bottom:10px;
}

#contact-form input[type="date"] 
{
    width:120px;
}

#contact-form input[type="phone"] 
{
    width:120px;
}

#contact-form select 
{
	margin-bottom:10px;
}

#contact-form 
{
	padding:15px;

}

h3 
{
    font:300 #7D5A35 16pt "Courier New", Helvetica, Arial, sans-serif;
 
	display:block;
	padding-bottom:30px;
	text-align:center;
}

#contact-form h3 
{
    font:300 #7D5A35 16pt Roboto, Helvetica, Arial, sans-serif;
	display:block;
	padding-bottom:10px;
	text-align:center;
}

#contact-form h4 
{
	margin:5px 0 15px;
	display:block;
	font-size:13pt;Courier New
}



.checkboxLabel
{
 font-size: 14px;
 color: #907452;
 font-weight: 400;
}

#contact-form label
{
    font-size: 10px;
	color:#333333 ;
	display:block;
	margin:5px 0;
	font-weight:400;
}

#contact-form label span 
{
    font:300 #754609 13px Roboto, Helvetica, Arial, sans-serif;
    font-size: 13px;
	cursor:pointer;
	color:#754609;
	display:block;
	margin:5px 0;
	font-weight:500;
}


#contact-form input[type="text"],
#contact-form input[type="password"],
#contact-form input[type="phone"],
#contact-form input[type="url"] 
{
	width:96%;
    margin-bottom:20px;
}

#contact-form input[type="phone"] 
{
	width:96%;
    margin-bottom:20px;
}

#contact-form input[type="email"],
#contact-form textarea 
{
	width:96%;
    margin-bottom:20px;
	resize:none;
  line-height: 120%
}

#contact-form select 
{
	width:96%;
    margin-bottom:20px;
	line-height:26px;
}

#contact-form textarea 
{
	height:200px;
	max-width:100%;
}

button[type="button"] 
{
  font: 20px Roboto, Helvetica, Arial, sans-serif;
  color:#ae8700;
  font-weight:300;
	cursor:pointer;
	width:90%;
	border:none;
	background:#ffffff;
	margin:0 0px 0 0px;
	padding:10px;
}

#contact-form button[type="button"]:hover 
{
	color:#754609 ;
}

#contact-form button[type="button"]:active 
{
	box-shadow:inset 0 1px 3px rgba(0,0,0,0.5);
}

#contact-form input:focus,
#contact-form textarea:focus 
{
	outline:0;
}

::-webkit-input-placeholder 
{
	font:300 12px Roboto, Helvetica, Arial, sans-serif;
    color:#888;
}

:-moz-placeholder 
{
	font:300 12px Roboto, Helvetica, Arial, sans-serif;
    color:#888;
}

::-moz-placeholder 
{
	font:300 12px Roboto, Helvetica, Arial, sans-serif;
    color:#888;
}

:-ms-input-placeholder 
{
	font:300 12px Roboto, Helvetica, Arial, sans-serif;
    color:#888;
}

.Phone 
{  
    text-decoration: none; 
}

.Date 
{  
    text-decoration: none; 
    cursor:pointer;
}
		   
.MarginLeft 
{
    margin-left:10px;
}

.MarginRight
{
    margin-right:6px;
}

.MarginBottom
{
    margin:0px 0px 100px 0px;
}
			       
			       
.country
{
    color:white;
    font-size:0px;
    display:none;
}


p 
{
  font-family: sans-serif;
}


label.custom-select 
{
    position: relative;
    display: ;
}

    .custom-select select 
    {
        display: inline-block;
        border: 2px solid #bbb;
        padding: 4px 3px 3px 15px;
        margin: 0;
        font: inherit;
        outline:none; /* remove focus ring from Webkit */
        line-height: 1.2;
        background: #f8f8f8;
        
        -webkit-appearance:none; /* remove the strong OSX influence from Webkit */
        
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
    }

    /* for Webkit's CSS-only solution */
    @media screen and (-webkit-min-device-pixel-ratio:0) 
    { 
        .custom-select select 
        {
            padding-right:30px;
        }
    }
    
    /* Since we removed the default focus styles, we have to add our own */
    .custom-select select:focus 
    {
        -webkit-box-shadow: 0 0 3px 1px #c00;
        -moz-box-shadow: 0 0 3px 1px #c00;
        box-shadow: 0 0 3px 1px #c00;
    }
    
    /* Select arrow styling */
    .custom-select:after 
    {
        content: "▼";
        position: absolute;
        top: 24px;
        right: 0;
        bottom: 5px;
        font-size: 60%;
        line-height: 10px;
        padding: 15px 15px 20px 15px;
        background: #bbb;
        color: white;        
        pointer-events:none;        
        -webkit-border-radius: 0 6px 6px 0;
        -moz-border-radius: 0 6px 6px 0;
        border-radius: 0 6px 6px 0;
    }
 
    @media screen and (-webkit-min-device-pixel-ratio:0) 
		{ 
        .custom-select:after 
				{
					height: 4.5px;
          top: -14px;
        }
    }

    @-moz-document url-prefix() 
		{ 
        .custom-select:after 
				{
					top: 36px;
					margin-right:-533px;
        }
    }
		
    .no-pointer-events .custom-select:after 
    {
        content: none;
    }
		
/* This is for Prefix dropdown field. */



label.custom-select2 
{
    position: relative;
    display: ;
}

    .custom-select2 select 
    {
        display: inline-block;
        border: 2px solid #bbb;
        padding: 4px 3px 3px 15px;
        margin: 0;
        font: inherit;
        outline:none; /* remove focus ring from Webkit */
        line-height: 1.2;
        background: #f8f8f8;
        
        -webkit-appearance:none; /* remove the strong OSX influence from Webkit */
        -ms-appearance: none;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
    }

    /* for Webkit's CSS-only solution */
    @media screen and (-webkit-min-device-pixel-ratio:0) 
    { 
        .custom-select2 select 
        {
            padding-right:30px;
        }
    }
    
    /* Since we removed the default focus styles, we have to add our own */
    .custom-select2 select:focus 
    {
        -webkit-box-shadow: 0 0 3px 1px #c00;
        -moz-box-shadow: 0 0 3px 1px #c00;
        box-shadow: 0 0 3px 1px #c00;
    }
    
    /* Select arrow styling */
    .custom-select2:after 
    {
        content: "▼";
        position: absolute;
        top: 24px;
        right: 0;
        bottom: 5px;
        font-size: 60%;
        line-height: 10px;
        padding: 15px 15px 20px 15px;
        background: #bbb;
        color: white;        
        pointer-events:none;        
        -webkit-border-radius: 0 6px 6px 0;
        -moz-border-radius: 0 6px 6px 0;
        border-radius: 0 6px 6px 0;
    }
 
    @media screen and (-webkit-min-device-pixel-ratio:0) 
		{ 
        .custom-select2:after 
				{
					height: 4.5px;
          top: -14px;
        }
    }

    @-moz-document url-prefix() 
		{ 
        .custom-select2:after 
				{
					top: 36px;
					margin-right:-238px;
        }
    }
		
    .no-pointer-events .custom-select2:after 
    {
        content: none;
    }


P input.SendBtn 
{
	cursor:pointer;
	width:50%;
	border:none;
	background:#F7F3E7;
	background-image:linear-gradient(bottom, #F7F3E7 0%, #F7F3E7 52%);
	background-image:-moz-linear-gradient(bottom, #F7F3E7 0%, #F7F3E7 52%);
	background-image:-webkit-linear-gradient(bottom, #F7F3E7 0%, #F7F3E7 52%);
	color:#FFF;
	margin:20px 0 0 5px;
	padding:10px;
	border-radius:5px;
}     

TD input.SendBtn 
{
	cursor:pointer;
	width:150px;
	border:none;
	background:#F7F3E7;
	background-image:linear-gradient(bottom, #F7F3E7 0%, #F7F3E7 52%);
	background-image:-moz-linear-gradient(bottom, #F7F3E7 0%, #F7F3E7 52%);
	background-image:-webkit-linear-gradient(bottom, #F7F3E7 0%, #F7F3E7 52%);
	color:#FFF;
	margin:0px 0px 0px 0px;
	padding:8px;
	border-radius:5px;
} 

TD input.SendBtn:hover 
{
	background:#F7F3E7;
	background-image:linear-gradient(bottom, #F7F3E7 0%, #F7F3E7 52%);
	background-image:-moz-linear-gradient(bottom, #F7F3E7 0%, #F7F3E7 52%);
	background-image:-webkit-linear-gradient(bottom, #F7F3E7 0%, #F7F3E7 52%);
	-webkit-transition:background 0.3s ease-in-out;
	-moz-transition:background 0.3s ease-in-out;
	transition:background-color 0.3s ease-in-out;
}

.style1
{
    padding-left: 10px;
    width: 681px;
    border: solid grey 2px; border-radius:5px;
    margin:50px 50px 50px 50px;
}


.box
{
    width:446px;
    height:78px;
    background-color:#F9FAFB;
    margin-left:80px; /* half of width */
    margin-top:450px;  /* half of height */
    top:42%;
    left:25%;
    border-radius:5px;
}

 input[type='radio']:after{
	   -webkit-appearance: none;
	   -moz-appearance: none;
 	    appearance: none;
        width: 15px;
        height: 15px;
        border-radius: 15px;
        top: -2px;
        left: -1px;
        position: relative;
        background-color: #ffffff;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid #F7F3E7 ;
    }

    input[type='radio']:checked:after {
        width: 15px;
        height: 15px;
        border-radius: 15px;
        top: -2px;
        left: -1px;
        position: relative;
        background-color: #F7F3E7;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid #F7F3E7 ;
    }