@import url(https://fonts.googleapis.com/css?family=Droid+Sans:regular,bold&subset=latin);
html { overflow-y: scroll; scroll-behavior: smooth; }
BODY, A { font-family: 'Droid Sans', arial, serif; margin: 0; color: #666; font-size: 100%;}
.dark-link { color: #333;} 
.dark-link :hover {     color: #666; } 
.more {     height:30px;     display:inline-block;     width:30px;     padding-top:5px;     padding-bottom:8px;     padding-left:15px;     padding-right:0px;     background-color:#3a3;     color:white;     font-family:Arial, Helvetica, sans-serif;     /*margin-left:20px;*/     font-size:150%; } 
.more a {     color:white; }
.content-outer { width: 100%; /*display:inline-block;*/ background-color: #f5f5f5; padding: 0; clear: both; }
.section-bg { width: 100%; background-color:#FFF8DC; clear: both;}
.section-bg-pic { width: 100%;	height:900px; padding: 0;	background-image: url('../images/mcdonalds-behind-counter-2.jpg');		padding: 20px; clear: both;}
.testimonial{ width: 75%; background-color:#FFFFFF; margin-left:auto; margin-right:auto; }
h1 {color: #de701c;  padding: 0 20px 0 20px; margin-bottom: -10px; font-size: 300% !important; font-weight:300;}
 h3, h4, h5, h6 { /*margin: 0 20px 0 20px; padding-left: 20px; padding-top: 20px; padding-right: 20px;*/ color: #de701c;  padding: 0 20px 0 20px; margin-bottom: -10px;}
h2 { font-family: 'Droid Sans', ;text-align: left; margin-top: 3%; padding-left: 20px; color: #F65C0B; /*#de701c;*/ font-size: 200% !important; font-weight:200;}
.center{ text-align:center;}
cite{font-family: 'Droid Sans', ;text-align: left; margin-top: 3%; padding-left: 20px; color: #F65C0B; /*#de701c;*/ }
p { padding: 20px 20px 0 20px; margin-bottom: 0px;}
.tick { list-style-image: url('https://abcom.net.au/images/icon-red-tick-in-black-box.png'); padding-left:40px; padding-right:15px;}
blockquote{ background-color: #F9FBFA;  padding: 15px; font-style:italic; font-size: 130%;  }
.container{width: 90%; }
.content-inner { min-width: 685px; max-width: 1280px; margin: 0 auto; width: 75%;}
.content-inner-bg { min-width: 685px; max-width: 1280px; margin: 0 auto; width: 75%;	}
.content-inner-center { width: 100%; margin-left:auto; margin-right:auto;  display: flex;  }
/********************************************************
Buton
********************************************************/
.button { background-color: #FF9900/*#4CAF50*/; border: none;  color: white;  padding: 15px 32px;  text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px;  cursor: pointer; }
.button:hover{color:#000!important;background-color:#eee!important}

/********************************************************
Image
********************************************************/
div.column-inner img { margin-top: 20px;			}
.left-image-with-text img { float: left; max-width: 85%; margin: 20px 20px 10px 5px;}
.right-image-with-text img { float: right; max-width: 85%; margin: 20px 20px 10px 5px;  }
.resimage{ margin-left:auto; margin-right:auto; display: block;}
/********************************************************
Image textured overlay start
********************************************************/
.textured { display: block; background: url(../images/qsr-front-counter-2.jpg) no-repeat; /* change with the image URL */  background-size: cover; 
background-image: radial-gradient(black 50%, transparent 50%); background-size: 4px 4px;
}
.grid-overlay { background: url(../images/grid.png);  width: 100%;  height: 480px; /*height of the image*/ margin-top: -800px;
}

/********************************************************
Image textured overlay end
********************************************************/
.blogtitles{ font-size:200%; font-weight:bold;}
.blogcontent{ width:90%;border:thin #999999;}
.button-flat { background-color: #ddd; padding: 10px; border: none;}
.line { background-image: url('/img/line.png'); background-repeat: repeat-x; height: 2px; margin: 30px 0; width: 100%;}a { color: #de701c; text-decoration: none;}
.footer-content { text-align: left;}
.responsive-column-34 { width: 75%; float: left;}
.responsive-column-4 { width: 25%; float: left;}
.responsive-column-3 { width: 33%; float: left;}
.responsive-column-3-bg { width: 32%; float: left;	background-color:#FFFFFF;	}
.responsive-column-2 { width: 49%; float: left; margin-left: 0px;}
.prominent { font-size: 125%;}
.customer-logo { width: 70px; max-width: 100px; padding: 1%; /*min-width: 70px;*/ margin-top: 2%;}
.blurb-title-1 { font-size: 300% !important;}
.blurb1 { text-align: left; margin-top: -11.5%; padding-left: 20px; color: white; font-size: 63pt !important; z-index: 2;}
.blurb2 { text-align: left; margin-top: 8%; padding-left: 20px; color: #de701c;	font-weight: 300; font-size: 36pt !important;}
.blurb3 { text-align: left; margin-top: -8%; text-shadow: 2px 2px 4px #000000; padding-left: 40px; color: white; font-size: 36pt !important; z-index: 2;}
.blurb3high { text-align: left; margin-top: -8%; text-shadow: 2px 2px 4px #000000;  padding-left: 40px; color: #ffffff; font-size: 36pt !important; z-index: 2;}
.spacer-100 { height: 100px; width: 100%; clear: both;}
.spacer-50 { height: 50px; width: 100%; clear: both;}
.spacer-25 { height: 25px; width: 100%; clear: both;}
.spacer-15 { height: 15px; width: 100%; clear: both;}
.spacer-5 { height: 5px; width: 100%; clear: both;}
.spacer-1 { height: 1px; width: 100%; clear: both;}

.ad-split-outer { position: relative; overflow: hidden; max-height: 300px;}
.ad-split-inner { position: absolute; z-index: 2; top: 0; width: 50%; background-color: #de701c !important;}
.ad-split-header-large { padding: 20px; font-size: 275%;}
.ad-split-header-medium { padding: 20px; font-size: 200%;}
.ad-split-header-small { padding: 20px; font-size: 150%;}
.ad-split-content { margin: 0 20px 20px 20px; font-size: 110%;}
.ad-split-background { z-index: 1; width: 100%; min-height: 250px; max-width: 1280px !important;}
.note { font-size: 80%; padding: 5px; background-color: #f1e2a8; width: 100%; margin-top: 10px;}
#support-overlay-outer { opacity: 0.0; overflow: hidden; position: absolute; height: 0; width: 0; top: 0; left: 0; background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); background: -o-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); background: -ms-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); -webkit-transition: opacity 0.5s; /* Safari */ transition: opacity 0.5s;}
#support-overlay-inner { min-height: 800px; position: relative; margin: 20px 20px 0 20px; padding: 20px; background-color: #fff; background-color: rgba(255,255,255,0.95);}
#support-overlay-fadeout { max-width: 1280px; min-height: 200px; position: relative; margin: 0 20px 20px 20px; background: -moz-linear-gradient(top, rgba(255,255,255,0.9) 0%, rgba(0,0,0,0) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.9)), color-stop(100%,rgba(0,0,0,0))); background: -webkit-linear-gradient(top, rgba(255,255,255,0.9) 0%,rgba(0,0,0,0) 100%); background: -o-linear-gradient(top, rgba(255,255,255,0.9) 0%,rgba(0,0,0,0) 100%); background: -ms-linear-gradient(top, rgba(255,255,255,0.9) 0%,rgba(0,0,0,0) 100%); background: linear-gradient(to bottom, rgba(255,255,255,0.9) 0%,rgba(0,0,0,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6ffffff', endColorstr='#00000000',GradientType=0 );}
#support-tab-outer { position: fixed; top: 24px; right: 20px; background-color: #025ce9; padding: 8px 10px 10px 10px; border: none;}
#support-tab-link { font-size: 90%; color: white;}
#footer-outer { width: 100%; background-color: #333; padding: 25px 0 25px 0; margin-top: 40px;}
#footer-inner { min-width: 685px; max-width: 1280px; margin: 0 auto; width: 75%;}
/*
.header-outer { width: 100%; padding: 25px 0 25px 0; position: fixed; background-color:#FFFFFF; z-index:999;}
.header-inner { min-width: 685px; max-width: 1280px; margin: 0 auto; width: 75%;}
#header-logo { display: inline; margin-left: 20px;}
#header-logo-no-text { display: none; margin-left: 20px;}
*/


/************************************************************* 
HEADER NAV
**************************************************************/ 
.header{ width:100%; /*height:auto; */position:fixed; padding: 20px 0  0 0; background-color:#fff; top: 0; z-index: 800;}
.headercontainer{ width:70%; margin-left:auto; margin-right:auto; margin-bottom:10px; overflow: auto;}
div#logo a{   float: left; color:#000000; text-decoration:none; font-weight:bold;}
/************************************************************* 
MENU
**************************************************************/ 
.topnav { overflow: hidden; background-color: #494949; padding-left: 14%;} /* Add a black background color to the top navigation */
/* Style the links inside the navigation bar */
.topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px;}
.active { background-color: #494949; color: white;} /* Add an active class to highlight the current page */
.topnav .icon { display: none;} /* Hide the link that should open and close the topnav on small screens */
.dropdown { float: left; overflow: hidden;} /* Dropdown container - needed to position the dropdown content */
/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn { font-size: 17px; border: none; outline: none; color: white; padding: 14px 16px; background-color: #494949 /*inherit*/; font-family: inherit; margin: 0;}
/* Style the dropdown content (hidden by default) */
.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1;}
/* Style the links inside the dropdown */
.dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left;}
.topnav a:hover, .dropdown:hover .dropbtn { background-color: #555; color: white;} 
/* Add a dark background on topnav links and the dropdown button on hover */
.dropdown-content a:hover { background-color: #ddd; color: black;} 
/* Add a grey background to dropdown links on hover */
.dropdown:hover .dropdown-content { display: block;  z-index: 999;} 
/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content { display: block;}


/*
nav { padding-right:25%;}
nav ul {list-style-type: none; margin: 0; padding: 0; overflow: hidden; float:right; padding-top: 10px; }
nav ul li {	margin: 0px; display:inline-block; background-color:#FFFFFF; height:auto; }
li ul {position: absolute; display: none; }
li:hover ul { display: block; background-color:#FFFFFF; float: left; clear: left;}
*/
.parallax {  background-attachment: fixed;  background-position: center; background-repeat: no-repeat; background-size: cover; width:100vw; display: table-cell; text-align: center;vertical-align: middle; z-index:1; }

.bgimg-1, .bgimg-2, .bgimg-3 { position: relative;  background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover;}
.bgimg-2 { background-image: url("../images/mcd-cafe-counter.jpg"); min-height: 500px;}

#unicode { font-size:7vw; width:25vw; display:inline-block;}
#unicode-title{font-size:3vw; text-align:center;}
#unicode-subtitle{font-size:3vw}
#unicode-layout{text-align: center;}
#unicode-area{background-color:#eee; /* border-bottom:10px grey solid;*/ box-sizing: border-box; padding: 5vh 5vw 5vh 5vw; text-align: center; width: 100%; /*position: relative; z-index:20; */}

#call{font-size:20vw; text-align:center;}
#calltoaction{font-size:200%; text-align:center; color:#de701c;}
#calltoaction2{font-size:200%; text-align:center; color: #999999;}
#calltoactiontitle{font-size:200%; text-align:center; color:#FF9900;}
.bigNumber{  font-family:Times;  text-align:center;  font-size:200%;  color:#8899aa;}
ul.b {list-style-position: inside;}
ol {margin: 1em 0;}
li {margin: 1em 0;}
/*********DEBUG**********************************/
img:not([alt]),img[alt=""] {outline: 5px solid red;}


/******************************************/

/******************************************************//*************************************/

@media screen and (max-width: 1800px) { /*scaling color-profile large fonts*/ 
.blurb1 {     font-size: 265% !important;     font-size: 4.7vw !important; } 
.blurb2 {     font-size: 130% !important;     font-size: 2.8vmax !important; }		 
.blurb3 {     font-size: 130% !important;     font-size: 2.8vmax !important; }}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
    .bgimg-1, .bgimg-2, .bgimg-3 {
        background-attachment: scroll;
    }
}
@media screen and (max-width: 800px) { /*transition to 100% width inner divs*/ 
ul {  display: block;  }


}
@media screen and (max-width: 768px) { /*transition to 100% width inner divs*/ 
.hide-on-mobile {     display: none; } 
.ad-split-inner {     background-color: #de701c !important;     margin-bottom: 9vmin; } 
.ad-split-header-large {     font-size: 150%;     padding-bottom: 5px; } 
.ad-split-header-medium {     font-size: 130%;     padding-bottom: 5px; } 
.ad-split-header-small {     font-size: 110%;     padding-bottom: 5px; } 
.ad-split-content {     font-size: 100%; } 
.ad-split-background {     z-index: 1;     width: 100%;     min-height: 0;     max-width: 0; } 
.responsive-column-3 {     width: 100%; } 
.responsive-column-34 {     width: 100%; } 
.responsive-column-4 {     width: 100%; } 
.column-header {     width: 20%;     float: left;     display: inline-block; } 
.column-content {     width: 80%;     float: left;     display: inline-block;     text-align: left; } /*.column-content h2 {         padding-left: 20px;     }*/ 
.line {     width: 100%; } 
.footer-content {     padding-left: 20px; } 
#header-logo {     display: none; } 
#header-logo-no-text {     display: inline; } 
ul { display: block; padding-top: inherit; margin: 10 10 10 10; width: 100%; text-align: left; }
.container{width: 90%; }
.content-inner {     min-width: 0 !important;     margin: 0;     width: 100%;     text-align: left; } 
.content-inner-bg {     min-width: 0 !important;     margin: 0;     width: 100%;     text-align: left; } 
#header-inner {     min-width: 0 !important;     margin: 0;     width: 100%;     text-align: left; } 
#footer-inner {     min-width: 0 !important;     margin: 0;     width: 100%;     text-align: left; }}


@media screen and (max-width: 600px) {
.container{width: 80%; }
/********************************************************
Image textured overlay start
********************************************************/
.textured { display: none; }
.grid-overlay { display:none; }
/********************************************************
Image textured overlay end
********************************************************/
h1{ margin-top: 100px;}


@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn { display: none;}
  .topnav a.icon {float: right; display: block;}
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon { position: absolute; right: 0; top: 0;}
  .topnav.responsive a { float: none; display: block; text-align: left;}
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn { display: block; width: 100%; text-align: left; }
}


@media screen and (max-width: 550px) { /*transition to drop down menu*/ 
.container{width: 90%; }
.responsive-column-2 {     width: 100%; } /*.ad-split-outer {     overflow: visible; }*/ 
.ad-split-outer {     position: relative;     overflow: visible;     max-height: 300px; } 
.ad-split-background {     position: relative;     display: block; } 
.ad-split-inner {     position: relative;     display: block;     width: 100%;     padding-bottom: 10px; } 
ul {  display: block;  }

.blurb1 {     font-size: 155% !important; } 
.blurb2 {     font-size: 105% !important; }	    
.blurb3 {     font-size: 105% !important; } 
#support-tab-outer {     display: none; } 
#support-tab .tab-text {     display: none; }
.gap{padding-top: 10%; }
h1{ margin-top: 50px;}
}

@media screen and (max-width: 480px) { /*smallest mobile screen size*/ 
.container{width: 90%; }
.column-header {     width: 100%; } 
.column-content {     width: 100%; } 
.blurb1 {     margin-top: 5%;     color: black; }
.bigNumber{  font-family:Times;  text-align:center;  font-size:80px;  color:#8899aa;}
ul {  display: block; font-size:1em; }
li{overflow: auto;}
.gap{padding-top: 60%; }
h1{ margin-top: 50px;}
}