/* Import Fonts */
@import url('https://fonts.googleapis.com/css2?family=Chivo:wght@400;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
@import url('https://fonts.gstatic.com');

@font-face {
	font-family: "peenuregular";
	src: url("../fonts/peenu-webfont.woff") format("woff"), url("../fonts/peenu-webfont.woff2") format("woff2"), url("../fonts/peenu-webfont.ttf") format("truetype"), url("../fonts/peenu-webfont.svg#peenuregular") format("svg");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "peenuregular";
	src: url("../fonts/peenu-webfont.woff") format("woff"), url("../fonts/peenu-webfont.woff2") format("woff2"), url("../fonts/peenu-webfont.ttf") format("truetype"), url("../fonts/peenu-webfont.svg#peenuregular") format("svg");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "peenuregular";
	src: url("../fonts/peenu-webfont.woff") format("woff"), url("../fonts/peenu-webfont.woff2") format("woff2"), url("../fonts/peenu-webfont.ttf") format("truetype"), url("../fonts/peenu-webfont.svg#peenuregular") format("svg");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "peenuregular";
	src: url("../fonts/peenu-webfont.woff") format("woff"), url("../fonts/peenu-webfont.woff2") format("woff2"), url("../fonts/peenu-webfont.ttf") format("truetype"), url("../fonts/peenu-webfont.svg#peenuregular") format("svg");
	font-weight: normal;
	font-style: normal;
}


@font-face {
    font-family: 'chivoblack';
    src: url('../fonts/chivo-black-webfont.woff2') format('woff2'),
         url('../fonts/chivo-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'chivoblack_italic';
    src: url('../fonts/chivo-blackitalic-webfont.woff2') format('woff2'),
         url('../fonts/chivo-blackitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




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

}




@font-face {
    font-family: 'chivobold_italic';
    src: url('../fonts/chivo-bolditalic-webfont.woff2') format('woff2'),
         url('../fonts/chivo-bolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'chivoitalic';
    src: url('../fonts/chivo-italic-webfont.woff2') format('woff2'),
         url('../fonts/chivo-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'chivolight';
    src: url('../fonts/chivo-light-webfont.woff2') format('woff2'),
         url('../fonts/chivo-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'chivolight_italic';
    src: url('../fonts/chivo-lightitalic-webfont.woff2') format('woff2'),
         url('../fonts/chivo-lightitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'chivoregular';
    src: url('../fonts/chivo-regular-webfont.woff2') format('woff2'),
         url('../fonts/chivo-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

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

}

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

}

/* For HH styles only */
#main .container {width: 100%;}
.temp-template {padding-right: 0px; padding-left: 0px; }
#ctl00_PlaceHolderMain_progrms_pages_section { width: 100%;}
#progrms_section {width: 100%;}

#ctl00_PlaceHolderMain_progrms_sub_pages_section { width: 100%;}
/*ovewrite HH CSS*/

section.microsite > .container {
    width: 100%;
    margin: 0;
    max-width: 100%;
    padding: 0;
  }
  
  section.microsite > .container >.row {
    margin: 0;
  }
  
  .temp-template {margin:0; padding:0}
  .top-info-area.white {margin: 0 280px}
  .top-info-area .hold {margin: 0;}
  
  header >.container {padding:0 15px !important}



body {
    font-family: "Open sans", "Arial", "Helvetica Neue", "Helvetica", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: subpixel-antialiased !important;
    text-rendering: optimizeLegibility !important;
}


h3, h2, a {
    font-family: "milkynice";
    font-style: normal;
    color: #000;
}

p, span, li {font-family: 'Open Sans';font-style: normal;font-weight: normal;font-size: 14px;line-height: 24px;}

#quizzes .text-wrap p, #yma-like .block-text h3  { font-weight: bold;}


/*  */
/* p, h1, h2, h3,a, li, span {font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;} */
a:link {color: #ffffff;}
a:hover {color: #ffffff; text-decoration: underline;}
.mb-only { display: none;}
.big-screen-only { display: block;}
.ws-only {display: block;}
.bg-orange {background: #ff9416;}
.bg-green {background: #25A18E;}
.bg-yellow {background: #FFC148;}
.bg-lyellow {background: #ffebb1;}
.bg-lorange {background: #FFF7DE;}
.bg-blue {background: #2895EF;}
.bg-red {background: #FE5F6D;}
.bg-shadow { box-shadow: 0 4px 20px 4px rgba(0, 0, 0, .25);}
.border-rad {border-radius: 16px;}
.block-text {text-align: center; margin-bottom: 28px;}
.text-right {text-align: right;}
.text-center {text-align: center;}
.text-uppercase {text-transform: uppercase;}
.text-purple {color: #834fc2;}
.text-orange {color: #ff9416;}
.text-green {color: #25A18E;}
.text-white {color: #fff;}
.text-green {color: #25a18e;}
.text-yellow {color: #ffc148;}
.text-red {color: #fe5f6d;}
.text-black {color: #000;}
.text-dark-blue {color: #005f9b;}
.text-blue {color: #2895ef;}
.text-lightblue {color: #42A0EE;}

ul {list-style: none;margin: 0;padding: 0;}
.img-bg img {width: 100%; box-shadow: 0px 4px 20px 8px rgba(0, 0, 0, 0.25); border-radius: 20px;}
.block-img {margin-bottom: 12px;}
.container-blocks {padding: 20px 17px;}
.xl-pad-b {padding-bottom: 100px;}
#wrapper { overflow: hidden;}

.db-header {
	padding: 39px 0 0;
	position: relative;
}
.title-hold { font-family: "peenuregular", "Arial", "Helvetica Neue", "Helvetica", sans-serif;}
.title-hold h2 {letter-spacing: -.05em;line-height: .93478;font-weight: 400;margin-bottom: 70px;    margin-top: -6px;}
.title-hold .wrap span {font-size: 36px;    letter-spacing: .24em;}
.title-hold span {    line-height: .9444; font-family: "peenuregular"}
.wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.text-white {color: #fff;}
.wrap .decor {display: inline-block;}
.title-hold .wrap .decor {margin-left: 3px;}
.title-hold h2 span {font-size: 92px;}
.db-header .navigation {
	font-size: 20px;
	text-align: center;
	letter-spacing: .04em;
	text-transform: uppercase;
    font-weight: 700;
    display: flex;
    flex-wrap: wrap;
}

.db-header .navigation > li:last-child {margin-right: 0;}

.db-header .navigation > li:first-child {font-size: 24px;}

.db-header .navigation a {
	color: #000;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 20px;
    font-family: 'Open Sans';
}
.db-header .navigation > li.active .li-wrap:before {height: 100%;}
.db-header .navigation > li.active a {color: #fff;}
.mb-nav-opener {
	width: 35px;
	height: 35px;
	position: relative;
	right: 10px;
	top: 0;
	box-shadow: inset 0 0 0 1px #834fc2;
	z-index: 4;
	display: inline-block;
	-webkit-transition: box-shadow .3s ease-in-out;
    transition: box-shadow .3s ease-in-out;
    float:right;
}
.nav-active .mb-nav-opener span {right: 74%;}
.nav-active .mb-nav-opener:before,
.nav-active .mb-nav-opener:after {
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 50%;
	left: 20%;
	right: 20%;
	-webkit-transition-delay: .2s;
	transition-delay: .2s;
}

.nav-active .mb-nav-opener:after {
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.mb-nav-opener span,
.mb-nav-opener:before,
.mb-nav-opener:after {
	background: #834fc2;
	position: absolute;
	top: 50%;
	left: 26%;
	right: 26%;
	height: 2px;
	margin-top: -1px;
	-webkit-transition: all .2s linear;
	transition: all .2s linear;
}

.mb-nav-opener span {left: 38%;}

.mb-nav-opener:before,
.mb-nav-opener:after {
	content: "";
	top: 35%;
}

.mb-nav-opener:after {top: 65%;}

.db-header .navigation > li {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-right: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-flow: column;
}
.db-header .navigation > li.w-sub.active .li-wrap:before {border-radius: 8px 8px 0px 0px;}
.db-header .navigation > li.active::after {
    display: block;
    content: '';
    width: 100%;
    height: 20px;
    position: relative;
    z-index: 10;
}

.db-header .navigation > li.orange.w-sub.active::after {   background: #ff9416;}
.db-header .navigation > li.yellow.w-sub.active::after {   background: #ffc148;}
.db-header .navigation > li.red.w-sub.active::after {   background: #fe5f6d;}
.db-header .navigation > li.green.w-sub.active::after {   background: #25a18e;}
.db-header .navigation > li.blue.w-sub.active::after {   background: #2895ef;}

.sub-nav {width: 100%;
    position: absolute;
    top: 5px;
    left: 0;
    margin-top: 100px;
    z-index: 10;
    padding: 27px 0;
    border-radius: 8px;
}
.sub-nav li.act {border-radius: 48px; background-color: #fff;padding: 10px 30px;}
.sub-nav li.act a{
    color: #000;
    
}


.sub-nav ul {display: flex;justify-content: space-around;}
.db-header .navigation .sub-nav li { display: list-item;padding: 10px 30px;}
.db-header .navigation .sub-nav li a{ color: #000;}
.db-header .navigation > li .li-wrap a {padding: 10px 48px 18px;}
.db-header .navigation > li .li-wrap {
    width: 100%;
    min-height: 88px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
}

.db-header .navigation > li .li-wrap:before {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    content: "";
    height: 15px;
    -webkit-transition: height .3s ease-in-out;
    transition: height .3s ease-in-out;
    border-radius: 8px;
    z-index: -1;
}

.db-header .navigation > li .li-wrap:hover:before {
    height: 100%;
}

.db-header .navigation > li .li-wrap:hover a {
    color: #fff;
}

.db-header.navigation > li.active .li-wrap:before {
    height: 100%;
}

.db-header.navigation > li.active a {
    color: #fff;
}

.purple .li-wrap:before {
    background: #834fc2;
}

.yellow .li-wrap:before {
    background: #ffc148;
}

.red .li-wrap:before {
    background: #fe5f6d;
}

.green .li-wrap:before {
    background: #25a18e;
}

.orange .li-wrap:before {
    background: #ff9416;
}

.blue .li-wrap:before {
    background: #2895ef;
}
.p-relative {position: relative;}
.navigation {
    position: static;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    overflow: visible;
    height: auto;
    background: transparent;
    padding: 0 0 0 15px;
}
.nav-logo img {
    width: 800px;
    height: auto;
    max-width: 90%;
    margin-bottom: 10px;
    margin-top: -8px;
}

.mb-nav-opener {
    display: none;
}


.db-container {
    width: 1380px;
    margin: 0 auto;
    position: relative;
}

.button {
    font-size: 24px;
    text-transform: capitalize;
    font-weight: normal;
    width: 250px;
    display: inline-block;
    padding: 8px 30px 11px;
    text-decoration: none;
    color: #fff;
    position: relative;
    z-index: 1;
    text-align: center;
    display: block;
    margin: 0 auto;    
    line-height: 29px;
}

.button:before {
    position: absolute;
    right: -2px;
    bottom: -10px;
    content: "";
    background: #834fc2;
    width: 60px;
    height: 30px;
    border-radius: 4px;
    -webkit-transform: rotate(-30deg) skewX(-35deg);
    -ms-transform: rotate(-30deg) skewX(-35deg);
    transform: rotate(-30deg) skewX(-35deg);
    z-index: -1;
    -webkit-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out;
}
.button span {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: #834fc2;
    -webkit-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
    border-radius: 4px;
    -webkit-transform: skew(5deg);
    -ms-transform: skew(5deg);
    transform: skew(5deg);
    z-index: -1;
}

.button span:after {
    position: absolute;
    top: -4px;
    left: 7px;
    right: -2px;
    bottom: 18px;
    content: "";
    background: #834fc2;
    -webkit-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out;
    border-radius: 4px;
    z-index: -1;
    -webkit-transform: rotate(-2deg) skewX(-6deg);
    -ms-transform: rotate(-2deg) skewX(-6deg);
    transform: rotate(-2deg) skewX(-6deg);
}
.button:after {
    width: 20px;
    position: absolute;
    top: -8px;
    bottom: 0;
    right: -5px;
    content: "";
    background: #834fc2;
    -webkit-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out;
    border-radius: 4px;
    z-index: -1;
}

#quiz-answer button,  .answer-text, .answer-text span, .q-counter, .q-counter span, .questions, .answer-explain, .dq-content h3, .dq-content p {
    font-family: "chivoregular" !important;
    font-style: normal;
    font-weight: normal;
}

.dq-content p a { color: #fff;text-decoration: underline;}
.dq-content p a:hover {text-decoration: none;}
.quiz-title {position: relative;padding: 58px 0 59px;background-position: center !important;}
.q1 .quiz-title {background: url(../images/quiz-bg-q1.PNG) no-repeat;background-size: cover; }
.q2 .quiz-title {background: url(../images/quiz-bg-q1.PNG) no-repeat;background-size: cover; }
.q3 .quiz-title {background: url(../images/quiz-bg-q1.PNG) no-repeat;background-size: cover; }
.quiz-title h2 {color: #fff;text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);font-family: "milkynice";font-style: normal;font-weight: normal;font-size: 48px;line-height: 56px;text-align: center;margin: 0;    padding: 0 280px;}
.quiz-wrap {width: 1380px; margin: 75px auto 0px auto; background: #834FC2; position: relative;padding-bottom: 140px;}
#quiz-answer {margin-top: 42px;}
.quiz-content {margin-top: 39px;}


#quiz-answer button {background: #fff;display: block;margin: 10px auto 16px auto;font-size: 24px;line-height: 36px;color: #1C2C42;border-radius: 48px;padding: 10px 50px;min-width: 540px;}
#quiz-answer .btn[disabled] {background: #fff;filter: alpha(opacity=90);opacity: .90;}
#quiz-answer button.active {background: #FFC148;}
.answer-text {font-size: 24px;line-height: 36px;color: #1C2C42}
.answer-text span {display: block;font-size: 40px;line-height: 48px;}
.ca-wrap {display: none;}
.done-quiz {display: none;}
.q-counter, .q-counter span {font-weight: bold !important}
.q-counter, .q-counter span, .questions {font-size: 24px !important;line-height: 36px;text-align: center;color: #FFFFFF;}
.questions {    padding: 0px 320px;}
.ca-wrap {background: #fff; text-align: center; padding:64px 0 57px 0; margin:66px 76px 0}
.answer-text {padding: 0 15%;}
.answer-explain {margin-top:30px;font-size: 24px;line-height: 36px;text-align: center;color: #1C2C42;padding: 0 15%;}

.done-quiz {margin-top: 135px;}
.dq-content h3 {font-size: 48px;line-height: 57px;text-align: center;color: #FFFFFF;}
.dq-content p { color: #fff;font-size: 24px;line-height: 36px;text-align: center;}
.dq-content img { margin: 77px auto 0 auto; display: block;}
.dq-btn { margin-top:41px;}
.dq-btn a span, .dq-btn a span:after, .dq-btn .button:after {background: #FFC148; color: #000000;}
.next-q-btn { text-align: center;margin-top: 42px;}
.next-q-btn .button::before {display: none;}

.qz-x {display: block;position: absolute;top: 40px;right: 36px;}
 
.bg-cloud {
    background-position: center top 30px;
    background-repeat: no-repeat;
    padding: 0px 0px 30px;
}

.bg-cloud::before {
    background-position: top center;
    background-repeat: no-repeat;
    content: '';
    height: 865px;
    position: absolute;
    top: -90px;
    width: 100%;
}

.bg-cloud.bg-cloud-purple2::before {
    background-image: url(../images/bg-cloud-purple2.png);
    height: 100%;
    z-index: -1;
    background-size: 100% 100%;
}

/* Mobile Nav Styles */
.mb-nav {display: none;z-index: 15;position: relative;width: 100%;padding:0 0px; transition: all .9s; top: 0;right: 0; left: 0;}
.home-mb-nav {padding: 0 !important; left: 0;}

.mb-nav .pg-primary {display: block;width: 100%;padding: 18px 10px;overflow: hidden;border-radius: 8px;box-shadow: 1px 1px 3px 1px rgb(6 6 6 / 20%)}
.primary-link {float: left;font-family: Open Sans;
		font-style: normal;
		font-weight: bold;
		font-size: 16px;
		/* line-height: 16px; */
		/* identical to box height, or 100% */

		text-transform: uppercase;

		color: #010101;
		}		
.mb-nav .arw-up {float: right; transition: .2s ease-in-out;} 
.mb-sublink {
		clear: both;
		padding-top: 10px;
		display: flex;
		flex-flow: column;
	}
.mb-sublink  a {width: auto; padding: 13px 0; text-align: center;
	font-family: "chivoregular";
	font-style: normal;
	font-weight: normal;
	font-size: 18px;
	line-height: 21px;
	color: #000000;
	margin: 0 auto;
}

.mb-sublink a:hover::after, .mb-sublink a:focus::after, .mb-sublink a.mb-act::after {
	content: "";
	position: relative;
	height: 4px;
	width: 100%;
	display: block;
	
	margin: 0 auto;
	border-radius: 8px;
	top: 2px;
}
.mb-p a:hover::after, .mb-p a:focus::after, .mb-p a.mb-act::after {background-color: #834FC2;}
.mb-y a:hover::after, .mb-y a:focus::after, .mb-y a.mb-act::after {background-color: #FFC148;}
.mb-r a:hover::after, .mb-r a:focus::after, .mb-r a.mb-act::after {background-color: #FE5F6D;}
.mb-g a:hover::after, .mb-g a:focus::after, .mb-g a.mb-act::after {background-color: #25A18E;}
.mb-o a:hover::after, .mb-o a:focus::after, .mb-o a.mb-act::after {background-color: #ff9416;}
.mb-b a:hover::after, .mb-b a:focus::after, .mb-b a.mb-act::after {background-color: #42A0EE;}

.mb-other-links > a.mb-active, .mb-other-links:hover { color: #fff;}
.prim-active {border-radius: 8px 8px 0px 0px !important;}
.mb-nav-sub {display: none;position: relative;box-shadow: 1px 4px 3px 1px rgb(6 6 6 / 20%);}
.mb-other-links {padding: 15px 0 30px 0;display: flex; flex-flow: row wrap;justify-content: center;}
.mb-other-links a { display:flex; width: 29.6%;height:61px;margin: 10px 5px 0; background: antiquewhite;box-sizing: border-box;padding: 10px 12px;text-align: center;justify-content: center;
	align-items: center;
	font-family: Open Sans;
	font-style: normal;
	font-weight: bold;
	font-size: 16px;
	text-transform: uppercase;color: #000000;
	box-sizing: border-box;
	border-radius: 8px;
}

.rotate180 {
	transform: rotate( 180deg);
	transition: .2s ease-in-out;
}

.nav-spacing-2row {margin-top: 60px;}

@media screen and (max-width: 1024px) {
    .db-container, .quiz-wrap  {width: 100% !important;}
    .navigation {padding: 0}
    .db-header .navigation {flex-flow: row nowrap;}
    .db-header .navigation > li .li-wrap a{padding: 5px 5px 18px;}
    .db-slick-wrap {width: 80%;}
    .container-blocks {padding: 20px 0;}
      
    .db-wrapper { overflow: hidden;}
    .quiz-wrap {    margin: 75px auto 0px auto;}
    .done-quiz {
        margin-left: 10%;
        margin-right: 10%;
    }
}



@media screen and (max-width: 768px) {
    .quiz-title h2 {padding: 0;font-size: 35px;margin-top: 30px;}
    .questions {padding: 0px 25px;}
    .sub-nav {    margin-top: 120px;}
    /* #qas .single-box .sgl-box-text {padding: 56px 45% 0px 68px;} */

	.nav-active .navigation {
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0);
	}

	.nav {text-align: right;}

	.nav .navigation {padding: 20px;}
	.nav .navigation > li {text-align: center;}
	.nav .navigation > li a:hover {color: #834fc2;}
	.nav .navigation > li:last-child a {border-bottom: none;}
    .answer-explain {padding: 0 30px;}
}

@media screen and (max-width: 540px) {
    .top-info-area.white {margin: 0 0;}
    .mb-nav {display: block;}
    .sec-headline { padding: 0 15px;}
    .mb-mb-lg {margin-bottom: 60px;}
    .mb-only { display: block;}
    .big-screen-only { display: none;}
    .db-header .navigation {flex-flow: column;}
    .db-header .navigation > li {margin: 0;}
    .navigation {position: absolute;}
    .nav .navigation > li a { width: 100%;}
    .db-header .navigation > li .li-wrap {min-height: auto;padding: 0;}
    .db-header .navigation > li .li-wrap:before { display: none;}
    .ws-only {display: none;}
    .navigation {
        top: 100%;
        right: 0;
        width: 100%;
        background: #fff;
        -webkit-transform: translateX(200%);
        -ms-transform: translateX(200%);
        transform: translateX(200%);
        z-index: 5;
        -webkit-transition: -webkit-transform .3s ease-in-out;
        transition: -webkit-transform .3s ease-in-out;
        transition: transform .3s ease-in-out;
        transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
        overflow: auto;
        padding: 15px 15px 0 15px;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }
    
   
    .db-header .navigation > li.active a {color: #000;font-weight: bolder;}
   
    .sub-nav {position: unset;margin-top: 0 !important; background: inherit;padding: 0;}
    .sub-nav li.act {padding: 0;}
    .db-header .navigation > li.active::after {display: none;}
    .sub-nav ul { display: list-item;}
    .db-header .navigation .sub-nav li a { font-size: 15px;}

    .sec-headline h3 img {vertical-align: sub;}
    .nav .navigation > li a {
		border-bottom: 1px solid #000;
		display: block;
		padding: 10px 5px;
    }
    .quiz-title {padding: 110px 0 56px;}
   
    
    .ca-wrap {margin: 66px 15px 0;}    
    .quiz-wrap {margin: 75px auto 0px auto;}
    #quiz-answer {margin-left: 15px;margin-right: 15px;}
    #quiz-answer button {white-space: break-spaces; width: 100%; padding: 10px 28px;min-width: auto;}
    .dq-content {padding: 0 15px;}
    .dq-content h3 {font-size: 37px;}
    .dq-content p {font-size: 21px;}
    .done-quiz {margin-top: 50px;}
    .dq-content img {margin: 47px auto 0 auto;}
    .dq-btn { margin-top: 21px;}
    .quiz-title h2 {margin-top: 0px;}
    .bg-cloud.bg-cloud-purple2::before {background-size: contain;}
}


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

    
    #qas .single-box .sgl-box-text {padding: 56px 20px 0px;}
 }