body { padding: 0; margin: 0; font-family: 'Source Sans Pro', sans-serif; font-size: 18px; color: #000; }

p { color: #000; margin-bottom: 20px; }
h1 { color: #000; font-family: 'Questrial', sans-serif; text-transform: uppercase; font-size: 36px; margin: 0 0 15px; font-weight: normal; }
h3 { color: #fff; font-family: 'Questrial', sans-serif; font-size: 14px; margin: 0; background: #000; padding: 10px 15px; box-sizing: border-box; text-transform: uppercase; }

a { color: #d52027; text-decoration: none; }
a:hover {  }

.txt-center { text-align: center; }
.clear { clear: both; }

header { background: #000; color: #fff; font-family: 'Questrial', sans-serif; position: relative; height: 40px; }
.header-name { font-size: 18px; float: left; padding-top: 12px; margin-left: 30px;  color: #fff; }
.gd-red { color: #d52027; }

nav { padding-top: 10px; float: right; }
nav a { color: #fff; transition: .33s; font-size: 14px; padding: 12px 15px; }
nav a:hover { color: #d52027; transition: .33s; background: #fff; }

footer { background: #000; text-align: center; padding: 12px; box-sizing: border-box; font-family: 'Questrial', sans-serif; }
footer span { color: #fff; font-size: 14px; }

.logo { position: absolute; left: 50%; top: 0; transform: translateX(-50%); }

.container { margin: 0 auto; padding: 30px 50px; box-sizing: border-box; min-height: 89vh; }

.cta { background: #000; padding: 10px 20px; color: #fff; display: block; text-align: center; font-family: 'Questrial', sans-serif; font-size: 18px; }
.cta:hover { background: #d52027; }

.btn { margin: 15px 0 0; display: inline-block !important; font-size: 24px; background: #d52027; color: #fff; padding: 15px 30px; font-family: 'Questrial', sans-serif; transition: .33s; }
.btn:hover { background: #fff; color: #d52027; transition: .33s; }

.half-div { width: 46%; margin: 30px 2%; float: left; }
.half-div p { margin: 0; }
.half-div iframe { display: block; }
.full-div { width: 96%; margin: 30px 2%; }
.full-div img { display: block; }

.about-div p { margin-bottom: 20px; }

.image-shadow { box-shadow: rgba(172, 168, 164, 0.2) 0px 2px 2px, rgba(172, 168, 164, 0.2) 0px 4px 4px, rgba(172, 168, 164, 0.2) 0px 8px 8px, rgba(172, 168, 164, 0.2) 0px 16px 16px, rgba(172, 168, 164, 0.2) 0px 32px 32px; }

.port-piece { width: 25%; float: left; opacity: .5; transition: .33s; -webkit-filter: blur(0px); }
.port-piece:hover { opacity: 1; transition: .33s; -webkit-filter: blur(0px); }

.port-div { width: 25%; position: relative; float: left; overflow: hidden; }
.port-div img { width: 100%; display: block; }
.port-div img:hover { opacity: .75; }
.port-text { position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); text-align: center; display: none; pointer-events: none; width: 100%; }
.port-text h4 { font-size: 26px; font-family: 'Questrial', sans-serif; text-transform: uppercase; color:#fff; margin: 0; }
.port-text p { font-family: 'Questrial', sans-serif; font-size: 18px; color: #fff; margin: 0; }
.port-div:hover > .port-text { display: block; }
.port-hr { width: 50%; height: 1px; background: #fff; margin: 10px auto 12px; }

.trevor-hp { width: 100%; height: 96vh; position: relative; }
.banner-text { position: absolute; top: 50%; transform: translateY(-50%); left: 10%; width: 33%; }
.banner-text h1 { color: #fff; -webkit-animation: fadein 1s; }
.banner-text h1 span { color: #d52027; }
.banner-text p { opacity: 0; color: #fff; margin-bottom: 20px; -webkit-animation: fadein 1s; -webkit-animation-delay: .5s; animation-fill-mode: forwards; }
.banner-text p span { color: #d52027; }
.banner-text .btn { opacity: 0; -webkit-animation: fadein 1s; -webkit-animation-delay: 1s; animation-fill-mode: forwards; }

@keyframes fadein {
    from { opacity: 0; margin-left:-25px; margin-right: 25px; }
    to   { opacity: 1; margin-left: 0; margin-right:0; }
}

.mobile-nav { display: none; }
.mobile-banner-text { display: none; }

.blur { filter: none; transition: .33s; }
.blur:hover { filter: blur(3px); transition: .33s; }

.about-section { background: url(/images/about-section.jpg) center center; background-attachment: fixed; background-size: cover; height: 100vh; position: relative; }
.about-text { position: absolute; width: 30%; top: 50%; right: 30%; transform: translateX(-50%) translateY(-50%); }
.about-text h1 { color: #fff; }
.about-text p { color: #fff; }

.avcb-hp-hide { display: block; }

#portfolio { opacity: 0; }
.js-portfolio-animate { opacity: 1 !important; }

@keyframes pfade {
    from { opacity: 0; margin-left: 25px; margin-right: -25px; }
    to   { opacity: 1; margin-left: 0; margin-right: 0; }
}

.js-portfolio-animate #p-1 { opacity: 0; -webkit-animation: pfade 1s; animation-fill-mode: forwards; }
.js-portfolio-animate #p-2 { opacity: 0; -webkit-animation: pfade 1s; -webkit-animation-delay: .1s; animation-fill-mode: forwards; }
.js-portfolio-animate #p-3 { opacity: 0; -webkit-animation: pfade 1s; -webkit-animation-delay: .2s; animation-fill-mode: forwards; }
.js-portfolio-animate #p-4 { opacity: 0; -webkit-animation: pfade 1s; -webkit-animation-delay: .3s; animation-fill-mode: forwards; }
.js-portfolio-animate #p-5 { opacity: 0; -webkit-animation: pfade 1s; -webkit-animation-delay: .4s; animation-fill-mode: forwards; }
.js-portfolio-animate #p-6 { opacity: 0; -webkit-animation: pfade 1s; -webkit-animation-delay: .5s; animation-fill-mode: forwards; }
.js-portfolio-animate #p-7 { opacity: 0; -webkit-animation: pfade 1s; -webkit-animation-delay: .6s; animation-fill-mode: forwards; }
.js-portfolio-animate #p-8 { opacity: 0; -webkit-animation: pfade 1s; -webkit-animation-delay: .7s; animation-fill-mode: forwards; }
.js-portfolio-animate #p-9 { opacity: 0; -webkit-animation: pfade 1s; -webkit-animation-delay: .8s; animation-fill-mode: forwards; }
.js-portfolio-animate #p-10 { opacity: 0; -webkit-animation: pfade 1s; -webkit-animation-delay: .9s; animation-fill-mode: forwards; }
.js-portfolio-animate #p-11 { opacity: 0; -webkit-animation: pfade 1s; -webkit-animation-delay: 1s; animation-fill-mode: forwards; }
.js-portfolio-animate #p-12 { opacity: 0; -webkit-animation: pfade 1s; -webkit-animation-delay: 1.1s; animation-fill-mode: forwards; }
.js-portfolio-animate #p-13 { opacity: 0; -webkit-animation: pfade 1s; -webkit-animation-delay: 1.2s; animation-fill-mode: forwards; }
.js-portfolio-animate #p-14 { opacity: 0; -webkit-animation: pfade 1s; -webkit-animation-delay: 1.3s; animation-fill-mode: forwards; }
.js-portfolio-animate #p-15 { opacity: 0; -webkit-animation: pfade 1s; -webkit-animation-delay: 1.4s; animation-fill-mode: forwards; }
.js-portfolio-animate #p-16 { opacity: 0; -webkit-animation: pfade 1s; -webkit-animation-delay: 1.5s; animation-fill-mode: forwards; }


@media (max-width: 1024px) {
    .port-piece { width: 33.3%; }
    .mobile-nav { display: block; }
    #hideshowclose { position: absolute; right: 30px; top: 10px; z-index: 999; margin: 0 !important; font-size: 20px !important; }
	#hideshow { position: absolute; right: 30px; top: 10px; z-index: 999; }
	#menu { display: none; position: fixed; background: rgba(0,0,0,.9); width: 100%; height: 100%; z-index: 9999; }
	#menu a { color: #fff !important; font-size: 50px; margin: 20px 0; display: block; font-family: 'Questrial', sans-serif; }
	#menu .menu-txt { text-align: center; top: 50%; transform: translateY(-50%) translateX(-50%); position: absolute; left: 50%; width: 100%; }
	nav { display: none; }
	.banner-text { width: 29%; }
	.port-piece { opacity: 1; }
	.trevor-hp { }
	.port-div:hover > .port-text { display: none; }
	.port-div { width: 33.33%; }
	.m-hide { display: none; }
}

@media (max-width: 680px) {
	.container { padding: 10px 30px; }
	h1 { font-size: 24px; margin: 0 0 5px; }
	h3 { margin-bottom: 20px; }
    .port-piece { width: 100%; }
    .banner-text { display: none; }
    .mobile-banner-text { display: block; padding: 30px; box-sizing: border-box; }
    .mobile-banner-text h1 { color: #fff; }
	.mobile-banner-text h1 span { color: #d52027; }
	.mobile-banner-text p { color: #fff; margin-bottom: 20px; }
	.mobile-banner-text p span { color: #d52027; }
	.trevor-hp { height: 50vh; }
	.mobile-banner-text h1 { font-size: 28px; }
	.header-name { margin-left: 20px; }
	#hideshowclose { right: 20px; }
	#hideshow { right: 20px; }
	.half-div { width: 100%; float: none; margin: 10px 0; }
	.full-div { width: 100%; margin: 10px 0; }
	#menu a { font-size: 30px; }
	.port-div { width: 50%; }
}

@media (max-width: 320px) {
	.gd-red { display: none; }
}