@charset "utf-8";
/* CSS Document */

* {
  box-sizing: border-box;
}

body {
	font-family: 'Calibri', sans-serif;
	font-size: 18px;
	background-color: #E1E3E0;
	background-image: url(i/Potette_Plus_tuotesarja1.jpg);
	background-repeat: no-repeat;
	background-position: 0% 0px;
	background-size:100%;
	margin: 0px;
	padding: 0px;
}
h1 {
	font-size: 48px;
}
h2 {
	font-size: 22px;
	margin: 0px;
	padding: 0px;
}
a:link {
	color:#64751E;
	text-decoration: none;
	-o-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-khtml-transition: all 0.5s linear;
	-webkit-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	transition: all 0.5s linear;
}
a:visited {
	color: #64751E;
	text-decoration: none;
}
a:hover, a:active, a:focus {
	text-decoration: none;
	opacity: 0.7;
    filter: alpha(opacity=70);
}
.container {
	width: 100%;
	margin-top: 0px;
	margin-bottom: 0;
	}
/* Style the header */
.header {
	text-align: center;
	padding-top: 30px;
	padding-right: 30px;
	padding-bottom: 700px;
	padding-left: 30px;
}
.logoimg {
	float:left;
}
.somelogot {
	display: table;
	width: 50%;
	text-align: right;
	float: right;
	padding: 0px;
}
.some {
	float: right;
	padding-top: 0px;
	padding-right: 20px;
	padding-bottom: 0px;
	padding-left: 20px;
}
.main1 {
	float: left;
	width: 80%;
	margin-right: 10%;
	margin-left: 10%;
	display: table-cell;
	color: #FFF;
}
/* Create two columns/boxes that floats next to each other */
.left {
	float: left;
	width: 35%;
	margin-right: 5%;
	margin-left: 10%;
	text-align: center;
}
.left2 { /*palkintologot */
	float: left;
	width: 30%;
	margin-right: 5%;
	margin-left: 5%;
	text-align: center;
}
.left3 {
	float: left;
	width: 33%;
	margin-right: 5%;
	margin-left: 12%;
	text-align: center;
}

.right {
	float: left;
	width: 35%;
	margin-right: 10%;
	margin-left: 5%;
	text-align: center;
}
.right2 { /* YouTube upotus */
	float: left;
	width: 56%;
	margin-right: 2%;
	margin-left: 2%;
	text-align: center;
}
.video {
    width: 560px;
    height: 315px;
}
.right3 {
	float: left;
	width: 33%;
	margin-right: 12%;
	margin-left: 5%;
	text-align: center;
}

/* Clear floats after the columns */
.section {
	display: table;
	width:100%;
	clear: both;
	background-color: #117EC1;
	padding: 40px;
}
.section2 {
	display: table;
	width:100%;
	clear: both;
	padding-top: 40px;
	padding-bottom: 40px;
}
.section3 {
	display: table;
	width:100%;
	clear: both;
	padding-top: 40px;
	padding-bottom: 40px;
}
.potalla {
	width: 100%;
}
.palkintologot {
	width: 100%;
	max-width:560px;
}

/* Style the footer */
.footer {
	text-align: left;
	padding-top: 10px;
	padding-right: 12%;
	padding-bottom: 40px;
	padding-left: 12%;
	font-size: 16px;
	background-color: #B2CF3F;
}

/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media screen and (max-width: 1200px) {
body {
	background-image: url(i/Potette_Plus_tuotesarja1_1200.jpg);
}
.header {
	padding-bottom: 600px;
}
.logoimg {
	width: 40%;
	height: 40%;
}
.somelogot {
	width: 60%;
}
.some {
	padding-right: 10px;
	padding-left: 10px;
	}
.someimg {
	width: 80%;
	height: 80%;
	padding-bottom:20px;
}
.left2, .right2 {
    width: 90%;
    height: auto;
	margin-left:5%;
	margin-right:5%;
}
}
@media screen and (max-width: 800px) {
body {
	background-image: url(i/Potette_Plus_tuotesarja1_800.jpg);
}
.header {
	padding-bottom: 400px;
}
}
@media screen and (max-width: 640px) {
body {
	font-size: 16px;
	background-image: url(i/Potette_Plus_tuotesarja1_800.jpg);
}
.header {
	padding-bottom: 300px;
}
.container {
}
.somelogot {
	width: 60%;
}
.logoimg {
	width: 40%;
	height: 40%;
}
.someimg {
	width: 70%;
	height: 70%;
}
.section {
	padding: 20px;
}
.left, .right {
    width: 80%;
    height: auto;
	margin-left:10%;
	margin-right:10%;
}
.left2 {
    width: 96%;
	margin-left:2%;
	margin-right:2%;
}
.right2 {
    position: relative;
    width: 96%;
	margin-left:2%;
	margin-right:2%;
    padding-bottom: 56.25%;
}
.left3, .right3 {
    width: 80%;
    height: auto;
	margin-left:10%;
	margin-right:10%;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
h1 {
	font-size: 20px;
}
h2 {
	font-size: 18px;
	margin: 0px;
	padding: 0px;
}
}