quiz-logo/*
Theme Name: KillGiss2020
Theme URI: https://wordpress.org/themes/twentynineteen/
Author: Det
Author URI: https://wordpress.org/
Description: 
Version: 1.0
License: 
License URI: 
Text Domain: killgiss
Tags: 
*/


/* Normalize */

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  padding:0;
}
a {
  background-color: transparent;
}
img {
  border-style: none;
}




/*
Set me up
======================================
*/
body {
	/*
	background:#009855;
	color:#fff;
	*/
	background:#fff;
	color:#000;
	font-family: "Open Sans",Arial,sans-serif;
}
a {
	color:#000;
	text-decoration:underline;
}

/*
Structure
======================================
*/
.site-content {
	
}


/*
Typography
======================================
*/


/*
Grids, margins
======================================
*/



/*
Blocks
======================================
*/

/*Headers
-------------------------------------------*/
.b-question__header {
	position:absolute;
	top:0;
	left:0;	
	width:100%;
	box-sizing:border-box;
	padding:20px;
	display:flex;
	justify-content:space-between;
}
.quiz-meta{
	display:flex;
	align-items:center;
}
.quiz-title,
.quiz-questions {
	margin:0;
	font-size:0.75rem;
	font-weight:300;	
}
.quiz-title {
	margin-right:2em;
	white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  	max-width: 200px;	
}

.quiz-logo-mobile {
	height:40px;
	width:40px;	
}
.quiz-logo-desktop {
	display:none;
}
@media screen and (min-width : 48em) {
.quiz-title {
	margin-right:6em;
  	max-width: 600px;	
}
.quiz-logo-mobile {
	display:none;	
}
.quiz-logo-desktop {
	display:block;
	width:180px;
}
}


/*Menues
-------------------------------------------*/



/* Moduels
-------------------------------------------*/
.s-section {
	width:100%;
	height:100vh;
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
}
.s-question__cnt {
	padding:20px;	
}
.b-question__title {
	max-width:800px;
	margin:0 auto 1.5em auto;
	font-size:1rem;
}
.b-question__nr {
	margin:0 0 1em 0;
	font-size:0.75rem;
	text-transform:uppercase;
	letter-spacing:1px;
}

/* Intro module 
-----------------*/
.b-intro__wrap {
	max-width:600px;
	margin: 0 auto;	
}
.b-intro__txt {
	font-size:1rem;
	margin:0 0 2em 0;
	line-height:1.5;
}

/* Image module 
-----------------*/
.s-interlude__cnt {
	
}
.s-interlude__cnt img {
	height:50vh;	
	width:auto;
	display:inline;
	position: relative;
	
}

/* Text Question 
-----------------*/
.b-answers__txt {
	max-width:600px;
	margin:0 auto;	
}
.b-answers__txt .b-btn {
	opacity:0;
}

/* Img Question
-----------------*/
.b-answers__img {
	display:flex;
	max-width:600px;
	margin:0 auto;
	cursor:pointer;
	outline:none;
}

/* Timeline
 ------------------*/
 .b-timeline--container {
	position:absolute;
	bottom:30px;
	padding:0 20px;	 
	box-sizing:border-box;
	width:100%;
	z-index:-999;
 }
 .b-timeline {
	position:relative;	
	height:7px; 
 }
 .b-timeline--bar {
	width:100%;
	background:#ccc;
	height:2px;
	position:absolute;	
	top:3px;
	left:0;
 }
 .b-timeline--currbar {
	position:absolute;	
	top:3px;
	left:0;
	background:#009855;
	height:2px;
	width:0;
	transition:all .3s ease-out;	
 }
 
/* Outro module 
-----------------*/
.b-results {
	max-width:740px;
	margin:0 auto 0 auto;	
}
.b-results__points,
.b-results__total {
	font-weight:700;	
}
.b-results__txt {
	margin-bottom:2em;	
}
.b-results__feedback {
	display:none;
	line-height:1.5;
}
.b-results__feedback.selected {
	display:block;
}
#view-results {
	text-decoration:underline;
	cursor:pointer;	
}

/* Page Modules
-------------------------------------------*/
/* Hero module 
-----------------*/
.b-page-hero {
	width:100%;
	height:100vh;
	position:relative;
}
.b-page-hero__content-wrap {
	
	position:absolute;	
	bottom:0;
	left:0;
	width:100%;
	
	box-sizing:border-box;
}
.b-page-hero__content {
	max-width:1400px;
	margin:0 auto;	
	text-align:left;
	padding:3%;
}
.b-page-hero__video {
	width: 100%;
    height: 100%;
    object-fit: cover;
}
.b-page-hero__content h1 {
	font-size:8rem;	
	font-weight:700;	
	line-height:1;
	margin:0 0 0.5em 0;
}
.b-page-hero__meta {
	display:flex;
	align-items:center;
	justify-content:space-between;	
}
.b-page-hero__meta .b-hero-btn {
	background:#009855;
	text-decoration:none;
	border-radius:30px;
	color:#fff;
	padding: 18px 40px;
    font-size: 0.875rem;
    display: block;
	
}

/*Footer
-------------------------*/



/*
Media
======================================
*/

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

/*
Icons
======================================
*/


/*
Buttons
======================================
*/
.b-btn {
	-webkit-appearance: none;
	-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-font-smoothing: antialiased;
	outline:none;
	border:none;
	padding:0;
	background:none;
	border-radius:3px;
	cursor:pointer;
	position:relative;
	text-align:center;
	box-sizing:border-box;
	text-decoration:none;
	
	/*
	transition: all 0.4s;
    transition-timing-function: cubic-bezier(0.2,1,0.3,1);
	*/
	line-height:1.4;
	
}
.b-btn--white {
	background:#fff;	
	color:#000;	
	-webkit-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.2);
box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.2);
}
.b-btn--green {
	background:#009855;
	color:#fff;	
	-webkit-box-shadow: 0px 2px 0px 0px rgba(0,122,68,1);
-moz-box-shadow: 0px 2px 0px 0px rgba(0,122,68,1);
box-shadow: 0px 2px 0px 0px rgba(0,122,68,1);
}
.b-btn__check {
	width:22px;
	height:22px;
	position:absolute;
	background:#AFAFAF;	
	top:-10px;
	left:50%;
	transform:translateX(-50%);
		
	border-radius:50%;
	align-items:center;
	justify-content:center;
	display:none;
}
.b-btn__check .fa-check {
	fill:#ffffff;
	width:13px;	
}
.b-btn__check .fa-times {
	fill:#ffffff;
	width:10px;	
	display:none;
}

.b-btn--white.selected {
	background:#F0F0EE;	
}
.b-btn--white.selected .b-btn__check {
	display:flex;	
}
.b-btn--green.selected {
	background:#00894C;	
}
.b-btn--green.selected .b-btn__check {
	display:flex;	
}
.b-btn--large {
	padding:18px 20px;
	font-size:0.875rem;
	margin:14px 0;
	display:block;
	width:100%;
}

/* Facit och markerade rätt fel*/
.s-question--facit .b-btn--green {
	background:#e02525;
	-webkit-box-shadow: 0px 2px 0px 0px rgba(186,29,29,1);
-moz-box-shadow: 0px 2px 0px 0px rgba(186,29,29,1);
box-shadow: 0px 2px 0px 0px rgba(186,29,29,1);
}
.s-question--facit .b-btn--green.selected {
	background:#e02525;
	-webkit-box-shadow: 0px 2px 0px 0px rgba(186,29,29,1);
-moz-box-shadow: 0px 2px 0px 0px rgba(186,29,29,1);
box-shadow: 0px 2px 0px 0px rgba(186,29,29,1);
}
.s-question--facit .b-btn--green.selected .b-btn__check .fa-times {
	display:block;
}
.s-question--facit .b-btn--green.selected .b-btn__check .fa-check {
	display:none;	
}
.s-question--facit .b-btn--green.b-btn-correct {
	background:#009855;
	-webkit-box-shadow: 0px 2px 0px 0px rgba(0,122,68,1);
-moz-box-shadow: 0px 2px 0px 0px rgba(0,122,68,1);
box-shadow: 0px 2px 0px 0px rgba(0,122,68,1);
}
.s-question--facit .b-btn--green.b-btn-correct .b-btn__check .fa-times {
	display:none;
}
.s-question--facit .b-btn--green.b-btn-correct .b-btn__check .fa-check {
	display:block;
}
.s-question--facit .b-btn--green.selected .b-btn__check {
	background: #e02525;
    border: 2px #fff solid;
}
.s-question--facit .b-btn--green.b-btn-correct .b-btn__check {
	background: #009855;
    border: 2px #fff solid;
}
.b-btn--disabled {
	cursor: not-allowed;
	pointer-events: none;
}
.b-next-page {
	cursor:pointer;
	position:fixed;
	z-index:999;
	width:60px;
	height:60px;
	background:#009855;
	border-radius:30px;
	left:50%;
	bottom:20px;
	transform:translate(-50%,200%);
	transition: transform 0.4s;
    transition-timing-function: cubic-bezier(0.2,1,0.3,1);
	display:flex;
	justify-content:center;
	align-items:center;
}
.b-next-page .fa-arrow-down {
	fill:#ffffff;
	width:20px;
}
.single-svbt_quiz--facit .b-next-page  {
	transform:translate(-50%,0);
}

/* Img buttons */
.b-btn-img {
	margin:3px;
	-webkit-box-shadow: -1px 3px 18px 0px rgba(0,0,0,0.4);
-moz-box-shadow: -1px 3px 18px 0px rgba(0,0,0,0.4);
box-shadow: -1px 3px 18px 0px rgba(0,0,0,0.4);
	
	transition: transform 0.4s;
    transition-timing-function: cubic-bezier(0.2,1,0.3,1);
	
}
.b-btn-img:nth-child(1) {
	transform:rotate(-7deg);
}
.b-btn-img:nth-child(2) {
	transform:rotate(2deg);
}
.b-btn-img:nth-child(3) {
	transform:rotate(8deg);
}
.b-btn-img:hover {
	
	transform:scale(1.2) rotate(0deg);
	
	z-index:999;	
}
.b-btn-img.selected {
	z-index:998;
}
.b-btn-img.selected .b-btn__check {
	display:flex;
	top:-12px;	
}

/* Facit */
.s-question--facit .b-btn-img {
	border:6px solid #e02525;
}
.s-question--facit .b-btn-img.b-btn-correct {
	border:6px solid #009855;
}
.s-question--facit .b-btn-img.selected .b-btn__check {
	background: #e02525;
    border: 2px #fff solid;
	top:-16px;	
}
.s-question--facit .b-btn-img.b-btn-correct .b-btn__check {
	background: #009855;
    border: 2px #fff solid;
	top:-16px;	
}
.s-question--facit .b-btn-img.selected .b-btn__check .fa-times {
	display:block;
}
.s-question--facit .b-btn-img.selected .b-btn__check .fa-check {
	display:none;	
}
.s-question--facit .b-btn-img.b-btn-correct .b-btn__check .fa-times {
	display:none;
}
.s-question--facit .b-btn-img.b-btn-correct .b-btn__check .fa-check {
	display:block;
}


/*
Media Queries
======================================
*/

/* iPad */
@media screen and (min-width : 48em) {
.b-timeline--container {
	padding:0 5%;	
	bottom:60px; 
 }
 .b-question__header {
	padding:5%;
}

/* modules */
.b-question__title {
	font-size:2rem;
}


}
/* Desktop small */
@media screen and (min-width : 68.5em) and ( max-height: 640px ) {
.b-timeline--container {	
	bottom:10px; 
 }
}

/* Desktop small */
@media screen and (min-width : 68.5em) {

.b-btn--white:hover {
	/*
	transform:scale(1.05)!important;
	*/	
}
.b-timeline--container {
	padding:0 10%;	 
 }
 .b-question__header {
	padding:3%;
}

}


/* Desktop medium 1320px*/
@media screen and (min-width : 82.5em) {
	
}