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

body {
    font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* full-width size image */
.banner {
    text-align: center;
    width: 100%;
    height: 55%;
    color:#010101;
    box-sizing: border-box;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    display: flex;
    flex-direction: vertical;
    justify-content: center;
    margin: auto;
    vertical-align: middle;
}

.first {
    background-image: url("assets/img/dog4.jpg");

}

.second {
    background-image: url("assets/img/dog8.jpg");
}

.third {
    background-image: url("assets/img/dog5.jpg")
}

.fourth {
    background-image: url("assets/img/dog10.jpg");
}

.fifth {
    background-image: url("assets/img/dog11.jpg");
}


.wrapper {
    margin: auto;
    width: 100%;
    box-sizing: border-box;
}

.wrapper-icon img {
    width: 40%;
}

.wrapper img {
    width: 100%;
}

.cover h1 {
    font-size: 62px;
}

h1 {
    font-size: 5vw;
}

h2 {
    font-size: 48px;
    margin-top: 0px;
}

h3 {
    font-size: 28px;
}

header p {
    font-size: 1.1rem;
}
footer p {
    font-size: 0.9rem;
}

/* buttons */
.button {
    background-color: #f6ad7b;
    border: none;
    color: #ffffff;
    padding: 20px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1rem;
    margin: auto;
    cursor: pointer;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: block;
    text-align: center;
    width: 220px;
    border-radius: 30px;
}
.button:hover {
    background-color: #f5914e;
    transition: 0.3s ease 0s, left 0.3s ease 0s;
}

.button-small {
    background-color: #c47845;
    border: none;
    color: #ffffff;
    padding: 15px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1rem;
    margin: auto;
    cursor: pointer;
    display: block;
    text-align: center;
    width: 50%;
    border-radius: 30px;
}
.button-small-reset {
    background-color: #c43345;
    border: none;
    color: #ffffff;
    padding: 15px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1rem;
    margin: auto;
    cursor: pointer;
    /* letter-spacing: 1px; */
    /* text-transform: uppercase; */
    display: block;
    text-align: center;
    width: 30%;
    border-radius: 30px;
}

.button-small:hover {
    background-color: #965529;
}

.button-small-reset:hover {
    background-color: #c63479;
}

.button-smallest {
    background-color: #c46845;
    border: none;
    color: #ffffff;
    padding: 10px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1rem;
    margin: auto;
    cursor: pointer;
    display: block;
    text-align: center;
    width: 50%;
    border-radius: 30px;
}

.button-smallest:hover {
    background-color: #965540;
}

.left {
    margin-left: 0;
}

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 50px 20px;
    font-size: 12px;
}

footer a {
    color: #ffffff;
    text-decoration: none;
}

footer a:hover {
    color: #FAE0B7;
    text-decoration: underline;
}

.container {
    padding: 80px 80px 80px 80px;
    text-align: center;
    width:100%;
    box-sizing: border-box;
}

.cover {
    height: 100%;
    padding-top: 100px;
}

/* background and font colors */
.white {
    background-color:#f2eee5;
    color: rgb(14, 10, 8);
}

.orange {
    background-color:#f6ad7b;
    color: #fff;
}

.salmon {
    background-color: #FAE0B7;
}

.brown {
    background-color: #CAA184;
}

/* layout */
.row {
    box-sizing: border-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    box-sizing: border-box;
}

.column-two {
    flex:0 0 44%;
    text-align: left;
    padding: 2%;
    box-sizing: border-box;
}

.column-three {
    flex:0 0 33.333333%;
}

.column-four {
    flex:0 0 23%;
    margin: 1%
}

.center {
    text-align: center;
}

.column-two img {
    margin: 0;
    width: 120%;
}

/* navigation bar */
.navbar {
    overflow: hidden;
    background-color: #FAE0B7;
    width: 100%;
    padding: 20px 0;
    text-align: center;
    z-index: 1;
}

.navbar a {
    text-align: center;
    color: #c47845;
    text-decoration: none;
    padding: 20px;
    padding-top: 0px;
    padding-bottom: 0px;
    transition: 0.3s;
}

.navbar a:hover {
    color: #965529;
}

.navbar #active {
    color: #965529;
}

.navbar .siteName {
    text-align: left;
    color: #965529;
    font-weight: 900;
    font-size: 20px;
}

.navbar a.icon {
    display: none;
}

.image-circle {
    clip-path: circle(50% at center);
}

/* responsive design */
@media only screen and (max-width: 700px) {
    /* mobile */
    .container {padding: 10%;}
    .column-two {flex: 0 0 100%; text-align: center;}
    .column-two img {width: 100%; }
    .column-two .graphics {float: left;}
    .column-three {flex: 0 0 100%;}
    .column-four {flex: 0 0 100%; }
    .column-four img {width: 80%;}
    .cover {height: auto;}
    .left {margin: auto;}
    .wrapper-icon img {width: 40%;}
    .navbar .siteName {float: left; display: block;}
    .navbar .a {float: left; display: block;}
    .navbar a:not(:first-child) {display:none;}
    .navbar a.icon {float: right; display: block;}
    .navbar.responsive {position: relative; background-color: #333;}
    .navbar.responsive a.item {float: none; display: block; text-align: left; padding-bottom: 30px;}
    .navbar.responsive a.icon {float: right; display: block; position: absolute; right: 0; top: 20px;}
}

@media only screen and (min-width: 601px) and (max-width: 960px) {
    /* tablet */
    .container {padding: 10%;}
    .column-two {flex: 0 0 100%; text-align: center;}
    .column-two img {width: 100%; }
    .column-two .graphics {float: left;}
    .column-three {flex: 0 0 100%;}
    .column-four {flex: 0 0 100%; }
    .column-four img {width: 40%;}
    .wrapper-icon img {width: 25%;}
    .cover {height: auto;}
    .left {margin: auto;}
}

@media only screen and (min-width: 961px) {
    /* desktop */
}