@charset "UTF-8";
/* CSS Document */

@import url(https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,200;0,300;0,400;0,700;1,100&display=swap);

@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;500;600;700&display=swap);

html, body {
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	font-family:'Montserrat', Arial, Helvetica, sans-serif;
	text-align:center;
	background:#fcfcfd;
	-webkit-appearance:none;
	-webkit-text-size-adjust:none;
	-webkit-font-smoothing:antialiased;
}

.white, #intro .skill:hover {
	color:#fcfcfd;
}

.light-grey {
	color:#c6c6c6;
}

.dark-grey, #home a:hover, #touchpoints li:hover, .fancybox-button:hover, #email-format .selected:hover {
	color:#1b1b1b!important;
}

.orange, #intro a:hover, .carousel a:hover p, .carousel a:hover span, #email-format li span:hover, #touchpoints .selected:hover {
	color:#e65722!important;
}

.virgin {
	background:#fafafb;
	border-top:1px solid #f6f8fc;
}

.selected {
	cursor:default!important;
}

#email-format ul li span {
	cursor:pointer;
}

h1 {
	margin:0;
	padding:0;
	font-size:27px;
	font-weight:200;
	line-height:31px;
	letter-spacing:-0.45px;
}

p {
	margin:0;
	padding:0 0 15px;
	font-size:15px;
	font-weight:300;
	line-height:19px;
	letter-spacing:0.45px;
}

a {
	font-weight:300;
	text-decoration:none;
  	-webkit-transition:-webkit-transform .2s ease-in-out;
	-moz-transition:transform .2s ease-in-out;
	-o-transition:transform .2s ease-in-out;
  	transition:transform .2s ease-in-out;
}

#toggle-dm, #toggle-dm:focus {
	color:#ffffff;
	text-decoration:none;
	width:15px;
	height:15px;
	min-height:15px;
	max-height:15px;
	min-width:15px;
	max-width:15px;
	padding:0;
	display:block;
	background:url('images/dm-icons.png') left / cover no-repeat;
	cursor:pointer;
	border:none;
	outline:none;
  	-webkit-transition:all .2s ease-in-out;
	-moz-transition:all .2s ease-in-out;
	-o-transition:all .2s ease-in-out;
  	transition:all .2s ease-in-out;
}

.item-3 {
	width:29.333333%;
	float:left;
	margin:0 2%;
}

header {
	width:100%;
	height:50px;
	position:fixed;
	padding:25px 0;
	background:#fcfcfd;
	-webkit-box-shadow:0px 0px 5px 0px rgba(27,27,27,0.15);
	-moz-box-shadow:0px 0px 5px 0px rgba(27,27,27,0.15);
	box-shadow:0px 0px 5px 0px rgba(27,27,27,0.15);
	z-index:10000;
	-webkit-transition:top .3s ease-in-out;
	-moz-transition:top .3s ease-in-out;
	-o-transition:top .3s ease-in-out;
  	transition:top .3s ease-in-out;
	top:-100px;
}

.show-header {
	top:0;
}

#home {
	width:100%;
	position:absolute;
	top:50%;
	margin:-161px 0 0;
}

#logo {
	width:610px;
	margin:0 auto;
}

#logo img {
	animation:bounceInDown 0.75s 1;
}

#home #logo h1 {
	opacity:0;
	animation:fadeInLeftBig 0.75s 1;
	animation-fill-mode:forwards;
    animation-delay:0.75s;
}

#back {
	width:12px;
	height:20px;
	margin:15px 40px;
	opacity:0;
	position:absolute;
	z-index:2000;
	animation:bounceIn 0.75s 1;
	animation-fill-mode:forwards;
    animation-delay:1s;
}

#scroll-arrow {
	width:100%;
	min-width:1000px;
	position:absolute;
	bottom:50px;
}

.icons {
	width:180px;
	padding:0 10px 10px;
	margin:0 auto;
	box-sizing:border-box;
	overflow:auto;
}

.icon {
	width:50px;
	float:left;
	background-repeat:no-repeat;
	background-position:top;
	background-size:cover!important;
	-webkit-border-radius:2px;
	-o-border-radius:2px;
	-moz-border-radius:2px;
	border-radius:2px;
}

.icon:hover, #social a:hover, #back:hover {
	background-position:bottom!important;
}

#back-icon {
	width:12px!important;
	height:20px;
	background:url("images/icon-back.png");
	cursor:pointer;
}

#home-icon {
	height:50px;
	margin:0 55px;
	background:url("images/icon-home.png");
	cursor:pointer;
}

#about-icon {
	height:50px;
	margin:50px 60px 0 0;
	background:url("images/icon-about.png");
	cursor:pointer;
	opacity:0;
	animation:bounceIn 0.5s 1;
	animation-fill-mode:forwards;
    animation-delay:2s;
}

#projects-icon {
	height:50px;
	margin:50px 0 0;
	background:url("images/icon-projects.png");
	cursor:pointer;
	opacity:0;
	animation:bounceIn 0.5s 1;
	animation-fill-mode:forwards;
    animation-delay:2.5s;
}

#up-icon {
	height:18px;
	margin:0 55px;
	background:url("images/icon-up.png");
	cursor:pointer;
}

#down-icon {
	height:18px;
	margin:0 55px;
	background:url("images/icon-down.png");
	cursor:pointer;
	animation:next 2s infinite;
	animation-direction:alternate; 
	animation-timing-function:cubic-bezier(.5, 0.05, 1, .5);
	animation-delay:3.5s;
}

#wizard-icon {
	height:40px;
	margin:0 55px 2px;
	background:url("images/icon-wizard.png");
}

#dev-icon {
	height:40px;
	margin:0 55px 2px;
	background:url("images/icon-dev.png");
}

#graphic-icon {
	height:40px;
	margin:0 55px 2px;
	background:url("images/icon-graphic.png");
}

@keyframes next {  
	80% { 
		transform:translate3d(0, 0, 0); 
	} 
	90% { 
		transform:translate3d(0, 7px, 0); 
	} 
}

@-webkit-keyframes next { 
	80% { 
		-webkit-transform:translate3d(0, 0, 0); 
		transform:translate3d(0, 0, 0); 
	} 
	90% { 
		-webkit-transform:translate3d(0, 7px, 0); 
		transform:translate3d(0, 7px, 0); 
	} 
}

main {
	width:100%;
	min-width:1000px;
	position:absolute;
	top:100%;
}

section {
	width:100%;
	min-width:1000px;
	float:left;	
	padding:75px 0 65px;
}

#about {
	background:#1b1b1b;
}

#photo {
	width:190px;
	height:190px;
	float:left;
	padding:15px 85px 25px 60px;
}

#intro {
	width:605px;
	float:left;
	padding:0 60px 0 0;
}

#projects {
	margin:100px 0 0;
}

#template {
	width:600px;
	margin:0 auto;
	padding:55px 0 75px;
	box-sizing:border-box;
	overflow:auto;
}

.skill {
    display:inline-block;
	margin:26px 15px 4px;
	padding:0 0 10px;
	cursor:default;
}

#touchpoints #active {
	width:43.125px;
	margin-left:1px;
	height:1px;
    background:#e65722;
}

#email-format #active {
	width:65px;
	margin-left:20px;
	height:1px;
    background:#1b1b1b;
}

.container {
	width:96%;
	min-width:1000px;
	margin:0 auto;
	padding:0 2%;
	box-sizing:border-box;
	overflow:auto;
}

#container {
	width:1000px;
	margin:0 auto;
	box-sizing:border-box;
	overflow:auto;
}

#email-format {
	width:200px;
	margin:0 auto 80px;
}

#touchpoints {
	width:auto;
	float:left;
	margin:36px 0 73px;
}

#touchpoints ul, #email-format ul {
    display:block;
	margin:0 auto;
	padding:0;
	list-style:none;
	overflow:auto;
}

#touchpoints ul li {
	display:list-item;
	float:left;
	margin:0 30px 5px 0;
	padding:0;
	font-size:15px;
	font-weight:400;
	line-height:19px;
	letter-spacing:0.45px;
	cursor:pointer;
}

#email-format ul li {
	width:auto;
	display:list-item;
	float:left;
	margin:0 0 5px 0;
	padding:0 19px;
	font-size:15px;
	font-weight:400;
	line-height:19px;
	letter-spacing:0.45px;
}

#portfolio-nav {
	width:49px;
	float:right;
	padding:36px 0 77px;
}

.fancybox-content {
	width:750px!important;
	height:100%!important;
	text-align:center!important;
	z-index:100;
}

#prev, #next, #dots {
	width:auto;
	float:left;
	margin:0;
	padding:0;
}

.carousel {
	width:100%;
	min-width:1000px;
	height:205px;
	margin:0 auto;
	box-sizing:border-box;
	overflow:hidden;
}

.carousel a {
	width:176px;
	display:block;
	margin:0 auto 15px;
	box-sizing:border-box;
	overflow:auto;
}

.carousel img {
	margin:0 auto 15px;
  	-webkit-transition:-webkit-transform .2s ease-in-out;
	-moz-transition:transform .2s ease-in-out;
	-o-transition:transform .2s ease-in-out;
  	transition:transform .2s ease-in-out;
}

.carousel a img:hover, #toggle-dm:hover  {
  	-webkit-transform:rotate(90deg);
  	transform:rotate(90deg);
}

#expertise {
	background:#e65722;
}

#footer {
	background:#f6f8fc;
}

#social {
	width:180px;
	margin:0 auto;
	box-sizing:border-box;
	overflow:auto;	
}

#social a {
	width:40px;
	height:40px;
	float:left;
	margin:16px 10px 20px;
	background-repeat:no-repeat;
	background-position:top;
	background-size:cover!important;
	cursor:pointer!important;
}

#linkedin-icon {
	background:url("images/icon-linkedin.png");
}

#email-icon {
	background:url("images/icon-email.png");
}

#instagram-icon {
	background:url("images/icon-instagram.png");
}

#popup {
  	width:82px;
	right:2px;
	margin-top:-31px;
	z-index:100;
  	text-align:center;
  	position:absolute;
	-webkit-border-radius:2px;
	-o-border-radius:2px;
	-moz-border-radius:2px;
  	border-radius:2px;
  	padding:7px 5px;
  	color:#fff;
	font-size:11px;
	line-height:15px;
  	background:#1b1b1b;
}

#popup:after {
  	content:"";
  	width:14px;
  	height:14px;
  	position:absolute;
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
  	background:#1b1b1b;
	-webkit-border-radius:2px;
	-o-border-radius:2px;
	-moz-border-radius:2px;
  	border-radius:2px;
  	z-index:100;
  	bottom:-6px;
  	left:calc(50% - 7px);
}

@media screen and (max-width:1000px) {
	.container {min-width:768px!important;}
	#container {width:90%!important; min-width:90%!important;}
	#photo {position:relative; float:none!important; margin:0 auto!important; padding:10px 0 70px!important;}
	section, main, #scroll-arrow {width:100%!important; max-width:100%!important; min-width:100%!important; height:auto!important;}
	.item-3, #intro, .carousel {width:100%!important; max-width:100%!important; min-width:100%!important; margin:0!important; padding:0!important;}
	.expertise-skill-1 {margin:24px 15px 65px; padding:0!important;}
	.expertise-skill-2 {margin:24px 15px 71px; padding:0!important;}
}

@media screen and (max-width:900px) {
	#touchpoints {margin:60px auto 69px !important; box-sizing:border-box!important; overflow:auto!important; float:none!important; padding:0!important; display:inline-block!important;}
	#other {margin:0 0 5px !important;}
	#portfolio-nav {display:none!important;}
}

@media screen and (max-width:768px) {
	.container, #container {width:80%!important; min-width:80%!important; padding:0!important;}
	.fancybox-content {width:100%!important; min-width:90%!important;}
	#logo {width:80%!important; max-width:80%!important; min-width:80%!important; margin:0 10%!important; padding:0!important;}
	.hide, #hide {display:none!important;}
	#home #logo h1 {animation:fadeIn 0.75s 1!important;animation-fill-mode:forwards!important;animation-delay:0.75s!important;}
	#template {padding:65px 0 75px!important;}
	#intro .skill:hover {color:#c6c6c6!important;}
	#home a:hover, #touchpoints li:hover, .fancybox-button:hover {color:#e65722!important;}
	#intro a:hover {color:#fcfcfd!important;} 
	.carousel a:hover p, #email-format li:hover {color:#1b1b1b!important;}
	.carousel a:hover span {color:#c6c6c6!important;}
	.icon:hover, #social a:hover, #back:hover {background-position:top!important;}
	.carousel a img:hover, #toggle-dm:hover {-webkit-transform:rotate(0deg)!important;transform:rotate(0deg)!important;}
}

@media screen and (max-width:600px) {
	.virgin {width:100%!important; max-width:100%!important; min-width:100%!important; height:auto!important; padding:0!important;}
	#template {width:100%!important; max-width:100%!important; min-width:100%!important; height:auto!important;}
	#popup {width: 45px !important; margin-top: -46px !important;}
}