@font-face {
    font-family: 'Gilroy-heavy';
    src: url('fonts/gilroy-heavy-webfont-webfont.eot');
    src: url('fonts/gilroy-heavy-webfont-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/gilroy-heavy-webfont-webfont.woff2') format('woff2'),
         url('fonts/gilroy-heavy-webfont-webfont.woff') format('woff'),
         url('fonts/gilroy-heavy-webfont-webfont.ttf') format('truetype'),
         url('fonts/gilroy-heavy-webfont-webfont.svg#gilroyheavy') format('svg');
    font-weight: normal;
    font-style: normal; 
}

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.wrapper, .container-fluid, .row, col { height: 100vh; }

.social-media { position: fixed; top: 0; left: 0; bottom: 0; width: 80px; height: 100vh; }

ul.social-icons-fixed { position: fixed; top: 50%; left: 0; padding: 0; }
ul.social-icons { list-style: none; transform: translate(0, -50%); z-index: 200; display: flex; align-content: center; flex-direction: column; width: 80px; margin: 0; text-align: center; }
ul.social-icons li a { color: #1c1a20; transition: 0.3s ease; -moz-transition: 0.3s ease; -webkit-transition: 0.3s ease; }
ul.social-icons li a:hover { color: #00ceaa; }

.wrapper { margin-left: 80px; }

#particles-js { position: absolute; top: 0; bottom: 0; right: 0; width: 100%; height: 100%; overflow: hidden; }

.logo { background: #f7f7f7; padding: 0 75px; }
.logo a { height: auto; }
.logo svg { width: 100%; height: auto; }
.content { background: #00ceaa; padding: 0 75px; }
.text-block h1 { font-size: 85px; font-family: 'Gilroy-heavy'; width: 100%; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-block p { font-size: 26px; font-family: 'Libre Baskerville', serif; font-style: italic; }
.text-block svg { position: relative; z-index: 2; }

.btn { padding: 10px 15px; font-family: 'Montserrat', sans-serif; font-weight: 500; color: #fff; font-size: 14px; z-index: 2; transition: 0.3s ease; -moz-transition: 0.3s ease; -webkit-transition: 0.3s ease; }
.btn-primary { border-radius: 50px; box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.08); background: #0dae93; border: 1px solid #08a78b; }
.btn-primary:hover, .btn-primary:active { background-color: #08a78b !important; border-color: #08a78b !important; }
.btn-primary:focus { box-shadow: none !important; }
.btn-text:hover { color: #000; }

@media screen and (max-width: 340px) { 
	
	.cta-buttons { flex-direction: column; }
	
}

@media screen and (max-width: 991px) { 
	
	.wrapper { margin-left: 50px; }
	
	.social-media, ul.social-icons { width: 50px; }	
	
	.domain { line-height: 10px; }
	.domain svg { width: 45px !important; }
	.content { padding: 25px; }	
	.logo svg { width: 120px; height: auto; }
	.text-block h1 { font-size: 35px; }
	.text-block p { font-size: 16px; }
	
}

@media screen and (min-width: 768px) { 
	
	.logo { padding: 0 50px; }
	
}

@media screen and (min-width: 992px) { 
	
	.logo { padding: 0 75px; }
	.logo a { width: 100%; }
	
}

@media screen and (min-width: 2000px) {
	
	.logo { padding: 0 125px; }

}

@media screen and (min-width: 2200px) {
	
	.logo { padding: 0 150px; }

}






/* fix iOS bug not displaying 100vh correctly */
/* ipad */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
	.fullheight {
		height: 768px;
	}
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
	.fullheight {
		height: 1024px;
	}
}
/* iphone5 */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2) {
	.fullheight {
		height: 320px;
	}
}
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2) {
	.fullheight {
		height: 568px;
	}
}
/* iPhone 4 */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
	.fullheight {
		height: 320px;
	}
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
	.fullheight {
		height: 480px;
	}
}