@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Muli:300,400,700,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Chilanka&display=swap');


.clear { clear:both; }

*{ box-sizing:border-box; }

body{
  max-width:100%;
  margin:0;
}

img{
	max-width:100%;
	margin:auto;
}
	

a { 
	text-decoration:none;
}

h1 {
	text-align:center;
}

.bianco {
	width:100%;
	height:195px;
}

.testata2{ 
	width:100%;
	height:100vh;
    background-color: rgba(255,244,235,0.4);
}

.immagine2{
	/*background-image:url(../images/back/back3.jpg);
	background-size:cover;
	height:100vh;
	background-repeat:no-repeat;
	position:absolute;
	top:-300px;
	left:0;
	right:0;*/
}

.menu2 {	
	background: rgba(255,244,235,0.7);/*rgb(243,243,243);*/
	font-family:Muli;
	font-weight:400;
	text-align:center;
	font-size:16px;	
	position:fixed;
	top:20px;
	left:0px;
	right:0px;
	z-index:1;
}

.menu2 a {
	color:#620022;
	transition:0.3s;
}

.menu2 a:hover {
	color:white;
}

.menu2 ul {
	list-style:none;
	padding-left:0;
}

.menu2 li {
	display:inline-block;
	padding-left:7px;	
}

.sottomenu2 {	
	background-color: rgba(255,244,235,0.7);/*rgb(243,243,243);*/
    padding: 15px;
	font-family:Muli;
	font-weight:300;
	text-align:center;
	font-size:11px;	
	position:fixed;
	top:-300px;
	left:0px;
	right:0px;
	z-index:1;
}

.sottomenu2 a {
	color:#620022;
	transition:0.3s;
	padding:0 5px;
}

.sottomenu2 a:hover {
	color:gray; 
}

.sottomenu2 ul {
	list-style:none;
}

.sottomenu2 li {
	display:inline-block;
    padding:3px 7px;
	
}

#bottonenascondi {
	display:none;
}

.freccia{
	position:absolute;
	top:75px;
	left:50%;
	transform:translate(-50%);	
}

.mono{
	width:100%;
	position:absolute;
	top:230px;	
	left:50%;
	transform:translate(-50%);
	text-align:center;	
}

.mono img {
	width:21%;
}

.nomesopra {
	font-family:Indie Flower;
	font-size:10px;
    font-weight:400;
	margin-top:5px; 
}

.sottotitolo{
	width:100%;
	position:absolute;
	top:100px;	
	left:50%;
	transform:translate(-50%);
	text-align:center;
	font-family:Muli;
    font-weight:300;
    font-size:7px;
}


.galleria{
	width:100%;
	float:left;	
	padding:10px;
}
.galleria img{
	width:33%;
	float:left;	
	padding:5px;
}

.scritto{
	width:100%;
	padding:20px;
}

.scritto h1 {
	font-family:Muli;
	font-weight:400;	
	text-align:center;
	font-size:80%;
}

.scritto p {
	font-family:Muli;
	font-weight:300;	
	text-align:justify;
	font-size:70%;		
}

.onu {
    text-align: center;
}
.onu img {
    width:50px;
}

.tesivale{
background: rgb(98,0,34);
background: -moz-linear-gradient(left, rgba(98,0,34,1) 0%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(left, rgba(98,0,34,1) 0%,rgba(255,255,255,1) 100%);
background: linear-gradient(to right, rgba(98,0,34,1) 0%,rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#620022', endColorstr='#ffffff',GradientType=1 );
}

.aroma{
background: rgb(98,0,34);
background: -moz-linear-gradient(left, rgba(98,0,34,1) 0%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(left, rgba(98,0,34,1) 0%,rgba(255,255,255,1) 100%);
background: linear-gradient(to right, rgba(98,0,34,1) 0%,rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#620022', endColorstr='#ffffff',GradientType=1 );
}

.gesport{
background: rgb(98,0,34);
background: -moz-linear-gradient(left, rgba(98,0,34,1) 0%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(left, rgba(98,0,34,1) 0%,rgba(255,255,255,1) 100%);
background: linear-gradient(to right, rgba(98,0,34,1) 0%,rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#620022', endColorstr='#ffffff',GradientType=1 );
}

.aboutvale{
background: rgb(98,0,34);
background: -moz-linear-gradient(45deg, rgba(98,0,34,1) 0%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(45deg, rgba(98,0,34,1) 0%,rgba(255,255,255,1) 100%);
background: linear-gradient(45deg, rgba(98,0,34,1) 0%,rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#620022', endColorstr='#ffffff',GradientType=1 );

	font-family:Raleway;
	text-align:justify;
	font-weight:300;
	font-size:70%;
    margin-bottom: 100px;
}

/*about*/
.nome{
	width:100%;
	text-align:center;
	font-family:Muli;
	font-size:15px;
    font-weight:400;
    padding-top: 15px;
}

.aboutcontenuto{
	width:100%;
    padding-bottom: 10px;
}


.aboutsinistra{
	width:100%;
	padding:0 40px;
}

.aboutsinistra p{
	font-family:Muli;
	font-weight:300;
	font-size:90%;
}

.aboutdestra{
	width:100%;	
	padding:10px 40px;
    text-align: center;
}

.aboutdestra img{
    max-width: 70%;
    margin-top: 10px;
}

.skills{
	width:100%;
	padding:30px;
}

.skills1{
	width:100%;
	padding:30px;
	margin-top:-20px;
}

.skills2{
display:none;
}

.cv1{
	width:100%;
	text-align:center;
	padding-bottom:10px;
}

.info{
	background: rgb(242,242,242);
	background: -moz-linear-gradient(top, rgba(242,242,242,1) 0%, rgba(211,211,211,1) 100%);
	background: -webkit-linear-gradient(top, rgba(242,242,242,1) 0%,rgba(211,211,211,1) 100%);
	background: linear-gradient(to bottom, rgba(242,242,242,1) 0%,rgba(211,211,211,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#d3d3d3',GradientType=0 );
	width:100%;
	position:fixed;
	bottom:0;
	left:0;
	right:0;
	text-align:center;
	padding:10px;
}

.info img{
	width:5%;
}

.info p{
	font-family:Muli;
	font-weight:300;
	font-size:30%;
}

.cv object{
	width:100%;
	height:100vh;
}


/*per tablet*/
@media ( min-width : 768px ){
	
	.bianco {
	height:50px;
	}
    
    .spaziosotto{
	height:100px;
    }

	.immagine2{
	background-size:cover;
    margin-top: -10px;
	}

	.menu2 {	
	font-size:100%;	
	}
	
	.sottomenu2 {	
	font-size:90%;	
	}
	
	.mono{
	position:absolute;
	top:270px;	
	left:50%;
	transform:translate(-50%);	
	}

    .mono img {
	width:20%;
	}
    
	.nomesopra {
	font-size:25px;
    margin-top:45px;
	}

	.sottotitolo{
	width:100%;
	position:absolute;
	top:250px;	
	left:50%;
	transform:translate(-50%);
	text-align:center;
	font-family:Muli;
	font-size:20px;
	}

	.galleria{
	width:100%;
	float:left;	
	padding:10px;
	}
	
	.galleria img{
	width:33%;
	float:left;	
	padding:5px;
	}

	.scritto{
	width:100%;
	padding:20px;
	}

	.scritto h1 {
	font-family:Muli;
	font-weight:400;	
	text-align:center;
	font-size:80%;
	}

	.scritto p {
	font-family:Muli;
	font-weight:300;	
	text-align:justify;
	font-size:70%;		
	}

	.freccia{
	top:60px;
	}
	
	.spaziosotto{
	height:190px;
	}

	.tesivale{
	}
	
	.aroma{
	}
	
	.gesport{
	}

	.aboutvale{
	padding:50px;	
	margin-top:37px;	
	font-family:Muli;
	text-align:justify;
	font-weight:300;
	font-size:80%;
	}
	
	.aboutsinistra p{
	font-size:100%;
	}
	
	.aboutdestra{	
	padding:10px 200px;
	}

	.skills{
	padding:20px 40px;
	}

	.skills1{
	padding:50px 50px;
	}

	.info{
	padding:7px;
	}

	.info img{
	width:3%;
	}
	
	.info p{
	font-size:50%;
	}
}

/*per desktop*/
@media ( min-width : 1024px ){
	
	.immagine2{
	background-size:cover;
	}
	
	.mono{
	position:absolute;
	top:200px;	
	left:50%;
	transform:translate(-50%);	
	}

	.nomesopra {
	font-size:35px;
	}

	.mono img {
	width:13%;
	}

	.sottotitolo{
	width:100%;
	position:absolute;
	top:300px;	
	left:50%;
	transform:translate(-50%);
	text-align:center;
	font-family:Muli;
	font-size:100%;
	}

	.galleria{
	width:60%;
	float:left;	
	padding:10px;
	padding-left:50px;
	}
	
	.galleria img{
	width:33%;
	float:left;	
	padding:5px;
	}

	.scritto{
	width:40%;
	float:right;
	padding-right:50px;
	}

	.scritto h1 {
	text-align:center;
	font-size:110%;
	}

	.scritto p {
	text-align:justify;
	font-size:90%;
	}

	.tesivale{
	}
	
	.aroma{
	}
	
	.gesport{
	}

	.aboutvale{
	font-size:90%;
	}
	
	/*about*/
.nome{
	font-size:30px;
}

.aboutsinistra{
	width:50%;
	float:left;
	padding:20px;
	padding-left:50px;
}

.aboutsinistra p{
	font-size:130%;
}

.aboutdestra{
	width:50%;
	float:right;	
	margin-top:27px;
	padding:0;
}
	
.aboutdestra img{
	padding:100px;
	padding-right:80px;
	margin-top:-90px;
}

.skills2{
	display:inline-block;
	width:100%;
	padding:0 80px;
	margin-bottom:50px;
}

.skills,
.skills1{
	display:none;
}

	.info{
	padding:5px;
	}

	.info img{
	width:2%;
	}
		
	.info p{
	font-size:60%;
	}
	
}