﻿/*---start-contact-----*/
.contact-container{}
.contact {background: url(/image/contact/contact-bg.jpg) no-repeat #E7E7E7;background-repeat: no-repeat;background-attachment: fixed;background-position: center;background-size: cover;padding: 3em 0 5em 0;color: #DDD;}

/* -- titler-----*/
.contact .titler h5 {background-image:url('/image/page/dotwhite.png');}
.contact .titler h3{color:#fff;text-shadow: 0 1px 0 rgba(0, 0, 0, 0.64);}
.contact .titler p {color: #252525;font-weight: bold;letter-spacing: 2px;text-transform: uppercase;background-color: rgba(255, 255, 255, 0.7);padding: 20px 0px; display:none;}

/* -- contact-us----*/
.contact .contactus {background-color: rgba(0, 0, 0, 0.7);padding:3em 2em; margin-top:5em;}
.contact .contactus .contact-left{float:left;width:40%;}
.contact .contactus .contact-left h5 {color: #FFF;text-transform: uppercase;padding-bottom:2em;}
.contact .contactus .contact-left p{display: block;padding-bottom: 2em;}
.contact .contactus .contact-left-grid {padding: 7px 0px;}

.contact .contactus .contact-left-grid-pic{width: 19%;float: left;}
.contact .contactus .contact-left-grid-info{float: right;width: 81%;}
.contact .contactus .contact-left-grid-info h6{display: block;text-transform: uppercase;font-size:1em;}
.contact .contactus .contact-left-grid-info h6 label{font-weight:400; font-size:1.2em;}

.contact .contactus .contact-left-grid-info .contact-extra-info {font-size: 15px !important;background-color: rgba(0, 0, 0, 0.5); border: 1px solid rgb(86, 86, 86); 
                                     border-radius: 3px; padding: 12px; margin-top: 24px;}
.contact .contactus .contact-left-grid-info .contact-extra-info h6 {text-transform: none !important;}


.contact .contactus .contact-social {padding: 1em;padding-left:19%;}

.contact .contactus .contact-right{	float:right;width:58%;}
.contact .contactus .contact-right h5{color: #FFF;text-transform: uppercase;padding-bottom:2em;}


/*----- contact-social----*/
.contact-social {padding:1em 0;}
.contact-social ul li{display:inline-block;}
.contact-social ul li a{display:block;}
.contact-social ul li img{display:block;}

.contact-social ul li a{background-color: #252525;padding:15px;display: block;}
.contact-social ul li a:hover{background-color:rgba(255,255,255,.5);}


/* -- contact-form-----*/
.contact-form .form{}
.contact-form .form label{ display: block; padding-top: 14px; padding-bottom:2px;}
.contact-form .form .condition label {display:inline-block; padding-top:0px;}
.contact-form .form > div:first-child >  label {padding-top:0px;}

.contact-form .form input, 
.contact-form .form textarea,
.contact-form .form select,
.contact-form .form .buttons .submit,
.contact-form .form .buttons .reset {border-radius: 1px; -webkit-border-radius:1px; -moz-border-radius:1px; -o-border-radius: 1px;}





/*----responsive-design-----*/
@media only screen and (max-width: 1440px) {}
@media only screen and (max-width: 1366px) {}

@media only screen and (max-width: 1280px) {	
	.contact .titler {height:90px;}
	.contact .titler h5 {width:20%;}
	.contact .titler h3 {width:60%;}
}
@media only screen and (max-width: 1024px) {

	.contact .titler h5 {width:20%;}
	.contact .titler h3 {width:60%;}
	.contact .titler p {font-size:1.8em}

	.contact .contactus .contact-social ul li a {padding: 10px;}
}

@media only screen and (max-width: 768px) {

	.contact .titler {height:75px;}
	.contact .titler h5 {width:15%;}
	.contact .titler h3 { width:70%;}
	.contact .titler p {font-size:1.5em}
	
	.contact .contactus .contact-left {width: 100%;float: none;}
	.contact .contactus .contact-right {width: 100%;float: none;}
	.contact .contactus .contact-right h5{padding-top:4em;}

	.contact .contactus .contact-left-grid-pic{width: 12%;}
	.contact .contactus .contact-left-grid-info{width: 88%;}
	.contact .contactus .contact-social {padding-left:12%;}
	
	.contact .contact-social ul li a {padding: 10px;}
	
}

@media only screen and (max-width: 640px)  {	
	.contact .titler {height:60px;}
	.contact .titler p {font-size:1.2em;}
}
@media only screen and (max-width: 480px) {}