@import url('https://fonts.googleapis.com/css?family=Courgette|Libre+Baskerville&display=swap');
@import url('https://fonts.googleapis.com/css?family=Great+Vibes&display=swap');

a {text-decoration: none; color:#c58b47; -webkit-transition: color ease-in-out 2s; /* Safari */
    transition: 2s;}
a:hover {text-decoration: none; color:#ffbb8d;}

body {
	background:#100a0a url(https://i.imgur.com/ACaO28k.png) no-repeat top left fixed;
	font-family:"open sans";
	font-size:13px;
  color: #ad917b;
	line-height:1.7;
	text-align:justify;
	margin:0;
font-family: 'Libre Baskerville', serif;
}

h1 {	  background: -webkit-linear-gradient(#e2a946, #5d3c08);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
	font-family: 'Great Vibes', cursive;
	font-size:50px;
	padding-left:20px;
  text-align: center;
}

blockquote {
	font-family: 'Courgette', cursive;
	font-size: 25px;
	background: -webkit-linear-gradient(#fccda8, #e18d4b);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align:center;margin: 0 0 10px 0;
}
.otsi{
	margin: 0 auto;
background: url(https://i.imgur.com/fcBg3E8.png) no-repeat;
height: 200px;
width: 400px;
}


#sisalto{
margin-left: 450px;
width: 65%;
background: #100a0a;
}

#contentbox{display:inline-block; width:200px; height:200px; overflow: auto; overflow-x:hidden; margin-bottom:35px;}

.container {
  position: relative;
  width: 200px;
  float: left;
  margin: 5px;
}

.contwrap {
  display: block;
  width: 100%;
}

.image {
  display: block;
  width: 200px;
	height: 200px;
  height: auto;
	border-radius: 50%;
	  box-shadow: 1px 1px 2px #c0c0c0;
}

.overlay {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.7);
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
		border-radius: 50%;
}

.container:hover .overlay {
  bottom: 0;
  height: 100%;
}

.text h2{
  white-space: nowrap;
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

#footer {

	width: inherit;
	font-size: 10px;
	padding-top: 40px;
	background: #100a0a;
}

.tuote {
	background: #191111;
	  box-shadow: 1px 1px 2px #000000;
}
.pikkukuva {
	height: 70px;
border: 1px solid #100a0a;
	margin: 5px;
	-webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
	  opacity: 0.7;
    filter: alpha(opacity=70);
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
					padding: 5px;
}

.pikkukuva:hover {
	padding: 5px;
	border: 1px solid #901d0a;
	margin: 5px;
	  -webkit-transform: rotate(-10deg);
     -moz-transform: rotate(-10deg);
       -o-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg);
opacity: 1.0;
    filter: alpha(opacity=100);
}


.lightbox {
	/** Default lightbox to hidden */
	display: none;

	/** Position and style */
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	text-shadow: 0px 0px 3px #000;
	}

.lightbox img {
	/** Pad the lightbox image */
	max-width: 90%;
	max-height: 90%;
	margin-top: 2%;
}

.lightbox:target {
	/** Remove default browser outline */
	outline: none;

	/** Unhide lightbox **/
	display: block;
}

.vali {
	height: 800px;
}