@font-face {
	font-family: 'Regular';
	src: url('../fonts/Graphik-Regular.eot');
	src: url('../fonts/Graphik-Regular.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Graphik-Regular.woff') format('woff'),
		url('../fonts/Graphik-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Semibold';
	src: url('../fonts/Graphik-Semibold.eot');
	src: url('../fonts/Graphik-Semibold.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Graphik-Semibold.woff') format('woff'),
		url('../fonts/Graphik-Semibold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
}
@font-face {
	font-family: 'Medium';
	src: url('../fonts/Graphik-Medium.eot');
	src: url('../fonts/Graphik-Medium.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Graphik-Medium.woff') format('woff'),
		url('../fonts/Graphik-Medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
}

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; */
}

html, body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    padding:0;
    margin:0;
	font-size: calc(1em + 1vw);
}

/*	=====================================================================
									GENERAL							
	===================================================================== */

::selection {
  /* color: rgba(255,255,255,.99); */
  /* background: rgba(0,0,0,.99); */
}
::-moz-selection {
  color: rgba(255,255,255,.99);
  background: rgba(0,0,0,.99);
}

/* ------ Backgrounds ------ */
.website-background-black {
	background: #000000;
}
.website-background-white {
	background: #ffffff;
}

/* ------ Colors ------ */
.text-color-white {
	color: #ffffff;
}
.text-color-red {
	color: #ea0f1e;
}
.text-color-black {
	color: #000000;
}
.text-color-gray {
	color: #888888;
}

/* ------ Text styles ------ */
.underline {
	text-decoration: underline;
}

.hide-text-block {
	position: relative;
	display: block;
	overflow: hidden;
}

h1 {
	font-family:'Semibold';
	position: fixed;
	line-height: 110%;
	letter-spacing: -2px;
    font-size: 3.2em; /* general fallback */
    font-size: 18vm; /* IE9 fallback */
/*     font-size: 19vmin; */
    font-size: 18vmin;

}
		@media screen and (max-width: 767px) {
			h1 {
			line-height: 130%;
			}
		}
		
h2 {
	font-family:'Semibold';
	line-height: 140%;
	font-size: 100px;
    font-size: 2.222em;
}

h3 {
	font-family:'Medium';
	line-height: 120%;
	font-size: 64px;
	/* font-size: 1.780em; */
}

h4 {
	font-family:'Semibold';	
	line-height: 140%;
	font-size: 48px;
	font-size: 40px;
	margin: 16vh 0 4vh 0;
	margin: 24vh 0 4vh 0;
}
		@media screen and (max-width: 767px) {
			h4 {
			font-size: 30px;
			}
		}
h5 {
	font-family:'Semibold';
	line-height: 140%;
	font-size: 36px;
	font-size: 30px;
	margin: 12vh 0 5vh 0;
	margin: 12vh 0 3vh 0;
	

}
		@media screen and (max-width: 767px) {
			h5 {
				font-size: 20px;
			}
		}
h6 {
	font-family: "Semibold";
	line-height: 140%;
	font-size: 24px;
	margin: 8vh 0 2vh 0;	
}	


/* ------ paragraph styling ------ */

p {
	line-height: 170%;
	font-family:'Regular';
	font-size: 18px;
	margin-bottom: 3vh;
}

p.size-small {
	font-family: "Medium";
	font-size: 16px;
	margin-bottom: 0;
}
		@media screen and (max-width: 767px) {
			p.size-small {
			font-size: 14px;
			}
		}
		
.size-medium {
	line-height: 180%;
	font-size: 20px;
}

.size-large {
	line-height: 160%;
	font-size: 24px;
	margin-bottom: 4vh;
}

b {
	font-family: "Medium";
}

i {
	font-style:italic;
}


/* ------ List ------ */
ul {
	line-height: 180%;
	font-family:'Regular';
	font-size: 18px;
	margin-bottom: 5vh;
}

li {
	margin-left: 3vh;
}


blockquote {
	line-height: 170%;
	font-family:'Regular';
	font-size: 18px;
/* 	font-style:italic; */
	color: #666666;
	margin: 6vmin 0;
	padding: 10px 20px 10px 30px;
	border-left:4px solid #dddddd;
}



/* ------ Links ------ */
a, a:after, a:visited {
	text-decoration: none;
	cursor: pointer;
	color: #000000;	
}


a.text-color-white, a.text-color-white:after, a.text-color-white:visited {
	color: #ffffff;	
}

a.text-color-red, a.text-color-red:after, a.text-color-red:visited {
	color: #ea0f1e;
}

/* ------ Hover states ------ */
.on-hover-40, .on-hover--40 {
	transition: all .4s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.on-hover-40:hover {
	margin-left: 40px;
	transition: all .4s cubic-bezier(0.2, 0.6, 0.2, 1);	
}
.on-hover--40:hover {
	margin-left: -40px;
	transition: all .4s cubic-bezier(0.2, 0.6, 0.2, 1);	
}
		@media screen and (max-width: 767px) {
			.on-hover-40:hover {
				margin-left: 0px;	
			}
			.on-hover--40:hover {
				margin-left: 0px;
			}	
		}

/* ------ Media ------ */
img {
    max-width: 100%;
    max-height: 100%;
	pointer-events: none !important;
}
video {
	display: block;
	max-width: 100%;
	height: auto;
}

/* ------ Hide .lazy elements if JavaScript is off ------ */
.no-js .lazy {
  display: none;
}

/* ------ Grid ------ */
.top-bottom-margin {
	margin: 40vh 0 20vh 0;
	margin: 35vh 0 20vh 0;
	margin: 35vh 0 30vh 0;
} 

.max-width {
	max-width: 68%;
	max-width: 21.5em;
	margin: 0 auto;
}
		@media screen and (max-width: 767px) {
			.max-width {
				max-width: 100%;
				max-width: 86%;
			}
		}

/* ------ Logo ------ */
.logo {
	float: right;
}
.logo-inner {
	position: fixed;
	top: 10%;
	z-index: 999;
}
		@media screen and (max-width: 767px) {
			.logo-inner {
				top: 5%;
				left: 75%;
			}
		}
.label-logo:after { 
	font-family:"Semibold";
	font-size: 20px;
    content:"dgeek";
}
.label-logo:hover:after{
	content:"www.dgeek.org";
	white-space: nowrap;
}
		@media screen and (max-width: 767px) {
			.label-logo:hover:after{
				content:"dgeek";
			}
		}
.label-logo{
	-webkit-animation:fadelogo .6s cubic-bezier(0.2, 0.6, 0.2, 1);
	-moz-animation:fadelogo .6s cubic-bezier(0.2, 0.6, 0.2, 1);
	animation:fadelogo .6s cubic-bezier(0.2, 0.6, 0.2, 1);
	-webkit-animation-fill-mode:backwards;
	-moz-animation-fill-mode:backwards;
	animation-fill-mode:backwards;	
}
@-webkit-keyframes fadelogo {
	0% {-webkit-transform: translateY(10vh);}
	100% {-webkit-transform: translateY(0vh);}	
}
@keyframes fadelogo {
	0% {opacity: 0;transform: translateY(10vh);}
	100% {opacity: 1;transform: translateY(0vh);}	
}

/* ------ Reading position ------ */
.rpi-progress-bar{
	box-sizing:border-box;
	position:fixed;
	width:100%;
	top:0;
	left:0;
	padding-bottom:20px;
	z-index: 1;
}
.rpi-progress-bar__position{
	box-sizing:inherit;
	height:4px; /* control the height of the progress bar */
	width:100%;
	background-color: #D1001D;
	-webkit-transform-origin:0 50%;
	transform-origin:0 50%;
	-webkit-transition:-webkit-transform 50ms;
	transition:-webkit-transform 50ms;
	transition:transform 50ms;
	transition:transform 50ms,-webkit-transform 50ms;
	-webkit-transform:scaleX(0);
	transform:scaleX(0);
	will-change:transform;
	position:relative;
}




/*	=====================================================================
									HOMEPAGE							
	===================================================================== */


.vertical-center {
	position: absolute;
	height: 100%;
	/* display: -webkit-flex; */ /* Safari */
	/* display: flex; */
	/* -webkit-align-items: center; */ /* Safari */
	/* align-items:   center; */
}

/*.label-hello:after{
    content:"Welcome";
}*/
/*.label-hello:hover:after{
	content:"About";
}*/
/*.label-iam:after{
    content:"to";
}*/
.label-iam:hover:after{
	content:"Work";
}
.label-dgeek:after{
    content:"dgeek";
}
/*.label-dgeek:hover:after{
	content:"Contact";
}*/
.label-error:after{
	content:"Oops!";
}
.label-error:hover:after{
	content:"Home";
}

.animate {
	-webkit-animation:animate .6s cubic-bezier(0.2, 0.6, 0.2, 1);
	-moz-animation:animate .6s cubic-bezier(0.2, 0.6, 0.2, 1);
	animation:animate .6s cubic-bezier(0.2, 0.6, 0.2, 1);
	-webkit-animation-fill-mode:backwards;
	-moz-animation-fill-mode:backwards;
	animation-fill-mode:backwards;
}


@-webkit-keyframes animate {
	0% {opacity: 0;-webkit-transform: translateY(100%);}
	100% {opacity: 1;-webkit-transform: translateY(0%);}	
}

@keyframes animate {
	0% {opacity: 0;transform: translateY(30vh);} /* WORK ON THISSS! */
/* 	0% {transform: translateY(100%);} */
	100% {opacity: 1;transform: translateY(0%);}	
}

/* ------ Delays ------ */
.delay02 { -webkit-animation-delay: .2s; animation-delay: .2s;}
.delay04 { -webkit-animation-delay: .4s; animation-delay: .4s;}
.delay06 { -webkit-animation-delay: .6s; animation-delay: .6s;}
.delay08 { -webkit-animation-delay: .8s; animation-delay: .8s;}
.delay10 { -webkit-animation-delay: 1s; animation-delay: 1s;}
.delay12 { -webkit-animation-delay: 1.2s; animation-delay: 1.2s;}

/* ------ Background photo ------ */
.bg-photo {	
	z-index: -9;	
	position: fixed;
	top: 0; 
	right: 0; 
	bottom: 0; 
	left: 0;
	background-image: url(https://firebasestorage.googleapis.com/v0/b/dgeek-25057.appspot.com/o/dgeek_bg.jpg?alt=media&token=7b4dc495-34ac-41c1-9d16-b4aa2fde1fa8);
	background-repeat: no-repeat; 
	background-size: 100% 100%;
	
	-animation:bg-photo 1.2s cubic-bezier(.5, .6, .6, 1);	
	-animation-fill-mode:backwards;
}
	/*@media screen and (max-width: 767px) {
		.bg-photo {
		-webkit-animation:bg-photo .6s cubic-bezier(.5, .6, .6, 1);
		-moz-animation:bg-photo .6s cubic-bezier(.5, .6, .6, 1);
		-animation:bg-photo .6s cubic-bezier(.5, .6, .6, 1);		
		}
	}
@-webkit-keyframes bg-photo {
	0% {opacity: 0;transform: scale(1.1);}
	100% {opacity: 1;transform: scale(1);}	
}*/

/*@keyframes bg-photo {
	0% {opacity: 0;transform: scale(1.1);}
	100% {opacity: 1;transform: scale(1);}	
}
		@media screen and (max-width:480px) {
			.bg-photo {
				left: -8%;
			}	
		}
*/

/*	=====================================================================
							HOMEPAGE MOBILE							
	===================================================================== */


@media screen and (min-width: 768px) {
	.hide-mobile {
		display: none;
	}
}

@media screen and (max-width: 767px) {
	.hide-web {
		display: none;
	}
	.toggle-mobile-second {
		display: none;
	}
	.mobile-tap-area {
		background: transparent;
		position: absolute;
		width: 100%;
		height: 100%;
	}
	.tap-indication {
	    text-align: center;
		width: 100%;
		font-family:"Medium";
		color: #ffffff;
		position: fixed;
		bottom: 4%;
		font-size: 0.6em; /* general fallback */
	    font-size: 3.6vm; /* IE9 fallback */
	    font-size: 3.6vmin;
		animation: bounce 1s infinite alternate;
		
		-webkit-animation:bounce .5s cubic-bezier(.5, .6, .6, 1) infinite alternate;
		-moz-animation:bounce .5s cubic-bezier(.5, .6, .6, 1) infinite alternate;
		animation:bounce .5s cubic-bezier(.5, .6, .6, 1) infinite alternate;	
	}
	@keyframes bounce {
	  from {
	    transform: translateY(0px);
	  }
	  to {
	    transform: translateY(-8px);
	  }
	}
	@-webkit-keyframes bounce {
	  from {
	    transform: translateY(0px);
	  }
	  to {
	    transform: translateY(-8px);
	  }
	}
}


/*	=====================================================================
							ABOUT AND CONTACT					
	===================================================================== */

.max-width-left-70 {	
	max-width: 70%;
}
		@media screen and (max-width: 767px) {
			.max-width-left-70 {	
				max-width: 100%;
			}
		}


/* ------ Copy email to clipboard ------ */
.label-email {
	cursor: pointer;
}
.label-email:after{
    content:"contact@dgeek.org";
}
.label-email:hover:after{
	content:"Copy to clipboard";
}
.label-email:hover:active:after {
    content:"Email copied";
}
		@media screen and (max-width: 767px) {
			.label-email:hover:after{
				content:"Copied to clipboard";
			}
		}



/*	=====================================================================
								WORK LIST							
	===================================================================== */

.work-block {
	margin: 12vh 0;
}

		@media screen and (max-width: 767px) {
			.work-block {
				margin-top: 10vh 0;
			}
		}

/*	=====================================================================
								PROJECT PAGE							
	===================================================================== */


.block-image-overflow {
    width: 100%;
    overflow: hidden;
}


.hero-image {
	width: 100vw;
	height: 90vh;
	overflow: hidden;
	margin: 30vh 0;
}
		@media screen and (max-width: 767px) {
			.hero-image {
				margin: 20vh 0;
			}	
		}	
.hero-image img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
}
		@media screen and (max-width: 767px) {
			.hero-image img {
				background-position: right bottom;
			}	
		}	

.max-width-70 {	
	max-width: 70%;
	margin: 0 auto;
}
		@media screen and (max-width: 767px) {
			.max-width-70 {	
				max-width: 100%;
				margin: auto;
			}
		}


.links a {
	display: block;
	margin: 4vh 0;
	font-family: "Medium";
	font-size: 19px;	
}



.images {
	margin: 8vh 0;
}
	@media screen and (max-width: 767px) {
		.images {
			margin: 4vh 0;
		}
	}

.images img {
	margin: 4vh 0;
}
	@media screen and (max-width: 767px) {
		.images img {
			margin: 2vh 0;
		}
	}


.video {
	margin: 8vh 0;
}
	@media screen and (max-width: 767px) {
		.video {
			margin: 4vh 0;
		}
	}

	
/* iPhone video container */
.iphone-video {
	width: 100%;
	height: 80vh;
	display: -webkit-flex; /* Safari */
	display: flex;  
	-webkit-align-items: center; /* Safari */
	align-items: center;
	position: relative;
}

.iphone-notch {
	background-image: url(../img/devices-iphone-notch.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	height: 20%;
	width: 100%;
	position: absolute;
	z-index: 1;
	margin-top: -17%;

}

.iphone-mask {
   -moz-border-radius:28px;
    -webkit-border-radius:28px;
    border-radius:28px;
    overflow:hidden;
	position: relative;
	margin: 0 auto;
	height: 70vh;
}
.iphone-video video {
	width: auto;
	height: 70vh;
}
.devices-iphone {
	background-image: url(../img/devices-iphone.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	height: 100%;
	width: 100%;
	position: absolute;
	z-index: -1;
}
		
		@media screen and (max-width: 767px) {
			.iphone-video {
				height: 60vh;
			}
			.iphone-mask {
			   -moz-border-radius:18px;
			    -webkit-border-radius:18px;
			    border-radius:18px;
				height: 52vh;
			}
			.iphone-video video {
				height: 52vh;
			}
		}

/* Style all font awesome icons */
.fa {
  padding: 20px;
  font-size: 40px;
  width: 40px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%
}


.fa-linkedin {
  color: white;
}
.fa-linkedin:clicked{
	color: white;
}

.fa-youtube {
  color: white;
}

.fa-instagram {
  color: white;
}

.fa-medium {
  color: white;
}

.fa-github {
  color: white;
}

/* Twitter */
.fa-twitter {
  color: white;
}

a, a:after, a:visited {
	text-decoration: none;
	cursor: pointer;
	color: white;	
}