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


/*
Theme Name: The Tube 2017
Theme URI: http://thetube.se
Description: The Tube - en musiksajt från SV
Version: 2.0
Author: Edward Forslund
Author URI: http://www.edwardforslund.se
Tags: sv, the tube, the, tube
*/



/*available fonts:
font-family: 'Open Sans', sans-serif;
font-family: 'Open Sans Condensed', sans-serif;
font-family: 'PT Serif', serif;
font-family: 'Droid Serif', serif;
font-family: 'Noto Serif', serif;
font-family: 'Libre Baskerville', serif;
font-family: 'Poppins', sans-serif; (300,400,600,700)

Borttagna från header: Droid+Serif:700i|Libre+Baskerville:400i|Noto+Serif:700i|

Open+Sans+Condensed:300|Open+Sans:300,400,700,800
PT och Droid: 700
*/


/* - - - BODY - - - */

* {
		margin: 0;
		padding: 0;
	}


body {
  margin:0px;
  padding:0px;
  background-color:#eaeaea;
  font-family: 'Open Sans', sans-serif;
  font-size:100%;
}

/* - - - FONTS ETC - - - */

p {
     margin-bottom: 1.4em;
     font-weight: 300;
     font-size:1.1em;
}

ul li {
	font-weight: 300;
	font-size:1.1em;
}

blockquote {
  width:70%;
  height:auto;
font-size: 55px;
color:#494949;
letter-spacing: -1px;
line-height:65px;
display: block;
font-family: 'PT Serif', serif;
padding:40px;
font-weight: 700;
margin:0 auto;
text-align:center;
}

blockquote p {
	line-height:normal!important;
}

h1, h2, h3 {
  font-weight:800;
}

h1 {
  font-size:60px;
}

h3 {
  font-size:24px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

h4 {
	font-weight: 300;
	font-size: 30px;
	margin:50px 0px 50px 0px;
	line-height: 50px;
}


hr {
margin:40px 0px 40px 0px;
border-left:0px;
border-right: 0px;
border-top:0px;
border-bottom:1px solid #dbdbdb;
}




/* - - - BILDER - - - */

div.singlepagecontent img {
	max-width: 100%;
}

.rightimg {
	background-color:#f3f5eb;
	padding:10px;
	float:right;
	width:300px;
	height:auto;
	margin:0px 0px 30px 30px;
	clear:both;
	-webkit-transition: all 0.7s;
-moz-transition: all 0.7s;
-ms-transition: all 0.7s;
-o-transition: all 0.7s;
transition: all 0.7s;
font-weight: 300;
font-size: 12px;
}

.leftimg {
	background-color:#f3f5eb;
	padding:10px;
	float:left;
	width:300px;
	height:auto;
	margin:0px 30px 30px 0px;
	clear:both;
	-webkit-transition: all 0.7s;
-moz-transition: all 0.7s;
-ms-transition: all 0.7s;
-o-transition: all 0.7s;
transition: all 0.7s;
font-weight: 300;
font-size: 12px;
}

.rightimg img, .leftimg img {
	width:100%;
	height: auto;
}

.rightimg p {
	font-weight: 300;
	font-size: 12px;
}


img.contentimg-nevertoobig {
max-width:100%!important;
height:auto;


}



/* - - - LINKS - - - */

a img:hover {
  opacity: 0.6;
  filter: alpha(opacity=60);
  -webkit-transition: all 0.7s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}

a {
  color:#179c10;
	text-decoration: none;
	cursor: pointer;
}



a:hover {
	color:#000;
	text-decoration:none!important;
	border-bottom: 2px solid black;
	cursor: pointer;
}

/* - - - EMBEDS MM - - - */

iframe {
  width:100%;
  max-width: 100%;
  height: 500px;
	margin: 20px 0px 20px 0px
}



/* - - - TOP - - - */

#top {
height:450px;
width:100%;
text-align: center;
margin:0 auto;
  background-color: #FFF;
  position: absolute;
  top:0px;
  z-index:9999;
  -webkit-transition: all 0.4;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
}

.toplogo img {
  width:360px;
  height:auto;
  top:60px;
  position:absolute;
  left:50%;
  margin-left:-180px;
}

.toplogo a img:hover {
	opacity: 1.0;
  filter: alpha(opacity=100);
}


.topmenu {
  height:50px;
  width:100%;
  text-align: center;
  position:absolute;;
  bottom:1px;
  margin:0 auto;
	left:10px;
}

.topmenu ul li {
  display:inline;
  list-style-type: none;
    margin-right:20px;
}

.topmenu ul li a {
  font-weight:800;
  font-size:18px;
  color:#565656;
  text-decoration: none;
  text-transform: uppercase;
}

.topmenu ul li:last-child {
  margin-right:0px;
}


.topmenu ul li a:hover {
  color:#179c10;
}

.last {
  margin-right:0px!important;
}

/* - - - TOP SMALLER SHRINKS WHEN SCROLL - - - */

#top.smaller {
height:80px;
position:fixed!important;
width:100%;
text-align: center;
margin:0 auto;
  background-color: #f5f5f5;
  z-index:9999;
	opacity: 0.95;
  filter: alpha(opacity=95);
  -webkit-transition: all 0.0s;
  -moz-transition: all 0.0s;
  -ms-transition: all 0.0s;
  -o-transition: all 0.0s;
  transition: all 0.0s;
}

#top.smaller .toplogo img {
  width:70px;
  height:auto;
  top:10px;
  position:absolute;
  left:20px;
  margin-left:0px;
	-webkit-transition: all 0.4;
	-moz-transition: all 0.4s;
	-ms-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

#top.smaller .topmenu {
  height:50px;
  width:100%;
  text-align: center;
  position:absolute;;
  bottom:1px;
  margin:0 auto;
	left:30px;
}

#top.smaller .topmenu ul li {
  display:inline;
  list-style-type: none;
    margin-right:50px;
}

#top.smaller .topmenu ul li a {
  font-weight:800;
  font-size:18px;
  color:#000;
  text-decoration: none;
  text-transform: uppercase;
}


/*--------------------------------*/
	/*mobilmeny start*
/*--------------------------------*/


* {
		margin: 0;
		padding: 0;
	}


/*mobil-navbox är panelen med navbarknapp och menyloggor*/

div.mobil-navbox {
height:80px;
z-index:9999;
width:100%;
background-color:#FFF;
position:fixed!important;
top:0px;
box-shadow:0px 1px 10px #1D1D1D;
-webkit-transition: all 0.7s;
-moz-transition: all 0.7s;
-ms-transition: all 0.7s;
-o-transition: all 0.7s;
transition: all 0.7s;
/*text-align:center;*/
text-align:right;
	}

	/*dragspelsmenyn som fälls ut är mobil-nav*/

	ul#mobil-nav {

	text-align:center;
		position:relative;
		margin:0 auto;
		max-width:870px;
		width:100%;
		top:18px;
	background-color:#FFF;
	-webkit-transition: all 0.7s;
-moz-transition: all 0.7s;
-ms-transition: all 0.7s;
-o-transition: all 0.7s;
transition: all 0.7s;
text-transform: uppercase;
font-weight: 300!important;
	}

		ul#mobil-nav li {
		list-style-type:none;
		line-height: normal;
		width:100%;
		border-right:none;
	}

	ul#mobil-nav li a {
		vertical-align: middle;
		display: block;
		width:auto;
		background-color:transparent;
		color:#4d4d4d;
		padding:5px 10px;
		text-decoration: none;
		font-size:25px;
		font-weight:bold;
	}

	ul#mobil-nav li a:hover {
		background-color:#FFF;
		color:#6baa24;
		border-bottom:0px;
		cursor:pointer;
	}

/*gömmer dropdown-menyn (dragspelsmenyn) tills man  klickar på ikonen*/
		#mobil-nav.js {
			display:none;
		}


/*ikonen man klickar på för att fälla ut menyn*/

span.menuicon {
		display:block;
	font-size:40px;
	position:relative;
	right:30px;
	top:11px;
	color:#616161;
	cursor:pointer;
	font-family:verdana, lucida sans, sans-serif;
	font-weight:bold;
	}

	/*döljer dropdown när man klickat*/
	.hidden {
	display:none;
	}


	/*döljer mobilmenyn för icke mobila enheter och stora skärmar*/
	@media screen and (min-width: 768px) {
		#mobil_menu {
			display: none;
		}

		div.mobil-navbox {
		display:none;
		}


	}

	/*Döljer normala menyn för små skärmar*/
	@media screen and (max-width: 768px) {

		div.menu-normal {
		display:none;
		}


	}

	/*svlogga i mobil meny*/

img.mobil-logo {
width:60px;
height:auto;
position:absolute;
left:20px;
top:17px;
}


/*--------------------------------*/
	/*mobilmeny slut*
/*--------------------------------*/


/* - - - I FOKUS - - - */


#fokus {
margin-top:400px;
height: 600px;
width:100%;
overflow: hidden;
position:relative;
background-color:#000;
-webkit-transition: all 0.7s;
-moz-transition: all 0.7s;
-ms-transition: all 0.7s;
-o-transition: all 0.7s;
transition: all 0.7s;
}

.fokusbox {
  width:50%;
  height:100%;
  position:relative;
  float:left;
  overflow: hidden;
  cursor: pointer;
  -webkit-transition: all 0.7s;
-moz-transition: all 0.7s;
-ms-transition: all 0.7s;
-o-transition: all 0.7s;
transition: all 0.7s;
}


.fokusimg img {
	cursor: pointer;
  width:120%;
  height:auto;
  min-height:600px!important;
}

.redoverlay {
  left:0px;
  top:0px;
  width:101%;
  height:101%;
  background-color:#de3232;
  position:absolute;
  z-index:2;
  opacity: 0.4;
  filter: alpha(opacity=40);
  -webkit-transition: all 0.7s;
-moz-transition: all 0.7s;
-ms-transition: all 0.7s;
-o-transition: all 0.7s;
transition: all 0.7s;
cursor: pointer;
}

.fokusbox:hover .redoverlay, .fokusbox:hover .greenoverlay {
  opacity: 0.0;
  filter: alpha(opacity=0);
  -webkit-transition: all 0.7s;
-moz-transition: all 0.7s;
-ms-transition: all 0.7s;
-o-transition: all 0.7s;
transition: all 0.7s;
}



.greenoverlay {
	cursor: pointer;
  left:0px;
  top:0px;
  width:101%;
  height:101%;
  background-color:#20c53f;
  position:absolute;
  z-index:3;
  opacity: 0.5;
  filter: alpha(opacity=50);
}

.fokusimg {
	cursor: pointer;
  position:absolute;
  z-index:1;
  left:0px;
  top:0px;

}


.fokustxt {
position:absolute;
z-index: 100;
bottom:20px;
left:20px;
width:95%;
height:auto;
color:#FFF;
}

.fokuscat {
  font-weight: 800;
  text-transform: uppercase;
  display: block;
}

.fokusheader {
  font-weight: 800;
  font-size:50px;
  display: block;
  margin:20px 0px 20px 0px;
  color:#FFF;
}

/* - - - STARTCONTENT - - - */

#startcontent {
position: relative;
width:1200px;
height:auto;
margin:0 auto;
top:40px;
display: block;
}

#startcontent-spelalive {
top:400px;
}

.postbox {
  width:360px;
  height:500px;
  overflow: hidden;
  background-color:#000;
  position: relative;
  float:left;
  margin:0px 40px 40px 0px;
  -webkit-transition: all 0.7s;
-moz-transition: all 0.7s;
-ms-transition: all 0.7s;
-o-transition: all 0.7s;
transition: all 0.7s;
}

.postboximg {
  height:370px;
  width:100%;
  position: absolute;
  z-index:1;
}

.postboximg img {
  width:130%;
  height:auto!important;
  /*min-height:280px;*/
}

.postboxcat {
  position:absolute;
  top:20px;
  left:20px;
  overflow:visible;
  z-index:1000;
}

.postboxcat span {
  background-color: #FFF;
  color:#000;
  padding:5px;
  font-weight: 300;
}

.postboxtxt {
  background-color: #FFF;
  color:#000;
  position: absolute;
  z-index: 2;
  bottom:0px;
  padding:20px;
  font-size:18px;
}

.postboxtxt a {
  text-decoration: none;
  color:#000;
}

.postboxtxt h2:hover, .postboxtxt span:hover {
  opacity: 0.6;
  filter: alpha(opacity=60);
  -webkit-transition: all 0.7s;
-moz-transition: all 0.7s;
-ms-transition: all 0.7s;
-o-transition: all 0.7s;
transition: all 0.7s;
}




.postboxheader {
font-weight: 800;
font-size: 30px;
margin-bottom: 10px;
}

.postboxutdrag {
    font-size: 13px;
}

.postboxutdrag p {
			margin-bottom:0px;
}

/* - - - SINGLE PAGE - - - */

#singlepage {
position: relative;
width:1100px;
height:auto;
margin:0 auto;
margin-top:400px;
display: block;
background-color: #FFF;
margin-bottom: 100px;
}

.singlepageimg {
  width:100%;
  height:auto;
  max-height: 600px;
  POSITION:relative;
  overflow: hidden;
}

.singlepageimg img {
  width:100%;
  height: auto;

}

.singlepagecat {
  position:absolute;
  z-index:1000;
  bottom:20px;
  left:20px;
}

.singlepagecat span {
  background-color: #FFF;
  color:#000;
  padding:40px;
  font-size:20px;
  font-weight: 300;
  letter-spacing:0px;
  text-transform: uppercase;
}

.singlepagecontent {
  padding:40px;
}

.singleinfo {
  font-size: 14px;
  display: block;
  margin-bottom: 20px;
	margin-top:10px;
  color:#bababa;
}

.singletxt p {
  line-height: 28px;
}

.singletxt ul li {
	margin-bottom: 20px;
}

/* - - - FOT - - - */


  .clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

#fot {
  position: relative;
  margin-top:150px;
  width:100%;
  height:600px;
  background-color: #000;
  background-image:url("images/punkbg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
	background-position: center top;
  bottom:0px;
  padding:80px 0px 0px 0px;
  overflow: hidden;
}

.footerbox {
  position: relative;
  display: block;
  width:300px;
  height:auto;
  padding:20px;
margin:0 auto;
margin-bottom:40px;
font-size: 13px;
color:#FFF;
border:1px solid #FFF;
}

.footerbox a {
	color:#fff;
}



.footerlogos {
clear:both;
width:100px;
height:100px;
position:relative;
text-align: center;
margin: 0 auto;
top:20px;
}

img.footerlogo  {
  width:100px;
  height: auto;
}

.footersv {
  position: absolute;
  width:100px;
  height: 100px;
  bottom:20px;
  right:20px;
  overflow:hidden;
}

.footersv img {
  width:auto;
  height: 100%;
  opacity: 0.6;
  filter: alpha(opacity=60);
}


/*MOBILA ENHETER och MINDRE SKÄRMSTORLEKAR*/

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

  #fokus {
height:500px;
	}

}




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

  #startcontent {
  position: relative;
  width:90%;
  height:auto;
  margin:0 auto;
  top:40px;
  display: block;
  }



  .fokusheader {
    font-weight: 800;
    font-size:30px;
    display: block;
    margin:20px 0px 20px 0px;
    color:#FFF;
  }

  #singlepage {
  width:100%;
  }

  #fokus {
  margin-top:400px;
  height: 400px;
  width:100%;
  overflow: hidden;
  position:relative;
  background-color:#000;
  }

  .fokusbox {
    width:50%;
    height:400px;
    position:relative;
    float:left;
    overflow: hidden;
    cursor: pointer;
    -webkit-transition: all 0.7s;
  -moz-transition: all 0.7s;
  -ms-transition: all 0.7s;
  -o-transition: all 0.7s;
  transition: all 0.7s;
  }


  .fokusimg img {
    width:110%;
    height:auto;
    min-height:400px!important;
  }


}


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

  .postbox {
    width:300px;
    height:500px;
    overflow: hidden;
    background-color:#000;
    position: relative;
    float:left;
    margin:0px 40px 40px 0px;
  }

  .postboximg {
    height:300px;
    width:100%;
    position: absolute;
    z-index:1;
  }

  .footerbox {
    position: relative;
    float:left;
    left:18%;
    display: block;
    width:300px;
    height:auto;
    padding:20px;
  margin-right: 40px;
  font-size: 13px;
  color:#FFF;
  border:1px solid #FFF;
  }

  img {
    max-width:100%;
    height:auto;
  }


}

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


	#fokus {
  margin-top:400px;
  height: 400px;
  width:100%;
  overflow: hidden;
  position:relative;
  background-color:#000;
  }

  .fokusbox {
    width:50%;
    height:400px;
    position:relative;
    float:left;
    overflow: hidden;
    cursor: pointer;
    -webkit-transition: all 0.7s;
  -moz-transition: all 0.7s;
  -ms-transition: all 0.7s;
  -o-transition: all 0.7s;
  transition: all 0.7s;
  }


  .fokusimg img {
    width:110%;
    height:auto;
    min-height:400px!important;
  }

	.fokusutdrag p {
		margin-bottom: 0em;
	}

	.fokusheader {
		font-weight: 800;
		font-size:28px;
		display: block;
		margin:20px 0px 20px 0px;
		color:#FFF;
	}

  .postbox {
    width:45%;
    height:450px;
    overflow: hidden;
    background-color:#000;
    position: relative;
    float:left;
    margin:0px 40px 40px 0px;
  }

  .postboximg {
    height:400px;
    width:100%;
    position: absolute;
    z-index:1;
  }


}




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

	iframe {
	  width:100%;
	  max-width: 100%;
	  height: 400px;
		margin: 20px 0px 20px 0px
	}

#fokus {
margin-top:400px;
height: 1000px;
width:100%;
overflow: hidden;
position:relative;
background-color:#000;
}

.fokusbox {
  width:100%;
  height:500px;
  position:relative;
  float:left;
  overflow: hidden;
  cursor: pointer;
}

.fokusimg img {
  width:110%;
  height:auto;
  min-height:500px!important;
}


.postbox {
  width:100%;
  height:500px;
  overflow: hidden;
  background-color:#000;
  position: relative;
  float:left;
  margin:0px 40px 40px 0px;
}

.postboximg {
  height:300px;
  width:100%;
  position: absolute;
  z-index:1;
}

.postboximg img {
  width:100%;
  height:auto;
}

#fot {
  position: relative;
  margin-top:40px;
  width:100%;
  height:600px;
  background-color: #000;
  background-image:url("images/punkbg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  bottom:0px;
  padding:80px 0px 0px 0px;
  overflow: hidden;
}

.footerbox {
  position: relative;
  float:none;
  left:0px;
  display: block;
  width:80%;
  height:auto;
  margin:0 auto;
  padding:20px;
margin-bottom:20px;
font-size: 13px;
color:#FFF;
border:1px solid #FFF;
}





}

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

  #fokus {
  margin-top:70px;
  height: 1000px;
  width:100%;
  overflow: hidden;
  position:relative;
  background-color:#000;
  }

#top.smaller {
display: none;
}

.rightimg, .leftimg {
  width:100%;
  max-width:100%;
  height:auto;
  margin:20px 0px 20px 0px;
height:auto;
}

blockquote {
  width:70%;
  height:auto;
font-size: 35px;
color:#494949;
letter-spacing: -1px;
line-height:65px;
display: block;
font-family: 'PT Serif', serif;
padding:40px;
font-weight: 700;
margin:0 auto;
text-align:center;
}


}


@media screen and (max-width: 760px) {
#top {
  display: none;
}

#singlepage {
  margin-top:-1px;
}

}


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

  #fokus {
  height: 700px;
  width:100%;
  overflow: hidden;
  position:relative;
  background-color:#000;
  }

  .fokusbox {
    width:100%;
    height:350px;
    position:relative;
    float:left;
    overflow: hidden;
    cursor: pointer;
  }

  .fokusimg img {
    width:105%;
    height:auto;
    min-height:350px!important;
  }

}