:root{
  --white-color: #ffffff;
	--snow-color: #F3F3F3;
	--smoke-color: #8E8F8E;
	--slate-color: #747474;
	--black-color: #232323;
  --primary-color: #4EE700;
}

@font-face {
  font-family: 'GT America Light';
  src: url("./fonts/america-light/GT-America-Standard-Light.otf");
  src: url("./fonts/america-light/GT-America-Standard-Light.eot?#iefix") format("embedded-opentype"), url("./fonts/america-light/GT-America-Standard-Light.woff") format("woff"), url("/fonts/america-light/GT-America-Standard-Light.woff2") format("woff2"), url("./fonts/america-light/GT-America-Standard-Light.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'GT America Regular';
  src: url("./fonts/america-regular/GT-America-Standard-Regular.otf");
  src: url("./fonts/america-regular/GT-America-Standard-Regular.eot?#iefix") format("embedded-opentype"), url("./fonts/america-regular/GT-America-Standard-Regular.woff") format("woff"), url("/fonts/america-regular/GT-America-Standard-Regular.woff2") format("woff2"), url("./fonts/america-regular/GT-America-Standard-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'GT America Medium';
  src: url("./fonts/america-medium/GT-America-Standard-Medium.otf");
  src: url("./fonts/america-medium/GT-America-Standard-Medium.eot?#iefix") format("embedded-opentype"), url("./fonts/america-medium/GT-America-Standard-Medium.woff") format("woff"), url("/fonts/america-medium/GT-America-Standard-Medium.woff2") format("woff2"), url("./fonts/america-regular/GT-America-Standard-Medium.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'GT America Bold';
  src: url("./fonts/america-bold/GT-America-Standard-Bold.otf");
  src: url("./fonts/america-bold/GT-America-Standard-Bold.eot?#iefix") format("embedded-opentype"), url("./fonts/america-bold/GT-America-Standard-Bold.woff") format("woff"), url("./fonts/america-bold/GT-America-Standard-Bold.woff2") format("woff2"), url("./fonts/america-bold/GT-America-Standard-Bold.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

html{
	-webkit-font-smoothing:subpixel-antialiased;
  -webkit-text-size-adjust: 100%;
  font-synthesis: antialiased;
  text-size-adjust: 100%;
}
body{
	display: block;
	font-family: "GT America Light", sans-serif;
	-moz-osx-font-smoothing: grayscale;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
	margin:0;
	padding: 0;
	text-align: center;
	transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	background: var(--black-color);
	color: var(--slate-color);
}
img{
	width: 100%;
	border: none;
	display: block;
  height: auto;
}
video{
	width: 100%;
	/* max-width: 367px; */
	/* transition: all .5s ease-in-out,-webkit-transform .5s ease-in-out; */
	transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}
h1{
	font-family: "GT America Medium", sans-serif;
	letter-spacing: -6.2px;
	font-size: 120px;
	margin: 0;
	line-height: 94px;
}
p{
	font-family: "GT America Light", sans-serif;
	font-size: 17px;
	letter-spacing: 0.2px;
	line-height: 23px;
}
a{
	text-decoration: none;
	color: var(--primary-color);
	transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	font-family: "GT America Medium", sans-serif;
}

.container{
	width: 82%;
	max-width: 1120px;
	margin: 0 auto;
	text-align: left;
}

.link{
	/* padding: 3px;*/
	border-radius: 3px;
	font-family: "GT America Medium", sans-serif;
	font-size: 17px;
	line-height: 23px;
	margin: 0;
	display: inline-block;
	transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.link_underline{
	border-bottom: solid 1px var(--slate-color);
	color: var(--slate-color);
	font-weight: normal;
	font-family: "GT America Light", sans-serif;
}

.link_underline_footer{
	border-bottom: solid 1px rgba(0,0,0,0);
	color: var(--slate-color);
	font-weight: normal;
	font-family: "GT America Light", sans-serif;
}

.link_underline_footer:hover{
	border-bottom: solid 1px var(--slate-color);
}

.hero{
	display: table;
	/* transition: all .5s ease-in-out,-webkit-transform .5s ease-in-out;
	transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1); */
	background-color: var(--black-color);
	width: 100%;
	height: 100vh;
	position: fixed;
	z-index: 0;
	top: 0;
	left: 0;
}
.hero video{
	width: 100%;
	/* max-width: 367px;	 */
}
.hero .hero-video{
	display: table-cell;
	vertical-align: middle;
}
.neon23{
	opacity: 0;
	transition: all .8s cubic-bezier(0.19, 1, 0.22, 1);
}
.neon23.is-on{
	opacity: 1;
}

.letter{
	display: table;
}

.letter-title{
	color: var(--black-color);
	margin-bottom: 100px;
}

.letter-sidebar{
	display: table-cell;
	text-align: right;
	width: 460px;
	padding-right: 30px;
	color: var(--smoke-color);
}
.letter-sidebar p{
	opacity: .5;
}

.letter-content{
	margin-bottom: 100px;
	max-width: 516px;
	color: var(--slate-color);
}
.letter-icons{
	height: 50px;
	z-index: 10;
}
.letter-icons img{
	width: 100%;
	display: block;
}
.letter-icons-link{
	width: 50px;
	display: block;
	float: left;
	transition: all .2s ease-in-out;
}
.letter-icons-link.frog{
	background-color: var(--primary-color);
}
.letter-icons-link.twenty-three{
	background-color: var(--black-color);
}
.letter-icons-link:hover{
	opacity: .9;
}
.frog{
	color: var(--primary-color);
}

.footer{
	background-color: var(--snow-color);
	width: 100%;
	color: var(--slate-color);
	display: table;
	padding: 60px 0;
	position: relative;
	z-index: 2;
}
.footer p{
	font-family: "GT America Medium", sans-serif;
	font-size: 14px;
	letter-spacing: -0.26px;
	line-height: 27px;
}
.footer p span{
	font-family: "GT America Light", sans-serif;
}
.footer-copy{
	display: table-cell;
	width: 490px;
}
.footer-contact{
	display: table-cell;
	vertical-align: top;
}
.footer-contact p{
	display: inline-block;
	margin-right: 60px;
}

.content{
	padding-top: 170px;
	background-color: var(--white-color);
	margin-top: 100vh;
	position: relative;
	z-index: 1;
}

.content.is-on{
	margin-top: 100vh;
}

@media only screen and (max-width:1025px){
	.hero{
		display: inline-block;
	}
	.hero .hero-video{
		display: inline-block;
	}
	
	.hero video{
		height: 100%;
	}

	h1{
		letter-spacing: -3.2px;
		font-size: 65px;
		margin: 0;
		line-height: 60px;
	}

	.letter-sidebar{
		display: block;
		width: 100%;
		padding: 0;
		text-align: left;
	}
	
	.letter-content{
		width: 100%;
	}
	.footer-contact{
		display: inline-block;
		
	}
	.footer-contact p{
		max-width: 100%;
		margin-right: 20px;
	}

	.footer p{
		font-size: 15px;
		vertical-align: top;
	}

	.content{
        padding-top: 90px;
    }
    
    h1 span{
        display: block;
    }

    .letter-title{
        margin-bottom: 60px;
    }

}