html, body {
	height:100%;
	margin:0px;	margin:auto;
}
.awards{
	position: absolute;
	right: 0px;
	top: 30vh;
	width: 100%px;
	padding:20px;
	height: 70px;
}
.desc{
    background-color: black;
    width: 200px;
    height: 200px;
    position: relative;
    /*left: 0px;*/
    z-index: 1000000;
}
h2{
	font-size: 16px;
	padding-left: 10px;
}
.prizes{
    background-position: center;
    background-repeat: no-repeat;
	width: 60px !important;
	height: 50px;
    display: block;
    /*margin: 0px;*/	
    top: -60px;
    left: 42%;
    position: relative;
}
.cannes{
	background-image: url(../img/cannes.svg);
	background-size: 60px 50px;
	background-position: center;
	background-repeat: no-repeat;
	color: #fff;
	width: 70px;
	height: 40px;
	position: relative;
	z-index: 4;
	display: inline-block;
}
.www{
	background: url(../img/www.svg) no-repeat;
	background-size: 60px 50px;
	background-position: center;
	width: 70px;
	height: 40px;
	position: relative;
	z-index: 4;
	display: block;

}
.fwa{
	background: url(../img/fwa.svg) no-repeat;
	background-size: 60px 50px;
	background-position: center;
	width: 70px;
	height: 40px;
	position: relative;
	z-index: 4;
	display: block;

}
.number{
	vertical-align: center;
	position: relative;
	display: inline-table;
	color:#fff;
	bottom: 0px;
	text-align: center;
	width: 70px;
	height: 30px;
	margin-bottom: 10px;
	font-family: 'Poiret One', cursive;
	font-size: 24px;
	z-index: 4;
	display: block;
}
.container{	
	width: 100%;
	height: 100%;
	z-index:10;	
}
.home{
	width: 100%;
	height: 100%;
	margin-bottom: 30px;
}
.logo{	
	position:relative;
	background-image:url(../img/logo.png);	
	width:300px;	
	height:260px;	
	top: 26%;
	margin: auto;
	opacity: 0.9;
	background-repeat:no-repeat;
	z-index: 4;
	transition: all 0.14s;
}
.name{
	position: absolute;
	color:#fff;
	bottom:10px;
	text-align: right;
	right: 1vw;
	font-family: 'Poiret One', cursive;
	z-index: 3;
	font-size: 16px;
	/*font-size: 1.3vw;*/
	/*min-font-size: 150px;*/
}

.title{
	color:#fff;
	opacity: 0.7;
	font-family: 'Poiret One', cursive;
	font-size: 30px;
	margin-top: 30px;
	padding: 15px;
	padding-bottom: 0px;
	display: flex;
}
.year{
	color:#fff;
	opacity: 0.7;
	font-family: 'Poiret One', cursive;
	font-size: 20px;
	padding-top: 25px;
	padding-bottom: 10px;
}
.title2{
	/*color:#000;*/
	font-family: 'Poiret One', cursive;
	/*text-align: bottom;*/
	font-size: 30px;
	padding: 20px;
	padding-top: 0px;
	padding-bottom: 0px;
}
#particles-js{
	position: fixed;
	top:0px;
	z-index: 1;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: 10% 50%;
	background-repeat: no-repeat;
}
.counter{
	position: absolute;
	color:#fff;
	bottom: 40px;
	width: 100%;
	text-align: center;
	height: 30px;
	font-family: 'Poiret One', cursive;
	font-size: 30px;
	z-index: 2;
}
.contact{
	position: relative;
	width: 100%;
	height: 40px;
	bottom: 0px;
	margin-top: 100px;
	background-color: rgba(255, 255, 255, 0.85);
	z-index: 10;
}
.line{
	width: 98%;
	margin: auto;
	height: 2px;
	background-color: #fff;
	z-index: 11;
	opacity: 0.3;
	position: relative;

}
.line-aw{
	width: 98%;
	margin: auto;
	height: 2px;
	background-color: #fff;
	z-index: 11;
	opacity: 0.3;
	position: relative;

}
.works{
	/*display: block;*/
	position: relative;
	width: 100%;
	/*background-color: rgba(255, 255, 255, 0.85);*/
	border-radius: 2px;
	z-index: 11;
	padding-bottom: 30px;
}
.works-grid{
	font-size: 0px;
	padding: 10px;
}
	.works-grid a.grid-item img{
		width: 100%;
		opacity: 0.9;
		-ms-transform: scale(0.9); /* IE 9 */
   		-webkit-transform: scale(0.9); /* Safari */
    	transform: scale(0.9);
		-webkit-filter: drop-shadow(0.1px 0.1px 0.1px black) grayscale(0.85);
		transition: all 0.4s;
	}
	.works-grid a.grid-item
	{
		font-size: 50px;
		display: inline-grid;
		width: calc(30% + 1px);
		padding: 1.3vw;
		-ms-transform: scale(1); /* IE 9 */
   		-webkit-transform: scale(1); /* Safari */
    	transform: scale(1);
		/*height: calc(33.3% + 1px);*/
		margin-right: -1px;

	}
	.works-grid a.grid-item:hover img{
		/*-webkit-filter: opacity(1);*/
		-ms-transform: scale(1); /* IE 9 */
   		-webkit-transform: scale(1); /* Safari */
    	transform: scale(1);
    	-webkit-filter:  grayscale(0);
    	opacity: 1;
		/*transition: all 0.9s;*/
	}
	.works-grid a.grid-item:target
	{
		width: 100%;
		padding: 1.3vw;
		/*height: calc(33.3% + 1px);*/
		margin-right: -1px;

	}

	p{
		z-index: 10;
		font-size: 2vw;	
		color: #fff;
		text-align: center;
		text-transform: uppercase;
		font-family: 'Poiret One', cursive;
		letter-spacing: 2px;
		/*text-shadow: #FFF 0.3em 0.3em 0.2em;*/

	}
	a{
		text-decoration: none;
	}
	h1{
		z-index: 10;
		font-size: 1vw;	
		color: #fff;
		text-align: center;
		text-transform: uppercase;
		font-family: 'Poiret One', cursive;
		letter-spacing: 2px;
	}
	@media only screen and (max-width : 321px) {
		p{
		top: 20vw;
	}
}


.linkedin{
	top: -28px;
	position: relative;
	float: right;
	margin-right: 10px;
}
.works-grid .project{
	color:#000;
	font-family: 'Poiret One', cursive;
	font-size: 16px;
}

.lightbox {
	display: none;
	visibility: hidden;
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
}
.close-button-img{
	cursor: pointer;
	margin-top: 0px !important;
	top:15px;
	right: 15px;
	position: absolute;
	z-index: 2000;
	width: 20px;
	height: 20px;
	color: #fff;	
}
#icon{
    font-size: 4vw;
    z-index: 100;
    position: absolute;
    top: 76%;
    color: #fff;
    left: 90%;
}

.lightbox img {
	max-width: 90%;
	max-height: 80%;
	margin-top: 8vh;
}

.lightbox:target {
	outline: none;
	display: block;
	visibility: visible;
	opacity: 1;
	transition: opacity 10s ease-in-out;
}
.footer{
	width: 100%;
}
.footer img{
	padding-left: 15px;
	cursor: pointer;
}
.footer .img2{
	padding-left: 15px;
	float:left;
}
.description{
	top:0px;
	position: relative;
}
.nameFooter{
  position: relative;
  color: #fff;
  top: 70px;
  float: left;
  left: 10px;
  opacity: 0.3;
  font-family: 'Poiret One', cursive;
  z-index: 3;
  font-size: 16px;
}

	@media only screen  and (max-width : 640px) {
		.lightbox img {
			margin-top: 30vh;
		}
		.works-grid a.grid-item img{
			width: 100%;
			opacity: 0.9;
			-webkit-filter: drop-shadow(0px 0px 0px) grayscale(0);
		}
		.works-grid a.grid-item:hover img{
			-ms-transform: scale(1); /* IE 9 */
	   		-webkit-transform: scale(1); /* Safari */
	    	transform: scale(1);
	    	-webkit-filter:  grayscale(0);
		}
		.works-grid a.grid-item{
		width: 100% ;
		padding-left: 0px ;
		}
		.name{
		font-size: 12px;
		top:0px;
		}
		.logo{
			top:14.5vh;
		}
		.awards{
			display: inline-flex;
			bottom: 8vh !important;
			left: 2vw;
			top:inherit;
			padding:20px;
			height: 30px;
		}
		.line-aw{
			height: 98% !important;
			width: 2px !important;
			position: relative;
		}
		.cannes{
			background-image: url(../img/cannes.svg);
			background-size: 40px 30px;
			background-position: center;
			background-repeat: no-repeat;
			color: #fff;
			width: 40px;
			height: 30px;
			position: relative;
			z-index: 4;
			display: inline-block;
		}
		.www{
			background: url(../img/www.svg) no-repeat;
			background-size: 40px 30px;
			background-position: center;
			width: 60px;
			height: 30px;
			position: relative;
			z-index: 4;
			display: inline-block;
			padding-left: 20px;

		}
		.fwa{
			background: url(../img/fwa.svg) no-repeat;
			background-size: 40px 30px;
			background-position: center;
			width: 40px;
			height: 30px;
			position: relative;
			z-index: 4;
			padding-left: 20px;
			display: inline-block;

		}
		.number{
			vertical-align: center;
			position: relative;
			display: inline-table;
			color:#fff;
			/*bottom: 0px;*/
			text-align: center;
			width: 60px;
			height: 30px;
			/*padding-right: 20px;*/
			margin-bottom: 10px;
			font-family: 'Poiret One', cursive;
			font-size: 20px;
			z-index: 4;
			display: inline-block;
		}
	}
		@media only screen  and (max-height : 320px) {
		.awards{
			top:5vh;

			}
		.logo{
			top:0vh;
			}
		}
		
	.thumbImgPrizes-0{
		display: none;
	}
	.thumbImgPrizes-1{
	    background: url(../img/cannes-lions.svg) no-repeat;
	}	
	.thumbImgPrizes-2{
	    background: url(../img/fwa.svg) no-repeat;
	}
	.thumbImgPrizes-3{
	    background: url(../img/awwwards.svg) no-repeat;
	}
	.clr{
		clear:both;
    	display: inline-grid;
	}
	#thumbImgPrizes{
	    position: relative;
	    height: 30px;
	    display: flex;
	    background-size: 120px 20px;
	    background-position: center;
	}

	#thumbImgPrizes img{
		height: 30px;
		width: 100px;
		align-self: center;
    	margin: auto;
	}