html,body {
    font-family: GothamPro;
    overflow-x: hidden;
}
.button:hover,
.button:focus {
    background: transparent;
    border: 2px solid #f48024;
    color: #fff;
}
section { outline: 0; }

/*
 * Hero block
 * --------------------------------------------------
 */
.hero {
    background: #000;
    color: #fff;
    min-height: 660px;
}
.hero a { color: #fff; }

/*
 * Header
 * --------------------------------------------------
 */
.hero header {
    padding: 30px 0;
}

/* Logo */
.hero header .logo {  text-transform: uppercase; font-size: 20px; font-weight: 600;  }
.hero header .logo span {  border-bottom: 2px solid #F48024;  }

/* Callback block */
.hero header .callback {  text-align: right;  }
#top-contc {
    margin-bottom: 15px;
}
/* Call to our phone */
.hero header .callback .cta {  font-size: 16px;  }
.hero header .callback .tel a {  font-size: 20px; color: #fff; text-decoration: none; }
/* Calllback button */
.hero header .callback .callto {  margin-top: 15px; padding: 5px 10px; background: #f48024; border: 0; outline: 0; border: 2px solid #f48024; font-size: 19px;  }
.hero header .callback .callto:hover { background: transparent;  color: #fff; transition: 0.4s; }

/* Hero content */
.hero .content h1 {  margin-top: 50px; font-size: 52px; font-weight: 400;  }
.hero .content a {    margin-top: 15px; padding: 6px 25px; background: #f48024; border: 0; outline: 0; border: 2px solid #f48024;  font-size: 25px;  text-decoration: none;}
.hero .content a:hover { background: transparent;  color: #fff; transition: 0.4s; }
.hero .content .glass { max-width: 350px; margin: 0 auto }



/*
 * About product
 * --------------------------------------------------
 */
.about {  padding: 50px 0  }

.about h2 {  margin-top: 0; font-size: 25px  }
.about .description {  font-size: 18px  }
.about .description li {  margin-bottom: 7px  }



/*
 * About product
 * --------------------------------------------------
 */
.about-2 {  padding: 50px 0  }
.about-2 h2 {  margin-top: 0; font-size: 25px  }
.about-2 .description {  font-size: 18px  }
.about-2 .description li {  margin-bottom: 7px  }



/*
 * About product
 * --------------------------------------------------
 */
.price h2 {  margin-bottom: 40px; font-size: 30px; text-align: center  }
.price .prices-block {  margin-top: 40px; font-family: Lobster  }
.price .prices-block .discount {  margin: 20px 0 0; font-family: GothamPro; font-size: 20px; text-align: center  }
.price .prices-block .price-col {  font-size: 23px; text-align: center  }

.price .prices-block .price-col .price-yellow {  font-size: 40px; color: #e19f47  }
.price .prices-block .price-col .price-desc-yellow {  color: #e19f47  }



/*
 * Contacts section
 * --------------------------------------------------
 */
.contacts {  padding: 50px 0  }
.contacts .info-block {  background: #f48024; color: #fff  }
.contacts .info-col {  margin: 0 auto; padding: 50px 0; max-width: 410px  }
.contacts .info-col h2 {  font-size: 27px; text-align: center  }
.contacts .info-col  p {  font-size: 17px; text-align: center  }
.contacts .info-col .details {  margin: 50px auto 0 auto  }
.contacts .info-col .details p {  font-size: 19px; font-weight: 600; text-align: left; color: #000  }
.contacts .info-col .details a {  font-size: 22px; color: #fff  }

.contacts .form-block {  background: #000; color: #fff  }
.contacts .form-col {  margin: 0 auto; padding: 50px 0; max-width: 410px  }
.contacts .form-col h2 {  font-size: 27px; text-align: center  }
.contacts .form-col p {  font-size: 17px; text-align: center  }

.contacts .form-col form {  margin: 50px auto 0 auto; max-width: 300px  }
.contacts .form-col form input {  margin-bottom: 20px; width: 100%; font-size: 20px; background: transparent; outline: 0; border: 0;
    border-bottom: 2px solid #f48024; position: relative  }


.contacts .form-col form input::-webkit-input-placeholder {text-indent: 0px; transition: text-indent 0.3s ease; color:#fff;}
.contacts .form-col form input::-moz-placeholder          {text-indent: 0px; transition: text-indent 0.3s ease; color:#fff;}
.contacts .form-col form input:-moz-placeholder           {text-indent: 0px; transition: text-indent 0.3s ease; color:#fff;}
.contacts .form-col form input:-ms-input-placeholder      {text-indent: 0px; transition: text-indent 0.3s ease; color:#fff;}

.contacts .form-col form input:focus::-webkit-input-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;}
.contacts .form-col form input:focus::-moz-placeholder          {text-indent: 500px; transition: text-indent 0.3s ease;}
.contacts .form-col form input:focus:-moz-placeholder           {text-indent: 500px; transition: text-indent 0.3s ease;}
.contacts .form-col form input:focus:-ms-input-placeholder      {text-indent: 500px; transition: text-indent 0.3s ease;}


.contacts .form-col form button {  margin: 10px 0 0 0; padding: 8px; background: #f48024; border: 2px solid #f48024; color: #000; width: 100%; font-size: 18px;  }
.contacts .form-col form button:hover { background: transparent; color: #fff; transition: 0.4s }

#callback .button.success { background: #0aaf6b; color: #fff; border: 2px solid #0aaf6b }
#callback .button.error { background: #e80b0b; color: #fff; border: 2px solid #e80b0b }

/*
 * Text block for SEO
 * --------------------------------------------------
 */
.text {
    padding: 50px 0;
    font-size: 15px;
}



/*
 * Row with equal height columns
 * --------------------------------------------------
 */
.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
}

/*
 * Media
 * --------------------------------------------------
 */
@media (max-width: 1200px) {
    .hero .content h1 {font-size: 43px;}
}
@media (max-width: 992px) {
    .row-eq-height {  display: block  }
    .hero header { padding: 20px 0;}
    .hero header .logo {  font-size: 35px; text-align: center  }
    .hero header .callback {  padding-top: 40px; text-align: center  }
    .hero header .callback .cta {display: block;font-size: 19px;}
    .hero header .callback .tel a {font-size: 23px;}
    .hero header .callback button {margin-top: 25px;font-size: 22px; }

    .hero .content .glass { margin-top: 50px}

    .about-img {  margin: 0 auto; max-width: 400px;  }

    .price .prices-block {margin: auto;max-width: none;}

    .about { padding-bottom: 0; }

    .contacts .info-col, .contacts .form-col {    padding: 40px 0;}
}
@media (max-width: 768px) {
    .hero .content h1 {font-size: 34px; text-align: center;}
    .hero .content .hbutton {text-align: center}
    .hero .content .glass {    max-width: 400px;margin-left: auto;}
}
@media (max-width: 485px) {
    .hero header .logo {font-size: 25px;}
    .price .prices-block .price-col .price-yellow {font-size: 32px;}
}
@media (max-width: 455px) {
    .hero .content .glass {max-width: 100%}
    .price-col-wrapper {width: 100%;}
    .price-col-wrapper:last-child {margin-top: 30px}
    .about-img {max-width: 100%}
}
@media (max-width: 380px) {
    .hero .content h1 {font-size: 28px;}
    .contacts .info-col, .contacts .form-col {padding: 30px 0;}
    .contacts .info-col h2, .contacts .form-col h2 {font-size: 23px;}
    .contacts .info-col .details p {font-size: 16px}
    .contacts .info-col .details a {font-size: 19px;}
}