/* * {outline: 1px solid red} */
:root {
    --custom-radius: .2rem;
    --thumb-border: 1px;
    --base-width: 1800px;
    --link-color: #275586;
    --link-color-hover: #5a91bf;
    --default-shadow: 0 16px 34px -2px rgba(0, 0, 0, 0.26);
}
html {
    margin: 0;
    padding: 0;
    text-align: center;
}
body {
    margin: 0;
    padding: 0;
    background: #fbfbfb;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
a {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
p {
	padding: 0;
	margin: 0;
}
h1 {
    padding: 0;
    margin: 0;
	clear: both;
}
img {
    width: 100%;
    height: auto;
}
header {
    /* height: 80px; */
    background-color: #f3f3f3;
    width: 100%;
    border-bottom: .08rem solid #2e629b;
    box-shadow: var(--default-shadow);
}
.head {
    clear: both;
    font-size: 0;
    margin-inline: auto;
    max-width: var(--base-width);
    min-height: 80px;
    padding-block: .4rem;
    /* display: grid;
    grid-template-columns: 320px 1fr;
    gap: .5rem; */    
}
.logo {
    background: url(/images/logo.png) no-repeat;
    max-width: 320px;
    max-height: 80px;
    height: auto;
    aspect-ratio: 4 / 1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-inline: auto;

}
.wrap {
    margin-inline: auto;
    max-width: var(--base-width);
    /* padding-inline: 1.5rem; */
    padding-inline: clamp(.5rem, 1.5vw, 1.5rem);
    
}
.description {
	clear: both;
	padding-top: .8rem;
	text-align: left;
	font: normal 1rem Tahoma, sans-serif;
}
.thumbs {
    font-size: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: .8rem;
    align-self: start;
}
    .thumbs a img {
        outline: var(--thumb-border) solid var(--link-color);
        border-radius: var(--custom-radius);
    }
                @media screen and (max-width: 500px) {
                    .thumbs {
                        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
                    }
                }
.hover-video {
	position: relative;
	width: 100%;
	cursor: pointer;
    font-size: 0;
    /* background-color: var(--link-color); */
}
	.hover-video img, .hover-video video {
		width: 100%;
        height: 100%;
		display: block;
		background: url(/images/clock.png) no-repeat center / 40px;
        outline: 4px solid var(--link-color);
}
	.hover-video video {            
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
		pointer-events: none;
		aspect-ratio: 16 / 9;
		object-fit: cover;
        border-radius: var(--custom-radius);
	}          
.video-container {
    margin: 0;
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin-block: 1rem;
}
    .video-container iframe, .video-container object, .video-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }  
.pagination {
    clear: both;
    /* display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .8rem; */
    padding-block: .5rem;
    padding-top: 1rem;
}
    .pagination a {
        display: block;
        font-size: 2rem;
        font-weight: bold;
        color: var(--link-color);
        background-color: #fff;
        padding: .7rem;
        outline: 2px solid var(--link-color);
        text-transform: uppercase;
        box-shadow: var(--default-shadow);
    }
    .pagination a {
        text-align: center;
    }
    .pagination a:hover {
        /* color: var(--link-color-hover); */
        /* border-color: var(--link-color-hover); */
        outline-width: 4px;
        box-shadow: none;
    } 
footer {
    height: 2rem;
}             

/* #bottom {
	clear: both;
	padding: 2rem 0 0 0;
	margin-inline: auto;
	font: normal 1rem Helvetica, sans-serif;
	color: #ccc;
}
    #bottom a {
        text-decoration: underline;
        color: #222;
    }
    #bottom a:hover {
        text-decoration: none;
    } */