html {
	background:url('Homepage Background.png') no-repeat center fixed;
	background-size:cover;
    font-family: acuta, serif;
    font-weight: 400;
    font-style: normal;
}

body {
	margin:0% 10% 2% 10%;
	
}

@media screen and (max-width: 1000px) {
    body 	{
        margin:0% 0% 0% 0%;   
         }
}
.header {
	margin-top:0px;
	height:180px;
	background-image:url('Picture1.png');
	background-size:cover;
	background-repeat:no-repeat;
    
	
}
@media screen and (max-width: 1000px) {
    .header {
        height:300px;
    }
}
.logo {
    float:right;
}

@media screen and (max-width: 1000px) {
    
.logo {
    width:80%;
    margin-left:10%;
    margin-right:10%;
    }
}         
     
.topnav {
  overflow: hidden;
  background-color: #36353E;
  z-index:-1;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 18px;
}


.active {
  background-color:#312F3B;
  color: white;
  height:inherit;
}


.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 17px;    
  border: none;
  outline: none;
  color: white;
  background-color: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  font-size:18px;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #312F3B;
  color: white;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}

@media screen and (max-width: 1000px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
@media screen and (max-width: 1000px) {
    .topnav a {
        font-size:30px;
        
    }
}  

  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 1000px) {
  .topnav.responsive {position:relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
    
  
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
    font-size:30px;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
    font-size:18px;
  }
}

 ul {
	
	margin:0;
	padding:0;
}

 li {

	float:none;
}
 li a {
	display:inline-block;
	color:white;
	font-family:"Calisto MT";
	font-style:italic;
	text-align:center;
	padding:14px 16px;
	text-decoration:none;
}


 li a:hover:not(.active) {
	background-color:#424242;
}

.active {
	background-color:#171719;
	color:white;
}
@media screen and (max-width: 1000px) {
.active {
	background-color:black;
	color:white;
	height:39.2px;
}

}
.socialmedia {
    float:right;
    display:inline-block;
    text-align:right;
    overflow:hidden;
}
.fa {
  padding: 0px;
  width:28px;
  text-align: center;
  text-decoration: none;
  margin:0px 0px 0px 10px; 
  border-radius: 15%;
  margin-right:0px;
  display:inline-block;


  
 
  
  }
  
  
.fa:hover {
	opacity:0.7;
}

.fa-facebook {
	background:#3B5998;
	color:white;
}
.fa-twitter {
	background:#55ACEE;
	color:white;
}

.fa-youtube {
	background:#bb0000;
	color:white;
}
@media screen and (max-width: 1000px) {
    .socialmedia {
        display:none;
    }
}
.sticky {
  position: sticky;
  top: 0;
}
/* Create two unequal columns that floats next to each other */
.column {
    float: left;
    padding:0px;
}


/* Right column */
.column.right {
	width:35%;
	min-height:700px;
	background-color:#4E4D58;
	color:#C1C1C1;
	text-align:center;
	font-style:italic;

}

/* Left Column */
.column.left {
	width:65%;
	min-height:700px;
	background-color:#3A3941;
	color:white;
	text-align:center;

	
		
	
}
.column.first {
    width:33.33%;
    min-height:100px;
    text-align:center;
    color:#A4A4A4;
    
}
.column.middel {
    width:33.33%;
    min-height:100px;
    text-align:center;
    color:#A4A4A4;
    
}
.column.last {
    width:33.33%;
    text-align:center;
    color:#A4A4A4;
    
}
.column.last1 {
    width:100%;
    text-align:center;
    color:#A4A4A4;
    
}


    


/* Responsive layout - make the two columns stack on top of each other instead of next to each other instead of next to each other on smaller screens (600px wide or less) */
@media screen and (max-width: 1000px) {
    .column.left, .column.right {
        width: 100%;
        height:auto;
         }
}
p {
    font-size:1em;
}
input[type=text],select,textarea {
	width:100%;
	padding: 12px;
	border: 1px solid #ccc;
	border-radius:4px;
	resize: vertical;
}

label {
	padding: 12px 12px 12px 0;
	display:inline-block;
	text-align:left;
}

.submit {
	background-color: gray;
	color:white;
	padding: 24px 25px;
	border:none;
	border-radius:4px;
	cursor:pointer;
	float:inherit;
	
}
.submit:hover {
	background-color:black;
}
.container {
	border-radius:5px;
	background-colour:gray;
	padding:0px;
}
	


/*Clear floats after the columns */
.row-1:after {
	content:"";
	display:table;
	clear:both;
}

/*Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
	 input[type=submit] {
		widows:100%;
		margin-top:0;
	}	
}