body {
	background-color : rgb(140,4,4);
}
.header {
	height : 160px;
	width : 100%;
	background-color : rgb(200,0,0);
	background-image : url(pictures/jarvi.jpg);
	background-size : 100%;
}
.header img {
	width : 100px;
	opacity : 20%;
	transition : 1s;
}
.header img:hover {
	opacity : 100%;
}
.modal {
	display : none;
	position : fixed;
	padding-top : 300px;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.4);
}
.modal-content {
  background-color: #ffc3c3;
  padding : 20px 20px;
  margin : 0 10% 0 10%;
  text-align : center;
  border-radius : 4px;
  overflow-x : auto;
}
#content {
	height : 500px;
	background-color : #ffc3c3;
}
#kuv, #kuv2, #kuv3, #kuv4 {
	transition : 1s;
	margin : 20px;
	opacity : 40%;
}
.column.left {
	background-image : url(pictures/WP_20191220_324.jpg);
	background-size : 300px;
	float : left;
	width : 20%;
	background-color : black;
	height : 100%;
}
.column.left ul {
	list-style-type : none;
	padding : 20px;
}
.column.left li {
	padding : 10px 10px;
	text-align : center;
	font-family : 'Abril Fatface', cursive;
	text-transform : uppercase;
}
.column.left li:hover {
	background-color : rgb(160,5,5);
	border-top : 2px solid rgb(200,8,8);
	border-right : 2px solid rgb(180,6,6);
	border-bottom : 2px solid rgb(120,2,2);
	border-left : 2px solid rgb(140,4,4);
	font-size : 1.5em;
	padding : 3px 3px;
	transition : 0.5s;
}
.column.right {
	float : left;
	width: 5%;
}
#kuv:hover, #kuv2:hover, #kuv3:hover, #kuv4:hover {
	transform: rotate(-3deg) scale(2.0);
	box-shadow: 10px 10px 5px rgb(150,10,10);
	opacity : 100%;
}
#ssc {
	box-shadow : 2px 2px 5px rgb(140,30,30);
	width : 730px;
	float : left;
	margin : 20px 52px 0px 52px;
}
.footer {
	height : 100px;
}
li {
	color : white;
}
#ssta, #talue {
	width : 70%;
	float : right;
}
textarea {
	width : 80%;
}
.b {
	font-family : 'Abril Fatface', cursive;
	text-transform : uppercase;
	background-color : rgb(220,20,20);
	border : 2px solid black;
	border-radius : 4px;
	margin : 5px;
}

@media only screen and (max-width : 1230px) {
	#ssc {
		width : 86%;
	}
}

@media only screen and (max-width:1000px) {
	#kuv, #kuv2, #kuv3, #kuv4 {
		display : none;
	}
	.column.right {
		width : 0%;
	}
	#talue, #ssta {
		width : 75%;
	}
	.modal-content {
		width : 90%;
		margin : auto;
	}
}

@media only screen and (max-width:800px) {
	.column.left {
		width : 100%;
		height : 240px;
		background-image : url(pictures/WP_20191220_325.jpg);
		background-size : 800px;
	}
	.modal {
		padding-top : 100px;
	}
	#ssc {
		width : 80%;
	}
	#ssta, #talue {
		width : 100%;
		background-color : #ffc3c3;
	}
}
