/* Body */

/***@import url("https://use.typekit.net/vrl8sen.css");**/

body{
    margin: 0px;
    padding: 0px;
    scroll-behavior: smooth;
    font-family: 'Quicksand', sans-serif;
}

h1{
    font-family: 'Quicksand', sans-serif;
    position: relative;
    font-size: 60px;
    font-weight: 600;
    text-align: center;
    color: #F15F37;
    /***@import url("https://use.typekit.net/vrl8sen.css");**/
}

h2{
    font-family: 'Quicksand', sans-serif;
    position: relative;
    font-size: 32px;
    font-weight: 300;
    text-align: center;
    /***@import url("https://use.typekit.net/vrl8sen.css");**/

}

.h2bold{
    font-weight: 500;
    /***@import url("https://use.typekit.net/vrl8sen.css");**/
}

h3{
    font-family: 'Quicksand', sans-serif;
    position: relative;
    font-size: 48px;
    font-weight: 500;
    text-align: center;
    color: #FBD4A6;
    /***@import url("https://use.typekit.net/vrl8sen.css");**/
}

h4{
    font-family: 'Quicksand', sans-serif;
    position: relative;
    font-size: 28px;
    font-weight: 300;
    color: #FBD4A6;
    /***@import url("https://use.typekit.net/vrl8sen.css");**/
}

h5{
    font-family: 'Quicksand', sans-serif;
    position: relative;
    font-size: 21px;
    font-weight: 400;
    color: #1B3333;
    /***@import url("https://use.typekit.net/vrl8sen.css");**/
}

p{
    font-family: 'Quicksand', sans-serif;
    position: relative;
    font-size: 18px;
    font-weight: 300;
    color: #fff;
    /***@import url("https://use.typekit.net/vrl8sen.css");**/
}
ul li{
    text-decoration: none;
}

/**************** header and Navigation ****************/
header{
    position:fixed;
    background-color: rgba(255, 255, 255, 0.4); 
    width: 100%;
    height: 90px;
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    z-index: 99;
    top: 0;
}

.shrink{
    height: 75px;
    opacity: .9;
}

.shrink .widthcontainer1{
    grid-template-rows: 75px;
    grid-template-columns: 200px 1fr;
}

.shrink #logo{
    width: 180px;
    height: 48px;
}

.widthcontainer1{
    margin: 0 auto;
    max-width: 1260px;
    display: grid;
    grid-template-columns: 320px 1fr;
    grid-template-rows: 90px;
    grid-template-areas:
    "lg nav"; 
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
}

#logobox{
    grid-area: lg;
    background-color: #fff;
    opacity: .85;
    padding: 10px 0px 0px 0px;
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
}

#logo{
    z-index: 200;
    width: 260px;
    height: 69px;
    background-image: url("img/Side_Logo.svg");
    background-size: auto;
    background-size: cover;
    margin: auto;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
}

#logo:hover{
    background-image: url("img/Side_Logo_hover.svg");
}

nav{
    grid-area: nav;
    max-width: 1000px;
    text-align: right;
}

nav ul li{
    display: inline-block;
    margin: 20px 10px -10px 10px;
}

nav ul li a{
    color:#000;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
}

nav ul li a:hover{
    color:#F15F37;
}

:target {
	padding-top: 60px;}

#phone{
    width: 50px;
    height: 46px;
    margin: -15px 10px 0px 10px;
    background-image: url("img/phone_icon.svg");
    background-size: auto;
    background-size: cover;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
}

#phone:hover{
    background-image: url("img/phone_icon2.svg");
}

#email{
    width: 50px;
    height: 46px;
    margin: -15px 10px 0px 10px;
    background-image: url("img/email_icon.svg");
    background-size: auto;
    background-size: cover;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
}

#email:hover{
    height: 48px;
    margin: -19px 10px 0px 10px;
    background-image: url("img/email_icon2.svg");
}

#menuToggle{
  display: none;
  position: absolute;
  top: 30px;
  right: 30px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;}

#menuToggle input{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  cursor: pointer;
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  -webkit-touch-callout: none;}

#menuToggle span{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;  
  background: #F15F37;
  border-radius: 3px; 
  z-index: 1;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;}

#menuToggle span:first-child{
  transform-origin: 0% 0%;
  background: #F15F37;}

#menuToggle span:nth-last-child(2){
  transform-origin: 0% 100%;
  background: #F15F37;}

#menuToggle input:checked ~ span{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #F15F37;}

#menuToggle input:checked ~ span:nth-last-child(3){
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
  background: #F15F37;}

#menuToggle input:checked ~ span:nth-last-child(2){
  opacity: 1;
  transform: rotate(-45deg) translate(0, -1px);}

#menu{
  display: block;
  position: absolute;
  width: 320px;
  margin: -100px 0 0 0;
  padding: 50px;
  padding-top: 125px;
  right: -100px;
  background: #fff;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  transform-origin: 0% 0%;
  transform: translate(100%, 0);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  -webkit-border-bottom-left-radius: 60px;
  -moz-border-radius-bottomleft: 60px;
  border-bottom-left-radius: 60px;
  box-shadow: 2px 7px 7px rgba(0, 0, 0, .5);}

#menu li{
  padding: 10px 0;
  font-size: 22px;}

#menu li a{
    color:#000;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;}

#menu li a:hover{
    color: #F15F37;}

#menuToggle input:checked ~ ul{
  transform: scale(1.0, 1.0);
  opacity: 1;}

.phone{
    float: left;
    width: 50px;
    height: 46px;
    margin: 10px 20px 0px 10px;
    background-image: url("img/phone_icon.svg");
    background-size: auto;
    background-size: cover;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
}

.phone:hover{
    background-image: url("img/phone_icon2.svg");
}

.email{
    float: left;
    width: 50px;
    height: 46px;
    margin: 10px 10px 0px 10px;
    background-image: url("img/email_icon.svg");
    background-size: auto;
    background-size: cover;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
}

.email:hover{
    height: 48px;
    margin: 10px 10px 0px 10px;
    background-image: url("img/email_icon2.svg");
}
/**************** Welcome message and hero image ****************/

#hero{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    background-image: url("img/newhome.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    vertical-align: middle;
}

#welcome{
    position: relative;
    display: block;
    margin:0 20px 0 20px;
    max-width: 1260px;
    padding: 0 40px 40px 40px ;
    height: auto;
    background: rgba(255, 255, 255, 0.75); 
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.txtshadow{
    text-shadow: 3px 3px 7px #AFAFAF;
}


.together{ 
    text-align: center;
    text-transform: uppercase;
  z-index: 100;
  width:286px;
  padding: 12px;
  margin: 0 auto;
  position: relative;
  color: #F15F37;
  border: 3px solid #F15F37;
  overflow: hidden;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  transition-delay: 0.2s;
  clear: both;
}

.together:before{
  content: "";
  z-index: -1;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0 ;
  left: -100%;
  background-color: #F15F37;
  -webkit-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.together:hover:before{
  left: 0;
}

.together a{
  font-size: 24px;
    font-weight: 700;
  color: #000;
  text-decoration: none;
}

.together a:hover{
  color: #fff;
}

.social {
  position: fixed;
  top: 35%;
  z-index: 100;
}

.social ul {
  list-style-type: none;
  padding: 0;
  transform: translatex(-250px);
}

.social ul li {
  display: block;
  margin: 3px;
  background: rgba(255, 255, 255, 0.65);
  width: 285px;
  text-align: right;
  padding: 10px;
  border-radius: 0 40px 40px 0;
  transition: all 1s;
}

.social ul li:hover {
  transform: translatex(140px);
}


.social ul li.facebook:hover {
  background-color: #72B9CA;
}

.social ul li.linkedin:hover {
  background-color: #FBD4A6;
}

.social ul li.blog:hover {
  background-color: #A8DACB;
}

.social ul li.insta:hover {
  background-color: #FFF;
}

.social ul li a {
  display:inline-flex;
  font-size: 21px;
  font-weight: 500;
  color: #1B3333;
  text-decoration: none;
}

.social ul li a:hover {
  color: #1B3333;
}

.social ul li i {
  display:inline-flex;
  margin-left: 14px;
  color: #fff;
  border-radius: 50%;
  transform: rotate(0deg);
}

.social ul li:hover i {
  transform: rotate(360deg);
  transition: all 1s;
}
    
    

/**************** About section ****************/
.about{
    width: 100vw;
    min-height: 560px;
    background-color: #5B7D7F;
    border-bottom: 2px solid #F15F37;
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

.about-container{
    position: relative;
    display: block;
    max-width: 1260px;
    padding: 20px;
    height: auto;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.about h2{
    color: #fff;
    margin-top: 0px;
    margin-bottom: 40px;
}

.about h3{
    margin-top: 0px;
    margin-bottom: 0px;
    text-shadow:  3px 3px 7px #696969;
}

#bio{
    display: grid;
    grid-template-columns: 436px 20px 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "pic space text"; 
}

#bio-pic{
    grid-area: pic;
    max-width: 436px;
    height: 297px;
    background-image: url("img/nicole.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#bio-text2{
    grid-area: text;
}

#bio2{
    margin-top: 40px;
    display: grid;
    grid-template-columns: 1fr 20px 436px;
    grid-template-rows: auto;
    grid-template-areas:
    "text space pic"; 
}

#bio-pic2{
    grid-area: pic;
    max-width: 436px;
    height: 297px;
    background-image: url("img/laura.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#bio-text{
    grid-area: text;
}

.about h4{
    text-shadow:  3px 3px 7px #696969;
    margin-bottom: 20px;
    margin-top: -7px
}
/**************** Services section ****************/
#services{
    width: 100vw;
    height: auto;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

#services-container{
    position: relative;
    display: block;
    max-width: 1260px;
    padding: 20px;
    height: auto;
    background: rgba(255, 255, 255, 0.65); 
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

#services h2{
    color: #000;
    font-size: 24px;
    margin-top: 0px;
    margin-bottom: 40px;
    margin-left: 20px;
    margin-right: 20px;
}

#services h3{
    color: #496B6B;
    margin-top: 0px;
    margin-bottom: 0px;
    text-shadow:  3px 3px 7px #CBCBCB;
}

#services h4{
    color: #F78F21;
    margin-top: 0px;
    margin-bottom: 0px;
    font-weight: 500;
    text-align: center;
}

#services p{
    padding: 20px;
}

#boxboxes{
    margin: 0px 0px 30px 0px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "1on1 indiv public health worksite"; 
}

#boxboxes h2{
    color: #5B7D7F;
    padding: 0px;
    margin: 0px;
    font-weight: 500;
}

.boxes{
    border: 1px solid #5B7D7F;
    margin: 10px;
}

#oneonone{
    width: 100%;
    height: 185px;
    background-image: url("img/one-on-one.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#oneonone-text{
    padding: 10px;
}

#indiv{
    width: 100%;
    height: 185px;
    background-image: url("img/classes.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#indiv-text{
    padding: 25px 10px 10px 10px;
}

#public{
    width: 100%;
    height: 185px;
    background-image: url("img/public_talks.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#public-text{
    padding: 25px 10px 10px 10px;
}

#healthfairs{
    width: 100%;
    height: 185px;
    background-image: url("img/healthfai.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#healthfairs-text{
    padding: 35px 10px 10px 10px;
}

#worksite{
    width: 100%;
    height: 185px;
    background-image: url("img/aerobics.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#worksite-text{
    padding: 10px;
}

#iconbox{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
    "WL SN DM HH CMT"
    "IE DI HT SM EM"; 
}

#iconbox h5{
    margin: 10px 0px 0px 0px;
}

#services-container p{
    color: #1B3333;
    text-align: center;   
}

#services-container p span{
    font-weight: 400;
}

.icons{
    margin: 10px;
    text-align: center;
}

#weightloss{
    width: 68px;
    height: 68px;
    margin: 0 auto;
    background-image: url("img/Sress.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#sports{
    width: 68px;
    height: 68px;
    margin: 0 auto;
    background-image: url("img/Sports_Nutrition.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#diabetes{
    width: 68px;
    height: 68px;
    margin: 0 auto;
    background-image: url("img/Diabetes.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#hearthealth{
    width: 68px;
    height: 68px;
    margin: 0 auto;
    background-image: url("img/Heart_Health.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#microtracking{
    width: 68px;
    height: 68px;
    margin: 0 auto;
    background-image: url("img/Calorie_Tracking.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#intuitive{
    width: 68px;
    height: 68px;
    margin: 0 auto;
    background-image: url("img/Intuitive_Eating.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#digestive{
    width: 68px;
    height: 68px;
    margin: 0 auto;
    background-image: url("img/Digestive_issue.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#hypertension{
    width: 68px;
    height: 68px;
    margin: 0 auto;
    background-image: url("img/Hypertension.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#stress{
    width: 68px;
    height: 68px;
    margin: 0 auto;
    background-image: url("img/Sress.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#exercise{
    width: 68px;
    height: 68px;
    margin: 0 auto;
    background-image: url("img/Motivation.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/**************** Ask section ****************/
#ask{
    width: 100vw;
    height: 140px;
    background-color: #5B7D7F;
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

#ask-container{
    position: relative;
    display: block;
    max-width: 1260px;
    padding: 0 40px 0px 40px ;
    height: auto;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

#ask-container h2{
    font-weight: 500;
    padding: 0px;
    margin: 0px;
    color: #fff;
}

#ask-container #head{
    width: 760px;
    height: 122px;
    margin: 0 auto;
    background-image: url("img/Lunch_Learn.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/**************** Worksites section ****************/
#worksites{
    width: 100vw;
    height: auto;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

#worksites-container{
    position: relative;
    display: block;
    max-width: 1260px;
    padding: 20px ;
    height: auto;
    background: rgba(255, 255, 255, 0.65); 
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

#worksites h2{
    color: #000;
    font-size: 24px;
    margin-top: 0px;
    margin-bottom: 40px;
    margin-left: 20px;
    margin-right: 20px;
}

#worksites h3{
    color: #496B6B;
    margin-top: 0px;
    margin-bottom: 0px;
    text-shadow:  3px 3px 7px #CBCBCB;
}

#worksites p{
    padding: 20px;
}

#picbox{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
    "FR HE RC IP"
    "PW IW EM RT"; 
}

#picbox h5{
    margin: 10px 0px 0px 0px;
}

.pics{
    margin: 10px;
    text-align: center;
}

#free{
    width: 120px;
    height: 120px;
    margin: 0 auto;
    background-image: url("img/free_w_insurance.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#health{
    width: 120px;
    height: 120px;
    margin: 0 auto;
    background-image: url("img/healthy_employee.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#reduce{
    width: 120px;
    height: 120px;
    margin: 0 auto;
    background-image: url("img/reduce_cost.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#productive{
    width: 120px;
    height: 120px;
    margin: 0 auto;
    background-image: url("img/productivity.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#positive{
    width: 120px;
    height: 120px;
    margin: 0 auto;
    background-image: url("img/positive.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#injured{
    width: 120px;
    height: 120px;
    margin: 0 auto;
    background-image: url("img/injuries.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#morale{
    width: 120px;
    height: 120px;
    margin: 0 auto;
    background-image: url("img/morale.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#turnover{
    width: 120px;
    height: 120px;
    margin: 0 auto;
    background-image: url("img/turnover.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#worksites-container p{
    color: #1B3333;
    padding: 20px;
    text-align: center;   
}

#worksites-container h4{
    font-weight: 500;
    color:#F78F21;
    text-align: center;   
}

#picbox2{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas:
    "MP CT MT PC AM"; 
}

.pic2{
    margin: 10px;
    text-align: center;
}

#picbox2 h5{
    margin: 10px 0px 0px 0px;
}

#meal{
    grid-area: MP;
    width: 90px;
    height: 90px;
    margin: 0 auto;
    background-image: url("img/mealplan.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#calorie{
    grid-area: CT;
    width: 90px;
    height: 90px;
    margin: 0 auto;
    background-image: url("img/calorietrack.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#macro{
    grid-area: MT;
    width: 90px;
    height: 90px;
    margin: 0 auto;
    background-image: url("img/macro.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#portion{
    grid-area: PC;
    width: 90px;
    height: 90px;
    margin: 0 auto;
    background-image: url("img/portion.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#mindful_2{
    grid-area: ME;
    width: 90px;
    height: 90px;
    margin: 0 auto;
    background-image: url("img/mindfuleat.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#followbox{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
    "LR RD EN SP AC"
    "GS IE RC HV MM"; 
}

.icon2{
    margin: 10px;
    text-align: center;
}

.icon2 h5{
    margin: 10px 0px 0px 0px;
}

#label{
    width: 90px;
    height: 90px;
    margin: 0 auto;
    background-image: url("img/lb.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#dining{
    width: 90px;
    height: 90px;
    margin: 0 auto;
    background-image: url("img/dining.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#exernut{
    width: 90px;
    height: 90px;
    margin: 0 auto;
    background-image: url("img/exernut.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#snack{
    width: 90px;
    height: 90px;
    margin: 0 auto;
    background-image: url("img/snack.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#appcon{
    width: 90px;
    height: 90px;
    margin: 0 auto;
    background-image: url("img/control.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#shopping{
    width: 90px;
    height: 90px;
    margin: 0 auto;
    background-image: url("img/shopping.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#intu{
    width: 90px;
    height: 90px;
    margin: 0 auto;
    background-image: url("img/Intuitive_Eating2.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#carbs{
    width: 90px;
    height: 90px;
    margin: 0 auto;
    background-image: url("img/carbs.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#vaca{
    width: 90px;
    height: 90px;
    margin: 0 auto;
    background-image: url("img/vaca.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#more{
    width: 90px;
    height: 90px;
    margin: 0 auto;
    background-image: url("img/more.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#blog{
    margin: 0px 20px 0px 20px;
    padding: 0px;
    border: 1px solid #F15F37;
}
/**************** Footer ****************/
footer{
    width: 100vw;
    height: auto;
    border-top: 2px solid #F15F37;
    background-color: #5B7D7F;
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

#footer-container{
    position: relative;
    display: block;
    width: 1260px;
    padding: 40px 40px 40px 40px ;
    height: auto;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

#footergrid{
    display: grid;
    grid-template-columns: 330px 1fr;
    grid-template-rows: 100px 100px 1fr;
    grid-template-areas:
    "FL FLS"
    "SM AD"
    "CR CR"; 
}

#footerlogo{
    grid-area: FL;
    width: 211px;
    height: 56px;
    background-image: url("img/logo_white.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    
}

#footerlinks{
    grid-area: FLS;
    text-align: right;
    margin-top: 0px;
}


#footer-container ul li{
    display: inline-block;
    margin: 0px 10px -0px 10px;
}

#footer-container ul li a{
    color:#fff;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
}

#footer-container ul li a:hover{
    color:#F15F37;
}

#footersocial{
   grid-area: SM;
}

.bottomsoc{
    display: inline-block;
    margin: 0px 10px 0px 10px;
}

#address{
   grid-area: AD;
   text-align: right;
}

#address p{
    margin-top: 0px;
}

#address a{
    text-decoration: none;
    color: #fff;
}

#copyright{
   grid-area: CR; 
}

/**************** Media Screens ****************/
@media only screen and (max-width: 1360px){

}

@media only screen and (max-width: 1260px){
#welcome{
    width: 94%;}
}

@media only screen and (max-width: 983px){
nav{
    display: none;}  

#menuToggle{
  display: block;
} 
    
header{
    position:fixed;
    background-color: rgba(255, 255, 255, 0.0); 
}
    
#boxboxes{
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
    "1on1   indiv  public";
    "health worksite"; }   
    
#ask-container #head{
    width: 660px;
    height: 106px;}
    
   

}

@media only screen and (max-width: 800px){
h1{
    font-size: 60px;
}

h2{
    font-size: 32px;
} 
    
#bio{
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 297px 1fr;
    grid-template-areas:
    "pic"
    "text"; 
}

#bio-pic{
    max-width: 100%;
    height: 297px;
}

#bio-text{
    text-align: center;
    margin-top: 20px;
}
    
#bio2{
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 297px 1fr;
    grid-template-areas:
    "pic"
    "text"; 
}

#bio-pic2{
    max-width: 100%;
    height: 297px;
}

#bio-text2{
    text-align: center;
    margin-top: 20px;
}   
    
#ask-container #head{
    width: 460px;
    height: 74px;}
    
}

@media only screen and (max-width: 768px){
h1{
    font-size: 48px;
}

h2{
    font-size: 28px;
}
    
#boxboxes{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas:
    "1on1   indiv ";
    "public health"
    "worksite"; }
    
#picbox2{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas:
    "MP CT"
    "MT PC"
    "AM AM"; 
}
    
#followbox{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas:
    "LR RD"
    "EN SP"
    "AC GS"
    "IE RC" 
    "HV MM"; }
    


#footer-container{
    padding: 20px;}    
    
    
#footergrid{
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas:
    "FL"
    "SM"
    "AD"
    "CR"; }
    
    
#footerlogo{
    margin: 0 auto;
    
}
    
#footerlinks{
    text-align: center;
    display: none;
}
    
#footersocial{
   text-align: center;
}
    
#address{
     text-align: center;   
}
    
#copyright{
     text-align: center;   
}
    
}

@media only screen and (max-width: 650px){
    
#boxboxes{
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas:
    "1on1"
    "indiv" ;
    "public" 
    "health"
    "worksite"; }  
    
#iconbox{
    display: grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas:
    "WL SN"
    "DM HH" 
    "CMT IE"
    "DI HT"
    "SM EM"; } 
    
#picbox{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas:
    "FR HE"
    "RC PW" 
    "IP IW"
    "EM RT"; } 
    
}

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

#ask-container #head{
    width: 320px;
    height: 51px;}    
    
}

@media only screen and (max-width: 414px){
h1{
    font-size: 36px;
}

h2{
    font-size: 18px;
} 
    
#ask-container #head{
    width: 280px;
    height: 44px;} 
}

@media only screen and (max-width : 456px ){
#logo{
    width: 200px;
    height: 53px;
}
#logobox{
    width: 240px;
    height: 70px;
}
    
#ask-container #head{
    width: 240px;
    height: 38px;} 
}