@font-face {font-family: Gothic; src: url(../fonts/gothic.ttf);}
@font-face {font-family: Gothic; src: url(../fonts/gothic_bold.ttf); font-weight: bold;}
@font-face {font-family: Gothic; src: url(../fonts/gothic_italic.ttf); font-style: italic;}
@font-face {font-family: Montserrat; src: url(../fonts/montserrat.ttf);}
@font-face {font-family: Montserrat; src: url(../fonts/montserrat_b.ttf); font-weight: bold;}
@font-face {font-family: Montserrat; src: url(../fonts/montserrat_i.ttf); font-style: italic;}
* {margin: 0 auto;  padding: 0 auto;  border: 0 auto;}
html, body {height: 100%;}
body {background: #FFF; color: #555; font-family: 'Montserrat', sans-serif; font-size: 15px; max-width: 100%;}
a:link {color: #217E55; text-decoration: none;}
a:visited {color: #217E55;	text-decoration: none;}
a:hover, a:active, a:focus {text-decoration: none; color: #217E55;}
h1, h2, h3, h4, h5, h6 {font-family: 'Montserrat', sans-serif;}
.text-color {color: #217E55!important;}
.bg-color {background: #217E55; color: #FFF;}
.whole {width: 75%;}
.wrapper {min-height: 50%;}
.clear {clear: both;}
header {background: rgba(255,255,255,0.9); padding: 20px 0 15px 0;}
.header-fixed {position: fixed; padding: 5px 0; background: #FFF; width: 100%; top: 0; z-index: 9999; border-bottom: 1px solid #F1F1F1;}
#break-fixed {display: none; padding-top: 85px;}
#logo {float: left; font-size: 1.8em; paddin: 17px 0; margin-right: 20px;}
#logo a {color: #555;}
nav {float: right;}
nav ul {list-style: none; padding: 0; margin: 0}
nav ul li {display: inline-block; font-size: 13px; padding: 15px 9px; margin: 0;}
nav ul li:hover {color: #e60000;; transition: all 0.3s ease-in-out;}
nav ul li.active {color: #e60000;}
#menu-icon {float: right; cursor: pointer; display: none; padding: 15px 15px;}
.collapse {display: block;}
.slide {background-image: url('../images/bg.jpg'); background-color: #F9F9F9; color: #555; min-height: 450px; background-position: center; background-repeat: no-repeat; background-size: cover;}
.slide-2 {background-image: url('../images/bg.jpg'); background-color: #F9F9F9; color: #555; height: 250px; background-position: center; background-repeat: no-repeat; background-size: cover;}
.slide-bg {background-color: rgba(249,249,249,0.6); color: #555; height: 100%; min-height: 450px; background-position: center; background-repeat: no-repeat; background-size: cover;}
.slide h1 {font-size: 40px; font-weight: bold; margin-top: 50px; line-height: 120%;}
.slide p {font-size: 18px; padding: 15px 0;}
.slide-2 h1 {margin-top: 50px;}
a.btn-slide {background: #217E55; color: #FFF; padding: 12px 30px; border-radius: 40px; border: 2px solid #217E55;}
a.btn-slide:hover {background: transparent; color: #217E55; border: 2px solid #217E55; transition: all 0.3s ease-in-out;}
.btn-color {background: #217E55; color: #FFF!important; border: 2px solid #217E55; margin-bottom:5px;}
.btn-color:hover {background: transparent; color: #217E55!important; border: 2px solid #217E55; transition: all 0.3s ease-in-out;}
.btn-active {background: transparent; color: #217E55!important; border: 2px solid #217E55;}
.bg-f9 {background: #F9F9F9; padding: 50px 0;}
.bg-ff {background: #FFF; padding: 30px 0;}
.bg-services {margin-top: 20px; clear: both;}
.col-pad {margin-top: 50px;}
input[type=text], textarea {font-size: 13px; border: 1px solid #CCC; border-radius: 5px; width: 100%; padding: 10px; margin-bottom: 5px;}
input:hover, input:focus, textarea:hover, textarea:focus {border: 1px solid #217E55; box-shadow: 0 0 2px transparent; outline: none; transition: all 0.3s ease-in-out;}
textarea {resize: vertical;}
input, select, textarea, button {outline: none!important;}
.s-slider-container {position: relative;}
.s-slider-image {background-size: 100% 100%; width: 100%; max-height: 350px; padding: 1px 1px 6px 1px;}
.s-slider-image img {width: 100%; height: 100%;}
.s-slider-prev, .s-slider-next {cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: white!important; font-weight: bold; font-size: 18px; border-radius: 0 3px 3px 0; z-index: 9999;}
.s-slider-next {right:0; border-radius: 3px 0 0 3px}
.s-slider-prev:hover, .s-slider-next:hover {background: rgba(0,0,0,0.4); color: #f9f9f9; transition: 0.5s ease;}
.s-slider-imgdot {cursor: pointer; border: 1px solid #ccc; padding: 2px; margin: 5px 5px 5px 0; width: 50px; height: 50px; transition: 0.2s ease;}
.s-slider-imgdot img {width: 100%; height: 100%;}
.s-slider-imgdot:hover {border: 1px solid #e63900;}
.s-slider-dot .dot {height: 10px; width: 10px; margin: 0 2px; background-color: #FFF; border-radius: 50%; display: inline-block; transition: 0.6s ease; border: none;}
.s-slider-dot .active, slider-dot .dot:hover {background-color: #e63900;}
.imgdot-current {border: 1px solid #e63900;}
footer {background: #F9F9F9; color: #555; padding: 30px 0 2px 0;}
footer a:link, footer a:visited {color: #217E55;}
footer h5 {padding-bottom: 5px;}
footer ul {list-style: none; padding: 0;}
footer ul li {margin: 10px 0;}
footer ul li a:hover {color: #217E55; transition: all 0.3s ease-in-out;}
footer .sec {margin: 2px 0 10px 0; padding: 20px 0;}

@media screen and (max-width: 1200px) {
  .whole {width: 95%;}
  .slid {min-height: 55%;}
  .slide h1 {font-size: 30px;}
  .slide p {font-size: 16px;}
  a.btn-slide {padding: 10px 25px;}
  .services .col-sm-5 img {width: 75%}
}

@media screen and (max-width: 900px) {
  .whole {width: 90%;}
  .slide-bg {background: rgba(249,249,249,0.6);}
  .slide-content {width: 100%}
  .services .col-sm-7 {width: 75%}
  .services .col-sm-5 img {display: none}
}

@media screen and (max-width: 800px) {
  .whole {width: 90%;}
  #menu-icon {display: block;}
  nav {width: 100%; position: absolute; top: 59px; left: 0; background: rgba(255,255,255,0.96); z-index: 9999;}
  nav ul li {width: 100%; padding: 10px 6%;}
  nav ul:first-child {margin-top: 10px}
  nav ul:last-child {margin-bottom: 10px}
  .collapse {display: none;}
  .slide-bg {background: rgba(249,249,249,0.6);}
  .slide h1 {font-size: 30px;}
  .slide p {font-size: 16px;}
  a.btn-slide {padding: 10px 25px;}
  .services .col-sm-7 {width: 90%}
}

@media screen and (max-width: 780px) {
  .whole {width: 90%;}
  .services .col-sm-7 {width: 100%}
}

@media screen and (max-width: 780px) {
  .cols {border-bottom: 1px solid #F1F1F1;}
  .cols:last-child, .cols:first-child {border-bottom: none;}
}

@media screen and (max-width: 550px) {
  .slide h1 {font-size: 28px;}
  .slide p {font-size: 15px;}
}