@font-face {
 font-family: 'omaOtsikko';
 src: url('futura_t_medium.eot'); /* For Internet Explorer 6+ */
}
@font-face {
 font-family: 'omaOtsikko';
 src: url('futura_t_medium.ttf'); /* For non-IE browsers */
}

body{
    margin:0;
	background-color: #121212;
	/*text-shadow: 1px 1px #000000;*/
}

main {
  /*height: 100vh;*/
  height:100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  perspective: 2px;
}

section {
  transform-style: preserve-3d;		
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

p{
	font-family: Arial, Verdana, sans-serif;
	font-size:18px;
	line-height: 1.45em;
	color: #fff;	
}

.darkText{
	color: #111;	
}

.no-parallax {
  background-color: #111;
  z-index: 999;
}

.noParallaxSmall {
  background-color: #111;
  z-index: 999;
  height:70vh;
}

.noParallaxKaruselli{
  background-color: #111;
  z-index: 1;
  height:80vh;
}

section h1 {
	color: #F34E4F;
	text-align: center;
	font-size: 4rem;
	font-family: omaOtsikko;
	text-transform: uppercase;
}

section h2 {
	color: #F34E4F;
	text-align: center;
	font-size: 4rem;
	font-family: omaOtsikko;
	text-transform: uppercase;
	line-height:normal;
}

.sectionContent{
	max-width:1000px;
	text-align:center;
	padding:25px;
}

.contentLogo{
	max-width:800px; 
	text-align:center; 
	margin: 0 auto;
}

.contentLogoBig{
	max-width:1200px; 
	text-align:center; 
	margin: 0 auto;
}

.parallax h1 {
	color: #F34E4F;
	width: 60%;
	font-size: 2rem;
	font-family: omaOtsikko;
}

#resImage{
	max-width: 100%; 
	height: auto;
}

#resImageSmall{
	max-width: 450px; 
	height: auto;
}


#resTopLogo{
	max-width: 100%; 
	height: auto;
	/*cursor: pointer;*/
}

a:link {color: #6ab4e0; text-decoration: none;}
a:visited {color: #6ab4e0; text-decoration: none;}
a:hover {color: #6ab4e0; text-decoration: underline;}
a:active {color: #6ab4e0; text-decoration: none;}
a:focus {color: #6ab4e0; text-decoration: none;}

.parallax::after {
  content: ' ';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateZ(-1px) scale(1.5);
  background-size: 100%;
  z-index: -1;
}

.bg::after {
	
	background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
		url('../layout/background.jpg');

	background-size: cover;
}

.bgWhite::after {
	
	background: url('../layout/backgroundWhite.jpg');

	background-size: cover;
}

.bgMuistipeli::after {
	background: url('../layout/backgroundMuistipeli.jpg');
	background-size: cover;
}

.bgMedialehti::after {
	background: url('../layout/backgroundMedialehti.jpg');
	background-size: cover;
}

.bgKierrosseuranta::after {
	background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../layout/backgroundKierrosseuranta.jpg');
	background-size: cover;
	background-position: center; 
}

.bgFooter::after {
	
	background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
		url('../layout/background.jpg');

	background-size: cover;
}

@media screen and (max-width: 700px) {

	section h1 {
		font-size: 3.5rem;
	}

	section h2 {
		font-size: 2.5rem;
	}

	.noParallaxSmall {
	  height:100vh;
	}

	.noParallaxKaruselli{
	  background-color: #111;
	  z-index: 9991;
	  height:100vh;
	  margin-top:-50px;
	}
	#resTopLogo{
		margin-top:-60px;
	}	
}