/***********************************************************************************

    ███████╗████████╗██████╗ ██╗   ██╗ ██████╗████████╗██╗   ██╗██████╗ ███████╗
    ██╔════╝╚══██╔══╝██╔══██╗██║   ██║██╔════╝╚══██╔══╝██║   ██║██╔══██╗██╔════╝
    ███████╗   ██║   ██████╔╝██║   ██║██║        ██║   ██║   ██║██████╔╝█████╗
    ╚════██║   ██║   ██╔══██╗██║   ██║██║        ██║   ██║   ██║██╔══██╗██╔══╝
    ███████║   ██║   ██║  ██║╚██████╔╝╚██████╗   ██║   ╚██████╔╝██║  ██║███████╗
    ╚══════╝   ╚═╝   ╚═╝  ╚═╝ ╚═════╝  ╚═════╝   ╚═╝    ╚═════╝ ╚═╝  ╚═╝╚══════╝
                                                                                                                    
 ***********************************************************************************/



    .wrapper {
    }

        .wrapper header#sticky-header {
            background: var(--color-cream);
        }

        main {

        }

        .wrapper footer {
            padding: var(--vertical-rhythm) 0 !important;
        }


    .gray {
        background: var(--color-cream-light);
    }

    .text p {
        font-family: var(--font-serif);
        font-size: 2.3rem;
    }

    .wp-block-image img {
        width: 100%;
    }

    .text h2,
    .text h3,
    .text h4,
    .text h5,
    .text h6 {
        position: relative;
        font-weight: bold;
    }

    .text h2::after,
    .text h3::after,
    .text h4::after,
    .text h5::after,
    .text h6::after {
        content: '';
        position: absolute;
        bottom: 0.1rem;
        left: 0;
        height: 0.8rem;
        width: 80%;
        background: var(--color-yellow);
        z-index: -1;
    }


/********************************************************************************

    ██╗  ██╗ ██████╗ ███╗   ███╗███████╗    ██████╗  █████╗  ██████╗ ███████╗
    ██║  ██║██╔═══██╗████╗ ████║██╔════╝    ██╔══██╗██╔══██╗██╔════╝ ██╔════╝
    ███████║██║   ██║██╔████╔██║█████╗      ██████╔╝███████║██║  ███╗█████╗
    ██╔══██║██║   ██║██║╚██╔╝██║██╔══╝      ██╔═══╝ ██╔══██║██║   ██║██╔══╝
    ██║  ██║╚██████╔╝██║ ╚═╝ ██║███████╗    ██║     ██║  ██║╚██████╔╝███████╗
    ╚═╝  ╚═╝ ╚═════╝ ╚═╝     ╚═╝╚══════╝    ╚═╝     ╚═╝  ╚═╝ ╚═════╝ ╚══════╝
    
 ********************************************************************************/


    .home .article-items {
        margin-bottom: 0;
    }

        .article-item {
            height: 28rem;
            min-height: 28vh;
            background-size: cover !important;
            background-position: 50% 50% !important;
            position: relative;
            opacity: 1;
        }

        .laptop .article-item {
            height: 45rem;
        }


            .article-item h2 {
                font-size: 1.9rem;
                text-align: center;
                color: var(--color-gray);
                position: absolute;
                bottom: 0;
                left: 0;
                padding: 1.5rem;
                background: rgba(255, 255, 255, 0.7);
                width: 100%;
            }

            .laptop .article-item h2 {
                font-size: 2.3rem;
                padding: 3rem;
                background: none;
                width: auto;
                bottom: auto;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                opacity: 0.8;
                -moz-transition: all .3s ease;
                -o-transition: all .3s ease;
                -webkit-transition: all .3s ease;
                -ms-transition: all .3s ease;
                transition: all .3s ease;
                width: 80%;
                background: rgba(255, 255, 255, 0.8);
            }

            .article-item:hover h2 {
                opacity: 1;
            }

            .post-type-page.article-item h2 {
                opacity: 1;
                z-index: 1;
                color: var(--color-white);
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background: none;
                height: 0;
            }

          .post-type-portfolio.article-item h2 {
                opacity: 1;
                z-index: 1;
                color: var(--color-white);
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background: rgba(0, 0, 0, 0.2);
            }

            .article-item .overlay {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                display: block;
                z-index: -1;
                opacity: 0;
                -moz-transition: all .3s ease;
                -o-transition: all .3s ease;
                -webkit-transition: all .3s ease;
                -ms-transition: all .3s ease;
                transition: all .3s ease;
            }

            .post-type-page.article-item .overlay {
                opacity: 1;
                z-index: 0;
            }

            .article-item:hover .overlay {
                opacity: 0.7;
            }

            .post-type-post.article-item .overlay {
                background: var(--color-yellow);
            }

            .post-type-portfolio.article-item .overlay {
                background: var(--color-white);
            }

            .post-type-page.article-item .overlay {
                background: var(--color-orange);
                opacity: 0.3;
            }

            .post-type-portfolio.article-item:hover .overlay {
                background: var(--color-orange);
                opacity: 0.7;
            }

        .grid-sizer {
            width: 33%;
        }

        .post-list .masonry-item {
            width: 100% !important;
        }

        .post-list .post-box-date {
            display: none;
        }

        /*Mobile*/

        .masonry-item {
            overflow: hidden;
        }

        .masonry-item img {
            transition: transform .5s ease;
        }

        .masonry-item:hover img {
            transform: scale(1.2);
        }

        .masonry-item a {
            opacity: 1;
        }

        .small .vanilla-layout-gallery .grid-sizer,
        .small .vanilla-layout-gallery .masonry-item {
            width: 100%;
        }

        .small .vanilla-layout-gallery .masonry-items.laptop-group-3 .grid-sizer,
        .small .vanilla-layout-gallery .masonry-items.laptop-group-3 .masonry-item {
            width: 100%;
        }

        .small .vanilla-layout-gallery .masonry-items.desktop-group-4 .grid-sizer,
        .small .vanilla-layout-gallery .masonry-items.desktop-group-4 .masonry-item {
            width: 100%;
        }

        /*Tablet*/

        .tablet .vanilla-layout-gallery .grid-sizer,
        .tablet .vanilla-layout-gallery .masonry-item {
            width: 100%;
        }

        .tablet .vanilla-layout-gallery .masonry-items.laptop-group-3 .grid-sizer,
        .tablet .vanilla-layout-gallery .masonry-items.laptop-group-3 .masonry-item {
            width: calc(100%/3);
        }

        .tablet .vanilla-layout-gallery .masonry-items.desktop-group-4 .grid-sizer,
        .tablet .vanilla-layout-gallery .masonry-items.desktop-group-4 .masonry-item {
            width: calc(100%/2);
        }

        /*Laptop*/

        .laptop .vanilla-layout-gallery .masonry-items .grid-sizer,
        .laptop .vanilla-layout-gallery .masonry-items .masonry-item {
            width: calc(100%);
        }

        .laptop .vanilla-layout-gallery .masonry-items.tablet-group-2 .grid-sizer,
        .laptop .vanilla-layout-gallery .masonry-items.tablet-group-2 .masonry-item {
            width: calc(100%/2);
        }

        .laptop .vanilla-layout-gallery .masonry-items.laptop-group-3 .grid-sizer,
        .laptop .vanilla-layout-gallery .masonry-items.laptop-group-3 .masonry-item {
            width: calc(100%/3);
        }

        .laptop .vanilla-layout-gallery .masonry-items.desktop-group-4 .grid-sizer,
        .laptop .vanilla-layout-gallery .masonry-items.desktop-group-4 .masonry-item {
            width: calc(100%/4);
        }

/**********************************************************************

     ██████╗ ██████╗ ███╗   ██╗████████╗███████╗███╗   ██╗████████╗
    ██╔════╝██╔═══██╗████╗  ██║╚══██╔══╝██╔════╝████╗  ██║╚══██╔══╝
    ██║     ██║   ██║██╔██╗ ██║   ██║   █████╗  ██╔██╗ ██║   ██║
    ██║     ██║   ██║██║╚██╗██║   ██║   ██╔══╝  ██║╚██╗██║   ██║
    ╚██████╗╚██████╔╝██║ ╚████║   ██║   ███████╗██║ ╚████║   ██║
     ╚═════╝ ╚═════╝ ╚═╝  ╚═══╝   ╚═╝   ╚══════╝╚═╝  ╚═══╝   ╚═╝
                                                                                           
 **********************************************************************/



    pre {
        background: rgb(245, 245, 245);
        padding: 0.5rem 1rem;
        border: 1px dotted rgb(165, 165, 165);
    }

    code {
        background: rgb(245, 245, 245);
        padding: 0 0.5rem;
        border: 1px solid rgb(165, 165, 165);
    }

    .thumbnail-wrapper {
        border-bottom: none;
        display: inline;
    }

    .featured-image {
        height: 20vh;
        background-size: cover !important;
        background-position: 50% 50% !important;
        position: relative;
    }

    .tablet .featured-image {
        height: 30vh;
    }

    .laptop .featured-image {
        height: 40vh;
    }

    .desktop .featured-image {
        height: calc( 100vh - 225px );
    }

    .article-title {
        width: 100%;
    }

    .tablet .article-title {
        position: absolute;
        bottom: 0;
        left: var(--grid-gutter);
        width: 45%;
        height: auto;

    }

    .laptop .article-title {
        width: 40%;
    }

    .desktop .article-title {
        width: 35%;
    }

    .large .article-title {
        width: 30%;
    }

    .xlarge .article-title {
        width: 25%;
    }

    .contact-details {

    }

        .contact-details a {
            color: var(--color-gray);
            display: block;
        }

        .contact-details .social {
            margin-top: 2rem;
        }

            .contact-details .social a {
                display: inline-block;
                margin-right: 1rem;
            }

    .other-article-links {
        background: var(--color-responsiville-gray-light);
    }

        .previous-post-link {
            padding-right: 1rem !important;
        }

        .next-post-link {
        	padding-top: 3rem;
            padding-left: 1rem !important;
        }

        .tablet .next-post-link {
        	padding-top: 0;
        }

        .small-post-thumbnail img {
            width: 100%;
        }

            .small-post-text {
                color: var(--color-gray);
                font-size: 1.5rem;
            }

                .small-post-text-title {
                    display: block;
                    padding: 0.5rem 0;
                    font-size: 1.8rem;
                    font-weight: 700;
                }

                .small-post-text-name {
                    color: var(--color-gray-light);
                }

    img.size-full,
    figcaption {
        width: 100% !important;
    }

    .text figcaption {
        background: rgba(245, 124,   0, 0.1);
    }

    .instagram-media {
        display: block !important;
        text-align: center;
        width: 100% !important;
        max-width: 70% !important;
        margin: 3rem auto !important;
    }

    .list-taxonomies a {
        color: var(--color-white);
    } 

/**********************************************************************

    ██████╗  ██████╗ ███████╗████████╗    ██████╗  ██████╗ ██╗  ██╗
    ██╔══██╗██╔═══██╗██╔════╝╚══██╔══╝    ██╔══██╗██╔═══██╗╚██╗██╔╝
    ██████╔╝██║   ██║███████╗   ██║       ██████╔╝██║   ██║ ╚███╔╝
    ██╔═══╝ ██║   ██║╚════██║   ██║       ██╔══██╗██║   ██║ ██╔██╗
    ██║     ╚██████╔╝███████║   ██║       ██████╔╝╚██████╔╝██╔╝ ██╗
    ╚═╝      ╚═════╝ ╚══════╝   ╚═╝       ╚═════╝  ╚═════╝ ╚═╝  ╚═╝

 **********************************************************************/



    .post-box-wrapper + .post-box-wrapper {
        margin-top: var(--text-rhythm);
    }

    .post-box {
        font-size: 0.9em;
        line-height: 1.5;
    }

        .post-box a,
        .post-box a:hover {
            border-bottom: none;
        }

            .post-box-image {
                margin-bottom: 2rem;
            }

            .post-box-title {
                font-size: 2em;
                margin: 0 0 0.25em 0 !important;
                padding: 0 !important;
                color: var(--color-gray);
            }

            .post-box-date {
                font-size: 0.9em;
                margin: 0 0 0.5em 0;
                color: var(--color-orange);
            }

            .article-item .post-box-date {
                position: absolute;
                top: 1rem;
                right: 1rem;
                color: var(--color-white);
            }

            .laptop .article-item .post-box-date {
            	top: auto;
            	right: auto;
                bottom: 1rem;
                left: 2rem;
            }

            .post-type-page .post-box-date {
                display: none;
            }

            .post-box-excerpt {
                margin: 0 0 0.5em 0;
                color: var(--color-gray);
            }
            
            .post-box .list-taxonomies {
                margin: 0 0 0.5em 0;
                color: var(--color-orange);
            }

            .post-box .list-taxonomies em {
                font-style: normal;
            }



/************************************************************************************

    ██████╗  █████╗  ██████╗ ██╗███╗   ██╗ █████╗ ████████╗██╗ ██████╗ ███╗   ██╗
    ██╔══██╗██╔══██╗██╔════╝ ██║████╗  ██║██╔══██╗╚══██╔══╝██║██╔═══██╗████╗  ██║
    ██████╔╝███████║██║  ███╗██║██╔██╗ ██║███████║   ██║   ██║██║   ██║██╔██╗ ██║
    ██╔═══╝ ██╔══██║██║   ██║██║██║╚██╗██║██╔══██║   ██║   ██║██║   ██║██║╚██╗██║
    ██║     ██║  ██║╚██████╔╝██║██║ ╚████║██║  ██║   ██║   ██║╚██████╔╝██║ ╚████║
    ╚═╝     ╚═╝  ╚═╝ ╚═════╝ ╚═╝╚═╝  ╚═══╝╚═╝  ╚═╝   ╚═╝   ╚═╝ ╚═════╝ ╚═╝  ╚═══╝
                                                                                                                      
 ************************************************************************************/



    .pages {
        width: auto;
        text-align: center;
    }

        .pages a, 
        .pages a:hover, 
        .pages span {
            display: inline-block;
            padding: 0.2rem 1rem;
            margin: 3rem 0;
            border: none;
        }

        .pages .current {
            font-weight: bold;
        }



/*************************************************

    ██████╗  ██████╗ ██████╗ ██╗   ██╗██████╗
    ██╔══██╗██╔═══██╗██╔══██╗██║   ██║██╔══██╗
    ██████╔╝██║   ██║██████╔╝██║   ██║██████╔╝
    ██╔═══╝ ██║   ██║██╔═══╝ ██║   ██║██╔═══╝
    ██║     ╚██████╔╝██║     ╚██████╔╝██║
    ╚═╝      ╚═════╝ ╚═╝      ╚═════╝ ╚═╝

 *************************************************/



    .popup {
        box-sizing: content-box;
        border: none;
        padding: 0;
    }

        .popup-image-info {
            display: none;
        }

        .popup-contents-container {
            border: none;
        }

        .popup-next,
        .popup-previous {
            top: 45%;
            box-shadow: none;
            background: none;
            text-indent: -99999px;
            opacity: 0.6;
        }

        .popup-next {
            background-image: url('../img/next.png');
            width: 3.4rem;
            height: 6rem;
        }

        .popup-previous {
            background-image: url('../img/previous.png');
            width: 3.4rem;
            height: 6rem;
        }

        .popup .close {
            background: url('../img/close.png') no-repeat;
            opacity: 0.7;
            top: 10px;
            right: 10px;
            opacity: 0;
        }

        .popup:hover .close {
            opacity: 0.8;
        }

    .popup-loader span, 
    .popup-loader-image-gallery span {
        width: 6.4rem !important;
        height: 6.4rem !important;
        background: url('../img/Wedges-3s-200px.gif') 50% 50% no-repeat;
        opacity: 0.7;
    }


/*************************************************

OTHERS

 *************************************************/

.instagram {
    position: relative;
    margin-top: 5rem;
}

.instagram:before {
    content: "Instagram";
    position: absolute;
    top: 1rem;
    left: 1rem;
    color: var(--color-white);
    font-size: 0.9em;
    z-index: 1;
}

    .instagram #slides li {
        border: 1rem solid var(--color-white);
    }

    .instagram #slides li:last-child {
        display: none;
    }

    .tablet .instagram #slides li:last-child {
        display: inline-block;
    }

    #wis-slides li {
        display: inline-block !important;
        width: calc(100% / 3) !important;
    }

    .laptop #wis-slides li {
        width: calc(100% / 6) !important;
    }

    .jr-insta-thumb ul.thumbnails {
    	margin-left: 0 !important;
    }

	    .jr-insta-thumb ul.thumbnails li {
	    	margin: 0 !important;	
	    }


.wis-feed-header {
    width: 100%;
    text-align: center;
    height: 5.2rem;
}

.laptop .wis-feed-header {
    height: auto;
}

    .wis-feed-header a {
        display: block;
        width: 100%;
        font-family: var(--font-sans-serif);
        color: var(--color-gray);
    }

        .wis-header-img:before {
            content: "Βρείτε με στο Instagram";
            margin-right: 2rem;
        }

        .wis-feed-header a span {
            font-family: var(--font-sans-serif);
        }

        .wis-feed-header a span:before {
            font-family: FontAwesome !important;
        }

/*************************************************

PORTFOLIO

 *************************************************/

.offer-button {
    text-align: center;
    display: inline-block;
    width: 100%;
}

.offer-button-bottom {
    margin-bottom: 5rem;
}

.portfolio-title {
    text-align: center;
    font-size: 3.2rem;
    margin-bottom: 3rem;
}