﻿/* GLOBAL STYLES 

orange = #ff801a PREV: #f93
light blue = #18dfff (text)
dark blue = #3c4652
other dark blue = #01c0ff

slate blue = #669 (bg)
dark slate grey = #366 (bg)
dark slate grey, var.2 = #455870

*/

@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5){
	html,
	body {
		width:100%;
		overflow-x:hidden;
	}
}

html, 
body {
	overflow-x:hidden !important;
	width:100% !important;
	margin: 0 !important
	padding: 0 !important;
}

body,
body.old-mobile {
	
	background-color: #333 !important;
	font-size: 62.5%; /* font-size 1em = 10px on default browser settings */
}

.wrapper {
	background-color: #fff;
}

.wrapper ul { list-style: none; }

.wrapper .content a,
.wrapper .content a:visited {
	color: #01c0ff !important;
}

/*==============  EU COOKIE AND IE9  =======================*/
.ref-msg {
  background-color: #e8f5df;
  background-color: #daedcd;
  background-image: -moz-linear-gradient(top, #e8f5df, #c5e0b3);
  background-image: -ms-linear-gradient(top, #e8f5df, #c5e0b3);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e8f5df), to(#c5e0b3));
  background-image: -webkit-linear-gradient(top, #e8f5df, #c5e0b3);
  background-image: -o-linear-gradient(top, #e8f5df, #c5e0b3);
  background-image: linear-gradient(top, #e8f5df, #c5e0b3);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e8f5df', endColorstr='#c5e0b3', GradientType=0);
  padding: 10px 0;
  border-bottom: 1px solid #95aa86;  
}

.ref-msg .copy {
  line-height: 16px;
  text-align: center;
  margin: 0;
}	

.close-icon {
  display: block;
  width: 16px;
  height: 16px;
  overflow: hidden;
  text-indent: -1000px;
  background: url('/Style%20Library/Images/GSI/Icons/close.png') no-repeat center center;
}
/*==============  EOF EU COOKIE AND IE9 =======================*/

/*==============  CTA =======================*/

.wrapper .button.blue,
.content .button.orange,
.wrapper .layout-m-form .button.orange {
	display: inline-block;
	color: #fff !important;
	font-size: 1.33em !important;
	font-weight: 400 !important;
	padding: .15em 1.25em !important; 	/* Had to use important because of navi button */
	border-radius: 5px;
	min-width: 200px;
	/*
	height: 30px;
	max-height: 30px;
	*/
	min-height: 30px;
	line-height: 30px;
}

.wrapper .content .cta a,
.wrapper .layout-m-form .cta a {
	color: #fff !important;
}
.wrapper a.button.blue:hover {
	/* color: #01c0ff !important; */
	text-decoration: none;
}

.wrapper a.button.blue:link,
.wrapper a.button.blue:active,
.wrapper a.button.blue:visited {
	background-color: #0072bc;
}

.wrapper a.button.blue:hover {
	background-color: #01C0ff;
}

.content a.button.orange,
.wrapper .layout-m-form a.button.orange {
	background-color: #ff801a;
}

.content a.button.orange:hover,
.wrapper .layout-m-form a.button.orange:hover {
	background-color: #f26522;
	text-decoration: none;
}

.wrapper .visible-480 {
	display: none;
	/* margin-top: 3em !important; HT! */
}
/*==============  EOF CTA =======================*/
/*==============  Typography =======================*/
.wrapper .content h2,
.wrapper .layout-m-form h2 {
	 font-size: 3.5em; 
	 line-height: 48px;
}
.wrapper .content h2.jumbo {
	font-size: 4em; 
	line-height: 58px;
}
.wrapper .content h3 {
	 font-size: 3em;
	 line-height: 42px; 
}
.wrapper .content h4 {
	 font-size: 2.5em; 
	 line-height: 36px;
}
.wrapper .content h5 {
	 font-size: 2em;
	 line-height: 30px; 
}
.wrapper .content h6 {
	 font-size: 1.5em; 
	 line-height: 36px;
}
.wrapper .content p,
.wrapper .content a {
	font-size: 1.5em;
	line-height: 24px;
}
.wrapper .content small {
	font-size: 1.167em;
	line-height: 18px;
}

.wrapper .content h2,
.wrapper .content h3,
.wrapper .content h4,
.wrapper .content h5,
.wrapper .content h6,
.wrapper .content p,
.wrapper .content a,
.wrapper .content small {
	font-weight: 300;
}

/* 'hide' GOTHAM from old content layouts :P */
.wrapper.new-content h2,
.wrapper.new-content h3,
.wrapper.new-content h4,
.wrapper.new-content h5,
.wrapper.new-content h6,
.wrapper.new-content p,
.wrapper.new-content small,
.wrapper.new-content a,
.wrapper.new-content input,
.wrapper.new-content span,
.wrapper.new-content footer,
.wrapper.new-content table,
.wrapper.new-content table td { 
	font-family: 'Gotham SSm 4r', 'Gotham SSm A', 'Gotham SSm B', "Helvetica Neue", Helvetica, Arial, sans-serif; 
	/* font-weight: 300; font-style: normal; */
}

/* these are OLD-CONTENT GOTHAM exceptions */
.wrapper.old-content nav#header .linkage li a,
.wrapper.old-content #burger-menu li a,
.wrapper.old-content #burger-menu p { 
	font-family: 'Gotham SSm 4r', 'Gotham SSm A', 'Gotham SSm B', "Helvetica Neue", Helvetica, Arial, sans-serif; 
}

/*==============  END Typography =======================*/

/* ideally, there should be no OLD content elements amongst the NEW stuff */
.wrapper.new-content #gsi-content {
	display: none;
}

.wrapper .content {
	position: relative;
	background-color: #fff;
	-webkit-transition: -webkit-transform .15s ease;
	-moz-transition: -moz-transform .15s ease;
	-o-transition: -o-transform .15s ease;
	-ms-transition: -o-transform .15s ease; /* ms */
	transition: transform .15s ease;
}

.wrapper .content .row {
	position: relative;
	overflow: hidden;
}
/*.wrapper.new-content #home,
.wrapper.new-content #news,
.wrapper.new-content #partners,
.wrapper.new-content #company,
.wrapper.new-content #solutions,
.wrapper.new-content #products,
.wrapper.new-content #enfuse {
	margin-top: 71px;
}*/
.wrapper.new-content {
	margin-top: 71px;
}

/* SHOW-RIGHT STYLES */

.wrapper.new-content.show-right nav#header,
.wrapper.new-content.show-right .content,
.wrapper.new-content.show-right footer {
	-webkit-transform: translate3d(-284px ,0,0);
	-ms-transform: translate3d(-284px ,0,0);
	transform: translate3d(-284px ,0,0);
	right: 100px \9;
}

.wrapper.new-content.show-right #right-drawer{
	-webkit-transform: translate3d(-284px ,0,0);
	-ms-transform: translate3d(-284px ,0,0);
	transform: translate3d(-284px ,0,0);
	right: -16px \9;
}

.wrapper.new-content.show-right .burger,
.wrapper.new-content.show-right nav#header .cta {
	display: none;
}

.wrapper .cta a:hover {
	/* color: #01c0ff !important; */
	text-decoration: none !important;
}


/* 
LAYOUTS
:: core styles based on HOMEv42 ::
*/

/* Layout A - White space with wording 
   Layout B - Video or center over background
   Layout C - Text Left, Graphic Right
   Layout D - Header with 3 centered columns
   Layout E - 
   Layout F - Header with 6 icons center across
   Layout G - Media Asset, 4 across, thin border
   Layout H-I - Set of tile Icons
   Layout J - 
   Layout K - Image Left, Text Right
   Layout M - Form
*/
.wrapper .content .layout-a {
	background-color: #fff;
	margin-top: 74px;
	height: 200px;
}

.wrapper .content .layout-a h2 {
	color: #666;
	text-align: center;
	text-transform: capitalize;
	margin: 0;
	line-height: 200px;
}

/* */

.wrapper .content .layout-b,
.wrapper .content .layout-l  {
	background-size: cover !important;		
	text-align: center;	
}
.wrapper .content .layout-c,
.wrapper .content .layout-k {
	background-size: cover !important;	
}
.wrapper .content .layout-b.video video {
	width: 100%;
	height: auto;
}

.wrapper .content .layout-b.video .copy {
	position: absolute;
	top: 30%;
}

.wrapper .content .layout-b h2,
.wrapper .content .layout-l h2 {	
	margin-bottom: .5em;
	color: #ffffff;
}

.wrapper .content .layout-b p,
.wrapper .content .layout-l p {
	margin-bottom: .5em;
}

.wrapper .content .layout-d h2,
.wrapper .content .layout-d .cta,
.wrapper .content .layout-j {
	text-align: center;
}
.wrapper .content .layout-d .copy,
.wrapper .content .layout-f,
.wrapper .content .layout-e {
	margin: 0 auto;
}

/* */
/*  */
/*.wrapper .content .layout-d {
	color: #fff;
	margin-bottom: 5em;
}



.wrapper .content .layout-d .copy {
	margin: 0 auto 1em auto;
}

.wrapper .content .layout-d h3 {	
	margin-bottom: .75em;
}

.wrapper .content .layout-d h4 {	
	font-weight: 300;	
}

.wrapper .content .layout-d p {	
	margin-bottom: 2em;
}

 {
	text-align: center;
}*/
/* */
/*.wrapper .content .layout-e {	
	margin: 0 auto 5em auto;
}

.wrapper .content .layout-e .copy {
	padding: 6em 0 0 6em;
}*/

/*  */
/*.wrapper .content .layout-f {
	margin: 0 auto 7em auto;
	padding-top: 2em;
}

.wrapper .content .layout-f h3 {	
	margin-bottom: 2em;
}*/

/* */
.wrapper .content .layout-g {
	background-color: #3c4652;
	padding: 3em 0;
}

.wrapper .content .layout-g img {
	width: 100%;
	height: auto;
}

.wrapper .content .layout-g a,
.wrapper .content .layout-g a:link,
.wrapper .content .layout-g a:visited,
.wrapper .content .layout-g a:hover {
	text-decoration: none;
}

/* */
.wrapper .content .layout-h-i {
	background-color: #fff;
	color: #666;
	text-align: center;
	padding: 4em 0 2em 0;
}
.wrapper .content .layout-h-i .copy {
	margin: 0 auto 2em auto;
}
.wrapper .content .layout-h-i p {
	margin-bottom: 2em;	
 }


/* */
/*.wrapper .content .layout-j {
	text-align: center;
	padding: 4em 0 6em 0;
}

.wrapper .content .layout-j p {
	margin-bottom: 2em; 
}


.wrapper .content .layout-j h4 {
	font-weight: 300;	
}*/

/*  */
/*.wrapper .content .layout-k {
	background-size: cover !important;		
/*	padding: 7em 0; /* SUSPECT 
}*/

.wrapper .content .layout-k .graphic {
	/*padding-left: 7em;*/
}

.wrapper .content .layout-k .copy {
	text-align: right;
/*	padding-right: 7em;
	margin-top: 2em;*/
}

.wrapper .content .layout-k p {
/*	margin-bottom: 2em; */
}

/* Set of tile Icons with text under it */
.wrapper .content .layout-l {
	/*background-size: cover !important;		
	text-align: center;*/
	/*padding: 4em 0;*/
}
/*.wrapper .content .layout-l h2 {
	 margin-bottom: .5em; 
}

.wrapper .content .layout-l p {
	margin-bottom: 1em
}*/

.wrapper .content .layout-l img {
	/*width: auto;*/
}

/* FORM STYLES */
.wrapper .layout-m-form {
	background: url('../../Images/gwir/global/blue-gradient.png') repeat-x 0 0;	
	padding: 4em 0;	
}

.wrapper .layout-m-form h2 {
	/*width: 60%;*/
	text-align: center;
	margin: 0 auto 1em auto;
	font-weight: 300;
	color: #666666;
}

.wrapper .layout-m-form .clearfix {
	max-width: 800px;
	margin: 0 auto;
}
.wrapper .layout-m-form .form-group {

}
.wrapper .layout-m-form label {
	/*display: block !important;*/
	color: #999;
	font-weight: 300;
	margin-right: 20px;
	/*line-height: 1.5em;*/
	text-transform: uppercase;
}
.wrapper .layout-m-form .optinLabelText {
	display: none;
}
.wrapper .layout-m-form input,
.wrapper .layout-m-form select {
	width: 100%;
}
.wrapper .layout-m-form input,
.wrapper .layout-m-form select,
.wrapper.new-content .got-hacked-container input,
.wrapper.new-content .got-hacked-container select {
	border-radius: .25em;
	padding: .25em !important;
	border-top: 2px solid #ccc;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #ccc;
}
.wrapper.new-content .got-hacked-container input,
.wrapper.new-content .got-hacked-container select {
	width: 100%;
	color: #000000;
}
.wrapper.new-content .got-hacked-container label {
	margin-right: 20px;
}

.wrapper .layout-m-form .error-msg[style*="inline"],
.wrapper.new-content .got-hacked-container .error-msg[style*="inline"] {	
	clear: both;
}

.wrapper .layout-m-form .hideableOptinLabel input {
	width: 13px;
	margin-right: 10px;
}
.wrapper .layout-m-form .form-group.col-sm-12 {
	margin: 2em auto;
}
.wrapper.new-content .got-hacked-container .cta {
	margin-top: 2em !important;
}
.wrapper .layout-m-form .optInMsg {
	margin-top: 17px !important;
	text-align: justify;
}
.wrapper .layout-m-form .optInMsg,
.wrapper .layout-m-form .optInMsg a {
	font-size: 1em !important;
}
.wrapper .layout-m-form form-group:last-child label {
	display: none;
}

/* thank you message */
.gwir-thank-you,
.got-hacked-thank-you {
	text-align: center;
}
.gwir-thank-you {
	margin: 5em auto;
}
.got-hacked-thank-you {
	margin: 2em auto;
}
.gwir-thank-you p,
.got-hacked-thank-you p{
	font-size: 2.5em; 
	line-height: 36px;
	color: #666666;
}


/*
.wrapper .layout-m-form .clearfix { 
	margin-bottom: 1em;
}

.wrapper .layout-m-form .checkbox {
	margin: 0 !important;
	padding: 2em 0 0 1em;
}

*/

.wrapper .layout-m-form .cta {
	text-align: center;
}

.wrapper.new-content .got-hacked-container,
.wrapper.new-content .got-hacked-thank-you { 
	background-color: rgba(51, 51, 51, 0.95);
	width: 31em; /* supposedly prevents 'creep' :P */
	color: #fff;
	padding: 30px 2em;
	height: auto;
	top: 120px !important;
}
.wrapper.new-content .got-hacked-container a.tably,
.wrapper.new-content .got-hacked-thank-you a.tably { 
	background: url('../../Images/gwir/global/btn-tab-got-hacked.png') repeat-x 0 0;
	right:	-32px;
	width: 32px;
	height: 166px;
}
.wrapper.new-content .got-hacked-thank-you {
	height: 166px !important;
}
.wrapper.new-content .got-hacked-container h4,
.wrapper.new-content .got-hacked-thank-you h4 {
	font-size: 1.5em;
	line-height: 24px;
	text-align: left;
}
.wrapper.new-content .got-hacked-container p,
.wrapper.new-content .got-hacked-thank-you p {
	font-size: 1.167em;
	line-height: 18px;
	color: #ffffff;
	text-align: left;
}
.wrapper.new-content .got-hacked-container .cta { 
	margin-top: 1em;
}

.wrapper.new-content .got-hacked-container h4 a:link,
.wrapper.new-content .got-hacked-container h4 a:active,
.wrapper.new-content .got-hacked-container h4 a:hover,
.wrapper.new-content .got-hacked-container h4 a:visited,
.wrapper.new-content .got-hacked-thank-you h4 a:link,
.wrapper.new-content .got-hacked-thank-you h4 a:active,
.wrapper.new-content .got-hacked-thank-you h4 a:hover,
.wrapper.new-content .got-hacked-thank-you h4 a:visited  { 
	color: #18dfff !important;
	text-decoration: none;
}

.wrapper.new-content .got-hacked-container label { 
	font-weight: 300; 
	font-style: normal;
	font-size: 1.167em;
	line-height: 18px;
}

.wrapper.old-content .got-hacked-container { 
	display: none;
}

/* MORE OLD FIXES */

#s4-workspace > #s4-bodyContainer #gsi-content .gsi-product-bar li {
  margin-left: 4em !important;
  padding: 15px 0 0 0 !important;
}

#s4-workspace > #s4-bodyContainer #gsi-content .gsi-product-bar li a {
  width: 214px !important;
}

/* Reset Bootstrap for OLD CONTENT */
#gsi-content .gsi-container * {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}
#gsi-content .gsi-container *:before,
#gsi-content .gsi-container *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

#gsi-content .breadcrumb {
	background-color: transparent;
}
#gsi-content .gsi-container .label {
	color: inherit !important;
}

#eu_cookie p {
	margin-bottom: 0 !important;
}

/* GLOBAL RESPONSIVE: MEDIA QUERIES */

@media (max-width: 1200px) {


}

@media (max-width: 1024px) {

	.wrapper .burger span {
		display: none;
	}

	/*==============  Typography =======================*/
	.wrapper .content h2 {
		font-size: 2.75em !important;
		line-height: 1.25em !important;
	}
	.wrapper .content h2.jumbo {
		font-size: 3.25em !important;
		line-height: 1.25em !important;
	}
	.wrapper .content h3 {
		font-size: 2.75em;
		line-height: 1em; 
	}
	.wrapper .content h4 {
		 font-size: 2.5em; 
		 line-height: 36px;
	}
	.wrapper .content h5 {
		 font-size: 1.75em;
		 line-height: 30px; 
	}
	.wrapper .content h6 {
		 font-size: 1.5em; 
		 line-height: 36px;
	}
	.wrapper .content p,
	.wrapper .content a {
		font-size: 1.45em;
		line-height: 24px;
	}
	.wrapper .content small {
		font-size: 1.167em;
		line-height: 18px;
	}
	.wrapper .content .layout-a {		
		height: 150px;
		padding-top: 6%;
	}

	.wrapper .content .video video {
		display: block !important;
	}

}

@media (max-width: 992px) {
	.wrapper .linkage {
		display: none;
	}

	.wrapper nav#header #sub-menu {
		display: none !important;
	}
}

@media (max-width: 768px) {

	body.old-mobile {
		background-color: #fff !important;
	}

	/*==============  Typography =======================*/
	.wrapper .content h2 {
		font-size: 3.25em !important;
		line-height: 1.25em !important;
	}
	.wrapper .content h2.jumbo {
		font-size: 3.25em !important;
		line-height: 1.25em !important;
	}
	.wrapper .content h3 {
		font-size: 2.75em;
		line-height: 1em; 
	}
	.wrapper .content h4 {
		 font-size: 2.5em; 
		 line-height: 36px;
	}
	.wrapper .content h5 {
		 font-size: 2em;
		 line-height: 30px; 
	}
	.wrapper .content h6 {
		 font-size: 1.5em; 
		 line-height: 36px;
	}
	.wrapper .content p,
	.wrapper .content a {
		font-size: 1.45em;
		line-height: 24px;
	}
	.wrapper .content small {
		font-size: 1.167em;
		line-height: 18px;
	}


	.wrapper .content .layout-a {		
		height: 150px;
	}
	.wrapper .content {
		overflow-x: hidden;
	}

	.wrapper .content .cta {
		text-align: center;
	}
	
	#home.content .layout-b .copy {
		position: static;
		margin-top: 6em;
	}

		
	.wrapper .content .video video {
		display: none !important;
	}

	.wrapper .content .layout-b .copy {
		position: static;
	}

	.wrapper .content .layout-b .copy p {
		/*font-size: 1.25em;*/
		margin-bottom: 2em;
	}

	#home.content .layout-c {
		background-repeat: no-repeat;
		background-size: 100% 100%;
		height: auto !important;
		padding: 4em 0;
	}
	
	.wrapper .content .layout-c .copy {
		width: 90%;
		margin: 3em auto 0 auto;
		padding: 0 !important;
	}

	.wrapper .content .layout-c .copy p {
		margin-bottom: 2em;
	}

	.wrapper .content .layout-c .graphic {
		width: 100%;
		text-align: center;
		margin-top: 3em !important;
	}

	.wrapper .content .layout-c .graphic img {
		width: 80%;
	}

	.wrapper .content .layout-d .copy {
		  width: 90% !important;
		  margin: 0 auto 2em auto !important;
	}

	.wrapper .content .layout-d {
		margin-bottom: 2em !important;
	}

	.wrapper .content .layout-d h4 {
		line-height: inherit !important;
	}


	.wrapper .content .layout-e {
		/*width: 90%;*/
		margin: 0 auto 4em auto !important;
	}

	.wrapper .content .layout-e .copy {
		padding: 0 0 0 1em !important; /* SUSPECT */
	}

	.wrapper .content .layout-e h2 {
		   /*font-size: 2.25em; */
	}

	.wrapper .content .layout-e .graphic img {
		width: 100%;
		height: auto;
		margin: 2em 0 0 0;
	}

	.wrapper .content .layout-f {
		/*width: 85% !important;*/
		margin: 0 auto 3em auto !important;
	}

	.wrapper .content .layout-f .graphic {
		text-align: center;
		margin-bottom: 3em;
	}

	.wrapper .content .layout-g {
		padding: 3em 0 0 0 !important;
	}


	.wrapper .content .layout-g .inner img {
		margin-bottom: 2em;
	}

	.wrapper .content .layout-g .inner a {
		display: block;
		margin-bottom: 3em;
	}

	.wrapper .content .layout-h-i {
		padding: 2em 0 0 0 !important;
	}


	.wrapper .content .layout-h-i .copy {
		margin: 0 auto 2em auto !important;
	}

	.wrapper .content .layout-h-i img {
		border: 2px solid #ccc;
	}

	.wrapper .content .layout-h-i .cta {
		  margin-top: 2em !important;
	}

	.wrapper .content .layout-j {
		padding: 2em 0 !important;
	}

	.wrapper .content .layout-j .inner {
		/*width: 90%;*/
	}

	.wrapper .content .layout-j .col-sm-6 {
		margin-bottom: 2em;
	}

	.wrapper .content .layout-j .inner-sub {
		margin: 4em 0 0 0 !important;
	}

	.wrapper .content .layout-j .inner .inner-sub .col-sm-6 h4,
	.wrapper .content .layout-j .inner .inner-sub .col-sm-6 p {
		text-align: center !important;
	}	

	.wrapper .content .layout-j .col-sm-6:nth-child(odd) {
		border-right: none !important;
	}

	.wrapper .content .layout-k {
		position: relative;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding: 3em 0 !important;
	}

	.wrapper .content .layout-k .copy {
		/*width: 90%;*/
		padding: 0 0 0 2em !important; /* SUSPECT */
	}

	.wrapper .content .layout-k p {
		margin-bottom: 2em;
	}

	.wrapper .content .layout-k .graphic {
		width: 75% !important;
		margin: 0 auto !important;
		padding-left: 0 !important;
	}

	.wrapper .content .layout-k .graphic img {
		width: 100%;
		height: auto;
	}

	#home.content .layout-l {
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.wrapper .content .layout-l,
	.wrapper .layout-m-form {
		padding: 2em 0 !important;
	}

	.wrapper .layout-m-form form {
		width: 80% !important;
	}

		
		
	body #s4-bodyContainer {
		  min-width: 100% !important;
	}
	.wrapper .got-hacked-container { 
		display: none;
	}
	.wrapper .visible-480 {
		display: block;
	}
	
	#eu_cookie .gsi-container {
		width: 100% !important;
	}

	#eu_cookie p {
		width: 88% !important;
		margin: 0 auto !important;
	}

}