/* author : Derek Seymour SqueezeMyLizard.com

	who 	: Dirk Seymour
	what	: custom websites
	why 	: to provide excellence
	when	: depends how big, etc
	where 	: New Zealand Auckland mega-city 1

*/


@import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap');


/*pseudo class*/
:root{
 /*header */
  --Header_Background_Color : black;
  --Title_Font    			:'Shadows Into Light', cursive;
  --Title_Text_Color 		: lightgrey;
  --Title_Text_Size			: 6em;
  --Title_Background_Color 	: black;

  --Main_Bg_Color       : black;
  --Logo_Color          : lightgrey;
  --Main_Txt_Color      : lightgray;
  --Main_Font_Size      : 1rem;
  --Grid_Column_Count   : 12;
  --Grid_Column_Gap     : 30px;
  --Grid_Row_Gap        : 30px;
  --Grid_Min_Col_Width  : 240px;
  /* services */
   --Service_Grid_Min_Col_Width: 240px;
   --Background_Opacity :  rgba(33,33,33,0.6);

}

main{width:100%}
section{padding : 20px;}
html {
  height: 100%;
}

body {
  background-color      : var(--Main_Bg_Color);
  color                 : var(--Main_Txt_Color);
  font-size             : var(--Main_Font_Size);
  top                   : 0;
  min-width				: fit-content;
  width 				: 100%;
  height				: 100%;
  display				: grid;
  grid-template-rows	: auto 1fr auto;
  grid-template-areas   : "head"
						  "content"
						  "foot";
  margin-top:0;
}

.title_font{font-family : var(--Title_Font);}

#button {
  display: inline-block;
  background-color: #FF9800;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color .3s,
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}
#button::after {
  content: "\f077";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 2em;
  line-height: 50px;
  color: #fff;
}
#button:hover {

}
#button:active {

}
#button.show {
  opacity: 1;
  visibility: visible;
}



 
  



.twelve_col_grid{
	display : grid;
	overflow: hidden;
	grid-template-columns: repeat(var(--Grid_Column_Count), [col-start] 1fr);
	grid-row-gap : 20px;

}


    .SPAN_1{ grid-column:  auto /span 1; }
    .SPAN_2{ grid-column:  auto /span 2}
    .SPAN_3{ grid-column:  auto / span 3}
    .SPAN_4{ grid-column:  auto /span 4}
    .SPAN_5{ grid-column: auto /span 5}
    .SPAN_6{ grid-column:  auto /span 6}
    .SPAN_7{ grid-column: auto /span 7}
    .SPAN_8{ grid-column:  auto /span 8}
    .SPAN_9{ grid-column: auto /span 9}
    .SPAN_10{ grid-column: auto /span 10}
    .SPAN_11{ grid-column:  auto /span 11}
    .SPAN_12{ grid-column:  auto /span 12;}

	.ROW_1{ grid-row:  auto /span 1}
    .ROW_2{ grid-row:  auto /span 2}
    .ROW_3{ grid-row:  auto / span 3}
    .ROW_4{ grid-row:  auto /span 4}
    .ROW_5{ grid-row: auto /span 5}
    .ROW_6{ grid-row:  auto /span 6}
    .ROW_7{ grid-row: auto /span 7}
    .ROW_8{ grid-row:  auto /span 8}
    .ROW_9{ grid-row: auto /span 9}
    .ROW_10{ grid-row: auto /span 10}
    .ROW_11{ grid-row:  auto /span 11}
    .ROW_12{ grid-row:  auto /span 12}






.grid {
   width 	   : 100%;
   display     : grid;
   position    : relative;
   column-gap  : var(--Grid_Column_Gap);
   row-gap     : var(--Grid_Row_Gap);
   grid-template-columns: repeat(auto-fit, minmax(var(--Grid_Min_Col_Width), 1fr));
 }

.contact_details{font-size : 1.5em;}
.contact_details{font-family : var(--Title_Font);}



.main_header {
  text-align: center;
}

.main_header h1{

  font-size : 100px;
  border-top: 1px dashed grey;
  border-bottom: 1px dashed grey;
  font-family  : var(--Title_Font);
  display: inline-block;
}

.main_header .fa-scissors {position:relative;top: -20px;}


.contact_header {position:absolute; top: 0; left : 75vw;}

header{grid-area : head; display:inline-block;}


main{grid-area : content;
	 }

footer{grid-area : foot;}

h1,h2,h3,h4{
	text-align : center;
	color : var(--Main_Txt_Color);
}

.text_with_1px_border
{
    text-shadow: 
        -1px -1px 0px #000,
         0px -1px 0px #000,
         1px -1px 0px #000,
        -1px  0px 0px #000,
         1px  0px 0px #000,
        -1px  1px 0px #000,
         0px  1px 0px #000,
         1px  1px 0px #000;
}

.text_with_2px_border
{
    text-shadow: 
        /* first layer at 1px */
        -1px -1px 0px #000,
         0px -1px 0px #000,
         1px -1px 0px #000,
        -1px  0px 0px #000,
         1px  0px 0px #000,
        -1px  1px 0px #000,
         0px  1px 0px #000,
         1px  1px 0px #000,
        /* second layer at 2px */
        -2px -2px 0px #000,
        -1px -2px 0px #000,
         0px -2px 0px #000,
         1px -2px 0px #000,
         2px -2px 0px #000,
         2px -1px 0px #000,
         2px  0px 0px #000,
         2px  1px 0px #000,
         2px  2px 0px #000,
         1px  2px 0px #000,
         0px  2px 0px #000,
        -1px  2px 0px #000,
        -2px  2px 0px #000,
        -2px  1px 0px #000,
        -2px  0px 0px #000,
        -2px -1px 0px #000;
}



.client_logo_text_cell_title p {
	position:relative;
	text-align: center;

	font-size : 3em;

	
}


.client_logo_text_cell_title h1 {
	position:relative;
	text-align: center;

	font-size : 10em;

	
}

.client_logo_text_cell_title h2 {
	position:relative;
	text-align: center;
	font-size : 8em;

	
}

.client_logo_text_cell_title h3 {
	position:relative;
	text-align: center;
	font-size : 6em;

	
}
.client_logo_text_cell_title h4 {
	font-size : 4em;

	
}


.header{

}

.twelve-col-grid.main_pic{height : 500px;}


.line_dec{
    width: 50%;
    height : 2px;


	background-color: #CD853F;
	border-width : 1px;
    margin: 1px auto 1px auto;
 }



.header.title h1{
  letter-spacing		: 10px;
  color 				: var(--Title_Text_Color);
  font-size   			: var(--Title_Text_Size);
  font-family 			: var(--Title_Font);
  text-transform 		: uppercase;
}





.copyright{font-size:1.4em; color : var(--Main_Txt_Color);}
.copyright a{border-bottom: 1px white dotted;}

/* social media icons */


.fa-arrow-circle-down{background-color : black;	font-size : 3em;}


.facebook:hover {
    opacity: 0.7;
}

.facebook .fa-circle{
  background-color : black;
  color: #3b5998;
}
.fa-facebook {
  color: lightgrey;
  /*color: lightgrey;
  */
   text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    font-size:1.3em;
}

.pinterest:hover {
    opacity: 0.7;
}

.pinterest .fa-circle{
  background-color : black;
  color: #c8232c;
}
.fa-pinterest {
  color: lightgrey;
  /*color: lightgrey;
  */
   text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    font-size:1.3em;
}

.instagram:hover {
    opacity: 0.7;
}

.instagram .fa-circle{
  background-color : black;
  color: #f09433;
}
.fa-instagram {
  color: lightgrey;
  /*color: lightgrey;
  */
   text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    font-size:1.3em;
}

.linkedin:hover {
    opacity: 0.7;
}

.linkedin .fa-circle{
  background-color : black;
  color: #0e76a8;
}
.fa-linkedin {
  color: lightgrey;
  /*color: lightgrey;
  */
   text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    font-size:1.3em;
}


.soundcloud:hover {
    opacity: 0.7;
}

.soundcloud .fa-circle{
  background-color : black;
  color: #ff5500;
}
.fa-soundcloud {
  color: lightgrey;
  /*color: lightgrey;
  */
   text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    font-size:1.3em;
}

.twitter:hover {
    opacity: 0.7;
}
.twitter .fa-circle{
   background-color : black;
   color : #55ACEE;

}

.fa-twitter {
   color: lightgrey;
   text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
   font-size:1.5em;
}

.github:hover {
    opacity: 0.7;
}

.github .fa-circle{
  background-color : black;
  color:lightgrey;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}



.fa-github{
  color : black;
  font-size:1.5em;

}


a, a:focus, a:visited {
  color:  lightgrey;  /*#d4566b*/
  text-decoration: none;
}

a:hover {

  color : goldenrod;
  text-decoration: none;
}

/* Page header */
header {
  padding: 15px 0 15px;
  width: 100%;
  /*background: rgb(25,17,18);
  background: linear-gradient(135deg, rgba(25,17,18,1) 0%,rgba(55,28,25,1) 100%);*/
  background : black;
  z-index: 10;
}
header h3 {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 40px;
}


blockquote {
    margin: 0;
	border-left: none;
	text-align:center;
}

blockquote p {
    padding: 15px;
    border-radius: 5px;
}



blockquote p.text::before {
   left:0;
   font-size : 1em;
   font-family:FontAwesome;
   font-weight: 200; content: "\f10d";
   padding : 10px;
}

blockquote p.text::after {
   left:0;
   font-size : 1em;
   font-family:FontAwesome;
   font-weight: 200; content: "\f10e";
   padding : 10px;
}



/*images*/

 

/* Main menu */

/*always on breadcrumbs*/
nav {
    margin-left : 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
    display: block;
  }

.menu_btn{position:absolute; top : 10px; left:10px;}

.fa-bars{visibility : visible; position:absolute; left:0;}
.fa-window-close{visibility : hidden;position:absolute; left:0;}

/* menu items on small devices are hidden by default, and controlled by fa-bars,fa-window-close, + javascript */



.flex_menu{
	flex-wrap: wrap;
	height : auto;
	width  : auto;
	position:relative;
	padding : 10px;
	display : none;
	flex-direction : column;

	border-width : 1px;
	background: linear-gradient(to right, rgba(21,38,44,0.8) 0%,rgba(0,0,0,0.9) 100%);
}

.flex_menu > div {
   width: auto;
   font-size : 2em;
 }


.flex_menu > div:before {

}


@media (min-width: 500px) {
	.flex_menu{flex-direction: row;
				display : flex;
				height : auto;}
	.menu_btn{visibility : hidden;}
	.fa-bars{visibility  : hidden;}

}


/*
.nav-pills>li+li {
  margin-left: 0;
}
.nav-pills>li>a {
  border-radius: 0;
  color : lightgrey;
  font-size: 1.75em;



}
.nav-pills>li>a:before {
   left:0;
   font-size : 1em;
   font-family:FontAwesome;
   font-weight: 200; content:  "\f292";
   color : lightgrey;
}


.nav-pills>li.active>a,
.nav-pills>li.active>a:focus,
.nav-pills>li.active>a:hover,
.nav>li>a:focus,
.nav>li>a:hover{

  color: goldenrod;
  background-color: transparent;
  border-bottom: 1px dotted lightgrey;

}
.nav-pills> li:first-of-type > a {
  padding-left: 0;
}
.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
  background-color: transparent;
  border-top: 1px solid lightgrey;
}

*/

.dropdown-menu {
  background-color: rgba(25,17,18,1);
  border-radius: 0;
  border: transparent;
}

.dropdown-menu > li> a {
  border-bottom: 1px solid #371c19;
  color: #fff;

  padding: 10px 20px;
}

.dropdown-menu > li> a:hover {
  background-color: transparent;
  color: lightgrey;
}
/* Menu dropdown hack to allow toggling */
li.has-submenu a.allow-toggle {
  float: left;
  padding-right: 0;
}
.caret-custom {
    float: right;
    display: inline-block!important;
    padding: 10px 10px 15px 5px!important;
}
.caret-custom:after {
    content: "▼"!important;
}
/* Mobile menu styling
@media (min-width: 500px) {
  .nav-pills>.presentation {
    float: none;
    width: 100%;
  }
  .nav-pills> li > a {
    border-top: 1px solid rgba(255,255,255,.1);
    padding: 20px 0;
  }
  li.has-submenu a.allow-toggle {
    float: none;
  }
  li.has-submenu a.caret-custom {
    display: none!important;
  }
}
/* Custom page footer */



/* Breadcrumbs */
.breadcrumb-container {
  background: linear-gradient(to right, rgba(21,38,44,0.8) 0%,rgba(0,0,0,0.9) 100%);

  position: relative;
  z-index: 3;
}


.breadcrumb {
  background-color: transparent;

  font-size: 2em;
  margin-bottom: 0px;
  padding-left: 10px;

}
.breadcrumb a, .breadcrumb .active {

   color : lightgrey;
}
.breadcrumb .active {
  font-weight: 400;
  color : lightgrey;
}
.breadcrumb a:hover {
  color : goldenrod;
  text-decoration: none;
}

.breadcrumb ol li{color : red;}

.breadcrumb>li+li:before {

   font-family:FontAwesome;
   font-weight: 900; content: "\f0da";
}

/* Mobile nav */
.navbar-toggle{position:absolute; top : 25px; right:-10px;}
.navbar-toggle .icon-bar {
  background-color: #fff;
}

/* Pagination navigation */
nav[role=pagination] {
  margin-top: 50px;
  text-align: center;
}




/* Generic title image header include */
.base-header img {
  height: auto;
  margin-top: 20px;
  max-width: 100%;
  width: auto;
}

@media (max-width: 970px) {
  .base-header img {
    width: 100%;
  }
}


.home_page_child_introduction{padding:2px 10px 2px 10px;}
.block-paragraph_block{font-size : 1.5em; padding:5px;background-color : rgba(33,33,33,0.6);}
.block-paragraph_block ol{line-height : 1.5em;}
.block-paragraph_block a{border-bottom: 1px white dotted;}


figure img {
  display: block;
  width: 100%;
  height: auto;
}

.background{
   width: 100%;
   height: auto;
}

.richtext-image.full-width{
  display: block;
  width: 100%;
  max-width:600px;
  margin-left: auto;
  margin-right: auto;
  height: auto;}


/* From Wagtail core */
.richtext-image.left{
    float:left;
    width: auto;
	height:auto;
	top : -20px;
	left: -10px;
	position:relative;

}
.richtext-image.right{
    float:right;
    width: 50%;

}


.promo_text {color : lightgrey; font-size : 1.7em; line-height : 2.5em; padding:20px; background-color : rgba(33,33,33,0.8);}

.location_index_text{text-align:center;color : lightgrey; font-size : 1.7em; line-height : 2.5em; padding:20px; background-color : rgba(33,33,33,0.8);}


.content.promo_text ul{background-color : rgba(33,33,33,0.8);  }

.content.promo_text ul li{padding:10px;}



.services.promo_text p:before {
   left:0;
   font-size : 1em;
   font-family:FontAwesome;
   font-weight: 200; content: "\f10d";
   padding : 10px;
}

.services.promo_text p:after {
   left:0;
   font-size : 1em;
   font-family:FontAwesome;
   font-weight: 200; content: "\f10e";
   padding : 10px;
}




.promo_text > ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

.promo_text > ul >li {
  padding-left: 1em;
  text-indent: -1em;
}

.promo_text > ul > li:before {
  font-family:FontAwesome;
  content: "\f0c4";
  padding-right: 5px;
  font-size : 0.8em;
}

.promo_text a{border-bottom: 1px white dotted;}



/*  SERVICES */

.service_flex{display:flex;flex-direction: column; height:100%;  align-items: stretch; }
.service_flex_item{flex:1;}


.service_grid{
   position				 : relative;
   display     			 : grid;
   row-gap				 : 30px;
   column-gap			 : 30px;
   grid-template-columns : repeat(auto-fit, minmax(var(--Service_Grid_Min_Col_Width), 1fr));


}


a {font-color : lightgrey;}

.service_grid_item{
    
	display:flex;
	justify-content: center;
	align-items: center;
	position:relative;
	min-height:240px;
	min-width:240px;
	font-size : 1.6em;
	
	line-height : 1.5em;}

.background_rgba{background-color : rgba(33,33,33,0.9);}

.service_body{
	font-size:  1.5em;

	margin-bottom : 20px;
	padding : 20px;}


.service_icon{color : var(--Logo_Color);}

.service_intro{
	font-size:  1.5em;
	background-color : rgba(33,33,33,0.9);
	margin-bottom : 20px;
	padding : 20px;}
.service_title{font-size:  3em;background-color : rgba(33,33,33,0.9); margin-bottom : 20px;}




.read_more{position:absolute; bottom : 3px; right: 3px;}

.read_more .fa-chevron-right{ font-size : 2em;color:goldenrod;}

.fa-chevron-right:hover{color : gold;}



/* Logo */
figcaption{text-align:center; font-size:1.5em;}


.service_background_image{
	margin : auto;
	max-height : 240px;
	max-width  : 240px;
	background-repeat:no-repeat;

	background-size: cover;
	background-position: center center;
	
}

.hero_image{
	display: flex;
    align-items: center;
    justify-content: center;

	min-height : 300px;
	width  : auto;
	background-repeat:no-repeat;

	background-size: cover;
	background-position: center center;
}

.blog_hero_image{
	display: flex;
    align-items: center;
    justify-content: center;
	border-style : dashed;
	border-width : 1px;
	height : 300px;
	width  : auto;
	background-repeat:no-repeat;

	background-size: cover;
	background-position: center center;
}

.client_hero_image{
	display: flex;
    align-items: center;
    justify-content: center;

	height : 250px;
	width  : auto;
	background-repeat:no-repeat;

	background-size: cover;
	background-position: center center;
}



.logo_text_cell_title{
	width : 100%;
	height : 100%;
	display:flex;
	justify-content: center;
	align-items: center;
}
.logo_text_cell_title h1 {
	position:relative;


	font-size : 4em;

	background-color : var(--Background_Opacity);
}

.logo_text_cell_title h2 {
	font-size : 3rem;

	background-color : var(--Background_Opacity);
}



@keyframes logo_text {
  from {left : -1300px;top:0px; }
  to   {left : 0px;top :0px;}
}






.logo_image_cell{
	grid-column : 1 /span 12;
	grid-row : 1;
 	text-align: center;
}


.logo_image_cell img{
	background-color : rgba(33,33,33,0.1);
	border-radius:50%;
	display : inline;
	width  : 0px;
	height : 0px;
	animation-name: logo;
    animation-duration: 4s;
	animation-fill-mode: forwards;

}

@keyframes logo{

  to   {width: 300px;
		height:300px;
		transform: rotate(360deg);
		filter: grayscale(100%); }
}


.logo {
	position:absolute;
	top: 10px;
	lightgrey-space:no-wrap;
	margin: 0 auto;
	color: var(--Logo_Color);
    font-weight: 300;
	margin: 0 0 0;
    letter-spacing: 1em;
}


.logo, .logo:visited, .logo:focus {

  display: inline-block;
  padding: 0;
  color: var(--Logo_Color);




}


.logo:hover {
  color: goldenrod;
  text-decoration: none;
}


.service_image{
	display: flex;
    align-items: center;
    justify-content: center;
	background-repeat:no-repeat;
	background-size: cover;
	background-position: center center;
}


.client_image{max-width;240px;  text-align: center;}





.grid .box .content.service{font-size : 1.5em; line-height : 2em; min-height:200px; overflow:hidden;}




.content.service{color : lightblue; font-size:1.5em; line-spacing : 1.25em;}






/*.box.about{grid-row:  auto /span 2; grid-column:  auto /span 2}*/


.hero-text{
			height:100%;
			text-align: center;
			vertical-align: middle;
			line-height: 60px;       /* The same as your div height */
}



 .responsive_iframe {
  display : block;
  margin: 0 auto;
  text-align : center;
  position: relative;
  overflow: hidden;
  max-width : 500px;
  height    : 300px;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

iframe{
  border:none;
  position: absolute;
  top: 0;
  left: 10px;
  bottom: 0;
  right: 0;
  width: 95%;
  height: 100%;}

/* blog */

.tag_grid {
   width 	   : 100%;
   display     : grid;
   position    : relative;
   column-gap  : var(20px);
   row-gap     : var(--Grid_Row_Gap);
   grid-template-columns: repeat(auto-fill, minmax(50px,100px));
}

.tag_grid_col{font-size : 2em}

.blog_none{font-size : 2.5em}  /*no blog entries */
.blog_tags{font-size : 1.5em}

.blog_contact{font-size : 1.25em; text-align: center}

.blog_intro{padding : 20px;}