/*--------------------------------------------------------------------------

	Project Name: Fogojet Cleaning Systems

--------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------*/
/* [TABLE OF CONTENTS]
/*
/*	1. VARIABLES & MIXINS
/*	2. COMMON
/*	3. BUTTONS & INPUTS
/*	4. HEADER
/*	5. SECTIONS
/*	6. HEADLINE & TOP SECTION
/*	7. COUNTDOWN
/*	8. FEATURES, ABOUT & CONTACT SECTIONS
/*	9. SWITCHER
/*	10. SWEET-ALERT
/*	11. MEDIA QUERIES
/*--------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------*/
/* 1. VARIABLES & MIXINS */
/*--------------------------------------------------------------------------*/
html, body {
  font-family: "Roboto Slab", serif;
  font-weight: 300;
  color: #666;
  font-size: 12px;
  line-height: 1.75em;
}

.xtratop { margin-top: 100px}

@media (min-width: 600px) {
  html, body {
    font-size: calc( 12px + (13 - 12) * ((100vw - 600px) / (1140 - 600)));
  }
}

@media (min-width: 1140px) {
  html, body {
    font-size: 13px;
  }
}

h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
}

p, blockquote, pre,
address,
dl, ol, ul,
table {
  margin-bottom: 1.75em;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Roboto Slab", serif;
  font-weight: 300;
  color: #333;
  clear: both;
}

h1 {
  font-size: 24.397254206px;
  margin-top: 1.0759407505em;
  line-height: 1.2911289006em;
  margin-bottom: 0.2151881501em;
}

@media (min-width: 600px) {
  h1 {
    font-size: calc( 24.397254206px + (26.4303587232 - 24.397254206) * ((100vw - 600px) / (1140 - 600)));
  }
}

@media (min-width: 1140px) {
  h1 {
    font-size: 26.4303587232px;
    margin-top: 1.0759407505em;
    line-height: 1.2911289006em;
    margin-bottom: 0.2151881501em;
  }
}

h2 {
  font-size: 21.1694224808px;
  margin-top: 1.2399960379em;
  line-height: 1.4879952454em;
  margin-bottom: 0.2831441258em;
}

@media (min-width: 600px) {
  h2 {
    font-size: calc( 21.1694224808px + (22.9335410208 - 21.1694224808) * ((100vw - 600px) / (1140 - 600)));
  }
}

@media (min-width: 1140px) {
  h2 {
    font-size: 22.9335410208px;
    margin-top: 1.2399960379em;
    line-height: 1.4879952454em;
    margin-bottom: 0.2804406706em;
  }
}

h3 {
  font-size: 18.3686428147px;
  margin-top: 1.4290658414em;
  line-height: 1.7148790097em;
  margin-bottom: 0.3324926924em;
}

@media (min-width: 600px) {
  h3 {
    font-size: calc( 18.3686428147px + (19.8993630493 - 18.3686428147) * ((100vw - 600px) / (1140 - 600)));
  }
}

@media (min-width: 1140px) {
  h3 {
    font-size: 19.8993630493px;
    margin-top: 1.4290658414em;
    line-height: 1.7148790097em;
    margin-bottom: 0.3289019598em;
  }
}

h4 {
  font-size: 15.9384149077px;
  margin-top: 1.6469642779em;
  line-height: 1.9763571335em;
  margin-bottom: 0.3913926575em;
}

@media (min-width: 600px) {
  h4 {
    font-size: calc( 15.9384149077px + (17.26661615 - 15.9384149077) * ((100vw - 600px) / (1140 - 600)));
  }
}

@media (min-width: 1140px) {
  h4 {
    font-size: 17.26661615px;
    margin-top: 1.6469642779em;
    line-height: 1.9763571335em;
    margin-bottom: 0.386623442em;
  }
}

h5 {
  font-size: 13.8297136229px;
  margin-top: 1.8980870259em;
  line-height: 2.2777044311em;
  margin-bottom: 0.3796174052em;
}

@media (min-width: 600px) {
  h5 {
    font-size: calc( 13.8297136229px + (14.9821897582 - 13.8297136229) * ((100vw - 600px) / (1140 - 600)));
  }
}

@media (min-width: 1140px) {
  h5 {
    font-size: 14.9821897582px;
    margin-top: 1.8980870259em;
    line-height: 2.2777044311em;
    margin-bottom: 0.3796174052em;
  }
}

h6 {
  font-size: 12px;
  margin-top: 2.1875em;
  line-height: 2.625em;
  margin-bottom: 0.5104166667em;
}

@media (min-width: 600px) {
  h6 {
    font-size: calc( 12px + (13 - 12) * ((100vw - 600px) / (1140 - 600)));
  }
}

@media (min-width: 1140px) {
  h6 {
    font-size: 13px;
    margin-top: 2.1875em;
    line-height: 2.625em;
    margin-bottom: 0.4739583333em;
  }
}

blockquote {
  font-style: italic;
}

blockquote cite {
  display: block;
  font-style: normal;
}

pre {
  padding: 0.875em;
  margin-bottom: 1.75em;
}

pre code {
  padding: 0;
}

code {
  font-family: "Courier New", "Courier", "Lucida Sans Typewriter", "Lucida Typewriter", "monospace";
  padding: 0.0875em 0.2625em;
  line-height: 0;
}

big, small, sub, sup {
  line-height: 0;
}

abbr, acronym {
  border-bottom: 1px dotted currentColor;
  cursor: help;
}

address {
  font-style: normal;
}

dt {
  color: #333;
  font-weight: bold;
}

ul {
  padding-left: 1.1em;
}

ol {
  padding-left: 1.4em;
}

fieldset {
  padding: 0.875em 1.75em 1.75em;
  border-width: 1px;
  border-style: solid;
  max-width: 100%;
  margin-bottom: 1.8846153846em;
}

@media (min-width: 1140px) {
  fieldset {
    margin-bottom: 2.0192307692em;
  }
}

fieldset button, fieldset input[type="submit"] {
  margin-bottom: 0;
}

legend {
  color: #333;
  font-weight: bold;
}

input[type="text"], input[type="email"], input[type="password"], textarea {
  display: block;
  max-width: 100%;
  padding: 0.4375em;
  font-size: 12px;
  margin-bottom: 1.3461538462em;
}

@media (min-width: 600px) {
  input[type="text"], input[type="email"], input[type="password"], textarea {
    font-size: calc( 12px + (13 - 12) * ((100vw - 600px) / (1140 - 600)));
  }
}

@media (min-width: 1140px) {
  input[type="text"], input[type="email"], input[type="password"], textarea {
    font-size: 13px;
    margin-bottom: 0.5552884615em;
  }
}

input[type="submit"], button {
  display: block;
  cursor: pointer;
  font-size: 12px;
  padding: 0.4375em 1.75em;
  margin-bottom: 1.1105769231em;
}

@media (min-width: 600px) {
  input[type="submit"], button {
    font-size: calc( 12px + (13 - 12) * ((100vw - 600px) / (1140 - 600)));
  }
}

@media (min-width: 1140px) {
  input[type="submit"], button {
    font-size: 13px;
    margin-bottom: 1.3125em;
  }
}

label {
  display: block;
  padding-bottom: 0.21875em;
  margin-bottom: -0.1009615385em;
}

table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  margin-bottom: 2.4230769231em;
}

@media (min-width: 1140px) {
  table {
    margin-bottom: 2.1538461538em;
  }
}

th {
  text-align: left;
  color: #333;
  padding: 0.21875em 0.875em;
}

@media (min-width: 1140px) {
  th {
    padding: 0.4375em 0.875em;
  }
}

td {
  padding: 0.875em;
  padding: 0.21875em 0.875em;
}

@media (min-width: 1140px) {
  td {
    padding: 0.4375em 0.875em;
  }
}

/* @include grid-overlay(red, 19); */
/*--------------------------------------------------------------------------*/
/* 2. COMMON */
/*--------------------------------------------------------------------------*/
body {
  letter-spacing: 1px;
}

.text-muted {
  color: #525252;
}

::-moz-selection {
  background-color: #ed1c24;
  color: #fff;
}

::selection {
  background-color: #ed1c24;
  color: #fff;
}

ul {
  list-style: none;
}

a {
  text-decoration: none !important;
}

.mbn {
  margin-bottom: 0 !important;
}

.mb10 {
  margin-bottom: 10px !important;
}

.mb20 {
  margin-bottom: 20px !important;
}

.mb30 {
  margin-bottom: 30px !important;
}

.mb40 {
  margin-bottom: 40px !important;
}

.mb50 {
  margin-bottom: 50px !important;
}

.mb60 {
  margin-bottom: 60px !important;
}

.mtn {
  margin-top: 0 !important;
}

.mt10 {
  margin-top: 10px !important;
}

.mt20 {
  margin-top: 20px !important;
}

.mt30 {
  margin-top: 30px !important;
}

.mt40 {
  margin-top: 40px !important;
}

.mt50 {
  margin-top: 50px !important;
}

.mt60 {
  margin-top: 60px !important;
}

.mln {
  margin-left: 0;
}

.ml10 {
  margin-left: 10px;
}

.ml20 {
  margin-left: 20px;
}

.ml30 {
  margin-left: 30px;
}

.ml40 {
  margin-left: 40px;
}

.ml50 {
  margin-left: 50px;
}

.ml60 {
  margin-left: 60px;
}

.mrn {
  margin-right: 0;
}

.mr10 {
  margin-right: 10px;
}

.mr20 {
  margin-right: 20px;
}

.mr30 {
  margin-right: 30px;
}

.mr40 {
  margin-right: 40px;
}

.mr50 {
  margin-right: 50px;
}

.mr60 {
  margin-right: 60px;
}

.pbn {
  padding-bottom: 0 !important;
}

.pb10 {
  padding-bottom: 10px;
}

.pb20 {
  padding-bottom: 20px;
}

.pb30 {
  padding-bottom: 30px;
}

.pb40 {
  padding-bottom: 40px;
}

.pb50 {
  padding-bottom: 50px;
}

.pb60 {
  padding-bottom: 60px;
}

.pb70 {
  padding-bottom: 70px;
}

.pb80 {
  padding-bottom: 80px;
}

.ptn {
  padding-top: 0 !important;
}

.pt10 {
  padding-top: 10px;
}

.pt20 {
  padding-top: 20px;
}

.pt30 {
  padding-top: 30px;
}

.pt40 {
  padding-top: 40px;
}

.pt50 {
  padding-top: 50px;
}

.pt60 {
  padding-top: 60px;
}

.pt70 {
  padding-top: 70px;
}

.pt80 {
  padding-top: 80px;
}

.pt90 {
  padding-top: 90px;
}

.pln {
  padding-left: 0;
}

.pl10 {
  padding-left: 10px;
}

.pl20 {
  padding-left: 20px;
}

.pl30 {
  padding-left: 30px;
}

.pl40 {
  padding-left: 40px;
}

.pl50 {
  padding-left: 50px;
}

.pl60 {
  padding-left: 60px;
}

.prn {
  padding-right: 0;
}

.pr10 {
  padding-right: 10px;
}

.pr20 {
  padding-right: 20px;
}

.pr30 {
  padding-right: 30px;
}

.pr40 {
  padding-right: 40px;
}

.pr50 {
  padding-right: 50px;
}

.pr60 {
  padding-right: 60px;
}

.underline {
  position: relative;
  padding-bottom: 0.667em;
  margin-bottom: 1.5em;
}

.underline:after {
  content: "";
  width: 32px;
  height: 1px;
  background: #525252;
  position: absolute;
  bottom: 0;
  left: 0;
}

.full-underline::after {
  width: 100%;
}

.longer-underline::after {
  width: 60px;
}

.text-center .underline::after {
  width: 4%;
  left: 48%;
}

.text-center .longer-underline::after {
  width: 8%;
  left: 46%;
}

p {
  color: #525252;
}

/*--------------------------------------------------------------------------*/
/* 3. BUTTONS & INPUTS */
/*--------------------------------------------------------------------------*/
button, input[type="button"], input[type="reset"], input[type="submit"] {
  background-color: #ed1c24;
  color: #fff;
  border: 1px solid #ed1c24;
  outline: none;
  -webkit-transition: all 0.4s cubic-bezier(0.47, 0, 0.745, 0.715);
  transition: all 0.4s cubic-bezier(0.47, 0, 0.745, 0.715);
}

button:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus,
button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover {
  background-color: #fff;
  color: #ed1c24;
  border-color: #ed1c24;
  outline: none;
}

button:active, input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active {
  background-color: #fff;
  color: #ed1c24;
  border-color: #ed1c24;
  outline: none;
}

.sr-btn {
  display: inline-block;
  margin: 0 0.667em;
  min-height: 3.375em;
  outline: none;
  background-color: #ed1c24;
  color: #fff;
  border: 1px solid #ed1c24;
  -webkit-transition: all 0.4s cubic-bezier(0.47, 0, 0.745, 0.715);
  transition: all 0.4s cubic-bezier(0.47, 0, 0.745, 0.715);
}

.sr-btn:hover {
  background-color: #fff;
  color: #ed1c24;
  border-color: #ed1c24;
}

.sr-btn:active {
  background-color: #fff;
  color: #ed1c24;
  border-color: #ed1c24;
}

.sr-btn .icon {
  font-size: 1.5em;
  margin-right: 5px;
}

.sr-btn.white-btn {
  background-color: #fff;
  color: #ed1c24;
  border-color: #fff;
}

.sr-btn.white-btn:hover {
  background-color: #1d6fa5;
  color: #fff;
  border-color: #1d6fa5;
}

.sr-btn.white-btn:active {
  background-color: #1d6fa5;
  color: #fff;
  border-color: #1d6fa5;
}

input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]), textarea {
  border: 0px;
  min-height: 3.375em;
  width: 100%;
  padding: 0 1em;
}

input[type="color"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="email"]:focus, input[type="month"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="week"]:focus, input:not([type]):focus, textarea:focus,
input[type="color"]:hover, input[type="date"]:hover, input[type="datetime"]:hover, input[type="datetime-local"]:hover, input[type="email"]:hover, input[type="month"]:hover, input[type="number"]:hover, input[type="password"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="text"]:hover, input[type="time"]:hover, input[type="url"]:hover, input[type="week"]:hover, input:not([type]):hover, textarea:hover {
  border: 0px;
  outline: none;
}

input[type="color"]:active, input[type="date"]:active, input[type="datetime"]:active, input[type="datetime-local"]:active, input[type="email"]:active, input[type="month"]:active, input[type="number"]:active, input[type="password"]:active, input[type="search"]:active, input[type="tel"]:active, input[type="text"]:active, input[type="time"]:active, input[type="url"]:active, input[type="week"]:active, input:not([type]):active, textarea:active {
  border: 0px;
}

/*--------------------------------------------------------------------------*/
/* 4. HEADER */
/*--------------------------------------------------------------------------*/
.header {
  position: fixed;
  width: 100%;
  height: 80px;
  padding: 20px 0;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  z-index: 101;
}

.header img {
  height: 40px;
}

.light-header .dark-logo {
  display: none;
}

.dark-header .dark-logo {
  display: none;
}

.social-btn {
  color: #fff;
  font-size: 20px;
  margin: 10px;
  line-height: 40px;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.social-btn:hover {
  color: #323232;
}

.fp-viewing-1.light-header .header, .fp-viewing-2.light-header .header, .fp-viewing-3.light-header .header {
  background: #fff;
  height: 50px;
  padding: 5px 0px;
  box-shadow: 0 5px 20px 5px rgba(0, 0, 0, 0.05);
}

.fp-viewing-1.light-header .social-btn, .fp-viewing-2.light-header .social-btn, .fp-viewing-3.light-header .social-btn {
  color: #323232;
}

.fp-viewing-1.light-header .social-btn:hover, .fp-viewing-2.light-header .social-btn:hover, .fp-viewing-3.light-header .social-btn:hover {
  color: #ed1c24;
}

.fp-viewing-1.light-header .light-logo, .fp-viewing-2.light-header .light-logo, .fp-viewing-3.light-header .light-logo {
  display: none;
}

.fp-viewing-1.light-header .dark-logo, .fp-viewing-2.light-header .dark-logo, .fp-viewing-3.light-header .dark-logo {
  display: inline-block;
}

.fp-viewing-1.dark-header .header, .fp-viewing-2.dark-header .header, .fp-viewing-3.dark-header .header {
  background: #323232;
  height: 50px;
  padding: 5px 0px;
  box-shadow: 0 5px 20px 5px rgba(0, 0, 0, 0.05);
}

.fp-viewing-1.dark-header .social-btn, .fp-viewing-2.dark-header .social-btn, .fp-viewing-3.dark-header .social-btn {
  color: #fff;
}

.fp-viewing-1.dark-header .social-btn:hover, .fp-viewing-2.dark-header .social-btn:hover, .fp-viewing-3.dark-header .social-btn:hover {
  color: #ed1c24;
}

.fp-viewing-1.dark-header .dark-logo, .fp-viewing-2.dark-header .dark-logo, .fp-viewing-3.dark-header .dark-logo {
  display: none;
}

.fp-viewing-1.dark-header .light-logo, .fp-viewing-2.dark-header .light-logo, .fp-viewing-3.dark-header .light-logo {
  display: inline-block;
}

.fixed-header.light-header .header {
  background: #fff;
  height: 50px;
  padding: 5px 0px;
  box-shadow: 0 5px 20px 5px rgba(0, 0, 0, 0.05);
}

.fixed-header.light-header .social-btn {
  color: #323232;
}

.fixed-header.light-header .social-btn:hover {
  color: #ed1c24;
}

.fixed-header.light-header .light-logo {
  display: none;
}

.fixed-header.light-header .dark-logo {
  display: inline-block;
}

.fixed-header.dark-header .header {
  background: #323232;
  height: 50px;
  padding: 5px 0px;
  box-shadow: 0 5px 20px 5px rgba(0, 0, 0, 0.05);
}

.fixed-header.dark-header .social-btn {
  color: #fff;
}

.fixed-header.dark-header .social-btn:hover {
  color: #ed1c24;
}

.fixed-header.dark-header .dark-logo {
  display: none;
}

.fixed-header.dark-header .light-logo {
  display: inline-block;
}

/*--------------------------------------------------------------------------*/
/* 5. SECTIONS */
/*--------------------------------------------------------------------------*/
.content-section:nth-of-type(even) {
  background-color: #fff;
}

.content-section:nth-of-type(odd) {
  background-color: #fff;
}

#fp-nav ul li a span,
.fp-slidesNav ul li a span {
  background: rgba(255, 255, 255, 0.3);
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
}

#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span {
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  background: rgba(185, 5, 5, 1.0);
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 1.0);
}

#fp-nav ul li .fp-tooltip {
  font-family: "Roboto Slab", serif;
  top: -8px;
  color: #b90505;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(185, 5, 5, 1.0);
}

.section-title {
  margin-bottom: 2.25em;
}

.section-title p {
  color: black;
}

/*--------------------------------------------------------------------------*/
/* 6. HEADLINE & HEAD SECTION */
/*--------------------------------------------------------------------------*/
.particles-div {
  background-color: #1d6fa5;
  background-image: -webkit-linear-gradient(#1d6fa5, #ed1c24);
  background-image: linear-gradient(#1d6fa5, #ed1c24);
  position: relative;
  z-index: 1;
}

.particles-div canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.headline {
  color: #fff;
  font-size: 5.63em;
  text-shadow: 1px 3px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
  margin-top: 0;
}

.headline small {
  text-transform: capitalize;
  font-size: 0.444em;
  display: block;
  margin-top: 1em;
  color: rgba(255, 255, 255, 0.75);
}

.static-img-div {
  background: url(../images/Image_02.jpg);
  background-color: rgba(0, 0, 0, 0.5);
  background-size: cover;
  background-attachment: fixed;
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}

.solid-color-div {
  background-color: #ed1c24 !important;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.solid-color-div .bg-icon {
  font-size: 38.443em;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
}

.gradient-div {
  background-color: #217dbb;
  background-image: -webkit-linear-gradient(#217dbb, #ed1c24);
  background-image: linear-gradient(#217dbb, #ed1c24);
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.gradient-div .bg-icon {
  font-size: 38.443em;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
}

/*IE FIX FOR particles-div */
.particles-div .content {
  position: relative;
  z-index: 5;
}

.particles-div canvas {
  z-index: 1;
}

.content-section {
  position: relative;
  z-index: 5;
}

/*--------------------------------------------------------------------------*/
/* 7. COUNTDOWN */
/*--------------------------------------------------------------------------*/
.countdown {
  background: transparent;
  color: #fff;
  border: 0px;
  margin-top: 2.25em;
  font-size: 1em;
  font-weight: 400 !important;
  text-shadow: 1px 3px 6px rgba(0, 0, 0, 0.1);
}

.countdown span {
  font-size: 3.375em;
}

.countdown .countdown-section {
  border-left: 1px dashed rgba(0, 0, 0, 0.5);
  display: inline-block;
  width: 20%;
  text-align: center;
  padding: 1em 0;
}

.countdown .countdown-section:last-child {
  border-right: 1px dashed rgba(0, 0, 0, 0.5);
}

.notify-div {
  margin-top: 3.375em;
  text-align: center;
}

.notify-div input {
  width: 300px;
  display: inline-block;
}

/*--------------------------------------------------------------------------*/
/* 8. FEATURES, ABOUT & CONTACT SECTIONS */
/*--------------------------------------------------------------------------*/
.bg-icon {
  position: absolute;
  font-size: 25.629em;
  color: rgba(255, 255, 255, 0.5);
  opacity: 0.2;
  top: -30px;
  right: -25px;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transition: all 0.4s cubic-bezier(0.47, 0, 0.745, 0.715);
  transition: all 0.4s cubic-bezier(0.47, 0, 0.745, 0.715);
}

.feature-left-icon {
  background: #ed1c24;
  padding: 1em 0;
  position: relative;
}

.feature-left-icon .icon {
  color: #fff;
  font-size: 5.063em;
  width: 80px;
  display: inline-block;
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}

.feature-left-icon p {
  color: #f2f2f2;
}

.feature-left-icon .feature-title {
  margin-top: 0px;
  color: #fff;
}

.feature-left-icon .bg-icon {
  font-size: 17.086em;
  top: 5px;
  right: -5px;
  -webkit-transition: all 0.4s cubic-bezier(0.47, 0, 0.745, 0.715);
  transition: all 0.4s cubic-bezier(0.47, 0, 0.745, 0.715);
}

.feature-left-icon:before {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  border: 2px solid #16527a;
  top: -4px;
  left: -4px;
  border-width: 2px 0 0 2px !important;
  -webkit-transition: all 0.4s cubic-bezier(0.47, 0, 0.745, 0.715);
  transition: all 0.4s cubic-bezier(0.47, 0, 0.745, 0.715);
}

.feature-left-icon:after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  border: 2px solid #16527a;
  bottom: -4px;
  right: -4px;
  border-width: 0 2px 2px 0 !important;
  -webkit-transition: all 0.4s cubic-bezier(0.47, 0, 0.745, 0.715);
  transition: all 0.4s cubic-bezier(0.47, 0, 0.745, 0.715);
}

.feature-left-icon:hover:before {
  width: 80%;
  height: 80%;
}

.feature-left-icon:hover::after {
  width: 80%;
  height: 80%;
}

.feature-left-icon:hover .bg-icon {
  font-size: 25.629em;
}

.sr-box {
  background: #323232;
  padding: 2em;
  color: #fff;
  position: relative;
}

.sr-box h4 {
  color: #fff;
}

.sr-box p {
  color: #cccccc;
}

.sr-box:before {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  border: 2px solid #323232;
  top: -4px;
  left: -4px;
  border-width: 2px 0 0 2px !important;
  -webkit-transition: all 0.4s cubic-bezier(0.47, 0, 0.745, 0.715);
  transition: all 0.4s cubic-bezier(0.47, 0, 0.745, 0.715);
}

.sr-box:after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  border: 2px solid #323232;
  bottom: -4px;
  right: -4px;
  border-width: 0 2px 2px 0 !important;
  -webkit-transition: all 0.4s cubic-bezier(0.47, 0, 0.745, 0.715);
  transition: all 0.4s cubic-bezier(0.47, 0, 0.745, 0.715);
}

.sr-box:hover:before {
  width: 80%;
  height: 80%;
}

.sr-box:hover::after {
  width: 80%;
  height: 80%;
}

.sr-box:hover .bg-icon {
  font-size: 38.443em;
}

.content-section .social-btn {
  color: #323232 !important;
}

.contact-us-form input, .contact-us-form textarea {
  margin-bottom: 1.5em;
}

.intro-para p {
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
}

/*--------------------------------------------------------------------------*/
/* 9. SWITCHER */
/*--------------------------------------------------------------------------*/
.switcher {
  position: fixed;
  top: 100px;
  padding: 20px;
  left: -200px;
  background: #323232;
  width: 200px;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  box-shadow: 0 5px 20px 5px rgba(0, 0, 0, 0.05);
}

.switcher .handle {
  position: absolute;
  right: -40px;
  width: 40px;
  height: 40px;
  color: #f2f2f2;
  font-size: 26px;
  line-height: 40px;
  background: #323232;
  text-align: center;
  cursor: pointer;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  box-shadow: 0 5px 20px 5px rgba(0, 0, 0, 0.05);
}

.switcher p {
  color: #f2f2f2;
}

.switcher h5 {
  font-size: 14px;
  color: #fff;
}

.switcher .color {
  width: 25px;
  height: 25px;
  display: inline-block;
  margin: 5px;
  cursor: pointer;
}

.switcher .alizarin {
  background: #e74c3c;
}

.switcher .torquoise {
  background: #1abc9c;
}

.switcher .sunflower {
  background: #f1c40f;
}

.switcher .carrot {
  background: #e67e22;
}

.switcher .peterriver {
  background: #ed1c24;
}

.switcher .wisteria {
  background: #8e44ad;
}

.switcher .nephritis {
  background: #27ae60;
}

.switcher .midnightblue {
  background: #2c3e50;
}

.switcher .switch-header {
  padding: 5px 10px;
  border: 1px solid #f2f2f2;
  display: block;
  text-align: center;
  margin: 10px;
  cursor: pointer;
  font-size: 13px;
  color: #f2f2f2;
}

.switcher p {
  font-size: 11px;
}

.switcher p a {
  color: #fff;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.switcher p a:hover {
  color: #ed1c24;
}

/*--------------------------------------------------------------------------*/
/* 10. SWEET ALERT */
/*--------------------------------------------------------------------------*/
.sweet-alert {
  border-radius: 0px;
  font-family: "Roboto Slab", serif;
}

.sweet-alert button, .sweet-alert input[type="button"], .sweet-alert input[type="reset"], .sweet-alert input[type="submit"] {
  border-left-color: #ed1c24 !important;
  border-right-color: #ed1c24 !important;
  background-color: #ed1c24 !important;
}

.sweet-alert button.styled {
  border-radius: 0px;
  margin: auto;
}

/*--------------------------------------------------------------------------*/
/* 11. MEDIA QUERIES */
/*--------------------------------------------------------------------------*/
@media only screen and (max-width: 768px) {
  .headline {
    font-size: 3.375em !important;
  }
  .feature-left-icon {
    margin-bottom: 2em;
  }
  .sr-box {
    margin-bottom: 2em;
  }
}