@charset "utf-8";
/* CSS Document */

*{margin:0; padding:0; letter-spacing:.5px;}
.mobile-hide{display:inherit;}
.getty a, .getty a:link{display:none !important;}
.youtube {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.responsive {
  width: 100%; /* or max-width: 100%; */
  height: auto;
  vertical-align: bottom; /* gets rid of line-height whitespace at the bottom */
  
}


body{background-color:#F6F6F6;}

/* NAVIGATION  */


.screenreader-text {
  position: absolute;
  left: -999px;
  width: 1px;
  height: 1px;
  top: auto;
}
.screenreader-text:focus {
  color: black;
  display: inline-block;
  height: auto;
  width: auto;
  position: static;
  margin: auto;
}

header{background-color:black;}

#social{display:block; position:absolute; top:15px; right:35px; z-index:100;}
#social img{width:100%; border:none;}
#social img:hover{opacity:.5;}
#social ul li{display:inline-block; list-style:none; width:20px; padding-right:10px;} 

#social svg{color:white;}
footer svg{color:#333; padding:15px 8px;}

#logo{width:100%; max-width:260px; position:absolute; top:5px; left:25px; vertical-align:middle;}

nav{}
/* SOLID BLACK ON SCROLL  */
.nav {background-color:rgba(0, 0, 0, .5); margin-top:30px; position:fixed; width:100%; left:0; top:25px; color:white; z-index:200;
}
.nav--alt {top:0px; margin-top:0; background-color:black;}

nav a, nav a:link, nav a:active, nav a:visited{ padding:25px 12px 25px 12px; display:block; font-family: 'Poppins', sans-serif; color:white; text-decoration:none;}
nav a:hover{text-decoration:underline; backgound-color:black;}


#mainnav {width:98%; text-align:right;}
#mainnav li{display:inline-block;list-style:none; position:relative;}
.subnav{display:none; background-color:rgba(0, 0, 0, .5); position:absolute; top:75px; left:0; text-align:left; 
   	border-left: 10px solid;
  	border-image-slice: 1;
  	border-width: 5px; 
   	border-image-source: linear-gradient(to bottom, #FE503A, #FA21E9, #9C12DE, #3399FF, #49FD35);
}
 
.subnav li{display:block; list-style:none; width:225px; height:35px; vertical-align:middle; padding-left:15px; padding-top:10px;}
.subnav a, .subnav a:link, .subnav a:active, .subnav a:visited {display:block; text-decoration:none; padding:0 !important;}
nav li:hover > .subnav{display:block;}
nav li:hover {background-color:black;}
.subnav li:hover{background-color:black;}


.quotebox{display:block; outline: 1px solid white;
outline-offset: -10px;
padding-right: 25px;
padding-left: 24px;}
.quotebox a{padding: 25px 15px;}
.quotebox a:hover{color:black !important;}
.quotebox:hover {background:white; color:black !important;}

#navicon{display:none;
padding:20px;
width: 80%;
max-width: 60px;
text-align: right; list-style:none;}
#navmobile{display:none; width:90%; position:absolute; z-index:100; background-color:rgba(0, 0, 0, .8); width:100%; border-left: 10px solid; padding-top:20px;
  	border-image-slice: 1;
  	border-width: 5px; 
   	border-image-source: linear-gradient(to bottom, #FE503A, #FA21E9, #9C12DE, #3399FF, #49FD35);}
#navmobile li{list-style:none; text-align:left; padding-left:25px;}
.mobilesubnav{display:none;}
.socialnav li{display:inline-block; list-style:none; padding-left: 0 !important; padding-right:10px;}
.socialnav img{max-width:15px;}

/* HEADER TEXT  */

#headerVideo{width:100%; background-color:black; line-height:0;}
#headerVideo > video{opacity:.6;}
#headerVideo img {width:100%; background-color:black; opacity:.5;}

#headerIMG{width:100%; background-color:black;}
#headerIMG img {width:100%; background-color:black;}
#headerIMG > picture{opacity:.6;}


.divider{ width:220px; height:5px; background-image:linear-gradient(to right, #FE503A, #FA21E9, #9C12DE, #3399FF, #49FD35); margin:10px;}

strong{font-weight:500;}

h1{font-family: 'Poppins', sans-serif; font-size:55px; font-weight:500; line-height:60px; padding-bottom:20px; }
h2{font-family: 'Poppins', sans-serif; font-size:25px; font-weight:500; text-transform:uppercase; }
h3{font-family: 'Poppins', sans-serif; font-size:45px; font-weight:500; padding-bottom:20px; }
h4{font-family: 'Poppins', sans-serif; font-size:20px; font-weight:500; padding-bottom:20px; }
h5{font-family: 'Poppins', sans-serif; font-size:15px; font-weight:500; }

p{font-family: 'Poppins', sans-serif; font-size:16px; padding-bottom:15px;}

#headerText{color:white; position: absolute; margin:0 auto; text-align:center; left:0; right:0; top:50%; width: 65%; font-weight:500;}
#headerText li{display:inline-block; padding-right:25px; list-style:none; padding-top:25px;}
#headerText .divider{margin:25px auto;}

.button{ display:block; padding:15px; border:1px solid white; color:white; background-color:rgba(0,0,0,.2); font-family: 'Poppins', sans-serif; 
	font-size:18px; font-weight:500; text-transform:uppercase; width:100%; max-width:200px; letter-spacing:1.5px; text-decoration:none; text-align:center;}
.button:hover{ display:block; border:1px solid white; color:black; background-color:white;}

#headerText .button{padding: 14px;  width: 135px;}


.white{color:white;}
.black{color:black;}
.rainbow{font-size:77px; background: -webkit-linear-gradient(#FE503A, #FA21E9, #9C12DE, #3399FF, #49FD35);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;}
  
#logoBlock{display: flex;  flex-wrap: wrap;}  
#logoBlock div{flex: 1;}
#logoBlock img{width:100%;}

/* WHITE BODY SECTIONS  */

.bodyWrapper{width:100%; color:#333;}
.homeWrapper{width:80%; color:#333; margin:65px auto; max-width:1250px;}
.blogWrapper{width:80%; color:#333; margin:25px auto; max-width:750px;}
.videoWrapper{width: 100%; max-width: 1265px; margin: 0 auto;}
.homepageUL{text-align:center;}
.homepageUL li{display:inline-block; list-style:none; width:40%; vertical-align:middle; text-align:left; padding-right: 45px;}
.homepageUL img{width:100%;}
.bodyWrapperTEXT {padding-left:25px;}
.buttonDark{ display:block; padding:15px; border:1px solid #333; color:#333; background-color:transparent;font-family: 'Poppins', sans-serif; font-size:18px; 
	font-weight:500; text-transform:uppercase; width:145px; letter-spacing:1.5px; text-decoration:none; text-align:center; margin-top:25px;}
.buttonDark:hover{ display:block; padding:15px; border:1px solid white; color:white; background-color:black;}

/* CLIENT SECTIONS*/

#clientBlock{display: flex;  flex-wrap: wrap; background-color:black; margin:25px auto;}  
#clientBlock div{flex: 1; position:relative}
#clientBlock img{width:100%; }
#clientBlock a, #clientBlock a:link, #clientBlock a:active, #clientBlock a:visited {opacity:.5; font-family: 'Poppins', sans-serif; color:white; font-size:25px; text-transform:uppercase; text-decoration:none;}
#clientBlock a:hover{opacity:1;}
.clientBlockTEXT{position:absolute; bottom:25px; left:25px; opacity:1 !important;}

/* FOOTER*/
footer{background-color:white;}
.footerBorder{margin-bottom:25px; outline:1px solid #CCC; outline-offset:5; border-top:2px solid white; border-bottom:2px solid white;  width:100%; height:15px; background-image:linear-gradient(to right, #FE503A, #FA21E9, #9C12DE, #3399FF, #49FD35); }
footer h2{font-size:95%; padding-bottom:10px;}
footer p{font-size:80%; line-height:20px;}
footer ul{width:95%; margin:0 auto; text-align:center;}
footer li{display:inline-block; list-style:none; padding:0 30px; width:275px; vertical-align:top; text-align:left;}

.footerPadding{padding-top:60px;}
.footerPadding a{display:block; padding:4px 0;}
.footerSocial{max-width:20px; max-height:20px; padding:10px 5px;}
footer a, footer a:link, footer a:active, footer a:visited {color:#333; text-decoration:none; text-transform:uppercase;}
footer a:hover{text-decoration:underline;}


/* Subpage Styles*/
.welcome{text-align:center; background-image:linear-gradient(to bottom, #D2D2D2, #F6F6F6 );  padding-top: 65px;}
.welcome .divider{margin:25px auto;}
.welcome p{max-width:850px; margin:0 auto;}
.thumbnailBorder{text-align:center; padding-top: 55px;}
.thumbnailBorder h2 {font-size:20px;}
.thumbnailBorder h3 {font-size:40px;}
.thumbnailBorder p{margin:0 auto; max-width:780px; }
.videoWrapper .divider{height:3px; margin: 0 auto 25px auto;}
.thumbnailBorder .divider{height:3px; margin: 0 auto 25px auto;}
.thumbnailBorder img {width: 100%;
	position: absolute;
	left: 0;
	right: 0;
	top: -95px;
	border: 3px solid white;	}
	
.blackButton, .blackButton:link, .blackButton:active, .blackButton:visited{font-family: 'Poppins', sans-serif; color:white;
	font-size:18px; font-weight:500; text-transform:uppercase; border: 2px solid black;
background-color: black;
padding: 10px 20px;
margin: 25px auto 0 auto;
display: block;
width: 50%;}
	.blackButton:hover{background-color:transparent; color:black; text-decoration:none;}	
  
  	.inlineBorder img {width: 100%;	border: 3px solid white;	}


.imageUL {text-align:center;}
.imageHolder{position:relative; width:500px; height:450px;}
.videoHolder{position:relative; margin-top: -95px;  overflow:hidden; border:3px solid white; width:500px; height:500px; margin-bottom:30px;cursor: pointer;}
.videoHolderLarge{position:relative; overflow:hidden; border:3px solid white; max-width:1150px; width: 100%;  aspect-ratio: 5/2.8;}
.videoHolder img{position:absolute ;z-index: 100; top: 0; left: 0; border: none;}


.igHolder{position: absolute;
	top: -95px;
	width: 500px;
	height: 500px;
	overflow: hidden; border:3px solid white;}
.igHolder iframe{width: 890px !important;
position: absolute;
left: -50% !important;
right: -50%;
margin: 0 auto !important;
top: -53px;
max-width:none !important;}
.imageUL li{width: 500px; padding:40px; background-image:linear-gradient(to bottom, #E0E0E0, #F6F6F6); list-style:none; display:inline-block; margin:25px; text-align:center; vertical-align:top;
	border-left:1px solid; border-right:1px solid; border-top:1px solid;
	border-image-slice: 1;
  	border-width: 1px; 
   	border-image-source: linear-gradient(to bottom, #FFFFFF, #F6F6F6); position:relative;}
.imageUL li:after{ width: 100%;
	box-shadow: 0 475px 45px 15px rgb(246, 246, 246), 0 675px 45px 15px rgb(246, 246, 246), 0 75px 10px 5px #C3C3C3;
	position: absolute;
	top: -50px;
	content: '';
	left: 0;
	right: 0;
	z-index: -1;
	height: 650px;}
	
#thumbnailsONLY	.imageUL li:after{height: 450px;}
	
.videoUL{text-align:center; margin:40px auto;}	
.videoUL h2{padding-top:25px;}
.videoUL li{width: 90%; padding:40px; background-image:linear-gradient(to bottom, #E0E0E0, #F6F6F6); list-style:none; display:inline-block; margin:25px auto; text-align:center; vertical-align:top;
	border-left:1px solid; border-right:1px solid; border-top:1px solid;
	border-image-slice: 1;
  	border-width: 1px; 
   	border-image-source: linear-gradient(to bottom, #FFFFFF, #F6F6F6); position:relative;}
.videoUL li:after{ width: 100%;
	box-shadow: 0 475px 45px 15px rgb(246, 246, 246), 0 675px 45px 15px rgb(246, 246, 246), 0 75px 10px 5px #C3C3C3;
	position: absolute;
	top: -50px;
	content: '';
	left: 0;
	right: 0;
	z-index: -1;
	height: 650px;}

.mobilePadding{width:100%;}

.flexRibbon{
	display: flex;
	align-content: stretch;
	justify-content: center;
	width: 100%;
	margin: 45px auto 0 auto;
	flex-wrap: wrap;}  
.flexRibbon div{flex: 1 0 25%;}
.flexRibbon img{width:100%;}
.flexRibbonpadding{min-height: 30px; margin-bottom: 50px;}

 /* Project Page Styles*/
.textPadding{padding:25px 0;}	



@media only screen and (min-width:10px) and (max-width:1250px)

{
	#headerText{
position: static;
width: 95%;
text-align: center;
margin: 0 auto; padding-bottom:45px;}
#headerText li {padding-right:10px;}
	
	
}


@media only screen and (min-width:10px) and (max-width:720px)

{
.mobile-hide{display:none;}	
p{width:90%; margin:0 auto;}
.mobilePadding{width:90%; margin:20px auto 0 auto;}
h3{font-size:38px;}

	
header{background-color:black;}
#headerVideo > div{opacity:1;}
#headerVideo > img{opacity:1;}

#social{display:none;}	

.nav{margin:0; background-color:black; position:fixed; top:0;}
#logo{right:25px; max-width:250px; top:10px; left:auto;}
#mainnav{display:none;}	
#navicon{display:block; width:auto; text-align:left;}
#navicon li:hover > #navmobile{display:block;}
#navmobile li:hover > .mobilesubnav{display:block;}
#headerVideo{position:static;}
#social{display:none;}
nav a, nav a:link, nav a:active, nav a:visited, nav a:hover{padding:12px;}
.quotebox{outline:none;}

.divider{margin:10px auto;}

picture img{margin-top:85px;}
#headerVideo{margin-top:85px;}
#headerVideo > video{opacity:1;}
#headerIMG > picture{opacity:1;}
#headerIMG{margin-top:85px;}

h1, .rainbow{font-size:45px;}

.homeWrapper{width:95%;}
.blogWrapper{width:90%; max-width:none;}

.homepageUL li {width:100%; margin:0 auto; text-align:center; padding:0;}
.bodyWrapperTEXT{padding:0;}
.clientBlockTEXT{bottom:4px; font-size:15px; margin:0 auto; left:0; right:0; text-align:center;}
#clientBlock a, #clientBlock a:link, #clientBlock a:active, #clientBlock a:visited{opacity:1; font-size:15px;}
.buttonDark{margin:25px auto;}

.thumbnailBorder { padding-top:0;}
.imageUL li, .videoUL li{width:100%; padding:25px 0; border:none; margin:25px auto;}
.imageUL li:after, .videoUL li:after{display:none;}
.imageHolder{position:static; width:90%; height:100%; margin:0 auto; border:none;}
.videoHolder{position:static; width:100%; height:100%; margin:0 auto 25px auto; border:none;}
.igHolder{position: static;	width: 100%; height:auto; border:none;}
.igHolder iframe{position: static;	width: 100% !important; height:450px;}

.thumbnailBorder img{position:static;}

.videoHolder{position: static; margin: 0 auto; width: 90vw; height: 90vw; border:3px solid white;}
.videoHolder img{position:absolute; width: 90vw; height: 90vw; margin: 25px auto; top:3px;}
.videoHolder iFrame{width: 100%; height:100%; position:static !important;}
.videoHolderLarge{margin:0 auto;	width: 90vw; height: 52vw;}
	
.videoUL{margin:0;}

.thumbnailBorder h3{font-size:32px; padding-bottom:5px;}

.flexRibbon div{flex: 1 0 50%;}

.inlineBorder img{width:85%;}
.getty {height:400px !important;}

footer p {  font-size: 100%;}
footer li {width:90%; padding:0; }
.footerPadding a{display:block; padding: 8px 0;font-size: 17px;}
.footerPadding {padding-top:0;}
}


}