/* Style for our header texts
	* --------------------------------------- */
	
	body {
		font-family: "lato", helvetica, arial, sans-serif;
		background-color: #22afc1;
	}
	
	h1{
		font-size: 5em;
		color: #fff;
		margin:0;
		text-transform: uppercase;
	}
	
	h2 {
		font-size: 3em;
		color: #fff;
		text-transform: uppercase;
	}
	
	h3 {
		font-size: 1.5em;
		color: #fff;
		text-transform: uppercase;
		margin: 1em;
	}
	.intro p, .intro li {
		color: #fff;
		text-align: left;
		margin: 1em auto;
		font-weight: 100;
		width:60%;
		font-size: 1.5em;
	}
	
	a {
		text-decoration: underline;
		color: #fff;
		font-weight: 400;
	}
	
	strong {
		font-weight: 400;
	}

	/* Centered texts in each section
	* --------------------------------------- */
	.section{
		text-align:center;
	}

	/* Overwriting styles for control arrows for slides
	* --------------------------------------- */
	.controlArrow.prev {
		left: 50px;
	}
	.controlArrow.next{
		right: 50px;
	}


	/* Bottom menu
	* --------------------------------------- */
	#infoMenu li a {
		color: #fff;
	}
	
	.button, buttonmobile {
		border: 1px solid #fff;
		padding: 1em;
		margin: 2em;
		display: inline-block;
		color: #fff;
		text-transform: uppercase;
		
	}
	
	
	
	.button:hover {
		opacity: .5;
	}
	
	@media (max-device-width: 1024px) {
  /*IPad portrait AND netbooks, AND anything with smaller screen*/
  /*make the design flexible if possible */
  /*Structure your code thinking about all devices that go below*/
  .button {
	  display: none;
  }
  
  body {
	  padding: 1em;
  }
  
  h2 {
	  font-size: 72px;
  }
  
  .intro p {
	  font-weight: 400;
	  font-size: 48px;
	  width: 80%;
  }
  
  .wrap {
	  width: inherit;
  }
  
  .buttonmobile {
  		font-size: 72px;
		border: 2px solid #fff;
		padding: 36px;
		margin: 36px;
		display: inline-block;
		color: #fff;
		text-transform: uppercase;
		
	}
  
}