// Container Page
#container-pg

    #container

        h1
            text-align: center
            margin-bottom: 20px

        .row

            &:first-of-type

                .container
                    padding-bottom: 0px

        .container-example
            background-color: #bbbbbb
            transition: all 0.3s ease-in-out

            &:hover
                background-color: #ababab
                cursor: help

            .container
                background-color: #dedede
                transition: all 0.3s ease-in-out

                &:hover
                    background-color: #cbcbcb
                    cursor: help

// Grid Page
#grid-pg

    #grid

        h1
            text-align: center
            margin-bottom: 20px

        .grid-option
            margin-bottom: 50px

            .row
                margin: 10px 0px

                &:first-of-type
                    margin-top: 0px

                &:last-of-type
                    margin-bottom: 0px

                .col
                    background-color: #dedede
                    text-transform: uppercase
                    font-weight: 900
                    font-size: 7pt
                    letter-spacing: 2pt
                    text-align: center
                    justify-content: center
                    padding: 10px 0px
                    transition: all 0.3s ease-in-out

                    &:hover
                        background-color: #bbbbbb
                        cursor: help

#nav-pg

    .page-container
        transition: margin-left 0.3s ease-in-out, margin-right 0.3s ease-in-out

    .nav

        .mob-nav
            display: block

#form-pg

    form
        width: 300px

        input,textarea, label
            margin-bottom: 20px

#animations-pg
    height: 5000px

    #animations

        .boxes
            margin-bottom: 20px

        .box
            background-color: grey
            height: 100px

        p
            margin-bottom: 50px

            &:last-of-type
                margin-bottom: 0px

#hero-pg
    height: 9999px

    #hero

        .hero

            &:nth-of-type(1)
                background-image: url('http://cdn29.us1.fansshare.com/pictures/tumblrphotography/tumblr-static-tumblrbg-beautiful-756022492.jpg')
                margin-bottom: 500px

            &:nth-of-type(2)
                background-image: url('https://www.clipartsgram.com/image/278747608-beautiful-city-wallpaper-hd-background-tumblr-wallpaper-photography-tumblr-314777781.jpg')

#slider-pg

    .slider

        .slide

            &:nth-of-type(1)
                background-color: red
            &:nth-of-type(2)
                background-color: green
            &:nth-of-type(3)
                background-color: blue

#lightbox-pg
    height: 200vh

    #lightbox

        .lightbox

            &>img
                height: 100px
                margin: 10px

                &:hover
                    opacity: 0.7

            .modal

                .content

                    .active-img

                        .caption
                            color: white

                        .slider-control
                            color: white

                            &:hover
                                opacity: 0.75

#overlay-pg

    .img
        background-image: url("http://www.placecage.com/300/300")
        height: 300px
        width: 300px

        &.circle
            border-radius: 100%

#responsive-media-pg

    .responsive-media
        margin-bottom: 10px

#table-pg

    .table
        margin-bottom: 50px

        &:last-of-type
            margin-bottom: 0px

#smooth-scrolling-pg

    p
        margin-bottom: 100px