* {
    box-sizing:border-box;
}
#wrapper {
    display:grid;
    grid-auto-rows: minmax(0px, auto);
    grid-template-columns: repeat(1, minmax(0px, 1fr)) repeat(6, minmax(0px, 175px)) repeat(1, minmax(0px, 1fr))
}
header {
    grid-row: 1 / 3;
    grid-column:2 / 8;
}
    h1 {
        font-family:MissRobertson Pro;
        color:#000;
        font-size: 6rem;
        text-align:center;
        margin-bottom:-60px;
        margin-top:30px;
    }
    h2 {
        font-family:fira sans extralight;
        color:#000;
        font-size: 3rem;
        text-align:center;
    }
    h3 {
        font-family:hatch;
        text-align:center;
        color:#fff;
        background-color:#000;
        background-size:contain;
        font-size:2rem;
        padding:10px;
    }
nav {
    background-color:#000;
    padding:0.5rem;
    grid-auto-rows:auto;
    font-family:fira sans extralight;
    grid-row: 4 / 5;
    grid-column:1 / 9;
}
nav a {
    color:#fff;
    text-decoration:none;
    display:block;
    text-align:center;
}
nav ul {
    list-style-type:none;
    display:flex;
    flex-flow:nowrap;
}
nav ul li {
    position:relative;
    width:100%;
}
nav ul li ul{
    display:none;
    position:absolute;
}
nav ul li:hover ul {
    display:block;
    background-color:rgba(0, 0, 0, 0.4);
    padding:50px;
    text-align:center;
}
a:hover {
    border-style:hidden;
    border-color:#fff;
}
a:active {
    color:slategrey;
    transition:.3s;
}

body {
    text-align:left;
}
main {
    font-family:times;
    font-size:1.5rem;
    grid-column:2 / 8;
    grid-row: 7 / 8;
}
footer {
    text-align:center;
    color:#fff;
    background-color:#000;
    grid-column:1 / 9;
    grid-row: 9;
}
#homehero {
    background-image:url(images/twins.jpeg);
    height:400px;
    background-size:cover;
    background-position:20% 50%;
    background-repeat:no-repeat;
    width:100%;
    background-attachment:fixed;
    grid-column:1 / 9;
    grid-row: 5 / 6;
}
#coupleshero {
    background-image:url(images/coupleshero.jpeg);
    height:400px;
    background-size:cover;
    background-repeat:no-repeat;
    width:100%;
    background-attachment:fixed;
}
#Samantha {
    float:left;
    height:15rem;
    width:auto;
    padding-left:10px; padding-right:15px; padding-bottom:15px;
    border-radius:500px;
}
#one {
    height:20rem;
    width:auto;
}
#two {
    height:20rem;
    width:auto;
}
#three {
    height:20rem;
    width:auto;
}
#four {
    height:20rem;
    width:auto;
}
#five {
    height:20rem;
    width:auto;
}
#six {
    height:20rem;
    width:auto;
}#seven {
    height:20rem;
    width:auto;
}
#eight {
    height:20rem;
    width:auto;
}
#nine {
    height:20rem;
    width:auto;
}














@media only screen and (max-width:992px) {
    body {
        padding:20px;
    }
    #wrapper {
        display:grid;
        width:768px;
        grid-auto-rows:minmax(0px, auto);
        grid-template-columns: repeat(1, minmax(0px, 1fr)) repeat(6, minmax(0px, 150px)) repeat(1, minmax(0px, 1fr))
    }
}

@media only screen and (max-width:991px) {
    #wrapper {
        display:grid;
        width:100%;
        grid-auto-rows: minmax (0px, auto);
        grid-template-columns: repeat(1, minmax(0ps, 1fr)) repeat(5, minmax(0ps, 150px)) repeat(1, minmax(0px, 1fr))
    }
}

@media only screen and (max-width:780px) {
    header {
        grid-row: 1 / 3;
        grid-column:2 / 8;
    }
        h1 {
            font-family:MissRobertson Pro;
            color:#000;
            font-size: 5rem;
            text-align:center;
            margin-bottom:-60px;
            margin-top:30px;
        }
        h2 {
            font-family:fira sans extralight;
            color:#000;
            font-size: 2rem;
            text-align:center;
        }
        #homehero {
            background-image:url(images/twins.jpeg);
            height:250px;
            background-size:cover;
            background-repeat:no-repeat;
            width:100%;
            background-attachment:fixed;
            grid-column:1 / 9;
            grid-row: 5 / 6;
        }
}


@media only screen and (max-width:768px) {
    #wrapper {
        display:grid;
        width:100%;
        grid-auto-rows:minmax (0px, auto);
        grid-template-columns: repeat(1, minmax(0px, 1fr)) repeat(6, minmax(0px, 150px)) repeat(1, minmax(0px, 1fr))
    }
    #homehero {
        background-image:url(images/twins.jpeg);
        height:250px;
        background-size:cover;
        background-repeat:no-repeat;
        width:100%;
        background-attachment:fixed;
        grid-column:1 / 9;
        grid-row: 5 / 6;
    }
} 

@media only screen and (max-width:660px) {
    header {
        grid-row: 1 / 3;
        grid-column:2 / 8;
    }
        h1 {
            font-family:MissRobertson Pro;
            color:#000;
            font-size: 4rem;
            text-align:center;
            margin-bottom:-20px;
            margin-top:30px;
        }
        h2 {
            font-family:fira sans extralight;
            color:#000;
            font-size: 2rem;
            text-align:center;
        }
        h3 {
            font-family:hatch;
            text-align:center;
            color:#fff;
            background-color:#000;
            background-size:contain;
            font-size:2rem;
            padding:10px;
        }
        #homehero {
            background-image:url(images/twins.jpeg);
            height:250px;
            background-size:cover;
            background-repeat:no-repeat;
            width:100%;
            background-attachment:fixed;
            grid-column:1 / 9;
            grid-row: 5 / 6;
        }
}