@charset "utf-8";

#imghead {
height: 300px;
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
}

article {
position: relative;
margin-top: 2em;
margin-bottom: 2em;
}

article img.right {
float: right;
margin: 0 0 1.5em 1.5em;
}

article img.left {
float: left;
margin: 0 1.5em 1.5em 0;
}

blockquote {
margin: 1em 2em;
padding-left: 1em;
border-left: 5px solid var(--clr1);
font-style: italic;
}

.contphotos {
margin: 1em 0;
padding: 0;
text-align: center;
list-style-type: none;
}

.contphotos li {
display: inline-block;
margin: 0 1em 1em 0;
width: calc(25% - 0.75em);
}

.contphotos li:nth-child(4n) {
margin: 0 0 2em 0;
}

.contphotos li img {
width: 100%;
}

ul#albums2 {
display: grid;

list-style-type: none;
margin: 2em 0 4em 0;
padding: 0;

grid-template-columns: repeat(5, calc(20% - 0.2em));
grid-gap: 0.2em;
grid-auto-rows: auto;
}

ul#albums2 li {
display: inline-block;
grid-column: auto;
grid-row: auto;
width: 100%;
position: relative;
transition: all 1s ease-in;
}

ul#albums2 li a {
width: 100%;
}

ul#albums2 li a img {
position: relative;
width: 100%;
vertical-align: top;
}

ul#albums2 li.big {
grid-column: span 2 !important;
grid-row: span 2 !important;
}

hr {
border: none;
border-top: 1px solid #555;
}

time.icon {
float: right;
font-family: 'Open Sans', sans-serif;
font-size: 0.6em;
display: block;
position: relative;
width: 6em;
height: 7em;
background-color: #fff;
margin: 0 0 1em 1em;
border-radius: 0.6em;
box-shadow: 0 1px 0 #bdbdbd, 0 2px 0 #fff, 0 3px 0 #bdbdbd, 0 4px 0 #fff, 0 5px 0 #bdbdbd, 0 0 0 1px #bdbdbd;
overflow: hidden;
-webkit-backface-visibility: hidden;
-webkit-transform: rotate(0deg) skewY(0deg);
-webkit-transform-origin: 50% 10%;
transform-origin: 50% 10%;
}

time.icon * {
display: block;
width: 100%;
font-size: 1em;
font-weight: 600;
font-style: normal;
text-align: center;
}

time.icon strong {
position: absolute;
top: 0;
padding: 0.4em 0;
color: #fff;
font-weight: 600;
background-color: #f09917;
box-shadow: 0 2px 0 #f09917;
}

time.icon em {
position: absolute;
bottom: 0.3em;
color: #f09917;
}

time.icon span {
width: 100%;
font-size: 2.8em;
letter-spacing: -0.05em;
padding-top: 0.8em;
color: #1f2856;
}

time.icon:hover, time.icon:focus {
-webkit-animation: swing 0.6s ease-out;
animation: swing 0.6s ease-out;
}

@-webkit-keyframes swing {
0%   { -webkit-transform: rotate(0deg)  skewY(0deg); }
20%  { -webkit-transform: rotate(12deg) skewY(4deg); }
60%  { -webkit-transform: rotate(-9deg) skewY(-3deg); }
80%  { -webkit-transform: rotate(6deg)  skewY(-2deg); }
100% { -webkit-transform: rotate(0deg)  skewY(0deg); }
}

@keyframes swing {
0%   { transform: rotate(0deg)  skewY(0deg); }
20%  { transform: rotate(12deg) skewY(4deg); }
60%  { transform: rotate(-9deg) skewY(-3deg); }
80%  { transform: rotate(6deg)  skewY(-2deg); }
100% { transform: rotate(0deg)  skewY(0deg); }
}




@media only screen and (min-width: 992px) and (max-width: 1199px) {

}

@media (max-width: 991px) {

}