/* FONTS
font-family: gala, sans-serif;
font-family: 'Roboto', sans-serif;
*/

* {
	margin: 0;
	padding: 0;
	border: 0;
}

article, aside, details, figcaption, figure, footer, header, main, nav, section, summary {
    display:block;
}

html {
	scroll-behavior: smooth;
}

body {
	background-color: #fffef8;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
}

#header-home {
	background: url("images/bg-images/land-water.png") no-repeat bottom center;
	background-size: 100%;
	height: 100vh;
	position: relative;
}

#header-home .logo {
	width: 70vw;
	max-width: 400px;
	z-index: 1;
}

#header-int {
	background: url("images/bg-images/land-water2.png") no-repeat bottom center;
	background-size: 100%;
	height: 250px;
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	position: relative;
}

.header-container .logo {
	width: 50vw;
	max-width: 200px;
	padding: 20px 10%;
	z-index: 1;
}

.header-content {
	display: flex;
	flex-direction: column;
	align-items:center;
	text-align: center;
	justify-content: space-around;
	height: 65vh;
	padding: 14vh 10% 0;
}

.desktop-menu {
	display: none;
}

/* hamburger menu START */
.nav {
  -webkit-transition: left 0.5s ease;
  -moz-transition: left 0.5s ease;
  -ms-transition: left 0.5s ease;
  -o-transition: left 0.5s ease;
  transition: left 0.5s ease;
  background: #0688a6;
  color: white;
  cursor: pointer;
  font-size: 2rem;
  height: 100vh;
  left: -58rem;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 5;
}

.nav.expanded { left: 0; }

.nav ul {
  position: absolute;
  top: 30%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  list-style: none;
  margin: 0;
  padding: 0;
	width: 100%;
	text-align:center;
}

.nav ul li {
	font-family: 'Lora', serif;
	font-size: 2.5rem;
	padding: 20px 0;
}

.nav ul li a{
	color: #ffffff;
	font-family: gala, sans-serif;
	text-transform: uppercase;
}

.nav ul li a:hover{
	opacity: 0.6;
  transition: 0.6s;
}

.nav-toggle {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  cursor: pointer;
  height: 3px;
  left: 2rem;
  position: absolute;
  top: 2rem;
  width: 1.7rem;
  z-index: 6;
}

.nav-toggle:hover { opacity: 0.8; }

.nav-toggle .nav-toggle-bar,  .nav-toggle .nav-toggle-bar::after,  .nav-toggle .nav-toggle-bar::before {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  background: #67655f;
  content: '';
  height: 3px;
  width: 100%;
}

.nav-toggle .nav-toggle-bar {
	margin-top: 0;
	width: 100%;
  height: 3px;
  border-radius: 4px;
	-webkit-border-radius: 4px;
  -ms-border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
}

.nav-toggle .nav-toggle-bar::after {
	margin-top: 0.6rem;
	height: 3px;
  border-radius: 4px;
	-webkit-border-radius: 4px;
  -ms-border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
}

.nav-toggle .nav-toggle-bar::before {
	margin-top: -0.6rem;
	height: 3px;
  border-radius: 4px;
	-webkit-border-radius: 4px;
  -ms-border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
}

.nav-toggle.expanded .nav-toggle-bar { background: transparent;  }

.nav-toggle.expanded .nav-toggle-bar::after, .nav-toggle.expanded .nav-toggle-bar::before {
  background: white;
  margin-top: 0;
}

.nav-toggle.expanded .nav-toggle-bar::after {
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.nav-toggle.expanded .nav-toggle-bar::before {
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* hamburger menu END */

/* fonts */

h1, h2, h3, h4, h5, h6 {
	font-family: gala, sans-serif;
	padding: 1rem 0;
	text-transform: uppercase;
	letter-spacing: .05rem;
	font-weight: 300;
	color: #EE1D49;
	z-index: 1;
}

h2 {
	border-bottom: 2px solid #EE1D49;
	font-weight: 400;
	font-size: 2rem;
	z-index: 1;
}

h3 {
	font-size: 1.2rem;
}

h4 {
	font-size: 1.5rem;
	padding: 0;
}

a {
	color: #EE1D49;
	text-decoration: none;
	z-index: 1;
}

p {
	padding: 15px 0;
	color: #67665F;
	line-height: 1.5rem;
	z-index: 1;
}

li {
	padding: 10px 0;
	color: #67665F;
}

figcaption {
	color: #67665F;
	padding-top: 13px;
}

/* section styles  */
#ocean-facts, #global-facts {
	min-height: 300px;
	display: flex;
	flex-direction: column;
}

#ocean-facts {
	background: url("images/bg-images/water.png") no-repeat bottom center;
	background-size: 100%;
	min-height: 750px;
}

#ocean-facts img {
	width: 100%;
	height: 100%;
}

#global-facts {
	background: url("images/bg-images/land.png") no-repeat bottom center;
	background-size: 100%;
	min-height: 620px;
}

.right-container {
	padding: 5% 10%;
}

.left-container {
	padding: 5% 10%;
}

#about {
	padding: 30px 10% 0;
}

#changes, #mdifference, #news, #contact, #campaigns {
	padding: 30px 10%;
}

#changes li {
	list-style: circle;
	margin-left: 40px;
}

.social-container, .news-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	padding-top:30px;
}

.social-container figure {
	width: 100%;
	padding-bottom: 30px;
	text-align: center;
}

.news-container figure {
	width: 100%;
	padding: 0 3% 30px;
}

.social1 img {
	max-width: 80%;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.social2 img {
	max-width: 90%;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.social3 img {
	max-width: 90%;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.news-container img {
	width: 100%;
}

/* individual styles */

.arrow {
	border: 4px solid #EE1D49;
	border-radius: 40px;
	padding:18px;
	color: #EE1D49;
	font-size: 2rem;
}

.arrow:hover {
	background-color: #EE1D49;
	color: #fffef8;
}

.button {
	font-family: gala, sans-serif;
	text-transform: uppercase;
	padding: 8px 25px;
	background-color: #EE1D49;
	border: 2px solid #EE1D49;
	border-radius: 20px;
	color: #ffffff;
	margin: 20px 0;
	font-size: 1rem;
	z-index: 1;
}

.button:hover {
	background: none;
	border: 2px solid #EE1D49;
	color: #EE1D49;
}

#ocean-facts .button, #global-facts .button{
	display: inline-block;
}

#campaigns h2 {
	margin-bottom:20px;
}

ul {
	list-style: none;
}

.cloud1 {
	position: absolute;
	width: 100px;
  top: 40px;
  animation: cloud 60s linear infinite;
}

.cloud2 {
	position: absolute;
	width: 120px;
  top: 80px;
  animation: cloud 40s linear infinite;
}

.cloud3 {
	position: absolute;
	width: 100px;
  top: 60px;
  animation: cloud-delay 80s linear infinite;
}

.cloud4 {
	position: absolute;
	width: 200px;
  top: 10%;
  animation: cloud 60s linear infinite;
}

.cloud5 {
	position: absolute;
	width: 220px;
  top: 35%;
  animation: cloud 40s linear infinite;
}

.cloud6 {
	position: absolute;
	width: 200px;
  top: 50%;
  animation: cloud-delay 80s linear infinite;
}

/* hr {
	display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
} */

/* form styles */

.contact-form {
  color: #EE1D49;
}

.label_input_wrap {
  display: block;
	padding-bottom: 5px;
}

.submit input{
	font-family: gala, sans-serif;
	text-transform: uppercase;
	padding: 8px 25px;
	background-color: #EE1D49;
	border: 2px solid #EE1D49;
	border-radius: 20px;
	color: #ffffff;
	margin: 20px 0;
	font-size: 1rem;
}

.submit input:hover{
	background: none;
	border: 2px solid #EE1D49;
	color: #EE1D49;
}

input,
textarea {
  padding: 8px 10px;
  border: 2px solid #EE1D49;
	background-color: #fffef8;
}

.form-field {
	width: 100%;
}

.input-section {
  padding:10px;
}


/* footer styles */
footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	min-height: 100px;
	color: #67665F;
	padding: 20px 0;
	background-color: #46ad54;
}

footer h3{
	color: #ffffff;
	border-bottom: 1px solid #ffffff;
	padding: .8rem 0;
	margin-bottom: 15px;
}

footer a {
	color: #ffffff;
}

footer p {
	color: #ffffff;
}

footer i {
	padding: 0 20px 0 0;
	font-size: 1.4rem;
}

@keyframes cloud {
  from {
    left: -200px;
  }
  to {
    left:500px;
  }
}

@keyframes cloud-delay {
  from {
    left: -600px;
  }
  to {
    left:500px;
  }
}

@media (min-width:400px) {
	#ocean-facts {
		min-height: 800px;
	}
}

@media (min-width:470px) {
	footer {
		flex-direction: row;
		justify-content: space-around;
		align-items: flex-start;
	}

}

@media (min-width:600px) {

	#ocean-facts {
		display: flex;
		align-items: flex-end;
	}
	.right-container, .left-container {
		max-width: 60%;
		padding: 20px 0;
	}

	.right-container ul {
		padding-right: 10%;
	}

	.left-container h2, .left-container ul {
		padding-left:10%;
	}

	.left-container .button {
		margin-left:10%;
	}

	#ocean-facts .button, #global-facts .button, {
		margin-top:3%;
	}

	.news-container {
		justify-content: flex-start;
	}

	.news-container figure {
		width: 44%;
	}

	@keyframes cloud {
	  from {
	    left: -200px;
	  }
	  to {
	    left:700px;
	  }
	}

	@keyframes cloud-delay {
	  from {
	    left: -600px;
	  }
	  to {
	    left:700px;
	  }
	}

}

@media (min-width:800px) {

	.nav-toggle {
		display: none;
	}

	.nav {
		display: none;
	}

	.header-container {
		display: flex;
		justify-content: space-between;
		width: 100%;
	}

	.header-container ul {
		min-width: 500px;
	}

	.header-container .logo {
		width: 250px;
		height: 100%;
		padding: 20px 5%;
		align-items: flex-end;
	}

	#header-int {
		justify-content: space-between;
	}

	.desktop-menu {
		display: block;
		font-family: gala, sans-serif;
		text-transform: uppercase;
	}

	.desktop-menu ul{
		margin-left: 10%;
	}

	.desktop-menu ul li {
		display: inline-block;
		padding: 4% 20px;
	}

	.desktop-menu a {
		color: #67665F;
		font-size: 1.1rem;
	}

	.desktop-menu a:hover {
		color: #EE1D49;
	}

	.header-content {
		padding-top: 3vh;
	}

	#ocean-facts {
		min-height: 600px;
	}

	.right-container {
		max-width: 65%;
	}

	.left-container {
		max-width: 75%;
	}

	.right-container ul, .left-container ul {
		columns: 2;
	}

	#global-facts {
		min-height: 570px;
	}

	#changes ul {
		columns: 2;
	}

	.social-container figure {
		width: 50%;
	}

	.form-field {
		width: 50%;
	}

	@keyframes cloud {
	  from {
	    left: -200px;
	  }
	  to {
	    left:1200px;
	  }
	}

	@keyframes cloud-delay {
	  from {
	    left: -600px;
	  }
	  to {
	    left:1200px;
	  }
	}

}

@media (min-width:1200px) {
	.social-container figure {
		width: 33.3333333%;
	}

	@keyframes cloud {
	  from {
	    left: -200px;
	  }
	  to {
	    left:1500px;
	  }
	}

	@keyframes cloud-delay {
	  from {
	    left: -600px;
	  }
	  to {
	    left:1500px;
	  }
	}

}