.breakout-bg.alternate.transparent{
	background:none !important;
}
.breakout-bg.green, .well.green{
	background: #afcb37;
}
.breakout-bg.yellow{
	background: #f7a941;
}
.breakout-bg.red{
	background: #e7343f;
}
.well.blue{
	background:#c8e9f0;
}
.well.pale-green{
	background:#e4f0d0;
}
.breakout-bg.alternate-two{
	background-image: url(/-/media/Images/socialcareandhealth/coronavirus/coronavirus-bug-1000x1000.png);
	background-repeat: no-repeat;
	background-position:-22em;
	background-size: 60%
}
.icon.sort-down.blue{
	color:#c8e9f0;
}
.icon.sort-down.pale-green{
	color:#e4f0d0;
}
.link-content {
	overflow: auto;
	-webkit-transition: all 0.2s cubic-bezier(0.16, 0.9, 0.83, 0.86);
	transition: all 0.2s cubic-bezier(0.16, 0.9, 0.83, 0.86);
	transition-duration: 0.5s;
}
.link-content.active {
	-webkit-animation: mymove 0.5s ease-out 0s 1; /* Safari 4.0 - 8.0 */
	animation: mymove 0.5s ease-out 0s 1;
	padding-top:2em;
}
@keyframes mymove {
	from {
		-webkit-transform: translateX(2.5rem);
		transform: translateX(2.5rem);
		display: none;
		opacity: 0;
		visibility: hidden;
	}
	to {
		display: block;
		-webkit-transform: translateY(0rem);
		transform: translateY(0rem);
		opacity: 1;
		visibility: visible;
	}
}
.breakout-bg.alternate .thumbnail.active{
	box-shadow: none;
}
.breakout-bg.alternate .thumbnail.active:after{
	content: " ";
    width: 0;
    height: 0;
    border-left: 108px solid transparent;
    border-right: 108px solid transparent;
    border-top: 30px solid rgba(255,255,255,1);
    position: absolute;
    bottom: -28px;
    left: 0;
    filter: drop-shadow(0px 4px 0px rgba(0,0,0,0.1));
}

.breakout-bg.bg.alternate-two.green a, .breakout-bg.bg.alternate-two.green a:link, .breakout-bg.bg.alternate-two.green a:hover, .breakout-bg.bg.alternate-two.green a:active{
    color: #00004d;
    border-bottom: 1px solid #00004d;
}

.thumbnail-block a>img {
    padding: 2em
}

.thumbnail *:last-child {
    margin-top: 0
}

.breakout-bg.bg.alternate-two.green a:visited {
    color: #600080;
    border-bottom: 1px solid #600080;
}

@media only screen and (max-width: 37em) {
	.breakout-bg.alternate > .row .three .link-content {
		clear: left;
	}
	.breakout-bg.alternate .thumbnail.active:after {
		border-left: 140px solid transparent;
		border-right: 140px solid transparent;
		left: 50%;
		margin-left: -140px;
	}
	.breakout-bg.alternate .thumbnail p {
		float:left;
		margin-top:0;
		margin-bottom:0;
	}
	.breakout-bg.alternate .thumbnail p:last-of-type {
		width:80%;
	}
	.conform-block>.columns{
		display: block;
	}
	.breakout-bg.alternate-two { 
	background-image: url(/-/media/Images/socialcareandhealth/coronavirus/coronavirus-bug-1000x1000.png);
	background-repeat: no-repeat;
	background-position:left;
	background-size:200%
}
}
@media only screen and (max-width: 23.3125em) {
	.breakout-bg.alternate .thumbnail p:last-of-type {
		width:74%;
}
}

/*Service options*/

.well.contact-sheet{
	border: 1px solid rgba(0,0,0,0.1);
}
#contact-container .thumbnail{
	margin: -0.25em 0 0 0;
	padding: 0.5em;
	font-size:1em;
	line-height:1.25em;
}
#contact-container .thumbnail .small{
	margin-top:0.5em;
}


li a.thumbnail{
	font-size:1.25rem;
	margin-bottom:0;
	position:relative;
}

li a.thumbnail:hover, li a.thumbnail.selected{
    background-color: #016cbf;
	color:#fff;
	border:1px solid #016cbf !important;
	box-shadow:none;
}

li a.thumbnail:hover:after, li a.thumbnail.selected:after{
	 content:"";
    display:block;
    position:absolute;
    top:0;
    bottom:0;
    left:100%;
    width:100%;
    background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 100"><polygon fill="%23016cbf" points="0,0 20,50 0,100"/></svg>');
    background-position:0 50%;
    background-size:auto 100%;
	background-repeat:no-repeat;
}


li p{
	margin-top:0;
}

.element-invisible {
  position: absolute !important;
  height: 1px; width: 1px; 
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

#topics-list, .well.contact-sheet{
    height: auto;
    width: auto;
    position: relative;
    box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.5);
	filter: blur(0.5em);
    -webkit-animation: zoom 0.5s;
    animation: zoom 0.5s;
	opacity:0;
    -webkit-transform: scale(0,0); 
    transform: scale(0,0);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards; /* Add this so that your modal doesn't 
                                      close after the animation completes */
}
@-webkit-keyframes zoom {
    100% {
        -webkit-transform: scale(1,1); 
		opacity:1;
		box-shadow: none;
		filter:none;
    }
}

@keyframes zoom {
    100% {
        transform: scale(1,1); 
		opacity: 1;
		box-shadow: none;
		filter:none;
    }
}
.primary.contact-type, .secondary.contact-type, .tertiary.contact-type{
	padding-bottom:1em;
}
.primary.contact-type h3, .secondary.contact-type h4, .tertiary.contact-type, .related.contact-type{
	margin-bottom:0 !important;
}
.primary.contact-type p, .secondary.contact-type p, .tertiary.contact-type p, .related.contact-type p{
	margin-top:1em;
	margin-bottom: 0;
}
.primary.contact-type, .secondary.contact-type p.small, .tertiary.contact-type p.small, .related.contact-type p.small{
	margin-top:0.5rem !important
}
.coronavirus{
	padding: 0.5em 1em;
	font-weight:700;
	display:inline-flex;
}
.coronavirus.alert-intro{
	background-color:#08314c;
	color:#fff;
}
/*medium alert*/
.coronavirus.alert-medium{
background-color:#F7A941;
color:#08314c;
	
}
/*high alert*/
.coronavirus.alert-high{
	background-color: #EC6726;
	color: #000;
}

/*very high alert and national restrictions*/
.coronavirus.alert-vhigh{
	background-color: #E7343F;
	color: #000;
}

/*restrictions lifted*/
.coronavirus.alert-lifted{
	background-color: #00AFCB;
	color: #000;
}