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

body{background:/*url(../images/body-bg.jpg) center top no-repeat */#fff; width:100%;}
*{margin:0px; padding:0px;}
.top-header{float: left; width: 100%; background: #01559D;}
.wrapper{ width:1003px; height:auto; margin:0 auto; }
.rm{ color:#09C; font-weight:bold;}
.logo{float:left; width:560px; margin-top:13px;}
.menu{width:auto; float:right; margin-top:10px;}
.home{width:84px; height:34px; background-color:#08a9df; border-radius:18px;}

.Services{width:84px; height:34px; background-color:#ffffff; border-radius:18px;}
.Contacts{width:84px; height:34px; background-color:#ffffff; border-radius:18px;}
.ul{list-style:none;}
.ul li{ float:left; margin-left:8px; text-align: center;}	
.ul li:hover{ background-color:#08a9df; }
.ul li a{text-decoration:none; color:#004890; font-size:17px; font-family:Estrangelo Edessa; line-height:35px;}	

.banner{float: left; width: 100%;}
.banner img:nth-child(2){display: none;}
.banner img{width: 100%;}

.problem{ width: 100%; float: left; margin-top: 20px;}
.problem h2{ color: #0196d8; font-family: Estrangelo Edessa; font-size: 32px; text-align: center; text-decoration: underline;}
.content-left-prt{width:300px; float:left;}

.clr{ clear:both;}
.hgt{ height:400px;}

.h2{ color:#0196d8; font-family:Estrangelo Edessa; font-size:23px; margin-top:16px;}
.ul1{ list-style:none; padding-top:5px; margin-left:18px;}
.ul1 li{font-size:16px; font-family:Arial, Helvetica, sans-serif; list-style:url(../images/bullets.png); border-bottom:1px solid #666; padding-top:8px; padding-bottom:8px;}

.content-right-prt{ width:683px; float:left; margin-left:20px;}
.content-right-prt h1{font-size:25px; font-family:Arial, Helvetica, sans-serif; color:#0196d8;}
.p{ text-align:justify; padding-top:15px; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#525151;}
.h2-title{ font-size:25px; font-family:Arial, Helvetica, sans-serif; color:#0196d8;}
.ftr-nav{ background-color:#0196d8; height:130px;}

.ftr-nav1{ float:left; width:439px; margin-top:18px;}
.ftr-nav2{ float:left; width:240px; margin-top:18px;}
.ftr-nav3{ float:left; width:250px; margin-top:18px;}

.ftr-nav-ul{ list-style:none;}
.ftr-nav-ul li{ color:#FFF; font-family:Arial, Helvetica, sans-serif; font-size:14px; padding-top:4px;}
.ftr-nav-ul li a{text-decoration:none; color:#fff;}
.ftr{background-color:#2e2e2e;}
.ftr-p{ text-align:center; font-family:Estrangelo Edessa; font-size:13px; color:#CCC; padding-top:10px; margin-top:5px;}

.address{ width:250px; float:left;}
.address h2{font-size: 20px; margin-bottom: 15px; font-family:Estrangelo Edessa;}
.address p{font-family: Arial; font-size: 14px; margin-bottom: 10px;}
.address a{color: #000;}
.form{ width:400px; float:left; margin-left:15px;}
.map{ width:680px;}
	

#popupAbout, #popupProjects, #popupContact, #popupBlog {
height: 600px;
width: 900px;
overflow: auto;
background-color: rgba(0, 0, 0, 0.80);
border: 1px solid #cecece;
z-index: 15;
padding: 20px;
color: #FFF;
-webkit-box-shadow: 0px 0px 4px #000 inset;
-moz-box-shadow: 0px 0px 4px #000 inset;
box-shadow: 0px 0px 4px #000 inset;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
margin-top: -50px;
visibility: hidden;
}
#popupAbout p, #popupProjects p, #popupContact p, #popupBlog p {
padding-left: 10px;
font-size: 16px;
line-height: 24px;
}
#popupAbout h1, #popupProjects h1, #popupContact h1, #popupBlog h1 {
text-align: left;
font-size: 30px;
letter-spacing: 1px;
border-bottom: 1px dotted #D3D3D3;
padding-bottom: 2px;
margin: 0;
}
#popupAboutClose, #popupProjectsClose, #popupContactClose, #popupBlogClose {
right: 0;
top: 15px;
position: absolute;
display: block;
opacity: 0.5;
-webkit-transition:all .25s linear;
-moz-transition:all .25s linear;
-o-transition:all .25s linear;
-ms-transition:all .25s linear;
transition:all .25s linear;
}
#popupAboutClose:hover, #popupProjectsClose:hover, #popupContactClose:hover, #popupBlogClose:hover {
opacity: 1;
-webkit-transition:all .25s linear;
-moz-transition:all .25s linear;
-o-transition:all .25s linear;
-ms-transition:all .25s linear;
transition:all .25s linear;
}
.border {
height: 3px;
clear: both;
border-bottom: 1px dotted #FFF;
}
*:focus {
outline: none;/* Prevents blue border in Webkit */
}
form {
font-family:'Century Gothic', arial, serif;
width: 350px;
margin-left: 25px;
}
input, textarea {
font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
background-color: #fff;
border: 1px solid #ccc;
width: 300px;
min-height: 30px;
display: block;
margin-bottom: 16px;
margin-top: 8px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
color: #fff;
}
textarea {
min-height: 200px;
resize:none;
}
input:focus, textarea:focus {
-webkit-box-shadow: 0 0 25px #ccc;
-moz-box-shadow: 0 0 25px #ccc;
box-shadow: 0 0 25px #ccc;
}
/* The interesting bit */
input:not(:focus), textarea:not(:focus) {
opacity: 0.5;
}
input:required, textarea:required {
background: url("images/asterisk_orange.png") no-repeat 280px 7px;
}
input:valid, textarea:valid {
background: url("images/tick.png") no-repeat 280px 5px;
}
input:focus:invalid, textarea:focus:invalid {
background: url("images/cancel.png") no-repeat 280px 7px;
}
input[type=submit] {
font-size: 24px;
padding: 10px;
background: none;
opacity: 1.0;
}
#social-network img {
float: right;
margin-left: 20px;
opacity: 0.6;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
transition: all 1s ease-out;
}
#social-network img:hover {
opacity: 1;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
transition: all 1s ease-out;
}
#social-network {
float: right;
margin-top: -150px;
float: left;
margin-left: 475px;
}
.map {
margin-top: -500px;
margin-right: 25px;
border: 5px solid rgba(255, 255, 255, 0.30);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
float: right;
}

.date {
float: left;
position: relative;
margin-right: 10px;
padding: 44px 5px 0;
}
.date .month {
text-transform: uppercase;
font-size: 25px;
}

.date .day {
font-size: 35px;
line-height: 45px;
position: absolute;
left: 5px;
top: 0;
}

.date .year {
display: block;
position: absolute;
right: -5px;
top: 15px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}		 
footer{margin:0 auto; width:100%; height:143px; background:url(../images/footerbg1.jpg) repeat-x;}



.body-main{margin: 0 auto; width: 1003px;}
.body-main .right, .contact-right{float: right;width: 683px;}
.body-main .right ul{margin: 30px 0 0; padding: 0;}
.body-main .right li{list-style: none; float: left; width: 33.3%;}
.body-main .right h1 {font-size: 25px; font-family: Arial, Helvetica, sans-serif; color: #0196d8;}
.body-main .right h2 {color: #0196d8; margin: 20px 0; font-family: Estrangelo Edessa; font-size: 32px; text-align: center; text-decoration: underline;}
.body-main .right p {text-align: justify; padding-top: 15px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #525151;}
.body-main .left{float: left; width: 300px;}
.body-main .left .img, .body-main .left .style-list{float: left; width: 100%;}
.body-main .left .img img{width: 100%;}

.body-main .left .style-list h2 {color: #0196d8; font-family: Estrangelo Edessa; font-size: 23px; margin-top: 16px;}
.body-main .left .style-list ul{margin: 0; padding: 0;}
.body-main .left .style-list li {font-size: 16px; font-family: Arial, Helvetica, sans-serif; list-style: url(../images/bullets.png); border-bottom: 1px solid #666; padding-top: 8px; padding-bottom: 8px; margin-left: 20px;}

.content input[type="submit"]{cursor: pointer;}

.footer-main{float:left; width: 100%; font-family: Arial; text-align: center; padding: 10px 0; background: #2e2e2e; color: #fff;}
.footer-main p{font-size: 12px;}
.footer-main a{color: #fff;}


.top-bar{float: left; width: 100%; background: #034f8d; border-bottom: 2px solid #FFF; padding: 5px 0; font-family: Arial;}
.top-bar .container{margin: 0 auto; width: 1003px;}
.head-left{float: left; width: 100%;}
.head-right{float: left; width: 100%; display: none;}
.head-left ul, .head-right ul, .delivery-icon ul{margin: 0; padding: 0;}
.head-left li, .head-right li{list-style: none; float: left; width: auto;}
.head-left li a, .head-right li a{color: #fff; text-decoration: none; font-size: 14px;}
.head-left li a:hover, .head-right li a:hover{color: #02bfe5;}
.head-left li:nth-child(2), .head-left li:nth-child(3), .head-right li:nth-child(2), .head-right li:nth-child(3){margin-left: 20px;}
.head-left li:nth-child(4), .head-left li:nth-child(5), .head-left li:nth-child(6), .head-right li:nth-child(4), .head-right li:nth-child(5), .head-right li:nth-child(6){float: right;}
.head-left li:nth-child(5), .head-left li:nth-child(6), .head-right li:nth-child(5), .head-right li:nth-child(6){margin-right: 15px;}


@media only screen and (min-width:320px) and (max-width:479px){
	.wrapper{width: 100%;}
	.logo{width: 90%; float: none; margin: 10px auto;}
	.logo img{width: 100%;}
	.menu {width: 58%; float: none; margin: 10px auto;}
	.banner img:first-child{display: none;}
	.banner img:nth-child(2){display: block;}
	.head-left{display: none;}
	.head-right{display: block;}
	.top-bar .container, .body-main{width: 90%; float: none; margin: 0 auto;}
	.body-main .right, .contact-right {float: left; width: 100%;}
	.body-main .left {float: right; width: 100%;}
	.body-main .right li {width: 100%;}
	.body-main .right li img{width: 100%; margin-bottom: 5px;}
	.body-main .right h1 {font-size: 23px;}
	.body-main .left .style-list h2 {font-size: 21px;}
	.address {width: 100%; float: left;}
	.form {width: 100%; float: left; margin-left: 0;}
	form {font-family: 'Century Gothic', arial, serif; width: 100%; margin-left: 0;}
	.form textarea, .form input{width: 100%; border:1px solid #242424; margin-bottom: 5px;}


}

@media only screen and (min-width:480px) and (max-width:599px){
	.wrapper{width: 100%;}
	.logo{width: 90%; float: none; margin: 10px auto;}
	.logo img{width: 100%;}
	.menu {width: 58%; float: none; margin: 10px auto;}
	.banner img:first-child{display: none;}
	.banner img:nth-child(2){display: block;}
	.head-left{display: none;}
	.head-right{display: block;}
	.top-bar .container, .body-main{width: 90%; float: none; margin: 0 auto;}
	.body-main .right, .contact-right {float: left; width: 100%;}
	.body-main .left {float: right; width: 100%;}
	.body-main .right li img{width: 100%; margin-bottom: 5px;}
	.body-main .right h1 {font-size: 16px;}
	.body-main .left .style-list h2 {font-size: 21px;}
	.address {width: 100%; float: left;}
	.form {width: 100%; float: left; margin-left: 0;}
	form {font-family: 'Century Gothic', arial, serif; width: 100%; margin-left: 0;}
	.form textarea, .form input{width: 100%; border:1px solid #242424; margin-bottom: 5px;}



}

@media only screen and (min-width:600px) and (max-width:767px){
	.head-left{display: none;}
	.head-right{display: block;}
	.top-bar .container, .body-main{width: 90%; float: none; margin: 0 auto;}
	.wrapper{width: 90%; float: none; margin: 0 auto;}
	.logo{width: 60%;}
	.logo img{width: 100%;}
	.body-main .right, .contact-right {float: left; width: 100%;}
	.body-main .left {float: right; width: 100%;}
	.body-main .right li img{width: 100%; margin-bottom: 5px;}
	.body-main .right h1 {font-size: 16px;}
	.body-main .left .style-list h2 {font-size: 21px;}
	.address {width: 100%; float: left;}
	.form {width: 100%; float: left; margin-left: 0;}
	form {font-family: 'Century Gothic', arial, serif; width: 100%; margin-left: 0;}
	.form textarea, .form input{width: 100%; border:1px solid #242424; margin-bottom: 5px;}
}

@media only screen and (min-width:768px) and (max-width:991px){
	.head-left{display: none;}
	.head-right{display: block;}
	.top-bar .container, .body-main{width: 90%; float: none; margin: 0 auto;}
	.wrapper{width: 90%; float: none; margin: 0 auto;}
	.logo{width: 60%;}
	.logo img{width: 100%;}

	.body-main .right {float: left; width: 100%;}
	.body-main .right li img{width: 100%; margin-bottom: 5px;}
	.body-main .right h1 {font-size: 16px;}


}

@media only screen and (min-width:992px) and (max-width:1002px){
	.top-bar .container {width: 96%;}
	.top-header .wrapper {width: 96%; }
	.top-bar .container, .body-main{width: 90%; float: none; margin: 0 auto;}
	.wrapper{width: 90%; float: none; margin: 0 auto;}
	.logo{width: 60%;}
	.logo img{width: 100%;}
	.body-main .right {float: right; width: 560px;}
	.body-main .right h1 {font-size: 20px;}
	.contact-right {float: right;  width: 575px;}
	.form {width: 300px; float: left; margin-left: 15px;}
	.content{float: left; width: 100%;}
	.form textarea, .form input{width: 100%; border:1px solid #242424; margin-bottom: 5px;}
	form {width: 100%; margin-left: 0;}

	/*.body-main .right {float: left; width: 100%;}
	.body-main .right li img{width: 100%; margin-bottom: 5px;}
	.body-main .right h1 {font-size: 16px;}*/
}



.thank-you{margin: 80px auto 0; width: 100%; text-align: center; color: #000; padding: 10px;}
.thank-you a{color: #000;}
.blank-page{margin:80px auto 70px; width: 40%; text-align: center; border:2px solid #F20; padding:10px;}
.blank-page img{width:50%; margin-bottom: 20px;}
.blank-page h2{font-size:30px; color: #F20; line-height: 50px; margin: 0;}
.blank-page h5{font-size:30px; color: #000; line-height: 20px; margin: 0 0 25px;}
.blank-page p{font-size:20px; font-style: italic; color:#000;}
.blank-button{margin:0 auto; width: 152px; margin-top: 25px;}
.blank-button a{background: #000; color: #fff; padding:8px 22px; border:0; font-weight: bold; text-transform: uppercase;}
.blank-button a:hover{background: #4ba63b; color: #000;}

@media only screen and (min-width:320px) and (max-width:767px){
	.thank-you {width: 90%;}
  .blank-page{width: 90%;}
  .blank-page h5{font-size:150px; line-height: 100px; }
  .blank-page img{width: 80%;}
}
@media only screen and (min-width:768px) and (max-width:1024px){
  .blank-page{width: 60%;}
  .blank-page h5{font-size:200px; line-height: 140px; }
}

.suspend-sec {
  position: fixed;
  top: 175px;
  z-index: 999;
  background: #fff;
  width: 100%;
  padding: 20px 30px;
  text-align:center;
}

.content-sec-suspend h2{ color:red;}