/* ----------------------------------------------- */
/* FONTS */
/* ----------------------------------------------- */

@font-face {
	font-display: swap;
	font-family: 'Roboto-Regular';
	src:
		url('fnt/Roboto-Regular.woff2') format('woff2'),
		url('fnt/Roboto-Regular.woff') format('woff'),
		url('fnt/Roboto-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal; }
@font-face {
	font-display: swap;
	font-family: 'TFArrow';
	src:
		url('fnt/TFArrow-Medium.woff2') format('woff2'),
		url('fnt/TFArrow-Medium.woff') format('woff'),
		url('fnt/TFArrow-Medium.ttf') format('truetype');
	font-weight: normal;
	font-style: normal; }

/* ----------------------------------------------- */
/* BASIC SETUP */
/* ----------------------------------------------- */

html, body {
	background-color: #ffffff;
	color: #444444;
	font-family: 'Roboto-Regular', sans-serif;
	font-weight: 400;
	font-size: 1.14rem;
	height: 100%;
	text-rendering: optimizeLegibility;
	scroll-behavior: smooth; }
p { line-height: 1.6; margin: 20px 0px; }
h1, h2 {
	font-family: 'TFArrow', serif;
	font-weight: 300; }
.spaced { padding-top: 3%; }

/* ----------------------------------------------- */
/* BUTTONS */
/* ----------------------------------------------- */

.btn:link, .btn:visited {
	width: 320px;
	text-align: center;
	border: 1px solid #ffffff;
	border-radius: 10px;
	display: inline-block;
	text-decoration: none;
	padding: 10px;
	transition: background-color 0.5s; }
.btnfb:link, .btnfb:visited {
    color: #ffffff; background-color: #3b5998; }
.btnaz:link, .btnaz:visited {
    color: #ffffff; background-color: #e47911; }
.btnig:link, .btnig:visited {
    color: #feda75; background-color: #d62976; }
.btntw:link, .btntw:visited {
    color: #ffffff; background-color: #1da1f2; }
.btnpn:link, .btnpn:visited {
    color: #ffffff; background-color: #df0022; }
.btntk:link, .btntk:visited {
    color: #dddddd; background-color: #000000; }
.btnfp:link, .btnfp:visited {
    color: #ffffff; background-color: #ffaaaa; }
.btngdr:link, .btngdr:visited {
    color: #75420e; background-color: #e9e5cd; }
.btnbub:link, .btnbub:visited {
    color: #ffffff; background-color: #df0000; }
.btnall:link, .btnall:visited {
    color: #ffffff; background-color: #ff0060; }
.btncrv:link, .btncrv:visited {
    color: #ffffff; background-color: #4155a6; }
.btnbcv:link, .btnbcv:visited {
    color: #ffffff; background-color: #1cbac8; }
.btn:hover, .btn:active {
    color: #000000;
    background-color: #ffffff;
    border: 1px solid #000000; }

/* ----------------------------------------------- */
/* SECTION: FOLD */
/* ----------------------------------------------- */

.bckvid { display: none; }
.vidimg { width: 100%; }
.content {
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 20px;
  text-align: center;
	margin-top: -75px; }
.content p { padding-top: 3%; }

/* ----------------------------------------------- */
/* SECTION: PORTFOLIO */
/* ----------------------------------------------- */

.section-pfolio {
	max-width: 1200px;
	margin: 0px auto;
	padding-top: 50px;
	text-align: center; }
.pfolio-lnks { margin: 0px 20px; }

/* ----------------------------------------------- */
/* SECTION: PROMO */
/* ----------------------------------------------- */

.section-promo {
	max-width: 1200px;
	margin: 0px auto;
	padding: 50px 10px 40px 10px;
	text-align: center; }
.vidf { 
    max-width: 560px;
    margin: 30px auto 50px auto; }
.vid {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; }
.vid iframe {
    position:absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    border-radius: 10px; }

/* ----------------------------------------------- */
/* MEDIA QUERIES */
/* ----------------------------------------------- */

@media only screen and (min-width: 801px) {
	.wrapper { position: relative;
  height: 100vh; width: 100%;
	overflow: hidden; }
	.bckvid { display: block;
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover; }
	.vidimg { display: none; }
	.content { position: absolute; bottom: 0; }
	.content p { padding-top: 0px; }
	.pfolio-area { display: flex; }
	.pfolio-lnks { flex: 1; }
}