html {
   margin: 0px;
   min-height: 100vh;
   width: 100%;
   font-size: 62.5%; /* default of 16px * 62.5% = 10px. 10px = 1rem.   Then can always use rem instead of pixels */
   box-sizing: border-box; /* will apply to alll divs */
  }

body {
   margin: 0;
   font : 1.6 rem;
   min-height: 100vh; /* 100 viewport height */
   width: 100%;
   background-size: cover; 
}

.main-wrap{
	position: absolute;
    min-height: 100%;
    width: 100%;
}

.main-wrap:before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  background-image: url('../images/pexels-fauxels-3183170-small.png');
  background-size: cover;
}

.main-content{
	position: relative;
}
.main-img{
	opacity: 0.6;
  	position: absolute;
  	left: 0;
  	top: 0;
  	width: 100%;
  	height: auto;	
}
.header{
	width : 100%;
}

/* .logo-container {
	margin-bottom: 5px;
} */

.logo-div{
	width: 25%;
	display: inline;
}

.logo-img{
	width : 10%;
	opacity: 0.6;
}

.nav-bar{
	color: #d0d7de;
    font-size: 2.2rem;
    width: 100%;
    height: 3rem; 
    background: darkslategrey;  
}

.nav-bar-tab{
	width: 20%;
    font-family: Helvetica, AvenirLTStd-Heavy, AvenirLTStd-Book,  Arial, sans-serif;
    padding: 0.2rem 0 0.2rem 0;
	position:absolute;
	text-align: left;
 }
    
.nav-bar-tab:hover {
	text-decoration-line: underline;
}

.faq{
	cursor: pointer;
	float: right;
    right: 75%;
}
.contact{
	cursor: pointer;
	float: right;
    right: 50%;
    }	
.about{	
	cursor: pointer;
	float: right;
    right: 25%;
}
.apps{	
	cursor: pointer;
	z-index : 4;
	float: right;
    right: 3%; 
}
.app-menu{	
    right: 3%;
    height: 0;
    width: 20%;
    opacity : 0;
    z-index: 3;
  	position:absolute;	
  	overflow: inherit;  	
}

.assistant{	
	cursor: pointer;
	z-index : 2;
	position: absolute !important;
	color: darkslategray;    
	top: 0;
}

.reference{	
	cursor: pointer;
	z-index : 1;
	position: absolute !important;
    top: 0;
    color: darkslategray;
}



.splash-div-container {
  	width: 70%;
    display: inline-block;
    margin: 0 5%;
} 
  
.splash {
	text-align : center;
	font-family: "Playfair Display", Helvetica, Arial, sans-serif;
    color: darkslategray; 
    /* color: #d0d7de; */
    font-size: 5rem;
    margin-bottom: 30px; 
 }

.content-div1{
	position : relative;
    margin-left: 2rem;
    font-family : AvenirLTStd-Book, Helvetica, Arial, sans-serif;
    display : none;
    font-size : 2rem;
}

.content-div2{	
	/* background: grey; */
/* 	display : none;
 */} 
.content-div3{	
	position: absolute;
    bottom: 30px;
    right: 30px;
} 

.about-release{
	font-weight: bold;
}
.about-text{
	text-align: center;
	margin-top: 10%;
} 
.content-message{
	text-align: center;
	margin-top: 10%;
}
.faq-heading{
/*     color : #cc4f7c;
 */
     color : darkslategrey;
 }
.faq-question{
	font-style : italic;
}

.login-form{
	margin-top: 100px;
	width: 100%;
}
.login-field-container{
	margin-top: 20px;
    width: 100%;
}

.login-input{
	width: 20%;
    margin: 0 40%;
    line-height: 30px;
    font-size: 25px;
    padding-left: 5px;    
}

.page-hits {
    font-family: Helvetica, AvenirLTStd-Heavy, AvenirLTStd-Book,  Arial, sans-serif;
 	color: #d0d7de;
    font-size: 2.2rem;
    padding: 0.5rem;
    width: 96%;
    margin: 0 2% 0 2%;
    color: darkslategray;
    margin: 10px 0 10px 0;
    text-align: center;
    position: fixed;
    bottom: 0;
 }

/* Phone responsiveness styles */

@media screen and (max-width: 991px) {
     /* start of large tablet styles */

}

@media screen and (max-width: 1024px) {
    /* ipad styles */
    /* bigger phone styles */
    
	
	.nav-bar {
		height : initial;
		border: none;
	}

	.nav-bar-tab {
		width: 90%;
    	margin: 0 5% 1% 5%;	    
    	text-align: center;	
    	font-size: 6rem;
		float: none;
   		position: inherit;
    }
   	.faq {
   		right : initial;
   	}
   	.login {
   		right : initial;
   	}

	.splash {
		font-size: 5em;
    	line-height: 2em;
	}
	.splash-div {
		top : initial;	
	}
	.content-div1 {
		top: initial;
    	position: initial;
    	margin-bottom: 4rem;
	}   
	.login-input{
    	width: 40%;
    	margin: 0 30%;	
    }
	
	.login-button{
    	width: 40%;
    	margin: 20px 30%;	
    }
    
    .app-menu {
    	left: 50%;
    	width: 47%;
		font-size: 7px;
 		display : none;
    }
    
    .page-hits {
    	margin: 5% 5% 0 5%;
    	position: fixed;
    	width: 89%;
    	font-size: 2rem;
    	color : darkslategray;
    	bottom: 0;
    }
}

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