/*
line-clamp is a useful CSS property, however it's only implementation (March 2021) requires weird 
webkit notation. This is supported in all current browsers. But will eventually (maybe) change to 
something standard, so check and update when that time comes.
*/
.ws_h2 {
	font-family: Georgia, Times, "Times New Roman", serif;
}

:root {
	--h1-size-mobile: 2.6rem;
	--h1-size-tablet: 3.4rem;
	--h1-size-desktop: 3.4rem;
}

#hero {
	position: relative;
	height: 123px;
	width: 100%;
	padding-top: 1px;
	background: #fff url(https://cdn.gotoquiz.com/img/2.53/ws/ws-hero-chevron6-420px-h3.jpg) no-repeat top center;
	background-size: 420px 123px;
}
#hero > h1 {
	background: rgba(255, 255, 255, 0.95);
	font-size: var(--h1-size-mobile);
	padding: 2px 14px;
	line-height: 1.354;
	color: #505050;
	box-shadow: 0 0 0 5px rgba(225, 226, 229, 0.7);
	margin: 0;
	font-weight: bold;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -72%);
	        transform: translate(-50%, -72%);
	-webkit-transform: translate(-50%, calc(-50% - 14px));
	        transform: translate(-50%, calc(-50% - 14px));
	width: 82%;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	max-width: 82%;
	text-align: center;
}
#hero > h1::after {
	display: none;
}

#hero2 {
	background-color: #26b3bd;
	background-image: url(https://cdn.gotoquiz.com/img/2.53/ws/ws-persp-white5d-440px-h.png), linear-gradient(180deg, #26b3bd 33%, hsl(174deg, 67%, 45%));
	background-size: 440px auto;
	background-position: center;
	background-repeat: no-repeat;
	min-height: 82px;
	padding: 10px 5%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 1.4rem;
	border-bottom: 0.5px solid #8f8f8f;
	box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.5);
}
#hero2 > h1 {
	font-size: 2.1rem;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	margin: 0;
	text-align: center;
}
#hero2 > h1::after {
	display: none;
}
#hero2 > h1 > .h1span {
	background: rgba(255, 255, 255, 0.95);
	line-height: 2.25;
	padding: 4px 14px 3px;
	-webkit-box-decoration-break: clone;
	        box-decoration-break: clone;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.53);
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}

.h1Long1 {
	font-size: 2rem;
}

.h1Long2 {
	font-size: 1.85rem;
	padding: 4px 12px 3px !important;
}

/*
#stripe {
    padding: 2px 6px;
    text-align: center;


    > h1 {
        margin: 0 auto;
        width: fit-content;
        line-height: 2.2;
        text-shadow: 0 2px 2px rgb(0 0 0 / 8%);
        font-weight: bold;
        color: #505050;

        &::after {
            display: none;
        }
    }

    .h1span {
        background: rgba(255,255,255,0.94);
        padding: 2px 14px 1px;
        box-decoration-break: clone;
        box-shadow: 0 0 0 5px rgb(225 226 229 / 70%);
    }
}
*/
.subHead {
	display: none;
}

/*
.subHead {
    display: flex;
    justify-content: flex-end;
}


#wsCreateLink {
    overflow: hidden;
    text-indent: -200px;
    display: block;
    background: #1c7dd4 no-repeat center;
    background-image: url(/img/2.53/ic/ws-create-sm.svg?2), linear-gradient(180deg, #1E88D0, #2399C8);
    background-size: 15px 12.42px, 100%;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-sizing: content-box;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0,0,0,0.5);
    position: relative;

    &::before {
        position: absolute;
        top: 0;
        left: 0;
        @include size(100%);
        box-shadow: 0 1px 2px rgb(0 0 0 / 40%), inset 0 1px 1px rgb(255 255 255 / 30%), inset 0 -1px 1px rgba(0,0,0,0.13);
        content: "";
        border-radius: 50%;
        border: 1px solid rgb(42 42 213 / 50%);
        box-sizing: border-box;
    }
}
*/
.icChrome {
	display: inline-block;
	height: 12px;
	width: 12px;
	margin-right: 2px;
	background-size: 12px;
	background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='64' height='64'%3E%3Cdefs%3E%3Cpath id='zvq' fill='%23' d='M32,16h27.7C54.2,6.4,43.8,0,32,0C21.8,0,12.6,4.8,6.8,12.3l9.5,16.5C17.8,21.5,24.2,16,32,16z'/%3E%3C/defs%3E%3Cuse xlink:href='%23zvq' fill='%23DC4C3F' /%3E%3Cuse xlink:href='%23zvq' fill='%23FFCD42' transform='rotate(120 32 32)' /%3E%3Cuse xlink:href='%23zvq' fill='%231FA363' transform='rotate(240 32 32)' /%3E%3Ccircle fill='%234A8AF4' cx='32' cy='32' r='12'/%3E%3C/svg%3E%0A");
}

.ws_h2 {
	margin-top: 8px;
	font-size: 2.1rem;
	border-bottom: 2px solid #67b8d6;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
}
.ws_h2::after {
	display: none;
}

a.ws_liLink {
	text-decoration: none;
	display: block;
	transition: none;
}

.ws_liBy {
	font-size: 1.3rem;
	text-align: right;
	margin-right: 2px;
	color: #666;
}

.ws_liWordCt, .ws_liSize {
	display: inline-block;
	color: #333;
	background: #edf1f7;
	line-height: 1.3;
	padding: 0 4px;
	font-size: 1.2rem;
	margin-left: 3px;
	border-radius: 4px;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.ws_listSide .ws_liTitle {
	margin-bottom: 2px;
}
.ws_listSide .ws_liTitle::before {
	content: "";
	display: inline-block;
	height: 17px;
	width: 17px;
	background-image: url(https://cdn.gotoquiz.com/img/2.53/ws/icon-24b.jpg);
	background-size: 24px;
	margin-right: 3px;
	-webkit-transform: translateY(2px);
	        transform: translateY(2px);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}

.ws_listMain {
	display: flex;
	flex-wrap: wrap;
	max-width: 96%;
	margin: 1.6rem auto 3.2rem;
	justify-content: space-around;
}
.ws_listMain > li {
	margin: 10px;
	flex: 1 1 200px;
	min-width: 0;
}
.ws_listMain .ws_liLink {
	position: relative;
	padding: 6px;
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.24), 0 4px 4px -3px rgba(0, 0, 0, 0.4);
	height: 100%;
	background: #fff;
	transition: all 0.24s ease-out;
	display: -ms-grid;
	display: grid;
	gap: 5px 0;
	-ms-grid-columns: 57px 0 auto;
	grid-template-columns: 57px auto;
	-ms-grid-rows: 52px 5px auto;
	grid-template-rows: 52px auto;
	    grid-template-areas: "icon details" "body body";
}
.ws_listMain .ws_liLink::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: repeating-conic-gradient(rgba(255, 255, 255, 0.07) 0% 25%, transparent 0% 50%) 50%/18px 18px;
}
.ws_listMain .ws_liLink:hover {
	-webkit-filter: brightness(1.03);
	        filter: brightness(1.03);
	-webkit-transform: translateY(-2px);
	        transform: translateY(-2px);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
	transition: all 0.04s ease-in;
}
.ws_listMain .ws_liWordCt, .ws_listMain .ws_liSize {
	margin: 4px;
	padding-top: 1px;
	background: rgba(255, 255, 255, 0.7);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
	letter-spacing: 0.4px;
}
.ws_listMain .ws_liSize {
	font-size: 1rem;
	line-height: 1.5;
}
.ws_listMain .ws_liTitle {
	font-size: 1.7rem;
	line-height: 1.3;
	color: #222;
	text-decoration: underline;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.14);
}
.ws_listMain .ws_liBy {
	position: absolute;
	bottom: 0;
	right: 0;
	font-size: 1.2rem;
	background: rgba(255, 255, 255, 0.7);
	padding: 0 7px;
	color: #555;
	line-height: 1.3;
	text-align: right;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
	margin-right: 0;
}

.ws_liIcon {
	-ms-grid-row: 1;
	-ms-grid-column: 1;
	height: 52px;
	width: 52px;
	background: url(https://cdn.gotoquiz.com/img/2.53/ws/icon-50.jpg);
	background-size: 50px;
	border: 1px solid #888;
	grid-area: icon;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.26);
}

.ws_liDetails {
	-ms-grid-row: 1;
	-ms-grid-column: 3;
	grid-area: details;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: center;
	position: relative;
}

.ws_liBody {
	-ms-grid-row: 3;
	-ms-grid-column: 1;
	-ms-grid-column-span: 3;
	grid-area: body;
	min-width: 0;
	padding: 2px 6px;
	background: rgba(255, 255, 255, 0.7);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
}

.ws_liWords {
	-webkit-line-clamp: 2;
	overflow: hidden;
	-webkit-box-orient: vertical;
	display: -webkit-box;
	font-size: 1.2rem;
	color: #333;
	margin: 3px 0;
	letter-spacing: -0.2px;
}

a#createBtn {
	color: #fff;
	text-decoration: none;
	float: right;
	margin: 2rem 4.5% 1.3rem 0.4rem;
	position: relative;
	display: flex;
	align-items: center;
	-webkit-filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
	        filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
	transition: none;
}
a#createBtn:active {
	outline: none;
	-webkit-filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
	        filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
	-webkit-transform: translateY(1px);
	        transform: translateY(1px);
}

.ws_icCreate {
	background: #1c7dd4 no-repeat center;
	background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='37' height='37' viewBox='-1 -1 37 37'%3E%3Cdefs%3E%3Cstyle%3Eg%7Bfilter:drop-shadow(0 1px 1px rgba(0,0,0,0.25))%7D%3C/style%3E%3C/defs%3E%3Cg stroke='%23fff' stroke-width='2' stroke-linecap='round' fill='none'%3E%3Cpath d='M4.5,1C2.5,1,1,2.5,1,5.5C1,7.5,2.5,9,3,9h19.5c-0.5,0-2-1.5-2-3.5C20.5,2.5,22,1,24,1s4,1.5,4,5.5s0,8,0,8'/%3E%3Cpath d='M8,9c0,5.9,0,17,0,19s1,3,3,3s6,0,6,0'/%3E%3Cline x1='4.5' y1='1' x2='24' y2='1'/%3E%3Ccircle cx='27' cy='26' r='7'/%3E%3Cline x1='27' y1='23' x2='27' y2='29'/%3E%3Cline x1='24' y1='26' x2='30' y2='26'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Ccircle cx='12' cy='14' r='1'/%3E%3Ccircle cx='16' cy='14' r='1'/%3E%3Ccircle cx='20' cy='14' r='1'/%3E%3Ccircle cx='24' cy='14' r='1'/%3E%3Ccircle cx='12' cy='18' r='1'/%3E%3Ccircle cx='16' cy='18' r='1'/%3E%3Ccircle cx='20' cy='18' r='1'/%3E%3Ccircle cx='12' cy='22' r='1'/%3E%3Ccircle cx='16' cy='22' r='1'/%3E%3Ccircle cx='12' cy='26' r='1'/%3E%3Ccircle cx='16' cy='26' r='1'/%3E%3C/g%3E%3C/svg%3E%0A"), linear-gradient(180deg, #1E88D0, #2399C8);
	height: 36px;
	width: 36px;
	flex: 0 0 36px;
	position: relative;
	z-index: 2;
	border-radius: 50%;
	border: 2px solid #fff;
	box-sizing: content-box;
	background-size: 23px auto, 100% 100%;
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
	-webkit-transform: translateX(17px);
	        transform: translateX(17px);
}
.ws_icCreate::before {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.3), inset 0 -1px 1px rgba(0, 0, 0, 0.13);
	content: "";
	border-radius: 50%;
	border: 1px solid rgba(42, 42, 213, 0.5);
	box-sizing: border-box;
}

.ws_txtCreate {
	background: #1c6cdc linear-gradient(90deg, #1c7dd5, #26a4c4);
	line-height: 2.9rem;
	padding: 2px 10px 2px 20px;
	position: relative;
	z-index: 1;
	font-size: 1.5rem;
	letter-spacing: -0.2px;
	white-space: nowrap;
	border-radius: 9px;
	border: 2px solid #fff;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}
.ws_txtCreate::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	border-radius: 7px;
	border: 1px solid rgba(42, 42, 213, 0.25);
	box-sizing: border-box;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.3), inset 0 -1px 1px rgba(0, 0, 0, 0.13);
	border-bottom-color: rgba(42, 42, 213, 0.35);
}

.ws_meta {
	margin-left: 4.3%;
	margin-right: 3.6%;
}

@media screen and (min-width: 430px) {
	#hero {
		background-image: url(https://cdn.gotoquiz.com/img/2.53/ws/ws-hero-chevron-683px-h3.jpg);
		background-size: 683px 123px;
	}
}
@media screen and (min-width: 448px) {
	#hero2 {
		background-size: 590px auto;
	}
}
@media screen and (min-width: 600px) {
	#hero2 {
		background-size: 626px auto;
	}
}
@media screen and (min-width: 768px) {
	/*
	.puzzBgFade {
	    background-image: linear-gradient(to bottom, smooth-gradient($smoothing-array-easeout-quad, #fff, 1, 100px)), url(/img/2.53/ws/ws-strip3-834px.jpg);
	    background-size: 100% 100%, 834px auto;
	}
	/*
	#stripe {
	    padding: 7px 5% 14px;
	    background-size: 100% 7px, 834px 98px;
	    background-image: linear-gradient(to bottom, #737373 0, #d0d0d0 37%, #f2f2f2 62%, #fff 100%), url(/img/2.53/ws/ws-strip3-834px.jpg);
	    background-repeat: no-repeat;
	    background-position: center bottom, center top;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    min-height: 84px;

	    > h1 {
	        font-size: 2.4rem;
	    }
	}
	*/
	#hero {
		background-image: url(https://cdn.gotoquiz.com/img/2.53/ws/ws-hero-chevron5-850px.jpg);
		background-size: 850px 141px;
		height: 141px;
	}
	#hero > h1 {
		font-size: var(--h1-size-tablet);
		-webkit-transform: translate(-50%, -82%);
		        transform: translate(-50%, -82%);
		-webkit-transform: translate(-50%, calc(-50% - 22px));
		        transform: translate(-50%, calc(-50% - 22px));
	}
	#hero2 {
		background-color: #26b3bd;
		background-image: url(https://cdn.gotoquiz.com/img/2.53/ws/ws-persp-white5-834px.png), linear-gradient(180deg, #26b3bd 33%, hsl(174deg, 67%, 45%));
		background-size: 834px auto;
		margin-bottom: 0.7rem;
		padding: 10px 7%;
	}
	#hero2 > h1 {
		font-size: 2.3rem;
	}
	.h1Long1 {
		font-size: 2.1rem;
	}
	.h1Long2 {
		font-size: 1.95rem;
	}
	.ws_h2 {
		font-size: 2.7rem;
	}
	.subHead {
		display: flex;
		justify-content: flex-end;
		margin-top: 0;
	}
	#step1Para {
		font-size: 2rem;
	}
}
@media only screen and (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.302325581395349), only screen and (min-width: 768px) and (min-resolution: 125dpi), only screen and (min-width: 768px) and (min-resolution: 1.3dppx) {
	#hero {
		background-image: url(https://cdn.gotoquiz.com/img/2.53/ws/ws-hero-chevron5-850px-h.jpg);
		background-size: 850px 140.5px;
	}
	#hero2 {
		background-image: url(https://cdn.gotoquiz.com/img/2.53/ws/ws-persp-white5-834px-h.png);
	}
}
@media screen and (min-width: 768px) {
	a#createBtn {
		margin: 1.6rem 5.6% 1.3rem 1rem;
	}
	a#createBtn:hover {
		-webkit-filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5)) brightness(1.1);
		        filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5)) brightness(1.1);
	}
}
@media screen and (min-width: 768px) {
	.ws_icCreate {
		height: 48px;
		width: 48px;
		flex: 0 0 48px;
		border-width: 3px;
		background-size: 29px auto, 100% 100%;
		box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
	}
	.ws_icCreate::before {
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.3), inset 0 -1px 1px rgba(0, 0, 0, 0.13);
		border: 1px solid rgba(42, 42, 213, 0.5);
	}
}
@media screen and (min-width: 768px) {
	.ws_txtCreate {
		line-height: 3.4rem;
		padding: 3px 12px 3px 21px;
		font-size: 1.9rem;
		border-radius: 10px;
		border-width: 3px;
		text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
	}
	.ws_txtCreate::before {
		border-radius: 7px;
		border: 1px solid rgba(42, 42, 213, 0.25);
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.3), inset 0 -1px 1px rgba(0, 0, 0, 0.13);
	}
}
@media screen and (min-width: 768px) {
	.ws_meta {
		margin-left: 3.6%;
		margin-right: 3.4%;
	}
}
@media screen and (min-width: 900px) {
	#hero > h1 {
		font-size: var(--h1-size-desktop);
	}
	#hero2 {
		min-height: 88px;
	}
	#hero2 > h1 {
		font-size: 2.5rem;
	}
	#hero2 > h1 > .h1span {
		padding: 5px 20px 4px;
		line-height: 2.3;
	}
	.h1Long1 {
		font-size: 2.3rem;
	}
	.h1Long2 {
		font-size: 2.1rem;
	}
}
/*# sourceMappingURL=wordSearchBits.css.map */