html,body {
  width: 100%;
  height: 100%;
}

label,
input,
button,
.field {
	font-family: 'Helvetica',Arial,sans-serif;
}

.wrapper {
  background: url(img/bg.jpg);
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  position: relative;
}

.may-2019 .wrapper {
	background-image: url(img/nuh-hefna-background.jpg);
	background-repeat: no-repeat;
}

header {
	padding-top: 50px;
	padding-bottom: 50px;

}

.logo {
	width: 200px;
	margin: 0 auto;

}

.logo a,
.logo img {
	display: block;
	width: 100%;
}

.content {
	height: calc(100vh - 518px);
	position: relative;
}

.youtube-embed {
	position: absolute;
	max-width: calc((100vh - 518px) / 0.416732);
	width: calc(100% - 80px);
	padding: 0 40px;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	/*
	-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	-moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	-ms-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	*/
}

.youtube-embed .inner {
	display: block;
	width: 100%;
	padding-bottom: 41.6732%; /* 56.25 */
	position: relative;
}

.youtube-embed iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	display: block;
}

.icon-wrapper {
  position: absolute;
  bottom: 6%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
}

.may-2019 .icon-wrapper {
	bottom: 50px;
}

.icon-wrapper a {
  display: inline-block;
  margin: 0 15px;
  width: 35px;
}

.icon-wrapper a img {
  width: 100%;
  vertical-align: middle
}

label {
	color: #FFF;
	display: block;
	text-transform: uppercase;
	font-weight: bold;
	text-shadow: 0 0 5px rgba(220,186,27,.8);
	letter-spacing: 0.03em;
	margin-bottom: 5px;
}

fieldset {
	border: 0 none;
}

.field {
	position: relative;
	display: inline-block;
	color: #FFF;
	font-weight: bold;
	text-transform: uppercase;
	text-shadow: 0 0 5px rgba(220,186,27,.8);
}

.field.error {
	color: #fdc92e;
	display: block;
	text-shadow: 0 0 5px rgba(220,186,27,.8);
	padding-top: 5px;
}

input[type="text"] {
	color: #FFF;
	border: 2px solid #fdc92e;
	padding: 5px 10px 5px 10px;
	text-transform: uppercase;
	text-align: center;
	width: 300px;
	background-color: #83333e;
	text-shadow: 0 0 5px rgba(220,186,27,.8);
	font-weight: bold;
	line-height: 28px;
	height: 28px;
	text-indent: -42px;
}

button {
	padding: 0;
	position: absolute;
	display: block;
	width: 42px;
	height: 42px;
	line-height: 28px;
	border: 0 none;
	background-color: #fdc92e;
	color: #83333e;
	font-size: 35px;
	bottom: 0;
	right: 0;
}

button:hover {
	animation: buttonAnimation 1s infinite;
	cursor: pointer;
}

.newsletter {
	margin-bottom: 10px;
}

input.is-valid[type="text"] {
	position: absolute;
	opacity: 0;
	z-index: 0;
	height: 0;
	width: 0;
	padding: 0;
	border: 0;
}

.youtube-link {
	margin-bottom: 10px;
}

@keyframes buttonAnimation {
	0% {
		text-indent: -5px;
	}
	
	80% {
		text-indent: 5px;
	}
	
	100% {
		text-indent: -5px;
	}
}

@media (max-width: 1024px) {
	header {
		padding: 30px 0;
	}
	.may-2019 .icon-wrapper {
		bottom: 30px;
	}
	.content {
		height: calc(100vh - 438px);
	}
	.youtube-embed {
		max-width: calc((100vh - 438px) / 0.416732);
	}
	.may-2019 .newsletter {
		margin-bottom: 15px;
	}
}

@media (max-width: 1024px) and (orientation: portrait) {
	header {
		padding: 50px 0;
	}
	.logo {
		width: 400px;
	}
	.content {
		height: calc(100vh - 676px);
	}
}

@media (max-width: 736px), (max-height: 736px) {
	header {
		padding: 20px 0 15px 0;
	}
	.logo {
		width: 80px; 
	}
	.content {
		height: calc(100vh - 181px);
	}
	.youtube-embed {
		max-width: calc((100vh - 181px) / 0.416732);
	}
	.may-2019 .icon-wrapper {
		bottom: 20px;
	}
	.may-2019 .newsletter {
		margin-bottom: 0;
		position: absolute;
		left: 15px;
		bottom: 0;
	}
	.may-2019 fieldset {
		padding: 0;
	}
	.social-media {
		position: absolute;
		right: 0;
		bottom: 0;
	}
	.may-2019 label {
		display: none;
	}
	.may-2019 input[type="text"] {
		height: 15px;
		width: 255px;
		padding-left: 0;
		padding-right: 0;
		text-indent: -40px;
		font-size: 13px;
	}
	.may-2019 button {
		height: 29px;
		line-height: 15px;
		font-size: 28px;
	}
}

@media (max-width: 736px) and (orientation: portrait) {
	.may-2019 .newsletter {
		position: relative;
		left: auto;
		bottom: auto;
		margin-bottom: 15px;
	}
	.social-media {
		position: static;
		right: auto;
		bottom: auto;
	}
	.youtube-embed {
		width: calc(100% - 30px);
		padding: 0 15px;
		top: 35%;
	}
	.logo {
		width: 200px;
	}
	.content {
		height: calc(100vh - 325px);
	}
}

@media (max-height: 767px) {

	.icon-wrapper {
		bottom: 15px;
	}

	.icon-wrapper a {
		width: 28px;
	}

	.newsletter {
		margin-bottom: 10px;
	}

	input[type="text"] {
		height: 22px;
		width: 268px;
	}

	button {
		height: 36px;
	}

}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #FFF;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #FFF;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #FFF;
}
:-moz-placeholder { /* Firefox 18- */
  color: #FFF;
}