.row
{
    margin-right:auto !important;
    margin-left:auto !important;
}

#trails-header-container
{
    margin-bottom:10px;
}

#trails-header-container h1
{
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
}

#trail-details-container
{
    margin-bottom:5px;
}

#trail-details-wrapper
{
    background-color:#c9c9c9;
    display:inline-block;
    width:100%;
    padding:5px;
    border-top:2px solid black;
    border-bottom:2px solid black;
}

.detail-wrapper
{
    font-size:18px;
}

.trail-header-bar
{
    border-radius: 8px;
    border-color: #090 #090 #090;
    color: #fff;
    box-shadow: 0 1px 0 rgba(0,0,0,.1),inset 0 1px 0 #8a9cc2;
    font-size: 18px;
    font-weight: bold;
    padding:5px;
    margin-bottom:10px;
}

.trail-header-bar > h3
{
    margin:0;
}

.trail-header-bar:hover
{
    cursor:pointer;
}

.hard
{
    color:red;
}

.open-close-button
{
    position:absolute;
    top:10px;
    right:25px;
}

.collapse
{
    margin-bottom:10px;
}

.collapse-container
{
    width:100%;
}

.in.collapse-container
{
    display:inline-block;
}

#trail-description
{
    padding:0 10px;
}

#trail-uses
{
    margin-bottom:5px;
}

#find-on-map
{
    padding:4px 8px;
}

#find-on-map:hover,
#find-on-map:focus,
#find-on-map:active
{
    color:white;
    text-decoration:none;
}

#nearby-trails
{
    max-height:300px;
    overflow-y:scroll;
}

#nearby-trails-container
{
    text-align:left;
}

.nearby-trails-header h4
{
     font-weight:bold;
     margin:0;
     color:white;
     padding:3px 5px;
}

.nearby-trail-link 
{
    color: black;
    text-decoration: none;
    display: block;
}

.nearby-trail-link:hover,
.nearby-trail-link:active,
.nearby-trail-link:focus
{
    text-decoration:none;
    color:#1cb0b5;
}

.nearby-organization
{
    text-decoration:none;
    color:black;
}

.nearby-organization:hover,
.nearby-organization:active,
.nearby-organization:focus
{
    text-decoration:none;
    color:#1cb0b5;
}

#trail-search
{
    margin-bottom:15px;
}

.trail-use-icon-wrapper
{
    width:25px;
    height:25px;
    border-radius:5px;
    background-color:black;
    display:inline-block;
    position:relative;
}

/************************** Photos **************************/
.trail-photos-wrapper
{
    text-align:center;
    overflow-y:auto;
    max-height:300px;
    display:inline-block;
    width:100%;
}

.trail-image-wrapper
{
    width:19%;
    margin-bottom:15px;
    padding:0 15px;
    display:inline-block;
    position:relative;
}

.photo-thumbnail
{
    max-width:100%;
}

#photo-close-button
{
    position:absolute;
    right:30px;
    top:25px;
    color:white;
    font-weight:bold;
    font-size:30px;
    text-shadow:black 0px 0px 2px;
}

#photo-close-button:hover
{
    cursor:pointer;
    color:red;
}

.photo-thumbnail:hover
{
    cursor:pointer;
}

#photo-popup-container 
{
    max-width: 1200px;
    max-height: 900px;
    background-color: #CCCC99;
    margin: auto;
    text-align: center;
    position: fixed;
    padding: 15px;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

#previous
{
    position:absolute;
    top:15px;
    left:15px;
    width:10%;
    z-index:100;
    height: -webkit-calc(100% - 30px);
    height: -moz-calc(100% - 30px);
    height:calc(100% - 30px);
}

#previous:hover 
{
    background: -webkit-linear-gradient(90deg, rgba(0,0,0,1), rgba(0,0,0,0));
    background: -moz-linear-gradient(90deg, rgba(0,0,0,1), rgba(0,0,0,0));
    background: linear-gradient(90deg, rgba(0,0,0,1), rgba(0,0,0,0));
    cursor: pointer;
}

#next
{
    position:absolute;
    top:15px;
    right:15px;
    width:10%;
    text-align:right;
    height: -webkit-calc(100% - 30px);
    height: -moz-calc(100% - 30px);
    height:calc(100% - 30px);
}

#next:hover 
{
    background: -webkit-linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,1));
    background: -moz-linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,1));
    background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,1));
    cursor: pointer;
}

.photo-chevron-right
{
    position:absolute;
    right:15px;
    top: -webkit-calc(50% - 7.5px);
    top: -moz-calc(50% - 7.5px);
    top:calc(50% - 7.5px);
}

.photo-chevron-left
{
    position:absolute;
    left:15px;
    top: -webkit-calc(50% - 7.5px);
    top: -moz-calc(50% - 7.5px);
    top:calc(50% - 7.5px);
    z-index:1000
}

.photo-chevron-right,
.photo-chevron-left
{
    color:white;
    font-size:30px;
    text-shadow:black 0px 0px 2px;
}

.single-photo
{
    max-height:850px;
}

#toggle-description
{
    color:white;
}

#description-container:hover
{
    cursor:pointer;
}

#description-container
{
    position:absolute;
    left:0;
    width:100%;
    background-color:rgba(0, 0, 0, .6);
    transition:all .5s ease-out;
    transition:all .5s ease-in;
}

#description-container.closed
{
    top: -webkit-calc(100% - 20px) !important;
    top: -moz-calc(100% -20px) !important;
    top:calc(100% - 20px) !important;
}

#description
{
    color:white;
}

#full-size-photo
{
    position:relative;
    margin: 0 auto;
    overflow:hidden;
}

#upload-photo-button
{
    padding: 4px 8px;
}

#upload-photo-button:hover
{
    cursor:pointer;
}

.pending-photo 
{
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(+50%, -50%);
    top: 50%;
    right: 50%;
    color: white;
    font-weight: bold;
    font-size: 18px;
    text-shadow: 0 0 2px black;
}

/********************** Reviews **********************/
#review-container
{
    padding:0 15px;
}

#review-container label
{
    margin:0;
}

.trail-review-title-wrapper
{
    border-bottom:2px solid black;
    width:100%;
    display:inline-block;
}

#rating-wrapper
{
    text-align:right;
}

.pending-review
{
    font-weight:bold;
    color:red;
}

#new-review-button
{
    padding:4px 8px;
}

/**************** Nearby Parks Forests ***************/
.parks-forests-header
{
    width:100%;
    text-align:center;
    border-bottom:black 2px solid;
}

.parks-forests-header h4
{
    margin-bottom:5px;
    font-weight:bold;
}

#parks-forests-container
{
    width:100%;
    text-align:center;
}

#parks-forests-container div
{
    display:inline-block;
    vertical-align:top;
}

.parks-forests-columns
{
    width:49%;
}

#nearby-parks-container,
#nearby-forests-container
{
    margin-bottom:10px;
}

.parks-forests
{
    width:100%;
    text-align:center;
    vertical-align:top;
}

.parks-forests a
{
    display:block;
}

@media(max-width:1200px)
{
    #photo-popup-container
    {
        max-width:100%;
    }
}
@media(max-width:991px)
{
    #trail-uses
    {
        display:inline-block;
        margin-bottom:0;
        width:100%;
    }
}

@media(max-width:971px)
{
    .trail-image-wrapper
    {
        width:24%;
    }
}

@media(max-width:767px)
{
    .trail-image-wrapper
    {
        width:32%;
    }

    #rating-wrapper
    {
        text-align:left;
    }
}

@media(max-width:500px)
{
    .trail-image-wrapper
    {
        width:49%;
    }

    .photo-chevron-left,
    .photo-chevron-right,
    .fa-times
    {
        font-size:20px !important;
    }

    #description
    {
        font-size:12px
    }

    #trail-details label,
    #trail-details span
    {
        font-size:14px !important;
    }

    .parks-forests-columns
    {
        width:97%;
    }
}

@media(max-width:413px)
{
    #trail-uses-container
    {
        width:100%;
    }

    #trail-details
    {
        width:100%;
    }

    #trail-uses-container
{
    margin-bottom:10px;
}

    #find-on-map-container
    {
        margin-bottom:5px;
        width:100%;
        text-align:left;
    }
}

@media(max-width:360px)
{
    .photo-chevron-left,
    .photo-chevron-right,
    .fa-times
    {
        font-size:18px !important;
    }

    .photo-chevron-left
    {
        left:10px;
    }

    .photo-chevron-right
    {
        right:10px;
    }

    #description
    {
        font-size:10px
    }
}