@charset "utf-8";
/* CSS Document*/
*{box-sizing: border-box;}
img{max-width: 100%; height: 100%;}
/* #CE5D3F */
/* #F29F05 */
/* #F5B342 */
/* #F26D3D */
/* #BF5A5A */

/* Typography */
h1,h2,h3,h4,h5 {font-family: "Roboto", sans-serif;}


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

header {float: left; width: 100%; height: auto; background-color:#F29F05;}
footer {float: left; width: 100%; height: auto; background-color:#CE5D3F;}
body {padding: 0; margin: 0; background-color: #BF5A5A;}

ul {list-style: none;}
nav li {display: inline-block; margin: 0 10px 0 10px; background-color:#F5B342; padding: 15px;}
nav li:hover {background-color: #F26D3D;}

#attractions_ {float: right; width: 50%; height: 100%;}
#site-logo {float: left; width: 50%; height: 30%;}
#social {float: right; width: 200px; height: 35px;}
.social_icons {float: left; width: 50px; height: 50px;}
#site-logo:hover {opacity: 0%;}

button {min-width: 80px; border: none; padding: 10px; border-radius: 50px; background-color:#F29F05}
button a {color: black;}

.full-width {float: left; width: 100%;}
.half-width {float: left; width: 46%; margin: 2%; padding: 5% 3%;}
.third-width {float: left; width: 29.33%; margin: 2%; padding: 5% 3%;}
.quarter-width {float: left; width: 21%; margin: 2%; padding: 5% 3%;}

/* Layout */
#image2 {width: 50%; height: 300px; background-image: url("../assets/placeholder images/image-placeholder_square.png"); background-position: center; background-repeat: no-repeat; background-size: cover;}
body {background-color: #F26D3D;}
/* Breakpoints */
@media only screen and (max-width: 1200px) {

}
@media only screen and (max-width: 1080px) {
    .quarter-width {float: left; width: 46%;}


}
@media only screen and (max-width: 576px) {
    .quarter-width {float: left; width: 96;}
    .half-width {float: left; width: 96%;}
    .third-width {float: left; width: 96%;}
}