/*
.thumb

Base class for thumbnails.
A <code>.thumb</code> is an icon or avatar or other image.
A <code>.thumb</code> hides text content by pushing it outside the hidden overflow, displaying only it's <code>background-image</code>.
The user cannot interact with a <code>background-image</code> in the way they can with an <code>&lt;img/&gt;</code>).
This should be the main consideration when deciding to use a <code>.thumb</code> or an <code>&lt;img/&gt;</code>.
Thumb is in essence an image replacement technique.

A default thumb is a square of 64x64px. Add an image by defining a
<code>background-image</code>. The image is centered and 'cropped' via
<code>background-size</code> and <code>background-position</code>.

Markup: <a class="thumb" href="#" style="background-image: url('//source.unsplash.com/category/nature/128x80')">Thumb text</a>

Styleguide: 4.thumb
*/

.thumb {
	display: inline-block;
	vertical-align: top;
	overflow: hidden;
	position: relative;

	/* Nullify padding that may have been put there by other
	   styling, say for example by <button class="thumb"> */
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;

	/* Hide overflowing text. This technique is better
	   than using -ve text-indent because IE7 moves
	   the background image with the text-indent. */
	padding-top: 3.75rem;
	height: 0;
	min-height: 0;
	width: 3.75rem;

	/* Keep top of text safely away from the bottom of
	   the thumb. */
	line-height: 2;

	/* background-position is set for the case where an image is used as the
	   the background. 50% to keep it centred, and 40% because faces are often
	   centred in the upper portion of the image. */
	background-position: 50% 40%;
	background-repeat: no-repeat;
    background-size: cover;
	background-color: transparent;
	border-width: 0;

	text-decoration: none;
	color: inherit;
}

.thumb.block {
	overflow: hidden;
}

@media print {
	.thumb {
		/* Encourage webkit to print background image. */
		-webkit-print-color-adjust: exact;
	}
}

.thumb-1\:2,
.thumb-2\:3,
.thumb-3\:4,
.thumb-4\:5,
.thumb-1\:1,
.thumb-5\:4,
.thumb-4\:3,
.thumb-3\:2,
.thumb-16\:9,
.thumb-2\:1,
.thumb-940\:360 {
	width: 100%;
    background-size: cover;
    background-color: rgba(0,0,0,0.1);
}

.thumb-1\:2  { padding-top: 200%; }
.thumb-2\:3  { padding-top: 150%; }
.thumb-3\:4  { padding-top: 133.333333%; }
.thumb-4\:5  { padding-top: 125%; }
.thumb-1\:1  { padding-top: 100%; }
.thumb-5\:4  { padding-top: 80%; }
.thumb-4\:3  { padding-top: 75%; }
.thumb-3\:2  { padding-top: 66.666667%; }
.thumb-16\:9 { padding-top: 56.25%; }
.thumb-2\:1  { padding-top: 50%; }
.thumb-940\:360 { padding-top: 38.29787234%; }


/* Thumb dimension classes can be used to dictate the aspect ratios
   of video iframes, svgs and so on */
.thumb > iframe,
.thumb > svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.text-01 + .thumb-940\:360 {
    margin-top: 2.1875rem;
}

.text-04 + .thumb-16\:9 {
    margin-top: 1.25rem;
}

.text-05 + .thumb-940\:360 {
    margin-top: 1.25rem;
}

p + .thumb-940\:360 {
    margin-top: 1.25rem;
}

p + .thumb-3\:2,
p + figure {
    margin-top: 2rem;
}


.thumb-logo {
    padding-top: 3.25rem;
    width: 6.375rem;
    color: white;
    background-image: url('/images/chuv.png') ;
    background-size: contain;
}

/*
.thumb-prev<br/>
.thumb-next

Navigation thumbs for slideshows.

Markup: <a class="thumb-prev thumb">Previous</a>
<a class="thumb-next thumb">Next</a>

Styleguide: 4.thumb.thumb-prev
*/

.thumb-prev,
.thumb-next {
	position: relative;
	width: 3.75rem;
	padding-top: 5rem;
	background-image: none;
}

.thumb-prev::before,
.thumb-next::before {
	position: absolute;
	top: 50%;
	content: '';
	height: 1.875rem;
	width: 1.875rem;
	margin-top: -0.9375rem;
	border-top: 1px solid currentcolor;
	border-left: 1px solid currentcolor;
}

.thumb-prev::before {
	left: 62.5%;
	margin-left: -0.9375rem;
	transform: rotate(-45deg);
}

.thumb-next::before {
	right: 62.5%;
	margin-right: -0.9375rem;
	transform: rotate(135deg);
}

.thumb-prev:hover::before,
.thumb-next:hover::before {
	border-top-width: 2px;
	border-left-width: 2px;
}

/*
.fb-thumb

Markup: <a class="fb-thumb thumb" href="/">Facebook</a>

Styleguide: 4.thumb.social-thumb-1
*/

/*
.tw-thumb

Markup: <a class="tw-thumb thumb" href="/">Twitter</a>

Styleguide: 4.thumb.social-thumb-2
*/

/*
.in-thumb

Markup: <a class="in-thumb thumb" href="/">Instagram</a>

Styleguide: 4.thumb.social-thumb-3
*/
/*
.fb-thumb,
.tw-thumb,
.in-thumb {
	width: 1.875rem;
	padding-top: 1.875rem;
	background-size: 7.5rem auto;
}

.fb-thumb {
	background-color: #3b5998;
	background-position: 0 -8.8125rem;
}

.tw-thumb {
	background-color: #55acee;
	background-position: 0 -5.875rem;
}

.in-thumb {
	background-color: #3f729b;
	background-position: 0 -11.75rem;
}
*/

/*
.thumb-dot

Markup: <a class="thumb-dot thumb" href="/1">1</a>

Styleguide: 4.thumb.thumb-dot
*/

.thumb-dot {
	position: relative;
	width: 1.25rem;
	padding-top: 1.25rem;
}

.thumb-dot::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -0.3125rem;
	margin-left: -0.3125rem;
	width: 0.625rem;
	height: 0.625rem;
	border: 1px solid currentcolor;
	border-radius: 50%;
}

.thumb-dot.on::before {
	background-color: currentcolor;
}

/*
.thumb-round

<a class="thumb thumb-round" href="#1">1</a>
*/

.thumb-round {
	border-radius: 50%;
}


.video-thumb{
	margin-top: 3rem;
	margin-bottom: 3rem;
}


figure img + figcaption{
	margin-top: 1.25rem;
	color: #4d4d4d;
}

figure img {
	color: #4d4d4d;
	background-color: #FFFFFF;
	width: 100%;
	height: auto;
}