@font-face {
    font-family: "Vintage Avalanche";
    src: url("/fonts/Vintage Avalanche.otf");
}

@font-face {
	font-family: "Shorelines Script Bold";
	src: url("/fonts/Shorelines Script Bold.otf");
}

@font-face {
	font-family: "Roboto Light";
	src: url("/fonts/Roboto-Light.ttf");
}

@font-face {
	font-family: "Tasty Birds";
	src: url("/fonts/Tasty_Birds.otf");
}

@font-face {
	font-family: "Baskervville";
	src: url("/fonts/Baskervville-Regular.ttf");
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}



BODY {
	font-family: "Vintage Avalanche", Arial, sans-serif;
	font-size: 11px;
	background-color: #fff;
	-webkit-text-size-adjust: 100%;
	/*! text-transform: uppercase; */
	overflow-y: scroll;
}

.website-title {
	font-size: 5em;
	font-family: "Baskervville", serif;
	
	-webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                      supported by Chrome and Opera */
	
	margin: 0 auto;
	text-align: center;
}

.website-subtitle {
	margin: 0 auto 0.2em auto;
	text-align:center;
	font-size:2.8em;
	font-family: "Tasty Birds", "Times New Roman";
	
	-webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
	
	
	
}

div.portfolio-container {
	overflow: auto;
	width: 78em;
	position: relative;
	height: 100em; /* Because absolutely positioned elements won't automatically expand it */
	margin: auto;
}

div.portfolio-preview-container {
	overflow: auto;
}

/* Portfolio image -- Default settings (2 grid units each direction) */
div.portfolio-image {
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome and Opera */
	
	position: absolute;
	margin: 1em;
	width: 24em;
	height: 24em;
	overflow: hidden;
	cursor: pointer;
	border-radius: 3px;
	z-index: 0;
	animation: fadein 1.5s forwards;
	animation-delay: 1.8s;
	opacity:0;
}

div.portfolio-image:nth-child(1) {
	animation-delay: 0.6s;
}

div.portfolio-image:nth-child(2) {
	animation-delay: 0.8s;
}

div.portfolio-image:nth-child(3) {
	animation-delay: 1.0s;
}

div.portfolio-image:nth-child(4) {
	animation-delay: 1.2s;
}

div.portfolio-image:nth-child(5) {
	animation-delay: 1.4s;
}

div.portfolio-image:nth-child(6) {
	animation-delay: 1.6s;
}

div.portfolio-preview-image {
	position:relative;
	font-size:9px;
	margin: 1em;
	width: 24em;
	height: 24em;
	overflow: hidden;
	cursor: pointer;
	border-radius: 3px;
	z-index: 0;
}

div.portfolio-spacer {
	position: absolute;
	margin: 1em;
	width: 24em;
	height: 24em;
	visibility: invisible;
}

div.portfolio-spacer[p_width="1"] {
	width: 11em;
}

div.portfolio-spacer[p_height="1"] {
	height: 11em;
}

/* Medium width: 3 grid units */
div.portfolio-image[p_width="3"] {
	width: 37em;
}

/* Large width: 4 grid units */
div.portfolio-image[p_width="4"] {
	width: 50em;
}

/* Medium height */
div.portfolio-image[p_height="3"] {
	height: 37em;
}

/* Large height */
div.portfolio-image[p_height="4"] {
	height: 50em;
	
}

div.portfolio-image-img {
	position:absolute;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	left: 50%;
	top: 50%;
	
	height: 100%;
	width: auto;
}

div.portfolio-image img {
	height: 100%;
	filter: contrast(70%) brightness(120%);
	-webkit-filter: contrast(70%) brightness(120%);
	transition: transform 2s ease-in-out, filter 0.3s ease-out;
}


div.portfolio-image.portfolio-image-small-screen {
	width: 98%;
	height: 40em;
	
}



/* images that are wider than they are tall */
/*div.portfolio-image:not([p_height="4"])[p_width="4"] img, 
div.portfolio-image[p_width="3"]:not([p_height="4"]):not([p_height="3"]) img {
	height: auto;
	width: 100%;
}*/


div.portfolio-image[p_height="2"][p_width="4"] img,
div.portfolio-image[p_height="3"][p_width="2"] img,
div.portfolio-image[p_height="4"][p_width="3"] img {
	height: auto;
	width: 100%;
}

div.portfolio-image[p_height="2"][p_width="4"] div.portfolio-image-img,
div.portfolio-image[p_height="3"][p_width="2"] div.portfolio-image-img,
div.portfolio-image[p_height="4"][p_width="3"] div.portfolio-image-img {
	height: auto;
	width: 100%;
}

/* width=4, height=2 */
/*div.portfolio-image[p_width="4"]:not([p_height]) img,
	div.portfolio-image[p_width="4"][p_height="2"] img {
	margin-top: -13em;
}*/

/* width=4, height=3 */
/*div.portfolio-image[p_width="4"][p_height="3"] img {
	margin-top: -6.5em;
}*/

/* width=3, height=4 */
/*div.portfolio-image[p_width="3"][p_height="4"] img {
	margin-left: -6.5em;
}*/

/* width=3, height=2 */
/*div.portfolio-image[p_width="3"]:not([p_height]) img,
	div.portfolio-image[p_width="3"][p_height="2"] img
	{
	margin-top: -6.5em;
}*/

/* width=2, height=3 */
/*div.portfolio-image[p_height="3"]:not([p_width]) img,
	div.portfolio-image[p_width="2"][p_height="3"] img
	{
	margin-left: -6.5em;
	}
*/

/* width=2, height=4 */
/*div.portfolio-image[p_height="4"]:not([p_width]) img,
	div.portfolio-image[p_width="2"][p_height="4"] img
	{
	margin-left: -13em;
	}
*/
div.portfolio-image:hover img {
	
	transform: scale(1.08);
	filter: contrast(100%) brightness(100%);
	-webkit-filter: contrast(100%) brightness(100%);
}

div.portfolio-image .portfolio-image-text {
	transition: transform 0.3s ease-out;
	position: absolute;
	margin:0;
	width: 100%;
	height: 100%;
	/*background-color: rgb(255, 0, 0, 0.5);*/
	top: 0px;
	left: 0px;
}

div.portfolio-image:hover .portfolio-image-text {
  transform: translateZ(0) translate(0, -2em);
}

div.portfolio-image h2, div.portfolio-image .subtitle {
	/*display:none;*/
	color: #ffffff;
	display:block;
	margin: 0;
	font-size: 2.4em;
	font-family: "Roboto Light", Arial;
	font-weight: normal;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: center;
	position: relative;
	top: 50%;
	transform: translate(0, -50%);
	z-index: 3;
	text-shadow: 0px 0px 10px #000000,
					0px 0px 20px #000000;
	padding: 0px 5px;
}


div.portfolio-image .subtitle {
	font-size: 1.5em;
	opacity: 0;
	transition: opacity 0.3s ease-out;
	transform: translate(0,-0.6em);
}

div.portfolio-image:hover .subtitle {
	opacity: 1;
}

.preload * {
	
	transition: none !important;
	
}

.pop-video-container {
	z-index: 2;
	position: fixed;
	top: 50%;
	left: 50%;
	
	-ms-transform: translate(-50%, -50%); /* IE 9 */
    -webkit-transform: translate(-50%, -50%); /* Safari */
	transform: translate(-50%, -50%);
	
	display: none;
	background-color: black;
	width: 90%;
	max-width: 700px;
	height: 394px;
	border: none;
}

.video-blockscreen {
	position:fixed;
	top:0;
	left:0;
	z-index:1;
	width: 100%;
	height: 100%;
	display:none;
	background-color:black;
	opacity: 0.5;
}


/* Main menu navbar */
.main-menu-container {
  width:100%;
  text-align:center;
}

li.main-menu {
  display: inline-block;
  position: relative;
  text-transform: uppercase;
  font-size: 1.8em;
}

li.main-menu .main-menu-text {
  display: inline-block;
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  transition: opacity 0.5s linear;
  text-align: justify;
  color: #6f6f6f;
}

li.main-menu:hover .main-menu-text {
  opacity: 0;
  z-index: -1;
}


li.main-menu ul {
  display: inline-block;
  opacity: 0;
  list-style: none;
  padding: 0.8em 0em;
  margin:0;
  width:160px;
}

li.main-menu:hover ul {
  opacity: 1;
}

li.main-menu ul span {
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
  transition: background-color 0.3s linear, color 0.3s linear;
  
  color: #3a3a3a;
}

li.main-menu ul span:hover {
  background-color: #111111;
  color: #fefefefe;
}
/* End main menu navbar */


/* Normal page content */
.page-content {
	width:80%;
	font-size:16px;
	margin: auto;
	
	max-width: 750px;
}

@media only screen and (max-width: 900px) {
	div.portfolio-container {
		font-size: 1.2vw;
	}
	
	div.website-title {
		font-size: 5vw;
	}
	
	div.website-subtitle {
		font-size:3vw;
	}
	
	

}

@media only screen and (max-width: 800px) {
	div.portfolio-image h2 {
		font-size: 22px;
	}
	
	div.portfolio-image .subtitle {
		font-size: 16px;
	}
}


@media only screen and (max-width: 600px) {
	li.main-menu ul {
		font-size: 3.5vw;
		width: 20vw;
	}
	
}

@media only screen and (max-width: 500px) {
	div.portfolio-image h2 {
		font-size: 5vw;
	}
	
	div.portfolio-image .subtitle {
		font-size: 3.5vw;
	}
	
}

/*@media only screen and (device-width: 375px) {
	
	div.portfolio-image h2 {
		font-size: 4em;
	}
	
	div.portfolio-image .subtitle {
		font-size: 3em;
	}
	
}*/