/* ---------------------css for toggle button------------------------- */
.toggle-btn{
  width: 160px;
  height: 50px;
  margin: 10px;
  border-radius: 50px;
  display: inline-block;
  position: relative;
  cursor: pointer;
  background:#9D2872;
  -webkit-transition: background-color .40s ease-in-out;
  -moz-transition: background-color .40s ease-in-out;
  -o-transition: background-color .40s ease-in-out;
  transition: background-color .40s ease-in-out;
  cursor:pointer;
  &.active{
    background: no-repeat 10px center #424343;
    color: #fff;
    .round-btn{
      left: 116px;
    }
  }
  .round-btn{
    width: 37px;
    height: 37px;
    background-color: #fff;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    left: 7px;
    top: 50%;
    margin-top: -18px;
    -webkit-transition: all .30s ease-in-out;
    -moz-transition: all .30s ease-in-out;
    -o-transition: all .30s ease-in-out;
    transition: all -0.7s ease-in-out;
  }
  .cb-value{
    position: absolute;
    left:0;
    right:0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 9;
    cursor:pointer;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
}



//follow me template
.made-with-love{
  position: fixed;
  left: 0;
  width: 100%;
  bottom: 10px;
  text-align: center;
  font-size: 10px;
  z-index: 9999;
  font-family: arial;
  color: #fff;
  i{
    font-style: normal;
    color: #F50057;
    content: "YES";
    font-size: 14px;
    position: relative;
    top: 2px;
  }
  a{
    color: #fff;
    text-decoration: none;
    &:hover{
      text-decoration: underline;
    }
  }
}

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

.night-toggle-content{
  display:none;
}

.day-toggle-content{
  display:none;
}

.show{
  display:block;
}

/* .toggle-text {
position: absolute;
right: 38px;
top: 6px;
} */

.toggle-text.yes {
  position: absolute;
  top: 11px;
  right: 0px;
  left: -103px;
  width: 100px;
}

.toggle-text {
  position: absolute;
  left: 37px;
  top: 11px;
  width: 90px;
  color: #fff;
  font-family: 'Roboto';
  font-size: 14px;
  font-weight: 500;
  line-height: 16.41px;
}

.night-toggle-content.show p {
  font-family: Barlow;
  font-size: 38px;
  font-weight: 300;
  line-height: 47.5px;
  color: #424343;
  padding-bottom: 25px;
}

.toggle-inner {
  text-align: center;
  background-color: #9d28720d;
  padding: 35px 36px;
  margin: 75px 0px;
}

.toggle-content {
  display: flex;
  min-height: 250px;
  justify-content: center;
  align-items: center;
}

.day-toggle-content.show {
  font-family: Barlow;
  font-size: 38px;
  font-weight: 300;
  line-height: 47.5px;
  color: #424343;
}

/* ------------------media query-------- */

@media only screen and (max-width: 768px){

  .night-toggle-content.show p {
    font-size: 25px;
    font-weight: 300;
    line-height: 31.25px;
  }

  .day-toggle-content.show p{
    font-size: 25px;
    font-weight: 300;
    line-height: 31.25px;
  }
}

@media only screen and (max-width: 480px){
  .toggle-inner {
    padding: 35px 36px;
    margin: 50px 0px;
  }
}

@media only screen and (max-width: 360px){

  .toggle-outer .page-center {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .night-toggle-content.show p {
    padding: 0 10px !important;
  }

  .toggle-inner {
    padding: 35px 0px;
    margin: 40px 0px;
  }

  .toggle-btn{
    width: 160px;
    height: 50px;
    margin: 10px;
    border-radius: 50px;
    display: inline-block;
    position: relative;
    cursor: pointer;
    background:#9D2872;
    -webkit-transition: background-color .40s ease-in-out;
    -moz-transition: background-color .40s ease-in-out;
    -o-transition: background-color .40s ease-in-out;
    transition: background-color .40s ease-in-out;
    cursor:pointer;
    &.active{
      background: no-repeat 10px center #424343;
      color: #fff;
      .round-btn{
        left: 116px;
      }
    }
    .round-btn{
      width: 36px;
      height: 36px;
      background-color: #fff;
      border-radius: 50%;
      display: inline-block;
      position: absolute;
      left: 7px;
      top: 50%;
      margin-top: -18px;
      -webkit-transition: all .30s ease-in-out;
      -moz-transition: all .30s ease-in-out;
      -o-transition: all .30s ease-in-out;
      transition: all -0.7s ease-in-out;
    }
    .cb-value{
      position: absolute;
      left:0;
      right:0;
      width: 100%;
      height: 100%;
      opacity: 0;
      z-index: 9;
      cursor:pointer;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }
  }

  .round-btn {
    width: 36px;
    height: 36px;
    left: 5px;
  }

  .toggle-content {
    min-height: 330px;
  }  
}