/************* pcuk v6 - 2022-05-17  ***********/

/* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
* http://cssreset.com
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
/*	display: block;*/
}
body {
	line-height: 1;
}
a, ol, ul {
	list-style: none;
	text-decoration: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

* {
	box-sizing: border-box;
/*	background: rgb(0 100 0/0.1) !important;*/
}

p + p {
	margin-top: 1em;
}

/* ****** css reset over ***** */
/********************************/

/****************** smallest screens less than 480px - white *************************/

body {
background: #f6f6f6;
font-family: Helvetica, Arial, sans-serif;
width: 100vw;
align-content: center;
justify-content: center;
display: grid;
}

.homeHeader {
display: grid;
background: #f6f6f6;
margin: 0 0 10px 0;
}

.slideWrapper {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto auto;
justify-content: center;
}

.projectWrapper {
display: grid;
grid-template-columns: auto;
grid-template-rows: auto;
justify-content: center;
align-content: center;
margin: 0 auto;
padding: 0;
}

.myProjectWrapper {
display: grid;
grid-template-columns: auto;
grid-template-rows: auto;
justify-content: center;
align-content: center;
margin: 0 auto;
padding: 0;
}
		
.moreWrapper {
display: grid;
grid-template-columns: auto;
grid-template-rows: auto;
text-align: center;
justify-content: center;
justify-items: center;
margin: 1rem;
}


.usageWrapper {
display: grid;
grid-template-columns: auto;
grid-template-rows: auto;
text-align: center;
justify-content: center;
justify-items: center;
margin: 1rem;
}
			
.weddingWrapper {
display: grid;
grid-template-columns: auto;
grid-template-rows: auto;
text-align: center;
justify-content: center;
justify-items: center;
}

.weddingVideoWrapper {
background-color: #f6f6f6;
display: grid;
grid-template-columns: auto;
grid-template-rows: auto;
text-align: center;
}

.holdingWrapper {
align-items: center;
background-color: #f6f6f6;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
width: 100vw;
}

.errorWrapper {
background-color: #f6f6f6;
display: grid;
grid-template-columns: auto;
grid-template-rows: auto auto;
}	

/*********************** homeHeader - smallest screens less than 480px - white ****************************/

.pcukHeader {
grid-column: 1;
grid-row: 1;
padding: 10px;
justify-self: end;
}
	
.pcukLogo {
margin: 3% 5% 0 0;
height: 2rem;
width: 2rem;
border-radius: 5px;
border: 1px solid #333;
box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.2), 0 6px 11px 0 rgba(0, 0, 0, 0.19);	
transition: all ease-in-out .3s;
-webkit-transition: all ease-in-out .3s;
-moz-transition: all ease-in-out .3s;
-ms-transition: all ease-in-out .3s;
-o-transition: all ease-in-out .3s;
}	
	
.pcukLogo:hover {
transform: scale(1.25);
}

.pcukMenu {
	display: none;
	color: gray;
	grid-column: 1;
	grid-row: 1;
	padding: 1rem 0 0 3rem;
	font-size:1rem;
/*	z-index: 0;*/
}	
			 	
#menuToggle {
display: none;	
}

#menuToggle:checked ~ .menu {
position: absolute;
left: 0;	
}
			
.menu-icon {
padding: 10px;
position: absolute;
font-size: 0.7rem;
background-color: gray;
cursor: pointer;
border-radius: 5px;
margin: 3% 0 0 3%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

/**************** menu icon transform - smallest screens less than 480px - white ***********/
	
-webkit-transition: width 1s, height 1s, background-color 1s, -webkit-transform 1s;
transition: width 1s, height 1s, background-color 1s, transform 1s;
z-index: 1;
}

.menu-icon:hover {
color: lightgray;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);	
}

/******************** sliding nav - smallest screens less than 480px - white  *************************/

.menu {
background-color: gray;
width: 8rem;
height: 12.5rem;
position: absolute;
left: -8.75rem;
top: 5.25rem;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;	
z-index: 1;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

nav {
width: 100%;
text-align: center;
}

nav li:last-child a {
border-bottom: none;
}

nav a {
color: rgba(255, 255, 255, .55);
display: block;
border-bottom: 1px solid white;
padding: 1em 0;
margin: 0 auto;
}

nav .active {
color: white;
background-color: orange;
}

nav a:hover {
color: rgba(255, 255, 255, 1);
background-color: lightgray;
margin: 0 auto;
}
			
/****************** slideshow - in newslider.css ********************/

		
 /********************** footer ***************************/
	
footer {
background-color: gray;
width: 100vw;
margin-top: .5em;
}

#foot01 {
line-height: 2.5rem;
color: white;
font-size: 0.625rem;
text-align: center;
}

/****************** projects - smallest screens less than 480px - white ***********************/

.photoGrid,a {
display: grid;
}

.pjimage {
border-color: black;
border-style: solid;
border-width: 1px;
margin: 0;
padding: 5px;
}

/* Create single column for smaller screens */

.gridColumn {
display: grid;
justify-self: center;
}

.gridColumn img {
margin: 5px;
max-height: 300px;
max-width: 98vw;
}

.gridColumn img:hover {
opacity: 0.5;
filter: grayscale(1);
}

/********************** my Projects ********************/

/****************** myProjects slideshow - in newslider.css ********************/

h1 {
font-weight: bold;
color: #999999;
margin-top: 0px;
}

.infoProject {
display: grid;
grid-column: 1;
grid-row: 2;
max-width: 80%;
justify-self: center;
}

.infoProjectText {
display: flex;
flex-wrap: wrap;
font-size: 1em; 
line-height: 1.5em;
text-align: left;
}
		
 /**************** more - smallest screens less than 480px - white  **********************/
 
 /****************** flickr - smallest screens less than 480px - white  ***************/
 			
.flickrContent {
grid-row:1;
border-bottom: 1px solid gray;
padding: 1%;
}

.flogo {
margin: 1em 0 0 0;
width: 9.5rem;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border: 1px solid #333;
/*transition: all ease-in-out .3s;
-webkit-transition: all ease-in-out .3s;
-moz-transition: all ease-in-out .3s;
-ms-transition: all ease-in-out .3s;
-o-transition: all ease-in-out .3s;*/	 		
}

.flogo, a {
	justify-items: center;
}

.flogo:hover {
background: orange;
opacity: 0.5;
}
	
.flmore {
color: gray;
padding: 3%;
}

.flogo:hover ~ .flmore {
color: orange;
}

.flmore:hover {
color: orange;
}

 /****************** leica images.com - smallest screens less than 480px - white  ***************/
 
.liContent {
grid-row:2;
border-bottom: 1px solid gray;
padding: 1%;
}

.lilogo {
margin: 1em 0 0 0;
width: 9.5rem;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border: 1px solid #333;
/*transition: all ease-in-out .3s;
-webkit-transition: all ease-in-out .3s;
-moz-transition: all ease-in-out .3s;
-ms-transition: all ease-in-out .3s;
-o-transition: all ease-in-out .3s;*/	 		
}

.lilogo, a {
	justify-items: center;
}

.lilogo:hover {
background: orange;
opacity: 0.5;
}
	
.limore {
color: gray;
padding: 3%;
}

.lilogo:hover ~ .limore {
color: orange;
}

.limore:hover {
color: orange;
}


 /****************** camber sands - smallest screens less than 480px - white  *************************/
 	
.sandsContent {
grid-row:4;
border-bottom: 1px solid gray;
padding: 5%;
max-width: 400px;
}

.sandsPng {
width: 50%;
padding: 3%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);	
/*transition: all ease-in-out .3s;
-webkit-transition: all ease-in-out .3s;
-moz-transition: all ease-in-out .3s;
-ms-transition: all ease-in-out .3s;
-o-transition: all ease-in-out .3s;	 		*/
}
 		
.sandsPng:hover {
opacity: 0.5;
}

.sandsPng:hover ~ .sandsmore {
color: orange;
}

.sandsmore {
color: gray;
padding: 3% 0 0;
}
		
.sandsmore:hover {
color: orange;
}
 		
 /******************** ss9 - smallest screens less than 480px - white  *****************/
 			
.ss9Content {
grid-row: 3;
border-bottom: 1px solid gray;
padding: 5%;
/*max-width: 300px;*/
}

.ss9Content:last-child {
border-bottom: none;
}
 		
.ss9Png {
width: 50%;
padding: 3%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);	
/*transition: all ease-in-out .3s;
-webkit-transition: all ease-in-out .3s;
-moz-transition: all ease-in-out .3s;
-ms-transition: all ease-in-out .3s;
-o-transition: all ease-in-out .3s;	 		*/
}

.ss9Png:hover {
opacity: 0.5;
}

.ss9Png:hover ~ .ss9more {
color: orange;
}
 			
.ss9more {
color: gray;
padding: 3% 0 0;
}

.ss9more:hover {
color: orange;
}
 
 /****************** email - smallest screens less than 480px - white  ***************/
 		
.emailContent {
grid-row: 5;
border-bottom: 1px solid gray;
padding: 3%;
}

.emailLogo {
width: 50px;
/*transition: all ease-in-out .3s;
-webkit-transition: all ease-in-out .3s;
-moz-transition: all ease-in-out .3s;
-ms-transition: all ease-in-out .3s;
-o-transition: all ease-in-out .3s;	 		*/
}

.emailmore {
color: gray;
padding: 3%;
}

.mail {
color: gray;
font-size: 1em;
margin: 0 auto;
}
 		
.mail a {
color: gray;
}

.emailLogo:hover {
opacity: 0.5;
}

.emailLogo:hover ~ .mail {
color: orange;
}


.mail:hover {
color: orange;
}

/******************* usage - smallest screens less than 480px - white *********************************/

.usageContent {
grid-row:4;
border-bottom: 1px solid gray;
padding: 5%;
max-width: 400px;	
}

.usageTitle {
	font-size: 2em;
}

.usageMore {
color: gray;
padding: 3% 0 0;
}

  /**************** holding - smallest screens less than 480px - white  **********************/
 	 
.holdingContent {
grid-row: 1;
text-align: center;
padding: 1.1rem;
background-color: #f6f6f6;
margin: 7%;
line-height: 3em;
}

.sorry {
color: black;
font-size: 3em;
}

.holdingInfo {
color: gray;
font-size: 1.5em;	
}

.visitInfo {
color: black;
font-size: 1em;	
}

 /************************ weddings - smallest screens less than 480px - white  ***************************/
 	 
.weddingInfo {
grid-row: 2;
line-height: 1.5em;
}

.weddingHeader {
font-size: 5vw;
padding: 10px;
text-align: center;
}

.weddingContent {
font-size: 3.5vw;
padding: 10px;
text-align: center;
}

.weddingMail a {
text-align: center;
color: gray;
font-size: 1em;
margin: 0 auto;	
}

.weddingMail a:hover {
	color: orange;
}
		
/***************** wedding videos - smallest screens less than 480px - white **************************/

.weddingVideo {
grid-row: 2;
margin: 3% 0;
}

video {
width: 90vw;
}
			
/**************** error 404 - smallest screens less than 480px - white  ******************/

.oopsContent {
grid-row: 1;
padding: 30% 0 5% 0;
text-align: center;
width: 100%;
}

.sorry {
color: red;
font-size: 3em;
line-height: 2em;
}

.oops {
color: gray;
font-size: 2em;
line-height: 1.5em;
}

.oops2 {
color: gray;
font-size: 1em;
padding: 0.5em;
}

/***********************************************/
/******************** end **********************/
/***********************************************/