/* 
Theme Name:   
Theme URI:   
Author:victor @ wallandermedia.se
Version: 1.0
Tags: 
webfonts:*
--------------------------------------------------------
*/
 @font-face {
    font-family: 'gotham_bookregular';
    src: url('fonts/gotham-book-webfont.woff2') format('woff2'),
         url('fonts/gotham-book-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'DINNextLTPro-Black';
    src: url('fonts/gotham-bold-webfont.woff2') format('woff2'),
         url('fonts/gotham-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
/*

--------------------------------------------------------
*
*/

body,html {
	overflow-x: hidden;

}


a {color:#ca2943;}


.warning-text {
	background: white;
	border:5px solid black;
	display: inline-block;
	padding: 10px 20px;
	margin: 40px;

}
 

/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */
html,button,input,select,textarea { } html {} ::-moz-selection {background: #96c886;text-shadow: none;}
::selection {background: #96c886;text-shadow: none;} hr {display: block;height: 1px;border: 0; border-top: 1px solid #ccc;margin: 1em 0; padding: 0;}
audio,canvas,img,video {vertical-align: middle;} fieldset {border: 0;margin: 0;padding: 0;}
textarea {    resize: vertical;} .browsehappy {    margin: 0.2em 0;    background: #ccc;    color: #000;    padding: 0.2em 0;}

/* =====  Styles ==================================================
   Author: Victor Wallander
   ========================================================================== */
   
#vvloading {top:0;left:0%;width:100%;position:fixed;height:3px;background:#222222;z-index:98901234;}
#vvloading span {
	background:#d8bf3d;
	left:50%;
	top:0px;
	position:absolute;
	transform: translate(-50%, 0%) !important;
	-ms-transform: translate(-50%, 0%) !important; 
	-webkit-transform: translate(-50%, 0%) !important; 

	width:0px;
	height:100%;
	display:block;
}

.btn {
	 font-family: 'DINNextLTPro-Black';
	background: rgba(77,77,76,1);
	background: -moz-linear-gradient(left, rgba(77,77,76,1) 0%, rgba(203,203,202,1) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(77,77,76,1)), color-stop(100%, rgba(203,203,202,1)));
	background: -webkit-linear-gradient(left, rgba(77,77,76,1) 0%, rgba(203,203,202,1) 100%);
	background: -o-linear-gradient(left, rgba(77,77,76,1) 0%, rgba(203,203,202,1) 100%);
	background: -ms-linear-gradient(left, rgba(77,77,76,1) 0%, rgba(203,203,202,1) 100%);
	background: linear-gradient(to right, rgba(77,77,76,1) 0%, rgba(203,203,202,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d4d4c', endColorstr='#cbcbca', GradientType=1 );

	font-size: 22px;
	color:white;
	font-weight: bold;
	 
	border: 0px;
	padding:10px 0px; 
	    width: 210px;
}

.btn:hover,.btn:focus {
	color:white !important;
	text-shadow:none;

}


.btn.btn-facebook {
	background: #eb8435;
	width: 430px;
	margin: 0px 5px;
}
.btn.btn-facebook:hover,.btn.btn-facebook:focus {
	background: #eb8435;
	color: silver !important;
}

.btn.btn-coke {
	background: #d45d01;
	margin: 10px 5px 10px 0px;
	border-radius: 15px;
}
.btn.btn-coke:hover,.btn.btn-coke:focus {
	background: #eb8435;
	color: white !important;
	text-shadow:none;
}


body {
    height: 100%;
	width:100%;
	color:#333;
	font-family: 'Calibre-Medium';
	font-size: 16px;
	background: url('/site/_quizkampen/images/bg.png');
	background-size: cover;
	 
}
 

/* ===================
    ALL: Theme
   =================== */
h1,h2,h3,h4 {
	 font-family: 'DINNextLTPro-Black';
}

h1 {}
h2 {}
h2, .h2 { font-weight:300; }
h3, .h3 {}
h4, .h4 { 
	color:#f3b228;
	 
 
	 
	margin:0px 0px 10px;
} 
h5, .h5 { }
a,  .a { }
p,  .p {margin:0px 0px 15px;font-weight:300;}
a:hover, 
a:active, 
a:focus{text-decoration:none; 
    color:white;}
#content a:hover, 
#content a:active, 
#content a:focus{text-decoration:none; 
    overflow: hidden;color:#A71930;}



.app-store,.google-play {margin:10px;}
.top-margin {margin-top:25px;}
.first-top {margin-top:125px;}
.dib 	{display:inline-block;vertical-align:top;}
.dibvm {display:inline-block;vertical-align:middle;}

.vvModal {min-height:490px;}
.vvModal h2 { }
.vvModal .modal-dialog{
	 
	padding:2px;
	width:90%;
	max-width:1023px;
}
.vvModal .modal-content{
	 
	border:3px solid gray;
	border-radius:0px;
	padding:10px;
}
.modal-vertical-centered {
  transform: translate(0, 50%) !important;
  -ms-transform: translate(0, 50%) !important; /* IE 9 */
  -webkit-transform: translate(0, 50%) !important; /* Safari and Chrome */
}

.vcenter-holder {
	position:relative;
	height:100%;
	min-height:300px;
}
.vcenter {
	position:absolute;
	top:50%;
	width:100%;
	transform: translate(0,-50%);
	-ms-transform: translate(0,-50%) ;
	-webkit-transform: translate(0,-50%);
}
.vcenter h2 {
	margin-top:0px;
	padding-top:0px;
}

.modal-close { position:absolute;top:-29px;right:-5px;background:url('images/close.png');width:73px;height:24px;cursor:pointer;}
.modal-open #_body {-webkit-filter:blur(3px);-moz-filter:blur(3px);filter:blur(3px)}


.textbox {
	position:relative;
	display:inline-block;
	min-width:50px;
	min-height:20px;
}
.textbox:hover .textbox-ov,.textbox-ov:hover{
	display:block;
	
}
.textbox-ov {
	cursor:pointer;
	display:none;
	position:absolute;
	padding:10px 20px;
	color:white;
	top:48%;
	left:48%;
	background:rgba(0,0,0,0.7);
	transform: translate(-50, -50%);	
	-ms-transform: translate(-50, -50%); /* IE 9 */
	-webkit-transform: translate(-50, -50%); /* Safari and Chrome */
	z-index:999;
}

/* ==============
	Menu
   ============== */

#main-nav-title {

}

#main-nav {
	position:absolute;
	bottom:27px;
	left:40%;	
	transform: translate(-50, 0%);	
	-ms-transform: translate(-50, 0%); /* IE 9 */
	-webkit-transform: translate(-50, 0%); /* Safari and Chrome */
}

.xs-menu {
    
    white-space: nowrap;
    height: 32px;
    float:none;
	position:absolute;
	right:20px;
	top:5px;
    width:40px; 
    cursor: pointer;
}

nav {
	line-height: 50px;
}

nav ul {
	list-style:none;
	margin:0px;
	padding:0px;  
	display: inline-block;
    vertical-align: middle;
}
nav li {
	display: inline;
    margin: 0px;
    padding: 0px;
}

nav a {
	
	font-size:14px;
	
	border: 1px solid transparent;
	line-height: 1;
	opacity: 1;
    margin: 0;
    padding: 10px 5px;
	
	color:white;
	-webkit-transition: all 0.2s ease-in-out;
  	-moz-transition: all 0.2s ease-in-out;
  	-o-transition: all 0.2s ease-in-out;
  	transition: all 0.2s ease-in-out;
}

.first-menu {
	 
}
.sec-menu {
	 
}

.first-menu a{
	background:rgba(0,0,0,0.2);
	border-radius:5px;
	font-size:24px;
	 
	 
	white-space:nowrap;
	padding: 10px 10px;
	margin:0px 10px;
}

.sec-menu a{
	font-size:14px;
	font-weight:400;
	 
	padding: 10px 10px;
}

nav a:hover,nav .aktiv{
 
    background:rgba(0,0,0,0.3);
	color:white;
	 
}
nav a:hover {    

}


 
/* ==============
	Main
   ============== */



#start input{
	font-size: 22px;
	margin: 10px;
	display: inline-block; 
	padding: 10px;
	color: black;
	text-align: center;

}

#_body {
	overflow: hidden;
	position: relative;
	height: 100%;
}


.part {

}

#content { position: relative;}


#start {
	text-align: center;
	 
}

#set{
	display: none;
}
#set h1 {
	text-align: center;
	margin: 0px;
}
#set h2 {
	text-align: center;
	margin: 0px;
}

#start, #set, #result, #highscore {
	background: white;
	border-radius: 10px;
	    box-shadow: 0px 20px 40px rgba(0,0,0,0.05), 0px 6px 12px rgba(0,0,0,0.1);
	    margin-bottom: 50px;
	 
}
 #highscore {
	 
}
 #highscore .table-holder{
	min-height: 600px;
}

#highscore {
	padding: 10px 30px 40px;
	 

}
#set #game {
	position: relative;
	 
	padding: 10px;
}
#status {background: white;padding: 10px;text-align: center;color:black;display: none;}
#result {
	display: none;

}
#result .inner {
	padding: 20px 0px;
	max-width: 580px;
	margin: 0px auto;
}
#result img {
	width: 100%;

}

.start-button{display: inline-block;  padding-top:10px;  }

.play-next {
	position: absolute;
	top:50%;
	left: 50%;
	color:white;
	font-size: 26px;
	z-index: 9999;
	background: white;
	border-radius: 10px;
	display: none;
	width: 200px;
	text-align: center;
	margin-left:-100px; 
	padding:20px 0px;

}

.question {
	 margin:20px 0px;
	 width:100%;
	display:none;
	 position:relative;
}
.question .image {
	 
	display: none;
}
.question .image  img{
	min-height: 0px;
	width:100%;
}

.question ._info {
	color:white;
	width:100%;
	padding:10px;
	 
}

.question .title {
	font-size: 30px;
    text-align: center;
    font-family: 'DINNextLTPro-Black';
    color: #333;
    margin: 10px 10px	;
}
.question .mini-info {
	font-size:14px;
	 
	text-transform:uppercase;
}
.question .mini-info b{
	color:#f3b228;
}

.start-img {
	width: 100%;
	max-width: 350px;
}

.answers  {
	padding:2px;
	margin:0px -5px;
	text-align: center;
}
.answers .answer:hover {
        background: #eb8435;
    -webkit-box-shadow: 0 4px 17px rgba(232, 131, 131, 0.54);
    box-shadow: 0 4px 17px rgba(232, 131, 131, 0.54);

}
.answers .answer{
    font-family: 'DINNextLTPro-Black';
    cursor: pointer;
    
    vertical-align: top;
    background: #d45d01;
    margin: 1% auto;
    padding: 10px;
    width: 48%;
    border-radius: 50px;
    text-align: center;
    height: 59px;
    position: relative;
    color: white;
     
    font-size: 15px;
    text-transform: uppercase;
    transition: .2s ease-out;
}
.answers .answer span {
	position:absolute;
	top:50%;
	left:0%;		 
	-ms-transform: translate(0%,-50%);
	-webkit-transform: translate(0%,-50%);
	transform: translate(0%,-50%);
	width:100%;
}
.answer.clicked {
	background:red;
	color:white;
	 
}
.answer.right {
	background:green !important;
	color:white;
	 
}

#timeline {
	padding:10px;
	width:100%;
	height:18px;
	position:relative;
	margin: 10px 0px 40px;	
}
#timeline .inner{
	position:absolute;	
	top:50%;
	left:50px;
		-ms-transform: translate(0%,-50%);
		-webkit-transform: translate(0%,-50%);
		transform: translate(0%,-50%);
	width:78%;
	height:100%;
	
	 
	background: #ffddc0; /* FF3.6-15 */
	 

	border-radius:15px;
}

#timeline .inner .proc {
	position:absolute;	
	top:50%;
	left:0px;
		-ms-transform: translate(0%,-50%);
		-webkit-transform: translate(0%,-50%);
		transform: translate(0%,-50%);
	width:100%;
	height:calc(100% + 3px);
	
 
	background: #d45d00; /* Old browsers */
	 
	
	border-radius:15px;

	border-top-left-radius: 0px;
 	border-bottom-left-radius: 0px;
	 
}
#timeline .clock{
	position:absolute;	
	top:50%;
	
		-ms-transform: translate(0%,-50%);
		-webkit-transform: translate(0%,-50%);
		transform: translate(0%,-50%);
	
	right:0px;
	width:25%;
	height:40px;
	 
	color:white;
	text-align:center;
	
}
#timeline .clock p{
	 font-family: 'DINNextLTPro-Black';
	text-align:center;
	font-size:28px;
	 
	position:absolute;
	color:#333;
	width:0px;	
	top:50%;
	left:50%;	
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	
}
@keyframes rotate {
  100% {
	transform: rotateZ(-360deg);
  }
}
.seconds-container {
	width:40px;
	height:40px;
	 
    position: absolute;
	top: -18px;
	right: 0;
	bottom: 0;
	left: 4px;
  z-index:9999;
}
.gameon .seconds-container {
	transform: rotateZ(-30deg);
    
	
}
.game_play .seconds-container {

}
.seconds-pointer {
	
	 position: absolute;
	height: 45%;
	left:50%;
	top:10%;
	 
 
	-ms-transform: translate(-50%,0%);
	-webkit-transform: translate(-50%,0%);
	transform: translate(-50%,0%);
}
#timeline .tick{
	display:none;
	position:absolute;	
	top:50%;
	right:100%;
		-ms-transform: translate(0%,-50%);
		-webkit-transform: translate(0%,-50%);
		transform: translate(0%,-50%);
	width:20px;
	height:20px;
	background:#C10F12;
		transition: all 0.36s ease;
		-webkit-transition: all 0.36s ease;
		-moz-transition: all 0.36s ease;
		-ms-transition: all 0.36s ease;
		-o-transition: all 0.36s ease;
}

#timeline .clockgfx {
	position:absolute;
	z-index:9;
	
	top:50%;
	
		-ms-transform: translate(0%,-50%);
		-webkit-transform: translate(0%,-50%);
		transform: translate(0%,-50%);
}

.clock-holder {
	position:relative;
	padding-top:5px;
}

.rules {
	position: absolute;
	right:30px;
	margin-top: -35px;
	color:white;
	text-decoration: underline;

} 
.live-nation-bottom {
	position: absolute;
	left: 30px;
	margin-top: -35px;
	z-index: 9999;

	color:white;
}

img.logo {
	margin: 30px 0px 0px;
	max-width: 350px;
	width: 100%;
}

#bottom {

	text-align: center; 
	width: 100%;
	position: absolute;
	-ms-transform: translate(0%,-30%);
	-webkit-transform: translate(0%,-30%);
	transform: translate(0%,-40%);
	z-index: -1;
}
#bottom img{
	width: 100%;
}
#background {

	 
	overflow: hidden;
	height: 100%;
	max-height: 100%;
	width: 100%;
	max-width: 1920px;
	left:50%;
	
	position: absolute;
	
	background-size: contain;
	-ms-transform: translate(-50%,-100%);
	-webkit-transform: translate(-50%,-100%);
	transform: translate(-50%,-100%);
    z-index: -1;
}

#background img {
	 
}
#left-gradient {
    max-width: 400px;
	    height: 730px;
	position: absolute;
	left: 5%;
	bottom: 0px;
	width: 25%;
	 
	background-size:contain;
}
#right-gradient {
	 max-width: 400px;
	    height: 730px;
	position: absolute;
	right: 5%;
	bottom: 0px;
	width: 25%;
	 
	background-size:contain;
}

.zyn-dosor {
	width: 100%;
	max-width: 460px;
	margin-top: -10pxf;
}

.page {
	 
}

@media only screen and (max-width: 770px) {
	html {
		 
	}
	body {
			  
			 
	}
	#start, #set, #result,#highscore {
		 
		padding: 30px 40px 50px;
		margin: 20px;
		 
	}
	#start {
		padding: 30px 20px 50px;
		margin-bottom: 0px;

		 
	}
	#start h1, #start p{
		 
	}
	#timeline .inner {
		width:58%;
		left:44px;
	}
	#timeline .clock {
		width: 50%;
	}
	#timeline {
		padding: 10px 0px;
	}
	#result .inner{
		padding: 0px 0px;

	}
	#result h2{
		margin-top:0px;
	}
	#bottom {
		-ms-transform: translate(0%,-100%);
	-webkit-transform: translate(0%,-100%);
	transform: translate(0%,-100%);
	}
	#left-gradient {
		bottom: 80px;
	}
	#right-gradient {
		bottom: 80px;
	}
	.part {
		min-height: 500px;
	}
}

@media only screen and (min-width: 770px)   {
	 body {		 
		 
	}

	.wrapper {
		max-width: 924px;
		margin: 0px auto;	 
		position: relative;
	}
	.part {
		padding: 20px 0px;	 
		position: relative;
	}
	#start {		 
		padding: 30px 80px 80px;		
	}	
	#set{
		 
	}
	.start-button {
		 
		 margin-top: 0px;
	}

}


.table th {
	border-top:0px !important; 

}

@media only screen and (min-width: 770px)   {
	 .part {
		min-height: 500px;
	}
	 
}
 

#_body {
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.modal-backdrop.in {
	position: fixed;
}

@media all and (min-width: 768px) and (max-height: 1194px) and (orientation:landscape) {

	html,body{
		 
	}

	
	#bottom{
     -ms-transform: translate(0%,-87%);
	 -webkit-transform: translate(0%,-87%);
	 transform: translate(0%,-87%);
	}
	#bottom img{
		 
	}
	#start {		 
		height: auto;
		 
		padding: 50px;
	}
	#set{
		 
	}
	.pregame {

	}
	.gameon img.coca-cola {
		margin: 10px auto;
		max-width: 250px; 
	}
	.gameon #bottom,.gameon .rules{
		display: none;

	}
	.question .image {
	    display: none;
	}
	#background {
		 
	}
	#background {
		z-index: 999;
		 pointer-events:none;   
		 -ms-transform: translate(-50%,-100%);
		-webkit-transform: translate(-50%,-100%);
		transform: translate(-50%,-100%);
	}
	#left-gradient {
		left: -50px;
	}
	#right-gradient {
		height: 650px;
		right: -50px; 
	}
	.gameon #background {
		 -ms-transform: translate(-50%,-100%);
		-webkit-transform: translate(-50%,-100%);
		transform: translate(-50%,-100%);
	}
}


@media (max-width: 1024px) {
 
	.gameon img.coca-cola, .gameover img.coca-cola {
	 
		 
		opacity: 0.9;
	}
	.gameon img.coca-cola-2 {		 
		opacity:1;
	}
}

@media only screen and (min-width: 770px) and (max-width: 1920px)   {
	 
}




/*
#left-gradient {
	position: absolute;
	left: -3px;
	top: 0px;
	height: 100%;
	width: 220px;
	background: green;
	z-index: 9999;
	 
	background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 99%, rgba(0,0,0,0) 100%);  
	background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 99%,rgba(0,0,0,0) 100%);  
	background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 99%,rgba(0,0,0,0) 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 );  
}

#right-gradient {
	position: absolute;
	right: -3px;
	top: 0px;
	height: 100%;
	width: 220px;
	background: green;
	z-index: 9999;
	 
background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); 
background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);  
background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=1 );  
	
}
*/




/* ===============
    ALL: IE Fixes
   =============== */
.ie7 .title {
    
}

/* ==========================================================================
	styles
   ========================================================================== */
  
/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/*
::-webkit-input-placeholder {
  font-size:12px;
}

:-moz-placeholder {  
   font-size:12px;
}

::-moz-placeholder {  
  font-size:12px;
}

:-ms-input-placeholder {  
   font-size:12px; 
}*/

.animate {
	-webkit-transition: all 0.5s ease-in-out;
  	-moz-transition: all 0.5s ease-in-out;
  	-o-transition: all 0.5s ease-in-out;
  	transition: all 0.5s ease-in-out;

}


/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}