/*------------------------- GENERAL -------------------------*/

@-ms-viewport{
	width: device-width;
}

body {
	margin: 0 auto;
	font-size: 2vmax;
	text-align: justify;
	background-color: #343434;
	
}

html,body{
height:100%;
 min-height:100%; 
}


a:link, a:visited, a:hover, a:active {
  text-decoration: none;
  color:inherit;
  outline: none;
}


* {
	box-sizing: border-box;
}

h1 {
	font-size: 1.5em;
	font-family:"roboto slab", Sans-Serif; 
	font-weight: 300;
}

h2{
	font-size: 1em;
	font-family:"roboto slab", Sans-Serif; 
	font-weight: 300;
}

h3 {
	font-family:"roboto slab", Sans-Serif; 
	font-weight: 300;
	font-size: 0.75em;
}

p {
	font-size: 0.65em;
	font-family: "Raleway", Sans-Serif; 
}

h1, h2, h3, p, ::selection{
  color: transparent;

}

h1, h2, h3, p, ::-moz-selection  {
  color: transparent;
  
}


/*------------------------ GENERAL CLASSES ----------------------------------*/


.row::after {
	content: "";
	clear: both;
	display: table;
}

[class*="col-"] {
	float: left;
	
}

.col-0 {width: 4.155%;}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}


.parallax {
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.VLlogo {
	/*opacity: 0.85;*/
	position: absolute;
	left: 2%;
	top: 2%;
	width: 10vh;
	height: auto;
	border-radius: 2px;
}

.rubrik {
	position: relative;
	
}

.rubrik h1 {
	position: relative;
	
	margin-top: 0;
	margin-bottom: 0;
	
	color: #ffffff;
	text-transform: uppercase;
	font-family: 'oswald', sans-serif;
}

.rubrik h2{
	position: relative;
	margin-top: 1vh;
	margin-bottom: 0;
	color: #ffffff;
	text-transform: capitalize;
	font-family: 'oswald', sans-serif;
}

.box-right {
	height: 100%;
	background: linear-gradient(90deg, rgba(0, 0, 0 ,0), rgba(0,0,0,.5));
	position: relative;
	text-align: right;
}

.right h1 {
	top: 40vh;
	right: 20%;
}

.right h2 {
top: 75vh;	
right: 20%;

}

.box-left {
	height: 100%;
	background: linear-gradient(-90deg, rgba(0, 0, 0 ,0), rgba(0,0,0,.5));
	position: relative;
	text-align: left;
}

.left h1{
	top: 40vh;
	left: 20%;
}

.left h2 {
	left: 20%;
	top: 75vh;
}

/*------------------------- FOTO -------------------------*/

#start {
	position: relative;
	height:100vh; 
	background-image: linear-gradient(0deg,rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url("Bilder/paraply.jpg");
  background-position: center 50%;
   -webkit-background-size: cover;
   -moz-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: visible;
}

#start-intro {
	height: 100%;
	position: relative;
	background:  rgba(0, 0, 0, 0.15);
}

#start-intro .banner {
position: relative;
top: 45vh;
}

#start-intro .banner h1{
	position: relative;
	text-align: left;
	top: 40%;
	margin-top: 0;
	width: 95%;
	left: 5%;
	color: #ffffff;
	text-transform: uppercase;
	font-family: 'oswald', sans-serif;

}

#travel {
	height: 90vh;
	-webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
	background-image: linear-gradient(0deg,rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url("Bilder/travel.jpeg");
	background-position: center 50%;
}

#people {
	height: 90vh;
	-webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
	background-image: linear-gradient(0deg,rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url("Bilder/people.jpeg");
	background-position: center 35%;
}

#sports {
	height: 90vh;
	-webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
	background-image: linear-gradient(0deg,rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url("Bilder/sports.jpeg");
	background-position: center 0%;
}

#wedding {
	height: 90vh;
	-webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
	background-image: linear-gradient(0deg,rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url("Bilder/wedding.jpg");
	background-position: center 70%;

}


#tech {
	height: 100vh;
	-webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
	background-image: linear-gradient(0deg,rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url("Bilder/Bil.jpeg");
	background-position: center 60%;

}
#tech h1 {
	top: 48vh;
}

/*------------------------- INFO -------------------------*/

/* Telefoner */
@media screen and (max-width: 420px){
	.banner h1 {
		font-size: 2.5em;
	}
	.right h1{
		font-size: 2.5em;
		right: 10vw;
		float: right;
	}
	.left h1{
		font-size: 2.5em;
		left: 10vw;
	}

}

/* IPADS */ 
@media only screen and (min-device-width : 420px) and (max-device-width : 1024px) {
	.banner h1 {
		font-size: 2.5em;
	}
	.right h1{
		font-size: 2.5em;
		right: 10vw;
		float: right;
	}
	.left h1{
		font-size: 2.5em;
		left: 10vw;
	}


}

/* iPhone Portrait */
@media screen and (max-device-width: 480px) and (orientation:portrait) {
	#travel {background-attachment: scroll;}
	#start {background-attachment: scroll;}
	#people{background-attachment: scroll;}
	#sports{background-attachment: scroll;}
	#wedding{background-attachment: scroll;}
	#tech{background-attachment: scroll;}
} 
/* iPhone Landscape */
@media screen and (max-device-width: 480px) and (orientation:landscape) {
	#travel {background-attachment: scroll;}
	#start {background-attachment: scroll;}
	#people{background-attachment: scroll;}
	#sports{background-attachment: scroll;}
	#wedding{background-attachment: scroll;}
	#tech{background-attachment: scroll;}
}
/* iPad Portrait */
@media screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
	#travel {background-attachment: scroll;}
	#start {background-attachment: scroll;}
	#people{background-attachment: scroll;}
	#sports{background-attachment: scroll;}
	#wedding{background-attachment: scroll;}
	#tech{background-attachment: scroll;}
}
/* iPad Landscape */
@media screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
	#travel {background-attachment: scroll;}
	#start {background-attachment: scroll;}
	#people{background-attachment: scroll;}
	#sports{background-attachment: scroll;}
	#wedding{background-attachment: scroll;}
	#tech{background-attachment: scroll;}
}