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

body {
	margin:0;
}

footer{
background-color: #131212;
	margin: 0; 
}

footer p {
	font-family: montserrat, serif;
	color: white; 
	text-align: center;
	padding: 50px 0 50px 0;
	margin: 0;
}

.fullscreen {
  min-height: 100vh;
	 flex-direction: column;
  justify-content:center;
}


#cv{
	
;

}



.mockup {
	align-items: flex-end;
}

.card-work{ 
	background-color: #F2F2F2;
	grid-template-columns: 1fr 1fr; 
	border-radius: 5%;
	
	}

.text-work {
	z-index: 2;
}


.vertical
{
    writing-mode: tb-rl;
    filter: flipv fliph;
text-align: right;	

}

.vertical h5{
	font-family: 'Roboto';
	font-size: 13px; 
	color:#898888;
	letter-spacing: 2px;
}

#skills {
	background-color:#F2F2F2;
	letter-spacing: 1px;
	margin-bottom: 60px;
}


#works h4{
font-family: 'Roboto', sans-serif;
font-weight: 700;
font-size: 25px;
color: #504F4F;
	padding-top: 30px;
}





#contact {
background-color:#F2F2F2;
	padding-bottom: 200px;
}

#main h1 {
font-family: 'Roboto', sans-serif;
font-weight: 700;
font-size: 60px;
}

#contact p{
	font-family: 'Roboto', sans-serif;
font-weight: 700;
font-size: 60px;
}


.title-links {
	color: #3467CE;
	text-decoration: none;
}

.title-links:hover {
	text-decoration:none;
}

.sectionpadding{
padding-top: 100px;
padding-bottom: 50px;	
}

#skills h3{
	padding: 20px 0 3px 0;
}

.light {
	font-weight: 300;
}



.element{

	padding-bottom: 70px;
	
}

h2 {
	padding-bottom: 90px;
	font-family: 'Roboto', sans-serif;
	font-weight: 900;
	font-size: 40px;
	color:#C6C3C3;
	padding-top:10px;
	
}

#works h2{
	padding-bottom: 150px;
	text-align: center;
}



.designapp {
		padding-left: 40px; 
	padding-right: 40px; 
}
.designapp h3 {
	font-size: 35px; 
	font-family: 'Roboto', sans-serif;
	font-weight: 700;

}

.designapp h4 {
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 15px;
}

.work1 { 
padding-bottom: 150px; 
}

foother {
	background-color: #292929;
}

.social{
	line-height: 1.2; 
}

h3{
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	color: #504F4F;
	
}



#works h3{
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	color: #504F4F;
	padding-bottom: 15px;
	display: inline-block;
	font-size: 30px;
	
}

#works p {
	font-family: 'montserrat', serif;
	color: #898989;
	font-size: 15px;
	line-height:25px;
}

#works li {
	font-family: 'montserrat' serif;
	list-style: none;
		color: #898989;
	
}

#skills p {
	font-family: 'montserrat' serif;
	color:#7D7B7B;
	letter-spacing: 1px;
	font-size: 15px;
	line-height: 24px;
	padding-left: 20px;
	padding-right: 20px;
}

#works ul{
	padding-inline-start:0px;
}


.blueelement {
	border-left: 7px solid #3467CE;
	width: 30px;
	height: 25px;
	display: inline-block;
}

#skills img{
	width: 80%;
}


	#skills object {
		width: 80%;
	}


.phone-mockup{
	padding-left: 40px;
	grid-column-start: 2;

	
}

a:hover{ 
color:#FFF;
-webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;}

/* MEDIAQUERY */
/* Small devices (landscape phones, 576px and up)*/
@media (max-width: 768px) {
	
	
	
	.skill img {
		max-width: 60%;
	} 
	
	#contact{
		background-color: #FFFFFF;
		padding-top: 0px;
	}
	
	#works h2{
		padding: 0px 8px 100px 8px;
	}
	
	
	 .text-work{
	   grid-row-start: 1;
	grid-row-end: 3;
		 	grid-column-start: 1;
		grid-column-end: 4;
		
	
}
	.phone-mockup{
	
	 padding: 60px 0 0 0;
	text-align: center;
		
	}
	
	.mockup{
		width: 60%;
		text-align: center;
		padding: 0;
		
	}
	
	#works .container2 {
	display: grid;
		grid-template-rows: 1fr 2fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
	height: 100vh;
}
	
	.card-work{ 
		grid-column-start: 1;
		grid-column-end: 4;
	grid-row-start: 3;
	grid-row-end: 7;
		border-radius: 0%;
/* taglia visuale telefono 	*/	overflow: hidden;
	}
	
	
	h2{
		text-align: center;
	}

	}
	#skills{
			text-align: center;
	}
h1 {line-height: 60px;
	font-size: 55px;
	}
	
	#skills p{
		padding-bottom: 0px; 
	}
	
	#skills object {
		width: 70%;
	}
	
	#contact p{
		line-height: 60px;
	font-size: 55px;
	}

	#skills {
	
	margin-bottom: 0px;
}
	
	section{
padding-bottom: 0px;	
}

.app{
	padding-top: 40px;
}

.icon{
	padding: 40px;
}

.vertical{padding-right: 40px;}
/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
	
	
	#works h2{
	padding-bottom: 50px;
	text-align: center;
}
	
	
	#works .container2 {
	display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 2fr 1fr 1fr;
		height: 100vh;}
		
  




.card-work{ grid-column-start: 3;
	 grid-column-end: 6;
	grid-row-start: 2;
	grid-row-end: 5;
	overflow: hidden;
	transition: all 0.3s;
	}


.text-work{
	grid-column-start: 2;
	grid-column-end: 4;
	grid-row-start: 3;
	grid-row-end: 4;
	
}
	
	.skill {margin: 0px;
	padding: 0}
	.designapp {
		padding-left: 0px; 
	padding-right: 0px; 
}
	.app{
	margin-top: 0px;
	}	
		

	.phone-mockup {
		text-align: right;
	}
	
	.mockup {
		 padding: 30px 30px 0 0 ;
		transition: all 0.5s;
		max-width: 60%
	}
	
	.card-work:hover {
		overflow: visible;
		
	}
	
	.card-work:hover > .phone-mockup > .mockup {
		max-width: 50%;
		padding:20px 20px 0 0 ;
		    
	}

	
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px){
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {}