/* CSS Document */

/* Apply border-box to all elements */  
/**, *::before, *::after {  
  box-sizing: border-box;  
  margin: 0;  
  padding: 0;  
}  */

body {  
  margin: 0; /* Remove default body margin */  
  padding: 0; /* Remove default body padding (rare, but safe) */  
}  
 
/* Optional: Reset other elements (e.g., headings, paragraphs) */  
h1, h2, p {  
  margin: 0;  
  padding: 0;  
}  

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
    .mobile-only { display:block !important; }
    .desktop-only { display:none !important; }
	.animated {
		/*CSS transitions*/
		-o-transition-property: none !important;
		-moz-transition-property: none !important;
		-ms-transition-property: none !important;
		-webkit-transition-property: none !important;
		transition-property: none !important;
		/*CSS transforms*/
		-o-transform: none !important;
		-moz-transform: none !important;
		-ms-transform: none !important;
		-webkit-transform: none !important;
		transform: none !important;
		/*CSS animations*/
		-webkit-animation: none !important;
		-webkit-animation: none !important;
		-moz-animation: none !important;
		-o-animation: none !important;
		-ms-animation: none !important;
		animation: none !important;
	}
}

html {
background-color:#BBEBE5;/*light mint teal turquoise / old dark gray bg code: #535353*/
margin:0;
/*color:white;*/
color:#273773;/*navy*/
scroll-behavior: smooth;
}

body {
font-family: 'faricy-new-web', CenturyGothic, AppleGothic, sans-serif;
/*font-size:12pt;
font-size:1.2vw;
font-size:2.4vh;*/
/*font-size:2.4vmin;*/
font-size:18px;
margin:0;
}

/*h1, h2, h3, h4, h5, h6 {
/*margin:0 .5em 0 .5em;*/
/*margin-left:0;*/
/*font-family: 'flood-std', sans-serif;*/
/*}*/

h2 {
font-size:2rem;
font-weight: bold;
/*display:inline-block;*/
color:white;
margin-left:-1.5em;
margin-bottom:.7em;
padding:.5em;
padding-left:2em;
}

/*@media only screen and (max-width: 540px) {
	h2 {
		font-size:2rem;
	}
}*/

h3{
font-size:2.9vh;
color:#273773;
}

img {
border:0;
margin:0;
}

a:link {text-decoration:none; color:inherit; font-weight:bold;}
a:hover {text-decoration:underline; color:inherit; font-weight:bold;}
a:visited {text-decoration:none; color:inherit; font-weight:bold;}


/*****************/
#fixedContact {
height:75px;
width:75px;
/*border: 3px solid #ff7800;*/
border-radius:50%;
bottom:0;
right:0;
position:fixed;
margin:1em;
padding:.5em;
background-color:#273773; /*navy*/
z-index:888;
text-align:center;
/*box-shadow: 0 0 .5em black;*/
}

#fixedContact:hover {
background-color:#3D519B; /*lighter navy. original orange #ff7800;*/
}

.inline-logo { /*social media logo links within page except menu bar*/
	padding-left:4px;
}

/********* Sections by luke *********/
section {
	/*padding: 80px 0px;*/
}

.container {
	max-width: 1400px;
	margin-inline: auto;
	padding-inline: 1.5rem;
	padding:2%;
}

@media only screen and (max-width: 1024px) {
	.container {
		width: 800px;
		/*padding:2%;*/
		/*margin-left:20px;*/
		margin: 0 auto;
	}
}

@media only screen and (max-width: 768px) {
	.container {
		width: 350px;
		/*padding:2%;*/
		/*margin-left:20px;*/
		margin: 0 auto;
	}
	
	body {
		min-width: fit-content;
	}
}

/*****************/

.text{
padding:0;
margin-bottom: 60px;
font-family: 'faricy-new-web';
font-size:110%;
font-weight:normal;
/*color:white;*/
}

/*.highlight{
background-color:white;
padding:.25em;
}*/

/*#icons{
width:50%;
margin-left:auto;
margin-right:auto;
display: -webkit-flex;
display: -moz-flex;
display: flex;
justify-content: space-between;
}*/

/*****************/
#top {
	width:100%;
	/*height:235px;*/
	padding-top:100px;
	padding-bottom:45px;
	/*min-height:75vh;*/
    /*background: url(./assets2018/artstation_cover4_2021.jpg);
    background-repeat: no-repeat;
	background-size:cover;*/
	background-color:#ff99e6;/*pink*/
	text-align: center;
}

.title{font-size:4em;}
.title-sub{font-size:1.4em; color:white;}

.menu{
	width:100%;
	height: auto;
	background-color:#273773;/*navy. dark teal #189096. mid teal #BBEBE5*/
	color: white;
	font-size:20px;
	padding: 10px;
	position:fixed;
	z-index:999;
	text-align:center;
}

.menuLinks{
	/*margin-right:20px;*/
	/*float:right;*/
}

.menuLinks a{
	margin-right: 60px;
}

.menuLinks a:hover{
	/*color:#f78031;/*orange*/
	text-decoration:underline;
}

.menuLinks img:hover{
	/*-webkit-filter: hue-rotate(180deg) saturate(1000%) brightness(185%); /* Safari 6.0 - 9.0 */
    /*filter: hue-rotate(180deg) saturate(1000%) brightness(185%);*/
}

@media only screen and (max-width: 700px) {
	#top {
	width:100%;
	/*height:215px;*/
	padding-top:60px;
	padding-bottom:40px;
}

.title{font-size:3em;}
.title-sub{font-size:0.9em;}

  .menu {
    font-size:16px;;
  }
  
  .menuLinks a{
	margin-right: 6px;
	}
}

/* Centered text on banner */
.centered {
	width:auto;
    position: absolute;
    /*top: 55%;*/
	top:16%;
    left: 50%;
    /*transform: translate(-50%, -50%);*/
	/*text-shadow: 0 0 25px #000000, 0 0 20px #000000, 0 0 15px #000000, 0 0 10px #000000, 0 0 5px #000000;*/
	/*text-shadow: 0 0 25px #424242, 0 0 20px #424242, 0 0 15px #424242, 0 0 10px #424242, 0 0 5px #424242;*/
	z-index: 3;
	/*color: #FFFFFF;*/
}

/*****************/
#graphic{
clear:both;
height:auto;
/*width:100%;*/
/*padding:0 2% 0 2%;*/
/*font-weight:bold;
background-color:#BBEBE5;/*mid teal*/
}

.h2graphic{
/*background-color:black;*/
background-color:#273773;/*navy*/
color:white;
/*width:100%;/*to match the container*/
}

.designThumb{
/*width:280px;*/
width:245px;
height:245px;
margin:0 0.6em 0.6em 0;
/*height:auto;
padding:1em;
float:left;
color:white;
position:relative;*/
}

@media only screen and (max-width: 600px) {
	.designThumb {
	width: 280px; /*91%*/
	height: 280px;
	}
	  
	.flip-card {
	width: 280px !important; /*91%*/
	height: 280px !important;
	}
  
}

/****************************/
/* Container for each card */
.flip-card {
  background-color: transparent;
  width: 245px;          /* desktop width */
  height: 245px;         /* desktop height */
  /*perspective: 1000px;*/   /* 3D perspective for flip */
  margin: 0 0.6em 0.6em 0;
  position: relative;    /* needed for absolute overlay icon */
  float: left;
  text-align: center;
}

/* Inner wrapper that flips */
/*.flip-card-inner {
  position: relative;        /* needed for absolute overlay icon */
  /*width: 100%;
  height: 100%;
  text-align: center;
  /*transition: transform 0.6s;
  transform-style: preserve-3d;*/
  /* optional shadow:
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); */
/*}*/

/*.flip-card-front {
  position: absolute;
  inset: 0;
/*}*/

/*.flip-card-back {
  display: none;   /* ← hide the back entirely */
/*}*/

/* Flip on hover */
/*.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}*/

/* Front and back sides of the card */
/*.flip-card-front,
.flip-card-back {
  position: absolute;
  inset: 0;                      /* replaces top/left/width/height */
  /*-webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}*/

/* FRONT */
/*.flip-card-front {
  transform: rotateY(0deg) translateZ(1px);
  z-index: 2;
}*/

/* Back side styling */
/*.flip-card-back {
  background-color: #189096;  /* dark teal */
  /*color: white;
  /*transform: rotateY(180deg);
  z-index: 1;*/
/*}*/

/* Image inside flip-card */
.designThumb {
	position: absolute;
	inset: 0; /*shorthand for centering absolutely positioned element inside parent*/
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.designThumb2 {
	position: absolute;
	inset: 0; /*shorthand for centering absolutely positioned element inside parent*/
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 0.8;         /* semi-transparent */
}

/* Overlay icon positioned inside flip-card */
.flip-card .overlay-icon {
  position: absolute;   /* positioned relative to flip-card-inner */
  bottom: 2%;           /* distance from bottom edge */
  right: 2%;            /* distance from right edge */
  width: 25px;          /* fixed size for icon */
  z-index: 10;
  opacity: 0.6;         /* semi-transparent */
  pointer-events: none; /* clicks pass through to Fancybox */
}

.flip-card .overlay-text {
  position: absolute; /* positioned relative to flip-card-inner */
  top: 20%;
  /*left: 50%;*/
  transform: translate(0 -20%);
  /*inset:0;*/
  /*top:30%;*/
  z-index: 11; /* sits above overlay-icon? */
  color:#273773; /*navy*/
  font-size:2.5rem;
  pointer-events: none; /* clicks pass through to Fancybox */
  text-shadow: 1px 1px 10px white;
}

/* Ensure link fills card */
.flip-card a {
  display: block;
}

/* Responsive adjustments for mobile */
@media only screen and (max-width: 600px) {
  .flip-card {
    width: 280px !important;
    height: 280px !important;
  }

  /*.flip-card-inner {
    width: 100%;
    height: 100%;
  }*/

  /*.flip-card .overlay-icon {
    bottom: 5px;
    right: 5px;
  }*/
}

/*****************/
#illustration{
clear:both;
/*padding:2%;*/
/*background:#d86bf9;*/
}

/*.h2illustration{
background-color:#820da5;
}*/

.hidden {
    display: none;
}

.imghovertext{ /*this bastard only works on <li> elements, won't hover on divs! */
cursor:pointer;
position:absolute; /*goes on top of image*/
font-size:large;
top:30%;
left:20%;
opacity:0;
-webkit-transition:  all .3s ease;
-moz-transition:  all .3s ease;
-o-transition:  all .3s ease;
transition: all .3s ease;
}

li:hover .imghovertext{
opacity:1;
}

li:hover img{
-webkit-filter: brightness(.6);
-moz-filter: brightness(.6);
-o-filter: brightness(.6);
filter: brightness(.6);
-webkit-transition:  all .3s ease;
-moz-transition:  all .3s ease;
-o-transition:  all .3s ease;
	transition: all .3s ease;
}

.book-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bookpod{
display: block;
float: left;
/*position:absolute;/*do I need this? 2026*/
}

.bookThumb{
width:264px;
/*height:510px;*/
padding:0 20px 60px 0;
float:left;
color:white;
position:relative;
}

.bookGal{
width:620px; /*don't move to bookpod because it fucks up the @media query*/
/*padding-top:20px;*/
}

@media only screen and (max-width: 768px) {  /*at this point galleries still display*/ 
  .bookpod {
	padding-bottom:60px;
  }
  
  .bookThumb{
	width:271px;
	padding:0;
	}
}

.imgShadow {
	box-shadow: 2px 2px 5px grey;
}

@media only screen and (max-width: 600px) {
  .bookpod {
	  text-align:center;
	  padding:0 0 30px 0;
  }
 	
  .bookGal {
	display:none;
  }
}

.thumbText{
color:#273773;/*navy*/
font-size:0.8em;	
}

.button{
background-color: #273773;/*navy. original orange #ff9400;*/
    /*border: 3px solid #f78031;*/
	border-radius: 10px;
    color: white !important;
	margin: .3em;
    padding: .5em;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
	/*box-shadow: 2px 2px 2px black;*/
	font-size:15px;
}

.button:hover{
background-color:#3D519B;/*lighter navy. original orange #f78031;*/
text-decoration:none;
}

ul {
list-style-type:none;
margin:0;
padding:0;
}

li {
margin:0;
padding:0;
display:inline-block;
}

.fancybox{
z-index:9999;
}

/********************/
footer{
clear:both;
background:inherit;
background-color:#ff99e6;/*pink*/
padding:2vh;
text-align:center;
font-size: 2.5vh;
color:white;
}

.contact-title {
	/*color: white;*/
	font-size: 50px;
	margin-bottom: 40px;
}

.contact-details-img {
	border-radius: 50%;
	border: 4px dashed;
	height: 130px;
    width: 130px;
    overflow: hidden;
    margin: 0 auto;
}

.contact-details-img img {
	width: 100%;
	height: 100%;
}

/**************************** START cycle2 slideshow *****************************/
.cycle-slideshow {
width:98%;
height:auto;
margin:1em;
padding:0;
display:inline-block;
position:relative;
background:black;
text-align:center;
}

.slide {
max-width:100%;
margin:0;
padding:0;
}

.custom-prev, .custom-next {
font-size:6em;
margin:0;
padding:0;
color:white;
/*text-shadow: 2px 2px 5px gray;*/
display:block;
position:absolute;
top:1.5em;
z-index:888;
cursor:pointer;
}

.custom-prev {left:-.3em;}
.custom-next {right:-.3em;}

.custom-prev:hover {color:black;}
.custom-next:hover {color:black;}

.pager-container{ /* dots per image container */
display:block-inline;
text-align:center;
margin:-.5em 0 0 0;
padding:0;
font-size:2.5em;
z-index:888;
}

.custom-pager{ /* dots per image */
border-radius:50%;
color:black;
cursor:pointer;
}

.cycle-pager-active {
color:white;
}

/**************************** END cycle2 slideshow *****************************/