aardrian/giving-grid-a-go.markdown

## giving-grid-a-go.markdown

      
    Raw
  

              giving-grid-a-go.markdown
            
          
    Giving Grid a Go

A Pen by Adrian Roselli on CodePen.
License.

  
## index.html
<div class="wrapper">
  <div class="evalform">
		<h2>Expert<br>
			<span>Words Here</span></h2>
		<p>
			Nulla vehicula augue sit amet ex faucibus gravida. Ut pretium congue enim vel porta. Fusce a laoreet sem. Ut gravida volutpat elit, et porta tellus scelerisque ac. Proin vehicula aliquet ex, rutrum gravida orci mattis in. Donec ipsum elit, euismod nec libero vitae, dapibus convallis arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
		</p>
  </div>
  <div class="verdicts">
		<h2>Thing Title <span>Subtitle Text and Things</span></h2>
		<ul>
			<li><a href="https://s.codepen.io/aardrian/debug/WERGya">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non tellus mattis, iaculis eros vitae, convallis purus.</a></li>
			<li><a href="https://s.codepen.io/aardrian/debug/WERGya">Curabitur vel nunc orci. Quisque ligula mi, convallis eu felis et, volutpat consequat arcu.</a></li>
			<li><a href="https://s.codepen.io/aardrian/debug/WERGya">Maecenas tempus ultricies mi id malesuada. Sed tincidunt diam arcu.</a></li>
			<li><a href="https://s.codepen.io/aardrian/debug/WERGya">Donec fermentum vehicula odio at tincidunt. Duis neque lacus, sollicitudin semper placerat vel, vestibulum at nulla.</a></li>
		</ul>
		<p>
			<a href="https://s.codepen.io/aardrian/debug/WERGya">See more things…</a>
		</p>
  </div>
  <a href="https://s.codepen.io/aardrian/debug/WERGya" class="call">
		<strong>Call</strong><br>
		<span>And then some other words running along here.</span>
  </a>
  <a href="https://s.codepen.io/aardrian/debug/WERGya" class="chat">
    <strong>Chat</strong><br>
		<span>And then some other words running along here.</span>
  </a>
</div>

## style.css
body {
	margin: 0;
	background-color: #ccc;
	color: #333;
	line-height: 1.6;
	font-family: 'Open Sans', sans-serif;
}

.wrapper {
	background-color: #206a8d;
	background: linear-gradient(
		120deg,
		#083d77 0%,
		#083d77 33%,
		#f9d53d 33%,
		#f9d53d 35%,
		#30638e 35%,
		#30638e 55%,
		#206a8d 55%,
		#206a8d 75%,
		#00798c 75%,
		#00798c 100%
	);
	padding: 1em .25em;
	box-sizing: border-box;
}

.wrapper > div, .wrapper > a {
	background-color: #fff;
	border: .1em solid #333;
	padding: 1.2em 1.4em;
	margin: 1em 0;
	box-sizing: border-box;
}

.wrapper .evalform {
	border-color: #ce3b4f;
}

.wrapper .verdicts {
	background-color: rgba(255, 255, 255, .9);
}

/* First width MQ */

@media screen and (min-width: 44em), print and (min-width: 1in) {
	.wrapper {
		display: grid;
		display: -ms-grid;
		/*grid-gap: 1.2em;*/
		grid-template-columns: 1fr 1fr 1fr;
		-ms-grid-columns: 1fr 1fr 1fr;
		grid-template-rows: auto auto;
		-ms-grid-rows: auto auto;
	}

	.wrapper > div, .wrapper > a {
		margin: .6em 0;
	}

	.wrapper .evalform {
		margin-right: .6em;
	}

	/* Code for browsers that do not support grid, which mostly means browsers that also do not support feature queries. */
	.wrapper .evalform {
		float: left;
		width: 31%;
	}
	.wrapper .verdicts {
		float: right;
		width: 61%;
	}
	.wrapper .call, .wrapper .chat {
		float: right;
		width: 31%;
	}
	.wrapper::after {
		content: "";
		display: block;
		clear: both;
	}
}

/* Second width MQ */

@media screen and (min-width: 44em) and (max-width: 50em), print and (min-width: 4in) and (max-width: 5in) {
	.wrapper {
		grid-template-rows: auto auto auto;
		-ms-grid-rows: auto auto auto;
	}

	.wrapper .evalform {
		grid-column: 1;
		-ms-grid-column: 1;
		grid-row: 1 / span 3;
		-ms-grid-row: 1;
		-ms-grid-row-span: 3;
	}
	.wrapper .verdicts {
		grid-column: 2 / span 2;
		-ms-grid-column: 2;
		-ms-grid-column-span: 2;
		grid-row: 1;
		-ms-grid-row: 1;
	}
	.wrapper .call {
		grid-column: 2 / span 2;
		-ms-grid-column: 2;
		-ms-grid-column-span: 2;
		grid-row: 2;
		-ms-grid-row: 2;
	}
	.wrapper .chat {
		grid-column: 2 / span 2;
		-ms-grid-column: 2;
		-ms-grid-column-span: 2;
		grid-row: 3;
		-ms-grid-row: 3;
	}
	/* Code for browsers that do not support grid, which mostly means browsers that also do not support feature queries. */
	.wrapper .chat, .wrapper .call {
		width: 61%;
	}
}

/* Third width MQ */

@media screen and (min-width: 50em), print and (min-width: 5in) {
	.wrapper {
		padding: 1em;
	}

	.wrapper > div, .wrapper > a {
		margin: .6em;
	}

	.wrapper .evalform {
		grid-column: 1;
		-ms-grid-column: 1;
		grid-row: 1 / span 2;
		-ms-grid-row: 1;
		-ms-grid-row-span: 2;
	}
	.wrapper .verdicts {
		grid-column: 2 / span 2;
		-ms-grid-column: 2;
		-ms-grid-column-span: 2;
		grid-row: 1;
		-ms-grid-row: 1;
	}
	.wrapper .call {
		grid-column: 2;
		-ms-grid-column: 2;
		grid-row: 2;
		-ms-grid-row: 2;
		/*align-self: center;*/
	}
	.wrapper .chat {
		grid-column: 3;
		-ms-grid-column: 3;
		grid-row: 2;
		-ms-grid-row: 2;
		/*align-self: center;*/
	}
	/* Code for browsers that do not support grid, which mostly means browsers that also do not support feature queries. */
	.wrapper .call, .wrapper .chat {
		width: 29%;
	}
}

/* Unsetting floats for browsers that support grid *and* feature queries. */
@supports (display: grid) or (display: -ms-grid) {
	.wrapper .evalform, .wrapper .verdicts, .wrapper .call, .wrapper .chat {
		float: none;
		width: auto;
	}
}

/* Targetting IE11 (and IE10, sadly) to unset floats, repeating styles above, because it does not support feature queries. */
@media (-ms-high-contrast: active), (-ms-high-contrast: none), print {
	.wrapper .evalform, .wrapper .verdicts, .wrapper .call, .wrapper .chat {
		float: none;
		width: auto;
	}
}

/* Print styles */

@media print {
	body {
		margin: 0;
		background-color: #fff;
		color: #000;
		font-size: 7pt;
	}
	.wrapper {
		background-color: #fff;
		padding: 1em 0;
	}
	.wrapper .evalform, .wrapper .verdicts, .wrapper .call, .wrapper .chat {
		color: #000;
		background-color: #fff;
		border: 1pt solid #333;
		box-shadow: none;
	}
	.wrapper .call:link,
	.wrapper .chat:link,
	.wrapper .call:visited,
	.wrapper .chat:visited {
		color: #000;
	}
}

/* Eval Form */

.evalform h2 {
	text-transform: uppercase;
	font-size: 180%;
	line-height: .8;
	margin: .5em 0;
}
.evalform h2 span {
	font-size: 55%;
}

.verdicts h2 {
	font-size: 180%;
	line-height: 1.2;
	margin: .25em 0;
}

/* Verdicts */

.verdicts h2 span {
	font-size: 75%;
	font-family: 'Tinos', serif;
	font-weight: normal;
}

.verdicts ul, .verdicts li {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.verdicts ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

.verdicts li {
	flex: 1 0 40%;
	font-weight: bold;
	padding: 1em 1em 1em 1.25em;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' x='0' y='0' viewBox='0 0 58.25 58.51' width='.65em'%3E%3Cpath d='m12.5 1a3.6 3.6 0 0 1 4.6-0.4l10.1 6.9c1.4 0.9 3.6 2.4 5 3.4l25 16.7a1.8 1.8 0 0 1 0 3.3l-25 16.7c-1.4 0.9-3.6 2.4-5 3.4l-10.1 6.9a3.9 3.9 0 0 1-4.6-0.4l-11.5-11.5a2.9 2.9 0 0 1 0-4.2l10.2-10.4a2.9 2.9 0 0 0 0-4.2l-10.3-10.3a2.9 2.9 0 0 1 0-4.2l11.6-11.7z' fill='%2300798C'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 0 1.5em;
	background-size: .65em auto;
}

.verdicts p {
	text-align: right;
	font-style: italic;
}

.verdicts a, .verdicts a:link, .verdicts a:visited, .verdicts a:active {
	color: #00798C;
	text-decoration: underline;
}

.verdicts a:hover, .verdicts a:focus {
	text-decoration: none;
}

@media print {
	.verdicts a, .verdicts a:link, .verdicts a:visited, .verdicts a:active {
		color: #000;
	}

	.verdicts li {
		background-image: none;
		list-style-type: disc;
	padding: 1em 1em 1em 0;
	margin-left: 1.25em;
	}
}

/* Call and Chat */

.wrapper .call, .wrapper .chat {
	border-color: #fff;
	line-height: 1;
	padding: .25em 1em .65em 1em;
	box-shadow: 0 0 1.2em rgba(0, 0, 0, .5);
	display: block;
	transition: all .1s ease-in-out;
}

.wrapper .call strong, .wrapper .chat strong {
	font-size: 200%;
	text-transform: uppercase;
	line-height: 1.3;
}

.wrapper .call strong::before, .wrapper .chat strong::before {
	content: "";
	display: block;
	float: left;
	width: 1em;
	height: .8em;
	margin: .2em .5em 0 0;
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: .8em auto;
}

.wrapper .call strong::before {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 85'%3E%3Cpath d='M38 0H12A12 12 0 0 0 0 12v61a12 12 0 0 0 12 12h26a12 12 0 0 0 12-12V12A12 12 0 0 0 38 0zM12 4h26a8 8 0 0 1 8 8v50H4V12a8 8 0 0 1 8-8zm26 77H12a8 8 0 0 1-8-8v-7h42v7a8 8 0 0 1-8 8z' fill='%23fff'/%3E%3Cpath d='M30 72H20a2 2 0 0 0 0 4h10a2 2 0 0 0 0-4z' fill='%23fff'/%3E%3C/svg%3E");
	background-size: auto .8em;
	margin-top: .3em;
	width: .5em;
}

.wrapper .chat strong::before {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 86 75.97'%3E%3Cpath d='M78 0a8 8 0 0 1 8 8v40a8 8 0 0 1-8 8h-9l1.81 17.78a2 2 0 0 1-3.37 1.63L48 56h-7v3.06A6 6 0 0 1 35 65H20L9.41 75.41A2 2 0 0 1 6 73.62L7.56 65H6a6 6 0 0 1-6-5.94V39.94A6 6 0 0 1 6 34h6V8a8 8 0 0 1 8-8h58zm0 4H20a4 4 0 0 0-4 4v40a4 4 0 0 0 4 4h28.81a2 2 0 0 1 1.41.56l16.09 16-1.5-14.41a2.09 2.09 0 0 1 2-2.19H78a4 4 0 0 0 4-4V8a4 4 0 0 0-4-4zm-7 9a2 2 0 0 1 0 4H27a2 2 0 0 1 0-4h44zm0 13a2 2 0 0 1 0 4H27a2 2 0 0 1 0-4h44zM12 38H6a1.91 1.91 0 0 0-2 1.94v19.12A1.91 1.91 0 0 0 6 61h4a2.09 2.09 0 0 1 2 2.34l-.84 4.84 6.72-6.62a2 2 0 0 1 1.31-.56H35a1.91 1.91 0 0 0 2-1.94V56H20a8 8 0 0 1-8-8V38zm59 1a2 2 0 0 1 0 4H27a2 2 0 0 1 0-4h44z' fill='%23fff'/%3E%3C/svg%3E");
}

.wrapper .email strong::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 84.62'%3E%3Cpath d='M27.28 53.71l18.12 15zm18.1 11.49L29 51.61l16.34 13.62zM90 29.69v54.93H0V29.68l9.62-6.31V8.32h23L45.28 0l12.53 8.32h22.56v15zm-9.63 5.94l6-5.08-6-4v9.06zM37.57 8.32h15.31l-7.61-5.05zM12.35 37.71L29 51.61l16.34 13.62 32.31-27.51V11h-65.3v26.71zm-8.7-7.16l6 5v-8.91zm83.62 2.81L45.43 68.79l-18.12-15L2.73 33.32v48.57h84.54V33.36zM44.8 50.74c-7.07 0-13.06-5.17-13.06-13.45 0-8.88 6.16-16.55 15.73-16.55C55 20.75 60 26 60 33.2c0 6.47-3.62 10.26-7.67 10.26-1.72 0-3.32-1.16-3.19-3.79H49c-1.51 2.54-3.49 3.79-6.08 3.79s-4.65-2-4.65-5.43a10.18 10.18 0 0 1 10.19-10.22 11.36 11.36 0 0 1 4.61.9l-1.46 7.8c-.65 3.28-.13 4.78 1.29 4.83 2.2 0 4.65-2.89 4.65-7.89 0-6.25-3.75-10.73-10.43-10.73-7 0-12.93 5.56-12.93 14.31 0 7.2 4.7 11.64 11.08 11.64a13.44 13.44 0 0 0 6.51-1.51l.69 1.84a15.71 15.71 0 0 1-7.67 1.74zm5.3-20.34a7.49 7.49 0 0 0-2.15-.3c-3.79 0-6.85 3.58-6.85 7.76 0 1.9.95 3.28 2.85 3.28 2.5 0 4.78-3.19 5.26-5.86z' fill='%23fff'/%3E%3C/svg%3E");
}

.wrapper .call span, .wrapper .chat span {
	font-size: 70%;
	line-height: 1.6;
}

.wrapper .call {
	background-color: #00798c;
}

.wrapper .chat {
	background-color: #083d77;
}

.wrapper .call:link,
.wrapper .chat:link,
.wrapper .call:visited,
.wrapper .chat:visited,
.wrapper .call:active,
.wrapper .chat:active {
	color: #fff;
	text-decoration: none;
}

.wrapper .call:focus,
.wrapper .chat:focus,
.wrapper .call:hover,
.wrapper .chat:hover {
	box-shadow: 0 0 1.2em rgba(222, 222, 222, 1);
}
	<div class="wrapper">
	<div class="evalform">
	<h2>Expert<br>
	<span>Words Here</span></h2>
	<p>
	Nulla vehicula augue sit amet ex faucibus gravida. Ut pretium congue enim vel porta. Fusce a laoreet sem. Ut gravida volutpat elit, et porta tellus scelerisque ac. Proin vehicula aliquet ex, rutrum gravida orci mattis in. Donec ipsum elit, euismod nec libero vitae, dapibus convallis arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
	</p>
	</div>
	<div class="verdicts">
	<h2>Thing Title <span>Subtitle Text and Things</span></h2>
	<ul>
	<li><a href="https://s.codepen.io/aardrian/debug/WERGya">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non tellus mattis, iaculis eros vitae, convallis purus.</a></li>
	<li><a href="https://s.codepen.io/aardrian/debug/WERGya">Curabitur vel nunc orci. Quisque ligula mi, convallis eu felis et, volutpat consequat arcu.</a></li>
	<li><a href="https://s.codepen.io/aardrian/debug/WERGya">Maecenas tempus ultricies mi id malesuada. Sed tincidunt diam arcu.</a></li>
	<li><a href="https://s.codepen.io/aardrian/debug/WERGya">Donec fermentum vehicula odio at tincidunt. Duis neque lacus, sollicitudin semper placerat vel, vestibulum at nulla.</a></li>
	</ul>
	<p>
	<a href="https://s.codepen.io/aardrian/debug/WERGya">See more things…</a>
	</p>
	</div>
	<a href="https://s.codepen.io/aardrian/debug/WERGya" class="call">
	<strong>Call</strong><br>
	<span>And then some other words running along here.</span>
	</a>
	<a href="https://s.codepen.io/aardrian/debug/WERGya" class="chat">
	<strong>Chat</strong><br>
	<span>And then some other words running along here.</span>
	</a>
	</div>
	body {
	margin: 0;
	background-color: #ccc;
	color: #333;
	line-height: 1.6;
	font-family: 'Open Sans', sans-serif;
	}

	.wrapper {
	background-color: #206a8d;
	background: linear-gradient(
	120deg,
	#083d77 0%,
	#083d77 33%,
	#f9d53d 33%,
	#f9d53d 35%,
	#30638e 35%,
	#30638e 55%,
	#206a8d 55%,
	#206a8d 75%,
	#00798c 75%,
	#00798c 100%
	);
	padding: 1em .25em;
	box-sizing: border-box;
	}

	.wrapper > div, .wrapper > a {
	background-color: #fff;
	border: .1em solid #333;
	padding: 1.2em 1.4em;
	margin: 1em 0;
	box-sizing: border-box;
	}

	.wrapper .evalform {
	border-color: #ce3b4f;
	}

	.wrapper .verdicts {
	background-color: rgba(255, 255, 255, .9);
	}

	/* First width MQ */

	@media screen and (min-width: 44em), print and (min-width: 1in) {
	.wrapper {
	display: grid;
	display: -ms-grid;
	/grid-gap: 1.2em;/
	grid-template-columns: 1fr 1fr 1fr;
	-ms-grid-columns: 1fr 1fr 1fr;
	grid-template-rows: auto auto;
	-ms-grid-rows: auto auto;
	}

	.wrapper > div, .wrapper > a {
	margin: .6em 0;
	}

	.wrapper .evalform {
	margin-right: .6em;
	}

	/* Code for browsers that do not support grid, which mostly means browsers that also do not support feature queries. */
	.wrapper .evalform {
	float: left;
	width: 31%;
	}
	.wrapper .verdicts {
	float: right;
	width: 61%;
	}
	.wrapper .call, .wrapper .chat {
	float: right;
	width: 31%;
	}
	.wrapper::after {
	content: "";
	display: block;
	clear: both;
	}
	}

	/* Second width MQ */

	@media screen and (min-width: 44em) and (max-width: 50em), print and (min-width: 4in) and (max-width: 5in) {
	.wrapper {
	grid-template-rows: auto auto auto;
	-ms-grid-rows: auto auto auto;
	}

	.wrapper .evalform {
	grid-column: 1;
	-ms-grid-column: 1;
	grid-row: 1 / span 3;
	-ms-grid-row: 1;
	-ms-grid-row-span: 3;
	}
	.wrapper .verdicts {
	grid-column: 2 / span 2;
	-ms-grid-column: 2;
	-ms-grid-column-span: 2;
	grid-row: 1;
	-ms-grid-row: 1;
	}
	.wrapper .call {
	grid-column: 2 / span 2;
	-ms-grid-column: 2;
	-ms-grid-column-span: 2;
	grid-row: 2;
	-ms-grid-row: 2;
	}
	.wrapper .chat {
	grid-column: 2 / span 2;
	-ms-grid-column: 2;
	-ms-grid-column-span: 2;
	grid-row: 3;
	-ms-grid-row: 3;
	}
	/* Code for browsers that do not support grid, which mostly means browsers that also do not support feature queries. */
	.wrapper .chat, .wrapper .call {
	width: 61%;
	}
	}

	/* Third width MQ */

	@media screen and (min-width: 50em), print and (min-width: 5in) {
	.wrapper {
	padding: 1em;
	}

	.wrapper > div, .wrapper > a {
	margin: .6em;
	}

	.wrapper .evalform {
	grid-column: 1;
	-ms-grid-column: 1;
	grid-row: 1 / span 2;
	-ms-grid-row: 1;
	-ms-grid-row-span: 2;
	}
	.wrapper .verdicts {
	grid-column: 2 / span 2;
	-ms-grid-column: 2;
	-ms-grid-column-span: 2;
	grid-row: 1;
	-ms-grid-row: 1;
	}
	.wrapper .call {
	grid-column: 2;
	-ms-grid-column: 2;
	grid-row: 2;
	-ms-grid-row: 2;
	/align-self: center;/
	}
	.wrapper .chat {
	grid-column: 3;
	-ms-grid-column: 3;
	grid-row: 2;
	-ms-grid-row: 2;
	/align-self: center;/
	}
	/* Code for browsers that do not support grid, which mostly means browsers that also do not support feature queries. */
	.wrapper .call, .wrapper .chat {
	width: 29%;
	}
	}

	/* Unsetting floats for browsers that support grid and feature queries. */
	@supports (display: grid) or (display: -ms-grid) {
	.wrapper .evalform, .wrapper .verdicts, .wrapper .call, .wrapper .chat {
	float: none;
	width: auto;
	}
	}

	/* Targetting IE11 (and IE10, sadly) to unset floats, repeating styles above, because it does not support feature queries. */
	@media (-ms-high-contrast: active), (-ms-high-contrast: none), print {
	.wrapper .evalform, .wrapper .verdicts, .wrapper .call, .wrapper .chat {
	float: none;
	width: auto;
	}
	}

	/* Print styles */

	@media print {
	body {
	margin: 0;
	background-color: #fff;
	color: #000;
	font-size: 7pt;
	}
	.wrapper {
	background-color: #fff;
	padding: 1em 0;
	}
	.wrapper .evalform, .wrapper .verdicts, .wrapper .call, .wrapper .chat {
	color: #000;
	background-color: #fff;
	border: 1pt solid #333;
	box-shadow: none;
	}
	.wrapper .call:link,
	.wrapper .chat:link,
	.wrapper .call:visited,
	.wrapper .chat:visited {
	color: #000;
	}
	}

	/* Eval Form */

	.evalform h2 {
	text-transform: uppercase;
	font-size: 180%;
	line-height: .8;
	margin: .5em 0;
	}
	.evalform h2 span {
	font-size: 55%;
	}

	.verdicts h2 {
	font-size: 180%;
	line-height: 1.2;
	margin: .25em 0;
	}

	/* Verdicts */

	.verdicts h2 span {
	font-size: 75%;
	font-family: 'Tinos', serif;
	font-weight: normal;
	}

	.verdicts ul, .verdicts li {
	list-style-type: none;
	margin: 0;
	padding: 0;
	}

	.verdicts ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	}

	.verdicts li {
	flex: 1 0 40%;
	font-weight: bold;
	padding: 1em 1em 1em 1.25em;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' x='0' y='0' viewBox='0 0 58.25 58.51' width='.65em'%3E%3Cpath d='m12.5 1a3.6 3.6 0 0 1 4.6-0.4l10.1 6.9c1.4 0.9 3.6 2.4 5 3.4l25 16.7a1.8 1.8 0 0 1 0 3.3l-25 16.7c-1.4 0.9-3.6 2.4-5 3.4l-10.1 6.9a3.9 3.9 0 0 1-4.6-0.4l-11.5-11.5a2.9 2.9 0 0 1 0-4.2l10.2-10.4a2.9 2.9 0 0 0 0-4.2l-10.3-10.3a2.9 2.9 0 0 1 0-4.2l11.6-11.7z' fill='%2300798C'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 0 1.5em;
	background-size: .65em auto;
	}

	.verdicts p {
	text-align: right;
	font-style: italic;
	}

	.verdicts a, .verdicts a:link, .verdicts a:visited, .verdicts a:active {
	color: #00798C;
	text-decoration: underline;
	}

	.verdicts a:hover, .verdicts a:focus {
	text-decoration: none;
	}

	@media print {
	.verdicts a, .verdicts a:link, .verdicts a:visited, .verdicts a:active {
	color: #000;
	}

	.verdicts li {
	background-image: none;
	list-style-type: disc;
	padding: 1em 1em 1em 0;
	margin-left: 1.25em;
	}
	}

	/* Call and Chat */

	.wrapper .call, .wrapper .chat {
	border-color: #fff;
	line-height: 1;
	padding: .25em 1em .65em 1em;
	box-shadow: 0 0 1.2em rgba(0, 0, 0, .5);
	display: block;
	transition: all .1s ease-in-out;
	}

	.wrapper .call strong, .wrapper .chat strong {
	font-size: 200%;
	text-transform: uppercase;
	line-height: 1.3;
	}

	.wrapper .call strong::before, .wrapper .chat strong::before {
	content: "";
	display: block;
	float: left;
	width: 1em;
	height: .8em;
	margin: .2em .5em 0 0;
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: .8em auto;
	}

	.wrapper .call strong::before {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 85'%3E%3Cpath d='M38 0H12A12 12 0 0 0 0 12v61a12 12 0 0 0 12 12h26a12 12 0 0 0 12-12V12A12 12 0 0 0 38 0zM12 4h26a8 8 0 0 1 8 8v50H4V12a8 8 0 0 1 8-8zm26 77H12a8 8 0 0 1-8-8v-7h42v7a8 8 0 0 1-8 8z' fill='%23fff'/%3E%3Cpath d='M30 72H20a2 2 0 0 0 0 4h10a2 2 0 0 0 0-4z' fill='%23fff'/%3E%3C/svg%3E");
	background-size: auto .8em;
	margin-top: .3em;
	width: .5em;
	}

	.wrapper .chat strong::before {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 86 75.97'%3E%3Cpath d='M78 0a8 8 0 0 1 8 8v40a8 8 0 0 1-8 8h-9l1.81 17.78a2 2 0 0 1-3.37 1.63L48 56h-7v3.06A6 6 0 0 1 35 65H20L9.41 75.41A2 2 0 0 1 6 73.62L7.56 65H6a6 6 0 0 1-6-5.94V39.94A6 6 0 0 1 6 34h6V8a8 8 0 0 1 8-8h58zm0 4H20a4 4 0 0 0-4 4v40a4 4 0 0 0 4 4h28.81a2 2 0 0 1 1.41.56l16.09 16-1.5-14.41a2.09 2.09 0 0 1 2-2.19H78a4 4 0 0 0 4-4V8a4 4 0 0 0-4-4zm-7 9a2 2 0 0 1 0 4H27a2 2 0 0 1 0-4h44zm0 13a2 2 0 0 1 0 4H27a2 2 0 0 1 0-4h44zM12 38H6a1.91 1.91 0 0 0-2 1.94v19.12A1.91 1.91 0 0 0 6 61h4a2.09 2.09 0 0 1 2 2.34l-.84 4.84 6.72-6.62a2 2 0 0 1 1.31-.56H35a1.91 1.91 0 0 0 2-1.94V56H20a8 8 0 0 1-8-8V38zm59 1a2 2 0 0 1 0 4H27a2 2 0 0 1 0-4h44z' fill='%23fff'/%3E%3C/svg%3E");
	}

	.wrapper .email strong::before {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 84.62'%3E%3Cpath d='M27.28 53.71l18.12 15zm18.1 11.49L29 51.61l16.34 13.62zM90 29.69v54.93H0V29.68l9.62-6.31V8.32h23L45.28 0l12.53 8.32h22.56v15zm-9.63 5.94l6-5.08-6-4v9.06zM37.57 8.32h15.31l-7.61-5.05zM12.35 37.71L29 51.61l16.34 13.62 32.31-27.51V11h-65.3v26.71zm-8.7-7.16l6 5v-8.91zm83.62 2.81L45.43 68.79l-18.12-15L2.73 33.32v48.57h84.54V33.36zM44.8 50.74c-7.07 0-13.06-5.17-13.06-13.45 0-8.88 6.16-16.55 15.73-16.55C55 20.75 60 26 60 33.2c0 6.47-3.62 10.26-7.67 10.26-1.72 0-3.32-1.16-3.19-3.79H49c-1.51 2.54-3.49 3.79-6.08 3.79s-4.65-2-4.65-5.43a10.18 10.18 0 0 1 10.19-10.22 11.36 11.36 0 0 1 4.61.9l-1.46 7.8c-.65 3.28-.13 4.78 1.29 4.83 2.2 0 4.65-2.89 4.65-7.89 0-6.25-3.75-10.73-10.43-10.73-7 0-12.93 5.56-12.93 14.31 0 7.2 4.7 11.64 11.08 11.64a13.44 13.44 0 0 0 6.51-1.51l.69 1.84a15.71 15.71 0 0 1-7.67 1.74zm5.3-20.34a7.49 7.49 0 0 0-2.15-.3c-3.79 0-6.85 3.58-6.85 7.76 0 1.9.95 3.28 2.85 3.28 2.5 0 4.78-3.19 5.26-5.86z' fill='%23fff'/%3E%3C/svg%3E");
	}

	.wrapper .call span, .wrapper .chat span {
	font-size: 70%;
	line-height: 1.6;
	}

	.wrapper .call {
	background-color: #00798c;
	}

	.wrapper .chat {
	background-color: #083d77;
	}

	.wrapper .call:link,
	.wrapper .chat:link,
	.wrapper .call:visited,
	.wrapper .chat:visited,
	.wrapper .call:active,
	.wrapper .chat:active {
	color: #fff;
	text-decoration: none;
	}

	.wrapper .call:focus,
	.wrapper .chat:focus,
	.wrapper .call:hover,
	.wrapper .chat:hover {
	box-shadow: 0 0 1.2em rgba(222, 222, 222, 1);
	}