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;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

iframe::-webkit-scrollbar 
{  
    display: none;
}  

body
{
	max-width: 100vw;
	overflow-x: hidden;
	font-family: "Inter", sans-serif;
	background-color: #ffffff;
	color: #272838;
	font-weight: 400;
	text-rendering: optimizeLegibility;
}

img
{
	color: transparent;
	opacity: 1;
	-webkit-transition: opacity 0.5s ease-out;
    -moz-transition: opacity 0.5s ease-out;
    -o-transition: opacity 0.5s ease-out;
    transition: opacity 0.5s ease-in;
}

img[data-src] 
{
	opacity: 0;
}

a
{
	font-weight: bold;
	text-decoration: none;
	border-bottom: 0.3vmin solid #8dc8f2;
}

p
{
	font-size: 2vmin;
	line-height: 3.7vmin;
	color: #686b77;
}

b
{
	border-bottom: 0.3vmin solid #8dc8f2;
	border-style: dotted;
}

i
{
	font-style: italic;
}

h4
{
	font-size: 1.5vmin;
	line-height: 1.5vmin;
	color: #686b77;
}

h3
{
	font-size: 2.5vmin;
	font-weight: 700;
	line-height: 6vmin;
}

h2
{
	font-size: 3vmin;
	font-weight: 700;
	line-height: 6vmin;
}

h1
{
	font-size: 3.25vmin;
	line-height: 6vmin;
}

::selection 
{
	background: #d2e9f9;
}

::-moz-selection 
{
	background: #d2e9f9;
}

.wrapper
{
	clear: both;
	display: block;
	width: 60vw;
	max-width: 1920px;
	margin-left: auto;
	margin-right: auto;
	
}

.wrapper-wide
{
	width: 80vw;
	background-color: red;
}

#back
{
	position: absolute;
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
	left: 20%;
	top: 10%;
}

/* Hero */

.hero
{
	display: block;
	margin-top: 37.5vh;
	-webkit-transition: all 0.15s ease-in-out;
    -moz-transition: all 0.15s ease-in-out;
    -o-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
	line-height: 6vmin;
}

.hero-short
{
	margin-top: 25vh;
}

.features-list
{
	margin-top: 1vmin;
	margin-left: 1em;
	list-style: square;
	list-style-position: outside;
}

.features-list li
{
	padding-left: 1em;
}

.features-list li, .tags li
{
	color: #686b77;
	font-size: 1.5vmin;
	line-height: 2.25;
}

.tags li
{
	line-height: 3em;
}

.hero h2, .hero h3
{
	margin-bottom: 2vmin;
}

.hero-description
{
	float: left;
	width: 70%;
	max-width: 70vmin;
}

.hero-responsibilities
{
	width: 22%;
	max-width: 30vmin;
	float: right;
}

.hero-responsibilities h3, 
.hero-responsibilities p
{
	color: #b4b5bb;
}

.hero-right
{
	width: 40%;
	float: right;
}

.hero-right .work-item
{
	width: 100%;
}

.hero-footer
{
	line-height: 1vmin;
	margin-top: 2vmin;
	margin-bottom: 16vh;
}

.button-ghost
{
	display: inline-block;
	padding-top: 2.2vmin;
	padding-bottom: 2.2vmin;
	padding-left: 2vmin;
	padding-right: 2vmin;
	font-size: 1.75vmin;
	font-weight: 700;
	line-height: 1vmin;
	letter-spacing: 0.05vmin;
	-webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
	border: 0.3vmin solid #f73939;
	color: #f73939;
}

#hero-footer-contact:hover, .see-more-work a:hover
{
	transform: translateY(-5px);
}

#hero-footer-contact:hover
{
	border-color: #fdd6d7;
}

#hero-footer-work
{
	color: #b388f9;
	letter-spacing: 0.1vmin;
	border: none;
}

#hero-footer-work:hover
{
	transform: translateY(-5px);
	color: #8dc8f2;
}

#hero-footer-arrow
{
	-webkit-transition: all 0.15s ease-in-out;
    -moz-transition: all 0.15s ease-in-out;
    -o-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
	margin-bottom: 8vh;
}

#hero-footer-arrow img
{
	animation-delay: 2.5s;
}

.welcome .wrapper
{
	animation-duration: 0.5s;
}

.see-more-work
{
	padding-top: 8vh;
	padding-bottom: 8vh;
	text-align: center;
	background-color: rgb(216,241,255, 0.25);
}

.see-more-work a
{
	border-color: #b388f9;
	color: #b388f9;
}

.see-more-work a:hover
{
	border-color: #8dc8f2;
}

.see-more-work iframe
{
	display: block;
	margin: auto;
	margin-bottom: 2vmin;
	max-width: 100%;
	width: 50%;
}



/* WELCOME */

.welcome
{
	position: relative;
	padding-top: 8%;
	padding-bottom: 8%;
	margin-bottom: 4vh;
	
	/*background-image: url("../images/melon-simulator/Background.png");
	background-size: cover;
	background-position: center;
	box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.9);*/ /*https://stackoverflow.com/a/24084708*/

	background-color: blue;

	background-color: #14100c;
	color: white;
}

.contact
{
	position: relative;
	overflow: hidden;
}

.welcome-wave
{
	width: 30%;
	position: absolute;
	right: 15%;
	bottom: 0;
}

.contact .welcome-wave
{
	right: 5%;
	left: 5%;
	bottom: -20%;
}

.contact small
{
	position: absolute;
	bottom: 5%;
	left: 0;
	right: 0;
	width: 45%;
	margin: auto;
	text-align: center;
}

.copyright-notice
{
	background-color: black;
	padding-top: 2vmin;
	padding-bottom: 2vmin;
}

.copyright-notice p
{
	text-align: center;
	color: gray;
}

#case-study-background-alt
{
	background: rgb(216,241,255, 0.25);
	/*background: linear-gradient(-90deg, rgba(216,241,255,1) 0%, rgba(255,255,255,1) 47%);*/
}

.welcome h1,
.welcome h2
{
	width: 50%;
	
}

.welcome h1
{
	font-size: 3.5vmin;
	line-height: normal;
	margin-bottom: 2vmin;
}

.welcome h2
{
	font-size: 2.25vmin;
	line-height: 4.5vmin;
	font-weight: normal;
}

.welcome-footer
{
	margin-top: 2vh;
}

/* CASE STUDY */

.case-study
{
	display: flex;
	padding-top: 4vh;
	padding-bottom: 4vh;
	min-height: 50vmin;
}

.case-study-wrapper
{
	display: flex;
	width: 70%;
	margin: auto;
	animation-delay: 0.3s;
	animation-duration: 0.5s;
	
	justify-content: space-evenly;
	align-items: center;
}

.case-study-wrapper-wide
{
	padding-left: 4%;
	width: 90%;
}

.case-study-double
{
	align-items: baseline;
	padding-top: 4vh;
}

.case-study-double h2
{
	margin-top: 2vh;
}

.case-study-left,
.case-study-right
{
	height: 100%;
}
.case-study-left
{
	width: 50%;
}

.case-study-right
{
	width: 50%;
}

.case-study h2
{
	font-size: 2.25vmin;
	line-height: 2;
}

.case-study p
{
	font-size: 2vmin;
	line-height: 2;
}

.case-study-image
{
	border-radius: 1vmin;
	position: relative;
	/*margin: auto;
	background-color: blue;*/
	width: calc(16vw * 2);
	height: calc(9vw * 2);
	overflow: hidden;
	-webkit-transition: all 0.15s ease-in-out;
	-moz-transition: all 0.15s ease-in-out;
	-o-transition: all 0.15s ease-in-out;
	transition: all 0.15s ease-in-out;
}

.case-study-item
{
	width: 25%;
}

.case-study-image-tall
{
	width: calc(9vw * 2);
	height: calc(16vw * 2);
}

.case-study-image-small
{
	width: calc(16vw * 1.3);
	height: calc(16vw * 1.3);
}


.case-study-image:hover
{
	-webkit-transform: scale(1.025);
	-moz-transform: scale(1.025);
	transform: scale(1.025);
}

.case-study::after
{
	/*https://css-tricks.com/forums/topic/when-you-floatright-everything-messes-up/*/
	clear: both;
	display: block;
}

.case-study-description
{
	width: 90%;
}

#case-study-background-melon-simulator
{

}

#case-study-background-castle
{
	
}

.case-study-image span
{
	position: relative;
	width: 100%;
	height: 100%;
}

.case-study-image img
{
	width: 100%;
	height: 100%;
}

.case-study-description p
{
	color: #272838;
}

.case-study .button-download-app-store
{
	border: none;
}

.case-study .button-download-app-store img
{
	width: calc(5vw * 2);
}



.tags li
{
	display: inline;
	border: 1px solid #aaa;
	padding: 0.5em 1em 0.5em 1em;
	border-radius: 10vw;
}











/* Work */

.work
{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
	-webkit-transition: all 0.15s ease-in;
    -moz-transition: all 0.15s ease-in;
    -o-transition: all 0.15s ease-in;
    transition: all 0.15s ease-in;
}

.work-item-description
{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transition: all 0.1s ease-in;
    -moz-transition: all 0.1s ease-in;
    -o-transition: all 0.1s ease-in;
    transition: all 0.1s ease-in;
	opacity: 0;
}

#background-pink
{
	background-color: #E26AB9;
	background-color: rgb(226, 106, 185, 0.9);
}

#background-green
{
	background-color: #63E6A0;
	background-color: rgb(99, 230, 160, 0.9);
}

#background-purple
{
	background-color: #2E2E38;
	background-color: rgb(46, 46, 56, 0.9);
}

#background-red
{
	background-color: #B9353C;
	background-color: rgb(185, 53, 60, 0.9);
}

#background-blue
{
	background-color: #B38BF7;
	background-color: rgb(179, 139, 247, 0.9);
}

.work-item-description h1, .work-item-description h4
{
	color: #ffffff;
}

.work-item-description h4
{
	line-height: 3vmin;
}

.work-item
{
	position: relative;
	width: calc(1/3*100% - (1 - 1/3)*5vmin);
	height: calc(1/2.4*100vmin);
	margin-bottom: 5vmin;
	background-color: #d2e9f9;
	-webkit-transition: all 0.15s ease-in-out;
    -moz-transition: all 0.15s ease-in-out;
    -o-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 10px;
}

.work-item:hover
{
	-webkit-transform: scale(1.025);
	-moz-transform: scale(1.025);
	transform: scale(1.025);
}

.work-item:hover .work-item-description
{
	opacity: 1;
}

.work-item img
{
	height: 100%;
	width: auto;
}

.work-item iframe
{
	width: 225%;
	height: 225%;
}

.contact
{
	position: relative;
	/*margin-top: 8vh;*/
	background-color: #14100c;
	color: white;
}

.contact p
{
	color: white;
}

.contact .wrapper
{
	text-align: center;
	padding-top: 15vh;
	padding-bottom: 15vh;
	-webkit-transition: all 0.15s ease-in-out;
    -moz-transition: all 0.15s ease-in-out;
    -o-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
	max-width: 60vmin;
}

.contact #contact-email
{
	margin-top: 1.75vmin;
}

.contact #contact-email a
{
	color: #b388f9;
	font-size: 2.1vmin;
	font-weight: 400;
	line-height: 3.7vmin;
	padding-bottom: 1vmin;
	border-bottom: 0.3vmin dotted #b388f9;
	-webkit-transition: all 0.15s ease-in-out;
    -moz-transition: all 0.15s ease-in-out;
    -o-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
}

#contact-email a:hover
{
	border-color: #fdd6d7;
}

.contact .social-icons
{
	margin-top: 5vh;
}

.social-icons a
{
	padding-left: 1em;
	padding-right: 1em;
	text-decoration: none;
	border: none;
}

.social-icons a img
{
	width: 2em;
}

@media only screen and (max-width: 800px)
{
	h1
	{
		font-size: 8vmin;
		line-height: 12vmin;
	}

	h2
	{
		font-size: 6vmin;
		line-height: 10vmin;
	}

	p
	{
		font-size: 5vmin;
		line-height: 10vmin;
	}

	.features-list li, .tags li
	{
		font-size: 1.5vmin;
		line-height: 2;
	}


	.wrapper
	{
		width: 85%;
	}


	.welcome
	{
		padding-top: 4vh;
		padding-bottom: 4vh;
	}

	.welcome-wave
	{
		display: none;
	}

	.welcome h1,
	.welcome h2
	{
		width: 100%;
	}

	.welcome h1
	{
		font-size: 10vmin;
		margin-bottom: 5vmin;
	}

	.welcome h2
	{
		font-size: 5vmin;
		line-height: 2;
		margin-bottom: 10vmin;
	}

	.case-study-wrapper
	{
		display: block;
		width: 90%;
	}

	.case-study-wrapper-wide
	{
		padding-left: 0%;
	}

	.case-study-left,
	.case-study-right
	{
		width: 100%;
	}

	.case-study h2
	{
		font-size: 8vmin;
		line-height: 12vmin;
		margin-top: 4vh;
	}

	.case-study p
	{
		font-size: 4.5vmin;
		line-height: 2;
		max-width: 100%;
	}

	.case-study-image
	{
		width: calc(16vw * 5);
		height: calc(9vw * 5);
	}

	.case-study-item
	{
		width: 100%;
	}

	.case-study-description
	{
		width: 100%;
	}






	
	.hero
	{
		margin-top: 10vh;
	}

	.hero-description
	{
		float: none;
		width: 100%;
		max-width: 100%;
	}

	.features-list
	{
		margin-top: 4vh;
		margin-bottom: 4vh;
	}

	.features-list li, .tags li
	{
		margin-bottom: 1vh;
		padding-left: 1vmin;

		font-size: 4.5vmin;
		line-height: 2;
	}

	.tags li
	{
		line-height: 3;
	}

	.hero-responsibilities
	{
		display: none;
	}

	.hero-right
	{
		width: 100%;
		float: none;
	}

	.hero-footer
	{
		margin-top: 8vh;
		margin-bottom: 8vh;
	}

	

	.button-ghost
	{
		text-align: center;
		display: block;
		font-size: 5vmin;
		padding-top: 8vmin;
		padding-bottom: 8vmin;
		padding-left: 2vmin;
		padding-right: 2vmin;
		margin: auto;
		margin-bottom: 1em;
		border-width: 0.165em;
	}

	#hero-footer-arrow
	{
		display: none;
	}

	#hero-footer-work
	{
		border: 0.1em solid #b388f9;
	}

	#hero-footer-contact
	{
		border-width: 0.1em;
	}

	#back
	{
		display: none;
	}

	.work-item
	{
		width: 100%;
		height: 80vmin;
		margin-bottom: 4vmin;
	}

	.work-item:hover .work-item-description
	{
		display: none;
	}

	.see-more-work
	{
		padding-top: 8vh;
		padding-bottom: 8vh;
	}

	.see-more-work iframe
	{
		margin-bottom: 8vh;
		width: 100%;
	}

	.contact
	{
		max-width: 100%;
	}

	.contact #contact-email
	{
		margin-top: 4.75vmin;
		margin-bottom: 8vh;
	}

	.contact #contact-email a
	{
		font-size: 5vmin;
		line-height: 5.7vmin;
		padding-bottom: 3vmin;
	}

	.contact h2
	{
		margin-bottom: 2vmin;
	}

	.contact .wrapper
	{
		max-width: 85%;
	}

	.contact .social-icons
	{
		margin-bottom: 5vh;
	}

	.contact small
	{
		position: relative;
		font-size: 4vmin;
		line-height: 5.7vmin;
		margin-bottom: 0;
	}
}

@keyframes bounce 
{
	from,
	20%,
	53%,
	80%,
	to 
	{
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		transform: translate3d(0, 0, 0);
	}

	40%,
	43% 
	{
		animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		transform: translate3d(0, -30px, 0);
	}

	70% 
	{
		animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		transform: translate3d(0, -15px, 0);
	}

	90% 
	{
		transform: translate3d(0, -4px, 0);
	}
}

@-webkit-keyframes slideInDown {
	from {
	  -webkit-transform: translate3d(0, -100%, 0);
	  transform: translate3d(0, -100%, 0);
	  visibility: visible;
	}
  
	to {
	  -webkit-transform: translate3d(0, 0, 0);
	  transform: translate3d(0, 0, 0);
	}
  }
  
  @keyframes slideInDown {
	from {
	  -webkit-transform: translate3d(0, -100%, 0);
	  transform: translate3d(0, -100%, 0);
	  visibility: visible;
	}
  
	to {
	  -webkit-transform: translate3d(0, 0, 0);
	  transform: translate3d(0, 0, 0);
	}
  }
  
  .slideInDown {
	-webkit-animation-name: slideInDown;
	animation-name: slideInDown;
  }

  @-webkit-keyframes fadeInUp {
	from {
	  opacity: 0;
	  -webkit-transform: translate3d(0, 100%, 0);
	  transform: translate3d(0, 100%, 0);
	}
  
	to {
	  opacity: 1;
	  -webkit-transform: none;
	  transform: none;
	}
  }
  
  @keyframes fadeInUp {
	from {
	  opacity: 0;
	  -webkit-transform: translate3d(0, 100%, 0);
	  transform: translate3d(0, 100%, 0);
	}
  
	to {
	  opacity: 1;
	  -webkit-transform: none;
	  transform: none;
	}
  }
  
  .fadeInUp {
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp;
  }

  @-webkit-keyframes fadeInDown {
	from {
	  opacity: 0;
	  -webkit-transform: translate3d(0, -100%, 0);
	  transform: translate3d(0, -100%, 0);
	}
  
	to {
	  opacity: 1;
	  -webkit-transform: none;
	  transform: none;
	}
  }
  
  @keyframes fadeInDown {
	from {
	  opacity: 0;
	  -webkit-transform: translate3d(0, -100%, 0);
	  transform: translate3d(0, -100%, 0);
	}
  
	to {
	  opacity: 1;
	  -webkit-transform: none;
	  transform: none;
	}
  }
  
  .fadeInDown {
	-webkit-animation-name: fadeInDown;
	animation-name: fadeInDown;
  }

  @-webkit-keyframes fadeIn {
	from {
	  opacity: 0;
	}
  
	to {
	  opacity: 1;
	}
  }
  
  @keyframes fadeIn {
	from {
	  opacity: 0;
	}
  
	to {
	  opacity: 1;
	}
  }
  
  .fadeIn {
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
  }
  
  

.animated 
{
	animation-duration: 1s;
	animation-fill-mode: both;
}

.animated.infinite 
{
	animation-iteration-count: infinite;
}

.bounce 
{
	animation-name: bounce;
	transform-origin: center bottom;
}










  
  .youtube 
  {
	background-color: black;
	width: 100%;
	height: 100%;
	cursor: pointer;
  }
  .youtube img 
  {
	background-color: blue;
	height: 102%;
	width: auto;
	top: 50%;
	left: 50%;
	transform: translate3d( -50%, -50%, 0 );
  }
  .youtube .play-button {
	width: 90px;
	height: 60px;
	background-color: rgb(30, 30, 30, 0.5);
	/*box-shadow: 0 0 30px rgba( 0,0,0,0.6 );*/
	z-index: 10;
	border-radius: 6px;
  }
  .youtube .play-button:before {
	content: "";
	border-style: solid;
	border-width: 15px 0 15px 26.0px;
	border-color: transparent transparent transparent white;
  }
  .youtube img,
  .youtube .play-button {
	cursor: pointer;
  }
  .youtube img,
  .youtube iframe,
  .youtube .play-button,
  .youtube .play-button:before {
	position: absolute;
  }
  .youtube .play-button,
  .youtube .play-button:before {
	top: 50%;
	left: 50%;
	transform: translate3d( -50%, -50%, 0 );
  }
  .youtube iframe {
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
  }