/* CSS Document */

body{
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: #1E1E1E;
  letter-spacing: 1px;
}
section{
	padding-top:100px;
	padding-bottom: 100px;
	overflow: hidden;
}
section#aboutDM{
	padding-bottom:0px;
	padding-top: 150px;
	overflow: hidden;
	}
section#experience{
	padding-top: 0px;
}
.row{
	width:100%;
}
.back {
  display: block;
  background-color:#ffffff;
  width: 200px;
  height: 20px;
  color: #1e1e1e;
  font-size: 10px;
  text-align: center;
  line-height: 20px;
	text-decoration:none;
  position: fixed;
	bottom: 5px;
	right: 0px; 
	z-index: 999;
}
.colorChange{
color:#1e1e1e;
}

.navbar li{
  background-color: #ffffff;
  border:solid 1px #1e1e1e;
  width: 81px;
  height: 81px;
  margin-top: 25px;
  transform: translatey(150px);
  text-decoration:none;
	font-size:25px;
	line-height: 81px; 
  position:absolute;
	right:0;
}
ul li{
	text-align: end;
}
a{
	display:none;
}

li:nth-last-of-type(2){
	right:0;
	top: 100px;
}
li:nth-last-of-type(3){
	right:0;
	top: 200px;
}
li:last-of-type{
	right:0;
	top:300px;
}
#about, #contact, #smile, #projects{
	transition: all 0.7s ease-out; }

.navbar ul li#projects a{
	transition: all 0.7s ease-out;
}

.navbar li:hover{
	width:auto;
}
.navbar li:hover a{
	text-decoration: none;
	display:block;
	padding-left:40px;
	color:#ffffff;
}

.navbar ul li#projects:hover a{
	padding-right:200px;
	color:#1e1e1e!important; }

#projects:hover{
	padding-right:200px; }
#about:hover{
	background-color:#AD782B;
	border:none;
	padding-right:50px;
}
#contact:hover{
	background-color:#80AF96;
	border:none;
	padding-right:50px;
}
#smile:hover {
	background-color:#CF7F66;
	border:none;
	padding-right:50px;
}
header{
	 z-index: 2 }
.hero{
	height: 100vh;
    padding: 0px;
	display:flex;
		align-items: center;
	justify-content: center;
}
.logoHome{
    padding-top: 300px;
    padding-left: 500px;
}
#logo{
	width:200px;
}

.banner .logo {
	bottom:80px;
	top:30px;
}
#homeH1 , #projectsH1{
	transform: rotate(270deg);
	text-align: right;
	line-height: 73px;
	font-size:24px;
	font-weight: 300;
	padding-right:40px;
}
.dot{
	width:20px;
}
.dotsIntro{
  background-image: url("../img/banner-fin.svg");
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  height: 250px;
}

#colorMenu{
	transform: translateX(150px);
	z-index: 9;
	display:flex;
	 }
#colorMenu a {
  display:flex;
  background-color: #D0D0D0;
  width: 81px;
  height: 81px;
  margin-left: 25px;
  transition: all 0.6s ease-out;
}
#colorSquare1 {
	background-color:#1E1E1E!important;
}
#Square5 {
	text-decoration:none;
	font-size:18px;
	line-height: 23px; 
	color:#D0D0D0;
	background-color:#ffffff !important;
}
#squareText {
	transform: rotate(270deg);
}
#colorSquare1:hover {
	height:570px;
	border:solid 1px #1e1e1e!important;
	background-color:#ffffff!important;
}
#colorSquare2:hover {
	height:300px;
	background-color:#AD782B;
}
#colorSquare3:hover {
	height:400px;
	background-color:#80AF96;
}
#colorSquare4:hover {
	height:270px;
	background-color:#CF7F66;
}

#presentation{
	font-size:46px;
	line-height: 58px;
	margin-left:130px;
	margin-right:130px;
	
}
.link {
    display: block;
    color: #d0d0d0;
    text-decoration: none;
}
a.linkProject{
	 display: block;
    color: #1e1e1e;
    text-decoration: none;
}
a.link:hover{
	 color: #1e1e1e;
}
a.linkProject:hover{
	color: #d0d0d0;
}
.word, .works{
	color:#D0D0D0;
}

.textCol{
	display:flex;
	justify-content: center;
	align-items: center;
}
.titleRight {
	transform: rotate(270deg);
}
#softTitle{
	transform:rotate(270deg) translatey(100px);
}
h2 {
	line-height: 98px;
	font-size:78px;
	font-weight: 300;
}
h3{
	line-height:45px;
	font-size:36px;
	font-weight: 300;
}
.projects{
  background-position: center; 
  background-repeat: no-repeat;
  background-size: cover;
  filter: grayscale(100%);
}
.projects img{
	 transition:all .7s ease-out;
}
.projects.colors{
	 filter: grayscale(0)!important;
}
#jazz{
   background-image: url("../img/jazzandthecity.jpg");
}
#mmf{
  background-image: url("../img/mmf.jpg");
}
#variazioni{
  background-image: url("../img/variazioni.jpg");
}
#wine {
  background-image: url("../img/wine.jpg");
}
#altrockfest{
	background-image: url("../img/altrockfest.jpg");
}
#anima{
	background-image: url("../img/museum.jpg");
}
#natlove{
	background-image: url("../img/natlove.jpg");
}

.projects:hover img{
 opacity: 0;
}
.projects:hover{
 filter:grayscale(0%);
}
.creative{
	 transform: rotate(-90deg);
	 font-size: 18px;
     line-height: 22px;
}
h2#creative{
    transform: rotate(-90deg);
    font-size: 38px;
    line-height: 42px;
    font-weight: 300;
}
#illustration1{
		background-image: url("../img/illustration1.jpg");
}
#illustration2{
		background-image: url("../img/illustration2.jpg");
}
#illustration3{
		background-image: url("../img/illustration3.jpg");
}
#illustration4{
		background-image: url("../img/illustration4.jpg");
}
#illustration5{
		background-image: url("../img/illustration5.jpg");
}
.objectDot{
	    padding: 10px 50px;
}
.row.moments {
    margin: 100px 0px 0px 0px;
}

.works{
	line-height: 36px;
	font-size:45px;
}

p:hover {
	color:#1e1e1e;
}
.titleLeft{
	transform:translatey(286px);
	padding-right:100px;
	text-align: right;
	height:100%;
}

#ADOBESkills{
	margin-left:130px;
}
.softwareSkills {
	padding: 42px 75px 0px;
}
hr,p{
	transition:all .7s ease-out;
}

.softwareSkills:hover hr{
	padding-left:350px;
}
.softwareSkills:hover p{
	padding-left:300px;
}
.element{
	width:84px;
	height: 84px;
}
.lajna{
	height: 84px;
	width:150px;
	align-items: center;
	padding-left:21px;
	padding-top:25px;
	color:#1e1e1e;
}
.linea {
	border-top:0.5px solid #1e1e1e;
}
.adobe{
	line-height: 84px;
	font-size: 24px;
	padding-left:42px
}

.dots{
  background-image: url("../img/banner-fin.svg");
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
		height: 533px;
	display:flex;
	align-items: center;
	justify-content: center;
	padding:100px;
}
.logoDots{
	width:200px;
	transform:translatex(180%);
}

.contactMe{
	margin:100px;
}
.contactMe h2{
	padding:0px;
	
}
#shortLine {
	border-top: 0.5px solid #1e1e1e;
	width:170px;
	line-height: 98px;
	margin-top:100px;
}
#contactDetails{
	color:#1e1e1e;
	font-size: 24px;
	line-height: 42px;
}
#contactDetails p{
	text-align: right;
	margin-top:100px;
}
#contactDetails li{
	list-style: none;
}

#social a{
	font-size:18px;
	line-height: 42px;
	display: inline-block;
	color:#1e1e1e;
}
.squareCel{
	display:none;
}
#softTitleCel{
		display:none;
	}
@media (min-width:767px) and (max-width:1280px) {
	/*menu medium*/
.offcanvas.show {
    transform: none;
	width:100%;
}

.offcanvas .btn-close{
    transform: rotate(-180deg);
    transition: all .3s ease-out .3s;
} 
.offcanvas.show .btn-close{
    transform:rotate(0deg);
}	
.navbar-toggler{
  background-color: #ffffff;
  border:solid 1px #1e1e1e;
  width: 81px;
  height: 81px;
  margin-top: 25px;
  transform: translatey(150px);
  text-decoration:none;
  font-size:25px;
  line-height: 81px; 
  position:absolute;
  right:0;
  border-radius:0;
	}
ul li{
	text-align: end;
}
.fade {
    transition: opacity 1.5s ease-out;
}

.offcanvas-body li a{
	display:block;
	text-decoration: none;
	color:#ffffff;
	}
.offcanvas-body li{
  background-color: #ffffff;
  border:solid 1px #1e1e1e;
  width: 81px;
  height: 81px;
  margin-top: 25px;
  transform: translatey(150px);
  text-decoration:none;
	font-size:25px;
	line-height: 81px; 
  position:absolute;
	right:0;
}
button.btn.btn-primary.d-block.d-md-none {
    border: none;
}
li:first-of-type{
	right:0;
	top: 0px;
}
li:nth-last-of-type(2){
	right:0;
	top: 100px;
}
li:nth-last-of-type(3){
	right:0;
	top: 200px;
}
li:last-of-type{
	right:0;
	top:300px;
}
.offcanvas-body ul li#projectsCel a{
		color:#1e1e1e;
	}
#projectsCel {
	width: auto;
    padding: 0px 50px;
}
#aboutCel{
	background-color:#AD782B;
	border:none;
	width: auto;
	padding: 0px 50px;
	}
#contactCel{
	background-color:#80AF96;
	border:none;
	width: auto;
    padding: 0px 50px;
}
#smileCel{
	background-color:#CF7F66;
	border:none;
	width: auto;
    padding: 0px 50px;
}
/*END menu medium*/
	.logoHome{
		padding-left:0;
	}
	#presentation{
    margin-left: 40px;
	margin-right: 40px;
	}
.works {
    line-height: 24px;
    font-size: 30px;
	}
.titleLeft {
     transform: translatey(150px);
    padding-right: 50px;
    text-align: right;
}
.softwareSkills hr{
	padding-left:100px;
}
.softwareSkills:hover hr{
	padding-left:100px;
}
.softwareSkills:hover p{
	padding-left:42px;
}
.contactMe h2{
    line-height: 98px;
    font-size: 50px;
	padding:0px;
}
#ADOBESkills {
    margin-left: 20px;
}
#softTitleCel{
		display:none;
	}
.fields h2, .skills h2  {
    line-height: 53px;
    font-size: 48px;
	}
	h3{
	line-height: 34px;
    font-size: 28px;
	}
	
.logoDots{
	transform: translatex(100%);
	}
}
.squareCel{
	display:none;
}
@media (max-width:767px) {

.btn-primary{
	border-radius:0;
	background-color:#1e1e1e;
	width: 81px;
  height: 81px;
	position:absolute;
	top:0;
	margin-left:50px;
	}	
div#colorMenuCel {
    display: flex;
}	
.offcanvas-body{
		padding:0;
	}
#colorMenuCel a {
  display:flex;
  width:50px;
  margin-left: 25px;
  transition: all 0.6s ease-out;
}
#ceLcolorSquare1 {
	background-color:#1E1E1E!important;
}
#ceLcolorSquare1 {
	height:570px;
	background-color:#ffffff!important;
}
#ceLcolorSquare2 {
	height:300px;
	background-color:#AD782B;
}
#ceLcolorSquare3 {
	height:430px;
	background-color:#80AF96;
}
#ceLcolorSquare4{
	height:270px;
	background-color:#CF7F66;
}
.offcanvas-header{
		color:#ffffff;
	}
	
	/*MENU NAV MOBILE*/
.offcanvas-top{
		background-color:#1e1e1e;
	}
.offcanvas.show  {
    transform: none;
	width:100%;
	height:100vh;
}

.offcanvas .btn-close{
    transform: rotate(-180deg);
    transition: all .3s ease-out .3s;
	background-color: #ffffff; 
} 
.offcanvas.show .btn-close{
    transform:rotate(0deg);
}	
.navbar-toggler{
  background-color: #ffffff;
  border:solid 1px #1e1e1e;
  width: 81px;
  height: 81px;
  margin-top: 25px;
  transform: translatey(150px);
  text-decoration:none;
  font-size:25px;
  line-height: 81px; 
  position:absolute;
  right:0;
  border-radius:0;
	}
ul li{
	text-align: end;
}
button.btn.btn-primary.d-block.d-md-none {
    border: none;
}
.fade {
    transition: opacity 1.5s ease-out;
}
#offCel{
	line-height: 24px;
    font-size: 15px;
	margin:0px;
	}
.offcanvas{
		transition: transform 1s ease-in-out;
	}
.offcanvas-body li a{
	display:block;
	text-decoration: none;
	color:#ffffff;
	}
.offcanvas-body li{
  background-color: #ffffff;
  border:solid 1px #1e1e1e;
  width: 81px;
  height: 81px;
  margin-top: 25px;
  transform: translatey(150px);
  text-decoration:none;
	font-size:18px;
	line-height: 81px; 
  position:absolute;
	right:0;
}
li:first-of-type{
	right:0;
	top: 0px;
}
li:nth-last-of-type(2){
	right:0;
	top: 100px;
}
li:nth-last-of-type(3){
	right:0;
	top: 200px;
}
li:last-of-type{
	right:0;
	top:300px;
}
.offcanvas-body ul li#projectsCel a{
		color:#1e1e1e;
	}
#projectsCel {
	width: auto;
    padding: 0px 50px;
}
#aboutCel{
	background-color:#AD782B;
	border:none;
	width: auto;
	padding: 0px 50px;
	}
#contactCel{
	background-color:#80AF96;
	border:none;
	width: auto;
    padding: 0px 50px;
}
#smileCel{
	background-color:#CF7F66;
	border:none;
	width: auto;
    padding: 0px 50px;
}
	
#colorMenu{
	display:none;
	}
html, body{
        height: 100%;
    }
#hlavne, .lajna.d-inline{
		display:none;
	}
.logoHome{
     padding:0px;
    }
#logo{
 width:175px;
	}
	
#presentation{
	font-size: 33px;
    line-height: 39px;
    margin-left: 40px;
    margin-right: 40px;
	padding-top:100px;
	} 
.rightIMG{
	min-width: 250px;
	height:100%;
	padding-left:20px;
	}
.leftIMG {
	 height: 100%;
	min-width: 250px;
	}
.titleLeft{
	transform: translatey(0px);
	padding-right: 20px;
	width:100%;
}
#web{
	text-align: left;
	padding-left:20px;
	}
.row.m-0.nepar.celRight, .row.m-0.par.celRight {
    flex-direction: row-reverse;
}
.titleRight, #softTitle, .titleLeft{
	width:100%;
	margin-top: 50px;
	}
.textCol{
    width: 100%;
	}
#noCelsoft{
		display:none;
	}
#softTitleCel{
		padding-left:40px;
	display:block;
	}
.works{
	line-height: 23px;
	font-size:15px;
}
h2{
	font-size:33px;
	line-height:39px;
	}
h3{
	font-size: 18px;
    line-height: 24px;
    font-weight: 300;
    margin-bottom: 100px;
    margin-left: 20px;	
	}
	
h2#creative{
    font-size: 28px;
    line-height: 42px;
    font-weight: 300;
    margin-bottom: 100px;
    margin-left: 20px;
	width: 100%;
	}
.par, .row.m-0.par{
	margin: 100px 0px 0px 0px;
	flex-wrap: wrap;
	}
.row.m-0.par{
	flex-wrap:wrap-reverse;	
	margin: 100px 0px 0px 0px;
	}
h2#creative, .titleRight, h3, #softTitle{
	 transform: rotate(0deg);
	margin-bottom: 50px;
	padding-right: 20px;
	padding-left: 20px;
	}
div#illustrationColbig {
    width: 100%;
    text-align: right;
	}
.titleLeft {
    padding-right: 20px;
}
.skills h2{
	font-size: 38px;
    line-height: 45px;
	}
.softwareSkills hr{
	padding-left:0px;
}
.softwareSkills:hover hr{
	padding-left:0px;
}
.softwareSkills:hover p{
	padding-left:42px;
}
.softwareSkills {
	padding: 42px 42px 0px; }
	
#ADOBESkills{
	margin-left:0;
	}
.element{
	width:50px;
	height: 50px;
}

.adobe{
	line-height: 24px;
	font-size: 18px;
	padding-left:40px;
	padding-top: 15px;
}
.lajna{
	display:none;	
	}
	
.softwareSkills hr,p{
	
}
.logoDots {
    transform: translatex(33%);
	width: 170px;
}
.contactMe{
	margin:50px;
	}
.contactMe h2{
	font-size:35px;
	line-height:41px;
	padding:0px;
	}
#shortLine {
	border-top: 0.5px solid #1e1e1e;
	width:50px;
	line-height: 60px;
	margin-top:50px;
}
#contactDetails p{
	text-align: right;
	margin-top:40px;
	padding-bottom:40px;
	list-style:none;
}
#contactDetails li{
	list-style: none;
	}
#contactDetails{
	color:#1e1e1e;
	font-size:18px;
	line-height: 28px;
}
#social a{
	font-size:14px;
	line-height: 24px;
	display: inline-block;
	color:#1e1e1e;
}	
.projects img {
    display: none;
}
.projects{
    height: 250px;
    width: 250px;
	 filter: grayscale(0)!important;
	
}
	.creative{
		display:none;
	}
.col-5.p-0.aos-init.aos-animate, .idCel {
    min-width: 250px;
}
.squareCel{
	display:block;
	    margin: 0 0 100px 0;
}

}