.header
{
    padding-top:50px;
    padding-bottom:50px;
    display: flex;
    justify-content:flex-end;
}

main
{

    @media(min-width:980px)
    {
        display: flex;
        #photo-list
        {
            width: 70%;
            order:0;

        }
        #content
        {
            width: 30%;
            padding-left: 40px;
            order:1;
        }
    }
    #content
    {
        h1
        {
            color:$main-color;
            padding-bottom:20px;
            margin-bottom:20px;
            border-bottom:1px dashed #ccc;
            text-shadow: 0 0 2px $main-color;
            letter-spacing: 2px;
            font-size: 1.5em;
        }
        #description
        {
            position: relative;

            p
            {

                position: absolute;
                top:0px;
                left: 0px;

                line-height: 150%;
                letter-spacing: 2px;
                font-weight: 100;
                font-size:14px;
                opacity: 0;
                transition-duration:.5s;
                &.active
                {
                    position: relative;
                    display: block;
                    opacity: 1;

                }
            }
        }

    }
    #photo-list
    {
        overflow: hidden;
        .slider-body
        {
            position: relative;

            .slider
            {
                ul
                {
                    display: flex;
                    li
                    {
                        min-width: 100%;
                        picture
                        {
                            display: block;
                            position: relative;
                            width: 100%;
                            overflow: hidden;
                            padding-top: 64.6%;
                            img
                            {
                                display: block;
                                position: absolute;
                                width: 100%;
                                top:0px;
                                left:0px;
                            }
                        }
                    }
                }
            }

            a[data-slider]
            {
                position: absolute;
                width: 50px;
                height: 50px;
                text-align: center;
                background: rgba(0,0,0,.5);
                color:#fff;
                font-size:20px;
                line-height: 50px;
                z-index:2;
                top:calc(50% - 25px);
                transition-duration:.2s;
                &[data-slider=left]
                {
                    left:-50px;
                }
                &[data-slider=right]
                {
                    right:-50px;
                }
                &:hover
                {
                    background: #000;
                }
            }
            &:hover
            {
                a[data-slider]
                {
                    &[data-slider=left]
                    {
                        left:0;
                    }
                    &[data-slider=right]
                    {
                        right:0;
                    }
                }
            }
        }
        .slider-list
        {
            display: flex;
            justify-content:center;
            li
            {
                padding:10px 0px;
                a
                {
                    border:3px solid #fff;
                    width: 20px;
                    height: 20px;
                    background: rgba(0,0,0,.5);
                    border-radius: 100%;
                    display: block;
                    transition-duration:.5s;
                    &:hover
                    {
                        background: #000;
                    }
                }
                &.active
                {
                    a
                    {
                        background: #000;
                    }
                }
            }
        }

    }

}