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

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

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



    :root, 
    .small {
        --red                     : 202,  28,  37;
        --green                   :  48, 155,  70;
        --green-dark              :   0,  39,  17;
        --green-light             :  15, 103,  53;
        --blue                    :  12, 155, 212;
        --white                   : 255, 255, 255;
        --gray-light              : 200, 200, 200;
        --gray-light-x            : 235, 235, 235;
        --gray                    :  67,  65,  78;
        --black                   :   0,   0,   0;
        --beige                   : 212, 206, 190;

        --color-red               : rgb(var(--red));
        --color-green             : rgb(var(--green));
        --color-green-dark        : rgb(var(--green-dark));
        --color-green-light       : rgb(var(--green-light));
        --color-blue              : rgb(var(--blue));
        --color-white             : rgb(var(--white));
        --color-gray-light        : rgb(var(--gray-light));
        --color-gray-light-x      : rgb(var(--gray-light-x));
        --color-gray              : rgb(var(--gray));
        --color-black             : rgb(var(--black));
        --color-beige             : rgb(var(--beige));

        --color-text              : var(--color-gray); 
        --color-text-link         : var(--color-gray); 
        --color-text-selection    : var(--color-white); 
        --color-text-selection-bg : var(--color-gray); 
    }



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

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


   
    :root,
    .small {
        --font-scale          : 1.1;    /* How the headings font size scales up */
        
        --root-font-size      : 10px;   /* The root element, ie HTML, font size */
        --base-font-size      : 1.4rem; /* The body element base font size */
        --base-line-height    : 1.5;    /* The default line height of all elements */
        --text-line-height    : 1.5;    /* The line height of block text elements */
        --heading-line-height : 1.3;    /* The line height of heading elements */

        --text-rhythm         : 2rem;   /* Vertical margins between text elements */
        --grid-gutter         : 1rem;   /* Paddings between columns, the grid gutters */
        --vertical-rhythm     : 3rem;   /* Vertical margins between major grid sections */
        --heading-paragraph   : 1.6;
        --paragraph           : 1.6;
        --blockquote          : 1.8;

        --panel-width         : 1064px; /* The width of the panel element */
        --panel-narrow-width  : 800px;  /* The width of the narrow panel element */
    }

    .tablet {
        --font-scale          : 1.125;  /* How the headings font size scales up */
        --base-font-size      : 1.5rem; /* The body element base font size */
        --base-line-height    : 1.5;    /* The default line height of all elements */
        --text-line-height    : 1.6;    /* The line height of block text elements */
        --heading-line-height : 1.25;   /* The line height of heading elements */

        --text-rhythm         : 3rem;   /* Vertical margins between text elements */
        --grid-gutter         : 1.5rem; /* Paddings between columns, the grid gutters */
        --vertical-rhythm     : 4rem;   /* Vertical margins between major grid sections */
        --blockquote          : 2;
    }

    .laptop {
        --font-scale          : 1.21;   /* How the headings font size scales up */
        --base-font-size      : 1.6rem; /* The body element base font size */
        --base-line-height    : 1.5;    /* The default line height of all elements */
        --text-line-height    : 1.7;    /* The line height of block text elements */
        --heading-line-height : 1.2;    /* The line height of heading elements */

        --text-rhythm         : 4rem;   /* Vertical margins between text elements */
        --grid-gutter         : 2rem;   /* Paddings between columns, the grid gutters */
        --vertical-rhythm     : 5rem;   /* Vertical margins between major grid sections */
        --heading-paragraph   : 2;
        --paragraph           : 1.7;
        --blockquote          : 2.2;
    }

    .desktop {
    	--heading-paragraph   : 2.3;
        --paragraph           : 1.8;
        --blockquote          : 3;
    }



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

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

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



    /* Columns and rows */

    [class*="column"] {
        padding: 0 var(--grid-gutter);
    }

    [class*="column"] .row {
        margin: 0 calc(-1 * var(--grid-gutter)); 
    }



    /* The panel that restrains contents to a maximum width */

    .panel {
        max-width: var(--panel-width);
    }

    .panel-narrow {
        max-width: var(--panel-narrow-width);
    }

    .panel-full {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }



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

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

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



    /* Main fonts */

    :root,
    .small {
        --font-roboto: 'Roboto', sans-serif;
        --font-serif: 'Ubuntu', serif;
        --font-sans-serif: 'Ubuntu', Arial, sans-serif;
        --font-monospace: Consolas, 'Courier New', monospace;
        --font-icons: 'Responsiville icons';
    }

    @font-face {
        font-family: 'egreen';
        font-style: normal;
        font-weight: normal;
        font-display: swap;
        src: local(''),
             url('fonts/egreen.woff2') format('woff2'),
             url('fonts/egreen.woff') format('woff');
    }

    [class^="icon-"], [class*=" icon-"] {
      /* use !important to prevent issues with browser extensions that change fonts */
      font-family: 'egreen' !important;
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      font-display: block;

      /* Better Font Rendering =========== */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    .icon-arrow:before {
        content: "\e900";
    }
    .icon-arrow2:before {
        content: "\e901";
    }
    .icon-email:before {
        content: "\e902";
    }
    .icon-fb:before {
        content: "\e903";
    }
    .icon-ig:before {
        content: "\e904";
    }
    .icon-mobile:before {
        content: "\e905";
    }
    .icon-phone:before {
        content: "\e906";
    }
    .icon-pin:before {
        content: "\e907";
    }
    .icon-pin2:before {
        content: "\e908";
    }
    .icon-search:before {
        content: "\e909";
    }
    .icon-tw:before {
        content: "\e90a";
    }
    .icon-user:before {
        content: "\e90b";
    }
    .icon-yt:before {
        content: "\e90c";
    }
    .icon-arrow3:before {
        content: "\e90d";
    }
   .icon-star-full:before {
        content: "\e9d9";
    }

    .color__text-white {
        color: var(--color-white);
    }


    /* Global base stylings */

    html {
        font-size: var(--root-font-size);
    }

    body {
        font-family: var(--font-sans-serif);
        font-size: var(--base-font-size);
        color: var(--color-text);
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: var(--font-serif);
    }

    h1 {
        font-size: calc(var(--base-font-size) * var(--font-scale) * var(--font-scale) * var(--font-scale) * var(--font-scale) * var(--font-scale) * var(--font-scale));
    }

    h2 {
        font-size: calc(var(--base-font-size) * var(--font-scale) * var(--font-scale) * var(--font-scale) * var(--font-scale) * var(--font-scale));
    }

    h3 {
        font-size: calc(var(--base-font-size) * var(--font-scale) * var(--font-scale) * var(--font-scale) * var(--font-scale));
    }

    h4, h5, h6 {
        font-size: calc(var(--base-font-size) * var(--font-scale) * var(--font-scale) * var(--font-scale));
    }

    .vanilla-layout.vanilla-layout-header p {
	 	font-size: calc(var(--root-font-size) * var(--heading-paragraph));
    }

    .content_container h1,
    .content_container h2,
    .content_container h3,
    .content_container h4,
    .content_container h5,
    .content_container h6 {
        font-weight: 700;
    }

    .vanilla-layout p,
    .product-description p,
    .vanilla-layout li {
        font-family: var(--font-roboto);
        font-weight: 300;
        font-size: calc(var(--root-font-size) * var(--paragraph));
        margin-bottom: calc( var(--text-rhythm) / 2);
    }

    .product-description ul li,
    .product-description ul li a {
        font-size: calc(var(--root-font-size) * var(--paragraph));
    }

    .vanilla-layout-text blockquote p,
    .product-title {
        font-size: calc(var(--root-font-size) * var(--blockquote));
    }

    .text h5,
    .text h6 {
        margin-bottom: calc(0.5 * var(--text-rhythm));
    }

    .vanilla-layout .post-box-excerpt p {
        font-size: var(--base-font-size);
    }

    .make-subtitle-h6 .vanilla-layout-title-subtitle p {
        font-weight: 700;
        font-size: calc(var(--base-font-size) * var(--font-scale) * var(--font-scale));
        margin-bottom: 0;
    }

    .make-subtitle-h6 .vanilla-layout-title {
        max-width: 100%;
    }

    .image-with-text .img_layout_title_container .vanilla-layout-title-subtitle p {
        font-size: calc(var(--root-font-size) * var(--paragraph))!important;
        margin-bottom: calc( var(--text-rhythm) / 2)!important;
    }


    /* Uppercase (not only) Greek */

    .uppercase {
        text-transform: uppercase;
    }



    /* Responsive tables */

    .responsive-table-wrapper {
        overflow-x: auto;
        margin-bottom: var(--text-rhythm);
    }

        .small .responsive-table-wrapper table {
            width: auto;
            min-width: 540px;
        }

        .tablet .responsive-table-wrapper table {
            min-width: none;
            table-layout: auto;
        }

            .responsive-table-wrapper table td,
            .responsive-table-wrapper table th {
                word-break: normal;
            }



    /* Input fields */

    input,
    select,
    textarea {
        color: var(--color-text);
    }


    /* Links, global */

    a {
        color: var(--color-text-link);
    }

    /* Links, inside text */

    .text a {
        display: inline;
        border-bottom-width: 0.1rem;
        border-bottom-style: solid;
    }

    .text a:hover {
        border-bottom-width: 0.1rem;
        border-bottom-style: solid;
    }

    .text .button,
    .text .button:hover,
    .text .gallery a,
    .text .gallery a:hover,
    .text .wp-caption a,
    .text .wp-caption a:hover {
        border-bottom-width: 0;
    }



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

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

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


    .imgloaded-not-yet {
        opacity: 0;
    }

    .imgloaded-complete {
        transition: opacity 0.5s ease-in-out;
    }

/* Minor Fixes after Vanilla update */

    html {
        overflow-x: hidden;
    }

    .small .responsiville-drawers-button {
        display: block;
    }

    .laptop .responsiville-drawers-button {
        display: none;
    }

    .small .vanilla-layout-title + .text,
    .small .vanilla-layout-title + .row {
        margin-top: calc(0.333*var(--text-rhythm));
    }


    .laptop .vanilla-layout-title + .text,
    .laptop .vanilla-layout-title + .row {
        margin-top: calc(1.15*var(--text-rhythm));
    }

    .small .category-video .responsiville-popup-contents {
        width: 100%!important;
        height: auto!important;
        left: 0px!important;
        transform: translateY(-50%)!important;
    }

    .laptop .category-video .responsiville-popup-contents {
        width: 960px!important;
        left: 50%!important;
        transform: translateX(-50%) translateY(-50%)!important;
    }

    .no-style-btn {
        position: relative;
        box-shadow: none;
        display: block;
        vertical-align: middle; 
        width: auto;
        text-align: center; 
        padding: 0;
        height: inherit;
        line-height: initial;
        border: none;
        outline: none;
        text-decoration: none;
        cursor: hand;
        cursor: pointer;
        font-size: inherit;
        font-family: inherit;
        font-weight: normal;
        color: transparent;
        background: transparent;
        transition-property: opacity,color,background;
        transition-duration: 0.2s;
        transition-timing-function: linear;
    }

    .category-video .post-box.has__popup-video {
        margin-bottom: 3rem;
    }

    .category-video .responsiville-popup-contents-inner{
        padding: 0;
    }

    .category-video .responsiville-popup-contents {
        box-shadow: 0 0 7em 0 rgb(31, 31, 31);
    }

    .category-video .responsiville-popup-open .responsiville-popup-close {
        background: #191919;
    }

    .category-video h6.video__title {
        margin-top: 1rem;
        font-weight: 700;
        padding-left: 2rem;
        padding-right: 2rem;
        color: var(--color-white);
    }

    .small .category-video h6.video__title {
        font-size: 18px;
    }

    .laptop .category-video h6.video__title {
        font-size: 24px;
    }
    
    .triangle {
        text-align: center;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 15px 0 15px 30px;
        border-color: transparent transparent transparent #ffffff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-40%) translateY(-50%)
    }

    span.icon__holder {
        position: absolute;
        top: 50%;
        left: 50%;
        background-color: var(--color-beige);
        height: 80px;
        width: 80px;
        content: '';
        transform: translateX(-50%) translateY(-50%);
        border-radius: 20rem;
        transition: background-color 377ms ease-in-out;
    }

    button.cta-popup-video:hover span.icon__holder {
        background-color: var(--color-green);
        transition: background-color 377ms ease-in-out;
    }

    .laptop .video__menu-item {
        background-color: var(--color-green);   
    }

    .laptop .video__menu-item:hover {
        background-color: var(--color-beige);   
    }
        
        .laptop .video__menu-item a {
            color: var(--color-white)!important;
        }

    .category-video article.vanilla-layout.vanilla-layout-main {
        background: #1A1A1A;
    }

    .category-video .responsiville-popup-contents-wrapper {
        background-color: rgba(26,26,26, 0.8);
    }

    .text ul li {
        margin-bottom: 0.25rem;
    }

    .text > * + * {
        margin-top: calc(var(--text-rhythm)/2);
    }