/* General base settings */
html, body {
	margin:0;
	padding:0;	
	min-height:100%;
}

/* Set to relative to enable sticky footer */
html {	
	position:relative;
}

/* Base styles */
h1, p, h2 {
	font-family: 'Raleway', sans-serif;
	margin:0;
}

h1 {
	letter-spacing:5px;
	font-size:64px; 	 	
}

h2 {
	font-size:24px; 
}

p {
	font-size:18px; 
}


/* Navbar */
.navbar{
    
    margin:0;   
    padding:15px 30px;
    border: 0;
    border-radius: 0;    
    font-size:80%; 
    letter-spacing: 5px;
    
}

.navbar-nav li a:hover {
    color: #1abc9c !important;
}

/* Styling for Carousel */
.carousel-inner > .item > img {
    
	width: 100%; /* Set width to 100% */
	height:700px;	
	margin: 0 auto;
	object-fit:cover;
}
  
.carousel-caption h3 {    
  color: #fff !important;
}

/*Footer styling - sticky */
footer {
	background-color:#222222; 
	text-align:center;
	padding:30px 0;	
	position:absolute;
	bottom:-85px;
	width:100%;
}

footer p {
	color:rgb(157, 157, 157); 
}

/* Main section for forms and/or chem plans */
.main {	
	min-height:600px; 	
}

/* Control of scheme history table and rplan height */
.main > .table, .main .rplan {
	position:relative;
	top:125px; 
	margin-bottom:175px;*/
}

/* Ensures login and register forms sit roughly in center of view-port */
.main .form-class {
	position:relative;
	top:25vh;
	margin-bottom:100px; 
}

/* Control of login and register width
 */
.main .form-class {	
	width:20%;	
}

/* Additional table stylings */
.main .col-md-10 > .table > thead > tr > th {
	padding:8px 0 12px; 	
}

.main .col-md-10 > .table > tbody > tr > th, .main .col-md-10 > .table > tbody > tr > td {
	padding:12px 0 8px;	
}

.main .col-md-10 > .table > tbody > tr > td button{
	margin-left:25px; 
}


/*Set height on rplan containers and text so as to space sections apart */  
.spacer {    
   margin-bottom:5%; 
}

.text-spacer {
	margin-top:80px
}

/* Section specific styles*/
.sub-section-1 {
	padding:50px 0;	
	text-align:center;  
	color:#fff;
	background-color:rgb(39, 40, 43); 
}

.sub-section-1 .container {
	width:60%; 
}

.sub-section-1 h1 {
	margin-top:30px; 
}

.sub-section-1 h1 > span {	
	padding:12px;	 
	border:2px solid #fff;	  
}

.sub-section-1 .container > span {
	border:1px solid #fff;
	display:inline-block; 
	width:6%;
	margin:10px 0 20px; 	 
}

/* Mobile view dimensions */
@media (max-width: 600px) {
    
    h1 {
		letter-spacing:5px;
		font-size:32px; 	 	
	}

	h2 {
		font-size:24px; 
	}

	p {
		font-size:18px; 
	}
    
    .carousel-caption {
        display: none; /* Hide the carousel text when the screen is less than 600 pixels wide */
    }
   
    .carousel-inner > .item > img {
        
		width: 100%; /* Set width to 100% */	
		margin:0 auto;
		height:300px; 		
	}  
	
	footer {
		padding:15px 0;
		bottom:-45px;
	} 
	
	.navbar {
		padding:10px 0;
	}	
	
	
	.main .container-fluid {
		width:80%; 
	}	
	
	.text-spacer {
		margin-top:40px
	}

	/* Section specific styles*/
	.sub-section-1 {
		padding:50px 0;			
		text-align:center;  
		color:#fff;
		background-color:rgb(39, 40, 43); 
	}
	
	.sub-section-1 .container {
		width:90%; 
	}

	.sub-section-1 h1 {
		margin-top:0; 
	}

	.sub-section-1 h1 > span {	
		padding:8px;	 
		border:2px solid #fff; 
	}

	.sub-section-1 .container > span {
		border:1px solid #fff;
		display:inline-block; 
		width:15%;
		margin:10px 0 20px; 	 
	}	
    
}