*{
 	margin: 0;
 	border: 0;
 	padding: 0;
 }
 html {
   font-size: 62.5%;
 }

.penllyn-logo{
	position: absolute;
	left: 5%;
	top: 5%;
	font-size: 2.4rem;
}

.video-background {
	background: #000;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -99;

}

.video-foreground,
.video-background iframe {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	margin: 0;
	padding: 0;
}

.homepage-container {
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  height:100vh;
}

.homepage-left-container {
  max-width: 50%;
}
.homepage-right-container {
  max-width: 50%;
}

button.js-modal-btn {
  background-color: #FFFFFF;
  padding: 20px 50px;
  border-radius: 40px;
}













* {
  margin:0;
  padding:0;
  font-family:"Helvetica Neue", Helvetica, Sans-serif;
  word-spacing:-2px;
}

h1 {
  font-size:40px;
  font-weight:bold;
  color:#191919;
  -webkit-font-smoothing: antialiased;
}

h2 {
  font-weight:normal;
  font-size:20px;
  color:#888;
  padding:5px 0;
}

.message {
background:#181818;
color:#FFF;
position: absolute;
bottom: -250px;
left: 0;
width: 100%;
height: 250px;
padding: 20px;
transition: bottom 300ms cubic-bezier(0.17, 0.04, 0.3, 0.94);
overflow: hidden;
box-sizing: border-box;

}

.message h1 {
  color:#FFF;
}

#toggle {

  appearance:none;
  cursor:pointer;
  left:-100%;
  bottom:-100%;
}

#toggle + label {
  position:absolute;
  cursor:pointer;
  padding:10px;
  background: #26ae90;
width: 100px;
border-radius: 3px;
padding: 8px 10px;
color: #FFF;
line-height:20px;
font-size:12px;
text-align:center;
-webkit-font-smoothing: antialiased;
cursor: pointer;
  margin:20px 50px;
  transition:all 500ms ease;
}
#toggle + label:after {
  content:"Open"
}

.container {
  padding:5em 3em;
}

#toggle:checked ~ .message {
  bottom: 0;
}

#toggle:checked ~ .container {
  margin-bottom: 250px;
}

#toggle:checked + label {
  background:#dd6149;
}

#toggle:checked + label:after {
  content:"Close"
}











@media (min-aspect-ratio: 16/9) {
  .video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
  .video-foreground { width: 300%; left: -100%; }
}
@media all and (max-width: 600px) {

}
@media all and (max-width: 480px) {
 	.content-info{
 		width: 70%;
 	}
}