@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700');
@import url('https://fonts.googleapis.com/css?family=Lora:400,700');
@import url('https://fonts.googleapis.com/css?family=Oswald:300,400,500,600,700');
@import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Hina+Mincho&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative&display=swap');

:root {
   --color-blue: #29abe2;
   --color-pink: #b429e2;
   --color-green: #397838;
   --color-navy: #2f98a3;
   --color-gold: #eabb3d;
   --color-navy: #0f2531;

   --font-sourcesans: 'Source Sans Pro', Helvetica, Arial, sans-serif;
   --font-oswald: 'Oswald', serif;
   --font-lora: 'Lora', serif;
   --font-shadows: 'Shadows Into Light', cursive;
   --font-hina: 'Hina Mincho', serif;
   --font-opensans: 'Open Sans', sans-serif;
   --font-raleway: 'Raleway', sans-serif;
   --font-cinzel: 'Cinzel Decorative', cursive;
}

/* General Style
---------------------------------------------*/

   form,body,html{height:100%;width:100%;}
	body{margin:0;padding:0;font: 20px/1.8em var(--font-raleway);background:white;color: #1c1c1c;font-weight: 400;}

	a {color: var(--color-gold);outline:none;transition: color 0.3s ease, background 0.3s ease;}
	a:hover {color: var(--color-gold)}
	a img{border:none;}

   h1, h2, h3, h4, h5, h6 {margin-bottom: 1em;}
	h1 {font-size: 2.429em;line-height:1.25em;}
	h2 {font-size: 1.714em;line-height:1.25em;}
	h3 {font-size: 1.429em;line-height:1.25em;}
	h4 {font-size: 1.143em;line-height:1.25em;} 
	h5 {font-size: 0.929em;line-height:1.25em;}
	p {margin:0.5em 0 1.5em;padding:0;line-height: 1.8;}
	#PageTitle, .PageTitleHeader { display:none;}

	.left{float:left;}
	.right{float:right;}
	.center{text-align:center !important;}
	.textalignright{text-align:right;}
	.textalignleft{text-align:left;}

   .padding2x {padding:0 35px;}

   .flex-row {display: flex;}

   strong {font-weight:600;}

   hr { height: 1px;line-height: 1px;margin: 4em auto;clear: both;border: none;background: var(--color-gold);color: var(--color-gold);opacity: 0.25;}
	hr.short {height: 4px;line-height: 4px;margin: 1em auto;clear: both;border: none;color: var(--color-navy);width: 100px;background: linear-gradient(90deg, var(--color-blue), var(--color-green));opacity: 1;}

	img.left{float:left;margin:0 7px 1px 0;}
	img.right{float:right;margin:0 0 7px 7px;}
	img.outline{border:4px solid #333;}
	.clearing{clear:both;height:0;margin:0;padding:0;line-height:0;margin-top:-7px;}
	.clearBoth{clear:both;}
	.clearRight{clear:right;}
	.clearleft{clear:left;}
	.invisibleButAccessible{display:none;}

	#MainBody .idbmsBreadcrumbSeparator {color:#70a533;}
	#MainBody .expand img {background-color: #70a533; max-width: inherit !important;}
	#MainBody .expand {background-color: #70a533; display:inline-block; }
	.Error,.error {width:auto!important}

	#inner-wrap img[src="/images/spacer.gif"] {display:none;}

	::selection { background: var(--color-navy); color: white; } /* Safari 3.1+, Opera 9.5+, Chrome 2+ */
	::-moz-selection { background: var(--color-navy); color: white; } /* Mozilla Firefox */

	#inner-wrap * {-webkit-box-sizing: border-box;	-moz-box-sizing: border-box;  box-sizing: border-box; -ms-box-sizing: border-box;}
	#inner-wrap img {max-width:100%; height:auto;}

   .mt-0 {margin-top:0px !important;}
   .mt-10 {margin-top:10px !important;}
   .mt-20 {margin-top:20px !important;}
   .mt-50 {margin-top:50px !important;}
   .mt-100 {margin-top:100px !important;}
   .mt-150 {margin-top:150px !important;}
   .mt-200 {margin-top:200px !important;}

   .mb-0 {margin-bottom:0px !important;}
   .mb-10 {margin-bottom:10px !important;}
   .mb-20 {margin-bottom:20px !important;}
   .mb-50 {margin-bottom:50px !important;}
   .mb-100 {margin-bottom:100px !important;}
   .mb-150 {margin-bottom:150px !important;}
   .mb-200 {margin-bottom:200px !important;}

   .pt-0 {padding-top:0px !important;}
   .pt-10 {padding-top:10px !important;}
   .pt-20 {padding-top:20px !important;}
   .pt-50 {padding-top:50px !important;}
   .pt-100 {padding-top:100px !important;}
   .pt-150 {padding-top:150px !important;}
   .pt-200 {padding-top:200px !important;}

   .pb-0 {padding-bottom:0px !important;}
   .pb-10 {padding-bottom:10px !important;}
   .pb-20 {padding-bottom:20px !important;}
   .pb-50 {padding-bottom:50px !important;}
   .pb-100 {padding-bottom:100px !important;}
   .pb-150 {padding-bottom:150px !important;}
   .pb-200 {padding-bottom:200px !important;}

   @media only screen and (max-width: 700px) {

      .mobile-mt-0 {margin-top:0px !important;}
      .mobile-mt-10 {margin-top:10px !important;}
      .mobile-mt-20 {margin-top:20px !important;}
      .mobile-mt-50 {margin-top:50px !important;}
      .mobile-mt-100 {margin-top:100px !important;}
      .mobile-mt-150 {margin-top:150px !important;}
      .mobile-mt-200 {margin-top:200px !important;}

      .mobile-mb-0 {margin-bottom:0px !important;}
      .mobile-mb-10 {margin-bottom:10px !important;}
      .mobile-mb-20 {margin-bottom:20px !important;}
      .mobile-mb-50 {margin-bottom:50px !important;}
      .mobile-mb-100 {margin-bottom:100px !important;}
      .mobile-mb-150 {margin-bottom:150px !important;}
      .mobile-mb-200 {margin-bottom:200px !important;}

      .mobile-pt-0 {padding-top:0px !important;}
      .mobile-pt-10 {padding-top:10px !important;}
      .mobile-pt-20 {padding-top:20px !important;}
      .mobile-pt-50 {padding-top:50px !important;}
      .mobile-pt-100 {padding-top:100px !important;}
      .mobile-pt-150 {padding-top:150px !important;}
      .mobile-pt-200 {padding-top:200px !important;}

      .mobile-pb-0 {padding-bottom:0px !important;}
      .mobile-pb-10 {padding-bottom:10px !important;}
      .mobile-pb-20 {padding-bottom:20px !important;}
      .mobile-pb-50 {padding-bottom:50px !important;}
      .mobile-pb-100 {padding-bottom:100px !important;}
      .mobile-pb-150 {padding-bottom:150px !important;}
      .mobile-pb-200 {padding-bottom:200px !important;}

   }

   .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
   .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

   .imgTop {background-position: top !important;}


/* HEAD ELEMENTS
---------------------------------------------*/
	.structHead {display: flex;width: 100%;position: absolute;top:0;z-index: 100;-webkit-transition: all 0.3s ease;transition: all 0.3s ease;height: 100px;padding: 20px 15px;}
   .home .structHead {background: #f8f8f8;}
   .structHead .container {padding:0;position: relative;display: flex;}

   /* .structHeadColor {height: 85px;-webkit-transition: all 0.3s;transition: all 0.3s;box-shadow: 0 15px 30px rgb(0 0 0 / 10%);} */

	.headLogo {display: flex;align-items: center;z-index: 1;-webkit-transition: all 0.3s;transition: all 0.3s;}
	.headLogo a img {width: 200px;-webkit-transition: all 0.3s;transition: all 0.3s;}
	.headLogo a img:hover {opacity:0.6;transition:all 0.3s ease;}
   .headLogo a {font-size: 24px;font-weight: 500;text-transform: uppercase;color: var(--color-navy);}
   .headLogo a span {font-weight: 300;font-size: 12px;}

/* Mobile Navigation
-----------------------------------------------*/
	.nav-toggle {font-size: 25px;color: var(--color-navy);cursor: pointer;padding: 0;z-index: 100;position: absolute;right:50px;width: 45px;-webkit-transition: all 0.3s;transition: all 0.3s;}
	.nav-toggle .fa {padding: 12px 8px 5px 8px;display: block;text-align: center;}
   .nav-toggle:hover {color:var(--color-navy);}
	.m-pikabu-sidebar .mainNav ul li a {font-family: var(--font-sourcesans);text-decoration: none;font-size: 18px;}
	#nav-close-btn {color: #FDB702;padding: 0 18px;}
	
	#nav {z-index: 100;width: 300px;right: 0;padding: 100px 30px 0;position: fixed;top: 0;height: 100vh;background: rgba(29, 29, 29, 0.96);display: none;}

	#nav {overflow-y:scroll;}
	#nav ul li ul {display:none;}
	#nav ul li.selected > ul {display:block;}

	.m-pikabu-sidebar .mainNav ul li {position:relative;}
	.m-pikabu-sidebar .mainNav ul li a {padding:12px 1em;}
	.m-pikabu-sidebar .mainNav ul li.selected a {color:white;}

	/* Mobile Accordion */
	.m-pikabu-sidebar .mainNav ul li.has-subnav .accordion-btn {color:white;}

/* MAIN TOP HORIZONTAL NAV
---------------------------------------------*/
	.desktopNav {text-align: right;z-index: 0;display: flex;align-items: center;justify-content: flex-end;}

	/* General Styles */
	.desktopNav ul {list-style-type:none;margin:0; padding:0;}
	.desktopNav ul li {/* float:left; */padding:0;}
	.desktopNav ul li a{display:block;text-decoration:none; padding:0 1em;}
		/* Flexbox styles */
		.flexbox .desktopNavInner > ul {
			display: flex; 
		}
		.flexbox .desktopNavInner > ul > li {float:none; display: inherit;
			flex-direction: column;
		}
		.flexbox .desktopNavInner > ul > li > a {display: inherit; width: 100%; line-height: 1.25em; padding: 20px 15px;  text-align: center;
			flex: 1 0 auto;
			align-items: center;
			justify-content: center;
		}
	
	/* Top Level Group */
	.desktopNav ul li {line-height:1.5em;font-weight:bold;position:relative;}
	.desktopNav ul li a:hover,
	.desktopNav ul li:hover > a {color:white;background:#333;}

	/* Second Level Groups */
	.desktopNav li ul { position: absolute; left: -999em;margin:0px; background:#333; float:none; width:15em;text-align:left; opacity:0; transition: opacity 500ms ease;}
	.desktopNav li li { width: 100%; border:none; margin: 0; padding:0;background:none;line-height:normal;text-transform:none; font-size:1em;}
	.desktopNav li li a {font-weight:normal;text-align:left;padding:0.25em 1em;border:none;}
	.desktopNav li li:hover a { background: #9e1b32; }

	/* Third Level Groups */
	.desktopNav li li ul { margin:-23px 0 0 150px; background: var(--color-navy); color:#fff; width:170px;}
	.desktopNav li li li a:hover { color: #1d1d1d;}
	.desktopNav li li li{ width: 170px;}
	.desktopNav li li li a {color:white;}

	/* The Magic */
	.desktopNav li.sfHover ul ul,
	.desktopNav li.sfHover ul ul ul { left: -999em;}

	.desktopNav li.sfHover ul,
	.desktopNav li li.sfHover ul,
	.desktopNav li li li.sfHover ul { left: auto; opacity:1;}

	/*Fix for the Sticking*/
	.desktopNav li.sfHover,
	.desktopNav li li li.sfHover,
	.desktopNav li li.sfHover { position:relative;}

	/* General Styles */
	.desktopNav ul li {display:inline-block;padding:0;}
	.desktopNav ul li a {display: inline-block;text-decoration: none;padding: 15px 20px;font-size: 16px;font-weight: 500;color: var(--color-navy);border-radius: 10px;}
	.desktopNav ul li.current a {background:#000;}
	.desktopNav ul li.hiddenHomeAnchor {display: none;}
	.desktopNav ul#nav1 > li:first-child > a {padding-left:0;}

	/* Top Level Group */
	.desktopNav ul li a:hover, .desktopNav ul li a:focus {background:var(--color-navy);color:white;}
	.desktopNav ul li a.current {background: #000;color:white;}
	
   .mainNav ul {list-style: none;padding: 0;display: flex;display: -webkit-flex;-webkit-align-items: center;align-items: center;-webkit-justify-content: center;justify-content: center;-webkit-flex-direction: column;flex-direction: column;-webkit-align-items: stretch;align-items: stretch;}
   .mainNav ul li {padding: 10px 0;border-bottom: 1px solid rgba(255, 255, 255, 0.15);}
   .mainNav ul li a {color: white;font-size: 18px;font-weight: 300;line-height: 1.5;}
	.mainNav ul li a:hover {color: var(--color-navy);}
	
	.mobileMemberTools ul.social {margin: 1.5em 0;padding:0;list-style:none;}
	.mobileMemberTools ul.social li {display: inline-block;margin: 0 15px 0 0;}
	.mobileMemberTools ul.social li a {color: var(--color-navy);;font-size: 20px;}
	.mobileMemberTools ul.social li a:hover {color: white;}

   .anchor {position: relative;top:-125px;}
   .anchorShort {position: relative;top: -50px;}

/* left COLUMN
---------------------------------------------*/
	/* Secondary Navigation - General Styles */
	.secondaryNav ul {margin:0; padding:0; list-style:none;}
	.secondaryNav ul li a {display:block; line-height:normal;}

	/* Secondary Navigation - First Level */
	.secondaryNav > ul {margin-bottom:30px;}
	.secondaryNav > ul > li > a {padding:5px;}

	/* Secondary Navigation - Second Level */
	.secondaryNav > ul > li > ul > li a {display:block; padding:5px 5px 5px 30px;}

/* BODY ELEMENTS
---------------------------------------------*/
	.structBody {padding: 0;position: relative;float: left;width: 100%;}

   .blackOverlay {position:absolute;width:100%;height:100%;top:0;left:0;background: rgba(29, 29, 29, 0.8);}
   .blackSoftOverlay {position:absolute;width:100%;height:100%;top:0;left:0;background: rgba(29, 29, 29, 0.5);}
   .blueOverlay {position:absolute;width:100%;height:100%;top:0;left:0;background: rgba(41, 171, 226, 0.65);}
   .bluePurpleOverlay {position:absolute;width:100%;height:100%;top:0;left:0;background: linear-gradient(135deg, rgb(57 120 56 / 30%), rgb(41 171 226 / 30%));}
   .blueSoftOverlay {position:absolute;width:100%;height:100%;top:0;left:0;background: linear-gradient(135deg, rgb(47 152 163 / 70%), rgb(47 152 163 / 70%));}
   .cloudOverlay {position:absolute;width:100%;height:100%;top:0;left:0;}
   .goldOverlay {position:absolute;width:100%;height:100%;top:0;left:0;background: linear-gradient(135deg, rgb(234 187 61 / 85%), rgb(234 187 61 / 85%))}
   .navyOverlay {position:absolute;width:100%;height:100%;top:0;left:0;background: linear-gradient(135deg, rgb(15 37 49 / 85%), rgb(15 37 49 / 85%))}

   .button {cursor:pointer;position:relative;display: inline-block;width: auto;background:none;color: var(--color-navy);font-size: 16px;font-weight: bold;font-family: var(--font-sourcesans);border: 0.125em solid var(--color-navy);padding: 15px 1.75em;border-radius: 3px;transition: all 0.2s ease;}
   .button:hover, .button:focus {background: var(--color-navy);color: white;border: 0.125em solid var(--color-navy);}
   .button + .button {margin: 0 0 0 40px;}

   .button-alt {cursor:pointer;position:relative;display: inline-block;width: auto;background: var(--color-navy);color: white;font-size: 16px;font-weight: bold;font-family: var(--font-sourcesans);padding: 15px 1.75em;border-radius: 3px;transition: all 0.2s ease;}
   .button-alt:hover, .button-alt:focus {background: white;color: var(--color-navy);}

   .neonPink {color: var(--color-pink);border: 0.125em solid var(--color-pink);text-shadow: 0 0 0.25em var(--color-pink);box-shadow: inset 0 0 0.5em 0 var(--color-pink), 0 0 0.5em 0 var(--color-pink);}
   .neonPink::before {pointer-events: none;content: "";position:absolute;top: 120%;left: 0;width: 100%;height: 100%;background: var(--color-pink);transform: perspective(1em) rotateX(40deg) scale(1, 0.35);filter:blur(2em);opacity: 0.6;transition: opacity 0.2s ease;}
   .neonPink::after {content: "";position:absolute;top: 0;right:0;bottom:0;left: 0;background: var(--color-pink);box-shadow: 0 0 2em 0.5em var(--color-pink);opacity:0;transition: opacity 0.2s ease;z-index:-1;}
   .neonPink:hover, .neonPink:focus {background: var(--color-pink);color: white;border: 0.125em solid var(--color-pink);}
   .neonPink:hover::before, .neonPink:focus::before, .neonPink:hover::after, .neonPink:focus::after {opacity: 1;}

   .neonBlue {color: var(--color-blue);border: 0.125em solid var(--color-blue);text-shadow: 0 0 0.25em var(--color-blue);box-shadow: inset 0 0 0.5em 0 var(--color-blue), 0 0 0.5em 0 var(--color-blue);}
   .neonBlue::before {pointer-events: none;content: "";position:absolute;top: 120%;left: 0;width: 100%;height: 100%;background: var(--color-blue);transform: perspective(1em) rotateX(40deg) scale(1, 0.35);filter:blur(2em);opacity: 0.6;transition: opacity 0.2s ease;}
   .neonBlue::after {content: "";position:absolute;top: 0;right:0;bottom:0;left: 0;background: var(--color-blue);box-shadow: 0 0 2em 0.5em var(--color-blue);opacity:0;transition: opacity 0.2s ease;z-index:-1;}
   .neonBlue:hover, .neonBlue:focus {background: var(--color-blue);color: white;border: 0.125em solid var(--color-blue);}
   .neonBlue:hover::before, .neonBlue:focus::before, .neonBlue:hover::after, .neonBlue:focus::after {opacity: 1;}

   .neonGreen {color: var(--color-green);border: 0.125em solid var(--color-green);text-shadow: 0 0 0.25em var(--color-green);box-shadow: inset 0 0 0.5em 0 var(--color-green), 0 0 0.5em 0 var(--color-green);}
   .neonGreen::before {pointer-events: none;content: "";position:absolute;top: 120%;left: 0;width: 100%;height: 100%;background: var(--color-green);transform: perspective(1em) rotateX(40deg) scale(1, 0.35);filter:blur(2em);opacity: 0.6;transition: opacity 0.2s ease;}
   .neonGreen::after {content: "";position:absolute;top: 0;right:0;bottom:0;left: 0;background: var(--color-green);box-shadow: 0 0 2em 0.5em var(--color-green);opacity:0;transition: opacity 0.2s ease;z-index:-1;}
   .neonGreen:hover, .neonGreen:focus {background: var(--color-green);color: white;border: 0.125em solid var(--color-green);}
   .neonGreen:hover::before, .neonGreen:focus::before, .neonGreen:hover::after, .neonGreen:focus::after {opacity: 1;}

	.midWrap {padding-bottom:3em;}

	/* Page Name/Title */
	.pageName h1 {margin: 0 0 10px;}

	/* Breadcrumbs */
	.structBody .breadCrumbs {margin-bottom:2em}
	.structBody .breadCrumbs ul {padding:0;margin:0;list-style:none;}
	.structBody .breadCrumbs ul li{padding:0 0px 0 0px;margin:0;display:inline;font-size:.8em;}
	.structBody .breadCrumbs ul li a{text-decoration:none;padding:0px 5px 0 8px;}
	.structBody .breadCrumbs ul li:before {content: "»";}
	.structBody .breadCrumbs ul li:first-child a {padding-left:0;}
	.structBody .breadCrumbs ul li:first-child:before {content:"";}
	.structBody .breadCrumbs ul li.selected a{font-weight:bold;}
	
	/* News Patterns
	---------------------------------------------*/
   /* Feature Rotator */
   .imageRotator {position: relative;margin-top: 0;margin-bottom: 0;width: 100%;}
   .bx-wrapper {position:relative;}
   .bx_slide {position:relative;}
   /* Image */
   .bx_slide .sldimg {position: relative;background-size: cover;background-repeat: no-repeat;background-position: bottom;padding-bottom: 50%;/* height: 100vh; */}
   .bx_slide .rotator {position: relative;background-size: 200%;background-repeat: no-repeat;background-position: 60% 42%;height: 600px;}
   .bx_slide .sldimg a {position: absolute; width: 100%; height: 100%; left: 0; top: 0;}
   /* Text */
   .bx_slide .container {position:relative;}
   .bx_slide .sldtxt {position:absolute;bottom: 0;top: 0;left:0;right:0;width: 100%;color:white;padding: 0 30px 0;display: flex;display: -webkit-flex;align-items: center;-webkit-align-items: center;text-align: center;}
   .bx_slide .sldtxt .title {position: absolute;left:60%;z-index: 10;color: white;text-shadow: 4px 5px 10px rgba(0, 0, 0, 0.4);font-weight: 400;font-size: 45px;padding:0 0 10px;max-width: 500px;line-height: 1.15;text-align: left;}
   .bx_slide .sldtxt .title span {float:left;font-size: 75px;font-weight: 600;display: block;margin-bottom: 20px;font-family: var(--font-oswald);background: var(--color-navy);text-align: left;padding: 10px 30px 20px;line-height: 1;text-transform: uppercase;border-radius: 8px;overflow: hidden;}
   .bx_slide .sldtxt p {clear: both;line-height: 1.25;font-size: 40px;margin: 0;}
   .bx_slide .sldtxt .logoOverlay {position: absolute;left:50%;opacity: 0.15;width:900px;}
   .bx_slide .sldtxt .logoOverlay img {position: relative;left:-50%;}

   /* News Listing */
   .newsItem {position:relative;padding-bottom:20px;margin-bottom:20px;}
   /* Image */
   .newsItem .thumb img {width:100%;}
   /* Text */
   .newsItem .text {margin-top:20px;min-height:120px;}
   .newsItem .title {font-size: 1.5em;line-height:normal;padding:0 0 5px;font-weight:bold;text-align: center;}
   .newsItem .preview {text-align: center;line-height: 1.8;}

   /* Events Listing */
   .eventItem {position:relative; width:100%; padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid #1d1d1d;}
   /* Date */
   .eventItem .date {position:absolute; width:60px;background:white; border:1px solid #1d1d1d;text-align:center;}
   .eventItem .date .month {text-transform:uppercase; font-weight:bold; font-size:0.85em; line-height:1em; background:#1d1d1d; padding:5px 0;}
   .eventItem .date .day {font-size:2em; line-height:1.5em;}
   /* Text */
   .eventItem .text {padding-left:80px; min-height:70px;}
   .eventItem .title {font-size:1.2em; line-height:normal; padding:0 0 5px; font-weight:bold;}
   
   .homeSection {position:relative;float:left;width:100%;}

   .sectionName {text-align: center;}
   .sectionName .title {margin: 30px;font-size: 28px;font-weight: 300;text-transform:uppercase;font-family: var(--font-shadows);color:var(--color-navy);}
   .sectionName .title span {font-size: 45px;font-weight: bold;}

   .sectionPreview {max-width: 800px;margin: 0 auto;}

   .hero {text-align: right;position: relative;color: var(--color-navy);padding: 150px 15px 100px;margin-top: 100px;background: #f8f8f8;}
   .hero h1 {position:relative;z-index:2;text-transform: uppercase;line-height: 1.2em;font-size: 3.25em;font-weight: 500;margin: 0;}
   .hero h2 {position:relative;z-index:2;font-family: var(--font-raleway);font-size: 30px;font-weight: 300;line-height: 1.6;margin: 10px 0 0;}
   
   .pineapple-slice {content: "";width: 1000px;height: 1000px;background-image: url(images/pineapple-slice3.png);position: absolute;top: 2%;left: -5%;background-size: cover;background-repeat: no-repeat;}

   #Cards {margin:100px 15px;}

   .cards-wrapper {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      /* grid-template-rows: repeat(5, 1fr); */
      grid-template-rows: repeat(2, 1fr);
      grid-column-gap: 30px;
      grid-row-gap: 30px;
   }
   
   .card1 { grid-area: 1 / 1 / 2 / 3; }
   .card2 { grid-area: 1 / 3 / 2 / 4; }
   .card3 { grid-area: 2 / 1 / 3 / 2; }
   .card4 { grid-area: 2 / 2 / 3 / 4; }
   .card5 { grid-area: 3 / 1 / 4 / 4; }
   .card6 { grid-area: 4 / 1 / 5 / 3; }
   .card7 { grid-area: 4 / 3 / 5 / 4; }
   .card8 { grid-area: 5 / 1 / 6 / 2; }
   .card9 { grid-area: 5 / 2 / 6 / 4; }

   .card-item {position:relative;overflow: hidden;border-radius: 10px;min-height: 500px;}
   .card-item .card-inner {display: flex;flex-direction: column;justify-content: end;width: 100%;height: 100%;color: #fff;padding: 50px;transition: 0.3s ease all;}
   .card-item .card-inner .title {text-transform: uppercase;font-size: 2.429em;line-height: 1.2em;margin-bottom: 20px;padding-bottom: 20px;border-bottom: 1px solid #222;}
   .card-item .card-inner .title.lightborder {border-bottom: 1px solid #fff;}
   .card-item .card-inner .title i {position: relative;left: 20px;transition: 0.3s ease all;}
   .card-item a.card-inner:hover .title i, .card-item a.card-inner:focus .title i {left: 40px;}
   .card-item .card-inner .info {line-height: 1.5em;}
   .card1 {background-image: url(images/pineapple-hero.png);background-size: cover;background-position: center;}
   .card2 .card-inner {background-color: #eabb3d;color: #0f2531;}
   .card3 a {background: #88231f;}
   .card3 a:hover, .card3 a:focus {background: #1a1a1a;}
   .card4 {background-image: url(images/order-of-the-blade/game-playing.jpg);background-size: cover;background-position: center;}
   .card4 .card-inner {display: flex;justify-content: center;align-items: center;opacity: 1;transition: 0.3s ease all;}
   .card4 .card-inner img {z-index: 2;}
   .card4:hover .card-inner {opacity: 0;}

   #AboutMe {margin:100px 0 0;padding: 0 20px;}
   #AboutMe .flex-row {align-items: center;}
   #AboutMe .aboutRight .title {margin: 0;text-align: left;margin-bottom: 20px;}
   #AboutMe .aboutRight .title hr {margin-left:0;}
   #AboutMe .aboutRight p {text-align: left;margin: 0 0 20px;}
   #AboutMe .aboutRight .button {float:left;}
   #AboutMe .aboutLeft {position: relative;}
   #AboutMe .aboutLeft .aboutLeftInner {position: relative;border-radius: 15px;overflow: hidden;max-width: 500px;}
   #AboutMe #ServicesRow {padding: 100px 15px 20px;text-align: center;}
   #AboutMe #ServicesRow .iconItem {margin: 15px 0;padding: 0;display: flex;align-items: center;}
   #AboutMe #ServicesRow .leftIcons .iconItem {flex-direction: row-reverse;}
   #AboutMe #ServicesRow .leftIcons .icons {float:right;}
   #AboutMe #ServicesRow .rightIcons .icons {float:left;}
   #AboutMe #ServicesRow .leftIcons h2 {text-align:right;}
   #AboutMe #ServicesRow .rightIcons h2 {text-align:left;}
   #AboutMe #ServicesRow .iconItem .icons {display: flex;align-items: center;justify-content: center;font-size: 35px;color: var(--color-navy);width: 100px;height: 100px;background: #fff;box-shadow: 0 15px 30px rgba(0,0,0,0.1);border-radius: 10px;}
   #AboutMe #ServicesRow .iconItem .description { width: calc(100% - 100px);}
   #AboutMe #ServicesRow h2 {font-weight:400;margin: 30px;font-size: 18px;}

   #Services {padding:80px 0 100px;background: #1c1c1c;color:#f0f0f0;}
   #Services #ServicesRow {padding: 30px 15px;text-align: center;}
   #Services #ServicesRow .iconItem {margin: 10px 0;padding: 0;display: flex;align-items: center;}
   #Services #ServicesRow .leftIcons .icons {float:right;}
   #Services #ServicesRow .rightIcons .icons {float:left;}
   #Services #ServicesRow .leftIcons h2 {text-align:right;}
   #Services #ServicesRow .rightIcons h2 {text-align:left;}
   #Services #ServicesRow .iconItem .icons {font-size: 35px;color: var(--color-navy);width: 100px;height: 100px;text-align: center;padding: 34px 0;background: #232323;box-shadow: 0 15px 30px rgba(0,0,0,0.1);}
   #Services #ServicesRow .iconItem .description { width: calc(100% - 100px);}
   #Services #ServicesRow h2 {font-weight:400;margin: 30px;font-size: 22px;}

   #Stats {position:relative;color:white;float:left;width:100%;background:white;padding:100px 0 70px;background: url('images/pub-background-dark.jpg');background-size: cover;background-position: center;background-attachment: fixed;}
   /* #Stats:after {content: '';position: absolute;top: 0;width: 100%;left: 0;height: 25%;background: url(images/mountain-overlay.png);background-size: 102% 50%;background-repeat: no-repeat;background-position: bottom;transform: scaleX(-1);transform: rotate(180deg);} */
   #Stats .statWrap {text-align: center;font-size: 20px;margin-bottom:40px;}
   #Stats .statWrap .statNumber {font-family:var(--font-shadows);font-size: 90px;font-weight: 500;margin-bottom: 5px;line-height: 1em;}
   #Stats .statWrap .statName {font-weight: 600;font-family: var(--font-raleway);}
   #Stats .statWrap .statName span {font-weight: 300;}

   #Projects {padding:80px 15px;}
   #Projects .projectRow {margin:40px 0;padding: 0;}
   #Projects .projectRow a {display: flex;align-items: center;justify-content: center;}
   #Projects .projectRow .col-md-6 {padding: 0 5px;}
   #Projects .projectRow .col-md-5 {display: flex;justify-content: center;align-items: center;}
   #Projects .projectRow .art {background-size: cover;background-position: center;display: flex;justify-content: center;opacity: 1;transition: 0.4s ease all;position: relative;top: 0;left: 0;border-radius: 30px;overflow: hidden;}
   #Projects .projectRow .projectInner {padding:50px 0 50px 50px;}
   #Projects .projectRow.textalignright .projectInner {padding:50px 50px 50px 0;}
   #Projects .projectRow h4 {text-transform: uppercase;margin: 0;font-weight: 600;font-size: 18px;color: #8d8d8d;}
   #Projects .projectRow h3 {margin: 15px 0 0;font-size: 2em;color: var(--color-navy);font-family: var(--font-raleway);font-weight: 600;}
   #Projects .projectRow p {line-height: 1.5;color: #1c1c1c;}
   #Projects .projectRow .readmore {color: var(--color-navy);font-weight: 400;text-transform: uppercase;border-bottom: 1px solid;padding: 10px 0;float: left;transition: 0.4s ease all;}
   #Projects .projectRow .readmore:after {content: "→";padding-left: 10px;}
   #Projects .projectRow.textalignright .readmore {float: right;}
   #Projects .projectRow.center a {display: inline;}
   #Projects .projectRow a:hover .art {position: relative;left: -20px;transition: 0.4s ease all;}
   #Projects .projectRow.textalignright a:hover .art {left: 20px;}
   #Projects .projectRow a:hover h3 {color: black;}
   #Projects .projectRow a:hover .readmore {color: black;}

   .projectrow1 {float:left;width: 100%;padding: 80px 0 50px;background: #1c1c1c;}
   .portfolioimages {float:left;width: 100%;}
   .portfolioimages .newsItem {padding:0;margin: 0;-webkit-transition: all 0.3s;transition: all 0.3s;/* opacity:0.5; */}
   .portfolioimages .newsItem:hover {-webkit-transition: all 0.3s;transition: all 0.3s;opacity:0.8;}

   .patternoverlay {background:url('images/overlay-pattern.png');background-repeat: repeat;background-attachment: scroll;width: 100%;height: 100%;  position: absolute;}

   #Clients {padding:80px 0 50px;/*clip-path: polygon(0 0%, 100% 0, 100% 100%, 0 70%);*/}
   #Clients .clientRow {margin:5px 0;}
   #Clients .clientRow .col-md-3 {padding: 0 5px;}
   #Clients .clientRow .logo {height: 175px;padding: 25px;display: flex;align-items: center;justify-content: center;transition: 0.4s ease all;}
   #Clients .clientRow .logo img {max-width: 150px;}

   #Contact {padding: 100px 20px 80px;overflow: hidden;}
   #Contact .wrap {max-width: 750px;margin: 0 auto;text-align: center;position: relative;}
   #Contact .wrap .top {max-width: 550px;margin: 0 auto;}
   #Contact p {margin-bottom: 40px;}
   #ContactForm p {box-shadow: 0 15px 30px rgb(0 0 0 / 10%);margin-bottom: 1.5em;}
   #ContactForm p.text {margin-bottom: 1em;}
   #ContactForm p.submit {box-shadow:none;margin-top: 2em;}
   #ContactForm .g-recaptcha {width: 302px;margin: 0 auto 15px;}
   #Contact .bgslant {position:absolute;width:100%;bottom:0;}

   .bioIntro {padding: 40px 20px;float: left;width:100%;}
   .bioIntro .bioInner {max-width: 1170px;margin: 0 auto;position: relative;}
   .bioIntro .bioInner .sldtxt .title {z-index: 5;position: relative;text-transform:uppercase;font-size: 28px;font-weight: 300;line-height: 1.1;font-family: var(--font-shadows);margin-bottom:20px;color:var(--color-navy);}
   .bioIntro .bioInner .sldtxt .title span {font-size: 42px;font-weight: bold;}
   .bioIntro .bioInner .sldtxt .preview {line-height: 1.8;z-index: 5;position: relative;}
   .bioIntro .bioInner .sldtxt .bioIcon:before {color: #000;font-size: 500px;position: absolute;top: -30%;right: -65%;z-index: 0;opacity: 0.05;}
   .bioIntro .bioInner .sldtxt .bioIcon.leftIcon:before {left:-65%;right:auto;}
   .bioIntro.right .bioInner {text-align: right;}
   .bioIntro.right .bioInner .sldtxt:before {left:auto;right:0;}

   /* ===========================
      ====== Contact Form ======= 
      =========================== */

   input, textarea, button {
      padding: 15px 20px;
      border: none;
      border-radius: 3px;
      width: 100%;
      color: #1c1c1c;
      background: #fff;
   }

   textarea {
      width: 100%;
      height: 150px;
      line-height: 18px;
   }

   input:hover, textarea:hover,
   input:focus, textarea:focus {
      border-color: none;	
   }

   .form label {
      margin-left: 10px;
      color: #000;
   }

   .form-group {
        color: #1d1d1d;
        text-align: left;
        margin-bottom: 15px;
    }

   .form-group label {display: none;}

   .alert {padding: 15px;margin-bottom: 20px;border: 1px solid transparent;border-radius: 4px;}
   .alert-dismissable, .alert-dismissible {padding-right: 35px;}
   .alert-success {color: #3c763d;background-color: #dff0d8;border-color: #d6e9c6;}
   .alert-dismissable .close, .alert-dismissible .close {position: relative;top: -2px;right: -21px;color: inherit;}
   .alert button.close {-webkit-appearance: none;padding: 0;cursor: pointer;background: 0 0;border: 0;}
   .alert .close {float: right;font-size: 21px;font-weight: 700;line-height: 1;color: #000;text-shadow: 0 1px 0 white;filter: alpha(opacity=20);opacity: .2;}

/* Interior Pages
---------------------------------------------*/

   .interior .imageRotator:after {background-size: 102% 60%;}
   .interior .bx_slide .rotator {height: 650px;height: 350px;}
   .interior .bx_slide .sldtxt {padding:0 20px;}
   .interior .bx_slide .sldtxt .title {color: white;font-size: 50px;}
   .interior .structBody {margin:0 0 50px;}

   .interior .imageRotator .sectionName {width: 100%;}
   .interior .imageRotator .sectionName h1 {color:white;font-size: 40px;font-family: var(--font-shadows);font-weight: 300;}
   .interior .imageRotator .sectionName h1 span {font-size: 65px;color:var(--color-navy);font-weight: 400;}

   /* .interior #Contact {background: none;}
   .interior input, .interior textarea {background: white;box-shadow: 0 5px 20px rgba(0,0,0,0.1);}
   .interior .submit input, .interior .submit-button {background: var(--color-navy);}
   .interior .submit input:hover, .interior .submit-button:hover {background: #212121;} */

   .interior #Projects {padding:50px 0;}
   .interior #Projects .tabs ul {text-align: center;margin-bottom:40px;padding:0;}
   .interior #Projects .tabs ul li {display: inline-block;margin: 0 5px;}
   .interior #Projects .tabs ul li a {padding: 10px 20px;background: white;transition: all ease 0.3s;box-shadow: 0 15px 15px rgba(0,0,0,0.07);font-weight: 400;display: block;margin-bottom: 15px;}
   .interior #Projects .tabs ul li a:hover {opacity: 0.5;}
   .interior #Projects .tabs ul li a.current {background: var(--color-navy);color:white;}

   .interior #Projects .projectRow h4 {text-transform: uppercase;font-weight: 400;font-size: 16px;color: #949494;margin-bottom: 0;letter-spacing: 1.25px;}
   .interior #Projects .projectRow a h3 {transition: 0.3s all ease;}
   .interior #Projects .projectRow p {color:#1c1c1c;}
   .interior #Projects .projectRow .projectInner {padding:50px 0 50px 50px;}
   .interior #Projects .projectRow .art.logoThumbSm {background-size: 50%;background-repeat: no-repeat;}
   .interior #Projects .projectRow .art.logoThumbMd {background-size: 65%;background-repeat: no-repeat;}
   .interior #Projects .projectRow .art.logoThumbLg {background-size: 100%;background-repeat: no-repeat;}
   /* .interior #Projects .projectRow .art img {display: none;} */

   .portfolio footer .row {border-top: none;}

   .background {float: left;width: 100%;padding: 0 20px;}
   .background h2 {position: relative;text-transform: uppercase;font-family: var(--font-shadows);margin-bottom: 20px;color: var(--color-navy);font-size: 42px;font-weight: bold;}
   .background h3 {margin: 30px 0 0;font-weight: 500;font-size: 20px;}
   .background h4 {font-weight: 300;margin: 15px 0;font-size: 18px;}
   .background h4 i {font-size: 16px;}
   .background h4 span {font-size: 16px;padding: 5px 10px;background: #2f98a3;border-radius: 5px;margin: 0 10px 10px 0;display: inline-block;color: white;font-weight: 400;}

/* Project Pages
---------------------------------------------*/
   
   .project .dropshadow img {box-shadow: 0 10px 30px rgba(0,0,0,0.10);}
   .project .categorydate {text-transform: uppercase;font-weight: 400;font-size: 16px;color: #949494;margin-bottom: 0;letter-spacing:1.25px;}
   .project h1 {font-family: var(--font-shadows);color:var(--color-navy);}
   .project #IndividualProjectTop {padding:50px 30px 0;}
   .project .IndividualProjectBody {position: relative;}
   .project .IndividualProjectBody img {width: 100%;}
   .project .darkbkgd:before {content:"";position:absolute;width:100%;height:75%;top:100px;left:0;background:var(--color-navy);}
   .project .lightbkgd:before {content:"";position:absolute;width:100%;height:75%;top:100px;left:0;background:#000;opacity:0.05;}
   .project .lightbkgdTall:before {content:"";position:absolute;width:100%;height:90%;top:100px;left:0;background:#000;opacity:0.05;}
   .project .bkgdOffset:before {top:250px;}
   .project .imageOffset {position: relative; top:-150px;}
   .project .imageOffsetBottom {position: relative; top:150px;}
   .project .projectSubHead h2 {font-family: var(--font-hina);font-size: 28px;font-weight: 400;margin-top:0;}
   .project .whiteBkgd {background:white;padding:40px;}

   .project .color-square-wrap {display: flex;justify-content: center;}
   .project .color-square {margin: 0 15px;}
   .project .color-square span {width: 200px;height:200px;display: block;}

   .project .color-square.badmouth-red span {background:#d52027}
   .project .color-square.badmouth-black span {background:#000;}

   .project .color-square.begroup-red span {background:#cb2127}
   .project .color-square.begroup-black span {background:#000;}

   .project .color-square.digman-red span {background:#b80103}
   .project .color-square.digman-black span {background:#000;}

   .project .color-square.fin-purple span {background:#922E7B}
   .project .color-square.fin-lightpurple span {background:#843690;}
   .project .color-square.fin-darkpurple span {background:#5f2f5a;}
   .project .color-square.fin-brown span {background:#876453;}

   @media only screen and (max-width: 700px) {
      .darkbkgd:before, .lightbkgd:before {height: 85%;}
      .project .IndividualProjectBody .row {margin-bottom: 0px;}
      .project .imageOffset, .project .imageOffsetBottom {top:0px;}
      .project .IndividualProjectBody img {margin-bottom: 35px;}
      .project .splitMobileMargin {margin-top:100px;}

      .project .color-square span {width: 100px;height:100px;display: block;}

      #Projects .projectRow {margin: 20px 0;}
   }

   /*--- Order of the Blade ---*/
   .interior.ootb #IndividualProjectTop:before {content: "";position: absolute;width: 100%;height: 100%;background: url(images/order-of-the-blade/hood-graphic.png);background-size: cover;background-repeat: no-repeat;background-position: center;opacity: 0.03;left: 0;top: 0;}
   
   .interior.ootb h2 {font-family: var(--font-cinzel);}
   .interior.ootb .game-stats {padding: 0;display: flex;justify-content: center;}
   .interior.ootb .game-stats li {list-style: none;width: 75px;text-align: center;}
   .interior.ootb .game-stats li i {font-size: 28px;}
   .interior.ootb .game-stats li span {font-size: 14px;}
   .interior.ootb #ootb-testimonial {text-align:center;position:relative;color:white;float:left;width:100%;background:white;background: url('images/order-of-the-blade/dark-background.png');background-size: cover;background-position: center;background-attachment: fixed;}
   .interior.ootb #ootb-testimonial .sldtxt {margin: 0 auto;padding: 100px 20px;}
   .interior.ootb #ootb-testimonial .quote {font-size: 140px;font-family: var(--font-cinzel);position: relative;top: 20px;}
   .interior.ootb #ootb-testimonial p {color: white;margin: 0;}
   .interior.ootb #ootb-testimonial .author {margin-top: 20px;color: #b8b8b8;text-transform: uppercase;font-weight: 400;font-size: 16px;letter-spacing: 1.25px;}
   .interior.ootb .projectRow {display: flex;align-items: center;}

/* Footer Elements 
---------------------------------------------*/
   #footer-image {overflow: hidden;position:relative;color:white;float:left;width:100%;padding: 120px 0 100px;border-bottom: 1px solid var(--color-gold);}   
   /* #footer-image:before {content: "";width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: url(images/pineapple-slice3.png);background-size: cover;opacity: 0.2;} */
   #footer-image .pineapple-slice {opacity: 0.2;left: calc(50% - 800px);background-position: 0px center;background-repeat: no-repeat;width: 1600px;height: 1600px;}

   footer {position: relative;padding: 2em 20px 1em;float: left;width: 100%;}
   /* footer:after {content: '';position: absolute;top: -150px;width: 100%;left: 0;height: 150px;background: url(images/mountain-overlay-teal.png);background-size: 102% 50%;background-repeat: no-repeat;background-position: bottom;} */
   footer .row {padding: 0 0 1em;}
   footer .row.bottom {display: flex;align-items: center;}

   #footer-image .newsletter-header h3 {font-weight: 400;font-size: 32px;text-align:center;margin: 0 0 20px;color: var(--color-navy);}
   #footer-image .newsletter-header h3 span {font-family: var(--font-shadows);font-weight: 600;font-size: 38px;color: var(--color-gold);}
   #footer-image .indicates-required {display: none;}
   #footer-image .brandingLogo {display: none;}
   #footer-image .mc-field-group input {border-radius: 10px;padding: 15px 30px;border: 1px solid var(--color-navy);}
   #footer-image .mc-field-group label {display: none;}
   #footer-image .optionalParent {position: absolute;right: 14px;top: 0;}
   #footer-image .optionalParent input {border-radius: 0 10px 10px 0;color: var(--color-gold);background: var(--color-navy);border: 1px solid var(--color-navy);}
   #footer-image .optionalParent input:hover, #footer-image .optionalParent input:active {background: lightgray;color: var(--color-navy);}

   footer .footercopy {margin:0;font-size: 18px;}
   footer .footercopy p {margin: 0;font-size:20px;}
   footer .footercopy a {border-bottom: 1px solid white;color: var(--color-navy);}
   footer .footercopy a:hover, footer .footercopy a:active {border-bottom: 1px solid var(--color-navy);}
   footer .footercopy .thanks {font-family: var(--font-shadows);font-size: 50px;font-weight: 500;color: var(--color-gold);line-height: 1.2;margin: 40px 0 10px;letter-spacing:2px;}
   
   footer .logo-section {text-align: center;}
   footer .logo-section .logo img {width: 80px;}
   footer .logo-section .logo div {text-transform: uppercase;font-weight: 600;font-size: 26px;color: var(--color-navy);line-height: 0.7;margin-top: 10px;}
   footer .logo-section .logo div span {font-weight: 300;font-size: 16px;}
   footer .logo-section p {clear: both;margin-top: 20px;}
   footer .logo-section p span {font-family: var(--font-shadows);font-size: 30px;font-weight: 500;color: var(--color-gold);}

   footer .util-nav {margin: 0;padding: 0;}
   footer .util-nav li:first-child {font-weight: 600;text-transform: uppercase;font-size: 16px;}
   footer .util-nav li {list-style: none;padding: 10px 0;}
   footer .util-nav li a {color: var(--color-navy);}

   footer .design-nav {margin: 0;padding: 0;text-align: right;}
   footer .design-nav li:first-child {font-weight: 600;text-transform: uppercase;font-size: 16px;}
   footer .design-nav li {list-style: none;padding: 10px 0;}
   footer .design-nav li a {color: var(--color-navy);}

   footer .row.bottom {padding: 1em 0 0;border-top: 1px solid #eabb3d;}
   footer .row.bottom p {font-size: 14px;}
   footer .row.bottom .footercopy p span {font-weight: bold;font-family: var(--font-oswald);position: relative;top: 3px;font-size: 20px;}

   footer ul.social {margin:0; padding:0;list-style:none;}
	footer ul.social li {display: inline-block;margin: 15px;}
	footer ul.social li a {color:var(--color-gold);font-size: 22px;}
	footer ul.social li a:hover {color: black;}
	
	.toplink {display:block;text-align:center;font-size:0.85em;text-transform:uppercase;line-height:normal;padding:10px;display: none !important;}
	.toplink a {text-decoration:none; }

/* Utility Classes 
-----------------------------------------------*/
	/* Flexbox Equal heights */
	.flexbox .equal-height {
		display: flex; 
		flex-direction: row;
	}
	.flexbox .equal-height-item {
		display: inherit;
		flex-direction: column;
	}
	.flexbox .equal-height-item-inner {
		flex: 1 0 auto;
	}
		/* Stack items on mobile */
		@media only screen and (max-width: 699px) {
			.flexbox .equal-height 	{
				flex-direction: column;
			}
		}
	
/*
---------------------------------------------
---------------------------------------------
   MEDIA QUERIES
---------------------------------------------
---------------------------------------------
*/

/* =============================================================================
   Extra Wide Desktop Only
   ========================================================================== */

@media only screen and (min-width: 1500px){
}

@media only screen and (min-width: 1800px){
}

/* =============================================================================
   Wide Desktop Only
   ========================================================================== */
@media only screen and (min-width: 1280px){

}

/* =============================================================================
   Desktop Only
   ========================================================================== */
@media only screen and (min-width: 1024px){

}

/* =============================================================================
   Below Desktop
   ========================================================================== */
@media only screen and (max-width: 1023px){

   .imageRotator:after {height: 20%;}

   .bx_slide .rotator {background-position: 25% 50%;}
   .bx_slide .sldtxt .title {left: initial;position: relative;}
   .bx_slide .sldtxt .title span {font-size: 55px;float: left;}

   #Careers .bioItem .sldtxt {padding: 40px 25px 10px;}

   #Clients .clientRow .logo img {max-width: 150px;}

   #Projects .projectRow a {display: block;}
   #Projects .projectRow h3 {font-size: 2em;}
   #Projects .col-md-10, #Projects .col-md-12 {padding: 0;}
   #Projects .projectRow .col-md-5 {justify-content: flex-start;}
   #Projects .projectRow .projectInner, #Projects .projectRow.textalignright .projectInner, .interior #Projects .projectRow .projectInner {padding:30px 0;}
   #Projects .projectRow .projectInner {text-align: left;}
   #Projects .projectRow .projectInner .readmore {float: left;}

   #Projects .projectRow.textalignright a:hover .art {left: 0;}
   #Projects .projectRow a:hover .art {left: 0;}

   .bioIntro.right .bioInner {text-align: left;}
   .bioIntro .bioInner .sldtxt .bioIcon:before {display: none;}

   #AboutMe {margin: 20px 0;padding: 0;}
   #AboutMe .aboutLeft {padding: 0 30px 30px;}

   .pineapple-slice {width: 500px;height: 500px;opacity: 0.2;top: 0;}
   #footer-image {padding: 80px 0 60px;}
   #footer-image .pineapple-slice {left: calc(50% - 600px);width: 1200px;height: 1200px;}

}

/* =============================================================================
   Tablet
   ========================================================================== */
@media only screen and (min-width: 700px) and (max-width: 1023px){
   
   #nav {display: none;}
   
	.midWrap {padding-bottom:1em;}
	.structRight {margin-bottom:2em;}
   
   .desktopNav {display: none;}
   .desktopNav ul li {display: block;text-align: center;margin: 0;}
   .desktopNav ul li a {line-height: 1em;padding: 15px 0;width: 100%;}
   .desktopNav .merchbutton {padding: 0;}
   .desktopNav .merchbutton a {background: #1f1f1f;}
   .desktopNav ul li {padding-bottom: 0px;}
   .desktopNav ul li:hover {border-bottom: none;}
   .desktopNav ul li.current {border-bottom: none;}

	.bx_slide .sldimg {padding-bottom: 140%;}

   #Careers .flex-row {display: inline;}
   
   .structHead {padding: 0 15px;}
   .structHead .nav-toggle {display: block;top: 30px;right: 20px;-webkit-transition: all 0.3s;transition: all 0.3s;}
}


/* =============================================================================
   Mobile
   ========================================================================== */
@media only screen and (max-width: 699px) {

	#nav {display:none;}

   .textalignright {text-align: center;}

	.structHead {padding: 0 15px;}
   .structHead .container {width:100%;}
   .structHead .nav-toggle {display: block;top: 25px;right: 5px;}
   
   .desktopNav {display: none;}
   .desktopNav ul li {display: block;text-align: center;margin: 0;}
   .desktopNav ul li a {line-height: 1em;padding: 15px 0;width: 100%;}
   .desktopNav .merchbutton {padding: 0;}
   .desktopNav .merchbutton a {background: #1f1f1f;}
   .desktopNav ul li {padding-bottom: 0px;}
   .desktopNav ul li:hover {border-bottom: none;}
   .desktopNav ul li.current {border-bottom: none;}

   .bx_slide .rotator {height: 450px;}
   
   #nav {padding-top: 100px;}
   .mainNav ul li {margin: 15px 0;}
   .mainNav ul li a {font-size: 1.5em;}

   .flex-row {display: inline-block !important;}

   .hero {padding: 80px 15px;}
   .hero h1 {font-size: 2em;}

   #AboutMe .aboutLeft:before {display: none;}

   #AboutMe #ServicesRow {padding: 50px 0 0;}
   #AboutMe #ServicesRow .leftIcons h2 {text-align: left;}
   #AboutMe #ServicesRow .leftIcons .iconItem {flex-direction: row;}

   #Stats {padding: 150px 0 100px;}
   #Stats:before {height: 15%;}
   #Stats:after {height: 15%;}
   #Clients {padding: 50px 0 100px;}

   #Contact .wrap {width: 100%;}

   .bioIntro .bioInner {padding: 0;}

   .interior.ootb .projectRow {display: block;}

   footer .util-nav {text-align: center;}
   footer .design-nav {text-align: center;}
   
   footer .row {display: block;}
   footer .row.bottom {display: block;text-align: center;}

   #footer-image .mc-field-group {padding-right: 0px;}
   #footer-image .optionalParent {position: relative;right: 0;margin-top: 20px;text-align: center;}
   #footer-image .optionalParent input {border-radius: 10px;}
}


/* =============================================================================
   Less than 480px / mobile portrait
   ========================================================================== */
@media only screen and (max-width: 479px) {

}


/* =============================================================================
   Retina Display 
   ========================================================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {

}