/*	html, body {
    height: 100%;
}
*/
.body {
    background-image: url("../assets/images/HCR Website background.jpg") ;
	background-repeat: no-repeat;
/*	background-position: center top; */
	background-attachment: fixed;
	background-color: grey;
	font-family: 'Ovo', serif; 
/*	font-family: 'Avenir', sans-serif; */
	line-height: 1.3;
	color: white;
	margin:0;
	padding:0;
	border:0;
/*	
	display: flex;
	flex-direction: column;
	 */
}
	
.body #wrap-all{
    text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
	}
	
/*	
.content {
    flex: 1 0 auto;
}	
		 */
		 
a {
      	color: rgb(0, 128, 0);
      	text-decoration: underline;
  
	}
/*	

a:link, a:visited {
    color: blue;
}
a:hover {
    color: red;
}	
*/

button.buynow {
    padding: 5px 30px;
    font-family: 'Barlow', sans-serif;
    font-weight: 300;
    letter-spacing: 4px;
    font-size: 1.5em!important;
    background: rgb(0, 195, 58);
    border: 1px solid rgb(0, 195, 58);
    border-radius: 5px;
    cursor: pointer;
    
}
button.buynow:hover {
    background: rgb(0, 89, 58);
    color:white;
}
	
.header-box { 
      	align: center;
      	margin:0 auto;
      /*	opacity: 50%; */
      	text-align: center;
      	}	
	
.logo {
    margin: 20px 10px 25px 0px;
    display:inline-block;
    vertical-align: center;
}

 /* Previously I had got rid of these two. Not sure why.	*/
.mailinglistbox {
    width:685px; 
    display:inline-block;
 /*   margin-left: 5%;
    margin-right: 5%; */
    margin: 20px 0px 25px 10px;
    vertical-align: top;
    background: rgba(255,255,255,0);
    color:white;
    border: 1px solid #fff !important;
    border-radius: 5px;
    padding: 0;
    
    
  /*  
   background:#fff; 
	clear:left; 
	font:13px Lusitana, Helvetica,Arial,sans-serif; width:330px; color:white; display:inline-block; background: rgba(255,255,255,0); margin-left: 5%; margin-right: 5%;     border: 1px solid #fff !important; 	border-radius: 5px; 
    */
    

} 	



.gray-content-box {
    display:block;
    margin: 20px auto;
    text-align: center;
    background: rgba(255,255,255,0.9);
    padding: 30px 0 50px 0;
    max-width:1200px;
   /* border: 16px solid rgba(0,0,0,0); */
    border-radius: 10px 10px 10px 10px; 
    font-family: 'Barlow', sans-serif;
    color:black;
}

.left-box {
  display: inline-block;
  margin: 0;
  text-align: left;
  
  width: 45%;
  /*height: 600px;*/
  padding: 10px 30px 10px 10px;
/*  border: 1px solid blue;    
  background-color: yellow; */
}

.right-box {
  display: inline-block;
  margin: 0;
  text-align: right;
  
  width: 45%;
 /* height: 600px;*/
  padding: 10px 10px 10px 30px;
/*  border: 1px solid blue;    
  background-color: yellow; */
}

.teacherblock {
  display: inline-block;
  margin: 0;
  text-align: left;
  vertical-align: top;
  width: 25%;
 /* height: 600px;*/
  padding: 10px 10px 10px 30px;
/*  border: 1px solid blue;    
  background-color: yellow; */
}
/*
.left-box { 
        display: inline-block;
      	max-width:640px;
      	height:600px;
      	align: left;
      	margin:0 auto;
      
      	font-size: 17px;
      	font-weight:200;
      	text-align: left;
      	padding-bottom:50px;
      	opacity: 1;
      	}
      	
.right-box { 
        display: inline-block;
      	max-width:640px;
      	height:600px;
      	align: right;
      	margin:0 auto;
      
      	font-size: 17px;
      	font-weight:200;
      	text-align: right;
      	padding-bottom:50px;
      	opacity: 1;
      	}     
    
    */
.h1, h1 {
        font-size: 4.5em!important;
        font-weight: 100;
        letter-spacing: 4px;
       /* text-transform: uppercase;    */
        display: block;
        text-align: center;
        padding: 0 0 15px 0;
       /* font-family: 'Overpass', sans-serif;*/
        max-width:1200px;
        margin:0 auto;
	}
	
 /*     
.h1:hover {
      	text-shadow: 4px 4px 4px #fff;
	}
	*/
	
.h2, h2 {	
        font-weight: 100;
        letter-spacing: 4px;
        font-size: 2.5em!important;
}

.h3, h3 {
    	font-weight: 200;
        letter-spacing: 4px;
        font-size: 1.5em!important;
}	

.costsize {
    	font-weight: 200;
        letter-spacing: 4px;
        font-size: 1.5em;
        display: inline;
}	

.para2 {
    font-weight: 200;
        letter-spacing: 4px;
        font-size: 24px;
        display: inline;
}	
	
.para1 {
    display: inline-block;
    align:left;
    font-size:22px;
    text-align:left;
    max-width:660px;
    margin:0 auto;
}	
	
.center-box { 
      	max-width:710px;
      	align: left;
      	margin:0 auto;
      /*	opacity: 50%; */
      	font-size: 17px;
      	font-weight:200;
      	text-align: left;
      	padding-bottom:50px;
      	opacity: 1;
      	}
      	
     	
      	
      	
	
.MailchimpTitle {
            font-size: 1.3em;
        font-weight: 400;
        display: inline-block;
        text-align: left;
        
}	

.inputs {
    text-align:center;
    
}
 	
.mc-field-group {
	width:40% !important;
	padding: 10px 20px 10px 0 !important;
    
	    display:inline-block;
	    text-align: left;
	}
	
	.button {
	    	    display:inline-block;

	}
	
.name{
    color:grey;
}	
	
	
.mailing-list {
	font-size: 14px;
	display: inline-block;
	position: absolute;
    	
	text-align: left;
	background: rgba(255,255,255,0.9);
	border: 3px black;
	border-radius: 5px;
	padding: 5px;
	margin:0 auto;
	}
      

      	

      	


      	
ul.topnav {
    	padding: 0px 10px 0px 10px;
    	font-weight: 300;
        font-size: 18px; 
        margin:0 auto; 	
	}

ul.topnav li  {
	color: #000;
	display: inline;
	padding: 0px 5px 0px 5px;
	margin: 0px 5px 0px 5px;
	}

ul.topnav li:hover {
	background: #0033FF;
	color: white;
	}
	
ul.topnav li a:hover {
	background: #0033FF;
	color: white;
	}

ul.topnav li a:active {
	background-color: #555;
	opacity: .4;
	color: white;
	}
  
@media (max-width: 550px) {
    .left-box {
      width: 95%;
    }
    
    .right-box {
      text-align: left;
      width: 95%;
      padding: 10px 30px 10px 10px;
    }
    
    .teacherblock {
      width: 95%;
      padding: 10px 30px 10px 10px;
    }

    
    .title {
        font-size: 30px;
        padding: 5px;
        }
      
    ul.topnav li {
        padding: 5px 10px 5px 0px;
        display: block;
        font-size: 16px;
        background: rgba(0,0,0,0);
        }
      
    ul.topnav li:hover {
    	background-color: #0033FF;
	color: white;
	}
    
    ul.topnav a li:hover {
	background-color: #0033FF;
	color: white;
	}

}    	
      	
      	
      	
	ul.sidenav {
    list-style-type: none;
    margin: 200, 0, 0, 0;
    padding: 0;
    width: 100px;
    font-size: 20px;
    position: fixed;
    height: 50%;
    overflow: auto;
    
}

ul.sidenav li a {
    display: block;
    color: #000;
    padding: 3px 8px 0px 3px;
    text-decoration: none;
}


ul.sidenav li a:hover {
    background-color: #0033FF;
    color: white;
}

ul.sidenav li a:active {
    background-color: #555;
    opacity: .4;
    color: white;
}

	div.content {
    margin-left: 10%;
    padding: 1px 16px;
    height: 500px;
}

@media screen and (max-width: 730px) {
    .mailinglistbox {
        width:95%; 
        margin-left: 0%;
        margin-right: 0%;
    }
    
}

@media screen and (max-width: 1200px) {
    .left-box {
      width: 65%;
    }
    
    .right-box {
      text-align: left;
      width: 65%;
      padding: 10px 30px 10px 10px;
    }
    
    .teacherblock {
      width: 65%;
      padding: 10px 30px 10px 10px;
    }  
    
    
/*    .h1, h1 {
            font-weight: 200;
            font-size: 30px;
    	}*/
    	
    .h2, h2 {	
            font-weight: 200;
            font-size: 20px;
    }
    
    .h3, h3 {
        	font-weight: 300;
            font-size: 10px;
    }    
}    
    
@media screen and (max-width: 700px) {
    
    .titleetcbox {
        width:88%; 
    }
    
	

    ul.sidenav {
        width: 100%;
        height: auto;
        position: relative;
    	}
    
    ul.sidenav li a {
        float: left;
        padding: 3px 28px 0px 3px;
    	}
    
    div.content {
    	margin-left: 0;
    	}
}

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

    
    ul.sidenav li a {
        text-align: center;
        float: none;
    }
}

	.footer-box { 
      	clear: left;
      	
      	width:100%;
      	align: center;
      	margin:0 auto;
      	
      	padding-top:15px;
      	padding-bottom:15px;
      	
    	
   	bottom: 0;
   	background: rgba(0,0,0,0.5);
   	/*box-shadow: 0 -2px 8px rgba(0,0,0,0.3);*/
	}
	
/*	
.footer {
    flex-shrink: 0;
}	
	 */	
	 
ul.footnav {
    list-style-type: none;
   font-family: 'Montserrat', sans-serif;
    width: 100%;
   	clear: left;
    	align: center;
      	text-align:justify;
      	display: inline-block;
      	margin:0 auto;
    	border:0;
    	padding:0;
   	bottom: 0;
   	background: rgba(0,0,0,0.7);
    /*box-shadow: 0 -2px 8px rgba(0,0,0,0.3);*/
}
ul.footnav li {
   	
   	float:left;
   	text-align:center;
   	padding: 14px 0 10px 20px;
    text-decoration: none;
    font-size: 14px;
     margin-left: auto;
    margin-right: auto;
   /* background: rgba(0,0,0,0.7); */
}

ul.footnav li a {

    margin-left: auto;
    margin-right: auto;
    color: white;
    text-align: center;
    float:right;
    text-decoration: none;
    font-size: 14px;
}


ul.footnav li a:hover {
    background-color: #111;
    color: white;
}

ul.footnav li a:active {
    background-color: #777;
    opacity: .4;
    color: white;
}
.contact {
    	padding: 60px 10px 0px 10px;
    	font-weight: 100;
        font-size: 18px; 
        margin:0 auto; 	
	}
	
.Join-us {}	
	
.table-div {
    padding-bottom:100px;

}	
	
	table {
	    width:70%;
	    align:center;
	    border-collapse: collapse;
	    
	}
/*	th, td {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.7em;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 15px;
    padding-right: 15px;
    text-align: center;
    width:25%;
    height:15px;
}*/
	th, td {
	font-family: 'Montserrat', sans-serif;
	font-size: 1em;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 30px;
    padding-right: 30px;
    text-align: center;
    width:25%;
    height:20px;
}

.first-column-style {
    text-align: right;
    color: #ddd;
    border-top: 1px solid #fff;
}

.standard-cell {
    border-top: 1px solid #ccc;
}

.food-cell {
    border-top: 1px solid #fff;
    background-color: #626262;
    opacity: 0.7;
    
}