* {
    box-sizing:border-box;
}

body {
    margin:0px;
    padding:0px;
    font-size:100%;
    font-family:"Palatino Linotype", palatino, georgia, serif;
}

h1, p, hr {
    margin:0;
    padding:0;
}

h1 {
    font-size:3em; 
    font-weight: bold;
}

img {
    position:absolute;
    max-height:50vh;
    margin:auto;
    top:0;
    right:0;
    bottom:0;
    left:0;
}

section {
    position:relative;
    overflow:hidden;
    float:left;
    width:100%;
    height:auto;
}

div.home {
    width:100%;
    height:40vh;
    background:rgb(0,0,0);
}

section a {
    display:block;
    width:100%;
    height:20vh;
    -webkit-transition: filter 0.5s;
    transition:filter 0.5s;
}

section a:link {
    text-decoration:none;
    color:rgb(60,30,60);
    text-shadow:2px 1px rgb(256,256,256);
}

section a:hover {
    filter:invert(100%);
}

div.label1 {
    position:absolute;
    bottom:10%;
    left:15%;
    width:70%;
    text-align:left;
}

.artscience {
    background:rgb(255,55,115) url("images/main/scienceArt.jpg") no-repeat center;
    background-size:cover;
}

.art {
    background:rgb(255,150,30) url("images/main/art.jpg") no-repeat center;
    background-size:cover;
}

.science {
    background:rgb(75,230,160) url("images/main/science.jpg") no-repeat center;
    background-size:cover;
}

.members {
    background:rgb(255,225,70) url("images/main/members.jpg") no-repeat center;
    background-size:cover;
}

.about {
    background:rgb(180,255,60) url("images/main/about.jpg") no-repeat center;
    background-size:cover;
}



/* FLEX ====================================================================*/
@media (min-width:1200px) {
    section {
	width:33%;/*The width is 100%, when the viewport is 800px or smaller*/
    }

    h1 {
	font-size:4vw; /*2.5em; */
    }

    div.home {
	height:50vh;
    }

    section a {
	height:50vh;
    }	
}