/**
 * @author Nevma, http://www.nevma.gr, info@nevma.gr
 * 
 * @license http://www.gnu.org/licenses/gpl-3.0.en.html GPLv3
 */



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

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



    body {
        overflow-wrap: break-word;
    }



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

    .panel {
        max-width: 1024px;
        padding: 0;
    }



    /* Floated elements inside text. */

    .alignnone {
        max-width: 100%;
        text-align: left;
    }

    .text .aligncenter {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        display: block;
    }

    .text .alignright {
        width: auto;
        margin-left: 4rem;
        margin-bottom: 2rem;
    }

    .small .text .alignright {
        float: none;
    }

    .tablet .text .alignright {
        float: right;
    }

    .text .alignleft {
        width: auto;
        margin-right: 4rem;
        margin-bottom: 2rem;
    }

    .small .text .alignleft {
        float: none;
    }

    .tablet .text .alignleft {
        float: left;
    }



    /**
     * Floated elements inside text should not span more than half their 
     * parent's width. These elements are floated by the core TinyMCE editor 
     * functions and can be images (captioned or not) and tables. Other 
     * elements, which we float ourselves, are found elsewhere.
     */

    .small .text .alignleft,
    .small .text .alignright,
    .small .text .wp-caption.alignleft,
    .small .text .wp-caption.alignright {
        width: auto;
        max-width: 100%;
        margin-bottom: var(--text-rhythm);
        margin-left: 0;
        margin-right: 0;
    }

    .tablet .text .alignleft,
    .tablet .text .alignright,
    .tablet .text .wp-caption.alignleft,
    .tablet .text .wp-caption.alignright {
        max-width: calc(50% - 1*var(--text-rhythm)) !important;
        margin-bottom: calc(1*var(--text-rhythm));
    }

    .tablet .text .alignleft, 
    .tablet .text .wp-caption.alignleft {
        margin-right: calc(1*var(--text-rhythm));
    }

    .tablet .text .alignright,
    .tablet .text .wp-caption.alignright {
        margin-left: calc(1*var(--text-rhythm));
    }



    /* Rows and columns inside text. */

    .small .tinymce-row [class*=column] {
        padding-left: calc(1*var(--grid-gutter));
        padding-right: calc(1*var(--grid-gutter));
    } 

    .small .row.tinymce-row {
        margin-left: calc(-1*var(--grid-gutter));
        margin-right: calc(-1*var(--grid-gutter));
    } 

    .small .panel-full .row.tinymce-row {
        margin-left: 0;
        margin-right: 0;
    }     

    .small .text .column-50 {
        width: 100% !important;
    }

    .tablet .text .column-50 {
        width: 50% !important;
    }

    .small .text .column-33 {
        width: 100% !important;
    }

    .tablet .text .column-33 {
        width: calc(100%/3) !important;
    }
    
    .small .text .column-25 {
        width: 100% !important;
    }

    .tablet .text .column-25 {
        width: 50% !important;
    }

    .tablet .text .column-25:nth-of-type(2n+1) {
        clear: left;
    }

    .laptop .text .column-25 {
        width: 25% !important;
    }

    .laptop .text .column-25:nth-of-type(2n+1) {
        clear: none;
    }



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

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

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



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

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

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



    /* Blockquotes normal. */

    .text blockquote {
        font-size: 1.5em;
        text-align: center;
        font-family: var(--font-serif);
    }

    .small .text blockquote {
        padding: 0 2em;
    }

    .tablet .text blockquote {
        padding: 0 3em;
    }

    .small .text blockquote.alignleft,
    .small .text blockquote.alignright {
        padding: 0 1em;
    }

    .tablet .text blockquote.alignleft,
    .tablet .text blockquote.alignright {
        padding: 0 2em;
    }

    .tablet .tinymce-column blockquote {
        font-size: 1.5em;
        padding: 0 1em;
    }

    .text blockquote::before {
        position: static;
        display: block;
        transform: translateY(50%);
        line-height: 0.5;
    }

    .small .text blockquote::before {
        font-size: 3.5em;
    }

    .tablet .text blockquote::before {
        font-size: 5em;
    }



    /* Shouting blockquote */

    .small .text blockquote.shout
    .small .text blockquote.alignleft.shout,
    .small .text blockquote.alignright.shout {
        font-size: 1.5em;
        padding-top: 0;
        padding-right: 1em;
        padding-bottom: 0;
        padding-left: 1em;
    }

    .tablet .text blockquote.shout,
    .tablet .text blockquote.alignleft.shout,
    .tablet .text blockquote.alignright.shout {
        font-size: 2em;
        padding-right: 2em;
        padding-left: 2em;
    }

    .laptop .text blockquote.shout {
        font-size: 2.25em;
    }

    .laptop .text blockquote.alignleft.shout,
    .laptop .text blockquote.alignright.shout {
        font-size: 2em;
    }



    /* Panel blockquote */

    .small .text blockquote.solid {
        background: var(--color-responsiville-gray-light-x);
        border-radius: 0.1em;
        padding-top: 2em;
        padding-right: 2em;
        padding-bottom: 3em;
        padding-left: 2em;
    }



    /* Mobile lists. */

    .small .text ul,
    .small .text ol,
    .small .text dl {
        padding-left: 2rem;
        padding-right: 0;
    }

        .small .text ul ul, .small .text ul ol, .small .text ul dl, 
        .small .text ol ul, .small .text ol ol, .small .text ol dl, 
        .small .text dl ul, .small .text dl ol, .small .text dl dl {
            padding-left: 2rem;
        }

    .tablet .text ul,
    .tablet .text ol,
    .tablet .text dl {
        padding-left: 6rem;
        padding-right: 3rem;
    }

        .tablet .text ul ul, .tablet .text ul ol, .tablet .text ul dl, 
        .tablet .text ol ul, .tablet .text ol ol, .tablet .text ol dl, 
        .tablet .text dl ul, .tablet .text dl ol, .tablet .text dl dl {
            padding-left: 3rem;
            padding-right: 3rem;
        }



    /* Tables */

    .small table {
        table-layout: fixed;
    }

    .tablet table {
        table-layout: inherit;
    }



    /* Preformatted content, usually for code. */
    
    pre {
        font-family: Consolas, monospace;
    }



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

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

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



    .text .wp-caption p {
        margin: 0;
        padding: 1.5rem 0;
        line-height: 1.3;
        font-size: 85%;
        font-weight: bold;
    }

    .text .wp-caption a {
        display: block;
    }


    .text figcaption {
        padding: 0.75em 0.5em;
        background: var(--color-responsiville-gray-light);
    }



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

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



    /* Common galleries. */

    .text .gallery {
        float: none;
        width: calc(100% + 2rem);
        margin-left: -1rem;
        margin-right: -1rem;
        padding: 0 !important;
    }

    .panel-full .text .gallery {
        width: calc(100% + 0rem);
        margin: 0;
    }

        .text .gallery-item {
            float: left;
            margin: 0 0 calc(0.5*var(--text-rhythm)) 0 !important;
            padding: 0 1rem !important;
            border: none;
            width: auto !important;
        }

            .text .gallery-item img {
                border-width: 0.1rem;
                padding: 1rem;
                border-radius: 0.2rem;
                width: 100%;
            }



        /* Two column galleries in text responsive. */

        .small .text .gallery-columns-2 .gallery-item {
            width: 100% !important;
        }

        .tablet .text .gallery-columns-2 .gallery-item {
            width: 50% !important;
        }

        .tablet .text .gallery-columns-2 .gallery-item:nth-of-type(2n+1) {
            clear: left;
        }



        /* Three columns galleries in text responsive. */

        .small .text .gallery-columns-3 .gallery-item {
            width: 100% !important;
        }

        .mobile .text .gallery-columns-3 .gallery-item {
            width: 50% !important;
        }

        .mobile .text .gallery-columns-3 .gallery-item:nth-of-type(2n+1) {
            clear: left;
        }

        .tablet .text .gallery-columns-3 .gallery-item {
            width: 33.333333% !important;
        }

        .tablet .text .gallery-columns-3 .gallery-item:nth-of-type(3n+1) {
            clear: left;
        }

        .tablet .text .gallery-columns-3 .gallery-item:nth-of-type(2n+1) {
            clear: none;
        }

        

        /* Four column galeries in text responsive.*/

        .small .text .gallery-columns-4 .gallery-item {
            width: 100% !important;
        }

        .mobile .text .gallery-columns-4 .gallery-item {
            width: 50% !important;
        }

        .mobile .text .gallery-columns-4 .gallery-item:nth-of-type(2n+1) {
            clear: left;
        }

        .tablet .text .gallery-columns-4 .gallery-item {
            width: 33.333333% !important;
        }

        .tablet .text .gallery-columns-4 .gallery-item:nth-of-type(3n+1) {
            clear: left;
        }

        .tablet .text .gallery-columns-4 .gallery-item:nth-of-type(2n+1) {
            clear: none;
        }

        .laptop .text .gallery-columns-4 .gallery-item {
            width: 25% !important;
        }
        
        .laptop .text .gallery-columns-4 .gallery-item:nth-of-type(4n+1) {
            clear: left;
        }

        .laptop .text .gallery-columns-4 .gallery-item:nth-of-type(3n+1) {
            clear: none;
        }


        
        /* Five column galleries in text responsive. */

        .small .text .gallery-columns-5 .gallery-item {
            width: 100% !important;
        }

        .mobile .text .gallery-columns-5 .gallery-item {
            width: 50% !important;
        }

        .mobile .text .gallery-columns-5 .gallery-item:nth-of-type(2n+1) {
            clear: left;
        }

        .tablet .text .gallery-columns-5 .gallery-item {
            width: 33.333333% !important;
        }

        .tablet .text .gallery-columns-5 .gallery-item:nth-of-type(3n+1) {
            clear: left;
        }

        .tablet .text .gallery-columns-5 .gallery-item:nth-of-type(2n+1) {
            clear: none;
        }

        .laptop .text .gallery-columns-5 .gallery-item {
            width: 20% !important;
        }

        .laptop .text .gallery-columns-5 .gallery-item:nth-of-type(3n+1) {
            clear: none;
        }

        .laptop .text .gallery-columns-5 .gallery-item:nth-of-type(5n+1) {
            clear: left;
        }



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

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



    .gform_wrapper {
        padding: 0;
    }

        /**
         * Silly and annoying "!" importants are necessary here because Gravity
         * forms outputs their fields in an unordered list, to which some 
         * margins and paddings are added when they are found inside a text 
         * block.
         */

        .gform_wrapper ul {
            list-style-type: none;
            margin: 0 !important;
            padding: 0 !important;
        }

        .gform_wrapper ul li {
            padding: 0 0 1.5rem 0 !important;
        }

        .gfield_required {
            display: inline-block;
            margin-left: 0.5rem;
        }

        .gform_wrapper .validation_error {
            font-size: 80%;
            margin-bottom: 1rem;
        }

        .gform_wrapper .validation_message {
            margin-bottom: 0;
            font-size: 80%;
            display: inline-block;
        }

        .gfield_description {
            font-size: 80%;
        }

        .gform_wrapper input, 
        .gform_wrapper textarea,
        .gform_wrapper select {
            width: 100%;
        }

        .gform_wrapper input[type="submit"] {
            display: inline-block !important;
            width: auto;
            font-size: inherit;
        }

        .gfield_error input,
        .gfield_error textarea,
        .gfield_error select {
            background: repeating-linear-gradient(-45deg, var(--color-gray-light-x) 0, var(--color-gray-light) 1rem);
        }

        .gform_wrapper .gfield_radio li,
        .gform_wrapper .gfield_checkbox li {
            padding-bottom: 0 !important;
        }

            .gfield_radio input,
            .gfield_checkbox input,
            .gfield_radio label,
            .gfield_checkbox label {
                display: inline;
                width: auto;
                height: auto;
                line-height: 1;
            }

            .gfield_radio label,
            .gfield_checkbox label {
                padding-left: 0.5em;
            }

        .gform_ajax_spinner {
            width: auto !important;
            height: auto !important;
            margin-left: 2rem;
        }

        .text .gform_confirmation_message {
            margin-bottom: var(--text-rhythm);
        }



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

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



    pre.vanilla-debug {
        padding: 2rem;
        outline: 0.1rem dotted var(--color-red);
        margin: 0 0 2rem 0;
        position: relative;
        font-size: 90%;
    }

    pre.vanilla-debug::before {
        position: absolute;
        top: 0;
        left: 0;
        content: "vanilla";
        outline: 0.1rem dotted var(--color-red);
        font-size: 75%;
    }