/* 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%);
  }
  
  ::selection {
  background-color: #3185af;
  color: white;
 }

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, p
{	line-height: 1;	margin: 0; color: #555;}


h1 {font-size:1.6em; 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.15em;  
    padding:15px 5% 0px 5%;  
    line-height: 1.8em; 
    margin: 0; 
	color:#208BC0; 
	font-variant:small-caps;
	font-weight: 500; }

h3{	font-size: 1.1em; line-height: 1.8em; padding: 0 12% 12px 5%;font-weight: 300; margin: 0;
max-width: 70rem;
}

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: 1rem; 
margin: 0 ; 
padding:0 5%; 
font-weight: normal; 
line-height:2em; 
max-width: 70rem;

}



@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;}}
	

/* - - - - CLASSES - - - - */

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

.lge {font-size: 1.8em; color: #5CA00D;}

.sml{font-size:.6em;  letter-spacing: .12em; padding: 0 0 0 0px; 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;}	 }

.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;}

.quote2 {
	font-style:italic; 
margin: 0 5%;}



/* - - -   LINKS - - -  */


a, a:link, 
a:active, 
a:visited, 
a:hover
{color: teal; 
border-bottom: 1px dashed;
text-decoration: none; 
outline:none;
padding:0px 0px 4px 0;
 }

a {outline: none;}

a:hover{color: #208BC0; ; text-decoration: none; outline:none; border-bottom:5px solid;  }

a:active {
	border-bottom: 0;
    color: red;
	background: whitesmoke;
}

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%; 
margin: 0 5% 0 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 ===============*/


#intro {background: #fff; height: auto;  padding: 50px 0 0 0;}
 

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




  #parent {
	  background: url(img/technology-32.jpg)repeat;
       ;
  }
 


#bar {background: #fff; width: 100%; height:auto; padding:  0; margin:0; }


#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: 1.4em;}
#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;}
}



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

#second h1 { padding: 0 8%;}

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

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

#second p {padding: 0 5%;}

@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.6%;
    height: auto; 
    background: #1B8DC5 url(cross.png) repeat; 
    float:left; 
	padding:0 1.5% !important; 
	margin: 0 1%; 
    border: 0px solid #eee; 
	border-radius: 6px;
	}

#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%}	
}

#books a {color: white;}




#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; 
	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(199, 56%, 49%) !important;
  padding: 10px 0px;
  transition: 2.3s;
}

.footer p {padding:0 5% 0px 5%; color: white;  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: white;
 color:#bbb; 
  font-size: 1.08em;
  padding: 10px 10px;
  margin: 10px 1% 12px 0;
  border: 1px dotted #208BC0; ;
  border-radius: 3px;
}


.btn:hover {
  background: white;
  color:  #208BC0;
  border: 1px solid #208BC0;
  box-shadow: 2px 2px 8px hsla(200, 50%, 59%, 0.4);
}

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

.active {
  text-decoration: none;
  background:#208BC0;
  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 0 0 1%;
  margin: 0px;
  height: auto;
  width: 20%;
  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 0 0 1%;
  margin: 0px;
  height: auto;
  width: 25%;
  float: left;
}
}



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



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

}



@media only screen and (max-width: 800px)  {
	
.box {
  padding: 0px 0 1% 5%;
  margin: 0px;
  height: auto;
  width: 98%;
  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 about and technology pages ========== */

.flex-container
{  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: start-flex;  
  display: flex; /* or inline-flex */ }



.flex-container>div 
{ width: 15%;
  margin:0 0.8%; 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.15); }


#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:100% ;
  float: left; 
  margin:5% 0; 
  position:relative; 
  padding:0;  
  border: 1px solid #e5e5e5;
  box-shadow: 0px 0px 0px rgba(23, 23, 23, 0.1); }
  
 #about {
	 background-color: whitesmoke; 
 padding: 6px 6px 12px 6px; 
 height: auto ;}

#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: 98%; padding: 1% 1% 0 1%;}
}

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

#con {width: 100%; height: 200px;}

#con a {border: 0;}
  		
#con h4 {padding: 12px 0 8px 12px;}

#con img {width: 100% !important;}

/*#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:60px !important;
   padding: 0%;
    margin: 0; 
	float: left; 
	background: #f2f7f9 !important;}

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

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

/*
#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%; }
 }





/* - - - - NAVIGATION - - - - - - - -  */



#navcon {
	width: 100%;  
	height: 80px; 
	background:  whitesmoke; 
	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; 
	border: 0;}
	
	#navcon a:hover {
	color:#208BC0 !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;} 

#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;   
	background: white;
    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: 45%; position: fixed;   float: left; background: transparent; padding: 12px 0 0 5%; 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 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 !important; 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; 
   border-radius: 8px;
   padding: 36px 0; 
   background: #e3f4fc url(../img/technology-23.jpg)repeat;
      margin: 0px 0 32px 0;
	  box-shadow: 0px 0px 60px hsla(0, 0%, 9%, 0.15);
	  
	  }

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


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

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