@charset "utf-8";

*{
	box-sizing: border-box;
}

body {
	margin:  0;
	background-color: #444444;
}

.content {
	margin: auto;
	
}

.side-column{
	background-color: #333333;
	height: 100%;
	z-index: 1;
	
}

#main {
	width: 60%;
	max-width: 980px;
	height: 100vh;
	min-height: calc(100vw/2);
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	margin: auto;	
}

.decorative-circle1{
	position: fixed;
	width: 100vh;
	height: 100vh;
	border-radius: 50%;
	background-color: #BF6239;
	top:  -25%;
	left: 35%;
	
}

.decorative-circle2{
	position: fixed;
	width: 60vh;
	height: 60vh;
	border-radius: 50%;
	background-color: #7F6B96;
	top:  80%;
	left: 0%;

}

#card-wrap {
	height: 100vh;
	width: 100%;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;	
}

.card{
	top:  auto;
	width: 70%;
	background-color: rgba(255,255,255,0.5);
	border-radius: 20px;
	backdrop-filter:  blur(15px);
	border-top:  3px solid rgba(255,255,255,0.2);
	border-left:  3px solid rgba(255,255,255,0.2);
	box-shadow: 5px 5px 30px rgba(0,0,0,0.5);
	z-index: 2;
	transform-origin: top;
	transform-style: preserve-3d;
	transition: 1s;
	cursor: pointer;
}

@keyframes cardToTop {
	0% {
		top: auto;
	}

	100% {
		top: 0;
	}
}

.card-txt {
	text-align: center;
	font-size: 2.5vw;
	font-family: 'Josefin Sans', sans-serif;
	color:  #4D4D4D;
}

#name-txt{
	animation: textEntryUp 1s 1;
}

@keyframes textEntryUp {
	from {
		transform: translateY(-50px);
		opacity :0;
	}
	to {
		transform: translateY(0px);
		opacity :1;
	}
}

#port-txt{
	animation: textEntryDown 1s 1;
}

@keyframes textEntryDown {
	from {
		transform: translateY(50px);
		opacity :0;
	}
	to {
		transform: translateY(0px);
		opacity :1;
	}
}


#logo-img {
	background-image: url("./../images/jandro_logo.png");
	background-repeat: no-repeat;
	background-position: top center;
	background-size: contain;
	width: 80%;
	height: calc(20vw/2.2);
	min-height: 120px;
	margin: auto;
	animation: imageEntryZoom 1s 1;
	transform: scale(0);
	animation-delay: 0.6s;
	animation-fill-mode: forwards;
	transition: 1s;
}

@keyframes imageEntryZoom {
	0%{
		transform: scale(0);
		opacity :0;
	}
	80%{
		transform: scale(1.1);
	}
	100%{
		transform: scale(1.0);
		opacity :1;
	}
}

@keyframes logoUpWidth {
	from {
		width: 30vw;
	}
	to {
		width: 30vw;
	}
}

.blok-prova{
	background-color: red;
	width: 300px;
	height: 300px;
}

#transition-block{
	height: 100vh;
	width: 100%;
	background-color: #333333;
	top: 100vh;
	position: absolute;
}

#mark-scroll1 {
	background-color: red;
	width: 100%;
	height: 2px;
}

#menu {
	visibility: hidden;
	position: absolute;
	display: grid;
	grid-template-columns: 33% 33% 33%;
  	grid-template-rows: 50% 50%;
  	grid-gap: 2em;
  	width:  60%;
  	max-width: 1024px;
  	height: 50%;
  	min-height: 400px;
  	top: 28%;
  	margin-left: -3em;
  	z-index: 1;
}

.menu-item{
	background-color: white;
	width: 100%;
	height: 100%;
	text-decoration: none;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	border-radius: 10px;
	box-shadow: 5px 5px 30px rgba(0,0,0,0.5);
	transform: scale(0);
	transition: 1s;
}

/*
.menu-item::before{
	position:  absolute;
	content: '';
	background-color: rgba(0, 0, 0, 0.6);
	width: 100%;
	height: 22%;
	z-index: -1;
	transition: 0.5s;
	border-radius: 10px;
	border-top:  3px solid rgba(255,255,255,0.2);
	border-left:  3px solid rgba(255,255,255,0.2);
	box-shadow: 5px 5px 30px rgba(0,0,0,0.5);
	margin: 0;
}
*/

.menu-item:hover::before{
	background-color: rgba(255, 255, 255, 0.6);
	height: 100%;
}

.menu-item:hover p{
	background-color: rgba(0, 0, 0, 0.6);
	padding-top: 38%;
	vertical-align: middle;
}

.menu-item p {
	margin: 0;
	padding-top: 1em;
	text-align: center;
	color:  white;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 1.3vw;
	transition: 0.5s;
	text-shadow: 1px 1px 4px rgba(0,0,0,0.8);
}

.menu-item:nth-child(1) {
	background-image: url("./../images/design_sec.jpg");
	transition-delay: 0.2s;
}

.menu-item:nth-child(2) {
	background-image: url("./../images/foto_sec.jpg");
	transition-delay: 0.4s;
}

.menu-item:nth-child(3) {
	background-image: url("./../images/web-sec.JPG");
	transition-delay: 0.6s;
}

.menu-item:nth-child(4) {
	background-image: url("./../images/video_sec.png");
	transition-delay: 0.8s;
}

.menu-item:nth-child(5) {
	background-image: url("./../images/sc3_hidden_lo.jpg");
	transition-delay: 1s;
}

.menu-item:nth-child(6) {
	background-image: url("./../images/music_sec.jpg");
	transition-delay: 1.2s;
}

.credit-txt {
	color: white;
	z-index: 2;margin-top: 1em;
	grid-column-start: 1;
	grid-column-end: 4;
	text-align: center;
	line-height: 1.5em;
}

.credit-txt spam {
	color: #BF6239;
}

@media (min-width: 2000px) {
	.menu-item p {
		font-size: 0.9vw;
	}

	.card-txt{
		font-size: 38px;
	}

	#logo-img {
		height: 218px;
	}

}

@media (min-height: 1200px) {
	#menu{
		top: 360px;
		height: 45%;
	}
}

@media (orientation: portrait) {
	#menu {
		grid-template-columns: 100%;
	  	grid-template-rows: repeat(6,auto);
	  	grid-gap: 2em;
	  	width:  75%;
	  	height: 100%;
	  	min-height: 400px;
	  	top: 200px;
	  	margin-left: 0;
 	 }

 	 .menu-item {
 	 	grid-column: 1;
 	 	height: 25vh;
 	 }

 	 .credit-txt {
 	 	font-size: 3vw;
		grid-column-start: 1;
		grid-column-end: 1;
		margin-bottom: 1em;
	}

	.menu-item p {
		font-size: 4vw;
	}

	.menu-item::before{
		background-color: rgba(255, 255, 255, 0.6);
		height: 30%;
	}

	.card{
		width: 100%;
	}

}