/*
############################################################

common rules

############################################################
*/

body{
margin: 0;
padding: 0;
background-color: #fff;
margin: 0 56px;
}

body, a, p, div, li, span{
font-family: "Open Sans";
}

a, a:visited{
color: #06d;
}

p a:hover{
color: #f75d00;
}

main > p:first-of-type, main > *:first-of-type > p:first-of-type{
margin-top: -8px;
}

h1{
text-align: center;
font-weight: 600;
padding: 0;
color: #000;
margin: 30px auto;
font-size: 28px;
}

p{
font-size: 17px;
line-height: 32px;
}

img{
max-width: 100%;
}

footer, footer *, header, header *, main, main *, section, section *{
box-sizing: border-box;
max-width: 100%;
}

/*
############################################################
header

############################################################
*/

header{
text-align: center;
padding: 0;
margin: 30px auto;
display: table;
box-sizing: border-box;
}

header, header *{
display: block;
}

header img{
display: block;
}

nav{
display: flex;
justify-content: center;
padding: 0;
align-items: center;
margin: 0 auto;
}

nav, .logo2, .profile-picture, #contact div.formcarry-block, #contact section.formcarry-container{
width: 518px;
max-width: 100%;
}

nav > div{
display: flex;
width: 100%;
}

nav > div:nth-of-type(1) > a:nth-of-type(2), nav > div:nth-of-type(2) > a:nth-of-type(1){
flex-grow: 1;
}

nav a{
text-decoration: none;
color: #000 !important;
margin: 0;
padding: 0;
font-size: 20px;
font-weight: 500;
border-radius: 3px;
}

nav a:hover{
color: #06d !important;
}

.logo1{
width: 180px;
display: block;
}

.logo2{
display: block;
margin: 12px auto 0px auto;
max-width: 100%;
box-sizing: border-box;
}

.logo2 img{
box-sizing: border-box;
max-width: 100%;
width: 100%;
}

/*
############################################################

footer

############################################################
*/

footer{;
margin: 0 auto;
width: 1280px;
}

.social-media-buttons{
margin: 12px auto;
width: 1280px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}

.social-media-buttons img{
width: 64px;
max-width: 100%;
margin: 0 4px;
}

.social-media-buttons a img{
transition: transform 0.3s, filter 0.3s;
}

.social-media-buttons a:hover img{
filter: brightness(70%);
transform: rotate(7deg);
}

.social-media-buttons{
width: 72px;
display: block;
margin: 30px auto;
box-sizing: border-box;
}

.social-media-buttons img{
display: block;
width: 100%;
margin: 12px 0;
box-sizing: border-box;
}

.social-media-buttons a:last-of-type img{
transform: rotate(90deg);
}

.social-media-buttons a:last-of-type img:hover{
transform: rotate(97deg);
}

.list-this-stuff{
text-align: center;
padding: 30px 0 0 0;
box-sizing: border-box;
display: flex;
justify-content: flex-start;
gap: 14px;
max-width: 100%;
flex-wrap: wrap;
}

.list-this-stuff > *{
line-height: 16px;
margin-bottom: 0;
padding-bottom: 0;
}

.list-this-stuff span{
font-weight: 700;
text-decoration: underline;
text-decoration-thickness: 3px;
text-underline-offset: 2px;
}

.list-this-stuff a{
margin: 0px;
color: #333;
text-decoration: none;
}

.list-this-stuff a:hover{
color: #06d;
}

.link-to-gallery{
text-align: center;
margin: 0px auto;
}

.link-to-gallery a{
text-decoration: none;
background-color: #06d;
color: #fff;
padding: 18px;
transition: 200ms;
display: inline-block;
}

.link-to-gallery span{
text-transform: uppercase;
text-decoration: underline;
text-decoration-thickness: 3px;
text-underline-offset: 3px;
font-weight: bold;
}

main{
margin: 0px auto;
max-width: 100%;
}

section{
margin: 20px auto;
width: 1280px;
max-width: 100%;
}

#gallery{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
grid-auto-rows: 280px;
grid-gap: 10px;
padding: 0px;
border-top: 0px solid #000;
margin-top: 10px;
margin-left: 0;
margin-right: 0;
}

#gallery:not(:last-of-type){
margin-bottom: 30px;
}

#gallery img{
width: 100%;
height: 100%;
object-fit: cover;
grid-row-end: span 1;
transition: 200ms;
}

#gallery img:hover{
cursor: pointer;
filter: brightness(80%);
}

#gallery img.vertical{
grid-row-end: span 2;
}

#gallery img.horizontal{
grid-column-end: span 2;
}

.image-container{
position: relative;
display: block;
margin-bottom: 0px;
}

.image-container:not(.uuu) .image-desc{
position: absolute;
bottom: 0px;
display: table;
left: 0;
right: 0;
margin: 0 auto;
padding: 4px 6px;
}

.image-desc{
text-align: center;
border: 0;
background-color: rgba(0, 0, 0, .55);
font-size: 12px;
color: #fff;
margin: 0 auto;
padding: 6px;
}

.uuu{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #000 !important;
font-size: 18px;
font-weight: bold;
text-align: center;
cursor: pointer;
border: 1px solid #0066dd;
text-decoration: none;
background-color: #bbdffd;
font-weight: 400;
line-height: 30px;
padding: 24px;
}

.uuu:hover{
background-color: #a9d7fd;
border: 1px solid #0057bd;
}

.uuu b{
display: inline-block;
}

.uuu::after{
content: '';
display: block;
width: 88px;
height: 64px;
background-image: url('/iii/right-arrow.png');
background-size: contain;
background-repeat: no-repeat;
margin-top: 16px;
margin-left: auto;
margin-right: auto;
}

.h3-gallery-title{
background-color: #f7f7f7;
border: 1px solid #d7d7d7;
margin: 0;
padding: 8px;
text-align: center;
font-weight: 300;
font-size: 28px;
}

.h3-link{
text-decoration: none;
}

.profile-picture{
display: block;
margin: 30px auto;
}