/* HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/  #141920  #4A412A   #4B5662    #0084ff     #323232     */
/* Base styles:opinionated defaults */
html {color:#222; font-size:1em; line-height:1.4; position:relative; background:#141920; font-family:'PT Sans', sans-serif;}
::-moz-selection {background:#b3d4fc; text-shadow:none;}
::selection {background:#b3d4fc;text-shadow:none;}

hr {display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0;}
audio, canvas, iframe, img, svg, video {vertical-align:middle;}
fieldset {border:0; margin:0; padding:0;}
textarea {resize:vertical;}

figure.quote {text-align:center;}
figure.quote blockquote{font-style:normal; font-family:"Franklin ITC",sans-serif; font-weight:bold; quotes:"\201C""\201D""\2018""\2019";}
figure.quote blockquote:before{content:open-quote;}
figure.quote blockquote:after{content:close-quote;}
figure.quote figcaption{text-align:center; font-size:18px;}

/* Browser Upgrade Prompt */
.browserupgrade {margin:0.2em 0; background:#ccc; color:#000; padding:0.2em 0;}

nav.access-links {position:absolute; left:-5000em; top:-5000em;}

/* VIOLENTBYDESIGN.com styles */
header {overflow-x:scroll; -webkit-overflow-scrolling:touch; overflow-y:hidden; white-space:nowrap; z-index:1; box-sizing:border-box; padding:0; position:relative; -ms-overflow-style: none;}
header::-webkit-scrollbar {display:none; /* hides scroll bar */}

nav.main {display:inline-block; width:100%; text-transform:capitalize; padding:0; box-sizing:border-box; font-size:0; vertical-align:middle; font-family:'Gloria Hallelujah', cursive;}
nav.main a, nav.main a:link, nav.main a:visited {color:#fff; /*#CACBCD    this is the blue #0084ff */ text-decoration:none; display:inline-block; font-size:1.3rem; height:90px; line-height:90px; vertical-align:middle; display:inline-block; padding:0 16px; opacity:.9;}

nav.main a:nth-child(1) {opacity:.95;}

nav.main a:hover {opacity:1;}
nav.main a:nth-child(1):hover {background:#27313F;}
nav.main a:nth-child(2):hover {background:#303d4f;}
nav.main a:nth-child(3):hover {background:#3a495f;}
nav.main a:nth-child(4):hover {background:#44566f;}
nav.main a:nth-child(5):hover {background:#4e627e;}
nav.main a:nth-child(6):hover {background:#576e8e;}
nav.main a:nth-child(7):hover {background:#617a9e;}

nav.main #logo {display:inline-block; vertical-align:middle; text-decoration:none;opacity:1;}
nav.main #logo img {width:auto; height:36px; vertical-align:middle; position:relative; top:-5px; }

.content {background:#DDD3CD; min-height:calc(100vh - 176px) /* subtract height footer + header + padding top & bottom of content div */; padding:16px 16px 96px; position:relative;}
.content .limiter {max-width:1024px; margin:0 auto;}

#contact {background:#241F1D; min-height:100px; height:50vh; text-align:center; position:relative;  line-height:1em; display: table; width:100%; font-family:'Gloria Hallelujah', cursive;}
#contact {
background-image:url(../images/seperator.png), url(../images/seperator2.png);
background-position: -10% top, center bottom;
background-repeat: repeat-x, repeat-x;
background-attachment: scroll,scroll;
}

.homepage #contact {background-image:url(../images/seperator_alt.png), url(../images/seperator2.png);}

#contact div {display: table-cell; vertical-align: middle;}
#contact a {color:#cacbcd; margin:5%; white-space:nowrap; font-size:1.33rem; line-height:3rem; text-decoration:none; }

footer {
background-color: #141920;
background-image:url(xxx/images/seperator2.png), url(../images/logo.png);
background-position: -10% top, center center;
background-repeat: repeat-x, no-repeat;
background-size: auto, 50%;
background-attachment: scroll,scroll;

/* background logo has an aspect ratio 477:314 */
width: 100%;
height: 100vh;
min-height: 378px;
}

footer small {display:block; position:absolute; bottom:0; left:0; right:0; text-align:center; }
footer a[href="#top"] {display:none!important;}
@media only screen and (min-width:768px) {
footer {background-size:auto, 33%;}
}
@media only screen and (min-width:1280px) {
footer a[href="#top"] {display:block!important; position:fixed; right:1%; bottom:1%; color:#fff; text-decoration:none; display:none;}
}

.banner {position:relative; height:150px; width:100%;  box-sizing:border-box; overflow:hidden;} 
.banner .chevron-down {display:none;}
.banner.vbd {background:url(/assets/images/bg_vbd_theme320x180_5.gif) no-repeat center center; background-size:cover;}
.banner.re {background:url(/assets/images/bg_video_real_estate_320.jpg) no-repeat center center; background-size:cover;} 

.ytwrap {box-sizing:border-box; z-index:1; position:relative; padding-bottom:56.25%; /* 16:9 */ height:0; overflow:hidden; top:50%; -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%);}
#player {display:none;}
.cover {position:absolute;  top:0; left:0; z-index:2; width:100%; height:100%;}
.cover .hi {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); color:#fff; font-family:'Bitter', serif; font-size:1.5em; line-height:1.2em; text-align:center; width:90%; text-shadow:0 1px 2px rgba(0,0,0,.5); text-transform:capitalize;}


@media only screen and (min-width:320px) {
.banner {height:180px;}}

@media only screen and (min-width:480px) {
.banner { height:270px;}
.cover .hi {font-size:2.2em}}

@media only screen and (min-width:640px) {
.banner { height:360px;}
.banner.vbd {background:url(/assets/images/bg_vbd_theme640x360_5.gif) no-repeat center center; background-size:cover;}}

@media only screen and (min-width:768px) {
.banner { height:432px;}
.banner.vbd {background:url(/assets/images/bg_vbd_theme768x432_5.gif) no-repeat center center; background-size:cover;} 
.banner.re {background:url(/assets/images/bg_video_real_estate_1280.jpg) no-repeat center center; background-size:cover;}
.cover .hi {font-size:3.5em;}}

@media only screen and (min-width:1024px) {
#player {display:block; box-sizing:border-box; position:absolute; top:0; left:0; bottom:0; height:100%; width:100%; border:0px none transparent;}
.banner {height:519px;}
.banner.vbd {background-image:none;}
.banner.re {background-image:none;}
.cover .hi {font-size:4em;}}

@media only screen and (min-width:1280px) {
.banner {height:600px;}}

@media only screen and (min-width:1500px) {
.banner.re {height:calc(50vh + 90px); max-height:648px;}
.banner.vbd {height:calc(100vh - 90px); max-height:1080px;} <!-- 865px -->
.banner.vbd2 {height:calc(100vh); max-height:1080px;}
.banner .chevron-down {display:inline-block; font-size: 2em; color: #fff; margin-right: auto; margin-left: auto; position: absolute; right: 1%; bottom: 1%; }
.cover .hi {font-size:4.25em;}}

.banner.vbd .cover {background-image: url(../images/logo.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 40%;
    background-attachment: scroll;}
    
.banner.vbd2 .cover {background-color: #000; 
	background-image: url(../images/bg_vbd2.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size:cover;}


/* HOME PAGE ONLY */
/*last few tumblr posts */

#tumblrwrap {padding:0 0 256px; background-color:#000;}
.tumblr {position:relative; height:225px; display:block; padding:0; box-sizing:border-box; vertical-align:middle;margin:0;}

.tumblr a, .tumblr a:link, .tumblr a:visited {color:#fff; text-decoration:none;}
.tumblr a {text-shadow:0 0 5px rgba(0,0,0,.90);}
.tumblr .inside_wrap { height: 100%; width: 100%; text-align: center; display: flex; align-items: center; justify-content: center; overflow:hidden; position: relative; }
.tumblr .inside_wrap {/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4a412a+0,000000+100 */
background: #000; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  #4a412a 0%, #000000 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover,  #4a412a 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center,  #4a412a 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4a412a', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}

.xtumblr:nth-child(3n+1) .inside_wrap {background-color:#141920;}
.xtumblr:nth-child(3n+2) .inside_wrap {background-color:#231F1D;}
.xtumblr:nth-child(3n+3) .inside_wrap {background-color:#302A1A;}
 /* #141920 #231F1D #302A1A #666429 -- #4A412A death color */

@media only screen and (min-width:320px) {}
@media only screen and (min-width:480px) {
.tumblr {float:left; width:50%; margin:0;}}

@media only screen and (min-width:768px) {
.tumblr {float:left; width: 33.33%; margin:0;}
}

@media only screen and (min-width:1024px) {
.tumblr {float:left; width: 16.66666666666667%; margin:0;}
.tumblr:hover {-webkit-filter: brightness(1.1); filter: brightness(1.1); }
}
.tumblr article {}
.tumblr time {display:none;}
.tumblr .post-content {font-size: 1.33em; padding:2%; position:relative;}
.tumblr .hasimg .post-content { font-size: 1em; position: absolute; bottom: 0; left: 0; right: 0; transform: translate(0, 0); -webkit-transform: translate(0, 0); max-width: 100%; margin:0; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; background-color: rgba(0,0,0,.75);}
.tumblr a:after { font-family:FontAwesome; position:absolute; top:5%; right:3%; text-shadow:0 0 5px rgba(0,0,0,.50); opacity:.777; border:2px solid #fff; background:#000; opacity:.5; border-radius: 50%; display: inline-block; height: 16px; width: 16px; line-height: 16px; padding:2%; vertical-align: middle;}

.tumblr.regular a:after {content:"\f036";}
.tumblr.photo a:after {content:"\f030";}
.tumblr.quote a:after {content:"\f10d";}
.tumblr.quote .normal {font-size:.8rem;}
.tumblr.quote .medium {font-size:.9rem; line-height:1;}
.tumblr.quote .large {font-size:1rem; line-height:1;}
.tumblr.quote figure {margin:1%;}
.tumblr.quote figcaption {font-size:.7rem;}

.tumblr.link a:after {content:"\f0c1";}
.tumblr.conversation {content:"\f086";} 
.tumblr.audio a:after {content:"\f025";}
.tumblr.video a:after {content:"\f03d";} /* \00a0\f173 if decide to use the tmble icon... */

#video_examples {overflow:hidden; text-align:center;}
#video_examples:after {content:""; display:table; clear:both;}

.box {float:left; position:relative; }
.box a {position:absolute; left:0; right:0; top:0; bottom:0; overflow:hidden;}
.box a img {min-width:99%; max-width:99%; height:auto;}
.box a i {opacity:.777; font-size:48px; color:#fff; position:absolute; top:50%; left:50%; margin-left:-24px;  margin-top:-24px;}
.box a:hover i {display:none;}

.box {width:100%; padding-bottom:75%; /* padding is determined by .75	 */ }
@media only screen and (min-width:320px) {.box {width:50%; padding-bottom:37.5%;}}
@media only screen and (min-width:480px) {.box {width:33.3%; padding-bottom:25.25%;}}
@media only screen and (min-width:768px) {.box {width:25%; padding-bottom:18.75%;}}
@media only screen and (min-width:1024px) {.box {width:20%; padding-bottom:15%;}}

/* Helper classes ========================================================================== */
.hidden {display:none !important;}
/* Hide only visually, but have it available for screen readers:http://snook.ca/archives/html_and_css/hiding-content-for-accessibility */
.visuallyhidden {border:0; clip:rect(0 0 0 0); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px;}
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard:https://www.drupal.org/node/897638 */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {clip:auto; height:auto; margin:0; overflow:visible; position:static; width:auto;}
/* Hide visually and from screen readers, but maintain layout */
.invisible {visibility:hidden;}

#videxamples:before, #videxamples:after,
.content:before, .content:after,
.clearfix:before, .clearfix:after {content:" "; /* 1 */ display:table; /* 2 */ } 

#videxamples:after,
.content:after,
.clearfix:after {clear:both;}

/* EXAMPLE Media Queries for Responsive Design. These examples override the primary ('mobile first') styles. Modify as content requires. =========== */
@media only screen and (min-width:35em) {/* Style adjustments for viewports that meet the condition */}
@media print,
   (-webkit-min-device-pixel-ratio:1.25),
   (min-resolution:1.25dppx),
   (min-resolution:120dpi) {/* Style adjustments for high resolution devices */}

@-webkit-keyframes cf4FadeInOut {
0% {opacity:0;}
20% {opacity:1;}
33% {opacity:1;}
53% {opacity:0;}
100% {opacity:0;}
}

@-moz-keyframes cf4FadeInOut {
0% {opacity:0;}
20% {opacity:1;}
33% {opacity:1;}
53% {opacity:0;}
100% {opacity:0;}}
}

@-o-keyframes cf4FadeInOut {
0% {opacity:0;}
20% {opacity:1;}
33% {opacity:1;}
53% {opacity:0;}
100% {opacity:0;}
}

@keyframes cf4FadeInOut {
0% {opacity:0;}
20% {opacity:1;}
33% {opacity:1;}
53% {opacity:0;}
100% {opacity:0;}
}

.fadein img {position:absolute; left:0;}

.fadein:hover img {
-webkit-animation-name:fade;
-webkit-animation-iteration-count:infinite;
-webkit-animation-duration:2s;
animation-name:fade;
animation-iteration-count:infinite;
animation-duration:2s;
}

@-webkit-keyframes fade {
0% {opacity:0;}
20% {opacity:1;}
33% {opacity:1;}
53% {opacity:0;}
100% {opacity:0;}
}
@keyframes fade {
0% {opacity:0;}
20% {opacity:1;}
33% {opacity:1;}
53% {opacity:0;}
100% {opacity:0;}
}

.fadein img:nth-of-type(3) {
background-color:lightblue;
}
.fadein img:nth-of-type(2) {
-webkit-animation-delay:-1.333s;
background-color:yellow;
}
.fadein img:nth-of-type(1) {
-webkit-animation-delay:-.666s;
background-color:lightgreen;}

.fadein:hover img:nth-of-type(4) {display:none;}