@import url('https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700');

body {
  background-color: #FBB040;
  color: #FFFFFF;
  font-family: 'Ubuntu', san-serif;
  font-size: 16px;
  line-height: 1.5;
  /* CMD/CNTRL + / Comment */
  /* Set column width */
  width: 1100px;
  /* The margin property creates space around the outside of elements. It takes 4 values - top, right, bottom, left. 0 auto 0 auto sets the top & bottom to 0 margin, and the left and right to automatically resize margins to put content in the middle */
  margin: 0 auto 0 auto;
}

header {
  text-align: center;
  margin: 50px 0;
}

nav {
  margin: 60px 0 0 0;
}

/* Apply styles to links  (a tags) inside nav */
nav a {
  font-family: 'Ubuntu', san-serif;
  font-weight: 700;
  color: #FFFFFF;
  /* Remove underline from links */
  text-decoration: none;
  /* Uppercase */
  text-transform: uppercase;
  /* Padding makes room on the inside of elements */
  padding: 0 40px 0 40px;
}

nav a:hover {
  color: #000000;
}

section {
  background-color: #FBB040;
  margin-bottom: 40px;
}

h2 {
	font-family: 'Ubuntu', san-serif;
  	/* font to 16px */
  	font-size: 20px;
  	font-weight: 400;
  	/* put text in the middle */
  	text-align: center;
  	/* remove the bottom margin */
  	margin-bottom: 0;
	margin-top: 10;
}

h3 {
  /* Change the font to Ubuntu */
  font-family: 'Ubuntu', san-serif;
  /* Make the font bold = 700 */
  font-weight: 400;
  /* Font to 24px */
  font-size: 17px;
  /* Capitalise the font */
  text-transform: none;
  /* Put the text in the middle */
  text-align: center;
  /* Remove the top margin */
  margin-top: 0;
  /* Add 50px to the bottom margin */
  margin-bottom: 50px;
}

h4 {
  font-family: 'Ubuntu', san-serif;
  font-weight: 300;
  font-size: 15px;
  color: #FFFFFF;
  text-decoration: none;
  text-transform: none;
  text-align: center;
}

h4 a:hover {
	color: #000000; 
}

h5 {
  font-family: 'Ubuntu', san-serif;
  font-weight: 300;
  font-size: 20px;
  text-transform: none;
  text-align: center;
}



div.main-website {
	font-family: 'Ubuntu', sans-sefif;
  	text-transform: uppercase;
  	text-align: center;
  	font-size: 12px;
  	font-weight: 400;
  	color: #FFFFFF;
  	padding: 35px 240px;
}

div.main-website a {
  color: #FFFFFF;
  text-decoration: none;
}

div.main-website a:hover {
  color: #000000;
}
	
footer {
  font-family: 'Ubuntu', sans-serif;
  text-align: center;
  font-size: 16px;
  color: #FFFFFF;
}

footer a {
  padding: 5px;
  text-decoration: none;
  color: #FFFFFF;
}

footer a:hover {
  color: #000000;
}



div.social i {
  font-size: 25px;
  padding: 0 15px;
}


/* Contact Page Style */
form div {
  margin-bottom: 20px;
}

label {
  /* Make the labels sit on top of the form fields */
  display: block;
  font-family: 'Ubuntu', sans-serif;
  text-transform: uppercase;
  font-size: 12px;
  color: #B2B2B2;
}

input[type="email"], input[type="text"], textarea {
  width: 100%;
  border: 1px solid #B2B2B3;
  border-radius: 4px;
  padding: 10px;
  font-family: 'Ubuntu', sans-serif;
  font-size: 18px;
  outline: none;
}

textarea {
  resize: vertical;
  height: 100px;
}

input[type="submit"] {
  background-color: #fac600;
  padding: 10px 30px;
  font-size: 14px;
  text-transform: uppercase;
  border-radius: 4px;
  cursor: pointer;
}

/* Mobile Styles */
@media screen and (max-width: 1100px) {
  body {
    margin: 0 20px;
    width: auto;
  }

  img, iframe {
    max-width: 100%;
  }

  div.main-website {
    padding: 20px;
  }

  header {
    margin: 30px 0;
  }

  /* To make the nav links stack */
  nav a {
    display: block;
    padding: 10px;
  }

  /* Change the background color to white on the hover */
  nav a:hover {
    background-color: #FFFFFF;
  }

  /* Media query width: 1100px ends here */