*{margin: 0; padding: 0; font-family: 'Bitter', serif; font-size:16px;}
html{overflow-x: hidden;}
body{
	font-size: 62.5%;
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
}
#backGradient{
	position: fixed;
	top: 0;
	left:0;
	width: 100%;
	height: 100%;
	z-index: -1;
	-webkit-box-shadow: inset 0px 0px 100px 0px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: inset 0px 0px 100px 0px rgba(0, 0, 0, 0.3);
	box-shadow: inset 0px 0px 100px 0px rgba(0, 0, 0, 0.3);
}
#backGradient,body{overflow:hidden;}
a, a:visited{color:inherit; text-decoration:none; outline:none;}
a:hover{text-decoration:underline;}
#siteWrapper{}
	#siteWrapper > *{width: 100%; text-align:center;}
	#siteWrapper header{position: absolute; top: 50%; transition: all 0.5s ease;}
		#largeName{font-size:3.125em; font-weight: normal; z-index: 10; position: relative;}
			#largeName a{font-size:inherit;}
		#randomInfo{margin: 0 auto; max-width: 400px; z-index: 10;}
			#randomInfo a{text-decoration:underline;}

				#siteWrapper main{}
						#portfolioContent{opacity:0; visibility: hidden;}

	#siteWrapper aside{position: absolute; top: 20%; text-align:right; transition: all 0.5s ease;}
	#siteWrapper aside .myTitle{
		background-color: #000000;
		color: #ffffff;
		float: right;
		font-size: 20px;
		padding: 15px;
		text-align: left;
		width: 100px;
		z-index: 11;
	}
	#siteWrapper .clearMe{display: none; z-index: 11;}

#siteWrapper footer{position: absolute; bottom: 50px; z-index: 11;}
	#siteWrapper footer ul li{display:inline; margin-left:20px;}
	#siteWrapper footer ul li:first-child{margin-left:0px;}
	#siteWrapper footer ul li.hiddenRow{visibility: hidden; display: none;}
			#siteWrapper footer ul li.showing{visibility: visible; display: inline-block;}
			#siteWrapper footer ul li.showOnDesktop{}
			#siteWrapper footer ul li.showOnMobile{display: none;}

		.relativeBody{position:relative;}
				.showPortfolio #siteWrapper header, .showPortfolio #siteWrapper aside{top: 50px;}
.showPortfolio main{padding-top: 150px; }
				.showPortfolio #siteWrapper .clearMe{display:inherit; position: absolute; top: 60px; right: 40px;}
				.showPortfolio #siteWrapper footer{position: relative; bottom: inherit; margin: 50px 0;}

		#portfolioContent{text-align: center; margin:0 auto; max-width:700px;}
		.showPortfolio #portfolioContent{visibility: inherit;}
		#portfolioContent *{text-align: left;}
		#portfolioContent .filterTags, #portfolioContent .filterYears{text-align: center;}
		.filterYears{margin-top: 10px;}
		a.filterTag span{font-size:12px;}
		a.filterYear, a.filterTag{color:#0098f6; font-size: 15px;}
		a.filterYear:before, a.filterTag:before{content:"\2022"; padding-right: 7px; padding-left: 5px;}
		a.filterYear:first-child::before, a.filterTag:first-child::before{content:"";}
		#projectsFilter a:hover:before{text-decoration:none; display: inline-block; cursor:text;}
		.yearTitle{font-size:24px; margin:50px 0; text-align: center !important; color:#555555;}
		.yearTitle.noMarginBottom{margin-bottom:0;}
		.projectItem{margin:0 0 40px 0; padding-bottom: 40px; border-bottom: 1px solid #ddd;}
				.leftBlock{display:inline-block; width:65%; width:calc(100% - 220px); vertical-align: top; margin-right: 20px;}
				.noScreens .leftBlock{width: 100%;}
				.rightBlock{display:inline-block; width:195px; vertical-align: top;}
				.projectHead *{display:inline-block;}
				.projectTitle{font-size:19px; margin-right: 5px;}
				.projectLink{color:#0098f6; position: relative; top: -2px;}
						.projectLink img{display:inline-block; width:22px; height:22px; position: relative; top: 5px;}
				.projectLink .webIcon{
					font-size:0;
					display: inline-block;
					vertical-align: top;
					width: 22px;
					height: 22px;
					background: url("../images/link.png") no-repeat scroll 0 0 / 22px 22px transparent;
				}
				.projectLink .webIcon:hover{background: url("../images/linkHover.png") no-repeat scroll 0 0 / 22px 22px transparent;}
				.projectLink .webIcon.pushDown{position: relative; top: 5px;}

				.projectDate{font-size:14px; color:#0098f6; padding-left: 6px; display: none;}
				.projectType{font-size:12px; margin:3px 0; color:#0098f6; }
				.projectTechnology{font-size:13px; margin:8px 0; color:#666666;}
					.projectTechnology span{font-size:14px; color:#000000; display:block;}
				.projectButtons{}
					.projectButtons button{position: relative; background-color: #ffffff; padding: 5px 10px; border: 1px solid #cccccc; margin: 10px 5px 0 0;}
					.projectButtons button:hover{cursor: pointer; border: 1px solid #000000;}
					.projectButtons .tooltip{
						visibility: hidden;
				    background-color: #555555;
				    color: #ffffff;
				    text-align: center !important;
				    border-radius: 6px;
				    padding: 4px 0;
				    position: absolute;
				    z-index: 1;
						width: 80px;
						top: 100%;
						left: 0;
						margin-top: 10px;
						font-size: 13px;
					}
					.projectButtons .showIntro .tooltip{left:20%}
					.projectButtons .showWork .tooltip{left:7%}
					.projectButtons .showIntro .tooltip.showingTooltip{width:220px; left: 0;}
					.projectButtons .showWork .tooltip.showingTooltip{z-index: 0; left: 0;}
					.projectButtons button:hover .tooltip{visibility:visible;}
					.projectButtons button .showingTooltip{visibility:visible;}
					.projectButtons .tooltip:after{
						content: "";
						position: absolute;
						bottom: 100%;
						left: 50%;
						margin-left: -5px;
						border-width: 5px;
						border-style: solid;
						border-color: transparent transparent #555555 transparent;
					}
					.projectButtons .tooltip.showingTooltip:after{left: 25%;}
					.projectButtons .showWork .tooltip.showingTooltip:after{left: 50%;}
				.projectIntro, .projectWork{font-size:14px; margin:10px 0; color:#666666; display: none;}
						.projectIntro span, .projectWork span{font-size:14px; color:#000000; display: none;}
						.projectIntro p, .projectWork p{font-size:13px; color:#666666; margin: 1px 0 5px 0;}
				.projectThumbs{}
						.projectThumbs .thumbnail, .projectThumbs .justTheLogo{width:160px; height:110px; display: table-cell; border:2px solid #dddddd; padding: 15px; vertical-align: middle; text-align: center !important; position: relative;}
						.projectThumbs a{-webkit-box-shadow: 0px 0px 4px 1px #dddddd; box-shadow: 0px 0px 4px 1px #dddddd;}
						.projectThumbs .thumbnail img,
						.projectThumbs .justTheLogo img{width: auto; height: auto; max-height: 110px; max-width: 160px;}
						.projectThumbs .thumbnail.toHide{display:none;}
						.projectThumbs .thumbnail .overlayShots{background:rgba(0,0,0,.3); opacity:0; -webkit-transition: opacity .5s ease; -moz-transition: opacity .5s ease; position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
						.projectThumbs .thumbnail:hover .overlayShots{opacity:1;}

						.projectThumbs .thumbnail.galleryQCRI{background-color: #464646;}
						.projectThumbs .thumbnail.gallerySJEF{background-color: #f16522;}
						.projectThumbs .thumbnail.galleryVacarm{background-color: #e0117d;}
						.projectThumbs .thumbnail.gallerySRFPO{background-color: #303030;}
						.projectThumbs .thumbnail.galleryAimeToi{background-color: #AA1F24;}
						.projectThumbs .thumbnail.galleryASDR{background-color: #1e1e1e;}
						.projectThumbs .thumbnail.galleryBeauBouleau{background-color: #48d1f6;}
						.projectThumbs .thumbnail.galleryHuissierQuebec{background-color: #28c4f0;}
						.projectThumbs .thumbnail.galleryCuisinart{background-color: #000000;}
						.projectThumbs .thumbnail.galleryJoroma{background-color: #3a3a3a;}
						.projectThumbs .thumbnail.gallerySousatzka{background-color: #051222;}
						.projectThumbs .thumbnail.galleryUpchainXLM{background-color: #1C2C40;}
						.projectThumbs .thumbnail.galleryBetterSport{background-color: #084575;}
						.projectThumbs .thumbnail.galleryMTVentilation{background-color: #000000;}


						.projectThumbs .justTheLogo.galleryGCCI{background-color: #424242;}
						.projectThumbs .justTheLogo.galleryGHarding{background-color: #000000;}

						body .featherlight .featherlight-content{text-align: center;}
						body .featherlight .featherlight-content > img{display: inline-block;}

						.projectThumbs .overlayShots span {color:#dddddd; font-size:80%; position: absolute; bottom: 2px; width: 100%; display: block; text-align: center !important;}
	.underlined{color:#0098f6; text-decoration: underline; font-size:13px; }
	.moreInfo, .moreInfoContainer, .goToTop{display:none;}
	.showPortfolio .moreInfo{display:inherit; background-color: #666666; color:#ffffff !important; font-weight: bold; position: fixed; left: 50px; bottom:50px; padding: 3px 1px 0 1px; border-radius: 50%; font-size: 20px; box-shadow: 0 0 0 0 rgba(136,136,136, 0.9); animation: pulse 2s linear 3s infinite; z-index: 11; width: 30px; height: 28px; text-decoration: none;}
	.showPortfolio .moreInfoContainer{display:inherit;
			background-color: #666666;
			height: 0px;
			width: 0px;
			position: fixed;
			bottom: 45px;
			left: 45px;
			opacity:0;
			padding:20px;
			z-index: 10;
			transition: width 1s, height 1s, opacity 2s;
			-moz-transition: width 1s, height 1s, opacity 2s;
			-webkit-transition: width 1s, height 1s, opacity 2s;
			-o-transition: width 1s, height 1s, opacity 2s;
	}
	.showPortfolio .moreInfoContainer p{opacity:0;}
	.showPortfolio .moreInfoContainer.clicked {height: 220px; width: 220px;
			transition: width 1s, height 1s, opacity 2s;
			-moz-transition: width 1s, height 1s, opacity 2s;
			-webkit-transition: width 1s, height 1s, opacity 2s;
			-o-transition: width 1s, height 1s, opacity 2s;
			opacity: 1;
	}
	.showPortfolio .moreInfoContainer.clicked p{color:#dddddd; font-size:80%; padding-bottom:15px; opacity:1;}
	.showPortfolio .moreInfoContainer.clicked p:after{content: ". . ."; display: block; text-align: center;}
	.showPortfolio .goToTop{background-color: #666666; color:#dddddd !important; position: fixed; right: 50px; bottom:50px; padding: 3px 1px 0 1px; border-radius: 50%; width: 30px; height: 28px;}
	.showPortfolio .goToTop img{width: 60%; height: auto; position: relative; top: 10%;}

	.disabledLink{display:none;}

@media only screen and (max-width: 900px) {
	.showPortfolio .moreInfo{left:25px; bottom:25px;}
	.showPortfolio .moreInfoContainer{left:20px; bottom:20px;}
	.showPortfolio .goToTop{right: 25px; bottom:25px;}
	.showPortfolio .moreInfoContainer.clicked p{font-size:120%;}
}

@media only screen and (max-width: 850px) {
	.showPortfolio .moreInfo{left:5px; bottom:5px;}
	.showPortfolio .moreInfoContainer{left:0px; bottom:0px;}
	.showPortfolio .goToTop{right: 5px; bottom:5px;}
	.showPortfolio main {padding: 150px 45px 0 45px; display: table-cell;}
	.showPortfolio #siteWrapper aside{top:0;}
	.showPortfolio #siteWrapper .clearMe{top: 55px; right: 50px;}
	#portfolioContent .filterTags{margin-bottom:10px;}
	.yearTitle{margin:30px 0}
	.projectItem{display: -webkit-box; display: -moz-box; display: box; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical;}
	.leftBlock{-webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; box-ordinal-group: 2; display:block; width: 100%;}
	.rightBlock{-webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; box-ordinal-group: 1; display:block; width: 100%; margin-bottom: 10px;}
	.projectThumbs a:first-child,
	.projectThumbs .justTheLogo{width: 90% !important; display: flex; justify-content: center; align-items: center;}
	.projectThumbs .thumbnail img{max-width: 240px;}
	.showPortfolio #backGradient{z-index: inherit;}
	.showPortfolio #siteWrapper {position: relative; z-index: 1;}
	.projectTitle{display:block;}

}
@media only screen and (max-width: 750px) {
	.showPortfolio .goToTop img{top:15%;}
}
@media only screen and (max-width: 730px) {
	*{font-size:100%;}
	.showPortfolio #siteWrapper header{top:80px;}
	.showPortfolio .goToTop img{top:20%;}
}
@media only screen and (max-width: 440px) {
	*{font-size:100%;}
	a.filterYear, a.filterTag{font-size: 13px;}
	a.filterTag span{font-size: 11px;}
	#randomInfo {max-width: 80%; line-height: 1.6em;}
	#siteWrapper footer{bottom: 20px;}
	#siteWrapper .firstRow, #siteWrapper .lastRow{display:block; margin: 20px 0;}
	#siteWrapper .middleRow{margin: 20px 5px;}

	#siteWrapper footer ul li{float: left; width: 19%;}
	#siteWrapper .firstRow, #siteWrapper .lastRow, #siteWrapper .middleRow{margin: 20px 0px;}
	#siteWrapper footer ul li.showOnDesktop{display: none;}
	#siteWrapper footer ul li.showOnMobile{display: inherit; width: 100%; margin: 0;}
}
@media only screen and (max-width: 330px) {
	#portfolioContent{max-width:220px;}
	.projectThumbs .thumbnail img{max-width: 200px;}
}

@media only screen and (max-height: 700px) {
	*{font-size:100%;}
}

/*Old value 136,136,136*/
@-webkit-keyframes pulse {
	0% {-webkit-box-shadow: 0 0 0 0 rgba(240,80,1, 0.6);}
	70% {-webkit-box-shadow: 0 0 0 10px rgba(240,80,1, 0);}
	100% {-webkit-box-shadow: 0 0 0 0 rgba(240,80,1, 0);}
}
@keyframes pulse {
	0% {-moz-box-shadow: 0 0 0 0 rgba(240,80,1, 0.6); box-shadow: 0 0 0 0 rgba(240,80,1, 0.6);}
	70% {-moz-box-shadow: 0 0 0 10px rgba(240,80,1, 0); box-shadow: 0 0 0 10px rgba(240,80,1, 0);}
	100% {-moz-box-shadow: 0 0 0 0 rgba(240,80,1, 0); box-shadow: 0 0 0 0 rgba(240,80,1, 0);}
}
.tooltipster-base {
  padding: 0;
  font-size: 0;
  line-height: 0;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9999999;
  pointer-events: none;
  width: auto;
  overflow: visible;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 0 14px rgba(0, 0, 0, .3);
  color: #2c2c2c
}

.tooltipster-base .tooltipster-content {
overflow: hidden;
font-size: 14px;
line-height: 16px;
padding: 8px 10px
}

.tooltipster-blue {
background: #3092dd;
color: #fff
}

.tooltipster-red {
  background: #e44a3f;
  color: #fff
}

.tooltipster-black {
  background: #000;
  color: #fff
}

.tooltipster-arrow {
  display: block;
  text-align: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1
}

.tooltipster-arrow span,
.tooltipster-arrow-border {
  display: block;
  width: 0;
  height: 0;
  position: absolute
}

.tooltipster-arrow-top span,
.tooltipster-arrow-top-left span,
.tooltipster-arrow-top-right span {
  border-left: 8px solid transparent!important;
  border-right: 8px solid transparent!important;
  border-top: 8px solid;
  bottom: -7px
}

.tooltipster-arrow-top .tooltipster-arrow-border,
.tooltipster-arrow-top-left .tooltipster-arrow-border,
.tooltipster-arrow-top-right .tooltipster-arrow-border {
  border-left: 9px solid transparent!important;
  border-right: 9px solid transparent!important;
  border-top: 9px solid;
  bottom: -7px
}

.tooltipster-arrow-bottom span,
.tooltipster-arrow-bottom-left span,
.tooltipster-arrow-bottom-right span {
  border-left: 8px solid transparent!important;
  border-right: 8px solid transparent!important;
  border-bottom: 8px solid;
  top: -7px
}

.tooltipster-arrow-bottom .tooltipster-arrow-border,
.tooltipster-arrow-bottom-left .tooltipster-arrow-border,
.tooltipster-arrow-bottom-right .tooltipster-arrow-border {
  border-left: 9px solid transparent!important;
  border-right: 9px solid transparent!important;
  border-bottom: 9px solid;
  top: -7px
}

.tooltipster-arrow-bottom .tooltipster-arrow-border,
.tooltipster-arrow-bottom span,
.tooltipster-arrow-top .tooltipster-arrow-border,
.tooltipster-arrow-top span {
  left: 0;
  right: 0;
  margin: 0 auto
}

.tooltipster-arrow-bottom-left span,
.tooltipster-arrow-top-left span {
  left: 6px
}

.tooltipster-arrow-bottom-left .tooltipster-arrow-border,
.tooltipster-arrow-top-left .tooltipster-arrow-border {
  left: 5px
}

.tooltipster-arrow-bottom-right span,
.tooltipster-arrow-top-right span {
  right: 6px
}

.tooltipster-arrow-bottom-right .tooltipster-arrow-border,
.tooltipster-arrow-top-right .tooltipster-arrow-border {
  right: 5px
}

.tooltipster-arrow-left .tooltipster-arrow-border,
.tooltipster-arrow-left span {
  border-top: 8px solid transparent!important;
  border-bottom: 8px solid transparent!important;
  border-left: 8px solid;
  top: 50%;
  margin-top: -7px;
  right: -7px
}

.tooltipster-arrow-left .tooltipster-arrow-border {
  border-top: 9px solid transparent!important;
  border-bottom: 9px solid transparent!important;
  border-left: 9px solid;
  margin-top: -8px
}

.tooltipster-arrow-right .tooltipster-arrow-border,
.tooltipster-arrow-right span {
  border-top: 8px solid transparent!important;
  border-bottom: 8px solid transparent!important;
  border-right: 8px solid;
  top: 50%;
  margin-top: -7px;
  left: -7px
}

.tooltipster-arrow-right .tooltipster-arrow-border {
  border-top: 9px solid transparent!important;
  border-bottom: 9px solid transparent!important;
  border-right: 9px solid;
  margin-top: -8px
}

.tooltipster-fall {
  top: 0;
  -webkit-transition-property: top;
  -moz-transition-property: top;
  -o-transition-property: top;
  -ms-transition-property: top;
  transition-property: top;
  -webkit-transition-timing-function: cubic-bezier(.175, .885, .32, 1);
  -webkit-transition-timing-function: cubic-bezier(.175, .885, .32, 1.15);
  -moz-transition-timing-function: cubic-bezier(.175, .885, .32, 1.15);
  -ms-transition-timing-function: cubic-bezier(.175, .885, .32, 1.15);
  -o-transition-timing-function: cubic-bezier(.175, .885, .32, 1.15);
  transition-timing-function: cubic-bezier(.175, .885, .32, 1.15)
}

.tooltipster-fall.tooltipster-dying {
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  -ms-transition-property: all;
  transition-property: all;
  top: 0!important;
  opacity: 0
}

.tooltipster-content-changing {
  opacity: .5;
  -webkit-transform: scale(1.1, 1.1);
  -moz-transform: scale(1.1, 1.1);
  -o-transform: scale(1.1, 1.1);
  -ms-transform: scale(1.1, 1.1);
  transform: scale(1.1, 1.1)
}

@media all {
  .featherlight {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2147483647;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    background: #333;
    background: rgba(0, 0, 0, 0)
  }
  .featherlight:last-of-type {
    background: rgba(0, 0, 0, .8)
  }
  .featherlight:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -.25em
  }
  .featherlight .featherlight-content {
    position: relative;
    text-align: left;
    vertical-align: middle;
    display: inline-block;
    overflow: auto;
    padding: 25px 25px 0;
    border-bottom: 25px solid transparent;
    min-width: 30%;
    margin-left: 5%;
    margin-right: 5%;
    max-height: 95%;
    background: #fff;
    cursor: auto;
    white-space: normal
  }
  .featherlight .featherlight-inner {
    display: block
  }
  .featherlight .featherlight-close-icon {
    position: absolute;
    z-index: 9999;
		font-size: 30px;
		right: 2px;
		top: 2px;
    line-height: 25px;
    width: 25px;
    cursor: pointer;
    text-align: center;
    font-family: Arial, sans-serif;
    background: #fff;
    background: rgba(255, 255, 255, .3);
    color: #000
  }
  .featherlight .featherlight-image {
    width: 100%
  }
  .featherlight-iframe .featherlight-content {
    border-bottom: 0;
    padding: 0
  }
  .featherlight iframe {
    border: 0
  }
}

@media only screen and (max-width:1024px) {
  .featherlight .featherlight-content {
    margin-left: 10px;
    margin-right: 10px;
    max-height: 98%;
    padding: 10px 10px 0;
    border-bottom: 10px solid transparent
  }
}

@media all {
  .featherlight-next,
  .featherlight-previous {
    display: block;
    position: absolute;
    top: 25px;
    right: 25px;
    bottom: 0;
    left: 80%;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background: rgba(0, 0, 0, 0)
  }
  .featherlight-previous {
    left: 25px;
    right: 80%
  }
  .featherlight-next:hover,
  .featherlight-previous:hover {
    background: rgba(255, 255, 255, .25)
  }
  .featherlight-next span,
  .featherlight-previous span {
    display: none;
    position: absolute;
    top: 50%;
    left: 5%;
    width: 82%;
    text-align: center;
    font-size: 60px;
    line-height: 80px;
    margin-top: -40px;
    text-shadow: 0 0 5px #fff;
    color: #fff;
    font-style: normal;
    font-weight: 400
  }
  .featherlight-next span {
    right: 5%;
    left: auto
  }
  .featherlight-next:hover span,
  .featherlight-previous:hover span {
    display: inline-block
  }
  .featherlight-loading .featherlight-next,
  .featherlight-loading .featherlight-previous {
    display: none
  }
	.featherlight-next span{display: inline-block; color: #ddd; text-align: right;}
	.featherlight-previous span{display: inline-block; color: #ddd; text-align: left;}
}

@media only screen and (max-device-width:1024px) {
  .featherlight-next:hover,
  .featherlight-previous:hover {
    background: 0 0
  }
  .featherlight-next span,
  .featherlight-previous span {
    display: block
  }
}

@media only screen and (max-width:1024px) {
  .featherlight-next,
  .featherlight-previous {
    top: 10px;
    right: 10px;
    left: 85%
  }
  .featherlight-previous {
    left: 10px;
    right: 85%
  }
  .featherlight-next span,
  .featherlight-previous span {
    margin-top: -30px;
    font-size: 40px
  }
}