/* andrew moor DOT com */

*,
*::after,
*::before{
	box-sizing: border-box;}

  :root {
    --green: hsl(80, 61%, 50%);
    --red:   hsl(0, 87%, 69%);
    --slate: hsl(180, 25%, 25%);
    --aqua:  hsl(187, 42%, 85%, .5);
    --blue:  hsl(188, 67%, 65%);
	--marine: hsl(200, 56%, 44%);
  }

button,
input,
textarea,
select {
font: inherit;
background:  whitesmoke;
margin:  2%;
padding: 16px;
}



/* width */
::-webkit-scrollbar {
    width: 20px;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: var(--slate);
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: var(--red);
  }
  



html, body
{padding: 0; margin: 0;}

body
{background:#fff; 
 position: relative; -webkit-text-size-adjust: none; margin: 0;  font-family: 'Nunito', sans-serif;
}
  

body *{	text-shadow: none;}

h1, h2, h3, h4, h5, h6
{	line-height: 1;	margin: 0; }


h1 {font-size:1.4em; line-height: 1.6em; padding: 4px 12% 0 5%; 
color:#208BC0; 
font-weight: 400; font-variant:normal; font-variant: small-caps;}

h2{font-size: 1.2em;  padding:12px 5%;  line-height: 1.8em; color:#444; 
margin: 0; font-weight: 400; }

h3{	font-size: 1em; line-height: 1.6em; padding: 0 12% 23px 5%; color: #111; font-weight: 300; margin: 0;}

h4 {font-size: 1em; padding: 0 12%; color: #3185AF; 
font-weight: 500; line-height: 1.6em;}

h5 {font-size: .9em; padding:0 5%; color: #2F86B1; 
font-weight: 100; line-height: 1em; margin:0;}

.credit {text-align:right;}
.credit:hover { color: #fff;}
h6 {font-size: .95em; padding: 12px 8% 0 12%; color: #fff; font-weight: 300; line-height: 1.8em;}



p{font-size: .9em; margin: 0 ; 
padding:0 5%; font-weight: normal; 
line-height:2em; color: #444;
}


@media only screen and (max-width: 768px) 
{ h1, h2, h3, p {padding: 1% 12%;}}


@media only screen and (max-width: 480px) {
	h1 { padding: 23px 5% 0 5%;}
	h2 {font-size: 1.4em;}
	h3 {font-size: 1.08em;}
	h4 {font-size: 1.15em; padding: 12px 5% 0 5%; color: #333; font-weight: 300; line-height: 1.6em;}
	h2, h3, h4, p{ padding:2% 5%; }
	h5 {font-size: .8em; padding: 12px 5% 0 5%; color: #333; 
	font-weight: 100; line-height: 1.6em;}}
	
/*
.menu {margin: 0;} /*{margin: 0 0 0 32px; font-size: 1.2em;}
.menu2  {margin: 0 0 0 120px;font-size: 1.2em;}
.menu3  {margin: 0 0 0 100px;font-size: 1.2em;}
.menu4  {margin: 0 0 0 42px;font-size: 1.2em;}
*/
.lge {font-size: 1.8em; color: #5CA00D;}
.sml{font-size:.6em;  letter-spacing: .12em; padding: 0 0 0 12px; color: #ccc;}
.smlrecent{font-size:.6em;  letter-spacing: .08em; padding: 0; color: red;}

#one .sml {font-size:.6em;  letter-spacing: .1em; padding: 0 0 0 4px; color: tomato;}
#two .sml {font-size:.6em;  letter-spacing: .1em; padding: 0 0 0 4px; color: tomato;}
#three .sml {font-size:.6em;  letter-spacing: .1em; padding: 0 0 0 4px; color: tomato;}


.white {color: #fff; font-size: 1.2em;}
.red {color: #f00;}
.red2 {color: #a00; letter-spacing: .05em; font-size: 0.8em;}

.pink {color: #fff; font-size: 3em;}
.quote {background: url(quote.png) no-repeat; margin: 0 0 0 6%; font-style: italic; letter-spacing: .1em; } 
.subhead {font-size: 2.3em; padding:0 6% 12px 6%; font-weight: 100;}

.fab, .fas, .far {padding: 0 0 0 4px; font-size: 1.2em; }

hr {width: 100%; height: 12px; background: #fff; margin: 50px 0; border: 0;}


.column  {-webkit-columns: 100px 2;   padding:0 6% 0 6%;/* Chrome, Safari, Opera */
    -moz-columns: 100px 2; padding:0 6% 0 6%; /* Firefox */
    columns: 100px 2;  padding:0 6% 0 6%;}
	
	 @media only screen and (max-width: 768px) { 
.column  {-webkit-columns: 100px 1; /* Chrome, Safari, Opera */
    -moz-columns: 100px 1; padding:0 2% 0 2%; /* Firefox */
    columns: 100px 1;}	 }


a, a:link, a:active, a:visited, a:hover
{color: tomato; border-bottom: 0;text-decoration: none; outline:none; }
a {outline: none;}
a:hover{color: orange; text-decoration: none; outline:none; border:0;  }

img { max-width: 100% !important; height: auto; 
padding: 0 auto; border:0;} 

iframe {background: #f5f5f5;margin: 30px 10%;
width: 80%;}


/* menu stuff g'wan 'ere*/

#site {background: transparent; height: auto; width: 90.5%; 
margin: 0 2% 0 7.5%;}


@media only screen and (max-width: 1200px) 
{#site {margin:0; width: 100%; }}


 .content, .footer {text-align: left; background: transparent;}

.header
{	background:#FF9200;	font-weight: normal; color: #fff;
	-moz-box-sizing: border-box; box-sizing: border-box;	
	width: 100%; top: 0; height: 0px; 
	padding: 0 50px; position: fixed; opacity: .8;}

	
	.header2
{	background:#FF9200;	font-weight: normal;
	color: #fff;
	-moz-box-sizing: border-box; box-sizing: border-box;	
	width: 100%; top: 0; height: 50px; opacity: .9;
	padding: 7px 0px 0 0; position: fixed;}
	

	@media only screen and (min-width: 481px) { 
		.header {width: 10%;} 
		.header2 {display: none;}	 }
	

/*==========content ===============*/

.socmed { padding: 0px 0 0 23px; }
.one {color: #006;  font-weight: 100;}
.two {color: #A7E9FF; padding: -50px 0 0 0;  font-weight: 100;}

.green {color:  #5CA00D;}
.spacer {  clear: both;  height: 20px; margin: 10px 0;}


#intro {background: #fff; height: auto;  padding: 50px 0 0 0;} 
#intro a {color:#000;}
#intro a:hover {color:#f00;}


@media only screen and (max-width: 480px) { 
#intro {background:  #e5e5e5; height: auto;  padding: 0px 5% 30px 5%; width: 90%} 
}


#bar {background: #fff; width: 100%; height:auto; padding:  0; margin:0; }
#bar h2 {padding: 0 5%;}
#bar h3 {max-width: 75em; text-align:justify; padding: 0 5% 6px 5%;}

#bar img {padding:0px; border:0 !important; width: 100%; }

@media only screen and (min-width: 1920px) {
	#bar h3
{max-width: 90em; }
}

@media only screen and (max-width: 600px) {
	#bar h2 {font-size: 1.2em;}
}

@media only screen and (max-width: 920px) { #bar { padding: 70px 0 0 0;}}

@media only screen and (max-width: 480px) { #bar {background: #fff;} 
#bar h1  {font-size: 3em;}
#bar h3 {font-size: 1em;}}


#first {background: transparent; height: auto; padding: 0; margin:0;}
#first img {margin:  0px;  border: 0; max-width:100% !important;}
#first h1 {padding: 40px 0 0 5%;}
#first h2 { padding:12px 12% 12px 5%; margin: 0;  }
#first h3 {font-weight: 100; font-size: 1em; padding: 0 5%; }


@media only screen and (max-width: 480px) {
	#first h1, #first h3 {padding: 5% 0 0 5% !important;}
}

.hold {background: white; width: 100%, height auto;}


#second {background:  transparent; height: auto; padding: 0; margin: 0; width:100%; text-align: right; }

#second h1 { padding: 0 8%;}

#second h2 {font-size: 1.08em; line-height: 1.4em; color: #999; padding: 2% !important;}

#second h3{padding: 0.5% 2% 10px 0%; color: #aaa; font-size: .85em; letter-spacing: .09em;}

#second p {padding: 0 2%;}

@media only screen and (max-width: 480px) {
#second h2 {padding: 0 5%;}		}


#third {background: #fff; height: auto;  padding: 0; margin:0; width: 100%;
} 
#third h1 {color: #e00;}
#third h2 {padding: 23px 12% 12px 3%; font-size: 1.2em; font-variant:small-caps; color: #555;}
#third h4 {font-variant:small-caps; letter-spacing: 0.108em;}
#third a {padding: 3px 6px; color: #2789B9; }
#third a:hover{background: #2789B9; color: white; border-radius: 3px;}
#third a:active {background: orangered;}
#third h6 {font-size: 4em; padding: 50px 8%; color: #fff;}
#third img {margin: 0 18px 0 0;}

#books {width: 30%; height: auto; background: #1B8DC5 url(cross.png) repeat; 
float:left; padding:0 0.5% !important; margin: 0 1%; 
border: 0px solid #eee; border-radius: 3px;}

#books img {border: 1px solid white;}

#books h2 {color: white;}
#books p {padding: 0 12% 0 3% !important; color: white;}

@media only screen and (max-width: 800px) {
#books 	{width: 90%; height: auto; margin: 0 5% 4% 5%}	
}


#four {width: 100%; float: left;  padding:0; height: 23px; margin: 0; background: #fff; border-bottom: 0;}
#four a{ color: #ccc !important;}
#four a:hover { color: tomato !important;}
#four h4 {font-size: .95em; padding:1% 0% 0px 1%  !important; color: #ddd !important;} 



#five {width: 100%; float: left;  padding:0; height: 2px; margin: 0; background: white !important; border-bottom: 0;}
#five a{ color: #ccc !important;}
#five a:hover { color: tomato !important;}
#five h4 {font-size: .95em; padding:0% 0% 0px 1%  !important; color: #ddd !important;} 


.blog {
    width: 95%; 
    padding: 5% 2.5% ; 
	margin: 5% 2.5%;
    background: white; 
    height: auto; 
    border: white solid 4px;
    border-radius:8px;
    box-shadow: 0px 0px 60px hsla(204, 4%, 78%, 0.23);
}

.blog img {width: 100%;}




.footer
{	background: var(--marine);
	font-weight: normal;	width: 100%;
	height: 560px; margin: 0; text-align: right; 
	padding: 0 0 32px 0; 
}

.footer:hover {background: hsl(200, 76%, 44%); transition: 3.2s;}
	 
.footer img {border: 0;}
.footer.fixed{position: fixed; bottom: 0; left: 0;}

.footer a {color: white; border-bottom: 1px dotted #ddd; padding: 0 0 3px 0;}

.footer a:hover {color:white; border-bottom: 2px solid white;}

.footer a:active {
  background: hsl(255, 100%, 100%) !important;
  color: #3185AF ;
  padding: 10px 0px;
  transition: 3.2s;
}

.footer p {padding:0 5% 0px 2.3%; color: white; text-align: right; font-size: 1em;}

.footer h3 {font-size: 1.4em; line-height: 1.6em; margin: 0; padding: 0px 2.3% 0px 0; font-weight: normal; color: #111;}

.footer .sml {color: #fff;}


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


.footer a:hover { background: transparent;}

.footer p, .footer h3 {color: #eee;}

}




/* --------------- FILTER RESULTS FROM BUTTON*/
* {
  box-sizing: border-box;
}

.btn {
  background: #eee;
  color: #555;
  font-size: 1.08em;
  padding: 10px 10px;
  margin: 10px 1% 12px 0;
  border: 1px solid #ddd;
  border-radius: 3px;
}


.btn:hover {
  background: #3185AF;
  color:  whitesmoke;
  border: 1px solid white;
}

.btn:active {
  background: white;
  color: #3185AF;
  border: #3185AF 1px solid;
  outline: none;
}

.active {
  text-decoration: none;
  background: orangered;
  color: white;
  border: 1px solid whitesmoke;
}


.histoire 
{width: 95%; 
margin: 0 2.5%;
padding: 2% 0;
background: #edf5f9;
border-radius: 6px;
border: 6px solid whitesmoke;
}


.box {
  padding: 0px;
  margin: 0px;
  height: auto;
  width: 16.6%;
  float: left;
}

/* .box2 is on the about page */

.box2 {
  padding: 0px;
  margin: 0px;
  height: auto;
  width: 33.33%;
  float: left;
  
}

.box2 h2 {
  padding: 6px 0 8px 4.5% !important;}
  
  .box2 h4 
  {paadding: 0 !important; }


@media only screen and (max-width: 2000px)  {
	
.box {
  padding: 0px;
  margin: 0px;
  height: auto;
  width: 25%;
  float: left;
}
}



@media only screen and (max-width: 1600px)  {
	
.box {
  padding: 0px 0 0 3%;
  margin: 0px;
  height: auto;
  width: 30.3%;
  float: left
}
	
}



@media only screen and (max-width: 1024px)  {
	
.box {
  padding: 0px 0 0 4%;
  margin: 0px;
  height: auto;
  width: 46%;
  float: left
}
	
}



@media only screen and (max-width: 800px)  {
	
.box {
  padding: 0px 0 15% 5%;
  margin: 0px;
  height: auto;
  width: 95%;
  float: left
}

.box2 {
  padding: 0px 0 0 5%;
  margin: 0px;
  height: auto;
  width: 100%;
  float: left
}
	
}


.box:hover {
    transition: 2.3s;
}



/* =========== code for transform of project tiles on home page ========== */
.flex-container
{  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;  
  display: flex; /* or inline-flex */ }



.flex-container>div 
{ width: 15%;
  margin:0 0.5%; padding:0;
 height: auto; 
 }



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

.flex-container>div 
{ width: 19%;
  margin:0 0.5%; padding:0;
 height: auto; 
 }
}

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

.flex-container>div 
{ width: 24%;
  margin:0% 0.5%; padding:0;
 height: auto; 
 }
}



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

.flex-container>div 
{ width: 31%;
  margin:0% 1%; padding:0;
 height: auto; 
 }
}



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

.flex-container>div 
{ width: 48%;
  margin:0% 1%; padding:0;
 height: auto; 
 }
}


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

.flex-container>div 
{ width: 98%;
  margin:1% 0; padding:0;
 height: auto; 
 }
}



#box { height: auto; width:96% ;float: left; margin:5% 0; 
position:relative; padding:0;  border: 2px solid white;
box-shadow: 0px 0px 60px rgba(23, 23, 23, 0.3); }

#box:hover { transition: 2.3s;  -webkit-filter: grayscale(70%); /* Safari 6.0 - 9.0 */
  filter: grayscale(70%);
     }
	 
/*#box img {width: 96%; padding: 3px 0 0 0;} */


/* about page*/

#box2 { height: auto; 
  width:90% ;
  float: left; 
  margin:5% 0; 
  position:relative; 
  padding:0;  
  border: 1px solid #e5e5e5;
  box-shadow: 0px 0px 0px rgba(23, 23, 23, 0); }
  
 #about {background-color: whitesmoke; padding: 6px 6px 12px 6px; height: 360px ;}

#about p{line-height: 1.6em;}



@media only screen and (max-width: 600px) {
	#box { height: auto; width:47%;	border: 0px; float: left; margin: 1%; position:relative; box-shadow: 0px 0px 0px rgba(23, 23, 23, 0); }
}


@media only screen and (max-width: 1024px) 
{#box, #box2, #box3 {width: 96%; padding: 0 2%;}
}

@media only screen and (max-width: 480px) 
{#box, #box2, #box3 {width: 100%;}
}

#con {width: 100%; height: auto;}
#con h2 {font-variant:small-caps; }
#con h4 {padding: 12px 0 8px 12px;}


/*#con img  {-webkit-filter: grayscale(0%);filter: grayscale(0%); transition: 2.3s ease;} 
#con img:hover  {-webkit-filter: grayscale(80%);filter: grayscale(80%);} */


#one, #two, #three, #four, #five, #six {width:100%; height:80px;
   padding: 0%; margin: 0; float: left; }

#one {background-color: #fff; padding: 6px;}

#two {background-color: #fff; padding: 6px 6px 12px 6px; }
#three {background-color: #fff; padding: 6px;} 
#four {background-color: #fff; padding: 6px;}
#five  {background-color: #fff; padding: 6px;}
#six  {background-color: #fff; padding: 6px;}


#one h2, #two h2, #three h2, #four h2, #five h2, #six h2
{font-size: 1.08em; padding: 0; color: #1F3B49; 
 margin: 0; 
 line-height:1.2em;} 

#one h4, #two h4, #three h4, #four h4, #five h4, #six h4
{font-size: 0.9em; padding: 0; line-height: 1.4em; margin: 0; 
color: slategray; font-variant: normal; letter-spacing: 0.05em; }

#one a, #two a, #three a, #four a, #five a {color: #fff;}
    
#one:hover  { background:transparent; }
#two:hover  { background:transparent;}
#three:hover  { background:transparent;}
#four:hover { background:transparent;}
#five:hover { background:transparent;}
#six:hover { background:transparent;}




#hold {width: 100%; height: auto; float: left;}
#half {width: 50%; height: auto;  float:left;}

 @media only screen and (max-width: 600px) {
	#half {width: 100%; height: auto;  float:left;}
 }


/* =========== code for transform of trip tiles on home page ========== */

#project {width: 31%; height: 240px; background: transparent; float: left; margin: 1%;}
#project img {max-width: 100%;}
#project h2, #project h4 {color: #fff;}
 ul li {	list-style-type: disc; margin: 0px 2% 0 -5%; color:#444; 
 padding: 0 0 8px 23px; }
 
 @media only screen and (max-width: 480px) {
	 ul li { margin: 0px 2% 0 0%; }
 }


/* for desktop yada - - - - - - - - - - - - - - - - - - */



#navcon {width: 100%;  height: 80px; background: #fff; position:fixed; z-index: 32; box-shadow: 0px  0px 60px rgba(230, 230, 230, .7); padding: 0; border-bottom: 1px solid #e5e5e5;}

#navcon a{color: #111 !important; background: transparent;}
#navcon a:hover{color: tomato !important;}

   @media only screen and (max-width: 920px) 
{#navcon {width: 100%; padding:0;}
}


/* #nav2 - right side of nav bar */
#nav2 { width: 40%; height: auto;  margin: 0 0 0 56%; padding: 0 1% 0 0%; float: right;  position: fixed; text-align: right !important; background: white;} 

#nav2 a:hover {color: tomato;}

#nav2 h1 {font-size: 1.1em; padding: 12px 0px 0px 0px ;}
#nav2 h2 {font-size: .77em; padding: 0;  letter-spacing: .4em; color: #1F3B49; font-variant:small-caps;}
#nav2 img {margin: 4px 0 0px 6px; }
#nav2 img:hover {opacity: 0.7;}



   @media only screen and (max-width: 1024px) 
   { #nav2 {width: 100%; 
    height: auto;  
    margin: 50px 0 0 0;
    padding: 30px 0 40px 0;  
    float: right; 
    position: static;   
    z-index: 30; 
    text-align:center !important; 
  
  
  }

   #nav2 h1 {font-size: 1.2em; padding: 0;}
}

   @media only screen and (max-width: 480px) {#nav2 {background: #fff;}	
}

/*@media only screen and (min-width: 1601px){#nav2 {margin:0 15% ; padding: 0 0 0 5%;}}*/


/* nav */

nav { margin:0; width: 46%; position: fixed;   float: left; background: transparent; padding: 12px 0 0 4%; height: 50px;}


@media only screen and (max-width: 1024px) {
nav {margin:  0; padding: 0; width: 100%; position: fixed; z-index: 32;  float: left; }}
	
@media only screen and (max-width: 480px) {#nav {display: none;}}

/*
#nav h3 {padding: 8px 0 0 0px; font-weight: normal; font-size: 1.08em; color: #222; margin: 0;}

@media only screen and (max-width: 920px) {
#nav h3 { font-size: .85em; }	}

*/
nav ul li {	list-style-type: none;	margin: 0; padding:0; }


/* code for menu---- http://www.cssscript.com/pure-css-mobile-compatible-responsive-dropdown-menu/ ------*/
 .toggle, [id^=drop] {display: none;}


nav:after {
  content: "";
  display: table;
  clear: both;
}

nav ul {padding: 0;  margin: 0;  list-style: none;  position: relative;  text-align:left;}

@media only screen and (max-width: 1024px) {	nav ul {text-align:center;}	}


nav ul li {  margin: 0px; display: inline-block; font-size: 1.08em;
  float: left;   z-index: 20; /* here for 2nd part of menu */
  	list-style-type: none;}

nav ul li:hover { opacity: 1; }

nav a {  display: block;   padding: 0 6px; color: #fff !important; line-height: 50px; font-variant:small-caps;
  text-decoration: none;}

nav a:hover {background: tomato; border-bottom: 0;}

nav ul li ul li:hover {color: #000; }

nav ul ul {
  display: none;
  position: absolute;
  top: 50px; 
}

nav ul li:hover > ul { display: inherit;  }

nav ul ul li {
  width:210px; background: #F9F9F9; border-bottom: 0;
  float: none;
  display: list-item;
  position: relative; opacity: 1;
}
	
nav ul ul ul li {
  position: relative;
  top: -60px;
  left: 210px;
  width:270px;
}

nav ul ul ul li:hover {   background: tomato;}

li > a:after { content: ' '; }

li > a:only-child:after { content: ''; }


/* Media Queries
--------------------------------------------- */

@media all and (max-width : 1024px) {


.toggle + a,
 .menu { display: none; }

.toggle {
  display: block; 
  background-color: #3185af; /* colour of mobile device menu */
  padding: 0;
  color: #fff;
   line-height: 50px;
  text-decoration: none; width: 100%;
  border: none; margin:  0; text-align: center; letter-spacing:0.23em;
}

.toggle:hover {  color: tomato; }

[id^=drop]:checked + ul { display: block; }

nav ul li {  display: block;  width: 100%; background: #f9f9f9; padding: 0;}

nav ul ul .toggle,
 nav ul ul a { padding: 20px; }

nav ul ul ul a { padding: 0; }

nav a:hover,  nav ul ul ul a { background-color: #111; color: #fff !important; }

nav ul li ul li .toggle,  nav ul ul a { background-color: #111; color: #fff !important;}

nav ul ul {  float: none;  position: static;  color: #fff !important; background-color: #111; }

nav ul ul li:hover > ul,
nav ul li:hover > ul { display: none; }

nav ul ul li {  display: block;  width: 100%;}

nav ul ul ul li { position: static;}

nav ul ul li:hover {color:#f00;}

}


@media all and (max-width : 330px) {

nav ul li {  display: block;  width: 100%;}
}


/* code for gallery on pages  https://galleria.io/  */

.galleria{ width: 100%; height: 500px; padding: 0; margin: 0;}

@media only screen and (max-width: 1024px) 
{	.galleria {height: 500px; padding: 0px 0 0 0;}}


@media only screen and (max-width: 768px) 
{	.galleria {height: 450px; }}

@media only screen and (max-width: 480px) 
{	.galleria {height: 260px; }}



/* maybe use grid con for technology descriptions - heres some css from elsewhere



.grid-container {
  display: grid;
  grid-template-columns: 30% auto 35%;
  gap: 12px;
   background: hsl(0, 99%, 100%, 0.1) url(css/chakra-7-1074.png) no-repeat 50% 15%;
  padding: 20px;
  align-content: center;
}


@media all and (max-width : 1024px) {
  .grid-container {
    grid-template-columns: auto 50% !important;
  }
}



@media all and (max-width : 800px) {
  .grid-container {
    grid-template-columns: auto ;
  }
}


.grid-container > div {
  background-color: hsla(0, 0%, 100%, 0.23);
   padding: 20px 0;
   border: 3px solid white;
   border-radius: 6px;
}

.item0 {
  grid-column-start: 1;
  grid-column-end: 4;
  background: var(--aqua) !important;
}


.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
    }


  .item7 {
    grid-column-start: 2;
    grid-column-end: 4;
    }


.item8 { 
  grid-column-start: 1;
 grid-column-end: 4;
}

.item9 { 
   grid-column-start: 3;
  grid-column-end: 4;
  background: var(--aqua) !important;
}


.item10 /* workshops */{ 
  grid-column-start: 1;
 grid-column-end: 4;
 background: var(--slate) !important;
}


.item10 h2, .item10 h3, .item10 p {
  color: white;}

  .item10 a {color: var(--green) !important;}


  @media all and (max-width : 1024px) {
    .item1, .item2, .item3, .item4, .item5, .item6, .item7, .item8, .item9, .item10 {
      grid-column-start: 1;
      grid-column-end: 4;
        }

    }