*{box-sizing: border-box;}



/* Animations */
/*============*/
html{scroll-behavior: smooth;}


/* Typography */
/*============*/
@font-face {
  font-family: franklin;
  src: url('fonts/FRABK.TTF');
}
@font-face {
  font-family: blackhand;
  src: url('fonts/blackHand.otf');
}
@font-face {
  font-family: corinthia;
  src: url('fonts/Corinthia.ttf');
}
body{
  text-align: center;
  font-family: 'franklin';
}
li{text-align: left; color: grey}
.home h1{
  font-family: 'blackhand';
  font-size: 3.5rem;
  font-weight: 300;
  color: black;


}
.home h3{font-size: .5rem; font-weight: 200; padding: 0; margin-top: -1.25rem;}
.welcome h1{font-size: 2.5rem; color: #DD8FDA; text-shadow: 2px 2px 0 pink;}
.menu {text-decoration: none; text-transform: uppercase;}
.menu li{list-style: none; }
.quote h1{font-size: 1.5rem; font-weight: 100;}
p{
  color: grey;
}
.services_div{
  color: white;
  text-shadow: 2px 2px 20px black;
}
.about h1, .assessments h2, .guidance h2, .intervention h2{
  color: #07349B;
}
.contact h1:first-of-type{
  font-size: 2.5rem;
  color: #DD8FDA;
  text-shadow: 2px 2px 0 pink;
}









/* Functionality */
/*===============*/

.about-more{display: none;}
.assess-more{display: none;}
.guide-more{display: none;}
.inter-more{display: none;}
.services_nav_more{display: none;}
.qualifications1{display: none;}



/* Contact Form */

.contact_f_container{
  width: 100%;
  height: 100%;
  position: fixed;
  background: grey;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: all 500ms ease;
}
.contact_f_container:target{
  opacity: 1;
  pointer-events: auto;
}
.contact_form{
  margin: auto;
  width: 30rem;
  height: 32rem;

  background-image: url('img/body.jpg');
  background-size: 80%;

  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  border: 3px solid darkgrey;
  box-shadow: 0 0 50px 5px black;
  padding: 0rem 5rem;
}
.contact_form h1{
  padding: 1rem 0;
  margin: 0;
  margin-bottom: 1rem;
  font-size: 2.5rem; color: #DD8FDA; text-shadow: 2px 2px 0 pink;
}
.contact_form a{
    text-decoration: none;
    color: lightgrey;
    font-family: 'gothic-bold';
    transition: all 500ms;
}
.contact_form span{
  position: absolute;
  right: .2rem;
  top: .2rem;
  border: 2px solid lightgrey;
  padding: .5rem;
  border-radius: 2rem;
  transition: all 500ms;
}
@media (max-width:50rem) {
  .contact_form{height: 100vh; width: 100vw; border: none; padding:2rem;}
  .contact_form span{right: 1.5rem; top: .8rem;}
}
.contact_form span:hover{
  background-color: lightgrey;
}
.contact_form a:hover{
  color: grey;
}
input{
  width: 100%;
  margin: 0.5rem;
  box-sizing: border-box;
  border-radius: 5px;
  height: 2rem;
}

textarea{
  width: 100%;
  margin: 0.5rem;
  box-sizing: border-box;
  border-radius: 5px;
  height: 4rem;
}

.submit input {
  height: 4rem;
}
.btnSubmit{
  text-transform: uppercase;
  color: white;
  background-color: #e5886b;
  font-size: 2rem;
  transition: all 500ms;
}
.btnSubmit:hover{
  background-color: lightgrey;
  color: grey;
}
@media (min-width:50rem) {

}


/* Nav Side Menu */
nav {
  display: none;
}




/* Styling and Sizing */
/*====================*/
body{
  margin: 0;
  padding: 0;
  background-image: url('img/body.jpg');
  background-size: 90%;
}
li{margin-right: 1.5rem;}

.menu_toggle{
  width: 8%;
  height: auto;
  position: absolute;
  left: 0px;
  margin-left: .5rem;
  margin-top: .5rem;
  z-index: 3;

}


.menu_nav a{
  color: black;
  text-decoration: none;
  text-transform: uppercase;
}
.menu_nav li{
  list-style: none;
  padding: 1rem 1rem;
  font-weight: 900;
}
.menu_nav{
  position: absolute;
  margin-top: 3rem;
  background-color: #43B0B0;
  box-shadow: 0px 10px 20px #545454;
  width: 100vw;
  height: 100vh;
  z-index: 2;
}
.nav_logo{
  width: 70%;
}

.home{
  display: inline-block; /* To remove the blank space above the section */
  background-repeat: no-repeat;
  background-size: cover;
  padding-bottom: 2rem;
}

.home-hero{
  display: inline-block;
  background-image: url('img/mobile2.jpg');
  background-color: #f18c8e;
  background-position: left;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  width: 100%;
  background-attachment: fixed;
}

.home h1{
  padding-bottom: 0;
  padding-top: 0;
  margin-bottom: 0;
}
/*.home-hero h1{
  float: right;
  margin-right: 1rem;
}*/
.home-hero h3{
  font-size: .75rem;
}

.logo{
  position: absolute;
  display: inline;
  height: 5rem;
  width: auto;
  left: 50%;
  margin-left: -33px;
}
.menu li{
  color: white;
  text-align: center;

  display: inline;
}
nav a{text-decoration: none; color: white;}
nav a:hover,
nav a:focus{
  color: black;
  border-radius: 1em;
  padding: .25rem 1rem;
  background-color: rgba(255,255,255,.50);
  text-shadow: none;
}


.qualifications{
  background-color: white;
  margin-top: 5rem; /* Move the top close button down */
  margin-bottom: 5rem; /* Create space below bottom close button */
}

.qualifications span{
  background-color: #e5886b;
  top: .5rem;
  left: 0; right: 0;
  border-radius: 5px;
  border: 2px solid #e56b6b;
  padding: .3rem;
  padding-top: .5rem;
  padding-left: 5rem;
  padding-right: 5rem;
}
.qualifications a{
  text-decoration: none;
  color: white;
}
.qualifications-img{
  padding-top: 2rem;
  display: block;
  width: 80vw;
  height: auto;
  border: solid lightgrey;
  border-width: 1px;
  border-radius: 1rem;
  background-color: white;
  box-shadow: 1px 1px 35px lightgrey;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5rem;
  margin-bottom: 4rem;
}

.quote{
  background-image: url('img/quote box mobile.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 110%;
  padding: 2rem;
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.quote h1{padding-bottom: 0; margin-bottom: 0; margin-top: -.5rem;}
.quote p{font-size: .75rem; margin-top: 0;}
a{transition: all 500ms;}
.quote_img{
  width: 18%;
  height: auto;
  float: right;
  margin-top: -3.5rem;

}
.about_img{
  width: 18%;
  height: auto;
  float: right;
  margin-top: -5rem;
}

.services_div{
  background-image: url('img/services1.png');
  padding: 2rem 0;
  display: inline-block;
  background-position: center;
  width: 80vw;
  height: auto;
  background-size: cover;
}
.assess_img{
  width: 18%;
  height: auto;
  float: right;
  margin-top: -4rem;
}
.guide_img{
  width: 25%;
  height: auto;
  float: right;
  margin-top: -2.5rem;
}
.about{
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.contact{
  padding-top: 3rem;
  padding-bottom: 2rem;
}
.services{
  padding-bottom: 2rem;

}
.assessments, .guidance, .intervention{padding-bottom: 2rem;}
.about, .assessments, .guidance, .intervention {
  margin: 1rem ;
  padding-left: .5rem;
  padding-right: .5rem;
  border: solid lightgrey;
  border-width: 1px;
  border-radius: 1rem;
  background-color: white;
  box-shadow: 1px 1px 35px lightgrey;
}
.intervention h2{
  width: 10rem;
  margin: 1rem auto;
  word-wrap: break-word;
}
.intervention_img{
  width: 20%;
  height: auto;
  float: right;
  margin-top: -4rem;
}
a:hover,
a:focus{
  color: white;
  border-radius: 1em;
  padding: .25rem 1rem;
  background-color: rgba(200,200,200,.50);
}
.column-1 a{
  text-decoration: none;
  color: black;
  text-transform: uppercase;
}
.contact_heading{
  background-image: url('img/services1.png');
  background-size: cover;
  display: inline-block;
  background-position: center;

  margin: 2rem 2rem;
  width: 40%;
  height: auto;
}

.contact span{display: inline-block; padding-bottom: 2rem;}
.contact p{
  padding: 0;
  margin: 0;
}
.contact h3{
  padding-top: 1rem;
}

.button{
  font-weight: 500;
  background-color: rgba(227, 148, 198, 0.5);
  border: 2px solid pink;
  padding: 1rem 2rem;
  text-shadow: 1px 1px 0 white;

}
footer{
  background-image: url('img/mobile2.jpg');
  opacity: .75;
  height: 1rem;
/*  width: 100vw;*/
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 2.75rem;
}
 footer h4{
   padding-top: 10px;
   padding-bottom: 0;
   margin-bottom: 0;
   text-align: center;
   vertical-align: middle;
 }
 footer span{
   font-weight: 100;
   display: block;
   font-size: .75rem;
 }

/* @ Media Queries */
/*=================*/
@media (min-width: 40rem){
  .menu_toggle{width: 20px; margin-left: 2rem; position: fixed;}
  .menu_nav a{color: white;}
  .menu_nav a:hover,
  .menu_nav a:focus{color: black; border-radius: 0; padding: 1rem 1rem; background-color: rgba(255,255,255,.50);
                    text-shadow: none;}
  .menu_nav li{display: inline;}
  .menu_nav{margin-top: 0; height: auto; position: fixed;}
  .nav_logo{width: 2rem; position: fixed; right: 2rem; margin-top: -2.5rem;}
  .services_nav_more{display: inline-block;}
  .services_nav_more li{ font-weight: 100; font-size: .75rem; text-align: center;}
  .services_nav_more nav a:hover,
  .services_nav_more nav a:focus {padding: 1rem .25rem 0 0;}
  .home{}

  .home-hero{width: 100%; height: 100vh; background-size: cover; margin: 0; padding: 0;}

  .home h1{font-size: 5rem;}
  .home h3{font-size: .75rem; margin-top: -2rem;}
  .logo{}
  .menu li{}
  .qualifications{}

  .qualifications span{}
  .qualifications a{}
  .quote{height: 15vh;background-size: 80% 35vh; padding: 4rem 2rem; box-sizing:content-box;}
  .quote h1{font-size: 2rem; font-weight: 500; word-wrap: break-word; margin: auto 1rem;}
  .quote p{font-size: 1rem;}
  .quote_img{width: 4.75rem; float: inline-end; margin-right: 20%; margin-top: -2.25rem;}
  .welcome h1{font-size: 5rem;}
  .about h1, .assessments h2, .guidance h2, .intervention h2{font-size: 2rem;}
  .about, .assessments, .guidance, .intervention{padding-left: 2rem; padding-right: 2rem; margin-left: 3rem;
                                                margin-right: 3rem;}
  .about_img{width: 3.5rem; float: right; margin-right: 28rem; margin-top: -5rem;}
  .services{padding-bottom: 4rem; }
  .services_div{height: 6rem; width: 10rem; font-size: 1.25rem; margin: 2rem 2rem; background-size: contain;
                background-repeat: no-repeat;}
  .services h1{text-align: center; padding: 0; margin: 0;}
  .assess_img{width: 5rem; float: right; margin-right: 26rem; margin-top: -5rem;}
  .guide_img{width: 6rem; float: right; margin-right: 17rem; margin-top: -3.5rem;}
  .intervention h2{width: auto;}
  .intervention_img{width: 4rem; float: right; margin-right: 20rem; margin-top: -3.5rem;}
  p {font-size: 1.25rem;}
  .contact{ background-color: white;}

  .contact_heading{width: auto; background-image: none; font-size: 1.5rem; margin-bottom: 1rem;
                  color: #DD8FDA; text-shadow: 2px 2px 0 pink; padding-top: 2rem;}

  .column-1 span{display: block;}
}