* {
   box-sizing: border-box;
   outline: none;
   user-select: none;
}
body{
  margin: 0;
}

 .body_new {
   align-items: center;
   text-align: center;
   background-color: #ffc851; 
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffb3ce', endColorstr='#6effb5bd', GradientType=1);
   flex-direction: column;
   font-family: "Open Sans", sans-serif;
   /* height: 100vh; */
   justify-content: center;
   min-width: 184px;
   /* overflow-x: hidden; */
   transition: background-color 0.2s;
   padding-bottom: 100px;
}
.overlay{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 10000000;
}

.body_work{
  background-color: #0e8a2b !important;
}
.body_rest{
  background-color: #3E2B92 !important;
}
#fix{
  display: none;
  background-color: rgba(255,255,255,0.2);
  margin: 25px;
  padding: 13px;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  line-height: 16px;
}
#cover {
   margin-bottom: 43px;
   display: inline-block;
}
#cover img{
  width: 370px;
  margin-top: 90px;
  margin-left: 20px;
}
 #pomodoro{
   margin-bottom: 43px;
   width: 370px;
   display: inline-block;
   margin-left: 0px;
   margin-right: 45px;
   vertical-align:top;
   position: relative;
   top: -20px;
}

/*switcher*/

.central_circle{
  width: 400px;
  height: 400px;
}
.elipse_main{
  background: url(../moody/img/Ellipse_main.png) no-repeat top center;
  /*background-size: contain;*/
  justify-content: center;
  width: 350px;
    height: 350px;
    z-index: 4;
    position: relative;
    /*top: 2px;*/
    opacity: 0.99;
    /*margin-left: 31px;*/

}
.elipse1{
  background: url(../moody/img/Ellipse1.png) no-repeat top center;
  /*background-size: contain;*/
  justify-content: center;
      width: 433px;
    height: 400px;
    z-index: 1;
        position: relative;
    top: -377px;
    left: -54px;
}
.elipse3{
  background: url(../moody/img/Ellipse3.png) no-repeat top center;
  justify-content: center;
  width: 437px;
  height: 408px;
  z-index: 2;
  position: relative;
  top: -761px;
  left: -52px;
}
.elipse4{
  background: url(../moody/img/Ellipse4.png) no-repeat top center;
  justify-content: center;
  width: 390px;
  height: 400px;
  z-index: 3;
  position: relative;
  top: -1183px;
  left: -17px;
}


.bootstrap-switch.bootstrap-switch-off {
    background: #CCC;
}
.bootstrap-switch.bootstrap-switch-mini {
    min-width: 71px;
}
.bootstrap-switch-yellow, .bootstrap-switch-inverse.bootstrap-switch-yellow .bootstrap-switch-label {
    background: #F89C2C;
}
.bootstrap-switch-green, .bootstrap-switch-inverse.bootstrap-switch-green .bootstrap-switch-label {
    background: #1fae66;
}
.bootstrap-switch {
  border: none;
  border-radius: 30px;
  background: #1FAE66;
}
.bootstrap-switch {
  display: inline-block;
  cursor: pointer;
  border-radius: 4px;
  padding: 5px 0px;
  border-color: #ccc;
  position: relative;
  text-align: left;
  overflow: hidden;
  line-height: 8px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  vertical-align: middle;
  min-width: 100px;
  -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-container {
    margin-left: -50%;
}
.bootstrap-switch.bootstrap-switch-animate .bootstrap-switch-container {
    -webkit-transition: margin-left .5s;
    transition: margin-left .5s;
}
.bootstrap-switch .bootstrap-switch-container {
    display: inline-block;
    width: 205%;
    top: 0;
    border-radius: 4px;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary {
    background: none;
    margin-left: 5px;
}

.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label {
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
}
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-on, .bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-off, .bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-label {
    padding-bottom: 4px;
    padding-top: 4px;
    font-size: 10px;
    line-height: 9px;
    margin-left: 0px;
}
.bootstrap-switch-mini .bootstrap-switch-label {
    width: 16px;
    height: 18px;
    margin-left: 5px;
}
.bootstrap-switch .bootstrap-switch-label {
    background: #EEEEEE;
    border-radius: 30px !important;
    margin: 5px 2px 5px 6px;
}
.bootstrap-switch .bootstrap-switch-label {
    text-align: center;
    margin-top: -1px;
    margin-bottom: -1px;
    z-index: 100;
    color: #333;
    background: #fff;
}

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
    background: none;
    color: #FFF;
}

.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-on, .bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-off, .bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-label {
    padding-bottom: 4px;
    padding-top: 4px;
    font-size: 10px;
    line-height: 9px;
}
.bootstrap-switch .bootstrap-switch-handle-off {
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
}
.bootstrap-switch .bootstrap-switch-handle-on, .bootstrap-switch .bootstrap-switch-handle-off {
    text-align: center;
    z-index: 1;
}
.bootstrap-switch .bootstrap-switch-handle-on{
    width: 30%;
}
.bootstrap-switch .bootstrap-switch-handle-off {
    width: 25%;
}
.bootstrap-switch .bootstrap-switch-handle-on, .bootstrap-switch .bootstrap-switch-handle-off, .bootstrap-switch .bootstrap-switch-label {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block!important;
    /*height: 100%;*/
    padding-bottom: 4px;
    padding-top: 4px;
    font-size: 14px;
    line-height: 20px;
}
.bootstrap-switch input[type=radio], .bootstrap-switch input[type=checkbox] {
    position: absolute!important;
    top: 0;
    left: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    z-index: -1;
}
.bootstrap-switch-inverse {
    background: white;
}
.bootstrap-switch-inverse.bootstrap-switch-yellow .bootstrap-switch-handle-on.bootstrap-switch-primary {
    color: #F89C2C;
}

.bootstrap-switch-inverse.bootstrap-switch-off .bootstrap-switch-label {
    background: #EEEEEE;
}

.bootstrap-switch-handle-off{
    margin-left: 0px !important;
}

#switcher{
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 24px;
  color: #FFFFFF;
  display: inline-block;
}
#switcher .txt, #switcher .selector{
  display: inline-block;
  cursor: pointer;
}
#switcher .txt{
  font-weight: 500;  
  position: relative;
  top: -6px;
  width: 110px;
}
#switcher .txt.selected{
  color: #F2A400;  
  font-weight: 800;
}
.web_switcher_fixer{
  width:370px;
  display: inline-block;
  height: 1px;
  margin-left: 0px;
  margin-right: 45px;
}

.selector{
  background: #F8F8F8;
  padding: 0px !important;
  border-radius: 30px;
  height: 30px;
  -webkit-box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.2);
  -moz-box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.2);
  box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.2);
}

.switch{
  width: 25px;
  height: 25px;
  display: inline-block;
  line-height: 15px !important;
  transition-duration: 0.5s;
}
.switch-work-off{
  background: #F8F8F8 url(../moody/img/work-off.svg) no-repeat center center;
  padding: 15px 18px;
  border-radius: 20px;
  background-size: 17px;
  position: relative;
}
.switch-work-on{
  background: #F2A400 url(../moody/img/work-on.svg) no-repeat center center;
  padding: 15px 18px;
  border-radius: 20px;
  background-size: 17px;
  position: relative;
}

.switch-rest-off{
  background: #F8F8F8 url(../moody/img/rest-off.svg) no-repeat center center;
  padding: 15px 18px;
  border-radius: 20px;
  background-size: 17px;
  position: relative;
}
.switch-rest-on{
  background: #F2A400 url(../moody/img/rest-on.svg) no-repeat center center;
  padding: 15px 18px;
  border-radius: 20px;
  background-size: 17px;
  position: relative;
}
/*switcher*/

#container #clock, #container #cover img{
  transition-property: padding,margin,width;
  transition-duration: 0.5s;
  transition-timing-function:ease;
}
#clock{
  transition-property: background-size;
  transition-duration: 0.5s;
  transition-timing-function:ease;
}
#timer{
  transition-property: background,color;
  transition-duration: 0.5s;
  transition-timing-function:ease;
}

svg{
  color: #b39443;
}
#controls{
  padding-left: 13px;
  margin-top: 9px;
}


 #pomodoro #clock #timer {
  align-items: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
 #pomodoro #clock #timer #title {
   /*color: #ff8b8a;*/
   color: white;
   font-size: 21px;
   line-height: 28px;
   margin: 3px 0 6px;
}
 
 #pomodoro #clock #timer #countdown {
   /*color: #ff778d;*/
   color: white;
   display: flex;
   font-size: 34px;
   font-weight: 300;
   line-height: 34px;
   margin-top: 64px;
}

 #pomodoro #clock #timer #countdown #minutes::after {
   content: ":";
}
 #pomodoro #clock #timer #controls {
   align-items: center;
   display: flex;
   color: white;
   flex-direction: column;
   font-size: 15px;
   font-weight: 700;
   line-height: 15px;
   margin-top: 17px;
   text-align: center;
   text-transform: uppercase;
}
 #pomodoro #clock #timer #controls .fas, #pomodoro #clock #timer #controls .svg-inline--fa {
   position: relative;
}
 #pomodoro #clock #timer #controls #start, #pomodoro #clock #timer #controls #pause, #pomodoro #clock #timer #controls #reset {
   white-space: nowrap;
}
 #pomodoro #clock #timer #controls #start .fa-play {
   font-size: 77%;
   top: -1px;
}
 #pomodoro #clock #timer #controls #start:hover {
   /*color: #ff4980;*/
   color: #b39443;
}
 #pomodoro #clock #timer #controls #pause .fa-pause {
   font-size: 90%;
   top: -1px;
   transform: scaleX(0.84);
}
 #pomodoro #clock #timer #controls #pause:hover {
   color: #b39443;
}
 #pomodoro #clock #timer #controls #reset {
   position: absolute;
   margin-top: 17.56px;
   transition: margin-top 0.43s, opacity 0.43s;
}
 #pomodoro #clock #timer #controls #reset .fa-sync-alt {
   font-size: 84%;
}
 #pomodoro #clock #timer #controls #reset:hover {
   /*color: #ff4980;*/
   color: #b39443;
}
 #pomodoro #clock #timer #controls.reset #pause {
   display: none;
}
 #pomodoro #clock #timer #controls.reset #reset {
   margin-top: 0;
   opacity: 0;
   z-index: -1;
}
 #pomodoro #clock #timer #controls.started #start {
   display: none;
}
 #pomodoro #clock #timer #controls.started #reset {
   opacity: 0;
}
 #pomodoro #clock #timer #controls.paused #pause {
   display: none;
}

 #options {
   color: #ff6292;
   display: flex;
   font-size: 25px;
   font-weight: normal;
   justify-content: center;
   margin-bottom: 28px;
   margin-top:45px;
   text-align: center;
}
 #options .option-title {
   color: white;
   font-size: 16px;
   margin-top: 7px;
   margin-bottom: 7px;
}
.minutes{
  margin: 7.2px 5.2px 7.2 0px;
  padding: 5.2px 7.2px;
  background-color: white !important;
  border-radius: 10px;
  color: #F2A400;
  font-size: 14px;
  display: inline-block;
  margin: 0px;
  padding: 0px 13px 0px 0px;
  border-radius: 0px 40px 40px 0px;
  text-align: center;
  position: relative;
  left: -6px;
  top: -1px;
}
#breakInput{
  width: 30px !important;
  margin-left: 10px !important;
}
input#breakInput{
  padding: 3px 2px 3px 0px !important;
  position: relative;
  left: -2px;
}
.minutes.breakInput{
  padding-right: 13px !important;
  position: relative;
  top: -1px;
  left: -8px;
}

#buttons img{
  margin: auto 10px;
}

 #options .fa-angle-double-up {
   /*color: #ff848a;*/
   color: white;
   cursor: pointer;
}
#options .fa-angle-double-up:hover{
  color: #505050;
}
 #options .fa-angle-double-down {
   color: white;
   cursor: pointer;
}
#options .fa-angle-double-down:hover{
  color: #505050;
}
 #options #session, #options #break {
   align-items: center;
   flex-direction: column;
   margin: auto 35px;
   min-width: 150px;
}
 #options input[type=number] {
   background-color: white !important; 
   border: 0;
   color: #F2A400;
   font-size: calc(18px);
    margin: 0px;
    padding: 0px 2px 0px 0px;
    border-radius: 40px 0px 0px 40px;
    text-align: right;
    width: 40px;
    position: relative;
    top: -1px;
}
 #options input[type=number]::-webkit-inner-spin-button, #options input[type=number]::-webkit-outer-spin-button {
   -webkit-appearance: none;
}
 audio {
   display: none;
}
#sounds_work{
  text-align: justify;
  display: inherit;
}
#sounds_rest{
  display: none;
  text-align: justify;
}
#sounds_rest.active{
  display: inherit !important;
}

#audio-selector {
    width: 500px;
    display: inline-block;
    margin-top:45px;
}
 #audio-selector .theme {
   width: 115px;
   height: 80px;
   padding: 34px 0px 0px 0px;
   background-color: #F8F8F8;
   margin: 5px;
   border-radius: 4px;
   color: white;
   cursor: pointer;
   font: 600 calc(9px + 1vw);
   text-align: center;
   white-space: nowrap;
   display: inline-block;
   -webkit-box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.2);
   -moz-box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.2);
   box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.2);
   float: left;
}
 #audio-selector .theme:last-child {
   margin-right: 0;
}
#audio-selector .theme:hover{
   background-color: #F2A400; 
   background-image: none !important;
}
#audio-selector .theme.selected {
   background-color: #F2A400; 
}

#audio-selector #forest{
  background: #F8F8F8 url(../moody/img/forest.svg) no-repeat center center;
}
#audio-selector #forest:hover, #audio-selector #forest.selected{
  /*background: #F2A400 url(../moody/img/forest-on.png) no-repeat center center;*/
  background: #F2A400
}
#container.active #audio-selector #forest.selected{
  background: #F2A400 url(../moody/img/forest.gif) no-repeat center center;
  background-size: 137px;
  background-position-y: -31px;
}
#audio-selector #firecamp{
  background: #F8F8F8 url(../moody/img/firecamp-off.svg) no-repeat center center;
}
#audio-selector #firecamp:hover,#audio-selector #firecamp.selected{
  /*background: #F2A400 url(../moody/img/firecamp-on.png) no-repeat center center;*/
  background: #F2A400;
}
#container.active #audio-selector #firecamp.selected{
  background: #F2A400 url(../moody/img/firecamp.gif) no-repeat center center;
  background-size: 90px;
}
#audio-selector #river{
  background: #F8F8F8 url(../moody/img/river-off.svg) no-repeat center center;
}
#audio-selector #river:hover, #audio-selector #river.selected{
  /*background: #F2A400 url(../moody/img/river-on.png) no-repeat center center;*/
  background: #F2A400;
}
#container.active #audio-selector #river.selected{
  background: #F2A400 url(../moody/img/river.gif) no-repeat center center;
  background-size: 75px;
}
#audio-selector #rain{
  background: #F8F8F8 url(../moody/img/rain-off.svg) no-repeat center center;
}
#audio-selector #rain:hover, #audio-selector #rain.selected{
  /*background: #F2A400 url(../moody/img/rain-on.png) no-repeat center center;*/
  background: #F2A400;
}
#container.active #audio-selector #rain.selected{
  background: #F2A400 url(../moody/img/rain.gif) no-repeat center center;
  background-size: 87px;
  background-position-y: 0px;
}
#audio-selector #meditate{
  background: #F8F8F8 url(../moody/img/meditate-off.svg) no-repeat center center;
}
#audio-selector #meditate:hover,#audio-selector #meditate.selected{
  /*background: #F2A400 url(../moody/img/meditate-on.png) no-repeat center center;*/
  background: #F2A400;
}
#container.active #audio-selector #meditate.selected{
  background: #F2A400 url(../moody/img/meditate.gif) no-repeat center center;
  background-size: 119px;
}
#audio-selector #seawaves{
  background: #F8F8F8 url(../moody/img/sea-off.svg) no-repeat center center;
}
#audio-selector #seawaves:hover, #audio-selector #seawaves.selected{
  background: #F2A400;
}
#container.active #audio-selector #seawaves.selected{
  background: #F2A400 url(../moody/img/sea.gif) no-repeat center center;
  background-size: 122px;
  background-position-y: -21px;
}
#audio-selector #crowd{
  background: #F8F8F8 url(../moody/img/crowd-off.svg) no-repeat center center;
}
#audio-selector #crowd:hover, #audio-selector #crowd.selected{
  background: #F2A400;
}
#container.active #audio-selector #crowd.selected{
  background: #F2A400 url(../moody/img/crowd.gif) no-repeat center center;
  background-size: 112px;
  background-position-y: -23px;
}
#audio-selector #classic{
  background: #F8F8F8 url(../moody/img/classic-off.svg) no-repeat center center;
}
#audio-selector #classic:hover, #audio-selector #classic.selected{
  background: #F2A400;
}
#container.active #audio-selector #classic.selected{
  background: #F2A400 url(../moody/img/classic.gif) no-repeat center center;
  background-size: 105px;
}

#audio-selector #purr{
  background: #F8F8F8 url(../moody/img/purr-off.svg) no-repeat center center;
}
#audio-selector #purr:hover, #audio-selector #purr.selected{
  background: #F2A400;
}
#container.active #audio-selector #purr.selected{
  background: #F2A400 url(../moody/img/purr.gif) no-repeat center center;
  background-size: 90px;
  background-position-y: -1px;
}
#audio-selector #music_box{
  background: #F8F8F8 url(../moody/img/music_box-off.svg) no-repeat center center;
}
#audio-selector #music_box:hover, #audio-selector #music_box.selected{
  background: #F2A400;
}
#container.active #audio-selector #music_box.selected{
  background: #F2A400 url(../moody/img/music_box.gif) no-repeat center center;
  background-size: 100px;
  background-position-y: -14px;
}
#audio-selector #piano{
  background: #F8F8F8 url(../moody/img/piano-off.svg) no-repeat center center;
}
#audio-selector #piano:hover, #audio-selector #piano.selected{
  background: #F2A400;
}
#container.active #audio-selector #piano.selected{
  background: #F2A400 url(../moody/img/piano.gif) no-repeat center center;
  background-size: 90px;
}
#audio-selector #lounge{
  background: #F8F8F8 url(../moody/img/lounge-off.svg) no-repeat center center;
}
#audio-selector #lounge:hover, #audio-selector #lounge.selected{
  background: #F2A400;
}
#container.active #audio-selector #lounge.selected{
  background: #F2A400 url(../moody/img/lounge.gif) no-repeat center center;
  background-size: 105px;
  background-position-y: -20px;
}
#audio-selector #mantra{
  background: #F8F8F8 url(../moody/img/east-off.svg) no-repeat center center;
}
#audio-selector #mantra:hover, #audio-selector #mantra.selected{
  /*background: #F2A400 url(../moody/img/mantra-on.png) no-repeat center center;*/
  background: #F2A400;
}
#container.active #audio-selector #mantra.selected{
  background: #F2A400 url(../moody/img/east.gif) no-repeat center center;
  background-size: 102px;
  background-position-y: -7px;
}
#audio-selector #yoga{
  background: #F8F8F8 url(../moody/img/yoga-off.svg) no-repeat center center;
}
#audio-selector #yoga:hover, #audio-selector #yoga.selected{
  /*background: #F2A400 url(../moody/img/mantra-on.png) no-repeat center center;*/
  background: #F2A400;
}
#container.active #audio-selector #yoga.selected{
  background: #F2A400 url(../moody/img/yoga.gif) no-repeat center center;
  background-size: 90px;
}
#audio-selector #sleep{
  background: #F8F8F8 url(../moody/img/sleep-off.svg) no-repeat center center;
}
#audio-selector #sleep:hover, #audio-selector #sleep.selected{
  /*background: #F2A400 url(../moody/img/sleep-on.png) no-repeat center center;*/
  background: #F2A400;
}
#container.active #audio-selector #sleep.selected{
  background: #F2A400 url(../moody/img/sleep.gif) no-repeat center center;
  background-size: 100px;
  background-position-y: -4px;
  background-position-x: 3px;
}
#audio-selector #workout{
  background: #F8F8F8 url(../moody/img/workout-off.svg) no-repeat center center;
}
#audio-selector #workout:hover, #audio-selector #workout.selected{
  /*background: #F2A400 url(../moody/img/workout-on.png) no-repeat center center;*/
  background: #F2A400;
}
#container.active #audio-selector #workout.selected{
  background: #F2A400 url(../moody/img/workout.gif) no-repeat center center;
  background-size: 101px;
}


.theme div{
  display: none;
}
.theme:hover div,.theme.selected div{
  display: table-cell;
  overflow: hidden;
  white-space: normal;
  width: 115px;
  height: 80px;
  position: relative;
  top: -34px;
  vertical-align: middle;
  font-size: 14px;
  line-height: 16px;
  padding: 7px;
}
#container .theme.selected{
  background-image: none;
}
#container.active .theme.selected div{
  display: none;
}
#container.active .theme.selected:hover div{
  display: table-cell !important;
}

.chg_btn{
  display: inline-block;
  cursor: pointer;
  position: relative;
  top: 5px;
}

.learn_more{
  margin-top: 30px;
  margin-bottom: 80px; 
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 18px;
  /* identical to box height */
  color: #FFFFFF;
  
}
.learn_more a{
  cursor: pointer;
  font-style: normal !important;
  font-weight: normal !important;
  text-decoration-line: none !important;

  color: #F2A400 !important;
}
.learn_more a:hover{
  cursor: pointer;
  color: #FFFFFF !important;
  text-decoration-line: underline !important;
}
.attention-arrow {
  margin: 0px 20px;
  color: rgba(255,255,255,0.4);
}
.logo{
  float: left;
  margin: 22px 20px 10px 0px;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
}
.logo img{
  /*position: absolute;*/
  width: 80px;
  cursor: pointer;
}
.navigate_back .fa-angle-double-left{
  margin-right: 8px;
  color: rgba(255,255,255,0.1);
}
.head{
  display: table;
  width: 100%;
  margin: auto;
}


.slogan{
  cursor: pointer;
  float: left;
  text-align: left;
  margin: 40px 0px 60px 0px;
  color: white;
  font-size: 12px;
}
h1.slogan{
  line-height: 1.4;
}
.slogan p{
  margin: 0px;
  color: #F2A400; 
  font-weight: bold;
  font-size: 21px;
}

.reset #reset, .reset #pause{
  display: none;
}
#start, #reset, #pause{
  cursor: pointer;
}
.started #start{
  display: none;
}
.paused #pause{
  display: none; 
}
.info_block{
  margin: 20px auto 50px auto;
  border-radius: 5px;
  border:1px rgba(255,255,255,0.3) solid;
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  width: 500px;
  padding: 20px;
  line-height: 16px;
}
.info_block a{
  cursor: pointer;
  font-style: normal !important;
  font-weight: normal !important;
  text-decoration-line: none !important;
  color: #F2A400 !important;
}
.info_block a:hover{
  cursor: pointer;
  color: #FFFFFF !important;
  text-decoration-line: underline;
}
.input_bg{
  background-color: white !important;
  border-radius: 40px 40px 40px 40px;
  padding: 3px;
  display: inline-block;
  height: 30px;
}
.body_work.active{
  background-color: #05824a !important;
}
.body_rest.active{
  background-color: #330099 !important;
}
#container.active #timer{
  background: #d7ebeb;
}
.body_work #container.active #countdown{
  color: #1b8282 !important;
}
.body_rest #container.active #countdown{
  color: #330099 !important;
}

/*circle - start*/
.wrapper {
  width: 375px;
  height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.big-circle {
  border-radius: 50%;
  background-color: white;
  width: 300px;
  height: 300px;
}

.with-transparency {
  background-color: rgba(255, 255, 255, 0.6);
}

.first {
  position: absolute;
  top: 14px;
  left: 12px;
}

.second {
  position: absolute;
  top: 7px;
  right: 12px;
}

.third {
  position: absolute;
  bottom: 11px;
  right: 12px;
}

.fouth {
  position: absolute;
  bottom: 14px;
  left: 14px;
}

#white-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  animation-name: rotation;
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-name: rotation;
  -webkit-animation-duration: 30s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: rotation;
  -moz-animation-duration: 30s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -o-animation-name: rotation;
  -o-animation-duration: 30s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear;
}

.orange-circle {
  width: 162px;
  height: 162px;
  background-color: #F5A238;
  border-radius: 50%;
  z-index: 5;
  position: absolute;
  top: calc(98px);
  left: calc(109px);
}

@-webkit-keyframes rotation {
    0% {-webkit-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -o-transform:rotate(0deg);
        transform:rotate(0deg);}
    100% {-webkit-transform:rotate(360deg);
        -moz-transform:rotate(360deg);
        -o-transform:rotate(360deg);
        transform:rotate(360deg);}
}
@-moz-keyframes rotation {
    0% {-webkit-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -o-transform:rotate(0deg);
        transform:rotate(0deg);}
    100% {-webkit-transform:rotate(360deg);
        -moz-transform:rotate(360deg);
        -o-transform:rotate(360deg);
        transform:rotate(360deg);}
}
@-o-keyframes rotation {
    0% {-webkit-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -o-transform:rotate(0deg);
        transform:rotate(0deg);}
    100% {-webkit-transform:rotate(360deg);
        -moz-transform:rotate(360deg);
        -o-transform:rotate(360deg);
        transform:rotate(360deg);}
}
@keyframes rotation {
    0% {-webkit-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -o-transform:rotate(0deg);
        transform:rotate(0deg);}
    100% {-webkit-transform:rotate(360deg);
        -moz-transform:rotate(720deg);
        -o-transform:rotate(360deg);
        transform:rotate(360deg);}
}
/*circle - end*/
@media all and (max-width: 768px) {
  .body_new .container {
    padding-right: 0px;
    padding-left: 0px;
  }
  .sounds_container{
    padding-left: 40px;
  }
  .big-circle{
    width: 250px;
    height: 250px;
  }
  .orange-circle{
    width: 140px;
    height: 140px;
    top: calc(50% - 110px) !important;
    left: calc(50% - 70px) !important;
  }
  #pomodoro {
    max-width: 100%;
    overflow: hidden;
  }
  #pomodoro #clock #timer #countdown{
    margin-top: 55px;
  }
  .slogan{
    float: none;
    text-align: center;
    margin: 40px 0px 20px 0px;
  }
  .wrapper{
    height: 305px;
  }
  #audio-selector .theme{
    width: 100px!important;
    height: 75px!important;
  }
}

@media all and (min-height: 700px) {
  #audio-selector .theme{
    margin: 7px;
  }
  #audio-selector {
    width: 517px;
  }
  .learn_more{
    margin-top: 45px;
  }
  .minutes{
    padding: 3px 15px 0px 0px !important;
  }
  #controls{
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
}

@media all and (min-width: 512px) {
  
  #options input[type=number] {
     font-size: 17px;
  }
  #audio-selector .theme {
     font-size: 15.33px;
  }
}
@media all and (max-width: 184px) {
  #pomodoro #clock {
     margin-bottom: -20px;
     margin-bottom: -11.5px;
     padding: 73px 0;
  }
  #pomodoro #clock #timer #title {
     font-size: 10px;
     line-height: 10px;
  }
  #pomodoro #clock #timer #countdown {
     font-size: 15.4px;
     line-height: 15.4px;
  }
  #pomodoro #clock #timer #controls {
     font-size: 10px;
     line-height: 10px;
  }
  #pomodoro #clock #timer #controls #start, #pomodoro #clock #timer #controls #pause, #pomodoro #clock #timer #controls #reset {
     font-size: 5.5px;
     line-height: 5.5px;
  }
  #pomodoro #clock #timer #controls #reset {
     margin-top: 6.31px;
  }
  #options input[type=number] {
     /*border-bottom: 3.5px solidwhite;*/
     font: bold 18.6px;
     margin: 5.7px 3.7px;
     padding: 3.7px 5.7px;
  }
}

@media all and (max-width: 512px) {
  #switcher{
    margin-top:25px; 
    margin-bottom: 0px;
    display: block;
  }
  #switcher .txt{
    font-size: 16px;
  }
  .web_switcher_fixer{
    display: none;
  }
  .txt_rest{
    padding-left: 15px;
  }
  #container{
    margin-top: 0px !important;
  }
  #pomodoro{
    margin: auto;
    width: 100%;
    top: 0px;
  }
  .wrapper{
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%;
  }
  .big-circle{
    margin: auto;
  }
  .orange-circle{
    top: calc(50% - 117px);
    left: calc(50% - 80px);
  }

   #pomodoro #clock #timer #title {
     font-size: 5.5vw;
     line-height: 5.5vw;
  }
  #pomodoro #clock #timer #countdown {
     font-size: 8.4vw;
     line-height: 8.4vw;
  }
  #controls {
    margin-bottom: 25px;
    padding-left: 0px;
    margin-top: 0px;
  }
  #pomodoro #clock #timer #controls {
     font-size: 5.5vw;
     line-height: 5.5vw;
  }
  #pomodoro #clock #timer #controls #start, #pomodoro #clock #timer #controls #pause, #pomodoro #clock #timer #controls #reset {
     font-size: 3vw;
     line-height: 3vw;
  }
   #pomodoro #clock #timer #controls #reset {
     margin-top: 3.43vw;
  }
  #audio-selector{
    margin-top: 0px;
  }

  #options{
    margin: 20px 30px;
  }
  #options #session{
    margin: 0px 5px 0px 0px;
  }
  #options #break{
   margin: 0px 0px 0px 5px;
  }
  .info_block{
    width: 91%;
  }
  .learn_more{
    margin-top: 70px;
    margin-bottom: 45px;
  }
  .body_work #sounds_work{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    margin-left: -31px;
    padding-bottom: 10px;
    padding-right: 30px;
  }
  .body_rest #sounds_rest{
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    margin-left: -31px;
    padding-bottom: 10px;
    padding-right: 30px;
  }
  .theme{
    flex: none;
  }
  .sounds_container{
    flex: none;
    width: 1070px;
  }
  #audio-selector{
    width: 100%;
  }


}

@media all and (max-width: 374px) {

}


@media all and (max-width: 300px) {
  #audio-selector {
     flex-wrap: wrap;
  }
  #audio-selector .theme {
     flex: 1 0 100%;
     font-size: 14px;
     padding: 7px;
  }
  .bg_color_purple{
    background: #8E2DE2;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #4A00E0, #8E2DE2);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #4A00E0, #8E2DE2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  }
}