﻿.UsedYachtContainer {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
}

#SideBarToggleIcon {
    display: none;
}

.UsedYachtSideBarInner {
    text-align: center;
    padding: 15px 0;
    display: block;
    height: 100%;
}
@media(min-width:1200px) {
    .UsedYachtSideBarDiv {
        width: 300px;
        margin: 0 auto 0 0;
        display: block;
        box-shadow: 0 0 30px rgba(0,0,0,0.2);
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
    }

    .UsedYachtSideBarDiv.rtl {
        left: auto;
        right: 0;
    }

    .UsedYachtSideBarInner {
        text-align: center;
        padding: 15px 0;
        display: block;
        height: auto;
        width: 300px;
    }
}
@media(max-width:1200px) {
    .UsedYachtSideBarDiv {
        width: 100%;
        max-width: 300px;
        margin: 0 auto 0 0;
        display: block;
        height: 100vh;
        box-shadow: 0 0 30px rgba(0,0,0,0.2);
    }
}

.UsedYachtSideBarLogo {
    padding: 0 30px;
}

.UsedYachtSideBarLogo img {
    width: 100%;
}

.UsedYachtSide {
    padding: 15px 0;
    background-color: var(--White);
}

.UsedYachtSideTitle {
    font-size: 32px;
    color: var(--DarkColor);
    font-weight: 400;
    padding: 0 0 15px 0;
}

.UsedYachtSide a {
    background-color: var(--White);
    display: block;
    width: 100%;
    padding: 10px 15px;
}
.UsedYachtSide a.Selected{
    background-color: var(--DarkColor);
}
.UsedYachtSide a:hover {
    background-color: #3c3c3c;
}
.UsedYachtDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
}
.UsedYachtDiv .UsedYachtTxtDiv{
    width: 50%;
    width: 100%;
    display: inline-block;
    font-size: 16px;
    color: var(--DarkColor);
    font-weight: 400;
}
.UsedYachtSide a:hover .UsedYachtDiv .UsedYachtTxtDiv {
    color: var(--White);
}
.UsedYachtSide a.Selected .UsedYachtDiv .UsedYachtTxtDiv {
    color: var(--White);
}
.UsedYachtDiv .UsedYachtImgDiv{
    width: 50%;
    display: inline-block;
}
.UsedYachtDiv .UsedYachtImgDiv img{
    width: 100%;
    transition: transform 0.5s ease;
}
.UsedYachtDiv:hover .UsedYachtImgDiv img{
    transform: scale(1.1);
}
.UsedYachtDiv.infinityIcon img{
    max-width: 45px;
    margin: 0 auto;
}


.NoResult {
    color: var(--TextColor333);
    font-weight: 400;
    font-size: 36px;
    padding: 30px;
    min-height: 340px;
}

.UsedYachtResaultDiv {
    flex: 1;
    padding: 0 15px 0 35px;
    margin: 0 0 0 0;
}


.SortContainer {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 15px 0 0 0;
}
.SortTitleDiv {
    font-size: 16px;
    font-weight: 600;
    color: var(--DarkColor);
    padding: 0 10px 0 20px;
}
.SortSelectDiv{

}
.SortSelect {
    border: none;
    font-size: 16px;
    color: var(--DarkColor);
    font-weight: 400;
}
.SortOption {
    font-size: 16px;
    color: var(--DarkColor);
    font-weight: 400;
}


.rtl .UsedYachtResaultDiv {
    padding: 0 35px 0 15px;
    margin: 0 0 0 0;
}
@media(min-width:1200px) {
    .UsedYachtResaultDiv {
        flex: 1;
        padding: 0 15px 0 35px;
        margin: 0 0 0 300px;
    }

    .rtl .UsedYachtResaultDiv {
        padding: 0 35px 0 15px;
        margin: 0 300px 0 0;
    }
}

.UsedYachtResaultInner {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

.sold {
    position: absolute;
    background-color: var(--DarkColor);
    color: var(--White);
    font-size: 20px;
    width: 100%;
    text-align: center;
    font-weight: 400;
    transform: rotate(45deg);
    top: 15%;
    left: 37%;
    padding: 5px 0;
}
.UsedYachtItemDiv {
    width: 33%;
    padding: 10px;
    position: relative;
    overflow: hidden;
}

.UsedYachtItemInner {
    padding: 10px;
}

.UsedYachtItemImg {
    /*height: 250px;*/
    /*background-size: 510px 250px;*/
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    overflow: hidden;
    position: relative;
    max-width: 510px;
    margin: 0 auto;
    background-size: 100%;
    height: 14vw;
}

.UsedYachtItemNameAndYear {
    display: block;
    padding: 7px 0;
    max-width: 510px !important;
    margin: 0 auto;
}

.UsedYachtItemName {
    display: inline-block;
    font-weight: 400;
    font-size: 24px;
    color: var(--TextColor333);
    padding: 0 10px 0 0;
    border-right: 1px solid #e0e0e0;
}
/*.rtl .UsedYachtItemName {
    padding: 0 0 0 10px;
    border-right: none;
    border-left: 1px solid #e0e0e0;
}*/
.UsedYachtItemYear {
    display: inline-block;
    font-weight: 400;
    font-size: 24px;
    color: var(--TextColor333);
    padding: 0 0 0 10px;
}
/*.rtl .UsedYachtItemYear {
    padding: 0 10px 0 0;
}*/



.UsedYachtPrice {
    max-width: 510px !important;
    margin: 0 auto;
}
.UsedYachtItemPriceTitle {
    font-size: 16px;
    font-weight: 600;
    color: var(--TextColor333);
}

.UsedYachtItemPriceValue {
    font-size: 16px;
    font-weight: 400;
    color: var(--TextColor333);
}



.PageContentWrapper {
    clear: both;
    display: block;
    width: 100%;
    padding: 30px 15px 15px 15px;
}
.PageContentDiv {
    padding: 15px 0 15px 0;
}
.PageContentDiv h1 {
    color: var(--TextColor333);
    font-weight: 400;
}
.PageContentDiv h2 {
    color: var(--TextColor333);
    font-weight: 400;
}
.PageContentDiv h3 {
    color: var(--TextColor333);
    font-weight: 400;
}
.PageContentDiv p {
    font-size: 16px;
    font-weight: 400;
    color: var(--TextColor333);
}
.PageContentTop{
    
}
.PageContentBottom{

}


@media(max-width: 1200px) {
    .UsedYachtSideBarDiv {
        width: 100%;
        max-width: 285px;
        margin: 0 auto 0 0;
        display: block;
        height: 100vh;
        box-shadow: 0 0 30px rgba(0,0,0,0.2);
        background-color: var(--White);
        position: fixed;
        top: 135px;
        bottom: 0;
        left: 0;
        z-index: 100;
        transform: translateX(-100%);
        transition: all 0.7s ease;
    }
    .UsedYachtSideBarDiv.rtl {
        bottom: 0;
        left: auto;
        right: 0;
        margin: 0 0 0 auto;
        transform: translateX(100%);
    }
    .UsedYachtSideBarDiv.shrink {
        top: 50px;
    }

    .UsedYachtSideBarDiv.open {
        transform: translateX(0);
    }

    /*#SideBarToggleIcon {
        display: block;
        position: absolute;
        right: 0;
        font-size: 14px;
        padding: 15px 10px;
        background-color: var(--White);
        transform: translate(100%, -50%);
        box-shadow: 7px 1px 10px rgba(0,0,0,0.1);
        top: 50%;
    }*/
    #SideBarToggleIcon {
        display: block;
        position: absolute;
        right: 0;
        font-size: 16px;
        padding: 7px 10px 10px 10px;
        background-color: var(--DarkColor);
        transform: translate(64%, -50%) rotate(-90deg);
        box-shadow: 7px 1px 10px rgba(0,0,0,0.1);
        top: 50%;
        color: var(--White);
        word-spacing: 7px;
    }
    /*.rtl #SideBarToggleIcon {
        right: auto;
        left: 0;
        transform: translate(-100%, -50%);
        box-shadow: -7px 1px 10px rgba(0,0,0,0.1);
    }*/
    .rtl #SideBarToggleIcon {
        right: auto;
        left: 0;
        transform: translate(-64%, -50%) rotate(90deg);
        box-shadow: -7px 1px 10px rgba(0,0,0,0.1);
    }

    .UsedYachtItemDiv {
        width: 50%;
        padding: 10px;
    }

}

@media(max-width: 992px) {
    .UsedYachtSideBarDiv {
        top: 70px;
    }
    .UsedYachtSideBarDiv.shrink {
        top: 70px;
    }
    .UsedYachtItemImg {
        background-size: 100%;
        height: 25vw;
    }
}


@media(max-width: 768px) {
    .UsedYachtItemDiv {
        width: 100%;
        padding: 10px 0;
    }
    .UsedYachtItemImg {
        background-size: 100%;
        height: 47vw;
    }

    .NoResult {
        font-size: 28px;
        padding: 15px;
    }
}