html, body
{
	min-height:100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body{
	 display: flex;
	min-height: 100vh;
	flex-direction: column;
	font-family: 'Raleway', sans-serif;
	font-size:16px;
}

header{
	min-height:60px;
}
header a img{
	position:absolute;
	top:10px;
	left:10px;
}

a img{
	border:0;
}

a{
	color:#000;
}

header img{
	position:relative;
	top:10px;
	left:20px;
}

nav{
	width:100%;
}

nav ul{
	float:right;
	margin-right:10px;
	
}

nav ul li{
	display:inline;
}

nav ul li a{
	display:inline-block;
	text-decoration:none;
	padding:4px;
	margin:2px;
	font-size:small;
	border:1px solid #000;
	background-color:#fff;
	color:#000;
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
	-webkit-transition-timing-function: ease;
	transition-timing-function: ease;
	
}

nav ul li a:hover{
	background-color:#ff0000;
	color:#fff;
	font-weight:bold;
}

.current {
    background-color:#ff0000;
	color:#fff !important;
	font-weight:bold;
}

.slicknav_menu {
	display:none;
}

@media screen and (max-width: 1145px) {
	.js #menu {
		display:none;
	}
	
	.js .slicknav_menu {
		display:block;
	}
}

#parentContainer{
	position:relative;
	clear:both;
	border-top:3px solid #ff0000;
}

#videoContainer{
	background-color:none;
	border:0;
}

#placeHolder{
	height:500px;
	width:100%;
	background-color:rgba(0,0,0,0.5);
	position:absolute;
	top:0px;
	font-family:'Montserrat', sans-serif;
	font-weight:bold;
}

video{
	position:relative;
	clear:both;
	width:100%;
	height:500px;
	display:block;
	object-fit: fill;
	z-index:-2;
}

.introtext1{
	-webkit-animation: fadeinout 60s infinite forwards;
	animation:fadeinout 60s infinite forwards;
	opacity:0;
	font-family: 'Montserrat', sans-serif;
	position:absolute;
	top:200px; 
	left:40px; 
	color:#ff00c6;
	font-size:4vw;
	text-shadow: 2px 2px #000;
	z-index:20;
}

@-webkit-keyframes fadeinout{
	0% {opacity:0;}
	2%,15% {opacity:1;}
	18%, 100% {opacity:0;}
}

@keyframes fadeinout{
	0% {opacity:0;}
	2%,15% {opacity:1;}
	18%, 100% {opacity:0;}
}

.introtext2{
	-webkit-animation: fadeinout2 60s infinite forwards;
	animation:fadeinout2 60s infinite forwards;
	opacity:0;
	font-family: 'Montserrat', sans-serif;
	position:absolute;
	top:250px; 
	left:140px; 
	color:#ffea00;
	font-size:5vw;
	text-shadow: 2px 2px #000;
	animation-delay: 2s;
	z-index:20;
}

@-webkit-keyframes fadeinout2{
	0% {opacity:0;}
	7%,13% {opacity:1;}
	15%, 100% {opacity:0;}
}

@keyframes fadeinout2{
	0% {opacity:0;}
	7%,13% {opacity:1;}
	15%, 100% {opacity:0;}
}

.introtext3{
	-webkit-animation: fadeinout3 60s infinite forwards;
	animation:fadeinout3 60s infinite forwards;
	opacity:0;
	font-family: 'Montserrat', sans-serif;
	position:absolute;
	top:10px; 
	left:170px; 
	color:#48ff00;
	font-size:4vw;
	text-shadow: 2px 2px #000;
	animation-delay: 4s;
	z-index:20;
}

@-webkit-keyframes fadeinout3{
	0% {opacity:0;}
	13%,18% {opacity:1;}
	20%, 100% {opacity:0;}
}

@keyframes fadeinout3{
	0% {opacity:0;}
	13%,18% {opacity:1;}
	20%, 100% {opacity:0;}
}

.introtext4{
	-webkit-animation: fadeinout4 60s infinite forwards;
	animation:fadeinout4 60s infinite forwards;
	opacity:0;
	font-family: 'Montserrat', sans-serif;
	position:absolute;
	top:100px; 
	left:50px; 
	color:#00ffb4;
	font-size:5vw;
	text-shadow: 2px 2px #000;
	animation-delay: 6s;
	z-index:20;
}

@-webkit-keyframes fadeinout4{
	0% {opacity:0;}
	18%,23% {opacity:1;}
	25%, 100% {opacity:0;}
}

@keyframes fadeinout4{
	0% {opacity:0;}
	18%,23% {opacity:1;}
	25%, 100% {opacity:0;}
}

.introtext5{
	-webkit-animation: fadeinout5 60s infinite forwards;
	animation:fadeinout5 60s infinite forwards;
	opacity:0;
	font-family: 'Montserrat', sans-serif;
	position:absolute;
	top:300px; 
	left:70px; 
	color:#00f0ff;
	font-size:4vw;
	text-shadow: 2px 2px #000;
	animation-delay: 8s;
	z-index:20;
}

@-webkit-keyframes fadeinout5{
	0% {opacity:0;}
	23%,28% {opacity:1;}
	30%, 100% {opacity:0;}
}

@keyframes fadeinout5{
	0% {opacity:0;}
	23%,28% {opacity:1;}
	30%, 100% {opacity:0;}
}

.introtext6{
	-webkit-animation: fadeinout6 60s infinite forwards;
	animation:fadeinout6 60s infinite forwards;
	opacity:0;
	font-family: 'Montserrat', sans-serif;
	position:absolute;
	top:50px; 
	left:250px; 
	color:#0054ff;
	font-size:5vw;
	text-shadow: 2px 2px #000;
	animation-delay: 10s;
	z-index:20;
}

@-webkit-keyframes fadeinout6{
	0% {opacity:0;}
	28%,33% {opacity:1;}
	35%, 100% {opacity:0;}
}

@keyframes fadeinout6{
	0% {opacity:0;}
	28%,33% {opacity:1;}
	35%, 100% {opacity:0;}
}

.introtext7{
	-webkit-animation: fadeinout7 60s infinite forwards;
	animation:fadeinout7 60s infinite forwards;
	opacity:0;
	font-family: 'Montserrat', sans-serif;
	position:absolute;
	top:200px; 
	left:110px; 
	color:#fff;
	font-size:6vw;
	text-shadow: 2px 2px #000;
	animation-delay: 12s;
	z-index:20;
}

@-webkit-keyframes fadeinout7{
	0% {opacity:0;}
	33%,80% {opacity:1;}
	82%, 100% {opacity:0;}
}

@keyframes fadeinout7{
	0% {opacity:0;}
	33%,80% {opacity:1;}
	82%, 100% {opacity:0;}
}

#calltodaybox {
	display: flex;
	position:absolute;
	top:350px;
	right:50px;
	width:180px;
	height:120px;
	animation: colorchange 3s;
	animation-iteration-count:infinite;
	border-radius: 5px;
	background-color:#1D1F20;
}

#calltodaybox p{
	color:#fff;
	text-align:center;
	width:100%;
	font-size:x-large;
	align-items: center;
	justify-content: center;
}

#calltodaybox p a{
	color:#fff;
	text-decoration:none;
}

.gradient-border {
	--borderWidth: 5px;
	background: #1D1F20;
	position: relative;
	border-radius: var(--borderWidth);
}

.gradient-border:after {
	content: '';
	position: absolute;
	top: calc(-1 * var(--borderWidth));
	left: calc(-1 * var(--borderWidth));
	height: calc(100% + var(--borderWidth) * 2);
	width: calc(100% + var(--borderWidth) * 2);
	background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
	border-radius: calc(2 * var(--borderWidth));
	animation: animatedgradient 3s ease alternate infinite;
	background-size: 300% 300%;
	z-index:-1;
}

@keyframes animatedgradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

main{
	flex: 1;
	position:relative;
	clear:both;
	border-top:3px solid #ff0000;
	overflow: auto;
	min-height:300px;
}

main h2, main h1, .section h2{
	font-family:'Montserrat', sans-serif;
	font-weight:normal;
	font-size:120%;
}



/*  SECTIONS  */
.section {
	clear: both;
	padding: 0;
	margin:0 5px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1%;
	padding:2px;
	border-right:1px solid #c0c0c0;
}
.col:first-child { margin-left: 0; }

.col:last-child{
	border-right:0;
}

.col h2{
	white-space: nowrap;
}

.headicon{
	display: block;
	text-align:center;
	margin:0 auto;
	width:50px;
	height:50px;
}

/*
.col p{
	calc(16px + .1vw);
}

*/
/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF FOUR  */
.span_4_of_4 {
	width: 100%;
}
.span_3_of_4 {
	width: 74.6%;
}
.span_2_of_4 {
	width: 49.2%;
}
.span_1_of_4 {
	width: 23.8%;
}

/*  GO FULL WIDTH BELOW 1235 PIXELS */
@media only screen and (max-width: 1145px) {
	.col {  margin: 1% 0 1% 0%; }
	.span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; border:0; }
	.span_1_of_4::after{
		content: '';
		display: block;
		position: relative;
		top: 0;
		width: 50%;
		left: 25%;
		border-bottom: 2px solid red;
	}
	.span_1_of_4:nth-child(4)::after{
		border-bottom:0;
	}
}

/* Policies */
#legal{
	display:flex;
}
#legalNav{
	flex: 0 0 100px;
	overflow: hidden;
	margin:10px;
	border:1px solid #000;
	box-shadow: 2px 4px #888888;
}

#subMenu{
	padding:0;
	margin:0;
}

#subMenu li{
	padding:0;
	margin:0;
}

#legalContent{
	flex: 1; 

}

#legalContent h1{
	text-align:center;
}

#websitedesign, #apparel, #signwriting, #webapp, #contactus, #clientarea{
	position:relative;
	width:100%;
	min-height:300px;
	border-bottom:3px solid #ff0000;
}

#websitedesignheader{
	background-position: center;
	background-image:url('images/whitegreygradient.jpg');
	background-size: cover;
	width:100%;
	min-height:300px;
	
}

.text, #messenger {
	position: absolute;
	width: 365px;
	left: 50%;
	transform: translateX(-50%);
	height: 40px;
	top: 50%;
	margin:auto;
	background:rgba(0,0,0,0.7);
	padding-right:100px;
	padding:5px;
	color:#fff;
	
	
}

.text p {
	display: inline-block;
	vertical-align: top;
	margin: 0;
    font-size:18px;
}

.word {
	position: absolute;
	opacity: 0;
}

.letter {
	display: inline-block;
	position: relative;
	float: left;
	-webkit-transform: translateZ(25px);
        transform: translateZ(25px);
	-webkit-transform-origin: 50% 50% 25px;
        transform-origin: 50% 50% 25px;
}

.letter.out {
	-webkit-transform: rotateX(90deg);
        transform: rotateX(90deg);
	transition: -webkit-transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
	transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
	transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.letter.behind {
	-webkit-transform: rotateX(-90deg);
        transform: rotateX(-90deg);
}

.letter.in {
	-webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
	transition: -webkit-transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.red {
	color: #ff0000;
	font-weight:bold;
}

.belize {
	color: #2980b9;
	font-weight:bold;
}

.yellow {
	color: #ff0;
	font-weight:bold;	
}

.green {
	color: #16a085;
	font-weight:bold;
}

.blue {
	color: #00baff;
	font-weight:bold;
}

#pagecontent content{
	float:left;
	width:60%;
	min-width:365px;
	padding:5px;
}

#pagecontent > img{
	padding:5px;
	float:left;
	min-width:250px;
	width:40%;
}

.mainimages{
	width:95% !important;
}


#apparel{
	background-position: center;
	background-image:url('images/htvrolls.jpg');
	background-size: cover;
	width:100%;
	min-height:300px;
}


#photos {
  /* Prevent vertical gaps */
  line-height: 0;
   
  -webkit-column-count: 5;
  -webkit-column-gap:   0px;
  -moz-column-count:    5;
  -moz-column-gap:      0px;
  column-count:         5;
  column-gap:           0px;
background-color:#e0e0e0; 
clear:both;
	display:block;
	width:100%;
}

#photos img{
	padding:0;
	border:0;
	float:none;
	clear:both;
	width:100%;
}


@media (max-width: 1280px) {
  #photos {
  -moz-column-count:    5;
  -webkit-column-count: 5;
  column-count:         5;
  }
}
@media (max-width: 1000px) {
  #photos {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
}
@media (max-width: 800px) {
  #photos {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}
@media (max-width: 400px) {
  #photos {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}
#photosBottom{
	clear:both;
	display:block;
	background-color:red;
	padding:10px;
	color:white;
}

#photosBottom a{
	color:#fff;
	text-decoration:none;
}

#messenger {

  font-size: 20px;
  text-shadow: 0 2px 2px rgba(#000, 0.9);
  
}

#signwriting{
	background-position: center;
	background-image:url('images/vinylrolls.jpg');
	background-size: cover;
	width:100%;
	min-height:300px;
}

#webapp{
	background-position: center;
	background-image:url('images/webapp.jpg');
	background-size: cover;
	width:100%;
	min-height:300px;
}

#contactus{
	background-position: center;
	background-image:url('images/contactus.png');
	background-size: cover;
	width:100%;
	min-height:300px;
}

section .contactus{
	float:left;
	width:50%;
	min-width:365px;
	padding:5px;
}

#clientarea{
	background-color:#2980b9;
	width:100%;
	min-height:200px;
	display: flex;
    align-items: center;
    justify-content: center
}

#clientarea h1{
	padding:0;
	margin:0;
	color:#fff;
}

label {
    display:block;
    margin-top:20px;
    letter-spacing:2px;
}

input, textarea {
	min-width:365px;
	height:27px;
	background:#efefef;
	border:1px solid #dedede;
	padding:10px;
	margin-top:3px;
	font-size:0.9em;
	color:#3a3a3a;
	-moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}

textarea {
	height:213px;
}

input:focus, textarea:focus {
    border:1px solid #97d6eb;
}

#submit {
    width:127px;
    height:38px;
    border:none;
    margin-top:20px;
    cursor:pointer;
}

#submit:hover {
	opacity:.9;
}

/* Footer layout */

/*  SECTIONS  */
footer {
	padding:0;
	clear: both;
	margin: 0;
	background-color:#dbdbdb;
	text-align:center;
	border-top:3px solid #ff0000;
}


footer h1{
	font-size:large;
}

footer > p > a{
	padding:4px;
}
	

/* footer top */
/*  GRID OF TWO  */
.footer_2_of_2 {
	width: 100%;
}
.footer_1_of_2 {
	width: 49.2%;
}


/*  GO FULL WIDTH BELOW 1235 PIXELS */
@media only screen and (max-width: 1145px) {
	.footer_2_of_2, .footer_1_of_2 {
		width: 100%;
		border:0;
	}
}

/* footer bottom */
.more_4_of_4 {
	width: 100%;
}
.more_3_of_4 {
	width: 74.6%;
}
.more_2_of_4 {
	width: 49.2%;
}
.more_1_of_4 {
	width: 23.8%;
}

/*  GO FULL WIDTH BELOW 1235 PIXELS */
@media only screen and (max-width: 1145px) {
	.more_1_of_4, .more_2_of_4, .more_3_of_4, .more_4_of_4 { 
		width: 100%; 
		border:0; 
	}
}

footer li, footer ul{
	list-style-type:none;
	margin:0;
	padding:0;
}

footer img{
	width:100px;
}