@@charset "utf-8";
/* CSS Document */

/* RESET */

html, body, h1, h2, h3, h4, h5, h6, p, ul, li, a, img, form, input, textarea {margin:0; padding:0;}

img, textarea {border:none;}

a {text-decoration:none;}

.clear {clear:both;}

html {-webkit-text-size-adjust:none;}

body { background-color: #e8e9e9; font-family:Arial, Helvetica, sans-serif}


#wrapper { background-color:#ffffff; padding: 2%; width: 91%; margin: 0 auto; margin-top: 5%; max-width:1200px; min-width:240px;}

#left { float: left;width: 70%; text-align: center}

#left img {max-width: 851px; width: 100% }

#left h3 {color: #18adfa; padding-top: 15px; font-weight: normal; font-size: 30px}

#left p {font-size: 16px; line-height: 28px; text-align: left; color: #1d1d1d; padding-top: 20px}

#left .button { margin-top: 10px; max-width: 151px}

#left a, #right a {outline: 0}

#right { background-color: #d9d9da; padding: 2% 1%; border: 1px solid #b5b5b9; float: right; width: 25%; text-align:center}

#right .number { font-size: 24px; color: #1d1d1d}

#right h2 { font-weight: normal; color: #1d1d1d; margin-top: 5px; padding-top:0; font-size: 24px}

#right h5 { margin:0; padding:0;font-weight: normal; color: #1d1d1d; margin-top: 5px; padding-top:0; font-size: 24px; margin-bottom:20px}

#right h4 { color: #18adfa; font-weight: normal; text-transform: uppercase; font-size: 22px; padding: 0px; padding-top: 5px; margin:0}

#right p { color: #1d1d1d; font-size: 16px; padding:0px; margin:0; line-height: 22px; padding: 17px 0 12px 0}

#maps img { margin-top: 25px; max-width: 249px;}

#right img { width: 100%; }

#follow {margin-top: 0px}

#follow img {max-width: 40px}

#list { float: left; width: 58%}

#gallery { float: right; width: 42%;  margin-top: 20px; text-align:center}

#services { border: 1px solid #dfdddd; padding: 2% 3%; width: 94%; margin-top: 30px}

.list-top { margin-top: 70px}

.list { float: left; width: 49%; padding-left: 0; margin-top: -10px}

.list ul { float: left; margin-top: -5px; padding-top:0; padding: 0 3% 0 0;}

.list ul li { list-style-type: none; background: url(../images/bullet.png) no-repeat left; font-size: 18px; padding: 5px 0 5px 20px }

.list h2 { font-weight: normal; font-size: 28px; color: #1d1d1d; margin-top: 10px; padding-top:0}

.list h4 { margin:0; padding:0;font-weight: normal; font-size: 28px; color: #1d1d1d; margin-top: 10px; padding-top:0; margin-bottom:20px}

#gallery img {width: 47%; padding: 2% 1%; max-width: 224px}

#testimonials { background-color: #707070; padding: 2%; margin-top: 30px;
-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomright:10px;
	-moz-border-radius-bottomleft: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;}

#testimonials h2 {color: #fff; font-size: 28px; font-weight: normal; margin-left: 1%; margin-top: 10px}

.t-box { width: 30%; float: left; padding: 0 2%; border-right: 1px solid #fff; margin-top: 10px}

.t-box p { background: url(../images/bullet2.png) no-repeat left top; padding-left: 60px; font-size: 13px; line-height: 18px; color: #fff; font-style:italic}

.t-box h5 { float: right; color: #fff; font-size: 14px; font-weight: normal; margin-top: 15px}

#t-last.t-box { border: none; width: 27%}

#testimonials h4 {
font-size: 18px;
color: #fff;
font-weight: 100;
background: url(../images/stars.png) no-repeat;
padding: 0 0 0 100px;
margin: 5px 0 0 2%;}

#testimonials h6 {margin:0; padding:0; color: #fff; font-size: 28px; font-weight: normal; margin-left: 1%; margin-top: 10px; margin-bottom:20px;}

#testimonials p a {color:#8bb3fa; font-size:11px; font-style:normal}

#testimonials p a:hover {color:#b7beca; }

.google a {color:#8bb3fa}

.google p a:hover {color:#b7beca; }

#footer { margin: 2% auto; padding-top: 30px; max-width:1200px; min-width:240px; width: 95%;}

#footer h1 { float: left; font-size: 11px; margin-top: 0px; padding-top: 0; clear:left; color: #7f7d7d; font-weight: normal;}

#footer p { float: left; font-size: 11px; color: #7f7d7d}

#footer h6 { float: right; margin-top: -30px; font-size: 11px; color: #7f7d7d; font-weight: normal;}

#footer a { color: #2b2929}

#footer a:hover { color: #424040}


@media only screen and (min-width:581px)  {
.call {display: none}; 

}

/* footer */

@media only screen and (min-width:701px) and (max-width:900px) {
#footer h1 {width: 60%}
}

@media only screen and (min-width:0px) and (max-width:700px) {
#footer {text-align: center; padding-top:20px}
#footer h1 {float: none}
#footer p {float: none}
#footer h6 {float: none; margin-top: 15px}
}


/* testimonials */

@media only screen and (min-width:601px) and (max-width:700px) {
.t-box p { background: url(../images/bullet2.png) no-repeat left top; padding-left: 40px; font-size: 12px}
#testimonials h4 {margin-top: 15px}
}


@media only screen and (min-width:0px) and (max-width:600px) {
.t-box { width: 92%; border-bottom:1px solid #fff; border-right: none; padding: 0 3%}
.t-box p { background: url(../images/bullet1.png) no-repeat left top; padding-left: 60px; font-size: 13px}
#t-last.t-box { border-bottom: none;  width: 96%}
}


/* services, gallery */

@media only screen and (min-width:1130px) and (max-width:1260px) {
.list ul li { list-style-type: none; background: url(../images/bullet.png) no-repeat left; font-size: 16px; padding: 4px 0 4px 20px }
#list { float: left; width: 56%}
#list h2 { font-size: 24px}
#gallery { float: right; width: 44%; }
.list-top { margin-top: 60px}
}

@media only screen and (min-width:960px) and (max-width:1129px) {
.list ul li { list-style-type: none; background: url(../images/bullet.png) no-repeat left; font-size: 14px; padding: 4px 0 4px 20px }
#list { float: left; width: 56%; }
#list h2 { font-size: 24px}
#gallery { float: right; width: 44%;}
.list-top { margin-top: 60px}
}

@media only screen and (min-width:860px) and (max-width:959px) {
.list ul li { list-style-type: none; background: url(../images/bullet.png) no-repeat left; font-size: 14px; padding: 4px 0 4px 20px }
#list { float: left; width: 50%; }
#list h2 { font-size: 24px}
#gallery { float: right; width: 50%; }
#gallery img {padding: 3% 1%}
.list-top { margin-top: 60px}
}

@media only screen and (min-width:630px) and (max-width:859px) {
.list ul li { list-style-type: none; background: url(../images/bullet.png) no-repeat left; font-size: 18px; padding: 4px 0 4px 20px }
#list { float: left; width: 55%; padding-left:4% }
.list { width: 100%}
#list h2 { font-size: 28px}
#gallery { float: right; width: 40%; text-align: left}
#gallery img { width: 100%}
.list-top { margin-top: 0px}
}

@media only screen and (min-width:560px) and (max-width:629px) {
.list ul li { list-style-type: none; background: url(../images/bullet.png) no-repeat left; font-size: 16px; padding: 3px 0 3px 20px }
#list { float: left; width: 55%; padding-left:2% }
.list { width: 100%}
#list h2 { font-size: 24px}
#gallery { float: right; width: 40%; text-align: left}
#gallery img { width: 100%}
.list-top { margin-top: 0px}
}

@media only screen and (min-width:480px) and (max-width:559px) {
.list ul li { list-style-type: none; background: url(../images/bullet.png) no-repeat left; font-size: 14px; padding: 3px 0 3px 20px }
#list { float: left; width: 55%; padding-left:2% }
.list { width: 100%}
#list h2 { font-size: 22px}
#gallery { float: right; width: 40%; text-align: left}
#gallery img { width: 100%}
.list-top { margin-top: 0px}
}


@media only screen and (min-width:400px) and (max-width:479px) {
.list ul li { list-style-type: none; background: url(../images/bullet.png) no-repeat left; font-size: 12px; padding: 2px 0 2px 20px }
#list { float: left; width: 55%; padding-left:2% }
.list { width: 100%}
#list h2 { font-size: 22px}
#gallery { float: right; width: 40%; text-align: left}
#gallery img { width: 100%}
.list-top { margin-top: 0px}
}

@media only screen and (min-width:300px) and (max-width:399px) {

.list ul li { list-style-type: none; background: url(../images/bullet.png) no-repeat left; font-size: 16px; padding: 4px 0 4px 20px }
#list { float: left; width: 100%; padding-left:2% }
.list { width: 100%}
#list h2 { font-size: 26px}
#gallery { float: right; width: 100%; }
#gallery img { width: 100%}
.list-top { margin-top: 0px}
}

@media only screen and (min-width:0px) and (max-width:299px) {
.list ul li { list-style-type: none; background: url(../images/bullet.png) no-repeat left; font-size: 14px; padding: 3px 0 3px 20px }
#list { float: left; width: 100%; padding-left:2% }
.list { width: 100%}
#list h2 { font-size: 26px}
#gallery { float: right; width: 100%; }
#gallery img { width: 100%}
.list-top { margin-top: 0px}
}

/* left, right */

@media only screen and (min-width:850px) and (max-width:1200px) {
#maps img { width: 90%; margin-top: 20px }
#right h4 {font-size: 20px; padding-top:0px}
#right .map { margin-top: 10px}
#left p { line-height: 30px}
#left .button {margin-top: 20px}
}

@media only screen and (min-width:750px) and (max-width:849px) {
#right .number {font-size: 16px}
#maps img {width: 90%; }
#right h4 {margin-top: 15px; padding-top:0px; font-size: 16px}
#right .map { margin-top: 10px}
#right { width: 28%}
#left { width: 68%}
#left p { line-height: 32px}
}


@media only screen and (min-width:570px) and (max-width:749px) {
#left h3 { margin-top:15px}
#left p {font-size: 16px; padding-top: 10px}
#follow { float: left; margin-top: 15px; width: 46%}
#right .number { font-size: 20px}
#left { float: none; width: 100%}
#left .button { margin-top: 10px}
#maps { text-align: center; float: right; margin-top: 10px; width: 49%;}
#maps .map { margin-top:0px}
#right { float: none; width: 96%; margin-top: 30px; padding: 2% }
}

@media only screen and (min-width:501px) and (max-width:569px) {
#right .number { font-size: 20px}
#left h3 { margin-top:15px}
#left p {font-size: 16px; padding-top: 10px}
#follow { float: left; margin-top: 15px; width: 46%}
#follow p {font-size: 12px; line-height: 22px; margin-top:0}
#follow h4 { font-size: 15px}
#left { float: none; width: 100%}
#left .button { margin-top: 10px}
#maps { text-align: center; float: right; margin-top: 15px; width: 49%;}
#maps .map { margin-top:0px}
#maps .tour { margin-top:10px}
#right { float: none; width: 96%; margin-top: 30px; padding: 2% }
}

@media only screen and (min-width:351px) and (max-width:500px) {
#left h3 { margin-top:15px}
#left p {font-size: 14px; padding-top: 10px}
#follow { float: none; margin-top: 15px; width: 100%}
#follow p {font-size: 16px; line-height: 22px; margin-top:0}
#follow h4 { font-size: 20px}
#left { float: none; width: 100%}
#right .number { font-size: 18px}
#left .button { margin-top: 5px}
#maps { text-align: center; float: none; margin-top: 20px; width: 100%;}
#maps .map { margin-top:0px}
#right { float: none; width: 96%; margin-top: 30px; padding: 2% }
}

@media only screen and (min-width:0px) and (max-width:350px) {
#right .call1, .number { display: none}
#left h3 { margin-top:15px}
#left p {font-size: 14px; padding-top: 10px}
#follow { float: none; margin-top: 15px; width: 100%}
#follow p { font-size: 12px; line-height: 22px; margin-top:0}
#follow h4 { font-size: 15px; margin-top: 20px}
#left { float: none; width: 100%}
#left .button { margin-top: 5px}
#maps { text-align: center; float: none; margin-top: 20px; width: 100%;}
#maps .map { margin-top:0px}
#right { float: none; width: 96%; margin-top: 30px; padding: 2% }

}

@media only screen and (min-width:0px) and (max-width:580px) {
#follow .call img { max-width: 236px; width: 100%}
}