body {
  margin: 0px;
  padding: 0px;
  font-weight: 100;
  font-family: "Work Sans", sans-serif;
}

a {
  font-weight: 400;
  text-decoration: none;
}

dt {
  line-height: 30px;
}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {
  .panel-container > .main-panel {
    width: 0% !important;
  }

  .panel-container > .side-panel {
    text-align: center !important;
    width: 100% !important;
    background-size: auto !important;
  }

  span {
    letter-spacing: 10px;
    font-size: 130px !important;
  }

  h1 {
    font-size: 72px;
  }
}

/* 
    ##Device = Tablets, Ipads (landscape)
    ##Screen = B/w 768px to 1024px
  */

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .panel-container > .main-panel {
    width: 0% !important;
  }

  .panel-container > .side-panel {
    text-align: center !important;
    width: 100% !important;
    background-size: 100% auto !important;
  }

  span {
    letter-spacing: 10px;
    font-size: 130px !important;
  }

  h1 {
    font-size: 72px;
  }
}

/* 
    ##Device = Low Resolution Tablets, Mobiles (Landscape)
    ##Screen = B/w 481px to 767px
  */

@media (min-width: 481px) and (max-width: 767px) {
  .panel-container > .main-panel {
    width: 0% !important;
  }

  .panel-container > .side-panel {
    text-align: center !important;
    width: 100% !important;
    background-size: 100% auto !important;
  }

  span {
    letter-spacing: 10px;
    font-size: 130px !important;
  }

  h1 {
    font-size: 72px;
  }
}

/* 
    ##Device = Most of the Smartphones Mobiles (Portrait)
    ##Screen = B/w 320px to 479px
  */

@media (min-width: 320px) and (max-width: 480px) {
  .panel-container > .main-panel {
    width: 0% !important;
  }

  .panel-container > .side-panel {
    text-align: center !important;
    width: 100% !important;
    background-size: 100% auto !important;
  }

  span {
    letter-spacing: 10px;
    font-size: 130px !important;
  }

  h1 {
    font-size: 130px;
  }
}

/* Desktop/Laptop */

/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {
  .panel-container > .main-panel {
    padding: 50px;
    width: 75%;
  }

  .main-panel > .panel-content {
    width: 100%;
  }

  .panel-container > .side-panel {
    width: 650px;
  }

  h1 {
    font-size: 48px;
  }

  span {
    letter-spacing: 10px;
    font-size: 48px !important;
  }
}

/* 
    ##Device = Laptops, Desktops
    ##Screen = B/w 1025px to 1280px
  */

@media (min-width: 1025px) and (max-width: 1280px) {
  .panel-container > .main-panel {
    padding: 50px;
    width: 75%;
  }

  .main-panel > .panel-content {
    width: 100%;
  }

  .panel-container > .side-panel {
    width: 650px;
  }

  h1 {
    font-size: 48px;
  }

  span {
    letter-spacing: 10px;
    font-size: 48px !important;
  }
}

.panel-container {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
}

.panel-container > .main-panel {
  color: #494f5a;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: auto;
  font-family: "Roboto", sans-serif !important;
  font-weight: 300;
}

.main-panel > .panel-content {
  letter-spacing: 1px;
}

.panel-container > .side-panel {
  color: #fff;

  padding-top: 220px;
  text-align: center;
  background: #7666dc;
  background-image: url("bkg.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: auto auto;
}

h1 {
  letter-spacing: 10px;
  font-weight: 100;
}

.first {
  color: #6e60db;
}

.second {
  color: #b359ca;
}

.third {
  color: #d87180;
}

.fourth {
  color: #e69b72;
}

.panel-content > a:hover,
a:active {
  color: #fff;
  background-color: #5041d8;
}

h2 {
  font-weight: 400;
}

.peach {
  color: rgba(252, 182, 159, 1);
}

span {
  letter-spacing: 10px;
}

span > a {
  color: #fff;
}

span > a:visited {
  color: #fff;
}

span > a:active,
a:hover {
  color: #b359ca;
}

.line {
  margin-top: 30px;
  width: 60%;
  border-radius: 50px;
}