.landingPage { display: none; filter: blur(0);}

/* Banner */
	.banner h1 { width: auto; }
	.banner p { margin-bottom: -5px; }
	.banner h1 .name { text-shadow: 0 0 10px white; }
	.banner h1 .description {
	    font-size: 0.8rem;
	    letter-spacing: 7px;
	}

/* Modal */
	.bgBlur { animation: bgBlurAnim 0.3s forwards ease-in-out;}
    @keyframes bgBlurAnim {
        100% { filter: blur(5px);}
    }

	.bgBlurOff { animation: bgBlurAnimOff 0.3s forwards ease-in-out;}
    @keyframes bgBlurAnimOff {
        100% { filter: blur(0);}
    }

	.modalContainer { background: rgba(0, 0, 0, .5); display: none;}
	.modalContainer, .modalContent {
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		z-index: 2;
	}
    .modalData {
		perspective: 1250px;
		perspective-origin: right;
    }
    .modalData img { 
    	max-height: 60vh;
    	transform: rotateY(0deg);
    	-webkit-transform: rotateY(0deg);
    	box-shadow: 0 0 25px white;
    	transition: all .5s ease-in-out;
    }
	@media not all and (min-resolution:.001dpcm)
	{ @supports (-webkit-appearance:none) {
	    .modalData img { transform-origin: left; }
	}}

    .projectInfoContainer {
    	top: 0;
    	left: 0;
    }

    .projectHeader { width: 97%; }
    .projectHeader span { font-size: 1rem; }

    .projectHeader, .projectInfo {
	    z-index: 1;
	    background: rgba(0,0,0,.75);
	    box-shadow: 0 0 10px black;
	    border: 1px solid white;
		bottom: 0;
    }

	.projectInfo {
		width: 90%;
	    left: 150%;
	    top: 50%;
	    transform: translate(-50%, -50%);
	    -webkit-transform: translate(-50%, -50%);
	    transition: all .3s ease-in-out;
	}

	.showInfo {
		left: 50%;
		overflow-y: auto;
	}

	.displayInfo { animation: modalInfoAnimation  0.3s forwards ease-in-out; }
	@keyframes modalInfoAnimation {
		0% { transform: rotateY(0deg); -webkit-transform: rotateY(0deg); }
        100% { transform: rotateY(45deg); -webkit-transform: rotateY(45deg); }
    }	

    .btnClose { width: 30px; opacity: 0.5;}
    .iconBorder { fill: none; stroke: black; stroke-miterlimit: 10; stroke-width: 2px;}
    .iconBgWhite { fill: white; }
    .iconContent { fill: black; }

    .btnInfo .iconBgWhite { fill: none; }
    .btnInfo .iconBorder { stroke: white; }
    .btnInfo .iconContent { fill: white; }

/* Menu thumbnails  */
    .thumbnail {
        position: relative;
        -webkit-background-size: cover !important;
        -moz-background-size: cover !important;
        -o-background-size: cover !important;
        background-size: cover !important;
        background: no-repeat center center;
    }

    .thumbImg {
        -webkit-clip-path: polygon(25% 7%, 75% 7%, 100% 50%, 75% 93%, 25% 93%, 0% 50%);
        clip-path: polygon(25% 7%, 75% 7%, 100% 50%, 75% 93%, 25% 93%, 0% 50%);
    }

    .thumbBigUp { animation: thumbBigUpAnim 0.2s forwards ease-in-out; }
    @keyframes thumbBigUpAnim {
        100% {  transform: scale(1.1); z-index: 1; }
    }

    .thumbBigDown { animation: thumbBigDownAnim 0.3s forwards ease-in-out; }
    @keyframes thumbBigDownAnim {
        from {  transform: scale(1.1); }
        to% { transform: scale(1); z-index: initial; }
    }

    .thumbMediumUp { animation: thumbMediumUpAnim 0.2s forwards ease-in-out; }
    @keyframes thumbMediumUpAnim {
        100% {  transform: scale(1.5); z-index: 1; }
    }

    .thumbMediumDown { animation: thumbMediumDownAnim 0.3s forwards ease-in-out; }
    @keyframes thumbMediumDownAnim {
        from {  transform: scale(1.5); }
        to% { transform: scale(1); z-index: initial; }
    }

    .thumbSmallUp { animation: thumbSmallUpAnim 0.2s forwards ease-in-out; }
    @keyframes thumbSmallUpAnim {
        100% {  transform: scale(3); z-index: 1; }
    }

    .thumbSmallDown { animation: thumbSmallDownAnim 0.3s forwards ease-in-out; }
    @keyframes thumbSmallDownAnim {
        from {  transform: scale(3); }
        to% { transform: scale(1); z-index: initial; }
    }

    .svgBorderHexa {
        fill: none;
        stroke: white;
        stroke-width: 2;
    }

    .svgBorderHexaShadow {
        filter: blur(10px);
        opacity: 0.75;
    }

/* Background hexa */
	.perspective {
	    perspective-origin: right;
	    perspective: 550px;
	    top: 0;
	    right: 0;
	    z-index: -1;
	}

	#hexagonsContainer {
	    perspective-origin: right;
	    transform: rotateY(-45deg) rotateX(35deg) rotateZ(5deg);
	   -webkit-transform: rotateY(-45deg) rotateX(35deg) rotateZ(5deg);
	    top: -20%;
	    right: -30%;
	}

	.hexaId {
	    top: 50%;
	    left: 50%;
	}

	.odd {
	    left: 83.3856px; 
	    top:-48px;
	}

	.odd~.even { margin-top: -96px; }

	.hexagonBox { 
	    width:96px; 
	    height:96px;
	    margin-right: 70.486039296794px; 
	    transform: scale(1.08);
	    filter: brightness(1);
	}

	.containerSvg, .containerBevels, .containerSides, .containerSvgShadow { align-items: center; }
	.containerSvg { transform: translateZ(4.5px); }
	.containerSvgShadow { transform: scale(1.2) translateZ(-3.5px); }

	.containerSvgShadow>svg {
	    fill: black;
	    filter: blur(10px);
	    opacity: 0;
	}

	.d-grid { display: grid !important; }

	/* Svg --------------------------------------------------------------------------------------------------------------------------------------------*/
	[id^=hexagon] { fill: #3c505f; }

	.svgGradients {
	    top: -10000px;
	    left: -10000px;
	}

	.gradientCol1 { fill: url(#grad1); }
	.gradientCol1~line { opacity: .05; }

	.gradientCol2 { fill: url(#grad2); }
	.gradientCol2~line { opacity: .1; }

	.gradientCol3 { fill: url(#grad3); }
	.gradientCol3~line { opacity: .2; }

	.gradientCol4 { fill: url(#grad4); }
	.gradientCol4~line { opacity: .3; }

	.gradientCol5 { fill: url(#grad5); }
	.gradientCol5~line { opacity: .4; }

	.gradientCol6 { fill: url(#grad6); }
	.gradientCol6~line { opacity: .5; }

	svg:hover { cursor: pointer }

	/* Bevels --------------------------------------------------------------------------------------------------------------------------------------------*/
	.svgBevel1 { stroke: #667d8c; }
	.svgBevel2 { stroke: #4b5862; }
	.svgBevel3 { stroke: #a3aab1; }

	 /* animations */
	.animate {
	    -webkit-transition: -webkit-all 0.3s ease-in-out;
	    transition: all 0.3s ease-in-out;
	}

	.animateDiagonal {
	  animation: animateDiagonal 0.2s forwards ease-in-out;
	}

/*	.animateZoomIn {
	  animation: animateZoomIn 0.5s forwards ease-in-out;
	}*/

	.animateZoomOut {
	  animation: animateZoomOut 0.5s forwards ease-in-out;
	}

	.hexaUp { animation: animHexaUp 10s forwards ease-in-out; }
	@keyframes animHexaUp {
	    0% {
	    	-webkit-transform: scale(1.08) translateZ(0px); filter: brightness(1);
	    	-moz-transform: scale(1.08) translateZ(0px); filter: brightness(1);
	    	-o-transform: scale(1.08) translateZ(0px); filter: brightness(1);
	    	transform: scale(1.08) translateZ(0px); filter: brightness(1);
	    }
	    50% {
	    	-webkit-transform: scale(1.1) translateZ(15px); filter: brightness(2.5);
	    	-moz-transform: scale(1.1) translateZ(15px); filter: brightness(2.5);
	    	-o-transform: scale(1.1) translateZ(15px); filter: brightness(2.5);
	    	transform: scale(1.1) translateZ(15px); filter: brightness(2.5);
	    }
	    100% {
	    	-webkit-transform: scale(1.08) translateZ(0px); filter: brightness(1);
	    	-moz-transform: scale(1.08) translateZ(0px); filter: brightness(1);
	    	-o-transform: scale(1.08) translateZ(0px); filter: brightness(1);
	    	transform: scale(1.08) translateZ(0px); filter: brightness(1);
	    }
	}

	.hexaDown {
	 animation: animHexaDown 10s forwards ease-in-out; }
	@keyframes animHexaDown {
	    0% {
	    	-webkit-transform: scale(1.08) translateZ(0px); filter: brightness(1);
	    	-moz-transform: scale(1.08) translateZ(0px); filter: brightness(1);
	    	-o-transform: scale(1.08) translateZ(0px); filter: brightness(1);
	    	transform: scale(1.08) translateZ(0px); filter: brightness(1);
    	}
	    50% {
	    	-webkit-transform: scale(1) translateZ(-15px); filter: brightness(.5);
	    	-moz-transform: scale(1) translateZ(-15px); filter: brightness(.5);
	    	-o-transform: scale(1) translateZ(-15px); filter: brightness(.5);
	    	transform: scale(1) translateZ(-15px); filter: brightness(.5);
    	}
	    100% {
	    	-webkit-transform: scale(1.08) translateZ(0px); filter: brightness(1);
	    	-moz-transform: scale(1.08) translateZ(0px); filter: brightness(1);
	    	-o-transform: scale(1.08) translateZ(0px); filter: brightness(1);
	    	transform: scale(1.08) translateZ(0px); filter: brightness(1);
		}
	}


/* filter: brightness(10)  */

	.zoomUpDown {
	    animation: zoomUpDown 10s infinite linear;
	}


	@keyframes zoomUpDown {
	    0% {
	        -webkit-transform: scale(1.08) translateZ(0);
	        -moz-transform: scale(1.08) translateZ(0);
	        -o-transform: scale(1.08) translateZ(0);
	        transform: scale(1.08) translateZ(0);
	    }
	    33% {
	        -webkit-transform: scale(1.08) translateZ(-50px);
	        -moz-transform: scale(1.08) translateZ(-50px);
	        transform: scale(1.08) translateZ(-50px);
	        transform: scale(1.08) translateZ(-50px);
	    }
	    66% {
	        -webkit-transform: scale(1.08) translateZ(50px);
	        -moz-transform: scale(1.08) translateZ(50px);
	        -o-transform: scale(1.08) translateZ(50px);
	        transform: scale(1.08) translateZ(50px);
	    }   
	    100% {
	        -webkit-transform: scale(1.08) translateZ(0);
	        -moz-transform: scale(1.08) translateZ(0);
	        -o-transform: scale(1.08) translateZ(0);
	        transform: scale(1.08) translateZ(0);
	    }
	}
/* Footer */
.footer {
	display: none;
	bottom: 5px;
}