@font-face {
  font-family: 'weather';
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot");
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot?#iefix") format("embedded-opentype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.woff") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.ttf") format("truetype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.svg#artill_clean_weather_iconsRg") format("svg");
  font-weight: normal;
  font-style: normal; }

.icon-0:before {
  content: ":"; }

.icon-1:before {
  content: "p"; }

.icon-2:before {
  content: "S"; }

.icon-3:before {
  content: "Q"; }

.icon-4:before {
  content: "S"; }

.icon-5:before {
  content: "W"; }

.icon-6:before {
  content: "W"; }

.icon-7:before {
  content: "W"; }

.icon-8:before {
  content: "W"; }

.icon-9:before {
  content: "I"; }

.icon-10:before {
  content: "W"; }

.icon-11:before {
  content: "I"; }

.icon-12:before {
  content: "I"; }

.icon-13:before {
  content: "I"; }

.icon-14:before {
  content: "I"; }

.icon-15:before {
  content: "W"; }

.icon-16:before {
  content: "I"; }

.icon-17:before {
  content: "W"; }

.icon-18:before {
  content: "U"; }

.icon-19:before {
  content: "Z"; }

.icon-20:before {
  content: "Z"; }

.icon-21:before {
  content: "Z"; }

.icon-22:before {
  content: "Z"; }

.icon-23:before {
  content: "Z"; }

.icon-24:before {
  content: "E"; }

.icon-25:before {
  content: "E"; }

.icon-26:before {
  content: "3"; }

.icon-27:before {
  content: "a"; }

.icon-28:before {
  content: "A"; }

.icon-29:before {
  content: "a"; }

.icon-30:before {
  content: "A"; }

.icon-31:before {
  content: "6"; }

.icon-32:before {
  content: "1"; }

.icon-33:before {
  content: "6"; }

.icon-34:before {
  content: "1"; }

.icon-35:before {
  content: "W"; }

.icon-36:before {
  content: "1"; }

.icon-37:before {
  content: "S"; }

.icon-38:before {
  content: "S"; }

.icon-39:before {
  content: "S"; }

.icon-40:before {
  content: "M"; }

.icon-41:before {
  content: "W"; }

.icon-42:before {
  content: "I"; }

.icon-43:before {
  content: "W"; }

.icon-44:before {
  content: "a"; }

.icon-45:before {
  content: "S"; }

.icon-46:before {
  content: "U"; }

.icon-47:before {
  content: "S"; }

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0; }

body {
  font-family: "Montserrat", "Monotype Corsiva"; }

.form-body {
  background-image: url("../images/background.jpg");
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%; }

.wrap {
  max-width: 1170px;
  margin: auto;
  padding: 15px; }

.sign_in {
  background-color: rgba(4, 3, 55, 0.6);
  height: 100vh; }

.main_title {
  color: #fff;
  text-align: center;
  margin-top: 50px;
  font-size: 30px; }

.custom-form {
  font-size: 30px;
  max-width: 1170px;
  margin: 20px auto;
  padding: 40px;
  border-radius: 4px;
  outline: none; }

.custom-form .form-group {
  position: relative;
  padding-top: 16px;
  margin-bottom: 16px; }

.custom-form .form-group .animated-label {
  position: absolute;
  top: 20px;
  left: 0;
  bottom: 0;
  z-index: 2;
  text-align: center;
  width: 100%;
  font-weight: 300;
  opacity: 0.5;
  cursor: text;
  color: #fff;
  transition: 0.2s ease all;
  margin: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none; }

.custom-form .form-group .animated-label:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 45%;
  height: 2px;
  width: 10px;
  visibility: hidden;
  background-color: #8e44ad;
  transition: 0.2s ease all; }

.custom-form .form-group.not-empty .animated-label {
  top: 0;
  font-size: 25px; }

.custom-form .form-group .form-control {
  position: relative;
  z-index: 1;
  border-radius: 0;
  border-width: 0 0 1px;
  border-bottom-color: rgba(0, 0, 0, 0.25);
  background-color: transparent;
  height: 120px;
  font-size: 35px;
  color: #fff;
  text-align: center;
  padding: 3px 0 5px;
  width: 100%;
  outline: none; }

#user:focus, #pass:focus {
  box-shadow: none;
  border-bottom-color: rgba(0, 0, 0, 0.12); }

#user:focus ~ .animated-label, #pass:focus ~ .animated-label {
  top: 0;
  opacity: 1;
  color: #8e44ad;
  font-size: 25px;
  text-align: center; }

#user:focus ~ .animated-label:after, #pass:focus ~ .animated-label:after {
  visibility: visible;
  width: 100%;
  left: 0; }

.no_user {
  margin: auto;
  display: block;
  width: 100%;
  color: red;
  text-align: center;
  margin-bottom: 7px;
  font-size: 14px; }

.signin_button {
  width: 250px;
  height: 50px;
  background-color: #420547;
  color: #fff;
  border: none;
  font-size: 25px;
  display: block;
  text-align: center;
  margin: auto; }
  .signin_button:hover {
    cursor: pointer; }

.register_link {
  text-align: center;
  color: #fff;
  display: block;
  font-size: 16px;
  padding: 10px;
  text-decoration: none; }

.welcome_home {
  background-image: url("../images/house.jpg");
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100vh;
  padding-top: 40px; }

.welcome_block {
  width: 100%;
  height: auto;
  background-color: rgba(0, 0, 0, 0.5); }

.welcome_title {
  color: #fff;
  text-align: center;
  font-size: 30px;
  padding: 20px; }

.welcome_info {
  color: #bccdff;
  text-align: center;
  font-size: 20px;
  padding: 20px; }
  .welcome_info .go_admin {
    cursor: pointer;
    display: block;
    color: #dedede; }

.rooms {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap; }

#living_room, #bedroom, #dining_room, #kitchen {
  position: relative;
  width: calc(50% - 20px);
  height: 0;
  padding-top: 40%;
  overflow: hidden;
  margin: 10px;
  border: 2px solid #fff;
  box-shadow: 6px 7px 72px -2px #7a5370;
  transition: all .4s ease; }
  #living_room img, #bedroom img, #dining_room img, #kitchen img {
    position: absolute;
    height: 100%;
    width: auto;
    top: 0; }
  #living_room:hover .room_description, #bedroom:hover .room_description, #dining_room:hover .room_description, #kitchen:hover .room_description {
    visibility: visible;
    opacity: 1; }
    #living_room:hover .room_description h2, #bedroom:hover .room_description h2, #dining_room:hover .room_description h2, #kitchen:hover .room_description h2 {
      font-size: 20px; }

.room_description {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  display: flex;
  visibility: none;
  opacity: 0;
  transition: all 0s ease; }
  .room_description h2 {
    color: #fff;
    font-size: 10px;
    transition: all .6s ease; }
  .room_description .room_button {
    width: 50%;
    height: 30px;
    margin: 0 20%;
    background-color: #466755;
    box-shadow: 2px 3px 8.1px 1.9px rgba(0, 0, 0, 0.75);
    color: #fff;
    border: none;
    font-size: 12px; }

.room_info .room_description {
  visibility: visible;
  opacity: 1; }
  .room_info .room_description h2 {
    font-size: 20px; }

.modal-room {
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.9);
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
  opacity: 0;
  visibility: hidden;
  transition: all 1s ease-in; }

.modal-room-show {
  opacity: 1;
  visibility: visible; }

.modal-content {
  background-color: #f0f0f0;
  border-radius: 12px;
  width: 50%;
  min-width: 300px;
  height: 0;
  transition: all .5s ease;
  position: relative; }

.modal-header {
  background-color: #383838;
  color: #fff;
  border-radius: 12px 12px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: all 1s ease; }
  .modal-header .modal-header-icon {
    font-size: 30px;
    margin-right: 10px;
    color: #fff; }
  .modal-header .modal-title {
    font-size: 25px; }

.modal-content-show {
  height: auto; }

.modal-header-show {
  opacity: 1;
  visibility: visible; }

.close-modal {
  width: 30px;
  height: 30px;
  font-size: 50px;
  font-family: 'Indie Flower', cursive;
  position: absolute;
  right: -15px;
  top: -40px;
  border-radius: 50%;
  border: none;
  background-color: transparent;
  color: #fff;
  outline: none; }

.modal-manage {
  padding: 20px; }

.manage-title {
  display: flex;
  align-items: center;
  font-size: 16px;
  margin-top: 10px; }
  .manage-title .icon {
    font-size: 40px;
    padding-right: 10px;
    width: 60px;
    text-align: center; }

.manage-block {
  display: flex;
  align-items: center;
  justify-content: space-between; }

.manage-switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 10px; }
  .manage-switch input {
    display: none; }

.manage-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  box-shadow: 0px 0px 0px 3px rgba(252, 252, 252, 0.89), 0px 0px 7px 3px rgba(57, 57, 57, 0.3) inset;
  -webkit-transition: .2s;
  transition: .2s;
  border-radius: 34px; }
  .manage-slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    top: -8px;
    background-color: #fff;
    -webkit-transition: .2s;
    transition: .2s;
    border-radius: 50%;
    box-shadow: 0px 0px 14.73px 0.27px rgba(57, 57, 57, 0.75); }

.manage-switch input:checked + .manage-slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
  box-shadow: 0px 0px 14.73px 0.27px rgba(250, 250, 250, 0.75); }

.ceil .manage-switch input:checked + .manage-slider {
  background-color: #ff95bd; }

.ceil .manage-switch input:focus + .manage-slider {
  box-shadow: 0 0 1px #ff95bd; }

.ceil .manage-switch input:checked + .manage-slider:before {
  background-color: #ba2754; }

.ceil .icon {
  color: #ba2754; }

.table-lamp .manage-switch input:checked + .manage-slider {
  background-color: #afb8ff; }

.table-lamp .manage-switch input:focus + .manage-slider {
  box-shadow: 0 0 10px #afb8ff; }

.table-lamp .manage-switch input:checked + .manage-slider:before {
  background-color: #004a85; }

.table-lamp .icon {
  color: #004a85; }

.tv-light .manage-switch input:checked + .manage-slider {
  background-color: #51c060; }

.tv-light .manage-switch input:focus + .manage-slider {
  box-shadow: 0 0 10px #51c060; }

.tv-light .manage-switch input:checked + .manage-slider:before {
  background-color: #1b7012; }

.tv-light .icon {
  color: #1b7012; }

.tv .manage-switch input:checked + .manage-slider {
  background-color: #dd81de; }

.tv .manage-switch input:focus + .manage-slider {
  box-shadow: 0 0 10px #dd81de; }

.tv .manage-switch input:checked + .manage-slider:before {
  background-color: #4c114d; }

.tv .icon {
  color: #4c114d; }

.air .manage-switch input:checked + .manage-slider {
  background-color: #8f8f8f; }

.air .manage-switch input:focus + .manage-slider {
  box-shadow: 0 0 10px #8f8f8f; }

.air .manage-switch input:checked + .manage-slider:before {
  background-color: #adb5c1; }

.air .icon {
  color: #adb5c1; }

.cooker .manage-switch input:checked + .manage-slider {
  background-color: #16052f; }

.cooker .manage-switch input:focus + .manage-slider {
  box-shadow: 0 0 10px #16052f; }

.cooker .manage-switch input:checked + .manage-slider:before {
  background-color: #45168b; }

.cooker .icon {
  color: #45168b; }

.kettle .manage-switch input:checked + .manage-slider {
  background-color: #603742; }

.kettle .manage-switch input:focus + .manage-slider {
  box-shadow: 0 0 10px #603742; }

.kettle .manage-switch input:checked + .manage-slider:before {
  background-color: #441f29; }

.kettle .icon {
  color: #441f29; }

.admin_panel {
  width: 100%;
  background-color: #ececec; }

.admin-welcome {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0px 0px 14.73px 0.27px rgba(0, 0, 0, 0.5);
  margin-bottom: 10px; }
  .admin-welcome h2 {
    background-color: #383838;
    padding: 10px;
    text-align: center;
    color: #fff;
    border-radius: 8px 8px 0 0; }
  .admin-welcome .welcome-admin-image {
    width: 70%;
    margin: auto;
    display: block; }

.admin-panel-block {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0px 0px 14.73px 0.27px rgba(0, 0, 0, 0.5);
  margin-bottom: 10px;
  padding: 20px; }
  .admin-panel-block .admin-panel-title {
    padding-left: 10px;
    padding-bottom: 10px; }

.central-heating .manage-switch input:checked + .manage-slider {
  background-color: #7d0202; }

.central-heating .manage-switch input:focus + .manage-slider {
  box-shadow: 0 0 10px #7d0202; }

.central-heating .manage-switch input:checked + .manage-slider:before {
  background-color: #f00; }

.central-heating .icon {
  color: #f00; }

.alarm .manage-switch input:checked + .manage-slider {
  background-color: #fff1ad; }

.alarm .manage-switch input:focus + .manage-slider {
  box-shadow: 0 0 10px #fff1ad; }

.alarm .manage-switch input:checked + .manage-slider:before {
  background-color: #ffd200; }

.alarm .icon {
  color: #ffd200; }

.lock .manage-switch input:checked + .manage-slider {
  background-color: #146864; }

.lock .manage-switch input:focus + .manage-slider {
  box-shadow: 0 0 10px #146864; }

.lock .manage-switch input:checked + .manage-slider:before {
  background-color: #17c4bb; }

.lock .icon {
  color: #17c4bb; }

.internet .manage-switch input:checked + .manage-slider {
  background-color: #547fc0; }

.internet .manage-switch input:focus + .manage-slider {
  box-shadow: 0 0 10px #547fc0; }

.internet .manage-switch input:checked + .manage-slider:before {
  background-color: #79aeff; }

.internet .icon {
  color: #79aeff; }

.main-info .manage-block {
  padding: 10px 0; }

.main-info .manage-title {
  margin: 0; }

.main-info .location_info {
  font-family: 'Josefin Sans';
  font-size: 20px;
  color: #505050; }

.date_info, .time_info {
  display: block;
  text-align: center;
  margin-top: 5px;
  font-family: 'Josefin Sans';
  font-size: 20px;
  color: #505050; }

.weather_info {
  font-family: 'Josefin Sans';
  font-size: 20px;
  color: #505050; }
  .weather_info i:before {
    font-family: 'weather';
    font-style: normal;
    font-weight: bold;
    font-size: 25px; }

.time_info, .weather_info, .location_info {
  width: 150px;
  display: inline-block;
  text-align: center; }

.time .icon {
  color: #bebebe; }

.weather .icon {
  color: #00234e; }

.location .icon {
  color: #670000; }

.masonry {
  column-gap: 1.5em;
  column-count: 1;
  height: 100%;
  padding: 0;
  margin: 0;
  width: 100%;
  padding: 10px; }

.admin-welcome, .admin-panel-block {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: inline-block; }

.admin-header {
  width: 100%;
  height: 100px;
  background-color: #383838; }
  .admin-header h2 {
    color: #fff;
    font-size: 30px;
    text-align: center;
    line-height: 100px; }

.admin_panel {
  display: none; }

.room-show {
  position: relative;
  padding: 0;
  margin: 0;
  margin-bottom: 10px;
  background-color: transparent;
  cursor: pointer; }

.room_image-show {
  width: 100%;
  padding: 0;
  border-radius: 8px; }

.room_description-show {
  position: absolute;
  bottom: 0;
  padding: 5px;
  width: 100%;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.75);
  color: #fff;
  height: 30px;
  border-radius: 0 0 8px 8px; }

.room-controls .manage-title {
  padding-left: 10px; }

.room-controls .manage-icon {
  height: auto;
  cursor: pointer; }
  .room-controls .manage-icon::after {
    content: '\f070';
    font-family: FontAwesome;
    font-size: 30px;
    color: #6c6c6c; }

.room-controls .manage-switch {
  height: auto; }
  .room-controls .manage-switch input:checked + .manage-icon::after {
    content: '\f06e';
    color: #ff004e; }

.extra-calls .manage-title {
  padding-left: 10px; }

.manage-call {
  text-decoration: none;
  color: #ff0030;
  width: 50px;
  text-align: center;
  font-size: 30px;
  height: auto; }

.modal {
  position: fixed;
  z-index: 10;
  top: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  display: none; }

.modal-slider-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 80%;
  height: 100%;
  overflow: hidden;
  margin: auto;
  display: flex;
  align-items: center; }

.slider-block {
  position: relative;
  width: auto;
  height: 100%;
  overflow: hidden; }
  .slider-block img {
    vertical-align: middle; }

.go_to_rooms {
  background-color: transparent;
  border: 1px dotted #383838;
  font-size: 14px;
  margin: auto;
  display: block;
  padding: 10px;
  font-style: italic;
  color: #9a001d; }
  .go_to_rooms:hover {
    cursor: pointer;
    border-color: red;
    color: #000; }

@media (min-width: 640px) {
  .main_title {
    font-size: 50px; }
  .custom-form {
    margin: 40px; }
  .masonry {
    column-count: 2; } }

@media (min-width: 820px) {
  .main_title {
    font-size: 40px; }
  .custom-form {
    margin: 5px; }
  .welcome_home {
    padding-top: 0;
    padding-left: 10%;
    display: flex;
    flex-wrap: wrap; }
  .welcome_block {
    width: 40%;
    height: 100vh;
    padding-top: 20%; }
  .rooms {
    width: 60%; }
  .admin_panel .admin-welcome, .admin_panel .admin-panel-block {
    margin: 10px; }
  .masonry {
    column-count: 3; } }

@media (min-width: 960px) {
  .welcome_block {
    width: 30%; }
  .welcome_title {
    font-size: 50px; }
  .welcome_info {
    font-size: 30px; }
  .rooms {
    margin: 30px;
    width: calc(70% - 60px); }
  #living_room, #bedroom, #dining_room, #kitchen {
    width: 40%;
    padding-top: 30%; }
    #living_room:hover, #bedroom:hover, #dining_room:hover, #kitchen:hover {
      transform: scale(1.2); }
      #living_room:hover .room_description h2, #bedroom:hover .room_description h2, #dining_room:hover .room_description h2, #kitchen:hover .room_description h2 {
        font-size: 30px; }
  .room_info {
    transform: scale(1.2); }
    .room_info .room_description h2 {
      font-size: 30px; }
  .modal-manage {
    padding: 40px; }
  .modal-slider-content {
    height: 80%;
    width: 70%; } }