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

/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on October 25, 2018 */



@font-face {
    font-family: 'suisse_intlblack';
    src: url('/fonts/suisseintl-black-webfont.woff2') format('woff2'),
url('/fonts/suisseintl-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'suisse_intllight';
    src: url('/fonts/suisseintl-light-webfont.woff2') format('woff2'),
         url('/fonts/suisseintl-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'suisse_intllight_italic';
    src: url('/fonts/suisseintl-lightitalic-webfont.woff2') format('woff2'),
         url('/fonts/suisseintl-lightitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

html, body { height: 100%; font-family: 'suisse_intllight'; }

.preload * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}

h1, h2 { font-family: 'suisse_intlblack'; letter-spacing: 2px; text-transform: uppercase; font-size: 2em; display: block; font-weight: 600; width:100%; padding: 3.5em 0 0em; }
h2 { padding: 0.5em 0 0 0em; font-size: 1.4em; }
h4 { font-family: 'suisse_intlblack'; padding-right: 22px; }
h3 { font-family: 'suisse_intllight'; font-size: 2.6em; text-transform: none; }
h5 { font-family: 'suisse_intlblack'; font-size: 1em; text-transform: uppercase; display: block; }

.specs-landing h3 { text-transform: uppercase; font-size: 2.5em; }
span.subHed { letter-spacing: 1px; font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif"; display: block; width:100%; color: #666666; font-size: 1.2em; text-align: left; padding-bottom: 1em; padding-right: 2em; margin-top: -0.5em; }

.marginTop { margin-top: 1em; }
.marginBottomNone { margin-bottom: 0 !important; }
.textAlignCenter { text-align: center !important; }

.jumbotron {
  padding: 0; margin: 0 !important;
  height: 100%;
}

div.hidden {
    display: none
}

.vertical-align-nav, .vertical-align {
    display: flex;
    align-items: center;
}

.boxorder .row { 
	display: flex;
	flex-direction: row;
}

.boxorder .row :nth-child(1) { order: 1; }
.boxorder .row :nth-child(2) { order: 2; }
.boxorder .row :nth-child(3) { order: 3; }

.logoCont { flex: 0 0 16.67%; max-width: 16.67%; }
.logo { width: 90%; max-width: 90%; }
.logo a { position: relative; z-index: 1000; }
.logo img { width: 100%; max-width: 100%; }
.homeInfo.inner > .logo { left: 0px; margin-top: -100px; }

.rightHome { position: relative; }

.row.home { margin: 0; z-index: 100; background: #000; position: fixed; width: 100%; padding: 2em 0 1em; }
.row.home .container { border-bottom: 1px dotted #666666; padding-bottom: 2em; }
.row.staggers, .row.design-details, .row.footer { margin: 0; position: relative; top: 0; }
.row.staggers .row.layoutFix { margin: 0; }
.row.staggers .col-md-12 { padding-left: 0; padding-right: 0; }
.col-md-12.top { position: relative; top: 0; margin-top: 0; padding-top: 3em; }
.row.design-details > .col-12 { padding-left: 0; padding-right: 0; }
.row.design-details { text-align: center; padding-bottom: 5em; }
.row.footer { background:#000; padding-top: 5em; padding-bottom: 3em; text-align: center; }
.specs .container-content { position: relative; }

.container.content { padding: 0; }

.bottomButtons { position: absolute; bottom: 3em; z-index: 1000; left: 0; }

.row.design-details img { margin: 0 auto; width:100%; max-width: 100%; height: auto; }

/*** Support Tables ***/
.rowTable { width: 100%; background:#fff; box-shadow: 0 6px 23px 0 rgba(0,0,0,0.16); border-radius: 4px; padding-bottom: 2em; }
.rowTable .heading { width: 100%; background-color: #666666; border-radius: 4px 4px 0 0; text-align: center; padding: 1em; color: #fff; font-size: 1.2em; text-transform: uppercase; letter-spacing: 1px; font-family: 'suisse_intlblack'; }
.rowTable a { width: 100%; text-align: left; display: block; font-family: 'suisse_intllight'; padding: 1.5em 5%; transition: background 0.2s ease; color: #000; background: url(../images/support-arrows.svg) no-repeat 95% 50%; background-size: 7px auto; }
.rowTable a:hover { background: url(../images/support-arrows.svg) no-repeat rgba(0,0,0,0.05) 96% 50%; background-size: 7px auto; text-decoration: none; }
.rowTable a span { display: block; font-family: 'suisse_intlblack'; color: #007bff; }
.rowTable hr { display: block; width: 90%; border-top: 1px solid #ccc; margin: 0 auto; }

/*** Product ***/

.black-landing, .gray-landing {
  background-image: url('../images/notebook/op-17-laptop.png'); /* The image used */
  background-color: #000; /* Used if the image is unavailable */
  height: 900px; /* You must set a specified height */
  background-position: calc(100% + 400px); /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: auto 900px; /* Resize the background image to cover the entire container */
  transition: 0s linear;
  transition-property: background-position;
}

.black-landing.home { background-image: url('../images/desktop-home.png'); background-color: #111; background-position: calc(0% - 1px); height: 600px; background-size: auto 600px; }

.black-landing.desktop { background-image: url('../images/desktops/tower-top-red.png'); background-color: #000; background-position: calc(0% - 1px); height: 800px; background-size: auto 800px; }

.screen {
	min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh; /* These two lines are counted as one :-)       */

  display: flex;
  align-items: center;
}

.homeLogo, .puffer {
	background-image: url('../images/overpowerd_space.svg');
    background-position: 50% calc(50% - 75px);
    background-repeat: no-repeat;
    background-size: 75% auto;
	min-height: 654px;
	padding: 0;
}

.about-logo { width: 50%; display: block; margin: 3em auto 0; }
.col-md-12.col-12.about-text span.projectDesc { width: 75% !important; margin: 0 auto; display: block; font-size: 1em !important; }

/*.puffer {
  width: 75%;
  height: auto;
	transform: rotate(0deg) scale(1) translate(0, -50%);
  animation: bounceIn 0.6s;
  transition: all 0.4s cubic-bezier(.8,1.8,.75,.75);
  cursor: pointer;
  position: absolute;
z-index: 99;
top: 50%;
left: 2%;
right: 0;
bottom: 0;
margin: auto;
	margin-top: -40px;
}*/

/*.puffer { width: 85%; margin: -75px auto 0; text-align: center; transform: rotate(0deg) scale(1) translateZ(0);
  animation: bounceIn 0.9s;
  transition: all 0.4s cubic-bezier(.8,1.8,.75,.75); }*/

.puffer { background-image: url('../images/puffer.svg'); background-color: transparent; position: absolute; width: 100%; margin: 0; padding: 0; display: none; }

.fish {display: none; }

.bubble { fill: #e76853; }
.icon { fill:  #fff; }

@keyframes bounceIn {
  0% {
    opacity: 1;
    transform: scale(.3);
  } 

  50% {
    opacity: 1;
    transform: scale(1.05);
  } 

  70% {
    opacity: 1;
    transform: scale(.9);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.gray-background {
	background-image: linear-gradient(
    to top,
    rgba(255, 255, 255, 0),
    rgba(230, 230, 230, 1)
);
	width: 100%;
}

.gray-background.navver.home {
	background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    rgba(230, 230, 230, 1) );
}

/*.img-background { width: 100%; background-image: url(../images/notebook/keyboard.jpg); background-repeat: no-repeat; background-size: 100% auto; padding: 2em 0; } */

.gray-background.home { background-image: linear-gradient(
    to top,
    rgba(255, 255, 255, 0),
    rgba(230, 230, 230, 1) ); }

.white-landing, .gray-landing, .specs-landing {
  background-image: url('../images/notebook/op-15plus.png'); /* The image used */
  background-color: transparent;
  height: 900px; /* You must set a specified height */
  background-position: calc(0% - 400px);
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: auto 900px; /* Resize the background image to cover the entire container */
  transition: 0s linear;
  transition-property: background-position;
}

.home .gray-landing { background-image: url('../images/homepage-laptop.png'); background-position: calc(100% + 250px); height: 700px; background-size: auto 700px; }
.gray-landing.desktop { background-image: url('../images/desktops/desktop-second-fill.png'); background-position: calc(100%); height: 800px; background-size: auto 800px; }

.gray-landing.specific { background-position: calc(100% + 400px); }

.white-landing {
	background-image: url('../images/notebook/op-15.png');
	background-position: calc(100% + 150px);
	background-size: auto 900px;
}

.white-landing.desktop { background-image: url('../images/desktops/desktop-third-fill.png');
	background-position: calc(50% - 500px);
	background-size: auto 800px;
	height: 800px;
}

.specs-landing { 
	background-image: url('../images/notebook/op-15plus-specs.png');
	background-position: center center;
	text-align: center;
}

.black-landing .container.content, .black-landing.desktop .container.content { height: 900px; }
.black-landing.home .container.content { height: 600px; }

.rev .row { display: flex;
   flex-direction: row-reverse; }
.nonRev .row { display: flex; flex-direction: row; }

.projectProfile { padding-right: 0; padding-left: 0; text-align: center; position: relative; }
.black-landing .projectProfile { margin-top: 0; }
.black-landing.home .projectProfile { margin-top: 0; }
.projectProfile span, a { display: block; text-transform: uppercase; letter-spacing: 1px; }
.projectProfile hr { width: 100%; border-top: 1px dotted #222; margin-bottom: 1em; }
.black-landing .projectProfile hr { border-top: 1px dotted #999; }

a.customButton { font-family: 'suisse_intlblack'; width: 33%; padding: 1.5em 0; display:inline-block; background: #006bda; transition: background 0.3s ease; color: #fff; -webkit-transform: skew(-20deg); -moz-transform: skew(-20deg); -o-transform: skew(-20deg); transform: skew(-20deg); text-align: center; font-size: 0.7em; }
a.customButton:hover { background: #0013ff; text-decoration: none; }
a.customButton:hover span { text-decoration: none; }
a.customButton span { -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg); transform: skew(20deg); width: 100%; display: block; text-align: center; }
a.customButton.outline { background: none; border: 2px solid #006bda; color: #006bda; padding:1.35em 0; transition: border 0.3s ease; transition: color 0.3s ease; }
a.customButton.outline:hover { border: 2px solid #0013ff; color: #0013ff; }

span.brandIcon { display: block; width:20%; max-width: 20%; margin: 0 auto; }

span.slug { color: #999; font-size: 0.7em; letter-spacing: 2px; font-family: 'suisse_intlblack'; }
span.byline { color: #999; font-size: 0.75em; margin-bottom:1em; margin-top:-0.5em; }
.black-landing span.byline { color: #666666; }
.black-landing h2 { color: #fff; }
.projectProfile span.projectDesc { letter-spacing: 0; color: #000; font-size: 1em; text-transform: none; margin-bottom: 1.2em; }
.projectProfile span.projectDesc.specs-detail { font-size: 0.8em; }
.black-landing .projectProfile span.projectDesc { color: #fff; }
span.detail { font-size: 0.7em; letter-spacing: 1px; font-family: 'suisse_intlblack'; text-transform: none; flex: 0 0 33.33% !important; }

.black-landing span.detail { color: #fff; }

span.smallText { color: #000; text-transform: uppercase; font-size: 1.2em; letter-spacing: 1px; position:absolute; bottom: 1em; right: 1.2em; }
span.smallText.web { bottom: 1em; right: 1.2em; }
span.smallText.print { bottom: 1em; left: 1.2em; text-align: left; }
span.smallText.photo { bottom: 1em; right: 1.2em; color: #fff; }
span.smallText.branding { bottom: 1em; right: 1.2em; color: #fff; }

.design-details > .col-12 > img {
	width: 100%;
	max-width: 100%;
}

.design-details span { font-size: 0.75em !important; }

a.social { display: inline-block; font-size: 2em; color:#fff; margin-left: 1em; height: 70px; width: 75px; border-radius: 50%; border: 1px solid #fff; padding-top: 12px; }
a.social.first { margin-left: 0; }

span.copy { font-family: 'suisse_intlblack'; display: block; margin-top: 3em; font-size: 0.65em; color:#ccc; }
span.copy a { display: inline; text-transform: none; }

a.bottomLogo { width: 100px; display: block; margin: 3em auto 0; }
a.bottomLogo img { width: 100%; max-width: 100%; }

span.wally { display: inline; width: 50%; margin-left: 0.75em; text-align: center; }
span.wally img { width: 25%; max-width: 25%; padding-top:0; }

.footer span.wally { width: 25%; }
.footer span.wally img { width: 15%; max-width: 15%; padding-top:2em; }

/*** Specs Specifics ***/

span.circle-specs { position: absolute; height: 50px; width: 50px; background: #000; color: #fff; font-size: 1.5em; font-weight: 700; border-radius: 50px; text-align: center; padding-top: 6px; transition: background 0.5s ease; }
span.circle-specs:hover { background: #ccc; text-decoration: none; }

span.circle-specs.bottom { bottom: 20px; left: 0; }

span.line {
	width: 120px;
	height: 90px;
	position: absolute;
	background: 
       linear-gradient(to top left,
           rgba(0,0,0,0) 0%,
           rgba(0,0,0,0) calc(50% - 0.8px),
           rgba(0,0,0,0.25) 50%,
           rgba(0,0,0,0) calc(50% + 0.8px),
           rgba(0,0,0,0) 100%);
}

span.line.bottom { bottom: 75px; left: 60px; }

/* Web Gallery */

.webPort { position: relative; }
.webPort img { width: 100%; max-width: 100%; }

img { height: auto !important; }

img {
	opacity: 1;
	transition: opacity 0.5s;
}

img[data-src] {
	opacity: 0;
}

.breadies { flex: 0 0 33.33%; max-width: 33.33%; }
.home > .container .breadcrumb { margin-bottom: 0; background: none; }
ol.breadcrumb { font-family: 'suisse_intlblack'; font-size: 0.65em; text-transform: uppercase; }
.breadcrumb-item.active { font-family:'suisse_intlblack'; color: #fff; }
ol.breadcrumb li a { color: #999; }

.mobileImg { display: none; }
.specs .mobileImg { display: block; position: relative; }

	span.triangle-bottomright, span.triangle-topleft, span.triangle-bottomleft {
	width: 0;
	height: 0;
	border-bottom: 16px solid #fff;
	border-left: 25px solid transparent;
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 3;
	display: block;
	}

span.triangle-bottomleft {
	border-bottom: 16px solid #fff;
	border-right: 25px solid transparent;
	border-left: 0;
	bottom: 0;
	left: 0;
}
	
	span.triangle-topleft {	
	top: 0;
	left: 0;
	border-top: 16px solid rgba(0, 0, 0, 1);
	border-right: 25px solid transparent;
}
.triangle-bottomright.topShape { border-bottom: 16px solid rgba(230, 230, 230, 1);
	border-left: 25px solid transparent; }
	.shapeGray {
		border-top: 16px solid rgba(230, 230, 230, 1);
		border-right: 25px solid transparent;
	}




					/* SUPPORT PAGE STYLING */

.support-container {
	display: grid;
	grid-template-columns: 1fr;
}

.main-sub-header {
	color: #5c5c5c;
}

.laptops-header-container,
.model-header {
	background-color: #666;
	border-radius: 4px 4px 0 0;
	padding: 1em;
	color: white;
}

.drivers-container {
	margin-left: 2em;
	box-shadow: 0 6px 23px 0 rgba(0,0,0, .16);
	border-radius: 4px;
}

.filter-container {
	box-shadow: 0 6px 23px 0 rgba(0,0,0, .16);
	border-radius: 4px;
}

.drivers-toggle-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding: 2em;
}

.new > h2 {
	opacity: 0.5;
}

.header {
	color: #007bff;
	text-transform: capitalize;
}

.laptops-list > h2 {
	padding-top: 1.25em;
	padding-bottom: 1.25em;
}

.laptops-list > h2:hover {
	background-color: rgb(238, 238, 238);
}

.laptops-list > h2:hover {
	cursor: pointer;
}
.header:hover {
	background-color: rgb(245, 245, 245)
}

.header:hover,
.old:hover,
.new:hover {
	cursor: pointer;
}

.info-driver {
	padding: 1em;
}

.new-bios {
	padding: 1em;
}



.old-bios-op-lp1-container,
.old-audio-op-lp1-container,
.old-cardreader-op-lp1-container,
.old-chipset-op-lp1-container, 
.old-bluetooth-op-lp1-container, 
.old-intelvga-op-lp1-container,  
.old-wifi-op-lp1-container, 
.old-irst-op-lp1-container, 
.old-lan-op-lp1-container, 
.old-me-op-lp1-container, 
.old-nvvga-op-lp1-container, 
.old-soundblaster-op-lp1-container,
.old-bios-op-lp2-container,
.old-audio-op-lp2-container,
.old-cardreader-op-lp2-container,
.old-chipset-op-lp2-container, 
.old-bluetooth-op-lp2-container, 
.old-intelvga-op-lp2-container,  
.old-wifi-op-lp2-container, 
.old-irst-op-lp2-container, 
.old-lan-op-lp2-container, 
.old-me-op-lp2-container, 
.old-nvvga-op-lp2-container, 
.old-soundblaster-op-lp2-container,
.old-bios-op-lp3-container,
.old-audio-op-lp3-container,
.old-cardreader-op-lp3-container,
.old-chipset-op-lp3-container, 
.old-bluetooth-op-lp3-container, 
.old-intelvga-op-lp3-container,  
.old-wifi-op-lp3-container, 
.old-irst-op-lp3-container, 
.old-lan-op-lp3-container, 
.old-me-op-lp3-container, 
.old-nvvga-op-lp3-container, 
.old-soundblaster-op-lp3-container,

.new-bios-op-lp1-container,
.new-audio-op-lp1-container,
.new-cardreader-op-lp1-container,
.new-chipset-op-lp1-container, 
.new-bluetooth-op-lp1-container, 
.new-intelvga-op-lp1-container,  
.new-wifi-op-lp1-container, 
.new-irst-op-lp1-container, 
.new-lan-op-lp1-container, 
.new-me-op-lp1-container, 
.new-nvvga-op-lp1-container, 
.new-soundblaster-op-lp1-container,
.new-bios-op-lp2-container,
.new-audio-op-lp2-container,
.new-cardreader-op-lp2-container,
.new-chipset-op-lp2-container, 
.new-bluetooth-op-lp2-container, 
.new-intelvga-op-lp2-container,  
.new-wifi-op-lp2-container, 
.new-irst-op-lp2-container, 
.new-lan-op-lp2-container, 
.new-me-op-lp2-container, 
.new-nvvga-op-lp2-container, 
.new-soundblaster-op-lp2-container,
.new-bios-op-lp3-container,
.new-audio-op-lp3-container,
.new-cardreader-op-lp3-container,
.new-chipset-op-lp3-container, 
.new-bluetooth-op-lp3-container, 
.new-intelvga-op-lp3-container,  
.new-wifi-op-lp3-container, 
.new-irst-op-lp3-container, 
.new-lan-op-lp3-container, 
.new-me-op-lp3-container, 
.new-nvvga-op-lp3-container, 
.new-soundblaster-op-lp3-container,

.old-drivers-container {
	display: none;
}




			/* Setting the drivers container invisible when loading */

.op-lp2-drivers-container,
.op-lp3-drivers-container,
.dtw1-drivers-container,
.dtw2-drivers-container,
.dtw3-drivers-container {
	display: none;
}




@media screen and (min-width:1990px) {
	.black-landing { background-position: calc(100% + 50px); }
	.black-landing.home { background-position: calc(0% - 50px); }
	.black-landing.desktop { background-position: calc(50% - 600px); }
	.gray-landing { background-position: calc(0% - 200px); }
	.home .gray-landing { background-position: calc(100% + 50px); }
	.gray-landing.desktop { background-position: calc(50% + 400px); }
	.gray-landing.specific { background-position: calc(100% + 200px); }
	.container { width: 1700px; max-width: 1700px; }
}

@media screen and (min-width:1890px) {
	.col-md-2.gallery { flex: 0 0 16.6% !important; }
}

@media screen and (min-width:2290px) {
	.container { width: 2000px; max-width: 2000px; }
}

@media screen and (max-width:1642px) {
	.white-landing { background-position: calc(100% + 300px); }
	.white-landing.desktop { background-position: calc(0% - 50px); }
}

@media screen and (max-width:1298px) {
	.black-landing { background-position: calc(100% + 605px); }
	.black-landing.home, .black-landing.desktop { background-position: calc(0% - 100px); }
	.gray-landing { background-position: calc(0% - 510px); /* Center the image */ }
	.home .gray-landing { background-position: calc(100% + 400px); }
	.gray-landing.desktop { background-position: calc(100%); }
	.gray-landing.specific { background-position: calc(100% + 600px); }
	.white-landing { background-position: calc(100% + 300px); }
	.white-landing.desktop { background-position: calc(0% - 50px); }
}

@media screen and (max-width:1298px) { .white-landing { background-position: calc(100% + 400px); } }

@media screen and (max-width:1200px) { .white-landing { background-position: calc(100% + 500px); } }

@media screen and (max-width:1070px) {
	.white-landing { background-position: calc(100% + 500px); background-size: auto 850px; height: 850px; }
	.white-landing.desktop { background-position: calc(0% - 65px); }
}

@media screen and (max-width:989px) {
	.logoCont { flex: 0 0 25%; max-width: 25%; }
	.logo { width: 90%; max-width: 90%; }
	
	.black-landing {
  background-position: calc(100% + 400px);
  background-size: auto 600px;
		height: 600px;
}
	.black-landing.home, .black-landing.desktop { background-position: calc(0% - 150px); height: 600px; }
	.black-landing .container.content, .gray-landing .container.content, .white-landing .container.content, .gray-landing.desktop .container.content, .white-landing.desktop .container.content { height: 600px; }
	.black-landing .projectProfile { margin-top: 50px; }
	.black-landing.desktop .projectProfile { margin-top: -20px; }
	
	.gray-landing {
  background-position: calc(0% - 365px);
  background-size: auto 600px;
		height: 600px;
}
	 .home .gray-landing { background-position: calc(100% + 365px); background-size: auto 600px; height: 600px; }
	.gray-landing.desktop { background-position: calc(100%); background-size: auto 600px; height: 600px; }
	.gray-landing.specific { background-position: calc(100% + 365px); }
	.white-landing { background-position: calc(100% + 220px); background-size: auto 600px; height: 600px; }
	.white-landing.desktop { background-position: calc(0% - 65px); background-size: auto 600px; height: 600px; }
	
	h2 { font-size: 1.2em; }
	h3 { font-size: 2em; }
	
	.row.vertical-align { height: 600px !important; }
	.col-md-12.top { height: 600px !important; }
	a.customButton { font-size: 0.6em; }
	.breadies { flex: 0 0 25%; max-width: 25%; display: none; }
	.projectProfile span.projectDesc { font-size: 0.8em; }
}

@media screen and (max-width:960px) {
	span.projectHeader { font-size: 0.7em; }
	.projectProfile span.projectDesc { font-size: 0.8em; }
	.branding.photo .col-12 { margin-bottom: 0.75rem; }
	.branding.photo .col-12 a.a-spacer { margin-top: 0.75rem; }
}

@media screen and (max-width:942px) { }

@media screen and (max-width:989px) { .white-landing { background-position: calc(100% + 300px); } }

@media screen and (max-width:767px) {
	.rowTable { margin-bottom: 1.5em; }
.footer span.wally { width: 25%; }
.footer span.wally img { width: 50%; max-width: 200px; padding-top:2em; }
	
	
	
	/*.bottomButtons { position: absolute; top: 52%; } */
	.bottomButtons h1 { font-size: 1.2em; }
	.homeLogo, .puffer { min-height: auto; }
	
	h1, h2 { padding: 1em 0 0em 0; text-align: center; }
	.homeInfo, .homeInfo.inner { position: relative; width: 100%; padding: 2.5em 0 4em; }
	.homeInfo.inner { padding-bottom: 1.5em; }
	.logo { width: 75%; max-width: 75%; margin: 0 auto; }
	span.smallText { display: block; width: 100%; text-align: center; bottom: 1em; font-weight: 600; }
	span.smallText.web, span.smallText.print, span.smallText.photo, span.smallText.branding { left: auto; right: auto; text-align: center; }
	span.smallText.photo { z-index: 25; }
	.gradient {
		position: absolute;
		bottom:0;
		width:100%;
		height: 200px;
		z-index: 20;
    	background: red; /* For browsers that do not support gradients */
    	background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.35)); /* Standard syntax (must be last) */
	}
	
	span.subHed { text-align: center; padding: 0 2em 1em; }
	
	.sierra .webPort.print, .webPort.print { margin-bottom: 2em !important; }
	.webPort.print img { margin-bottom: 1.5em; }
	
	/* Thank you */

	.thankyou { width: 85%; margin-top: -2.5em; left: 7.5%; }
	p.thanks { text-align: center; line-height: 0.75em; margin-bottom: 0.5em; }
	p.subhed-thanks { text-align: center; }
	
	span.projectHeader { font-size: 1em; }
	.projectProfile span.projectDesc { font-size: 0.9em; }
	
	.placeHolder { display: none; }
	.trick { text-align: center; }
	.trick img { width: 100%; max-width: 100%; }
	
	a.hoverText span.blackbg, a.hoverText.square span.blackbg { width: 98%; }
	
	span.blackbg { display: none; }
	a.hoverText span.bottomHeaders { position: relative; color: #000; opacity: 1; margin: 1em 0 1em; width: 100%; }
	a.hoverText.square span.bottomHeaders { width: 100%; }
	.photoGallery { margin-left: 0; }
	.mobilePadding { padding-right: 0 !important; }
	
.boxorder .row { 
	display: flex;
	flex-direction: row;
}

	.boxorder .row :nth-child(1) { order: 2; }
	.boxorder .row :nth-child(2) { order: 1; }
	.boxorder .row :nth-child(3) { order: 3; }

	.logoCont, .navigation, .home > .container .breadcrumb { flex: 0 0 33.33%; max-width: 33.33%; }
	
.logoCont {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	flex: 0 0 100%;
	max-width: 100%;
	padding: 1.4em 2em;
}
	
	.logo { width: 100px !important; transition: width 0.2s ease; }
	
	.navigation { position: absolute; flex: 0 0 100%; max-width: 100%; left: 0; top: 1.1em; padding-left:0; padding-right:0; }
	
	.row.home { height: 6em; position: relative; }
	
	.vertical-align-nav { align-items: baseline; }
	
	.home > .container .breadcrumb { position: absolute; right: 15px;}
	
	.menu-mobile.mobile { width: 140px; }
	
	.row.home { padding: 2em 0 2em; border-bottom: 1px dotted #666666; }
	.row.home .container { border-bottom: 0; padding-bottom: 0; }
	
	ol.breadcrumb { display: none; }
	
	.col-md-12.top { padding-top: 0 !important; }
	
	.container.content { padding-right: 15px; padding-left: 15px; }
	
	.black-landing, .gray-landing, .home .gray-landing, .gray-landing.desktop, .white-landing, .white-landing.desktop, .black-landing.home, .black-landing.desktop { background-image: none; height: auto; }
	.black-landing .container.content, .gray-landing .container.content, .white-landing .container.content, .black-landing.home .container.content, .black-landing.desktop .container.content, .gray-landing.desktop .container.content, .white-landing.desktop .container.content { height: auto; padding-bottom: 3em; }
	.gray-background { height: auto; }
	.col-md-12.top { height: auto !important; background: none !important; }
	.row.vertical-align { height: auto !important; }
	.mobileImg { display: block; }
	.black-landing img.mobileImg { margin-top: 2em; }
	.black-landing .projectProfile { margin-top: 0; }
	.webPort { z-index: 2; }
	.col-md-12.top { margin-top: 0 !important; }
	.homeLogo, .puffer { background-position: 50% calc(100% - 0px); background-size: 75% auto; }
	.screen { min-height: auto; }
	.bottomButtons { position: relative; bottom: auto; margin-bottom: 2em; }
	.screen { display: block; }
	h1 { font-size: 1em; }
	.bottomButtons h1 { margin-bottom: 0; }
	.bottomButtons a.customButton { margin-top: 4px; }
}

.menu-container {
    width: 100%;
    margin: 0 auto;
}

.menu-mobile {
    display: none;
    padding: 20px;
}

.menu-mobile:after {
    content: "\f0c9";
    font-family: 'FontAwesome';
    font-size: 1.5rem;
    padding: 0;
    float: right;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-25%);
    -ms-transform: translateY(-25%);
    transform: translateY(-25%);
}

.menu-dropdown-icon:before {
    content: "\f0dd";
	font-family: 'FontAwesome';
    display: none;
    cursor: pointer;
    float: right;
    padding: 1.5em 2em;
    color: #666666;
}

.menu > ul {
    margin: 0 auto;
    width: 100%;
    list-style: none;
    padding: 0;
    position: relative;
    /* IF .menu position=relative -> ul = container width, ELSE ul = 100% width */
    box-sizing: border-box;
	display: block;
}

.menu > ul:before,
.menu > ul:after {
    content: "";
    display: table;
}

.menu > ul:after {
    clear: both;
}

.menu > ul > li {
    float: left;
    padding: 0;
    margin: 0;
	background: rgba(20,20,20, 0);
	transition: background 0.2s ease;
}

.menu > ul > li a {
    text-decoration: none;
    padding: 1.5em 1.5em;
    display: block;
	color: #fff;
	font-size: 0.75rem;
	font-family: 'suisse_intlblack';
}

.white .menu > ul > li a { color: #000; }

.menu > ul > li:hover {
    background: rgba(35,35,35, 1);
	color: #222;
}

.white .menu > ul > li:hover { background: rgba(240,240,240, 1); }

a.menu-mobile { color: #fff; font-family: 'suisse_intlblack'; }

.white a.menu-mobile { color: #000; font-family: 'suisse_intlblack'; }

.menu > ul > li > ul {
    display: none;
    width: 100%;
    background: #222;
    padding: 20px;
    position: absolute;
    z-index: 99;
    left: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
}

.white .menu > ul > li > ul { background: #eaeaea; }

.menu > ul > li > ul:before,
.menu > ul > li > ul:after {
    content: "";
    display: table;
}

.menu > ul > li > ul:after {
    clear: both;
}

.menu > ul > li > ul > li {
    margin: 0;
    padding-bottom: 0;
    list-style: none;
    width: 25%;
    background: none;
    float: left;
}

.menu > ul > li > ul > li a {
    color: #777;
    padding: .2em 0;
    width: 95%;
    display: block;
    border-bottom: 1px solid #ccc;
}

.menu > ul > li > ul > li > ul {
    display: block;
    padding: 0;
    margin: 10px 0 0;
    list-style: none;
    box-sizing: border-box;
}

.menu > ul > li > ul > li > ul:before,
.menu > ul > li > ul > li > ul:after {
    content: "";
    display: table;
}

.menu > ul > li > ul > li > ul:after {
    clear: both;
}

.menu > ul > li > ul > li > ul > li {
    float: left;
    width: 100%;
    padding: 10px 0;
    margin: 0;
    font-size: .8em;
}

.menu > ul > li > ul > li > ul > li a {
    border: 0;
}

.menu > ul > li > ul.normal-sub {
    width: 300px;
    left: auto;
    padding: 10px 20px;
}

.menu > ul > li > ul.normal-sub > li {
    width: 100%;
}

.menu > ul > li > ul.normal-sub > li a {
    border: 0;
    padding: 1em 0;
}

.btn-open:after {
	color:#ccc;
	content:"\f0c9";
	font-family: FontAwesome;
	transition-property:all .2s linear 0s;
	-moz-transition:all .2s linear 0s;
	-webkit-transition:all .2s linear 0s;
	-o-transition:all .2s linear 0s;
	font-size: 20px;
	position: relative;
	top: 4px;
}
.btn-open:hover:after {
	color:#34B484;
}
.btn-close:after {
	color:#ccc;
	content:"\f00d";
	font-family: FontAwesome;
	transition-property:all .2s linear 0s;
	-moz-transition:all .2s linear 0s;
	-webkit-transition:all .2s linear 0s;
	-o-transition:all .2s linear 0s;
	position: relative;
	top: 4px;
}
.btn-close:hover:after {
	color: #34B484;
}

#prop-65-image {
	max-width: 500px;
}


/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Mobile style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@media only screen and (max-width: 767px) {
	
    .menu-container {
        width: 100%;
    }
    .menu-mobile {
        display: block;
    }
    .menu-dropdown-icon:before {
        display: block;
    }
    .menu > ul {
        display: none;
		background: rgba(0,0,0, 1.0);
    }
	
	.white .menu > ul { background: rgba(255,255,255, 1); }
	
    .menu > ul > li {
        width: 100%;
        float: none;
        display: block;
		color: #fff;
		border-bottom: 1px dotted #666666;
    }
	
	.menu > ul > li { color: #000; }
	
	.menu > ul > li:hover { border-bottom: 1px dotted #666666; }
    .menu > ul > li a {
        padding: 1.5em;
        width: 100%;
        display: block;
		color: #fff;
    }
    .menu > ul > li > ul {
        position: relative;
    }
    .menu > ul > li > ul.normal-sub {
        width: 100%;
    }
    .menu > ul > li > ul > li {
        float: none;
        width: 100%;
        margin-top: 20px;
    }
    .menu > ul > li > ul > li:first-child {
        margin: 0;
    }
    .menu > ul > li > ul > li > ul {
        position: relative;
    }
    .menu > ul > li > ul > li > ul > li {
        float: none;
    }
    .menu .show-on-mobile {
        display: block;
		position: relative;
		top: 0;
    }
	
	.menu > ul > li a { font-size: 1rem; }
	
	.navSize { flex: 0 0 100%; max-width: 100%; position: absolute; background-color: rgba(0,0,0, 1.0); }
	
	.fullMobile_float { position: absolute; width: 100%; max-width: 100%; margin-top: 1em; background: #000; }
}

@media screen and (max-width:612px) {
	.support-container {
		grid-template-columns: 1fr;
	}

	.drivers-container {
		margin-left: 0;
	}
}

/*@media screen and (max-width:514px) {
	.bottomButtons { top: 46%; }

_::-webkit-full-page-media, _:future, :root .bottomButtons {

  top: 50%;

}
}

/*@media screen and (max-width:428px) {
	.bottomButtons { top: 44%; }
	_::-webkit-full-page-media, _:future, :root .bottomButtons {

  top: 51%;

}
} */

@media screen and (max-width:416px) {
	.menu-mobile.mobile { width: 115px; font-size: 14px; margin-top: -9px; }
	.btn-open:after { font-size: 16px; top: 5px; }
	.btn-close:after { font-size: 16px; top: 5px; }
	.logo { width: 75px !important; tranistion: width 0.2s ease; }
	.row.home { height: 4.5em; }
	.logoCont { padding: 1.05em 2em; }
}

/* @media screen and (max-width:340px) {
	.bottomButtons { top: 42%; }

_::-webkit-full-page-media, _:future, :root .bottomButtons {
  top: 48%;
}
} */

/*** Text Animation ***/

.animatable {
  
  /* initially hide animatable objects */
  visibility: hidden;
  
  /* initially pause animatable objects their animations */
  -webkit-animation-play-state: paused;   
  -moz-animation-play-state: paused;     
  -ms-animation-play-state: paused;
  -o-animation-play-state: paused;   
  animation-play-state: paused; 
}

@media screen and (max-width:767px) { .white-landing .animatable {
	visibility: visible !important;
} }

/* show objects being animated */
.animated {
  visibility: visible;
  
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  
  -webkit-animation-duration: 1.5s;
  -moz-animation-duration: 1.5s;
  -ms-animation-duration: 1.5s;
  -o-animation-duration: 1.5s;
  animation-duration: 1.5s;

  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  -ms-animation-play-state: running;
  -o-animation-play-state: running;
  animation-play-state: running;
}

/* CSS Animations (extracted from http://glifo.uiparade.com/) */
@-webkit-keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-20px);
	}	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

@-moz-keyframes fadeInDown {
	0% {
		opacity: 0;
		-moz-transform: translateY(-20px);
	}

	100% {
		opacity: 1;
		-moz-transform: translateY(0);
	}
}

@-o-keyframes fadeInDown {
	0% {
		opacity: 0;
		-o-transform: translateY(-20px);
	}

	100% {
		opacity: 1;
		-o-transform: translateY(0);
	}
}

@keyframes fadeInDown {
	0% {
		opacity: 0;
		transform: translateY(-20px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}



@-webkit-keyframes fadeIn {
	0% {
		opacity: 0;
	}
	20% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-moz-keyframes fadeIn {
	0% {
		opacity: 0;
	}
	20% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-o-keyframes fadeIn {
	0% {
		opacity: 0;
	}
	20% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	60% {
		opacity: 0;
	}
	20% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@-webkit-keyframes bounceInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-2000px);
	}
	60% {
		-webkit-transform: translateX(20px);
	}

	80% {
		-webkit-transform: translateX(-5px);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
	}
}

@-moz-keyframes bounceInLeft {
	0% {
		opacity: 0;
		-moz-transform: translateX(-2000px);
	}

	60% {
		-moz-transform: translateX(20px);
	}

	80% {
		-moz-transform: translateX(-5px);
	}

	100% {
		opacity: 1;
		-moz-transform: translateX(0);
	}
}

@-o-keyframes bounceInLeft {
	0% {
		opacity: 0;
		-o-transform: translateX(-2000px);
	}

	60% {
		opacity: 1;
		-o-transform: translateX(20px);
	}

	80% {
		-o-transform: translateX(-5px);
	}

	100% {
		opacity: 1;
		-o-transform: translateX(0);
	}
}

@keyframes bounceInLeft {
	0% {
		opacity: 0;
		transform: translateX(-2000px);
	}

	60% {
		transform: translateX(20px);
	}

	80% {
		transform: translateX(-5px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}
@-webkit-keyframes bounceInRight {
	0% {
		opacity: 0;
		-webkit-transform: translateX(2000px);
	}

	60% {
		-webkit-transform: translateX(-20px);
	}

	80% {
		-webkit-transform: translateX(5px);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
	}
}

@-moz-keyframes bounceInRight {
	0% {
		opacity: 0;
		-moz-transform: translateX(2000px);
	}

	60% {
		-moz-transform: translateX(-20px);
	}

	80% {
		-moz-transform: translateX(5px);
	}

	100% {
		opacity: 1;
		-moz-transform: translateX(0);
	}
}

@-o-keyframes bounceInRight {
	0% {
		opacity: 0;
		-o-transform: translateX(2000px);
	}

	60% {
		-o-transform: translateX(-20px);
	}

	80% {
		-o-transform: translateX(5px);
	}

	100% {
		opacity: 1;
		-o-transform: translateX(0);
	}
}

@keyframes bounceInRight {
	0% {
		opacity: 0;
		transform: translateX(2000px);
	}

	60% {
		transform: translateX(-20px);
	}

	80% {
		transform: translateX(5px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}
@-webkit-keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translateY(20px);
	}	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

@-moz-keyframes fadeInUp {
	0% {
		opacity: 0;
		-moz-transform: translateY(20px);
	}

	100% {
		opacity: 1;
		-moz-transform: translateY(0);
	}
}

@-o-keyframes fadeInUp {
	0% {
		opacity: 0;
		-o-transform: translateY(20px);
	}

	100% {
		opacity: 1;
		-o-transform: translateY(0);
	}
}

@keyframes fadeInUp {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
@-webkit-keyframes bounceIn {
	0% {
		opacity: 0;
		-webkit-transform: scale(.3);
	}
	50% {
		-webkit-transform: scale(1.05);
	}

	70% {
		-webkit-transform: scale(.9);
	}

	100% {
		opacity: 1;
		-webkit-transform: scale(1);
	}
}

@-moz-keyframes bounceIn {
	0% {
		opacity: 0;
		-moz-transform: scale(.3);
	}

	50% {
		-moz-transform: scale(1.05);
	}

	70% {
		-moz-transform: scale(.9);
	}

	100% {
		opacity: 1;
		-moz-transform: scale(1);
	}
}

@-o-keyframes bounceIn {
	0% {
		opacity: 0;
		-o-transform: scale(.3);
	}

	50% {
		-o-transform: scale(1.05);
	}

	70% {
		-o-transform: scale(.9);
	}

	100% {
		opacity: 1;
		-o-transform: scale(1);
	}
}

@keyframes bounceIn {
	0% {
		opacity: 0;
		transform: scale(.3);
	}

	50% {
		transform: scale(1.05);
	}

	70% {
		transform: scale(.9);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}
@-webkit-keyframes moveUp {
	0% {
		opacity: 1;
		-webkit-transform: translateY(40px);
	}	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

@-moz-keyframes moveUp {
	0% {
		opacity: 1;
		-moz-transform: translateY(40px);
	}

	100% {
		opacity: 1;
		-moz-transform: translateY(0);
	}
}

@-o-keyframes moveUp {
	0% {
		opacity: 1;
		-o-transform: translateY(40px);
	}

	100% {
		opacity: 1;
		-o-transform: translateY(0);
	}
}

@keyframes moveUp {
	0% {
		opacity: 1;
		transform: translateY(40px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@-webkit-keyframes fadeBgColor {
	0%{
		background:none;
	}
  70%{
		background:none;
	}
	100%{
		background:#464646;
	}
}
@-o-keyframes fadeBgColor {
	0%{
		background:none;
	}
  70%{
		background:none;
	}
	100%{
		background:#464646;
	}
}
@keyframes fadeBgColor {
	0%{
		background:none;
	}
  70%{
		background:none;
	}
	100%{
		background:#464646;
	}
}

.animated.animationDelay{
	animation-delay:.4s;
	-webkit-animation-delay:.4s;
}
.animated.animationDelayMed{
	animation-delay:1.2s;
	-webkit-animation-delay:1.2s;
}
.animated.animationDelayLong{
	animation-delay:1.6s;
	-webkit-animation-delay:1.6s;
}
.animated.fadeBgColor {
	-webkit-animation-name: fadeBgColor;
	-moz-animation-name: fadeBgColor;
	-o-animation-name: fadeBgColor;
	animation-name: fadeBgColor;
}
.animated.bounceIn {
	-webkit-animation-name: bounceIn;
	-moz-animation-name: bounceIn;
	-o-animation-name: bounceIn;
	animation-name: bounceIn;
}
.animated.bounceInRight {
	-webkit-animation-name: bounceInRight;
	-moz-animation-name: bounceInRight;
	-o-animation-name: bounceInRight;
	animation-name: bounceInRight;
}
.animated.bounceInLeft {
	-webkit-animation-name: bounceInLeft;
	-moz-animation-name: bounceInLeft;
	-o-animation-name: bounceInLeft;
	animation-name: bounceInLeft;
}
.animated.fadeIn {
	-webkit-animation-name: fadeIn;
	-moz-animation-name: fadeIn;
	-o-animation-name: fadeIn;
	animation-name: fadeIn;
}
.animated.fadeInDown {
	-webkit-animation-name: fadeInDown;
	-moz-animation-name: fadeInDown;
	-o-animation-name: fadeInDown;
	animation-name: fadeInDown;
}
.animated.fadeInUp {
	-webkit-animation-name: fadeInUp;
	-moz-animation-name: fadeInUp;
	-o-animation-name: fadeInUp;
	animation-name: fadeInUp;
}
.animated.moveUp {
	-webkit-animation-name: moveUp;
	-moz-animation-name: moveUp;
	-o-animation-name: moveUp;
	animation-name: moveUp;
}