/* 
    Document   : main
    Created on : 11/06/2009, 10:52:07 AM
    Author     : cdobbs
    Description:
    Main stylesheet with default layout and styles
*/
body,html { height: 100%; min-height: 100vh }

body                                    {font-size:18px;font-family: 'Poppins', sans-serif; margin: 0px; position: relative; background-color: #fff; }
input, select, textarea 		{ font-family:Arial,sans-serif; }

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

	body                                    {font-size:15px;}
}

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

	body                                    {font-size:14px;}
}

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

	body                                    {font-size:13px;}
}



/****************** LINKS ****************************/
a                                       {text-decoration:none;color:inherit}
a:hover                                 {color:#000}
a.button				{ line-height: 1.8em; font-size: 1em; height: 1.8em; width: auto; display: inline-block; padding: 0px 4px 0px 4px; color: #FFFFFF; background-color: #000; border-radius: 5px }
/****************** HEADERS **************************/
h1                                      {margin:0px;padding:0px;color:#000 }
h2                                      {margin:0px;padding:0px}
h3                                      {margin:0px;padding:0px}
h4                                      {margin:0px;padding:0px}

/****************** MAIN TEMPLATE ********************/
#siteContainer                          {width:100%; z-index: 1;  position: absolute; top: 0px; overflow: hidden; /*padding-bottom: 80px;*/ min-height: calc( 100% - 80px );  }
#siteContainer.shifted                  { top: 25px; min-height: calc( 100% - 105px ) }
#siteContainerNested			{ width: 100%; /*margin-top: 10px;*/ margin-left: auto; margin-right: auto; background-color: #FFF; border-radius: 0px; }

#contentContainer                       {margin:0px 0px; z-index: 1; /*max-width: 1920px;*/ margin: 0px auto }
/*#background-1				{position: absolute; width: 100%; min-height: calc( 100% - 50px );  background-repeat: no-repeat; background-color: #555; z-index: 0; top: 0px; left: 0px }*/

.adminControlBar { position:fixed; z-index: 1000 }
#siteContainer #siteContainerNested     { margin-top: 54px; padding-bottom: 60px; }
#siteContainer.shifted #siteContainerNested     {  }

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

	#siteContainer.shifted #siteContainerNested, #siteContainer #siteContainerNested      { margin-top: 16% }
}

#boxWrappers, #boxWrappersBottom				{ min-height: 230px; max-width: 1660px; width: calc( 100% - 60px ); margin: 40px auto  }
#boxWrappers h1 { padding-left: 2%; font-size: 3.6em }
#boxWrappers h2 { padding-left: 2%; font-size: 1.5em }
:is(#boxWrappers,#boxWrappersBottom) .feature-heading { margin-left: 34px; font-size: 57px; font-weight: 400 }

:is(#boxWrappers,#boxWrappersBottom) .textBox			{ float: left;  width: 33.3%; box-sizing: border-box;  min-height: 210px ; padding: 2%; position: relative }
:is(#boxWrappers,#boxWrappersBottom) .textBox .textBoxText	{ height: auto; width: 100%; /*overflow: hidden;*/ margin: 0px 0px 35px 0px; font-style: italic; font-size: 0.9em }

:is(#boxWrappers,#boxWrappersBottom) .textBox .textBoxText img  { border: none; margin: 4px 8px 6px 0px; width: 100%; display: block }

:is(#boxWrappers,#boxWrappersBottom) .textBox h2 { display: block; font-size: 1.75em; font-weight: 600; margin: 40px 0px; font-style: normal  }

:is(#boxWrappers,#boxWrappersBottom) .textBox div.button { position: absolute; bottom: 10px; left: 3.3%; box-sizing: border-box;  }
:is(#boxWrappers,#boxWrappersBottom) .textBox div.button a { display: block; }

:is(#boxWrappers,#boxWrappersBottom) .read-more a { color: #000; font-size: 1.2em; font-weight: 600 }

:is(#boxWrappers,#boxWrappersBottom):after { content: " "; display: block; clear: both }

.youtube .textBoxText>a { display: block; position: relative; overflow: hidden; margin: 4px 8px 6px 0px; }
.youtube .textBoxText>a:after { display: block; content: " "; padding-top: 56.25% }
.youtube .textBoxText>a>img { position: absolute; top: 50%; transform: translateY(-50%); margin: 0px 0px !important }
.youtube .textBoxText>a .length { position: absolute; right: 5px; bottom: 5px; width: 44px; height: 1.5em; background-color: rgba( 255,255,255,0.4); font-size: 0.9em; text-align: center }
.youtube .textBoxText p { margin: 0.5em 0px 0.2em }
#boxWrappers .youtube .textBoxText { margin-bottom: 5px }

.youtube .textBoxText strong { display: block }

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

	:is(#boxWrappers,#boxWrappersBottom) .textBox { width: 50%; }
}

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

	#boxWrappers, #boxWrappersBottom { margin: 20px auto; width: calc( 100% - 40px ); }

	:is(#boxWrappers,#boxWrappersBottom) .textBox			{ float: left; width: 100%;  min-height: 80px ;  margin-left: 5px; padding: 10px; height: auto; margin-bottom: 5px }
	:is(#boxWrappers,#boxWrappersBottom) .textBox .textBoxText	{ width: 100%; overflow: hidden; margin: 0px 0px 35px 0px; height: auto }

	:is(#boxWrappers,#boxWrappersBottom) .textBox div.button { left: 1.1%; }

}

#bigBox { max-width: 1660px; width: calc( 100% - 60px ); margin: 40px auto }
#bigBox .row:after { content: " "; display: block; clear: both }
#bigBox .row>div { width: 50%; }
#bigBox .row .image img { width: 100%; height: auto; display: block }
#bigBox .row .content { box-sizing: border-box; padding: 5% }
#bigBox .row .content p { font-style: italic }
#bigBox .row:nth-child(odd) .image { float: left }
#bigBox .row:nth-child(odd) .content { float: right }
#bigBox .row:nth-child(even) .image { float: right }
#bigBox .row:nth-child(even) .content { float: left }


@media screen and (max-width: 900px) {
	
	#bigBox .row>div { width: 100% }
	#bigBox .row .image { display: none }
	
	#bigBox .row .content { padding: 0px 0px  }
	#bigBox .row .content:before { display: block; content: " "; height: 1px; background: #000; width: 60px; margin: 40px auto }
	#bigBox .row:first-child .content:before { margin-top: 0px }

}

#header					{ padding: 0px; background-color: #000;  border-radius: 0px; position: fixed;  z-index: 300; height: auto; width: 100%  }
#header .header_force			{ padding-top: 54px  }
#header .logo                           { position: absolute; top: 4px; left:  0;  z-index: 1; color: #FFFFFF; max-width: calc( 100% - 60px ) }
#header .logo a				{ display: block; width: 100%; height: 100% }
#header .logo img                       { border-width:0px; max-width: 450px; width: auto; height: 30%}
#header .logo                           {margin: 8px 0px 0px 10px;}
#header  div.logoText			{ position: absolute; top: 10px; left:  210px; color: #FFF; font-size: 2em}

#banner                         {  background-color:rgba(191,191,191,0.8); border-radius: 0px; z-index: 1000; min-height: 36px; margin-top: 0px; text-align: center }
#banner span.phone		{ font-size: 1.7em; margin-right: 10px; color: #ffffff }

#footer                                 {margin-top:0px;padding:0px;background-color: #000;/*height:64px;*/ width: 100%; z-index: 1; /*position: absolute; bottom: 0px;*/ border-top: 1px #ccc solid}
#footerContent				{ /*max-width: 900px;*/ width: calc( 100% - 20px ); margin-top: 0px; margin-left: 10px; margin-right: 10px; position: relative }

#topNav                                 {min-height:2em; z-index: 50; width: calc( 100% - 240px ); display: block; background-color: #000; position: absolute; bottom: 7px; left: 240px }
#topNav #masterNav                              {padding:0px;margin:0px; z-index: 50; float: left; width: 50% }
#topNav #rightNav                               { float: right; width: 50% } 
#topNav li, #contactNav li                              {list-style:none;display: inline-block; height: 100%; padding: 0px 0.5em 0px 0.5em; /*position: relative;*/ width: auto }
#topNav li a, #contactNav li a                            {display:block; font-size:18px; line-height: 2.1em;font-weight:normal;color:#FFF;}
#topNav li a:hover                      {color:#ccc}
/*
#masterNav>li.has-dropdown				{ margin-right: 15px }
#masterNav>li.has-dropdown:after 			{ content: "\FE40"; color: #FFF; display: block; position: absolute; right: -5px; top: 35%; font-size: 0.8em }
*/
#topNav ul.sub-menu li a:hover		{color: #CCC; display: block}

#topNav .sf-menu ul a > span > strong   { font-size: 1em }
#contactNav 				{ position: absolute; right: 0px; top: 0px; font-size: 9px; }


#contactNav li:not(:first-child):after { content: " "; display: block; width: 1px; height: 80%; position: absolute; top: 10%; background-color: #AAA; left: 0px }

#header #search { position: absolute; right: 20px; top: 26px; z-index: 100 }

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

	#header #search { margin-right: 20px }
}

#header #search input { height: 1.8em; width: 180px; border: none; border-radius: 4px; box-shadow: none; padding-left: 24px; background-color: #777; color: #FFF; padding-left: 24px; }
#header #search form>span { position: absolute; left: 4px; top: 6px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
#header #search form>span:after { content: "\26B2"; color: #CCC; font-size: 1.2em; }

/*contact details in header*/
#header #search #contact-details { position: absolute; top: -5px; left: 0; transform: translateX(-100%); color: #FFF; min-width: 250px; min-height: 48px; font-size: 0.9em }
#header #search #contact-details a { color: #FFF; }
#header #search #contact-details .phone { position: absolute; top: 0; }
#header #search #contact-details .email { position: absolute; bottom: 0; }
#header #search #contact-details .suburb { position: absolute; top: 12px; right: 8px }
#header #search #contact-details div i { display: inline-block; min-width: 22px }
#header #search #contact-details div.suburb i { min-width: 18px; color: #f76 }

#header #contact-details-smallscreen { position: absolute; font-size: 1.1em; width: 480px; max-width: 100%; height: 1.8em; right: 0px; bottom: 0px; color: #FFF; z-index: 2 }
#header #contact-details-smallscreen a { color: #FFF }
#header #contact-details-smallscreen i {  min-width: 22px; }
#header #contact-details-smallscreen div.suburb i { color: #f76; min-width: 16px; }
#header #contact-details-smallscreen div { display: inline-block; margin-right: 6px }

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

	#header #contact-details-smallscreen { bottom: -1.2em; background-color: #000; width: 100%; }
	#header #contact-details-smallscreen div:first-child { margin-left: 12px }

}

@media screen and (min-width: 1200px) {

	#header #contact-details-smallscreen { display: none }
}

#portfolio_master_container { min-height: 600px; }

.modalPopup #portfolio_master_container { min-height: 0px; }

/**/

/*
@media screen and (max-width: 1500px) and ( min-width: 1201px ) {

	#header #search { top: 80px; right: 0px; padding: 20px; background-color: #000; border-radius: 0px 0px 5px 5px; margin-right: 0px }

	#header #search span { left: 24px; top: 26px; }
}
*/



#mobNav .searchIcon { transform: rotate(45deg); display: inline-block }


#mobNav { display: none; position:absolute; top: 0px; right: 5px; margin-right: 5px }
#mobNav a { font-size: 2.5em; color: #FFF; text-decoration: none; cursor: pointer }
#mobNav ul { position: absolute; font-size: 1em; width: 220px; background-color: #000; right: -240px; top: 56px; margin-right: 0px; transition: margin 0.5s }
#mobNav ul>li>a { font-size: 16px; display: block; width: 100%; heigth: 100% }
#mobNav ul>li { display: block; width: 100%; height: 2.5em; line-height: 2.5em; border-bottom: 1px solid #FFF; border-left: 1px solid #fff; boz-sizing: border-box; padding: 4px 4px 4px 8px; white-space: nowrap }
#mobNav ul>li:first-child { border-top: 1px solid #FFF; }

#mobNav.open ul { display: block; margin-right: 220px; z-index: 1000 }

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

	#mobNav { display: block } 
	#contactNav, #topNav { display: none }
	#header #search { right: 22px; top: 18px; opacity: 0; transition: opacity 0.5s; }
	#header #search.open { display: block; opacity: 1 }
	#header .logo img { max-width: 100%; /*height: auto*/ }
	
}

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

	#header #search { top: 100%; right: 0px; padding: 20px; background-color: #000; border-radius: 0px 0px 5px 5px; margin-right: 0px }

	#header #search span { left: 24px; top: 26px; }
}

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

	#header .header_force	 { padding-top: 16%  }
	#mobNav ul { top: 46px; }
}

#footerNav                                 {margin-top:10px; padding-bottom: 20px;/*height:31px; float: left*/ }
#footerNav:after { display: block; clear: both; content: " " }
#footerNav ul                              { padding:0px;margin:0px 5% 5px 5px; float: left}
#footerNav ul:last-child                   { margin-right: 5px }
#footerNav li                              {list-style:none;/*float:left;*/}
#footerNav li:first-child                  { margin-bottom: 10px }
#footerNav li:not(:first-child)            { font-size: 0.7em; font-weight: 200 }
#footerContent a, #footerNav a.hold                            {padding:4px 0.2em;font-size:1.1em;color:#fff;}
#footerContent a:hover    {color:#ddd}

#footerContent	 #copyright			{ /*float: right;*/position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); color: white; margin: 10px 20px 0px 0px; white-space: nowrap; }


#footerContent	 #copyright a:hover	{ color:#474747 }
#footerContent	 #copyright a { font-size: 1em }

#footerContent #socialmedia { position: absolute; bottom: 25px; right: 25px; }
#footerContent #socialmedia li { float: left; list-style: none; font-size: 35px; border: 1px solid #FFF; border-radius: 50%; width: 51px; height: 51px; text-align: center; margin-left: 25px; }
#footerContent #socialmedia li a { line-height: 100% }

#footerContact { color: #FFF; text-align: center; padding-bottom: 50px; }
#footerContact a { font-size: 1em }

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

	#footerContact { text-align: left; padding-left: 10px; box-sizing: border-box }
}



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


	#footerContent	 #copyright { left: 10px; transform: none }
	#footerContent #socialmedia { bottom: 30px; }
	#footerContent #socialmedia li { width: 35px; height: 35px; font-size: 35px; font-size: 19px }
	#footerContent #socialmedia li a { line-height: normal; position: relative; top: 2px; }
	#footerContent	 #copyright { font-size: 0.8em }
}

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

	#footerContact { padding-bottom: 90px }
	#footerContent #socialmedia { padding-left: 10px }
	#footerContent #socialmedia li { margin-left: 15px; }

}


#sideNav                                {float:left;width:143px;border:1px solid #723983}
#sideNav ul                             {padding:0px;margin:0px}
#sideNav li                             {list-style:none}
#sideNav li a                           {padding:5px;width:133px}

.index-list>div { margin-bottom: 15px }
.index-list .left { float: left; width: 36%; min-width: 150px  }
.index-list .left img { max-width: 300px; height: auto; width: 100%; min-width: 150px }
.index-list .right { float: right; width: 64%;  padding: 0px 0px 0px 15px; box-sizing: border-box; margin-top: 0px }
.index-list .right.header {  max-width: calc( 100% - 150px ); }
.index-list .right h3 { font-size: 20px; line-height: 20px; margin-bottom: 14px; color: #000 }
.index-list .right h3>a { color: #000 }
.index-list .right span { cursor: pointer }

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

	.index-list .right.text { width: 100%; padding: 5px 0px }

}

/************************** FORMS *********************************/
.label                                  {float:left;width:260px;margin-top:3px}
.input                                  {float:left;margin-top:3px}
.buttons                                {margin:10px 0px 0px 0px}
.field                                  {margin-top:3px}

input[type=text],
input[type=password]                    {width:160px}

/*                                  {width:164px}
input.required,
select.required,
textarea.required                       {color:#b11111}
*/

div.error				{color:#b11111}

input[type="text"], textarea, select	{ border: 1px solid #CCCCCC;  border-radius: 0px;  box-shadow: 5px 5px 5px #888; background-color: #FFF }
input[type="text"], select		{ width: 260px; height: 25px; font-size: 1em }

input.error,
input.validation-failed,
select.validation-failed,
textarea.validation-failed             {border:2px solid #b11111;background-color:#f1bbbb;color:#000}

input.validation-passed,
select.validation-passed,
textarea.validation-passed              {border:2px solid #0F0;}

input.disabled                          {color:#AAA}
.090909091
.errorMessage                           {border:1px solid #b11111;padding:10px;background-color:#f1bbbb;font-size:0.9em;margin-bottom:10px}
.validation-advice                      {color:#b11111}

input[type="submit"], button.submit  { transition: background-color 0.5s ease, color 0.5s ease; background-color: #fff; height: 25px; text-align: center;  color: #000; border: none; border-radius: 16px; font-size: 1.1em; display: inline; box-sizing: border-box; padding: 3px 15px; border-radius: 16px; height: 32px; line-height: 22px; border:2px solid #000 }
input[type="submit"]:hover, button.submit:hover {  background-color: #000; color: #FFF }


input[type="submit"]:disabled { opacity: 0.05 }



#contactLeft				{float: left; min-width: 320px; max-width: 800px; width: 44.5%; padding-top: 15px  }
#contactRight				{float: left; max-width: 500px; width: 55.5%; padding-top: 15px  }

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

	#contactRight				{ width: 40%; width: calc( 100% - 320px ) }
}

@media screen and (max-width: 600px) {
	#contactRight				{ width: 100% }
}


#profileForm input[type=text], textarea { width: 90%; max-width: 500px }

#contactRight iframe			{ border: none; border-radius: 0px;  box-shadow: 5px 5px 5px #888;}

.google-maps {
        position: relative;
        padding-bottom: 75%; // This is the aspect ratio
        height: 0;
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }

/***ZOHO CONTAINER FORM****/

#portfolio_container.zohocontainer .content { max-width: 880px; margin: 0px auto; padding-top: 30px; }


/******************** POPUPS *************************************/
.popupWindow                            {border:1px solid #723983}
.popupWindow h2                         {border-bottom:1px solid #723983;font-size:1.1em;padding:5px 10px;background-color:#b293b9}
.popupWindow .container                 {padding:10px;background-color:#f3eff5}
.popupWindow .buttons                   {margin:10px 0px 0px 0px;text-align:center}

.content                                {max-width: 1660px; width: calc( 100% - 60px ); margin: 40px auto; padding: 0px 2%; box-sizing: border-box;}
.content.index-only			{ padding-top: 20px }

div.clear                               {margin:0px;padding:0px;height:0px;font-size:0px;overflow:hidden;clear:both}

div                                     {border-collapse:collapse}
img                                     {border-width:0}

/******************************* MISC ***********************************/
.imgButton                              {cursor:pointer}
div.button, input.button		{ transition: background-color 0.5s ease, color 0.5s ease; background-color: #fff; height: 25px; text-align: center;  color: #000; border: none; border-radius: 16px; font-size: 1.1em; display: inline; box-sizing: border-box; padding: 3px 15px; border-radius: 16px; height: 32px; line-height: 22px; border:2px solid #000 }
/*input[type=submit].button		{ padding: 0px 10px 5px 10px }*/
div.button a				{ font-size: 1em; color: inherit; background-color: inherit; text-decoration: none; }

div.button:hover, input.button:hover  {  background-color: #000; color: #FFF }


/******************************* SPONSORS ***********************************/
#sponsorlist { padding: 0px; margin-left: -10px; margin-top: 40px }
#sponsorlist>li { list-style: none; float: left; display: block; margin-bottom: 15px }
#sponsorlist>li { margin-left: 10px }
#sponsorlist>li img { width: 100%; height: auto }

div.margin1960>h2 { padding: 40px 0 20px; }
#sponsorlist:after { display: block; clear: both; content: " " }

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

	.margin1960 { max-width: 1660px; width: calc( 100% - 60px ); margin: 40px auto; padding: 0px 2%; box-sizing: border-box; }
	.margin1960-home {  margin: 20px 20px 0px 20px }


	#sponsorlist>li { width: calc( 16.66% - 10px ) }
}

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


	#sponsorlist>li { width: calc( 25% - 10px ) }
}

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


	#sponsorlist>li { width: calc( 33.33% - 10px ) }
}

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


	#sponsorlist>li { width: calc( 50% - 10px ) }
}

/****************MODAL***************/

body>.modalPopup { position: fixed; top: 50%; left: 50%; transform: translate( -50%, -50% ); background-color: #FFF; border: 2px solid #AAA; border-radius: 5px; z-index: 9999; display: none  }
body>.modalPopup .modalText { padding: 20px 30px }
body>.modalPopup .modalClose { position: absolute; right: 2px; top: 0px; cursor: pointer }
body>.modalPopup .modalClose:after { content: "\2716" }
body>.modalPopup .modalActions {  padding: 10px; text-align: center }
body>.modalPopup .modalActions button { transition: background-color 0.5s ease, color 0.5s ease; background-color: #fff; height: 25px; text-align: center; color: #000; border: none; border-radius: 16px; font-size: 1.1em; display: inline; box-sizing: border-box; padding: 3px 15px; border-radius: 16px; height: 32px; line-height: 22px; border: 2px solid #000; }
body>.modalPopup .modalActions button:hover { color: #FFF; background-color: #000 }
body>.modalPopup .modalActions button:not(:first-child) { margin-left: 10px }


/*****INDEXES**************/

.content .index-list { display: flex; flex-wrap: wrap; margin: 0px }

.content .index-list div.image-wrap { /*border: 1px #CCC dashed;*/ box-sizing: border-box; position: relative }
.content .index-list div.image-wrap:after { content: " "; display: block; padding-top: 50% }
.content .index-list div.image-wrap img { position: absolute; top: 50%; left: 50%; transform: translate( -50%, -50% ); transition: transform linear 20ms }
.content .index-list div.image-wrap img:hover { transform: translate( -50%, -50% ) scale(1.05) }
.content .index-list > div .text { padding-top: 5px }
.content .index-list > div img { max-width: 100% ; height: auto; display: block }
.content .index-list > div h3 { padding: 0px 0px 10px; font-size: 1.8em }

@media screen and (min-width: 1200px) {

	.content .index-list > div { width: calc( 33% - 20px ); margin: 30px 30px 30px 0px }
	.content .index-list > div:nth-child( 3n ) { margin-right: 0px }

}

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

	.content .index-list > div { width: calc( 50% - 15px ); margin: 30px 30px 30px 0px }
	.content .index-list > div:nth-child( 2n ) { margin-right: 0px }

}

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

	.content .index-list > div { width: 100%; margin: 30px 0px 30px 0px; margin-right: 0px !important }

}


.content.home h1, .clientWrapper h1 { text-align: center; background: #000; line-height: 1.3em; height: 1.3em; color: #FFF; width: 100vw; margin-left: calc( 50% - 50vw); }
.content.home hr, .clientWrapper hr { width: 30%; background: linear-gradient(to right,#fff, #000,#fff); height: 4px; border: none; visibility: hidden }



.iframe-container{
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; 
  height: 0;
}
.iframe-container iframe{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}  

/*****PRODUCT**************/

#heroImage { width: 100%; margin: 0px auto }
#heroImage img, #heroImage video { width: 100%; max-height: 480px; object-fit: cover; display: block }

#portfolio_container.GFABproduct { width: 100%;  margin: 0px auto }

#portfolio_container.GFABproduct #slideContainer { width: 100%; max-width: 1200px; margin: 0px auto }

#portfolio_container.GFABproduct .lof-main-wapper { max-height: 300px }
#portfolio_container.GFABproduct #lofslidecontent45.expand .lof-main-wapper { max-height: 680px }

#portfolio_container.GFABproduct #lofslidecontent45 { margin-top: 20px; float: left; width:100%;max-width: 500px  }
#portfolio_container.GFABproduct #lofslidecontent45.expand { max-width: 100% }

#portfolio_container.GFABproduct .lof-navigator { position: absolute; left: 0px; bottom: 0px; width: 100%; height: 100px; transition: left 200ms ease }
#portfolio_container.GFABproduct .lof-navigator>li { float: left; margin-right: 33px; padding: 0px 0px; width: auto; height: auto;border: none; display: block; padding-top: 20px; }
#portfolio_container.GFABproduct #lofslidecontent45.expand .lof-navigator>li { margin-right: 35px; }

#portfolio_container.GFABproduct .lof-navigator>li:last-child { margin-right: 0px }
#portfolio_container.GFABproduct .lof-navigator>li.current { background: none;  }
#portfolio_container.GFABproduct .lof-navigator>li.current img { border: 1px solid #000; }
#slideContainer { position: relative }
#portfolio_container.GFABproduct #slideContainer .strip-arrows { position: absolute; width: 100%; max-width: 500px; top: 380px; }
#portfolio_container.GFABproduct #slideContainer .strip-arrows .strip-arrow-left { position: absolute; left: -45px; bottom: 0px; cursor: pointer }
#portfolio_container.GFABproduct #slideContainer .strip-arrows .strip-arrow-right { position: absolute; right: -45px; bottom: 0px; cursor: pointer }
#portfolio_container.GFABproduct #slideContainer .strip-arrows .inactive { opacity: 0.1; pointer-events: none }

#siteContainer #productDetails { width: calc( 100% - 500px); max-width: 700px; float: left; margin-top: 20px; box-sizing: border-box; padding: 0px 20px 0px 60px }

#portfolio_container.GFABproduct .lof-main-wapper-forcer { padding-top: calc( 60% + 100px ) }
#portfolio_container.GFABproduct #lofslidecontent45.expand .lof-main-wapper-forcer { padding-top: 780px }
#portfolio_container.GFABproduct #slideContainer #lofslidecontent45.expand+.strip-arrows { position: absolute; width: 100%; max-width: 100%; top: 760px; bottom: initial }
#portfolio_container.GFABproduct #slideContainer #lofslidecontent45.expand~#productDetails { padding-left: 0px }

#portfolio_container.GFABproduct .lof-main-item img { object-fit: cover }

#portfolio_master_container.GFABproduct #lofslidecontent45 .expand { cursor: pointer; position: absolute; top: 0px; right: 1px; background: rgba(0,0,0,0.2); width: 37px; height: 37px; text-align: center; border: none; border-radius: 4px; font-size: 1.5em}

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

	/*#portfolio_container.GFABproduct #slideContainer .strip-arrows { display: none }*/
	
	#portfolio_container.GFABproduct #slideContainer .strip-arrows .strip-arrow-left {  left: 5px; background: rgba( 0,0,0,0.4 ); color: #FFF  }
	#portfolio_container.GFABproduct #slideContainer .strip-arrows .strip-arrow-right { right: 5px; background: rgba( 0,0,0,0.4 ); color: #FFF  }
	
	#portfolio_container.GFABproduct #lofslidecontent45.expand+.strip-arrows .strip-arrow-left { background: none; color: #000; left: -20px; }
	#portfolio_container.GFABproduct #lofslidecontent45.expand+.strip-arrows .strip-arrow-right { background: none; color: #000; right: -5px; }
	
}

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

	#portfolio_container.GFABproduct #lofslidecontent45.expand .lof-navigator { display: none }
	#portfolio_container.GFABproduct #lofslidecontent45.expand+.strip-arrows { display: none }
	#portfolio_container.GFABproduct #lofslidecontent45.expand .lof-main-wapper-forcer { padding-top: 680px }
	
}

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

	#siteContainer #productDetails { padding: 0px 10px }
	#portfolio_container.GFABproduct #slideContainer { padding: 0px 10px; box-sizing: border-box; }
	#siteContainer #productDetails { width: 100%; }
	
	
	/*replicate all .expand rules as default*/
	/*

	#portfolio_container.GFABproduct #lofslidecontent45.lof-slidecontent .lof-main-wapper { max-height: 100% }
	#portfolio_container.GFABproduct #lofslidecontent45.lof-slidecontent { max-width: 100% }
	#portfolio_container.GFABproduct #lofslidecontent45.lof-slidecontent .lof-navigator>li { margin-right: 35px; }
	#portfolio_container.GFABproduct #slideContainer #lofslidecontent45.lof-slidecontent+.strip-arrows { position: absolute; width: 100%; max-width: 100%; top: 760px; bottom: initial }
	#portfolio_container.GFABproduct #slideContainer #lofslidecontent45.lof-slidecontent~#productDetails { padding-left: 0px }
	#portfolio_container.GFABproduct #lofslidecontent45.lof-slidecontent+.strip-arrows .strip-arrow-left { background: none; color: #000; left: -20px; }
	#portfolio_container.GFABproduct #lofslidecontent45.lof-slidecontent+.strip-arrows .strip-arrow-right { background: none; color: #000; right: -5px; }
	#portfolio_container.GFABproduct #lofslidecontent45.lof-slidecontent .lof-navigator { display: none }
	#portfolio_container.GFABproduct #lofslidecontent45.lof-slidecontent+.strip-arrows { display: none }
	#portfolio_container.GFABproduct #lofslidecontent45.lof-slidecontent .lof-main-wapper-forcer { padding-top: 680px }
	*/
}


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

	#portfolio_master_container.GFABproduct #lofslidecontent45 .expand { display: none }


}




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

	#portfolio_container.GFABproduct .lof-navigator { display: none }
	#portfolio_container.GFABproduct #slideContainer .strip-arrows { display: none }
	#portfolio_container.GFABproduct .lof-main-wapper-forcer { padding-top: 60% }
	
}

#siteContainer #productDetails button { transition: all 200ms ease; cursor: pointer; min-width: 250px; padding: 0px 20px; height: 57px; background-color: #000; color: #FFF; font-size: 26px; font-weight: 600; border: 1px solid #000 }
#siteContainer #productDetails button:hover { background-color: #FFF; color: #000; }

#portfolio_master_container.GFABproduct section { width: 100%; max-width: 1200px; margin: 10px auto 0px; box-sizing: border-box; padding: 0px 10px }

#portfolio_master_container.GFABproduct .lower-panel .panel-column { width: 33%; float: left; min-width: 240px }
#portfolio_master_container.GFABproduct .lower-panel h1 { margin: 5px 5px 25px 0px  }
#portfolio_master_container.GFABproduct .lower-panel .panel-column img { width: calc( 100% - 20px ); max-width: 320px; height: auto; display: block; margin: 0px auto }
#portfolio_master_container.GFABproduct .lower-panel .panel-column span { width: calc( 100% - 20px ); max-width: 320px; height: auto; display: block; margin: 0px auto  }

/***HOME PAGE additions 2022******/

#portfolio_container.Homepage #heroImage img, #portfolio_container.Homepage #heroImage video { max-height: 660px; }


/***LIGHTBOX******/

.bodyInfo iframe { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%  }
.bodyInfo:after { content: " "; padding-top: 56.25%; display: block  }
.bodyInfo button.close { position: absolute; z-index: 20; top: 0px; left: 0px; font-size: 1.4em; line-height: 100%; }
.lightbox-image { position: absolute; border: 2px solid #000; border-radius: 4px; background-color: #FFF; background-image: url(/js/ajax-loader.gif); width: 100%; min-height: 100%; background-repeat:no-repeat; background-position: center center; transition: all 300ms ease
 }
 
 .lightbox-image img { display: block}
 
 
/**Ambassadors**/
 
 .fab.fa-website:before { content: 'W' !important }
 
 #portfolio_master_container.ambassadors #boxWrappers h1 { font-style: normal !important; padding: 0px 20px; font-size: 2.4em }
 #portfolio_master_container.ambassadors #boxWrappers h2 { font-weight: 200; font-style: italic; margin: 0px 0px;padding-left: 20px; font-size: 2em }
 #portfolio_master_container.ambassadors #boxWrappers h3 { font-weight: 200; font-style: italic; margin: 0px 0px;padding-left: 20px; font-size: 1.4em }
 
 #portfolio_master_container.ambassadors.dealers #boxWrappers .textBoxText>div { padding: 0px 20px }
 
 #portfolio_master_container.ambassadors.dealers .filter { text-align: right }
 
 #portfolio_master_container.ambassadors.dealers #boxWrappers h1 { font-size: 1.7em; font-weight: normal; margin-top: 1.5em }
 
 #portfolio_master_container.ambassadors .content { padding-left: 0px }
 
 #portfolio_master_container.ambassadors .read-more { padding-left: 20px;   }
 #portfolio_master_container.ambassadors .read-more a { font-weight: 400; font-size: 2em; }
 #portfolio_master_container.ambassadors .promo { padding-left: 20px; }
 
  #portfolio_master_container.ambassadors #boxWrappers .textBox  { border: 1px solid #BBB; padding: 0px; box-shadow: 5px 5px 5px #BBB; width: calc( 33.3% - 24px ); margin: 0px 36px 36px 0px  }
  #portfolio_master_container.ambassadors:not(.dealers) #boxWrappers .textBox:nth-child( 3n ) { margin-right: 0px }
  
  #portfolio_master_container.dealers #boxWrappers .textBox  { width: calc( 25% - 21px ); margin: 0px 28px 28px 0px  }
  #portfolio_master_container.dealers #boxWrappers .textBox:nth-child( 4n ) { margin-right: 0px }
  
  			
  #portfolio_master_container.ambassadors #boxWrappers .textBox .textBoxText img { margin: 0px 0px }
  #portfolio_master_container.ambassadors #boxWrappers .textBox .textBoxText { margin-bottom: 10px }
  
  #portfolio_master_container.ambassadors ul.social, #portfolio_master_container.GFABambassador ul.social { padding: 15px 0px 10px 20px; margin: 0px 0px }
  #portfolio_master_container.GFABambassador ul.social { padding-left: 0px }
  
  #portfolio_master_container.ambassadors ul.social:after, #portfolio_master_container.GFABambassador ul.social:after { display: block; content: " "; clear: both }
  #portfolio_master_container.ambassadors .social li, #portfolio_master_container.GFABambassador .social li { float: left; list-style: none; font-size: 35px; border: none; border-radius: 50%; width: 51px; height: 51px; text-align: center; margin-left: 15px; color: #FFF; background: #000 }
  #portfolio_master_container.ambassadors .social li a:hover, #portfolio_master_container.GFABambassador .social li a:hover { color: inherit }
  #portfolio_master_container.ambassadors .social li:first-child, #portfolio_master_container.GFABambassador .social li:first-child { margin-left: 0px; }
  
  #portfolio_master_container.ambassadors.dealers .social li { width: 31px; height: 31px; font-size: 21.5px; }
  
  #portfolio_master_container.ambassadors.dealers .dealerButtonOffshore { background: #FFF; height: 27px; box-shadow: 5px 5px 5px #888; border: 1px solid #CCC; border-radius: 3px; vertical-align: top }
  #portfolio_master_container.ambassadors.dealers .dealerButtonOffshore:hover { color: #CCC; background: #555; border: 1px solid #555; transition: all 0.2s linear }
  
  @media screen and (max-width: 1040px) {
  
  	
  	#portfolio_master_container.ambassadors #boxWrappers .textBox:nth-child( 3n ) { margin-right: 32px }
  	#portfolio_master_container.ambassadors #boxWrappers .textBox:nth-child( 2n ) { margin-right: 0px }
  	#portfolio_master_container.ambassadors #boxWrappers .textBox  { border: 1px solid #BBB; padding: 0px; box-shadow: 5px 5px 5px #BBB; width: calc( 50% - 16px ); margin: 0px 32px 32px 0px  }
  
  }
  
  @media screen and (max-width: 640px) {
  
  	
  	#portfolio_master_container.ambassadors #boxWrappers .textBox:nth-child( 3n ) { margin-right: 0px }
  	#portfolio_master_container.ambassadors #boxWrappers .textBox:nth-child( 2n ) { margin-right: 0px }
  	#portfolio_master_container.ambassadors #boxWrappers .textBox  { border: 1px solid #BBB; padding: 0px; box-shadow: 5px 5px 5px #BBB; width: 100%; margin: 0px 0px 24px 0px  }
  
  
  }
  
  #portfolio_master_container.GFABambassador h1 { font-style: normal !important; padding-left: 0px; font-size: 3.6em }
  #portfolio_master_container.GFABambassador h2 { font-weight: 200; font-style: italic; margin: 0px 0px;padding-left: 0px; font-size: 2em }
  #portfolio_master_container.GFABambassador h3 { font-weight: 200; font-style: italic; margin: 0px 0px;padding-left: 0px; font-size: 1.4em }
  
  #portfolio_master_container.GFABambassador .ambassadorFeatureLeft { float: left; width: 31%; min-width: 300px }
  #portfolio_master_container.GFABambassador .ambassadorFeatureLeft img { max-width: 100%; height: auto }
  #portfolio_master_container.GFABambassador .ambassadorFeatureRight { float: right; width: 69%; max-width: calc( 100% - 300px ); box-sizing: border-box; padding-left: 25px; font-style: italic }
  #portfolio_master_container.GFABambassador section.content:after { content: " "; display: block; clear: both;  }
  
  #portfolio_master_container.GFABambassador .ambassadorFeatureRight p:first-child { margin-top: 0px }
  
  #portfolio_master_container.GFABambassador section.content video { width: 100% }
  #portfolio_master_container.GFABambassador section.content.video.youtube:after { content: " "; display: block; padding-top: 56.25% }
  
  #portfolio_master_container.GFABambassador section.content.video.youtube { position: relative; width: calc( 96% - 60px ); max-width: calc( 1660px - 4% ); padding: 0px 0px }
  #portfolio_master_container.GFABambassador section.content.video.youtube iframe { height: 100%; width: 100%; position: absolute; top: 0px; left: 0px }
  
  @media screen and (max-width: 800px) {
  
  	#portfolio_master_container.GFABambassador .ambassadorFeatureRight { display: inline; padding-left: 0px; float: none  }
  	#portfolio_master_container.GFABambassador .ambassadorFeatureLeft { padding-right: 10px }
  
  }
  
  @media screen and (max-width: 540px) {
  
  	#portfolio_master_container.GFABambassador .ambassadorFeatureLeft { width: 100% }
  	#portfolio_master_container.GFABambassador .ambassadorFeatureRight { display: block; width: 100%; max-width: 100%; }
  	#portfolio_master_container.GFABambassador .ambassadorFeatureLeft { padding-right: 0px }
  
  }
  
  #portfolio_master_container .finance .left { float: left; width: 364px; padding-top: 0.4em }
  #portfolio_master_container .finance .right { float: right; width: calc( 100% - 364px ); box-sizing: border-box; padding-left: 15px }
  #portfolio_master_container .finance:after { content: " "; clear: both; display: block }
   #portfolio_master_container .finance .right p, #portfolio_master_container .finance .right ul { margin-top: 0px }
   #portfolio_master_container .finance h2 { font-weight: normal; font-size: 1em; font-style: italic }
   
   #portfolio_master_container .finance .right button { color: #d78d36; border: 2px solid #d78d36; background: transparent; font-size: 1.6em; line-height: 100%; height: 2em; padding: 0px 1.6em; font-weight: 600; transition: 100ms linear }
   
   #portfolio_master_container .finance .right button:hover { color: #1b365d; border-color: #1b365d; }
   #portfolio_master_container .finance .right img { vertical-align: top; padding-left: 20px; max-height: 3.2em; width: auto }
   
   
   @media screen and (max-width: 600px) {
   
   	#portfolio_master_container .finance .left { float: left; width: 100% }
   	#portfolio_master_container .finance .left img { width: 100%; height: auto }
   	#portfolio_master_container .finance .right {  width: 100%; padding-left: 0px }
   
   }