body { 
font-family: Arial, Helvetica, sans-serif; 
width: 40%; 
margin: auto; 
background: url("../Resources/sitebackground/sitebackground.jpg") 0% 0% / cover no-repeat rgba(255, 255, 255, 0.33); 
padding: .33% 3%; 
box-shadow: black 0px 0px 1em inset; 
opacity: 1; 
transition: opacity 1s ease 0s; 
}

body.fade-out { 
opacity: 0; 
transition: none 0s ease 0s; 
}

.bx-viewport { 
position: static !important; 
border: 0px !important; 
box-shadow: none !important; 
}

.bx-wrapper { 
border: 0px; 
margin-bottom: 3%; 
margin-top: 3%;
box-shadow: black 0px 0px 1em; 
}

h1 { 
color: snow; 
text-shadow: black 3px 3px 15px; 
margin-top: 3%; 
margin-bottom: 5%; 
font-size: 500%; 
font-family: Arial, Helvetica, sans-serif; 
font-variant: small-caps; 
text-align: center; 
}

h1.index { 
color: snow; 
text-shadow: black 3px 3px 15px; 
margin-top: 2%; 
margin-bottom: 0%; 
font-size: 500%; 
font-family: Arial, Helvetica, sans-serif; 
font-variant: small-caps; 
text-align: center; }

h2 { 
color: black; 
text-shadow: black 3px 3px 15px; 
margin-top: 5%; 
margin-bottom: 3%; 
font-size: 111%; 
font-family: Arial, Helvetica, sans-serif; 
font-variant: small-caps; 
text-align: center; 
}

p { 
color: black; 
font-size: 12pt; 
text-shadow: black 5px 5px 15px; 
font-family: Arial, Helvetica, sans-serif; 
text-align: center; 
}

p.about { 
color: black; 
font-size: 100%; 
text-shadow: black 5px 5px 15px; 
font-family: Arial, Helvetica, sans-serif; 
font-variant: normal; 
text-align: center; 
}

p.footer { 
color: black; 
text-shadow: black 3px 3px 15px; 
margin-top: 5%; 
margin-bottom: 3%; 
font-size: 100%; 
font-family: Arial, Helvetica, sans-serif; 
font-variant: normal; 
text-align: center; 
}

a { 
color: snow; 
text-decoration: none; 
}

a:hover { 
color: rgb(0, 160, 198); 
text-decoration: none; 
cursor: pointer; 
}

a.homebutton { 
float: left; 
display: block; 
border: 33px skyblue; 
margin-bottom: 33%; 
padding: 33px 10px; 
text-align: center; 
text-decoration: none; 
text-shadow: black 5px 5px 15px; 
box-shadow: black 0px 0px 1em inset; 
}

a.links { 
background-color: rgba(255, 255, 255, 0.33); 
display: block; 
border: 33px skyblue; 
margin-bottom: 5%; 
text-align: center; 
text-decoration: none; 
text-shadow: black 5px 5px 15px; 
box-shadow: black 0px 0px 1em inset; 
}

a.links.i { 
background-color: rgba(255, 255, 255, 0.33); 
display: block; 
border: 33px skyblue; 
margin-bottom: 3%; 
padding: 3%; 
text-decoration: none; 
text-shadow: black 5px 5px 15px; 
box-shadow: black 0px 0px 1em inset; 
font-family: Arial, Helvetica, sans-serif; 
font-variant: small-caps; 
text-align: center; 
}

a.links1 { 
background: url("../Resources/Pictures/paint3.jpg") center bottom rgba(255, 255, 255, 0.33); 
background-size: cover;
background-repeat: no-repeat;
display: block; 
border: 33px skyblue; 
margin-bottom: 3%; 
padding: 3%; 
text-decoration: none; 
text-shadow: black 5px 5px 15px; 
box-shadow: black 0px 0px .25em;
/*box-shadow: black 0px 0px 1em inset; */
font-family: Arial, Helvetica, sans-serif; 
font-variant: small-caps; 
font-size: 133%; 
text-align: center; 
}

a.links2 { 
background: url("../Resources/Pictures/paint1.jpg") center top rgba(255, 255, 255, 0.33); 
background-size: cover;
background-repeat: no-repeat;
display: block; 
border: 33px skyblue; 
margin-bottom: 3%; 
padding: 3%; 
text-decoration: none; 
text-shadow: black 5px 5px 15px; 
box-shadow: black 0px 0px .25em;
/*box-shadow: black 0px 0px 1em inset; */
font-family: Arial, Helvetica, sans-serif; 
font-variant: small-caps; 
font-size: 133%; 
text-align: center; 
}

a.links3 { 
background: url("../Resources/Pictures/paint2.jpg") left center border-box rgba(255, 255, 255, 0.33); 
background-size: cover;
background-repeat: no-repeat;
display: block; 
border: 33px skyblue; 
margin-bottom: 3%; 
padding: 3%; 
text-decoration: none; 
text-shadow: black 5px 5px 15px; 
box-shadow: black 0px 0px .25em;
/*box-shadow: black 0px 0px 1em inset; */
font-family: Arial, Helvetica, sans-serif; 
font-variant: small-caps; 
font-size: 133%; 
text-align: center; 
}

a.ol { 
background-color: rgba(255, 255, 255, 0.33); 
display: inline-block; 
border: 11px skyblue; 
margin-bottom: 3%; 
padding: 3% 16%; 
margin-right: .7%;
float: right;
text-align: center; 
text-decoration: none; 
text-shadow: black 5px 5px 15px; 
box-shadow: black 0px 0px .25em;
/*box-shadow: black 0px 0px 1em inset; */
width: 17%; 

}

a.ol2 { 
background-color: rgba(255, 255, 255, .33); 
display: block; 
border: 33px skyblue; 
margin-bottom: 3%; 
padding: 33px; 
text-align: center; 
text-decoration: none; 
text-shadow: black 5px 5px 15px; 
box-shadow: black 0px 0px 1em; 
}

a.ol:hover:not(.active) { 
background-color: rgb(255, 255, 255, .66); 
color: skyblue; 
}

a.ol2:hover:not(.active) { 
background-color: rgb(255, 255, 255, .66); 
color: skyblue; 
}

a.links:hover:not(.active) { 
background-color: rgb(85, 85, 85); 
color: skyblue; 
}

textarea { 
background-color: white; 
}

#dialog { 
background-color: skyblue; 
color: rgb(85, 85, 85); 
}

.no-close .ui-dialog-titlebar-close { 
display: none; 
}

img.button { 
max-height: 33%; 
max-width: 33.37%; 
resize: both; 
align-content: center; 
}

img.button2 { 
max-height: 11%; 
max-width: 33.37%; 
resize: both; 
align-content: center; 
}

img.photo { 
padding: 0.33%;
width: 32%; 
height: auto; 
}

img.photo:hover { 
box-shadow: rgba(0, 140, 186, 0.5) 0px 0px 2px 1px; 
opacity: 0.8; }

div.about { 
background-color: rgba(255, 255, 255, 0.33); 
display: inline-block; 
border: 11px skyblue; 
margin-bottom: 3%; 
padding: 3% 16%; 
text-align: center; 
text-decoration: none; 
text-shadow: black 5px 5px 15px; 
box-shadow: black 0px 0px 1em;
/*box-shadow: black 0px 0px 1em inset;*/
width: 68%; 
}

div.footer { 
background-color: rgba(255, 255, 255, 0.33); 
display: inline-block; 
border: 11px skyblue; 
margin-bottom: 3%; 
padding: 3% 16%; 
text-align: center; 
text-decoration: none; 
text-shadow: black 5px 5px 15px; 
box-shadow: black 0px 0px .25em;
/*box-shadow: black 0px 0px 1em inset; */
width: 68%; 
}

div.portfolio { 
}

div.hideandshow{
display: none;	
}

img.test {
display: none;
}

img.test:onclick {
display: none;
}

/*body.portfolio { 
*/

}

footer { 
font-size: 12px; 
padding: 1%; 
}



button {	
}

button.loadMore {
	
}



/* Phone and Tablet Settings */
@media screen and (max-width: 1000px) and (min-width: 0px) {
	  a { 
	  color: snow; 
	  text-decoration: none; 
	  }
	  
	  .bx-wrapper { 
		border: 0px; 
		margin-top: 20%; 
		margin-bottom: 3%; 
		box-shadow: black 0px 0px 1em; 
		}
	  
	  h1 { 
	  color: snow; 
	  margin-top: 5%; 
	  margin-bottom: 3%; 
	  font-size: 500%; 
	  font-family: Arial, Helvetica, sans-serif; 
	  font-variant: small-caps; 
	  text-align: center; 
	  }
	  
	  h1.index { 
	  color: snow; 
	  text-shadow: black 3px 3px 15px; 
	  margin-top: 2%; 
	  margin-bottom: -15%; 
	  font-size: 500%; 
	  font-family: Arial, Helvetica, sans-serif; 
	  font-variant: small-caps; 
	  text-align: center; }
	  
	  h2 { 
	  color: snow; 
	  margin-top: 5%; 
	  margin-bottom: 3%; 
	  font-size: 14px; 
	  font-family: Arial, Helvetica, sans-serif; 
	  font-variant: small-caps; 
	  text-align: center; 
	  }
	  img.photo { 
	  padding: 0.33%; 
	  width: 38.75vw; 
	  height: auto; 
	  }
	  img.button { 
	  padding: 3%; 
	  max-height: 33%; 
	  max-width: 33.37%; 
	  resize: both; 
	  text-align: center; 
	  align-content: center; 
	  }
	  a.ol { 
	  background-color: rgba(255, 255, 255, 0.33); 
	  display: inline-block; 
	  border: 11px skyblue; 
	  margin-bottom: 3%; 
	  padding: 3% 15.95%; 
	  text-align: center; 
	  text-decoration: none; 
	  text-shadow: black 5px 5px 15px; 
	  box-shadow: black 0px 0px .25em;
	/*box-shadow: black 0px 0px 1em inset; */; 
	  width: 17.35%; 
	  }
	  p.about { 
	  color: snow; 
	  font-size: 100%; 
	  text-shadow: black 5px 5px 15px; 
	  font-family: Arial, Helvetica, sans-serif; 
	  text-align: center; 
	  }
	  p.caption { 
	  color: snow; 
	  margin-top: 5%; 
	  margin-bottom: 3%; 
	  font-size: 36px; 
	  font-family: Arial, Helvetica, sans-serif; 
	  font-variant: small-caps; 
	  text-align: center; 
	  }
	  p.footer { 
	  color: snow; 
	  text-shadow: black 3px 3px 15px; 
	  margin-top: 5%; 
	  margin-bottom: 3%; 
	  font-size: 100%; 
	  font-family: Arial, Helvetica, sans-serif; 
	  font-variant: small-caps; 
	  text-align: center; 
	  }
	  div.footer {
	  }
	  body { 
	  background: url("") fixed; 
	  margin: auto; 
	  width: 80vw; 
	  height: auto; 
	  }
	  html { 
	  background: url("../Resources/sitebackground/sitebackgroundmobile.jpg") center center / cover no-repeat fixed rgb(223, 227, 230); 
	  height: 100%; }

}