*{font-family: brandon-grotesque, sans-serif;
    font-size: 32px;}

    .add {margin-top:-5vw;}
    .black {color:black !important;}
    body{max-width: 95vw;margin-bottom:5vw;}
    
    .smiley {width:5vw;height:5vw;border-radius: 50%;
    display:inline-block;margin-right:1vw;margin-bottom:2vw;text-align: center;border:5px white solid;}
    
    .smiley__wrapper {text-align: center;}
    
    i.em-svg {width:5vw;height:5vw;border:5px white solid;text-align: center;
    }
    
   

    i.think__em-svg:hover {cursor: pointer;border:5px #FFBCBC solid; border-radius: 50%;}
    i.eat__em-svg:hover {cursor: pointer;border:5px #FFD600 solid; border-radius: 50%;}
    i.exercise__em-svg:hover {cursor: pointer;border:5px #6A83D8 solid; border-radius: 50%;}

    .outline {border:5px pink;}
    
    button {box-shadow: none;
        border:none;
       
        border-top-left-radius:20px;
        border-top-right-radius:20px;
   
    
   
    text-align: center;transition: background-color .3s ease-in-out;
    }

    button:hover {cursor:pointer;}
    
    button:focus {outline:0; }
    
    button.exercise:hover, button.eat:hover, button.think:hover {cursor:pointer;transition: background-color .3s ease-in-out; }

    button.exercise:hover {background-color:#6A83D8;}
    button.eat:hover {background-color:#FFD600;}
    button.think:hover {background-color:#FFBCBC;}

    button.exercise {background-color:#B7BFDA; width: 175px;height:5vw;padding-bottom:0;padding:0;margin-left:-.5vw;border-radius:20px; }
    
    button.eat {background-color: #FCEC9B;  width: 175px;height:5vw;padding-bottom:0;padding:0;
      border-radius:20px; }
    
    button.think {background-color:#FFDADA; width: 175px;height:5vw;padding-bottom:0;padding:0;border-radius:20px; }

    button.tabexercise {background-color:#B7BFDA; width: 175px;height:5vw;padding-bottom:0;padding:0;margin-left:-.5vw;border:5px #B7BFDA solid; }

    button.tabexercise:hover {background-color:#6A83D8;border:none;}
    
    button.tabeat {background-color:#FCEC9B;  width: 175px;height:5vw;padding-bottom:0;padding:0;
      border:5px  #FCEC9B solid;}
      button.tabeat:hover{background-color:#FFD600;border:none;}

    button.tabthink {background-color:#FFDADA; width: 175px;height:5vw;padding-bottom:0;padding:0;border:5px #FFDADA solid;}

    button.tabthink:hover{background-color:#FFBCBC;border:none;}
    
    button.left {text-align: left;}

    button.skip {background-color:#02A79C; min-width:10vw;margin-left:2vw;text-align:center;min-height:6.5vh;border-radius:20px;}
    button.skip:hover {background-color:#00fceb;}

    .skip {text-align:right;}
    
   
    nav {
        margin-left:10vw;
       
    
    display:grid;
    grid-column:1/2;
    position:absolute;
    
    
    }
    
  
    
    button.next {text-decoration: none; min-width:13vw;min-height:6vh;border-radius:20px;}
    /*button.exercise:hover {background-color:#6A83D8;}
    button.eat:hover {background-color:#FFD600;}
    button.think:hover {background-color:#FFBCBC;}*/
    
    
    body {width:100vw;margin-bottom:5vw;}
    
    
    button.nav {transition: .3s ease-in-out; min-width: 13vw;}
    
    
p.nav {font-size:2vw;
        line-height:0;
        padding-bottom:1vh;
        text-align:center;
        
        
       
        
    }
    
    
    
    img {max-width: 15vw;}
    
    .wrapper__home {
    
    
    max-width:95vw;
    margin-bottom:3vw;}
    
    
    
    h1 {font-size:400%; grid-column: 1/3;font-weight:400;text-align:center;}
    h2 {font-size:200%; grid-column: 1/3;font-weight:400;text-align:center;}
    
    .reason {grid-column:1/3;display:grid;
        grid-template-columns: 1fr 1fr 1fr;text-align: center;margin-top:8vw;
    }
    .copy {grid-column: 1/3;}

    .go {display:flex;float:left;margin-left:8vw;;margin-right:auto;text-align:center;display:block;
    margin-top:7vw;max-width:30vw;
  border:3px #02A79C solid; border-radius: 20px;margin-bottom:5vw;}
    
    button.go {min-width: 13vw;background-color:#02A79C;height:5vw;border-radius:20px;display:inline-block;margin-bottom:4vw;border:none;}
    button.go:hover {background-color:#00fceb;border-color:#00fceb;}
    
    h3 {font-size:150%; grid-column: 1/2; grid-row:1/2;font-weight:400;text-align:center;}
    h4 {font-size:100%; grid-column: 1/2;font-weight:400;}
    h5 {font-size:125%; font-weight:400; text-align: center;}
    h6 {font-size:100%; font-weight:400; text-align: center;margin:0;}
    
    img.hero {grid-column: 2/3;margin-left:auto;margin-right:auto; min-width: 50%;margin-top:8vw;}
    
    img.hero__think {grid-column: 2/3;margin-top:25vh;margin-left:auto;margin-right:auto; min-width: 50%;}
    
    .answers {grid-column:1/2; margin-left:3vw;margin-right:auto;
    }
    
    .tabs {grid-column:1/2; margin-left:auto;margin-right:auto; 
    }
    
    .wrapper__exercising {grid-row:2/3;display: grid;
        grid-template-columns:  1fr 1fr;
        grid-template-rows: .1fr .1fr;
        max-width:75vw;
        margin-bottom:3vw;background-color:#B7BFDA;border-radius:30px;
    margin-right:auto;margin-left:auto;}

        .wrapper__eating {grid-row:2/3;display: grid;
          grid-template-columns:  1fr 1fr;
          grid-template-rows: .1fr .1fr;
          max-width:75vw;
          margin-bottom:3vw;background-color:#B7BFDA;border-radius:30px;
      margin-right:auto;margin-left:auto;background-color: #FCEC9B; }

            

            .wrapper__thinking {grid-row:2/3;display: grid;
              grid-template-columns:  1fr 1fr;
              grid-template-rows: .1fr .1fr;
              max-width:75vw;
              margin-bottom:3vw;background-color:#B7BFDA;border-radius:30px;
          margin-right:auto;margin-left:auto;background-color:#FFDADA;}

        
    
        .goals {display:inline-block;grid-column: 1/4;
        margin-left:auto;
    margin-right: auto;}
        
    .next{grid-column:3/4;text-align:right;grid-row:4/5;
   }

   p.next {text-align:center;padding:0;margin:0;}
    
    p.copy {font-size:60%;font-weight:300;}

    ul {font-size:80%;}

    ol {font-size:80%;}

    
    .mygoalsexercise {border-radius:16px;text-align: center;width:50%;max-height:9vh;
    margin-left:auto;
    margin-right:auto;color:white;border:2px white solid;display:block;margin-bottom:3vw;}

    .mygoalseat {border-radius:16px;text-align: center;width:50%;max-height:9vh;
        margin-left:auto;
        margin-right:auto;color:white;border:2px white solid;display:block;margin-bottom:3vw;}
    .mygoalsexercise:hover {border:2px #6A83D8 solid;width:50%; cursor:pointer;width:50%;max-height:9vh;}
    .mygoalseat:hover {border:2px #FFD600 solid;width:50%; cursor:pointer;width:50%;max-height:9vh;}
    
    
    .success {text-align:center;display:grid;}
    
    textarea {min-width:31vw; max-width: 31vw; min-height:6vw;border-radius:20px;border-color:darkgrey;
            box-shadow: none;
            border-style:solid;margin-left:auto;
            margin-right:auto;display:block;margin-top:2vw;font-size:75%;padding:1vw;}
    
    .currentgoal {text-align: center;}
    
    .wrapper__exercisinginternal 
    {display: grid;
        grid-template-columns: 1fr 1fr;
                max-width:95vw;
                margin-bottom:3vw;}
    
                
    
    
    
    .success__thinking {grid-column: 1/4;margin-left:auto;
        margin-right:auto;}
    
    
    .exercise {background-color:#B7BFDA;}
    
    .eat {background-color: #FCEC9B;color:black;}
    
    
    li{font-size:75%; font-weight:300;}
    
    ol{font-weight: 300;}
    
    
    
    
    
    img.home {margin-left:4vw;margin-right:4vw;background-color:white;display:inline-grid;}
    
    
    
    input.step {display:block;margin-left:auto;margin-right:auto;
        margin-bottom:5vw;
        border-color:darkgrey;
        box-shadow: none;
        border-style:solid;
        background-color:none;
      
    
    }
    
    fieldset {border:none;margin-top:-1vw;
    margin-bottom:5vw;grid-column: 1/3;font-weight:600;}
    
    .fieldwrapper:nth-last-child(1) {margin-bottom:3vw;}
    .fieldwrapper{margin:0; padding:0;display:flex; float:center;max-width:50%;margin-bottom: 4.4vw;}
    
    #form {margin-left:28.5%;text-align:center;width:20vw;align-items:center;}
    
    .fieldname {display:inline-block;margin-left:auto;margin-right:auto;
        
        border-color:darkgrey;
        box-shadow: none;
        border-style:solid;
        background-color:none;
    margin-left:10vw;}
    
    input.add {display:block;margin-left:auto;margin-right:auto;
        margin-bottom:5vw;
        border:none;
        box-shadow: none;
        border-radius:20px;
        background-color:#02A79C;
    width:7vw;}
    
        input.add:nth-last-child(1){background-color:#02A79C;}
    
        button.add {transition:none !important;}
        
        
        input.fieldname
        {
            margin-bottom:5vw;
            display:inline-block;
            margin:5px;
        }
        select.fieldtype
        {
            
            display:block;
            margin:5px;
        }
        input.remove
        {
           
            display:inline-block;
           
            
           
            text-align:center;
            box-shadow: none;
        border:none;
       font-weight:600;
       
        background-color:#02A79C;
       
        border-radius: 20px;
      
      margin-left:3vw;
      margin-top:1vh;
      
    
        }

        button.remove {background-color:#02A79C;width:10vw;
        }
    
        
        
        .addgoals {    margin-left: auto;
            margin-right: auto;

        }


       



    
        a:focus {
            fill: pink;
            stroke: red;
            stroke-width: 1;
          }
    

          /*homepage initial animation*/
         
            #letsIn {
           
            display:none
          }

          #whatIn {display:none;}
         

          .initial-animation {text-align:center;margin-left:auto;margin-right:auto;display:block;}

          h1.hey {font-size:10em;}
          

          #img1 {display:none;}
          #img2  {display:none;} 
          #img3 {display:none;}

         
         #go {display:none;}

        

  
button.addgoalbtn {max-width:5vw;}
button.addgoalbtn:hover {max-width:5vw;}

.divider {border-bottom:4px pink dotted;margin-left:auto;margin-right:auto;}

.eating__title {display:block;grid-column:1/4;}

.thinking__title {display:block;grid-column:1/4;}

.exercising__title {display:block;grid-column:1/4;}

img.eat__hero {grid-column: 1/2;margin-left:auto;margin-right:auto; width: 50vw;}

.eat__answers {grid-column:2/3;margin-right:3vw;}

.tabs {display:inline-block;grid-row: 1/2;margin-top:2vw;z-index: 0;margin-top:3vw;}




.master__wrapper {display:grid;grid-template-rows: .01fr .5fr .5fr .5fr;}

/*tabs*/


.tabs {
   
    
    list-style: none;
    
    z-index:-1;
   
    margin-right:auto;
    margin-left:13vw;
    padding:0;
    margin-bottom:0;
    

    
  }
  
  .tabs li {
    display:inline-block;
    z-index:0;
    
    margin-left:2vw;
    

   
    
   
  }
  
  .tabs li a {
    display: block;
    
    font-size: 16px;
    color: #000;
    text-decoration: none;z-index:0;
    margin-right:auto;
    margin-left:auto;
  }
  
  
  
  .tabs li.active,
  .tabs li.active a:hover {
    font-weight: bold;
    
  }
  
  .tab_container {
    
    border-top: none;
    z-index:1;
    margin-right:auto;
    margin-left:auto;
    
   
  }
  
  .tab_content {
    
    font-size: 16px;z-index:3;
    
    border-radius:20px;
    margin-right:auto;
    margin-left:auto;
  }





h6.login {margin-bottom:1vw;text-align:left;margin-left:5vw;}

h6.login:nth-child(4){margin-top:4vw;}
h6.logintitle {background-color:#02A79C;margin-bottom:3vw;padding:1vw;border-top-left-radius:10px;border-top-right-radius: 10px;}

input.login {padding-left:1vw;}

#more {display:none;}

.more {display:flex;float:right;margin-right:7vw;}


h5.more {font-size:200%;}

h5.more:hover {color:grey;cursor: pointer;}

a:visited{color:black;}

#arrowa {display:none;}

.arrowa {transform:rotate(-90deg);margin-left:7vw;}



.arrowa1 {transform:rotate(-90deg);margin-left:7vw;}

#arrow {display:none;}
         
.arrow {margin-left:auto;
margin-right:auto;display:grid;
grid-template-columns:1fr 1fr 1fr;
margin-top:12vw;}

img.arrow {
transform:scale(2);
grid-column: 2/3;
animation-duration: 2s;
animation-iteration-count: infinite;


margin: 0 auto 0 auto;
transform-origin: bottom;
text-align:center;


}

img.arrow2 {height:5vw;grid-column: 2/3;animation-name: arrow2;
animation-timing-function: ease;}

.arrow1 {margin-left:auto;
margin-right:auto;display:grid;
grid-template-columns:1fr 1fr 1fr;
margin-top:12vw;}

img.arrow1 {
transform:scale(2);
grid-column: 2/3;
animation-duration: 2s;
animation-iteration-count: infinite;


margin: 0 auto 0 auto;
transform-origin: bottom;
text-align:center;


}

img.arrow21 {height:5vw;grid-column: 2/3;animation-name: arrow2;
animation-timing-function: ease;}


@keyframes arrow2 {
0%   { transform: translateY(0); }
50%  { transform: translateY(-30px); }
100% { transform: translateY(0); }
}

a.app {
text-decoration: none; font-style: none;margin-bottom:5vw;grid-column:2/3;text-align:right;}

p.app {text-decoration: none; font-style: none;background-color:#02A79C;line-height:4vw;}

.app {width:13vw;text-align:center;padding:0;  border-radius: 20px;
grid-row:1/2;grid-column:2/3; height:4vw;}

.info__wrapper {display:grid; grid-template-rows:.05fr .25fr; grid-template-columns: 1fr .1fr;}

.info-sheet {grid-row:2/3;grid-column: 1/3;padding-bottom:4vw;}

.logingo {margin-left:auto;margin-right:auto;max-width:30vw;border:2px #02A79C solid;border-radius:20px;height:45vw;margin-top:5vw;}

.loginpage {margin-left:2vw;}

h6.loginpage {text-align:left;}

h6.loginpage:nth-child(3){margin-top:3vw;}

input.loginpage {margin-top:1vw;padding-left:.5vw;}

#date {font-size:400%;text-align:center;padding:0;margin:0;
margin-top:3vw;}

.choice {text-align:center;}

/*product*/
.slide-out-right {
  
	-webkit-animation: slide-out-right 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: slide-out-right 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

 @-webkit-keyframes slide-out-right {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(1000px);
            transform: translateX(1000px);
    opacity: 0;
  }
}
@keyframes slide-out-right {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(1000px);
            transform: translateX(1000px);
    opacity: 0;
  }
}


/*product tabs because fuck my entire life*/


ul.product-tabs {display:block;text-align: center;margin-bottom:5vw;}


.product-tabs {
   
    
  list-style: none;
  
  z-index:-1;
 
  margin-right:auto;
  margin-left:auto;
  padding:0;
  margin-bottom:0;
  

  
}

.product-tabs li {
  display:inline-block;
  z-index:0;
  
  margin-left:2vw;
  

 
  
 
}

.product-tabs li a {
  display: block;
  
  font-size: 16px;
  color: #000;
  text-decoration: none;z-index:0;
  margin-right:auto;
  margin-left:auto;
}



.product-tabs li.active,
.product-tabs li.active a:hover {
  font-weight: bold;
  
}

.tab_container {
  
  border-top: none;
  z-index:1;
  margin-right:auto;
  margin-left:auto;
  
 
}

.tab_content {
  
  font-size: 16px;z-index:3;
  
  border-radius:20px;
  margin-right:auto;
  margin-left:auto;
}



button.long {min-width:23vw;}

.app1 {display:block;float:right;margin-top: -16vw;}

p.app:hover {background-color:#00fceb;}

a.app2 {text-decoration: none;text-align: center;margin-left:auto;margin-right:auto;max-width:13vw;}

.app2 {text-decoration: none;text-align: center;margin-left:auto;margin-right:auto;max-width:13vw;
}

.app3 {text-decoration: none;max-width:3vw; background-color:blue;}
 p.app3 {text-decoration:none}

 .app {text-decoration: none;}

 @media only screen and (max-width: 600px) {
  *{display:block;background-color:white;color:black;}
  body {
    max-width:600px;display:grid;grid-template-columns:1fr;
  }

}