@import "./variables.scss";

/* //////////////////////////////////////////////////////////////////////////////////
*
*  Layout 
*
/* /////////////////////////////////////////////////////////////////////////////////*/


.art-content{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .the-content{
        width: 100%;
        max-width: 980px;
        margin: auto;
    }
}



.related-section  .title-sec{
    padding: 80px 0;
}

/* //////////////////////////////////////////////////////////////////////////////////
*
*  Modules 
*
/* /////////////////////////////////////////////////////////////////////////////////*/

.b-row{
    font-size: 15px;
    line-height: 30px;
    color: #555555;
    font-weight: 300;
    margin: 30px 0;
    h1, h2, h3, h4, h5, h6{
        margin-bottom: 15px;
    }
    h1{
        color: $blue; 
        font-size: 20px;
        margin: 20px 0;
        display: block;
    }
    h2{
        color: $blue;
        font-size: 17px; 
        margin: 20px 0;
        display: block;
    }
    h3{
        color: $blue; 
        font-size: 16px;
        margin: 20px 0;
        display: block;
    }
    h4{
        color: $blue; 
        font-size: 15px;
        margin: 20px 0;
        display: block;
    }
    h5{
        color: $blue; 
        font-size: 15px;
        margin: 20px 0;
        display: block;
    }
    h6{
        color: $blue; 
        font-size: 15px;
        margin: 20px 0;
        display: block;
    }
    a{
        color: $blue;
        text-decoration: underline;
    }
    ul, ol{
        padding-left: 40px;
        display: block;
    }

}

.b-images{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    img{
        display: block;
        width: 100%;
        margin: auto;
        border-radius: 3px;
    }
}

.bbi-count-1{
    width: 100%;
}

.bbi-count-2{
    width: 49%;
}

.bbi-count-3{
    width: 32%;
}

.bbi-count-4{
    width: 49%;
    margin-bottom: 15px;
}

.acf-map {
    width: 100%;
    height: 250px;
    border-radius: 5px;
    overflow: hidden;
}

.summary-wrapper{
    padding: 20px 50px;
    margin: 0 auto 50px auto;
    border-left: solid 3px $blue;
    h2{
        margin-top: 0;
        font-size: 15px;
    }
}

.b-video{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 50px 0;
    iframe{
        border-radius: 5px;
        overflow: hidden;
    }
}

/* //////////////////////////////////////////////////////////////////////////////////
*
*  Related  
*
/* /////////////////////////////////////////////////////////////////////////////////*/

.article-list{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 100px;
}

.article-list{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;

    .cards-inspi{
        border: none;
        box-shadow: $box-shadow;
    }
}

.blog-cars{
    width: calc(35% - 50px);
    margin: 0 1%;
}

/* //////////////////////////////////////////////////////////////////////////////////
*
*  Comments   
*
/* /////////////////////////////////////////////////////////////////////////////////*/

.comments-box{
    h2, h3{
        color: $orange; 
        margin-bottom: 30px;
        font-size: 15px;
    }
    .comment-form-comment{
        width: 100%;
    }
    .comment-form-author, .comment-form-email{
        width: 49%;
        input{
            width: calc(100% - 40px );
            border-radius: 6px;
            box-shadow: none;
            padding: 9px 20px;
            font-size: 13px;
            border: solid 1px $orange;
            outline: none;
            font-weight: 300;
        }
        label{
            font-size: 13px;
        }
    } 
    form{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        textarea{
            width: calc(100% - 40px );
            border-radius: 6px;
            box-shadow: none;
            padding: 20px;
            font-size: 13px;
            border: solid 1px $orange;
            outline: none;
            font-weight: 300;
        }
    }

    .form-submit input{
        background-color: $orange; 
        color: #fff;
        padding: 5px 35px;
        font-size: 13px;
        border-radius: 50px;
        border: none;
        box-shadow: $box-shadow;
    }

    .form-submit{
        display: flex;
        justify-content: flex-end;
        width: 100%;
        margin-top: 30px;
    }

    ol{
        list-style-type: none;
    }

    article{
        margin-bottom: 30px;
    }

    .hc-flex{
        display: flex;
        flex-direction: column;
        cite{
            line-height: 0;
            padding-bottom: 20px;   
            .fn{
                color: $blue;
                font-style: initial;
            }     
        }
        time{
            line-height: 0;
            font-size: 13px;
        }
    }


    header{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 20px;
        img{
            border-radius: 100%;
            overflow: hidden;
            margin-right: 20px;
        }
    } 
    
    .reply{
        display: flex;
        justify-content: flex-end;
        a{
            color: $orange;
            margin-right: 10px;
        }
        span{
            color: $orange;
        }
    }

    .children{
        padding-left: 30px;
        border-left: solid 2px $orange;
    }

    .depth-1{
        border-bottom: solid 1px #f0f0f0;
        padding-bottom: 20px;
        margin-bottom: 40px;
    }

    .comment-notes, .comment-form-cookies-consent{
        font-size: 13px;
        font-style: italic;
        margin-bottom: 30px;
        display: block;
    }

    .comment-form-cookies-consent{
        display: flex;
        align-items: center;
        margin-top: 30px;
        label{
            margin: 0;
        }
        input{
            margin-right: 10px;
        }
    }

    #email-notes{
        font-size: 13px;
    }
    
    label{
        margin-bottom: 15px;
        display: block;
    }

    a{
        color: $blue;
        text-decoration: underline;
    }

}

/* //////////////////////////////////////////////////////////////////////////////////
*
*  Single Page 
*
/* /////////////////////////////////////////////////////////////////////////////////*/


.page-container{
    padding-top: 50px;
}

.page .newsletter{
    margin-top: 0;
}



/* //////////////////////////////////////////////////////////////////////////////////
*
*  Desti Specails Styles   
*
/* /////////////////////////////////////////////////////////////////////////////////*/


.rd-container{
    display: flex; 
    justify-content: flex-start;
    flex-wrap: wrap; 
    .review-unit{
        width: 31%;
        margin: 0 1% 2% 1%; 
    }
}

.related-desti{
    .title-sec {
        padding: 50px 0;
    }
}



/* //////////////////////////////////////////////////////////////////////////////////
*
*  Responsives Styles 
*
/* /////////////////////////////////////////////////////////////////////////////////*/

@media screen and (max-width: 1100px){

    .art-content aside {
        width: 30%;
        max-width: 320px;
    }
    .art-content .the-content {
        width: 65%;
    }

}

@media screen and (max-width: 980px){

    .art-content .the-content {
        width: 100%;
    }

    .art-content aside {
        width: 100%;
        max-width: unset;
        .aside-inner{
            display: flex;
            justify-content: space-between;
        }

        .related-tours, .aside-cta{
            width: 48%;
        }
        .aside-cta {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    .owl-carousel .owl-nav button.owl-prev {
        left: 21%;
    }

    .owl-carousel .owl-nav button.owl-next {
        right: 21%;
    }

    .comments-box{
        margin-bottom: 50px;
    }

    .cards-inspi {
        width: calc(48% - 50px);
        margin: 0 1%;
    }

    .cards-inspi:last-of-type{
        display: none;
    }

    .single{

        .article-list {
            justify-content: center;
        }

        .blog-cars {
            width: calc( 55% - 50px);
            margin: 0 1%;
            margin: 1%;
        }
    }

}

@media screen and (max-width: 700px){

    .art-content aside .aside-inner {
        flex-wrap: wrap;
    }

    .art-content aside .related-tours, .art-content aside .aside-cta {
        width: 100%;
    }

    .article-list .cards-inspi {
        width: calc(100% - 50px);
        margin: 0 1% 3%;
    }

    .summary-wrapper {
        padding: 0; 
        margin: 0 auto 50px auto;
        border-left: none;
        .b-row ol {
            padding-left: 20px;
        }
    }

    .single{
        .blog-cars {
            width: 100%;
            margin: 0 0 3% 0;
        }
    
        .article-list {
            top: 50px;
        }
    }
    

}