/*	
Стили
COLOR CODES
  Blue #0db5c0
  Red #fe475b
  Light Gray #9b9b9b

TABLE OF CONTENT
  1. Universal Styles
  2. Menu Styles
  3. Home & About Styles
  4. purpose Styles
  5. Список городов
  6. Contact & Footer Styles
  7. Media Queries
--------------------------------------*/

/* 1. Universal Styles
--------------------------------------*/
* { font-family: 'Open Sans', sans-serif; }
h1, h2, h3, h4 { text-transform: uppercase; margin-bottom: 20px;}
h1 {
  margin-top: 0;
}
h2 {
  font-size: 28px;
  font-weight: 600;
}
h3 { 
  margin-top: 0; 
}
ul {
  padding: 0;
  margin: 0;
}
.black-bg { background-color: #202020; }
.blue-text { color: #0db5c0; }
.red-text { color: #fe475b; }
.light-gray-text { color: #9b9b9b; }
.dark-gray-text { color: #535353; }
.gradient-bg {
  background-image: url('../images/gradient-border-top.png'), url('../images/gradient-border-bottom.png');
  background-position: center top, center bottom;
  background-repeat: no-repeat;
}
.white-bg { background-color: #fff; }
.em { font-style: italic; }
.logo-bg {
  max-width: 390px;
  width: 100%;
  height: auto;
}
.purpose-note .first,
.testimonials-header .first {
  font-weight: 700;
}
.home-right, 
.about-left,
.services { 
  padding: 60px 80px; 
}


/* 2. Menu Styles
--------------------------------------*/
#alt-phone {
	float: right;
	margin-bottom: 0;
    padding-right: 30px;
	padding-top: 20px;
	font-size: 26px;
}

.sticky-phone{padding-top: 2px !important; margin-right: 30px !important;}


.nav-container {
  position: fixed;
  width: 100%;
  z-index: 1000;
}
.nav-container .container {
  background-image: url('../images/blue-corner.png');
  background-repeat: no-repeat;
  background-position: top right;
  background-size: auto 145px;
}
.nav-container.sticky .white-bg {
  background-image: none;
  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 87%,rgba(255,255,255,0.92) 91%,rgba(229,229,229,0.77) 99%,rgba(229,229,229,0.75) 100%); /* W3C */
}
.nav-container.sticky .nav { height: 45px; }
.nav-container.sticky .nav { padding: 12px 30px; }
.nav-container.sticky .nav li>a { padding: 5px 15px; }
.nav {
  float: left;
	height: 145px;
	margin-bottom: 0;
  padding-left: 30px;
	padding-top: 40px;
}
.nav li {
	display: inline-block;
	list-style: none;
}
.nav li>a {
	border-radius: 50px;
	color: #9b9b9b;
	padding: 10px 30px;
	transition: background-color 0.5s ease;
	-webkit-transition: background-color 0.5s ease;
}
#responsive-menu ul li:hover a, 
#responsive-menu ul li.active a,
.nav li:hover a, 
.nav li.active a {
	background-color: #0db5c0;
	color: #fff;
}
.nav li:hover a, 
.nav li.active a,
a:focus {
  text-decoration: none;
}
#responsive-menu {
  top: 0;
  width: 250px;
  height: 100%;
  background: rgba(180,180,180, 0.4);
  position: fixed;
  z-index: 5500;
  right: -1500px;
  display: none;
  overflow: auto;
}
#responsive-menu ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
#responsive-menu ul li {
  display: block;
  margin-bottom: 2px;
}
#responsive-menu ul li a {
  padding: 12px 18px;
  background-color: #454545;
  color: #fff;
  display: block;
  -webkit-border-radius: 4px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 4px;
  -moz-background-clip: padding;
  border-radius: 4px;
  background-clip: padding-box;
  text-transform: uppercase;
}
#responsive-menu ul li a i { margin-right: 15px; }
a#mobile_menu {
  font-size: 24px;
  background-color: rgba(13, 181, 192,0.8);
  border-radius: 30px;
  color: #ffffff;
  width: 50px;
  height: 50px;
  display: block;
  text-align: center;
  line-height: 50px;
  position: fixed;
  top: 2px;
  right: 15px;
  z-index: 5500;
}
#responsive-menu ul li a:hover {
  color:#fff;
  background-color: #0db5c0;
  text-decoration: none;
}

/* 3. Home & About Styles
------------------------------------*/
#home { padding-top: 145px; }
.home-left, .home-right { min-height: 400px; }
.home-left { padding: 0; }
.logo {
  position: absolute;
  top: 110px;
  left: 25px;
}
.site-name, .slogan {
	display: block;
	text-transform: uppercase;
}
.site-name {	font-size: 115px; }
.slogan {
  color: #8e8e8e;
  font-size: 18px;  
  font-weight: 700;
  letter-spacing: 1px;
  padding-left: 38px;
  margin-top: 5px;
}
.home-text { margin-bottom: 20px; }
.learn-more {
  border: 1px solid #0db5c0;
  border-radius: 50px;
  display: inline-block;
  padding: 10px 30px;
  transition: all 0.3s;
}
.learn-more:hover {
  background-color: #0db5c0;
  color: #fff;
  text-decoration: none;
}
.about-left, .about-right { height: auto; }
.about-right {
  padding-left: 80px;
  padding-top: 70px;
}
.about-right img{width:100%;}

.about-list {
  line-height: 2;
  margin-left: 30px;
}

/* 4. purpose Styles
--------------------------------------*/
.purpose-left, 
.purpose-right {
  min-height: 480px;
}
.purpose-left { padding: 40px 80px 30px 80px; }
.purpose-right {
  background: #fff;
  padding: 0;
  overflow: hidden;
}
.purpose-note {
  color: #fff;
  font-size: 24px;
  position: absolute;
  top: 155px;
  right: 30px;
  text-align: center;
}
.purpose-note:hover {
  color: #202020;
  text-decoration: none;
}
.purpose-note .first,
.purpose-note .second,
.testimonials-header .first,
.testimonials-header .second {
  display: block;
}


/* 5. Список городов
------------------------------------------*/

.city{display: inline-block; width: 280px; height: auto; margin: 10px; background: #FEFEFE; border-radius: 30px; border: 1px solid #e9e9e9; box-shadow: 5px 7px 7px -7px #CCC; padding: 0 10px 20px;}
.city h4{display: block; border-radius: 30px; line-height: 50px; font-size: 22px; background: #FE475B; color: #fff; box-shadow: inset 0 5px 7px #CD2937; border: 4px solid #FE475B;}
.phone{display: block; font-size: 22px; line-height: 40px; cursor: pointer;}
.phone label{cursor: pointer; color: #999;}
.phone span{font-size: 28px; color: #0db5c0; margin-left:10px;}
.phone:hover span{color: #FE475B; cursor: pointer;}

.phone input[type=checkbox]{display:none; cursor: pointer;}

.phone input[type=checkbox]:checked + label, .phone input[type=checkbox]:checked + label span{color: #FE475B !important; font-weight: bold; text-shadow: 1px 1px 0 #333;}


/* 6. Contact & Footer Styles
--------------------------------------*/
.form-control { border-radius: 30px; }
textarea.form-control { padding: 15px; resize: vertical;}
.contact {
  padding: 0 60px;
  padding-bottom: 30px;
  max-width: 600px;
  margin: 0 auto;
}
#contact{position: relative;}
.send-btn {
  background: #fe475b;
  border-radius: 30px;
  color: white;
  padding: 5px 30px;
}

.g-recaptcha div{margin-left: auto; margin-right: auto;}


.err{background: #fdd;}

#smess{border-radius: 30px; padding: 5px 10px; margin-bottom: 10px;}
#smess p{margin:0;}

.done{display:block; position: absolute; top:0; left:0; width: 100%; height: 100%; text-align: center; background: #fff;}
.done p{font-size: 24px; font-weight: bold; color: #0DB5C0;}

.errmess{color: #FE475B;}

#map-canvas { 
  border-radius: 50px;
  height: 350px; 
}
footer {
  background: url('../images/red-corner.png') no-repeat right;
  height: 115px;
}
footer .col-lg-12 { padding: 0; }
.copyright-text,
.copyright-design {
  margin-top: 75px;
}
.copyright-text {
  float: left;
  margin-left: 30px;
}
.copyright-text a { color: #000; }
.copyright-design {
  float: right;
  margin-right: 30px;
}
.copyright-design, 
.copyright-design a {
    color: #fff;
}

/* 7. Media Queries
--------------------------------------*/
@media screen and (max-width: 1199px) {
  .nav li>a { padding: 10px 15px; }
  .logo {
    top: 115px;
    left: 30px;
  }
  .purpose-note { right: 34px; }
  .copyright-text,
  .copyright-design {
    margin-top: 65px;
  }
}

@media screen and (max-width: 991px) {
  h3 { margin-bottom: 15px; }
  .nav {
    height: 60px;
    padding-left: 15px;
    padding-top: 18px;
  }
  .nav-container .container { background-size: auto 60px; }
  .nav li>a { padding: 10px; }
  .logo {
    top: 83px;
    left: 20px;
  }

	#alt-phone {font-size: 20px; margin-right: 104px; padding-top: 12px;}
	.sticky-phone{padding-top: 6px !important; margin-right: 15px !important;}

  #home { padding-top: 60px; }
  .home-left, 
  .home-right {
    min-height: 325px;
  }
  .home-right { padding: 40px; }
  .home-text { margin-bottom: 10px; }
  .site-name { font-size: 100px; }
  
    .logo-img {
    max-width: 200px;
    width: 100%;
    height: auto;
  }
  .slogan {letter-spacing: 1px; padding-left: 40px; font-size: 16px;}
  
  .about-left, 
  .purpose-left, 
  .services {
    padding: 40px;
  }
  .about-right {
    padding-left: 30px;
    padding-top: 80px;
  }
  .purpose-left, 
  .purpose-right {
    min-height: 360px;
  }
  .purpose-note,
  .testimonials-header {
    font-size: 18px;
  }
  .purpose-note {    
    right: 28px;
    top: 148px;
  }
  .red-btn { margin-top: 30px; }
  .red-btn, 
  .blue-btn {
    height: 300px;
  }
  .contact { padding: 0 30px 30px; }
}

@media screen and (max-width: 800px) {
  h2 { margin-top: 20px; }
  .nav-container { position: static; }
  .nav-container .container { height: 80px; background-size: auto 80px; }

	#alt-phone {
	padding-top: 6px;
	font-size: 26px;
	float: left;
	margin-right: 0;
	margin-left: 20px;
}

  #home { padding-top: 0; }
  .home-right { padding-bottom: 50px; }
  .logo {
      top: 87px;
      left: 30px;
  }
  
  .logo-bg { max-width: 320px; }
  
  .home-right, 
  .purpose-left, 
  .purpose-right,
  .testimonials-left,
  .testimonials-right {
    height: auto;
  }  
  .home-left,
  .about-left, 
  .about-right {
    height: auto;
  }
  .about-right { text-align: center; }
  .about-right img {
    max-width: 402px;
    width: 100%;
    height: auto;
  }
  .about-left, 
  .about-right, 
  .purpose-left, 
  .services {
    padding: 50px 30px;
  }
  .about-right { padding-top: 0; }
  .red-btn { margin-top: 0; }
  .purpose-right { padding-top: 40px; }
  .purpose-note { top: 162px; }
  .contact {
    padding-left: 15px;
    padding-right: 15px;
  }
  #map-canvas { margin-top: 30px; }
  .copyright-container {
    float: right;
    max-width: 325px;
    width: 100%;
    margin-top: 68px;
    margin-right: 10px;
  }
  .copyright-text, 
  .copyright-text a {
    color: #fff;
  }
  .copyright-text, 
  .copyright-design {
    display: block;
    float: none;
    margin-top: 0;
    margin-right: 0;
  }
}

@media screen and (max-width: 420px){
	
	#alt-phone{
		float: none;
		padding-left: 10px;
		padding-top: 52px;
		font-size: 22px;
	}
}