/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  margin: 0;
  padding: 0;
  font-family: "Open Sans", sans-serif;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

button {
  border: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Raleway", sans-serif;
}

main{
  padding: 0;
  margin: 0;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  width: 100%;
  text-align: center;
  z-index: 9999999;
  -webkit-transition: .9s;
  transition: .9s;
}

.preloader .loader {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: inline-block;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 45%;
  -webkit-transform: translateY(-45%);
          transform: translateY(-45%);
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.preloader .loader .loader-outter {
  position: absolute;
  border: 4px solid #ffffff;
  border-left-color: transparent;
  border-bottom: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -webkit-animation: loader-outter 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
          animation: loader-outter 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
}

.preloader .loader .loader-inner {
  position: absolute;
  border: 4px solid #ffffff;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  left: calc(40% - 21px);
  top: calc(40% - 21px);
  border-right: 0;
  border-top-color: transparent;
  -webkit-animation: loader-inner 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
          animation: loader-inner 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
}

.preloader .loader .indicator {
  position: absolute;
  right: 0;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%) scale(1.5);
          transform: translateY(-50%) scale(1.5);
}

.preloader .loader .indicator svg polyline {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.preloader .loader .indicator svg polyline#back {
  stroke: #ffffff;
}

.preloader .loader .indicator svg polyline#front {
  stroke: gray;
  stroke-dasharray: 12, 36;
  stroke-dashoffset: 48;
  -webkit-animation: dash 1s linear infinite;
          animation: dash 1s linear infinite;
}

.preloader::before, .preloader::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 60%;
  z-index: -1;
  -webkit-transition: .9s;
  transition: .9s;
}

.preloader::after {
  left: auto;
  right: 0;
}

.preloader.preloader-deactivate {
  visibility: hidden;
}

.preloader.preloader-deactivate::after, .preloader.preloader-deactivate::before {
  width: 0;
}

.preloader.preloader-deactivate .loader {
  opacity: 0;
  visibility: hidden;
}

@-webkit-keyframes loader-outter {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes loader-outter {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@-webkit-keyframes loader-inner {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}

@keyframes loader-inner {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}

@-webkit-keyframes dash {
  62.5% {
    opacity: 0;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes dash {
  62.5% {
    opacity: 0;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.navbar{
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, .7);
}
.navbar ul li{
  padding-left: 10px;
  font-size: 16px;
}
.navbar ul li i{
  padding-right: 5px;
  font-size: 16px;
}

#flexSwitchCheckDefault{
  border: none;
}
#flexSwitchCheckDefault:focus{
  box-shadow: none;
}
.toggler{
  border: none;
}
.toggler:focus{
  box-shadow: none;
}

@media (max-width: 992px) {
  .nav-menu{
    text-align: center;
  }
  #flexSwitchCheckDefault{
    margin-left: 55px;
  }
  .offcanvas ul li{
    padding: 0;
  }
}

/*--------------------------------------------------------------
# Home Section
--------------------------------------------------------------*/
#home {
  width: 100%;
  text-align: center;
  margin-top: 120px;
}
#home .weather-prediction-bg{
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  border-radius: 6px;
  background-color: rgb(240, 239, 239);
}
#home .button-container.button-container-off{
  display: none;
}
#home .button-container.button-container-on{
  display: flex;
  justify-content: center;
}
#home .camera{
  border-radius: 6px;
  margin-bottom: 20px;
}
#home .camera.camera-off{
  display: none;
}
#home video{
  border-radius: 6px;
  max-width: 400px;
  height: 320px;
}
#home .preview-image{
  margin: 5px auto 20px;
  height: 320px;
  max-width: 500px;
  border-radius: 6px;
  background-color: rgb(197, 197, 197);
}
#home img{
  height: 100%;
  width: 95%;
}
#home .progress.bar-off{
  display: none;
}
#home .weather{
  margin-top: 20px;
  border: 1px solid gray;
  border-radius: 6px;
  height: auto;
}
#home h4{
  padding: 10px 0;
  margin: 0;
}
@media (max-width: 768px){
  #home .weather-prediction-bg{
    width: 300px;
    margin: 0 auto;
    padding: 5px;
  }
  #home .button-container label, #home .button-container button{
    font-size: 12px;
  }
  #home video{
    border-radius: 6px;
    width: 250px;
    height: 200px;
  }
  #home h4{
    font-size: 14px;
  }
}
/*--------------------------------------------------------------
# Home Section
--------------------------------------------------------------*/
.copyright{
  background-color: rgb(226, 226, 226);
  text-align: center;
  height: auto;
  margin-top: 100px;
  padding: 15px 0;
}
@media (max-width: 768px){
  .copyright{
    font-size: 12px;
  }
}