@charset "utf-8";
/* CSS Document */

/*
#75A3BF
#c1e891
#F24405
#BF372A
#dfd5cb

#dce4d1 -page background
#BF372A -header and footer
#75A3BF -infobox background


*/

*{box-sizing: border-box;}
img{max-width: 100%; height: auto;}


/* typography */

h1,h2,h3,h4,h5 {font-family: "Epunda Sans", serif;}
p {font-family: "Open Sans", sans-serif;}
nav {font-family: "Epunda Sans", serif;}

#main-content {float: left; width: 100%;}

#intro {background-color: #75A3BF; padding: 2%;}

section {float: left; width: 100%;}

/* navigation styles */

#navbar {float: right;}
nav ul {list-style: none;}
nav li {display: inline-block; margin: 0 10px; padding: 15px; border-radius: 80px; background-color: #CBE3EF;}
nav li:hover {background-color: #75A3BF;}


/* grid styles */

.full-width {float: left; width: 92%;}

.half-width-column {float: left; width: 46%; margin: 2%; padding: 1%;}
.third-width-column {float: left; width: 29.33%; margin: 2%; padding: 1%;}
.quarter-width-column {float: left; width: 21%; margin: 2%; padding: 1%;}

/* layout */

#image2 {width: 50%; height: 300px; background-image:url("../assets/images/image-placeholder_square.png"); background-position: center;
background-repeat: no-repeat; background-size: cover;}

body {padding: 0; margin: 0; background-color: #dce4d1;}

#title {background-color: #BF372A; float: right;}

#logo {float: left;width: 15%; height: auto;}

#contact {float: left;}

#social {float: right;}

#legal {float: left;}

.page-title {padding-left: 2%;}

.info-button {margin-left: 40%; margin-top: 5%;}

header {float: left; width: 100%; height: auto; background-color: #BF372A;}
footer {float: left; width: 100%; height: auto; background-color: #BF372A;}
button {min-width: 80px; border: none; padding: 10px; border-radius: 50px; background-color: #75A3BF;}
button a {color: #fff}

/* -----------------| Breakpoints |----------------- */

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

}
/* large */
@media only screen and (max-width: 1080px) {
    .quarter-width-column {width: 46%;}
}
/* x-small */
@media only screen and (max-width: 576px) {
    .half-width-column {width: 96%}
    .third-width-column {width: 96%}
    .quarter-width-column {width: 96%;}
}