img{
    max-width: 100%;
    height: auto;
}

.btn-warning{
    /* background-color: rgb(246, 165, 0);
    -webkit-box-shadow: inset 0 0 30px rgba(233, 233, 233, 0.5);
    -moz-box-shadow: inset 0 0 30px rgba(233, 233, 233, 0.5);
    box-shadow: inset 0 0 30px rgba(233, 233, 233, 0.5); */
    box-shadow: 0px 1px 0px 0px #fff6af;
	background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
	background-color:#ffec64;
}

/* ---- Hero ---- */

body, html{
    margin:0;
    height:100%
}

.heroimage{
    height: 50%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    border-bottom: 1px solid black;
}

.herologo{
    position: relative;
    left:0%;
    /* bottom:5%; */
    /* display:flex; */
}

.herologo>a>img{
    width: 154px;
    margin-left:10px;
}

.herologo>h2{
    margin-left:5px;
}

.login{
    position: relative;
    top: 40%;
    transform: translateY(-50%);
    /* height:80%; */
    width:250px;
    margin-left:75vw;
    /* top:5%; */
    background-color: rgba(0,0,0,0.5);
    padding:15px;
    color:white;
    border-radius:6px;
}

.login button{
    margin-top:15px;
	background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
	background-color:#ffec64;
}

.login input{
    margin:auto;
    border-radius:6px;
    width:80%;
}

/* ---- Welcome text ---- */

.welcome{
    margin-top: 2vw;
    margin-bottom: 2vw;
    margin-left:20vw;
    margin-right:20vw;
}

.welcome>button{
    position: relative;
    left:80%;
}

/* ---- News ---- */

.news{
    margin-left:20vw;
    margin-right:20vw;
}

/* ---- Information field ---- */

.information{
    width:100%;
    background-color: rgb(212, 212, 212);
    margin:auto;
}

.infocard{
    width: 200px;
    margin:20px;
    padding:10px;
}

.infocard>img{
    height:125px;
}

.infocard>h5{
    height:48px;
}

.modaltext{
    margin-top: 15px;
}

.modallist{
    margin-top:15px;
}

.modalimage1{
	/* max-height: 300px */
	height:80vh; 
	width:100%;
    /* contain: content; */
}
.modalimage1>img{
	max-height:100%;
}

.modalimage2{
    width:203px;
}

.modalimage3{
	/* max-height: 300px */ 
	width:100%;
    /* contain: content; */
}

.modalimage4{
    width:203px;
}

/* ---- Contact field ---- */

.contact{
    margin-top:3vw;
    margin-left:20vw;
    margin-right:20vw;
    margin-bottom:3vw;
}


/* Contact Form */

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea{
    border-radius: 5px;
}

.wpcf7 input[type="submit"]{
    box-shadow: 0px 1px 0px 0px #00a30b;
	background-color:#24872b;
	border-radius:6px;
    border:1px solid #1f7424;
}

.contactlogo{
    width: 52px;
    display:flex;
}

.contactlogo>h2{
    margin-left:5px;
}

.contactmodal{
    background-color: rgba(0,0,0,0.5);
    color:white;
}

/* ---- Footer ---- */

.footer{
    background-color: rgb(83, 83, 83);
    padding: 10px;
    width:100%;
    color:whitesmoke;
    bottom:0;
	margin-top: 5vh;
}

/* ---- News page ---- */

.newsheader{
    margin-top:15px;
}

.newssection{
    margin-left:20vw;
    margin-right:20vw;
    margin-top:3vw;
}

.newsarticle{
    border-bottom: 3px solid black;
    padding:20px;
}

.newsarticle>p{
    clear:left;
}

.newsimage>img{
    width:305px;
    height:auto;
    float:left;
    margin-right: 5px;
}

/* ---- Single post page ---- */

.singlepost{
    margin-top:20px;
    margin-bottom:30px;
    min-height:30vw;
}

.newspageimg>img{
    width:305px;
    height:auto;
}

@media only screen and (max-width:600px){

    .welcome{
        margin-right:5vw;
        margin-left:5vw;
    }

    .contact{
        margin-right:5vw;
        margin-left:5vw;
    }

    .information{
        align-items: center;
    }
    
    .newssection{
        margin-right:5vw;
        margin-left:5vw;
    }

    .news{
        margin-left:5vw;
        margin-right:5vw;
    }

    .login{
        display:none;
    }

    .modalimage{
        width:80vw;
    }

    .newsimage>img{
        margin-bottom:10px;
    }
}