.gridquiz{
	position: relative;
  width: 100%;
  height:100%;
}
	.gridquiz .clear {
		clear: both;
	}
	.gridquiz .col{
		display: block;
		float:left;
		position:relative;
		padding:5px;

	}
		.gridquiz .col.col-1{
			width: 100%;
		}
		.gridquiz .col.col-2{
			width: 50%;
		}
		.gridquiz .col.col-3{
			width: 30.666667%;
			height: 169px;
			margin: 1%;
		}
		.gridquiz .col.col-4{
			width: 23%;
			min-height: 125px;
			margin: 1%;
		}
		.gridquiz .col.col-5{
			width: 20%;
		}
		.gridquiz .col.col-6{
			width: 16.66666667%;
		}

	.gridquiz, .gridquiz:before, .gridquiz:after {
		box-sizing: border-box;
	}
	.gridquiz .nav {
		width: 100%;
		display:inline-block;
		z-index: 10;
	}
		.gridquiz .nav.nav-bottom {
			bottom:-100px;
		}
		.gridquiz .nav.nav-top {
			top:0;
		}

		.gridquiz .nav .dots {
			width: 50%;
			margin: 0 auto;
		}
		.gridquiz .nav ul,
		.gridquiz .nav ol{
			list-style: none;
		}
			.gridquiz .nav li{
				float:left;
				display:inline-block;
			}
				.gridquiz .nav li .fa {
				}
				.gridquiz .nav li a{
					display: inline-block;
					text-align: center;
					width:100%;
				}
				.gridquiz .nav li.active a,
				.gridquiz .nav li a:hover{
					/* background: #666; */
				}

			.gridquiz .nav .prev-next li{
				float:left;
				display:inline-block;
				width: 50%;
			}

	.gridquiz .question{
		display:none;
		/* height: 0; */

	}
		.gridquiz .question.active{
			display:inline-block;
			min-height: 480px;
			width: 100%;
		}
			.gridquiz .question .option{
					background-size: cover;
					cursor:pointer;
					background-repeat: no-repeat;
					background-position: center;
				}
					.gridquiz .question .option.active,
					.gridquiz .question .option:hover{
						opacity:1;
					}

					.gridquiz .question .option input.option-radio{
						display:none;
					}
					.gridquiz .question .option span.fancy-radio{
						display:inline-block;
						width: 20px;
						height: 20px;
						background: #e9e9e9;
            border:4px solid #fff;
						-webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            transition: .2s;
					}
					.gridquiz .question .option:hover span.fancy-radio,
					.gridquiz .question .option.active span.fancy-radio{
						background: #000;
            border:4px solid #e9e9e9;

					}

	.gridquiz form{
		position: relative;
		width: 100%;
	}
	.gridquiz .form-wrapper{
		display:none;
		z-index: 110;
		width:100%;
		margin:auto;
		/* background: #e9e9e9; */
		/* border:1px solid #999; */

	}
		.gridquiz form.quiz-completed .form-wrapper.active{
			display:inline-block;
		}
		.gridquiz .form-wrapper ul.form-fields {
			margin: 0;
		}
		.gridquiz .form-wrapper .form-fields li{
			display: inline-block;
      width: 100%;
		}
		.gridquiz .form-wrapper .form-fields li.submit,
    .gridquiz .form-wrapper .form-fields li.acceptance-privacy-policy{
			text-align: center;
		}

	.gridquiz form .show-form-container{
		display:none;
		position: absolute;
		z-index: 100;
	}
		.gridquiz form.quiz-completed .show-form-container {
			display: inline-block;
		}

		.gridquiz form .form-fields label {
			width: 100%;
		}

		.gridquiz form .form-fields input[type="text"],
    .gridquiz form .form-fields input[type="email"]{
			width: 50%;

		}
			.gridquiz form .form-fields input.submit-form {
			}
			.gridquiz form .form-fields input.submit-form:hover {
			}

		.gridquiz input:focus,
		.gridquiz select:focus,
		.gridquiz textarea:focus,
		.gridquiz button:focus {
		    outline: none;
		}
		.gridquiz .quiz-completed .question, .quiz-completed .nav {
			display: none !important;
		}
		.gridquiz .loading {
			opacity: 1;
      text-align: center;
      display: none;
		}
    .gridquiz .quiz-submitting .loading {
      display: block;
    }
		.gridquiz .thank-you {
      display: none;
			text-align: center;
		}
			.gridquiz .thank-you h2 {
			}
		.gridquiz .quiz-submitted .thank-you {
			display: block;
		}
		.gridquiz .quiz-submitted .form-wrapper {
			display: none !important;
		}
		.gridquiz .quiz-submitting .form-wrapper .submit{
			display: block;
		}

/**/
@media only screen and (max-width: 1199px) {
	.gridquiz .col.col-3 {
	}
	.gridquiz .question.active {
    min-height: 380px;
	}
}

@media only screen and (max-width: 991px) {
	.gridquiz .col.col-3 {
	}
}

@media only screen and (max-width: 760px) {
	.gridquiz .nav .swiper-button-next, .nav .swiper-button-prev {
		display: block !important;
	}
}

@media only screen and (max-width: 640px) {
	.gridquiz .col.col-3 {
		width: 48%;
		margin: 1%;
	}
	.gridquiz .loading img {
		width: 30%;
	}
	.gridquiz .nav .dots {
		display: none;
	}
	.gridquiz .gridquiz form .form-fields input {
    width: 80%;
	}
	.gridquiz .question .option span.fancy-radio {
    width: 15px;
    height: 15px;
		bottom: 5px;
	}
}

/* STEMILT SPECIFIC CSS */
@font-face {
    font-family: LeagueSpartan-Bold;
    src: url("LeagueSpartan-Bold.otf") format("opentype");
}
@import url('https://fonts.googleapis.com/css?family=Dosis:300');
@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i');



.gridquiz ul {
	margin: 0;
}

.gridquiz .nav .prev-next li a {
	color: #BFD940;
  border: solid 2px #BFD940;
	padding: 13px 19px;
	width: auto;
	font-weight: 400;
  /* text-transform: uppercase; */
  font-family: 'Libre Baskerville', serif;
	font-style: italic;
}
.gridquiz .nav .prev-next li.prev a {
	float: left;
}

.gridquiz .nav .prev-next li.next a {
	float: right;
}

.gridquiz h1 {
	color: #2791D0;
	/* padding: 40px; */
	padding-bottom: 50px;
	font-family: "LeagueSpartan-Bold", sans-serif;
	text-transform: capitalize;
	font-size: 42px;
	/* width: 70%; */
}

.gridquiz h4 {
	font-family: "LeagueSpartan-Bold", sans-serif;
	color: #D82B27;
	text-transform: capitalize;
	position: absolute;
	top: 180px;
}

.gridquiz .thank-you h2 {
	font-family: "LeagueSpartan-Bold", sans-serif;
	text-transform: capitalize !important;
	font-size: 38px!important;
	color: #2791D0 !important;
}

.gridquiz article {
	background-size: cover;
	/* background-image: url(https://www.stemilt.com/wp-content/uploads/2018/06/stemilt-canvas.jpg) !important; */
	padding-bottom: 80px;
}

.gridquiz img {
	/* display: none; */
}

.gridquiz .question .option span.fancy-radio {
  display: none;
}
.gridquiz .nav .dots {
    display: none;
}

.gridquiz .question .option.active, .gridquiz .question .option:hover {
	border: 4px #bfd940 solid;
	padding: 1px;
	/* margin-top: 4px; */
}

.gridquiz .question .option.active h4, .gridquiz .question .option:hover h4 {
	margin-top: -4px;
	color: #bfd940;
}

.gridquiz .col.col-3 {
    margin-bottom: 80px;
}

.gridquiz .board {
  margin-top: 30px;
}
.gridquiz .results {
  width: 100%;
}
.gridquiz .share-content-box {
	margin: 20px auto;
	width: 140px;
}
.gridquiz h3.recipe-title {
	font-family: 'Libre Baskerville', serif;
	font-style: italic;
}
.gridquiz .recipe-image img {
	max-width: 575px;
	margin-top: 15px;
	width: 100%;
}

.gridquiz form .form-fields input.submit-form {
    border: solid 2px #BFD940;
    background-color: transparent;
    padding: 5px 10px;
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
}
.gridquiz form .form-fields li.invalid input{
  border-color:red !important;
}
.gridquiz form .form-fields li.invalid input[type="checkbox"]{
  border-color:red !important;
}

	.gridquiz form .form-fields input.submit-form:hover {
		border: solid 2px #272127;
	}

.gridquiz .form-wrapper ul.form-fields {
    max-width: 100%;
    width: 450px;
    margin:auto;
}
.gridquiz .form-wrapper ul.form-fields li.text span{
    display: block;
}
.gridquiz form .form-fields input[type="text"],
.gridquiz form .form-fields input[type="email"]{
    width: 100%;
    border: solid 2px #272127;
    background: transparent;
    padding: 5px;
    color: #294a66;
}
.gridquiz form .form-fields input[type="checkbox"]{
    -webkit-appearance:none;
    width:24px;
    height:24px;
    background:white;
    border-radius:5px;
    border:2px solid #555;
    position:relative;
    text-align: center;
}
.gridquiz form .form-fields input[type="checkbox"]:before{
    content:'x';
    color:#fff;
    position:relative;
}
.gridquiz form .form-fields input[type="checkbox"]:checked {
    background:#ccc;
}


.quiz-submitted .col-2 {
	float: left;
	width: 48%;
}
.quiz-submitted .board-right {
	margin-top: 20%;
  margin-left: 2%;
}
.quiz-submitted .board-right h4 {
	font-family: "LeagueSpartan-Bold", sans-serif;
	font-size: 24px;
	color: #D82B27;
}
.quiz-submitted .board-right a {
	border: 2px solid #D82B27;
	padding: 5px 8px;
	background: #D82B27;
	color: #ffffff;
}



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

.gridquiz .col-3, .quiz-submitted .col-2 {
	width: 100%;
}

}








/*  */