@charset "utf-8";

* {box-sizing: border-box;} /*star adds rule to everything in file*/
img{max-width:100%; height: auto;}

.galleryimg{
    width:70%;
}

#pagetitle{
    background-color: yellowgreen;
    padding: 4px;
    margin-top: 10px;
}

#site-logo{float: left; width: 200px; height:120px;}
#social-icons{float: left; width: 100px; height:50px;}

/*navigation*/
body{background-color: powderblue;}
#navigation{background-color: beige; padding: 7px;}
nav ul{list-style-type: none;}
nav li {display: inline-block; margin: 0 6px 0 6px; background-color: #839427; padding: 14px; border-radius: 2px;}
a{color: #363409; text-decoration: none;}

/* a:hover{} */

/*typography*/
*{
    font-family: "Josefin Sans", sans-serif;
    font-weight: 400;
    font-style: normal;
}

/*layout*/
    .one-col {float: left; width: 96%; height: auto; padding: 5px; margin: 2%; border: solid;}
    .two-col {float: left; width: 46%; height: auto; padding: 5px; margin: 2%; background-color: beige; text-align: center;} /*change width % to match margin*/
    .three-col {float: left; width: 29.33%; height: auto; padding: 5px; margin: 2%; background-color: #A9B1B7;}
    .four-col {float: left; width: 21%; height: auto; padding: 5px; margin: 2%;}

/*media query*/

/* x-large */
@media only screen and (max-width: 1200px) {
}

/* large */
@media only screen and (max-width: 1080px) {
    .four-col { width: 50%;}    
}

/* x-small */
@media only screen and (max-width: 576px) {
    .two-col {width: 100%;}
    .three-col {width: 100%;}
    .four-col { width: 100%;}
}

/*30.09.2026*/

.box1, .box3{
    border-radius: 5px;
    border-style: solid;
    padding:10px;
    margin: 10px;
    display: flex;
    background-color: beige;
    margin-bottom: 20px;
    margin-top: 20px;
}

.box1 img, .box3 img{
    width: 300px; 
    height: auto;
    float: left;
}

.box2{
    border-radius: 5px;
    border-style: solid;
    padding:10px;
    margin: 10px;
    display: block;
    overflow: auto;
    background-color: beige;
    margin-bottom: 20px;
}

.box2 img{
    width: 300px; 
    height: auto;
    float: right;
}

.boxtext{
    flex:1;
}

.two-col img{
    width: 470px;
    height: auto;
    padding: 10px;
}

.contact_title{
    background-color:rgb(54, 156, 54);
    padding: 10px;
}

.caption{
    background-color: beige;
    float:right;
    width: 46%; 
    height: auto; 
    padding: 5px; 
    margin: 2%;
    margin-top: 5px;
    text-align: center;
}

.day_odd{
    background-color:rgb(58, 130, 139);
    padding: 3px;
}

.day_even{
    background-color:beige;
    padding: 3px;
}

footer{
    width: 100%;
    display: inline-block;
    background-color: yellowgreen;
}