/* ———————————————————————————————————————————————————————————————————————————————— 
[TABLE OF CONTENTS]
1. GLOBAL
   |— color codes
2. TYPOGRAPHY
- h1-h6
- lists
- links
3. LAYOUT
- section
- footer
- navigation
4. COMPONENTS
- buttons
- cards
- forms
5. PAGE SPECIFIC
6. ANIMATIONS
———————————————————————————————————————————————————————————————————————————————— */
/*show frames*/
	/*.container {  border:3px solid yellow;} .content {border:3px solid teal;} .text_block {  border:3px red solid;}*/

	/*troubleshooting in html*/
	.fix1 {border:3px solid purple;}
	.fix2 {border:3px solid orange !important;}

/* ———————————————————————————————————————————————————————————————————————————————— 
[1. GLOBAL]
*/
	/*~~~~~~ Site Setup ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
	*{
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
		margin:0;
		padding:0;
	}

	body {
	  margin:auto 0;
	  font-family: 'Oxygen', sans-serif; font-weight: 300;
	  line-height: 1.3em;
	  position: relative;
	}
	section{
	  background-color:white;
	}
	.container {
	  margin:0 auto;
	  max-width: 1280px; min-width: 300px;
	  width:100%;
	  padding: 35px 0px;
	}
	.content{
	  padding:75px 0px;
	}
	.no_padding, .no_margin {padding-bottom:0px;padding-top:0px; margin-top:0;margin-bottom:35px;}
	.no_padding_bottom, .no_margin_bottom {padding-bottom:0px; margin-bottom:35px;}
	  header {
	    background: #ffffff;
	    width:100%;
	    /*height: 5rem;*/
	    /*z-index:1;*/
	  }
	  header a {
	    color:#737577;
	  }
	  .overlay {
	  	width: 100%;
	  	height: 100%;
	  	background-color: rgba(0,0,0,0.25);
	  	background: rgba(0,0,0,0.25);
  		z-index: 2;
	  }
	  footer {
	    background:#383838;
	    color:#ffffff;
	  }
	  footer .container {
	    display: -ms-grid;
	    display: grid;
	    -ms-grid-columns: (1fr)[5];
	    grid-template-columns: repeat(5,1fr);
	    grid-gap: 35px;
	  }
	  footer .text_block {
		padding:0;
	  }
	  .socials_footer {
	    margin:15px 0;
	    display:flex;
	    justify-content: flex-start !important;
	    grid-gap:15px; gap: 15px;
	    /*border:3px red solid;*/
	  }
	  .socials_footer img {
	    height: 25px;
	  }
	  footer .footer_bar {
	    color:#777;
	    text-align: center;
	    padding:0 15px 35px 15px;
	    font-size: 12px;
	  }
	  footer li {
	    line-height: 1.7em; 
	    list-style:none;
	    padding:0;
	    /*margin-left:-35px;*/
	  }
	  footer li:before {
	    /*border:5px solid red;*/

	  }
	  footer a {
	    color:#ffffff;
	  }
	  footer a:hover {
	    color:#04ace2;
	  }
	  .footer_bar a {
	    color:#777;
	  }
	  .footer_bar a:hover {
	    color:#fff;
	  }
	  .footer_bar br {
	  	display: none;
	  }



	  @media only screen and (max-width:768px) { 
			.content {
				padding:15px;
			}   
			footer .container {
		      display: block;
		      text-align: center;
		    }
		    .socials_footer {
		      justify-content: center !important;  
		      padding:15px 0;
		      /*text-align: center;*/
		      margin:0 auto !important;
		      width:250px;
		      
		    }
		    #layout_3_cols .content, #grid_section_2 .content {
		      display: block !important;
		    }
		    .footer_bar span {
			  	display: block !important;
		 	}	

		}
	/*~~~~~~ Colours ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

	:root {
		--blue:  #2aa9e0;
		--gradient: linear-gradient(45deg, rgba(4,172,226,1) 0%, rgba(144,200,85,1) 100%);
	}

/* ———————————————————————————————————————————————————————————————————————————————— 
[2. TYPOGRAPHY]
*/
	/*~~~~~~ Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
	  @font-face {
	    font-family: 'Rockness';
	    src:  url('/assets/fonts/rockness-webfont.woff2') format('woff2'),
	          url('/assets/fonts/rockness-webfont.woff') format('woff')
	          url('/assets/fonts/rockness.tff') format('tff');
	  }

	/*~~~~~~ Headings ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
		h1 {
		      color: #737577;
		      font-family: Oxygen;
		      font-size: 23pt;
		      font-weight: 400;
		      font-style: normal;
		      letter-spacing: 0.01rem;
		      line-height: 1.1;
		      margin-top: 0;
		      margin-bottom: 2.125rem;
		      text-transform: none;
		  }
		  h2 {
		  	line-height: 1.3em;
		  	margin-bottom: 1.3rem; /*used for about page*/
		  }
		  h3 {
		      color: #737577;
		      font-family: Oxygen;
		      font-size: 22px;
		      font-weight: 300;
		      font-style: normal;
		      letter-spacing: 0.01rem;
		      line-height: 1.35em;
		      margin-top: 1.5em;
		      margin-bottom: 0.625rem;
		      text-transform: none;
		  }
		p {
		  /*margin-top: 0;*/
		  margin-bottom: 1.3rem; /*used for about page*/
		  line-height: 1.5em;
		  color: #737577;
		}
		.p2	{
			font-size: 9pt;
		}
		blockquote{
		  line-height: 1.7em;
		  margin-bottom:15px;
		  font-style: italic;
		}
		.quote_marks {
		  width:35px !important;
		  padding:15px 0;
		  
		  text-align:center; 
		  color: #777;
		}
	/*~~~~~~ Lists ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
		ul {
		  color: #737577;
		  margin-top:.5em;
		  margin-bottom: 1.7em;
		}
		li {
		  line-height: 1.3em;
		  margin-bottom: .5em;
		  margin-left: 35px;
		}
		li::marker {
			color:#90c855;
		}
	/*~~~~~~ Links ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
			a {
		  text-decoration: none;
		  color:#04ace2;
		}

/* ———————————————————————————————————————————————————————————————————————————————— 
[3. LAYOUT]
*/
/*~~~~~~ Page Structure ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
	.text_block {
		padding:35px 35px 75px 35px;
	}
/*~~~~~~ Menus & Navigation ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

nav {
    width:100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*padding:35px 0;*/
    z-index: 2;
  }
  .nav_brand {}
  .nav_list {
    width:100%;
    align-content: right;
    justify-content: center;
    z-index: 999;
  }

  .nav_list ul{
    text-align: right;
  }
  .nav_item{
    margin:35px 0;
    display: inline;
  }
  .nav_link {
    font-weight:300;
    font-size:18px;
    color:#737577;
    cursor: pointer;
    /*text-transform: uppercase;*/
    padding:6px 10px;
    text-decoration: none;
  }
  .nav_cta {
    background:#90c855;  
    padding: 10px 12px;
    border:none;
  }
  .nav_cta:hover {
    background:#04ace2;
  }
  .nav_cta a {
    color:#ffffff;
  }
  .nav_brand {
    margin:0 auto;
  }
  .nav_brand img {
    padding:0;
    margin:0;
    width:175px;
  }
.align_center {
	text-align: center;
	/*border: red solid 3px;*/
}
/*--- MOBILE MENU --- */
  
  .mob_nav_wrapper {
    position:absolute;
    top:0;
    right:0;
    display:none;
    margin:30px 20px;
  }

  /*hamburger styles*/
  /* btn */
  .menu {
    position: relative;
    
    width: 30px;
    height: 30px;
  /*  margin: 0 25px; */
  /*   border:red solid 5px; */
  }
  .menu span {
    margin: 0 auto;
    position: relative;
    top: 10px;
  /*   right:0; */
  /*     border:blue solid 5px; */
  }
  .menu span:before, .menu span:after {
    position: absolute;
    content: '';
  }
  /* burger styles */
  .menu span, .menu span:before, .menu span:after {
    width: 40px;
    height: 3px;
    border-radius:0px;
    background-color: #000;
    background: linear-gradient(47deg, rgba(4,172,226,1) 0%, rgba(144,200,85,1) 100%);
    display: block;
  }
  .menu span:before {
    margin-top: -10px;
  }
  .menu span:after {
    margin-top: 10px;
  }

  .button {
    /*background-color: blue;*/
    border: 2px solid white;
  /*  border-radius: 30px; */
    text-decoration: none;
    padding: 10px 28px;
    color: white;
    margin-top: 10px;
    display: inline-block;
  }
  .button:hover{
    background-color: white;
    color: blue;
  /*   border: 2px solid blue; */
  }

  /* // MODAL STARTS HERE // */

  .bg-modal {
    color:white;
    background-color: rgba(0, 0, 0, 0.8);
    width: 100%;
    height: 100%;

    position: absolute;
    top: 0;
    right:0;
    bottom:0;
    left:0;

    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999;
  }

  .modal-contents {
    height: 100%;
    width: 100%;

    background: rgb(4,172,226);
    background: linear-gradient(45deg, rgba(4,172,226,1) 0%, rgba(144,200,85,1) 100%);
    text-align: left;
    position: relative;

  }
  .modal-contents-wrapper {
    font-family:Oxygen, sans-serif;
    font-weight:100; 
    font-size:1.7em;
    padding:75px 35px;
    position:relative;
  }
  .close {
    font-size: 75px;
    line-height:.7em;
    
    position: absolute;
    top: 0;
    right: 15px;
    
    color: #333;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    cursor: pointer;
    padding:15px 0;
    z-index: 999;
  /*   border:2px solid red; */
  }
  .close:hover {
      color: #fff;
  }
  .modal-contents-wrapper h3 {
    color:white;
    line-height: 1em;
    margin-top: 0em;
    margin-bottom: 2.5em;
  }
  .modal-contents-wrapper h4 {
    font-size: .5em; font-weight: 300; text-transform: uppercase;
    line-height: 1em;
  }
  .mob_nav_list {
    position:absolute;
    bottom:0;
  }
  @media only screen and (max-width:1199px) { 
    /*body {
    	height:120vh;
    	overflow: hidden;
    }*/
    nav {
    	padding:5px 0;
    }
    .nav_brand {
      margin:auto 0;
      position:absolute;
      top:0;
      left:0;
      /*height:75px;*/
      margin:10px 20px !important;
    }
    .nav_brand img {
      
    }
    .nav_list {
      display:none;
    }

    .mob_nav_wrapper {
      display:inline-block;
    }
    .bg-modal .socials_footer {
    		    justify-content: flex-start !important;

    }
    .bg-modal .button {
    	padding: 10px 20px !important;
    	margin-left: -20px;
    	margin-top:0;
    	margin-bottom: 0 !important;
    }
    .bg-modal .button h3{
    	margin-bottom:0;
    }
    .button:hover{
	    background:none;
	    /*color: blue;*/
	  }
  } 


/* ———————————————————————————————————————————————————————————————————————————————— 
[4. COMPONENTS]
*/
	/*~~~~~~ Hero Images ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
		video {
			width:100vw;
		}

		/*banner images on service pages*/
    /*see overlay class too*/
	    .hero {
	      background-position: center center;
	      background-repeat: no-repeat;
	      background-size: cover;
	      min-height:25vh;
	      /*padding:0 35px;*/
	      margin:0;
	    }
	    .hero h1{
	      font-size: 3em;
	      font-weight: 300;
	      color:#ffffff;
	      text-shadow: 0px 0px 18px rgba(0,0,0,0.95);
	    }
	    .hero .container {
	        padding:0;margin:0 auto;
	    }
	    .hero .content {
	        padding:225px 0 0px 0;
	        margin:0 auto;
	        /*border: #ff00ff solid;*/
	    }

	/*~~~~~~ Buttons ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
	/*~~~~~~ Reviews ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
		#review {
		  text-align: center !important;
		}
	/*~~~~~~ Cards ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
	/*~~~~~~ Forms ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
		form {
		      padding:0;
		      margin:35px 0px;
		      /*width:100%;*/
		    }
		input {
			background: #f7f7f7;
			color: #777 !important;
			border:0px;
			border-bottom:1px solid black;
			border-radius: 0px;
			/*display:block;*/
			margin-bottom:15px;
			padding:15px 10px;
			/*max-width:95%;*/
			/*width: 100%;*/
			text-align: center;
			font-size: 16px;
			font-weight: 300;
		}
		input:focus {
			background: #ffffff;
			border:0px;
		}
		label {
			padding: 10px 0;
		}
		.service_quote_text {
			width:95%;
		}

		/* NOTES: something still not working with the visual on this*/

			input[type="checkbox"].service_quote_check:checked + label.service_quote_check_label {
			    background-position: 0 -15px;
			}
			input[type="checkbox"].service_quote_check + label.service_quote_check_label {
			    padding-left: 20px;
			    height: 15px;
			    display: inline-block;
			    line-height: 15px;
			    background-repeat: no-repeat;
			    background-position: 0 0;
			    font-size: 15px;
			    vertical-align: middle;
			    cursor: pointer;
			}
		  .lite_cyan_check {
		    background-image: url(checkboxes/lite-cyan-check.png);
		  }
			button {
		    background-color: #4CAF50; /* Green */
		    border: none;
		    color: white;
		    padding: 16px 32px;
		    text-align: center;
		    text-decoration: none;
		    display: inline-block;
		    font-size: 16px;
		    margin: 4px 2px;
		    -webkit-transition-duration: 0.4s;
		            transition-duration: 0.4s;
		    cursor: pointer;    
		    border-radius: 0px;
		  }
		    button:hover {
		      background: green;
		    }
		  .message{
		    /*grid-row: 2;*/
		    font-family: Oxygen;
		    color:black;
		    font-size: 15px;
		    padding-left:15px;
		    color:grey;
		    width:100%;
		    height:75px;
		      resize: none;

		  }
		  .contact_form{
		    /*grid-row: 2;*/
		  }
		  .button {
		    /*line-height: 3em;*/
		    /*margin:15px 0;*/
		    padding: 15px 25px;
		    text-decoration: none;
		  }
		  
		  #menu_solutions {
		    /*padding:0 35px;*/
		  }
		  #menu_solutions li {
		   list-style: none;
		   margin-left:0px;
		   line-height: 1.3em; 
		  }
		  #menu_support li {
		  	list-style: none;
		   margin-left:0px;
		   line-height: 1.3em; 
		  }

	   	select	{
				border-radius: 0px;
				border: 1px solid;
				padding: 25px;
		    background: #f7f7f7;
		    color: #777 !important;
		    border-radius: 0px;
		    display: block;
		    margin-bottom: 15px;
		    padding: 15px 50px 15px 10px;
		    /*max-width: 95%;*/
		    /*text-align: center;*/
		    font-size: 16px;
		    font-weight: 300;
				/*down arrow*/
				appearance: none;
				-moz-appearance: none;
				-webkit-appearance: none;
				background-image: url(/assets/imgs/thin-down.svg);
				background-repeat: no-repeat;
				background-position: calc(100% - 15px) center;
				background-size: 20px;
			}

			@media only screen and (max-width:768px) { 
				#contact_form form, form.contact_form  {
				  /*width:100%!important;*/
				}
				.message{
					 /*width:95%;*/
				}
			}
/* ———————————————————————————————————————————————————————————————————————————————— 
5. PAGE SPECIFIC]
*/

	/*~~~~~~ Home ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
		/* ---- @home ---- */
	    #hero_home {
	      height:60vh;
	      position: relative;
	      /*width:100%;*/
	      /*margin-bottom:-200px;*/
	      /*background-image:url(/assets/imgs/why-rent-a-mat-thumb.jpg); */
	      /*border-bottom:solid pink 5px;*/
	      overflow: hidden;
	    }
	    #hero_home video {
	      position:absolute;
	      top:0;
	      left:0;
	      width:100vw;
		  height: 100%;
	      -o-object-fit:cover;
	         object-fit:cover;
	      /*font-family: 'object-fit:cover';*/
	      /*z-index: 5;*/
	      /*opacity:0.8;*/
	    }  


	    #service_cards .content {
	      display: -ms-grid;
	      display: grid;
	      -ms-grid-columns:1fr 1fr 1fr;
	      grid-template-columns:1fr 1fr 1fr;
	      grid-gap:15px;
	      align-items: center;
	      margin-top:-150px;
	      /*background:orange;*/
	      /*margin-bottom:-150px;*/
	    }
	    #service_cards .service_cards { 
	      background-position: center center;
	      min-height: 200px; 
	      background-repeat: no-repeat;
	      background-size: cover;
	    }

	    #service_cards .cards_safety_mats {      background-image: url(/assets/imgs/feature_images_wetareas-02.png);    }
	    #service_cards .cards_washrooms {
	      background-image: url(/assets/imgs/feature_images_2_washrooms.jpg);    }
	    #service_cards .cards_entrance_mats {
	      background-image: url(/assets/imgs/feature_images_2_.jpg);    }
	    

	    /*add this to the stationary element*/
	    /*#service_cards .content {
	      position: relative;
	      overflow: hidden;
	    }*/


	    .slideInLeft{
	      -webkit-animation: slideInLeft .7s ease-in;
	              animation: slideInLeft .7s ease-in;
	    }
	    .slideUp {
	      -webkit-animation: slideUp .7s ease-in;
	              animation: slideUp .7s ease-in;
	    }
	    .slideInRight {
	      -webkit-animation: slideInRight .7s ease-in;
	              animation: slideInRight .7s ease-in;
	    }
	    @-webkit-keyframes slideInLeft {
	      0%{
	        -webkit-transform: translateX(-500px);
	                transform: translateX(-500px);
	        opacity: .1;
	      }
	      100%{
	        -webkit-transform: translate(0);
	                transform: translate(0);
	        opacity: 1;
	      }
	    }
	    @keyframes slideInLeft {
	      0%{
	        -webkit-transform: translateX(-500px);
	                transform: translateX(-500px);
	        opacity: .1;
	      }
	      100%{
	        -webkit-transform: translate(0);
	                transform: translate(0);
	        opacity: 1;
	      }
	    }
	    @-webkit-keyframes slideInRight {
	      0%{
	        -webkit-transform: translateX(500px);
	                transform: translateX(500px);
	        opacity: .1;
	      }
	      100%{
	        -webkit-transform: translate(0);
	                transform: translate(0);
	        opacity: 1;
	      }
	    }
	    @keyframes slideInRight {
	      0%{
	        -webkit-transform: translateX(500px);
	                transform: translateX(500px);
	        opacity: .1;
	      }
	      100%{
	        -webkit-transform: translate(0);
	                transform: translate(0);
	        opacity: 1;
	      }
	    }
	    @-webkit-keyframes slideUp {
	      0%{
	        -webkit-transform: translateY(500px);
	                transform: translateY(500px);
	        opacity: .1;
	      }
	      100%{
	        -webkit-transform: translate(0);
	                transform: translate(0);
	        opacity: 1;
	      }
	    }
	    @keyframes slideUp {
	      0%{
	        -webkit-transform: translateY(500px);
	                transform: translateY(500px);
	        opacity: .1;
	      }
	      100%{
	        -webkit-transform: translate(0);
	                transform: translate(0);
	        opacity: 1;
	      }
	    }
	    
	    .service_cards {
	      overflow: hidden;
	      /*border:4px red solid;*/
	      -webkit-box-shadow: 0 5px 15px rgba(0,0,0, 0.2);
	              box-shadow: 0 5px 15px rgba(0,0,0, 0.2);
	      position: relative;      
	    }
	    .service_cards a{
	    	display: block;
	    }
	    .service_card_details {
	      /*border:solid yellow 5px;*/
	      position: absolute;
	      bottom:-30px;
	      -webkit-transition: 1s;
	      transition: 1s;
	      width:100%;
	      height:200px;
	      padding:15px 45px 15px 25px;
	      background:rgba(0,0,0,0.5);
	    }
	    .service_cards:hover .service_card_details {
	      -webkit-transition: .2s;
	      transition: .2s;
	      bottom:0;
	      background:rgba(144, 200, 85, 0.8);
	    }
	    .service_cards h2 {-webkit-transform: uppercase;transform: uppercase;}
	    .service_cards h2, .service_cards p, .service_cards a {
	      color:white;
	      /*border:solid pink 4px;*/
	      margin:5px 0;
	      line-height: 1.3em;
	    }
	    .chart {
	      display:flex;
	      align-items: center;
	      padding:35px  ;
	    }
	    .chart h3 {text-align: center;}

	    .chart_section, #chart_section .content {
	      padding:0;
	      margin:0;
	    }

	    #grid_section_3 .content {
	      display: -ms-grid;
	      display: grid;
	      -ms-grid-columns: 2fr 1fr;
	      grid-template-columns: 2fr 1fr;
	      grid-gap:35px;
	    }


	    .get_quote_container {
	      background:#2aa9e0;      
	      margin-bottom: 75px;

	      /*animation settings*/
	      opacity:0;
	      -webkit-transition:opacity .3s .25s ease-out,
	      -webkit-transform 4s .25s cubic-bezier(0,1,.3,1);
	      transition:opacity .3s .25s ease-out,
	      -webkit-transform 4s .25s cubic-bezier(0,1,.3,1);
	      transition:transform 4s .25s cubic-bezier(0,1,.3,1),
	      opacity .3s .25s ease-out;
	      transition:transform 4s .25s cubic-bezier(0,1,.3,1),
	      opacity .3s .25s ease-out,
	      -webkit-transform 4s .25s cubic-bezier(0,1,.3,1);
	      will-change: transform, opacity;
	    }
	    /*also used in animation*/
	    .get_quote_container.is-visible {
	      opacity: 1;
	    }
	    /*~end animation css~*/

	    .get_quote_container p , .get_quote_container label {
	      color:white;
	    }
	    .form_quote {
	      padding:35px 30px;
	    }
	    .get_quote_container h3 {
	      color:white;
	    }
	    .get_quote_container .form_header {
	      /*width:100%;*/
	      padding:15px 30px 5px 30px;
	      margin:0;
	      background:rgba(0,0,0,0.2);
	    }

		/*#red_form textarea ::placeholder,*/
		.white {
	      background:#ffffff !important;
	      color:#000000 !important;
	    }
	    .black {
	      background:black;
	      color:white;
	    }
	    .grey {
	      background: #f7f7f7;
	      /*color:white;*/
	    }
	    .green {
	      background: #90c856 !important;
	      color:white !important;
	    }
	    .green h3 , .green p{
	      color:white;
	    }

	    .green .col_3 {
	      background: white;
	      color:grey;
	    }
	    #layout_3_cols .content {
	      display: -ms-grid;
	      display: grid;
	      -ms-grid-columns: (1fr)[3];
	      grid-template-columns: repeat(3,1fr);
	      text-align: center;
	      grid-gap: 15px;
	    }
	    .col_3 {
	    	padding:35px;
	    	/*max-width:300px;*/
	    	/*border: 3px solid lime;*/
	    }
	    .col_3 img {
	    	/*border: solid orange 3px;*/
	    	width:100%;
	    }
	    .layout_2_cols .content {
	     	display: -ms-grid;
	     	display: grid;
	      	-ms-grid-columns: (1fr)[2];
	      	grid-template-columns: repeat(2,1fr);
	      	/*text-align: center;*/
	      	grid-gap: 15px;

	    }
	    .layout_2_cols .content .col {
	     	/*border: 3px solid red;*/
	     }
	    .free_trial {
	      text-align: center;
	      padding:35px 30px;
	      height:100%;
	      
	    }
	    .free_trial h3 {
	      color:grey;
	    }

	    @media only screen and (max-width:768px) { 
			#hero_home {
			      height:52vh;
			      /*background-color: #ff00ff;*/
			    }
		    #service_cards .content {
				display: -ms-grid;
				display: grid;
				-ms-grid-columns:1fr;
				grid-template-columns:1fr;
				grid-gap:15px;
				align-items: center;
				/*margin-top:-150px;*/
				/*background:orange;*/
	      		/*margin-bottom:-150px;*/
		    }
			.service_card_details {				
				bottom:0px;
				height:90%;
				background:rgba(0,0,0,0.5);
			}
			.service_cards a {
		      background-color:rgba(0,0,0,0);
		      /*margin-left:-10px;*/
		      color:#90c855;
		    }
		    .service_cards a:active {
		    	background-color: #90c855;
		    }
		    #grid_section_3 .content , .layout_2_cols .content {
		      display: block;
		    }
		    .chart {
		    	display: block;
		    }

		}
	/*~~~~~~ Entrance ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
	    #hero_entrance {
	      background-image: url(/assets/imgs/feature_images_2_entrance_banner.jpg);
	    }
	    
	    .entrance_categories {
	      margin: 75px 0;
	    }
	    .entrance_item {
	      margin:0 0 35px 0;
	      padding:15px 0;
	      display: flex;
	      grid-gap: 35px;
	    }
	    .entrance_item h3 {
	      margin-top:0em;
	    }
	    .entrance_item img {
	      width:150px;
	    }
	    @media only screen and (max-width:768px) { 
	    	.entrance_item {
				display: block;
			}
	    }
	/*~~~~~~ Safety ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
	    #hero_safety {
	      background-image: url(/assets/imgs/feature_images_wetareas-05.jpg);
	    }

	    /*errors*/
	    /*#hero_saftey::before {
	      background:black;
	      z-index: 5;
	    }*/
	/*~~~~~~ Washrooms ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
		#hero_washrooms {
	      background-image: url(/assets/imgs/feature_images_2_washrooms_banner.jpg);
	    }
	/*~~~~~~ Red Carpets ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
		#hero_redcarpet {
	      min-height: 200px;
	      background-image: url(https://bizcleanmats.com.au/wp-content/uploads/2018/11/310818dabbleinthedust_print169-crop-1920px.jpg);
	      background-repeat: no-repeat;
	      background-position: center center;
	      background-size: fill;
	      padding: 15vh 0 0 0;
	      text-align: center;
	    }
	    #hero_redcarpet .content, #hero_redcarpet .container {
	      margin:0 auto;
	    }
	    #redcarpet_page_title {
	        background:#d11f1f;
	        text-align: center;
	        color:#ffffff;

	    }
	      #redcarpet_page_title .container, {
	        padding:0;
	      }
	      #hero_redcarpet h1{
	      /*#redcarpet_page_title h1 {*/
	        font-size: 50px;font-family: Oxygen;font-weight: 700;font-style: normal;
	        color: #ffffff;
	        text-align: center;
	      }
	      #hero_redcarpet h2 {
	      	color:#fff;
	      	padding:0;
	      	line-height: 0.3;
	      }
	      #hero_redcarpet h3{
	      /*#redcarpet_page_title h3 {*/
	        font-size: 25px;
	        color:#ffffff;
	        font-weight:100;
	        text-transform: uppercase;
	      }
	      #redcarpet_page_title h4 {
	      /*#hero_redcarpet h4{*/
	        font-size: 55px;
	        line-height: 1.0em;
	        color:#ffffff;
	        font-weight:100;
	        font-family: Rockness, script, sans-serif;
	        padding-bottom:35px;
	      }     
	      #past_events {

	      }
	      #past_events h3 {
	        text-align: center;
	        color:white !important;
	      }
	    #past_events .content {
	      display: -ms-grid;
	      display: grid;
	      -ms-grid-columns: 1fr 1fr;
	      grid-template-columns: 1fr 1fr;
	      grid-gap: 15px;
	      min-height:25vh;
	    }
	    .redcarpet_event1 {
	        height:500px;
	        background-image: url(/assets/imgs/23550048_1218210168278711_290262579304809845_o-e1541056788762.jpg);
	        background-repeat: no-repeat; background-position: center center;
	        background-size: cover;
	    }
	    .redcarpet_event2 {
	      height:500px;
	        background-image: url(/assets/imgs/310818dabbleinthedust_print172-1500.jpg);
	        background-repeat: no-repeat; background-position: center center;
	        background-size: cover;
	    }
	    #red_carpet_process .red_carpet_timeline {
	        display: -ms-grid;
	        display: grid;
	        -ms-grid-columns: (1fr)[6];
	        grid-template-columns: repeat(6,1fr);
	        background-color: #ffffff;
	        align-items: center;
	        margin:35px 0;
	        align-items: stretch;
	    }
		#red_carpet_process img {
			width: 35px;
		}
	     #red_carpet_process .content h4, #red_prices h4 {
	        -ms-grid-row:1;
	        grid-row:1;
	        -ms-grid-column: 1;
	            grid-column-start: 1;
	        -ms-grid-column-span: 6;
	        grid-column-end: 7;
	        font-size: 30px;
	        color: #dd3333;
	        text-align: center;
	        font-family: Oxygen;
	        font-weight: 700;
	        font-style: normal;

	        margin-bottom: 15px;
	      }
	      #red_carpet_process .content div {
	        -ms-grid-row: 2;
	        grid-row: 2;
	        /*background:yellow;*/
	      }
	      
	      #red_carpet_process .content .step {
	        display: flex;
	        align-items:center;
	        justify-content: flex-end;
	        grid-gap: 15px;
	      }
	      
	      #red_carpet_process .content .step::after {
	        flex:1;
	        content: "";
	        margin:8px;
	        border-bottom:dotted red 2px;
	      }

	    .last_step{
			display: flex;
	        align-items:center;
	        justify-content: end;
	        grid-gap: 0px;
	    }     
	    .last_step::after {
      		flex:1;
	        content: "";
	  	}
		.last_step span {
			/*margin:150px !important;*/
			/*border-bottom:solid blue 10px;*/
			padding:50px;
			width:0!important;
		}


	      #red_carpet_process span {
	        margin-left: 10px;
	        text-align:  center;
	      }
	      .card_wrapper {
	        display: flex;
	        grid-gap: 35px;
	        text-align: center;
	      }
	      .card_wrapper span {
	        font-style: italic;
	        font-size: 12px;
	        line-height: .7em;
	        margin:35px 0;
	      }
	      .price_card {
	       margin: 75px 0;
	        /*border:1px solid grey;*/
	        background:white;
	        -webkit-box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.19); 
	        box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.19);
	        border-radius: 5px;       
	      }
	      .price_card_bg {
	        -webkit-border-top-left-radius: 5px;
	        -webkit-border-top-right-radius: 5px;
	        -moz-border-radius-topleft: 5px;
	        -moz-border-radius-topright: 5px;
	        border-top-left-radius: 5px;
	        border-top-right-radius: 5px;
	        padding: 15px 0px;
	        background-color:#dd1c1c;
	        width:100%;
	        margin:0; 
	      }
	      .price_card_bg h3 {
	        color: white;
	        text-transform: uppercase;
	      }
	      .price_card_details {
	        padding:35px 25px;
	      }
	      .price_card_details h3 {
	        font-size: 22px;
	        font-weight: 500;
	        color:#04ace2;

	      }
	      #red_prices h5{
	        text-align: center;
	        font-size: 18px;
	        font-weight: 300;
	        line-height: 1.7;
	      }
	      /*#red_prices .content {
	      	width:75%;
	      }*/
	      #red_form h3 {
	        text-align: center;
	        font-size: 30px;
	        font-weight: 500;
	        line-height: 1.7;
	        color: #dd1c1c;
	      }
	      #red_form form {
	        width:750px;
	        min-width: 300px;
	        margin:0 auto;
	        display:-ms-grid;
	        display:grid;

	      }
	      #red_form input {
	        text-align: left;
	        padding-left:0;

	      }
	      #red_form ::-webkit-input-placeholder, #red_form textarea ::-webkit-input-placeholder {
	        color: #000000;
	        font-size: 16px;
	        font-weight: 300;
	      }
	      #red_form ::-moz-placeholder, #red_form textarea ::-moz-placeholder {
	        color: #000000;
	        font-size: 16px;
	        font-weight: 300;
	      }
	      #red_form :-ms-input-placeholder, #red_form textarea :-ms-input-placeholder {
	        color: #000000;
	        font-size: 16px;
	        font-weight: 300;
	      }
	      #red_form ::-ms-input-placeholder, #red_form textarea ::-ms-input-placeholder {
	        color: #000000;
	        font-size: 16px;
	        font-weight: 300;
	      }
	      #red_form ::placeholder, #red_form textarea ::placeholder, #red_form p {
	        color: #000000;
	        font-size: 16px;
	        font-weight: 300;
	      }
	      textarea {
	        padding:15px 0;
	        margin: 15px 0;
	        
	        border:1px solid grey;
	        border-right:0px;
	        border-left:0px;
	      }
	      #red_form .button {
	        align-content:end;
	      }
	      #red_banner {
	        background-repeat: no-repeat;
	        background-position: center center;
	        background-size: cover;
	        background-image: url(/assets/imgs/bright-celebrate-celebration-1234390-1600.jpg);
	      }

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

		      #red_carpet_process .content, 
		      #red_prices .card_wrapper  {
		        display: block!important;
		      }
		      #red_carpet_process {
		       display: none; 
		      }
		      #red_form form {
	        width:100%;}
		      
		  }
	
  	/*~~~~~~ High Power Commercial Cleaning Services / SkyVac ~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
			#industrial_hero {
	      background-image: url(/assets/imgs/vac-gutters.jpg);
	    	background-position: bottom center;
	    }
	    #industrial_hero .container {
	    	padding: 35px;
	      position: relative;
	    	bottom: 0;
	    }
	    #high_power_services .content {
	    	display: -ms-grid;
	    	display: grid;
	    	-ms-grid-columns: (1fr)[2];
	    	grid-template-columns: repeat(2, 1fr);
	    	/*text-align: center;*/
	    }
	    #high_power_services img {
	    	max-width: 100%;
	    	margin: 15px 0;
	    }
	    #skyvac_banner {
	    	height: 25vw;
	    	background-image: url(/assets/imgs/SkyVac-Slider.jpg);
	    	background-position: center bottom;
				background-size: cover;
	    }
	    #industrial_cta {
	    	/*background-image: url(/assets/imgs/1.-goondivancropped_web_1200.JPG);*/
	    	background-color: var(--blue);
	    }
	    #industrial_cta .content {
	    	display: -ms-grid;
	    	display: grid;
	    	-ms-grid-columns: 1fr 1fr;
	    	grid-template-columns: 1fr 1fr;
	    }
	    @media only screen and (max-width:768px) { 
	    	#high_power_services .content {
		    	display: -ms-grid;
		    	display: grid;
		    	-ms-grid-columns: (1fr)[1];
		    	grid-template-columns: repeat(1, 1fr);
		    	/*text-align: center;*/
		    }
		    #industrial_cta .content {
		    	display: -ms-grid;
		    	display: grid;
		    	-ms-grid-columns: 1fr;
		    	grid-template-columns: 1fr;
		    }
	    }

	/*~~~~~~ @OTHER // @about // @contact // @thanks  ~~~~~~~~~~~~~~~ */
	    #uh_oh h1 {
	      font-family: Rockness, script;
	    }
	    /*#site_notes {display: none;}*/
	    #site_notes ul li {display: inline;list-style: none; padding:15px;}
	    #status .content {
	      display: -ms-grid;
	      display: grid;
	      -ms-grid-columns: 1fr 1fr;
	      grid-template-columns: 1fr 1fr;
	      margin:5px;
	    }
	    code {
	      background:yellow;
	      padding:15px;
	      margin:25px;
	      display: block;
	    }

	    #sg_colours .content{
	      display: flex;
	      grid-gap: 15px;
	    }
	    #sg_colours .biz_colours {
	      padding:35px;
	      background:#f7f7f7;
	    }
	    #privacy {
	      font-size: 14px;
	      line-height: 1.3em;
	    }
	    #privacy br {
	      line-height: 2em;
	    }
	    #hero_about {     
	      background-position: center bottom;
	      padding:15vh 0 5vh 0;
	      background-image: url(/assets/imgs/Bizclean-Mats-Hygiene-Services-Office.jpg);
	    }
	    #hero_about h1 {
	      padding:0;margin:0;
	      color:#ffffff;
	    }
	    #region_image {
	    	background-image: url(/assets/imgs/1.-goondivancropped_web_1200.JPG);
	    }
	    #region_image .content {
	    	padding-bottom:300px;
	    }
	    #grid_section_2 .content {
	      display: -ms-grid;
	      display: grid;
	      -ms-grid-columns: 1fr 1fr;
	      grid-template-columns: 1fr 1fr;
	      grid-gap:35px;
	    }
	    #contact_form form {
	      /*border:3px red solid;*/
	      display:-ms-grid;
	      display:grid;
	      -ms-grid-columns: 1fr;
	      grid-template-columns: 1fr;
				/*max-width: 680px; */
				min-width: 300px;
	      margin: 0 auto;
	    }
	    #contact_form input{
	      text-align: left;
	    }
	    #contact_form .contact_checkbox {

	    }
	    #contact_form button {
	      background-color: #fff;
	      color: #2aa9e0;
	      font: bold;
	      padding: 10px 30px 10px;
	      border: 0;
	      border-radius: 5px;
	    }
	    #hero_delivery {     
	      background-position: center center;
	      background-repeat: no-repeat;
	      background-size: cover;
	      min-height:5vh;
	      padding:10vh 0 5vh 0;
	      margin:0;
	      background-image: url(/assets/imgs/1.-goondivancropped_web_1200.JPG);
	    }
	    #hero_delivery h1 {
	      color:white;
	    }
	    #hero_delivery .content {
	      padding-top:0;
	      padding-bottom:0;
	      margin-top:0;
	      margin-bottom:0;
	    }
	    #thanks {text-align: center;}
	    #thanks h1 {
	      font-family: Rockness, Oxygen, sans-serif;
	      font-size: 3em;
	    }
	
	/*~~~~~~ @Free Trial Page ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
		#trial_banner {
		      padding:10vh 0 5vh 0;
		      background-image: url(/assets/imgs/1.-goondivancropped_web_1200.JPG);
	  	      background-position: right center;

		}
		.trial_form form {
			display: -ms-grid;
			display: grid;
			-ms-grid-columns: 1fr 1fr;
			grid-template-columns: 1fr 1fr;
			grid-gap: 35px;
			width: 80%;
			margin:0 auto;
		}
		.trial_form .col {
			display:-ms-grid;
			display:grid;
			-ms-grid-columns: 1fr;
			grid-template-columns: 1fr;
			align-content: start;    
		}
		.trial_form .col input {
			text-align: left;  
		}
		.trial_form textarea {
			width:90%;	
		}
		.trial_form .para1 {
			-ms-grid-column: 1;
			    grid-column-start: 1;
			-ms-grid-column-span: 2;
			grid-column-end: 3;
		}
		.trial_form button {
			width:40%;
			/*text-align: center;*/
			margin:0 auto;
			-ms-grid-column: 1;
			    grid-column-start: 1;
			-ms-grid-column-span: 2;
			grid-column-end: 3;
		}
		@media only screen and (max-width:768px) { 
			.trial_form form, .trial_form .col {
				-ms-grid-columns: 1fr;
				grid-template-columns: 1fr;
				width: 100%;
			}
			.trial_form button {
				-ms-grid-column: 1;
				    grid-column-start: 1;
				-ms-grid-column-span: 1;
				grid-column-end: 2;
				width:100% !important;
			}
			.trial_form .para1 {
				-ms-grid-column: 1;
				    grid-column-start: 1;
				-ms-grid-column-span: 1;
				grid-column-end: 2;
			}
		}
	/*~~~~~~ @Shopfront Download  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
		#hero_shopfrontDownload.hero {
			background-image: url(/assets/imgs/milk-and-honey-cafe-bizclean-welcome-entrance-mat.jpg);
			background-position: center 80%;
			height:65vh;
		}
		@media only screen and (max-width:768px) { 
			#form_shopfrontDownload img {
				margin-top:-100px;
				max-width: 100% !important;
			}
			#form_shopfrontDownload form, #form_shopfrontDownload input, #form_shopfrontDownload button {
				/*grid-template-columns: 1fr;*/
				min-width:100%; 
			}
		}
	/*~~~~~~ INSERT_PAGE_NAME ~~~~~~~~~~~~~~~~~~~~~~~~~~~*/