html {  scroll-behavior: smooth;	}

:root {
	--color-blue: #0066bb;
	--color-navy: #222666;
	--color-accent: #d3903d;
}

* {
    margin: 0px;
    padding: 0px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    font-family: inherit;
	text-decoration:none; 
}


body {	margin:0; font-family: inter, sans-serif;}
h1, h2, h3, h4 { font-family: "Saira", sans-serif;	} 


a {color:var(--color-blue);}


/*makes it so that header text cannot be highlighted/selected*/
.preheader *, .header * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/*~~~~~~~~~~~~~~~~~~~~~Preheader styles start~~~~~~~~~~~~~~~~~~~~~*/
.preheader {
    max-height: 30px;				
	overflow:hidden;
	position:relative;
	z-index:4;
	background-color:#4a4b61;
}		

.preheader .phlogos { display: contents; }

.preheader .innerpreheader {
    margin: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
}

.preheader .phlogosinner {
    display: flex;
    justify-content: center;
	margin-right:10px;
}

.preheader a {
	padding: 0 15px 0	15px;
    margin: 0;
    max-height: 32px;
	color:#bdc0c9;
	font-family:play;
	font-weight:bold;
	font-size:14px;
	transition: background-color 100ms linear;
	line-height: 11px;
}
.preheader span.phtriangle:after {
    content: ".";
    font-size: 0em;
    border-left: 7px solid #bdc0c9;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    vertical-align: bottom;
    margin-left: 2px;
}
@media only screen and (max-width: 515px) {
.preheader.activeph span.phtriangle:after {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid #bdc0c9;
    border-bottom: none;
    vertical-align: baseline;
}	
}

.preheader  .innerpreheader>a:first-of-type {background-color:transparent!important;}  /*stops 'our brands' from changing colour on hover*/

.preheader a.italogo{background-color:#ffffff; pointer-events: none;}  /*ita logo white bg & no click*/

.preheader a  img {
    margin: 6px 0;
    width: auto;
    height: 17px;
	transition: filter 100ms linear;
	vertical-align:middle;
	filter: invert(81%) sepia(4%) saturate(395%) hue-rotate(187deg) brightness(96%) contrast(89%);
} 

/* preheader hover style*/
.preheader  a:hover {background-color:#ffffff;}
.preheader  a:hover img { filter: invert(56%) sepia(4%) saturate(1987%) hue-rotate(182deg) brightness(82%) contrast(84%);}
.preheader .italogo img {filter: invert(56%) sepia(4%) saturate(1987%) hue-rotate(182deg) brightness(82%) contrast(84%);}

/*adjust sizing on sg logo and ita logo*/
.preheader a.sglogo {padding-bottom:0px}
.preheader .sglogo img {height:18px;}
.preheader .italogo img {height:15px; padding-top:3px;}



/* Preheader remove ITA Logo when window isn't wide enough */
@media only screen and (max-width: 605px) {
.preheader .italogo {	display:none;	}
}/* end preheader max-width 595px */


	/* Preheader Mobile Styles */
@media only screen and (max-width: 515px) {
.preheader .innerpreheader {
    justify-content: flex-start;
	flex-wrap: wrap;
}

.preheader { max-height:unset; }

.preheader .phlogos {
    display: none;
	width: 100%;
}

.preheader .italogo { display:none; }

.preheader .innerpreheader> a:first-of-type {
    min-height: 30px;
    line-height: 30px;
	width: 100%;
}

.phlogosinner>a { padding: 0px 20px; }


}/* end preheader max-width 510px */

@media only screen and (max-width: 390px) {
	.phlogosinner>a { padding: 0px 10px; }
}/* end preheader max-width 390px */

@media only screen and (max-width: 333px) {
.preheader .innerpreheader> a:first-of-type { margin: auto; }
		
.phlogosinner {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}
	
.phlogosinner>a { padding: 0px 10px; }
}  /* end preheader max-width 333px */

@media only screen and (min-width: 516px) {
.phlogos { display: contents!important; }
} /* end preheader min-width 515px */

/*~~~~~~~~~~~~~~~~~~~~~end preheader styles~~~~~~~~~~~~~~~~~~~~~*/






/********** NORMAL HEADER MENU **********/
.wpb-content-wrapper .slider_full { z-index: 0; } /* makes it so that the slider on the homepage can't be above the menu, hopefully this does not mess up anything else! */

.header {
	font-family: "Saira", sans-serif;
	background:  #fff;
    background-image: linear-gradient(180deg, #fff 20px, #f1f1f1 66px);
	position:relative;
	z-index:4;
}

.header:after {
    content: "";
    display: block;
    height: 2px;
    background-image: linear-gradient(135deg, var(--color-blue), var(--color-navy));
}

.header .inheader {
	display: flex;
	align-items: center;
	height:76px;
}

.headerlogo {
	align-self:center;
	z-index:2; 
	margin-left: 25px;
    padding-right: 12px;} 

.headerlogo a img {
	padding-top: 1px;		
    height: 64px;
    max-width: 100%;
	vertical-align: middle;
}

 .headericons {
	display:flex;
	align-items:center;
	z-index: 99999999;
	margin-left:auto;
	margin-right: 15px;
	align-self: end;
}

.headericons div i {
	cursor: pointer;
	padding: 10px 11px 15px;
	color: var(--color-navy);
	font-size: 20px;
	transition: color .2s;
}
.headericons div i:hover { color: var(--color-blue); }
.headericons .mobilemenubutton i { font-size: 1.8em; }


 /* styles for the portal menu section */
 .logincontain {
	z-index: 9999999999999;
	position: absolute;
	height: auto;
	right: 0;
	display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    background: #f1f1f1; 
    border-bottom-left-radius: 12px;
    border-bottom: solid var(--color-navy) 2px;
    border-left: solid var(--color-navy) 2px; 
    padding: 0px 15px 13px;
    margin-top: 0px;
}
 .logincontain { display:none; } /*don't show until clicked*/


.logincontain a { width: 100%; display: block; }

.logincontain a p {
	color: #ffffff;
    font-family:saira, sans-serif;
	font-weight: 450;
    padding:3px 25px;
    text-align:center;
    background: var(--color-blue);
    border-radius:25px;
    margin-top:10px;
	transition: background .1s;
	border: solid 2px var(--color-blue);
}
.logincontain a p:hover { background:var(--color-navy); }



/*menu styles*/
	
.menunav li { display: block; }	/* stops menu links from having list bullets */
.menu>li>ul>li>a { display:none!important;} /*hides the 'wrapper' title*/

.menunav .menu li a { 	
	cursor:pointer;
	color:var(--color-navy);
	font-family: 'Saira', sans-serif;
	font-weight: 550;
    display: block;
    text-align: center;
    font-size: 1em;
    line-height: 1.25em; /*necessary for smaller page size word wrap, messes up submenu margin-top if edited*/
    padding: 25px 20px 21px;
	transition: 0.2s padding, .2s font-size, background .2s, color .2s;
	transition: all .2s;
}  
.menunav .menu li a:hover { color: var(--color-blue); background-color:#0066bb22;} /* blue on hover*/
 .menunav>div>.menu>li.activemenu>a { color: var(--color-blue); } /* blue text on activemenu*/


/*entire sub-menu block that gets toggled*/
.header .menunav .menu>li>ul.sub-menu { display:none; } /*initially hide the sub-menu until clicked*/
.menunav .menu>li>ul.sub-menu {
	background-color: #fafafa;
	margin-top: 7px;
	border-bottom: ridge var(--color-blue) 2px;
	padding: 10px;
    position: absolute; right: 0px; left: 0px; /*stretch to 100% width*/ 		}
@media only screen and (max-width: 649px) {.header .menunav .menu>li>.sub-menu { margin-top:0px;} } /* this adjusts the mobile sub-menu to not have margin/space above it*/

 /*container of the real sub menu, inside the ul^ that gets expanded with display block*/
.menu>li>ul>li>ul {
	display:flex;
	margin: 0 10vw;
    justify-content: space-evenly;
    column-gap: 1%;
	text-align:center;
}
.menunav .menu>li>ul>li>ul>li a { padding: 10px 40px; } /*sub menu link padding adjustment + width fits text*/



/*---------- desktop layout styles - hide mobile menu button and flex on the menu container------- */
@media only screen and (min-width: 650px) {	
		.mobilemenubutton { display:none; }
		.menunav>div .menu {
			display: flex!important; /*this can only be flex on desktop because the slide toggle needs to be block on mobile*/
			justify-content: flex-end;
			align-items: center;
		}
}

/*make the top menu terms have less padding at a smaller width so it doesn't run into the icons before converting to mobile header*/ 
@media only screen and (max-width: 860px) { .menunav .menu li a { font-size: .95em; padding-left: 10px; padding-right: 10px;}		}
/*make it so that the top menu words wrap when screen gets too small*/
@media only screen and (max-width: 750px) { .menunav .menu>li {width: min-content;}
	.menunav .menu>li>a { padding-left: 13px;padding-right: 13px;}		} 

			

/* mobile styles*/		
@media only screen and (max-width: 649px) {									
.header .inheader {align-items: end;} /*necessary for mobile menu dropdown alignment*/
.fullmenuoff { display:none; } /*initally sets the menu to be not displayed on mobile until menu button is pressed*/
.menunav { background: #f1f1f1;    position: absolute;	left:0;		right:0; 	 z-index: 1;		}
.menunav .menu {	border-bottom: ridge var(--color-blue) 2px;	box-shadow: 0px 1px 2px #22266666;}
/*v undo the min-content from the previous adjustments that wrapped text, needed to make width 100%*/
		.menunav .menu>li { width: auto; } 
/*v adjusts sizing of the top menu items in the dropped down version + add top border between menu elements*/
		.menunav .menu>li>a {	border-top: 1px solid var(--color-blue);  padding: 22px 25px;  line-height:.8em; } 
/*v border line between contact and it's submenu*/
		.menunav .menu>li:last-of-type>ul {	border-top: 1px solid var(--color-blue)!important; }
/*v sub menu links adjustment + width fits text*/
		.menu>li>ul>li>ul { justify-content: center; margin:auto; } 
		.menunav .menu>li>ul>li>ul>li a { padding: 10px 30px; width:max-content; } 
}  /* end max-width 649px */


/* adjustments to remove the portal icon on a VERY small screen & let the logo get smaller 	 */
@media only screen and (max-width: 375px) {		
 .portalbutton {	display:none; }
.headericons { margin-right: 5px;}
.headerlogo a img {	min-width:unset;	margin-left:5px;	margin-right:10px;  }
} /*end tiny screen adjustments */



/*********************END MOBILE SIZE ******************************/









/* Main Layout Styles */
.layout {   min-height: 100vh;	background-color: white;}

 .content {
	max-width: 1500px;
    margin: auto;
    padding: 0px 15px;
	min-height:500px;
}

/*below list styles make it so that lists are still indented, but the marker does not go outside of where the text is located*/
.layout ul { list-style-type: initial;   padding: 0px 15px; }
.layout ul li {	margin-left: 16px;    margin-right: 16px;    list-style-position:outside; }
.layout ul li ul {list-style: circle;} /*to make sure nested lists get the o circle type style*/


/*gravity forms style edits, probably adding more later?*/
.gform_wrapper, .vc_message_box { font-family: sans-serif; }































/* Footer Styles */
.footer {
    font-family: 'Saira', sans-serif;    
	font-size:.9em;
	font-weight:450; 
	text-align:center;
	color:white;
	background-color: #0066bb;
    background-image: linear-gradient(0deg, #22266699, #22266622);
	padding:15px;
}
.footer ul li {	display:inline-block;	}