@font-face {
			  font-family: 'Cormorant';
			  src: url(../fonts/Cormorant-light.ttf) format('truetype') font-weight-light,
 		      url(../fonts/Klavika-Bold.otf) format('truetype') font-weight-bold,
  			  url(../fonts/Klavika-Bold-Italic.otf) format('truetype') font-italic font-weight-bold;
			}
            body,html{
                scroll-behavior: smooth;
                background-color: #eeeeee;
                margin: 0;
                height:100%;
                color: black;
                font-family: "Cormorant";
                
            }
            a, a:visited{
                color: black;
                text-decoration: none;
            }
            a:hover{
                color: black;
                text-decoration: none;
            }
			.button{
				background-color: #FFFFFF; /* Green */
  				border: none;
  				color: black;
  				padding: 15px 32px;
  				text-align: center;
  				text-decoration: none;
  				display: inline-block;
  				font-size: 12px;
			}
			.otsikko{
                font-family: "Alegreya Sans";
                font-weight: 400;
                font-size: medium;
                padding-top:20px;
				}
			.button:hover{
				background-color: #eeeeee; 
			}
            .middleBox{
				width: auto;
                display:flex;
                flex-direction: column;
                align-items: center;

            }
            .contentBox{
                width: 695px;
                margin:5px;
                padding: 5px;
                background-color: white;
                background-clip: content-box;
                border-width: 1px;
                border-style: solid;
                border-color: #b0b0b0;
                list-style: none;
                font-family: "Alegreya Sans";
                font-weight: 300;
                font-size: medium;
                color:#000000
					
                
            }
             .contentBox ul{

                object-fit: cover;
                list-style: none;
                text-align: center;
                margin: 5px;
                padding: 0;
            }
            .artBox{
				width: auto;
                display:flex;
                flex-direction: row;
                align-items: center;
				padding-left:60px;
				padding-right:60px;
				font-size:14px

            }
            .artBox li ul{
                padding-bottom:10px;
                width: 175px;
				height: 220px;
                justify-content: space-between;
            }
            .artBox li ul li{
                padding-bottom:0px;
                justify-content: space-between;
            }
            .artBox img{
                width: 173px;
				height: 173px;
				object-fit:cover;
                padding: 0;
                border-width: 1px;
                border-style: solid;
                border-color: #FFFFFF;
                background-color: white;
                background-clip: content-box;
                transition: width 0.5s ,height 0.5s , border-color 0.5s , padding 0.5s ;
				transition-timing-function:linear
                justify-content: space-between;
				overflow:hidden;
            }
            .artBox a img:hover{
                padding: 4px;
				width:165px;
				height:165px;
                border-color: #b0b0b0;
            }
			.levea{
			margin-left:15px;
				text-align:justify;
			}
            .artBox2{
				width: auto;
                display:flex;
                flex-direction: row;
				padding-left:60px;
				padding-right:60px;
				justify-content:space-around;

            }
			
            .artBox2 li ul{
                padding-bottom:10px;
                width: 175px;
                justify-content: space-between;
            }
            .artBox2 li ul li{
                padding-bottom:0px;
                justify-content: space-between;
            }
            .artBox3{
				width: auto;
				padding-left:60px;
				padding-right:60px;
				justify-content:space-around;

            }
			
            .artBox3 li ul{
                padding-bottom:20px;
				display:flex;
                justify-content: space-between;
            }
            .artBox3 li ul li{
                padding-bottom:0px;
                justify-content: space-between;
            }
            .artBox3 img{
                width: 173px;
				height: 173px;
				object-fit:cover;
                padding: 0;
                border-width: 1px;
                border-style: solid;
                border-color: #FFFFFF;
                background-color: white;
                background-clip: content-box;
                transition: width 0.5s ,height 0.5s , border-color 0.5s , padding 0.5s ;
                justify-content: space-between;
				overflow:hidden;
            }
            i{
				font-size: small
            }
            .artBox2 img{
                width: 173px;
				height: 173px;
				object-fit:cover;
                padding: 0;
                border-width: 1px;
                border-style: solid;
                border-color: #FFFFFF;
                background-color: white;
                background-clip: content-box;
                transition: width 0.5s ,height 0.5s , border-color 0.5s , padding 0.5s ;
                justify-content: space-between;
				overflow:hidden;
            }
            .artBox2 img:hover{
                padding: 4px;
				width:165px;
				height:165px;
                border-color: #b0b0b0;
            }
			#listart{
			width: 175px;
			height: 178px;
			}
            #Esiteksti{
                margin-top:65px;
				font-family: "Alegreya Sans";
				width: 695px;
				font-weight:300;
				font-size:small;
				color:#a0a0a0;
				text-align:start;
            }
            #Header li {
                padding:0px;
                padding-top:20px;
                padding-bottom:20px;
            }
            #ProjektiFooter ul{
                padding: 0;
                padding-top: 20px;
                padding-bottom: 20px;
                margin-right: 60px;
                margin-left: 60px;
                display:flex;
                justify-content: space-between;
            }
            #Header li ul{
                
                padding: 0;
                margin-right: 60px;
                margin-left: 60px;
                display:flex;
                justify-content: space-between;
            }
            #Header li ul li{
                padding:0;
                font-size: larger;
                font-weight: 300;
				width: 33%;
            }
            #ProjektiFooter ul li{
                padding:0;
                font-size: large;
                font-weight: 300;
				width: 33%;
            }
			#suoja{
			pointer-events:none;
			}
			#c{
				font-family: "Alegreya Sans";
				width: 500px
				font-weight:300;
				font-size:smaller;
				color:#a0a0a0;
                text-align: center;
			}
            h1{ 
                text-align: center;
                font-family: "Alegreya Sans";
                font-weight: 300;
                padding-top:20px;
            }
            h2{ 
                text-align: center;
                font-family: "Alegreya Sans";
                font-weight: 300;
                font-style: italic;
                font-size: 24px;
                padding-top:20px;
				margin-bottom:0
            }
            h3{ 
                margin-right: 60px;
                margin-left: 60px;
                text-align: left;
                font-family: "Alegreya Sans";
                font-weight: 300;
                font-style: italic;
                font-size: medium;
                padding-top:20px;
            }
            h4{ 
                text-align: center;
                font-family: "Alegreya Sans";
                font-weight: 300;
                font-style: italic;
                font-size: 16px;
                padding-top:5px;
				padding-bottom:5px;
				margin:0
            }
            #Projekti h2{ 
                padding-top:0px;
            }
            figure{
                padding-right: 55px;
                padding-left: 55px;
                text-align: justify;
                text-justify: auto;
                padding-top: 20px;
            }
            p{
                margin-right: 60px;
                margin-left: 60px;
                padding-bottom: 20px;
				-webkit-hyphens: auto;
				-moz-hyphens: auto;
 				-ms-hyphens: auto;
				hyphens: auto;
				
 				word-wrap: break-word;
 				overflow-wrap: break-word;
                text-align: justify;
                text-justify: auto;
            }
			
			#pieni{
				font-size:14px
			}
            
            
            .kuvitus, .toimistokuvitus {
                text-align: center;
                margin-right: 60px;
                margin-left: 60px;
                }
            .kuvitus img {
                border: #b0b0b0;
                border-width: 1px;
                border-style: solid;
				object-fit:cover;
				width: 100%
                }

            #Header .kuvitus  {
                height: 130px;
                text-align: center;
            }#Header .kuvitus  img {
                border: none;
				height: 100%;
				width:auto;
            }
            #Referenssit li {
                font-weight:300;
            }
            .paluu{
                padding: 20px;
                padding-bottom: 0;
                text-align: left;
            }
            #Yhteys{
                margin-bottom: 15px;
            }
			@-webkit-keyframes fadeIn { from {opacity: 0; } to { opacity: 1; } }
			@-moz-keyframes fadeIn { from {opacity: 0; } to { opacity: 1; } }
			@keyframes fadeIn { from {opacity: 0; } to { opacity: 1; } }

			@-webkit-keyframes marginFade { from {margin-top: 20%; } to { margin-top: 80px; } }
			@-moz-keyframes marginFade { from {margin-top: 20%; } to { margin-top: 80px; } }
			@keyframes marginFade { from {margin-top: 20%; } to { margin-top: 80px; } }