* {
    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;
}
main {
    font-family:times;
    font-size:1.5rem;
    grid-column:2 / 8;
    grid-row: 7 / 8;
    text-align:left;
    color:#000;
}
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;
}
#Samantha {
    float:left;
    height:15rem;
    width:auto;
    padding-left:10px; padding-right:15px; padding-bottom:15px;
    border-radius:500px;
}
#abouthero {
    background-image:url(images/abouthero.jpeg);
    height:500px;
    width:auto;
    background-size:cover;
    background-repeat:no-repeat;
    position:relative;
    float:left;
    margin-right:20px; margin-bottom:50px;
}



#form {
    display: grid;
    grid-template-rows:auto;
    grid-template-columns: 200px 1fr;
    gap:0.75rem;
    width:100%;
}
    input, textarea {
        font-size:1rem;
        padding:10px;
        color:#666666;
        background-color:#fafafa;
        border:none;
    }
    input, textarea :focus {
        outline: none;
        background-color: #f0f0f0;
    }
    label {
        padding: 10px;
        text-align: right;
    }
    #mySubmit {
        width:10rem;
        grid-column: 2 / 3;
    }



    .column {
        float: left;
        width: auto;
        height:400px;

      }
      
      .row:after {
        content: "";
        display: table;
        clear: both;
      }








    .sidebar-image-gallery {
        width:500px;
    }
















.container {
    display:flex;
    align-items:center;
    background: #000;
    margin-bottom:100px;
    justify-content:center;
    align-items:center;
    overflow:hidden;
}
.slider {
     width:auto;
     height:600px;
     border-radius:10px;
     margin-bottom:100px;
}
.slides {
    width:800px;
    height:500px;
    border-radius:10px;
    overflow:hidden;
    height:500px;
    width:auto;
    display:flex;
    margin-top:100px;
}
.slide, .slidefirst {
    width:20%;
    transition:2s;
}
.slide img {
    width:auto;
    height:500px;
}
.slides input {
    display:block;
}


.navigation-manual {
    position:absolute;
    width:600px;
    margin-top:0px;
    display:flex;
    justify-content:center;
}
.manual-btn {
    border:2px solid orange;
    padding:0px;
    border-radius:10px;
    cursor:pointer;
    transition:1s;
}
.manual-btn:not(:last-child) {
    margin-right:40px;
}
.manual-btm:hover {
    background:orange;
}




.radio1:checked ~ .first {
    margin-left:0;
}
.radio2:checked ~ .first {
    margin-left:-20%;
}
.radio3:checked ~ .first {
    margin-left:-40%;
}
.radio4:checked ~ .first {
    margin-left:-60%;
}
.radio5:checked ~ .first {
    margin-left:-80%;
}
.radio6:checked ~ .first {
    margin-left:-100%;
}
.radio7:checked ~ .first {
    margin-left:-120%;
}
.radio8:checked ~ .first {
    margin-left:-140%;
}
.radio9:checked ~ .first {
    margin-left:-160%;
}
.radio10:checked ~ .first {
    margin-left:-180%;
}
.radio12:checked ~ .first {
    margin-left:-200%;
}
.radio13:checked ~ .first {
    margin-left:-320%;
}
.radio14:checked ~ .first {
    margin-left:-340%;
}
.radio15:checked ~ .first {
    margin-left:-360%;
}
.radio16:checked ~ .first {
    margin-left:-380%;
}
.radio17:checked ~ .first {
    margin-left:-400%;
}
.radio18:checked ~ .first {
    margin-left:-420%;
}
.radio19:checked ~ .first {
    margin-left:-440%;
}
.radio20:checked ~ .first {
    margin-left:-460%;
}


.navigation-auto {
    position:absolute;
    display:flex;
    width:800px;
    justify-content:center;
    margin-top:460px;
}
.navigation-auto div {
    border:2px solid orange;
    padding:5px;
    border-radius:10px;
    transition:1s;
}
.navigation-auto div:not(:last-child) {
    margin-right:40px;
}

#radio1:checked ~ .navigation-auto .auto-btn1 {
    background:#000;
}
#radio2:checked ~ .navigation-auto .auto-btn2 {
    background:#000;
}
#radio3:checked ~ .navigation-auto .auto-btn3 {
    background:#000;
}
#radio4:checked ~ .navigation-auto .auto-btn4 {
    background:#000;
}
#radio5:checked ~ .navigation-auto .auto-btn5 {
    background:#000;
}
#radio6:checked ~ .navigation-auto .auto-btn6 {
    background:#000;
}
#radio7:checked ~ .navigation-auto .auto-btn7 {
    background:#000;
}
#radio8:checked ~ .navigation-auto .auto-btn8 {
    background:#000;
}
#radio9:checked ~ .navigation-auto .auto-btn9 {
    background:#000;
}
#radio10:checked ~ .navigation-auto .auto-btn10 {
    background:#000;
}
#radio11:checked ~ .navigation-auto .auto-btn11 {
    background:#000;
}
#radio12:checked ~ .navigation-auto .auto-btn12 {
    background:#000;
}
#radio13:checked ~ .navigation-auto .auto-btn13 {
    background:#000;
}
#radio14:checked ~ .navigation-auto .auto-btn14 {
    background:#000;
}
#radio15:checked ~ .navigation-auto .auto-btn15 {
    background:#000;
}
#radio16:checked ~ .navigation-auto .auto-btn16 {
    background:#000;
}
#radio17:checked ~ .navigation-auto .auto-btn17 {
    background:#000;
}
#radio18:checked ~ .navigation-auto .auto-btn18 {
    background:#000;
}
#radio19:checked ~ .navigation-auto .auto-btn19 {
    background:#000;
}
#radio20:checked ~ .navigation-auto .auto-btn20 {
    background:#000;
}












@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;
        }
}