/*
Theme Name: Child Parrocchia // Click - MR Design
Theme URI: https://www.campoboelamaddalena.it.
Version: 1.0
Description: Child Parrocchia // Click - MR Design
Author: Click! Web & Comunicazione - MR Desing
Author URI: https://www.clickstudiografico.com
Template: Divi
*/


/***
 *      ██    ███    ███    ██████     ██   
 *     ██     ████  ████    ██   ██     ██  
 *    ██      ██ ████ ██    ██████       ██ 
 *     ██     ██  ██  ██    ██   ██     ██  
 *      ██    ██      ██    ██   ██    ██   
 *                                          
 *             info@clickstudio.it                                
 */


/* ! GENERICO */

@font-face {
    font-family: 'emoji';
    src: url('emojione-svg.woff2') format('woff2');
}

.emoji {
    font-family: 'emoji';
    font-size: 30px;
    text-align: center;
}

#footer-info {
    text-align: center;
    color: #666;
    padding-bottom: 10px;
    float: none;
}

.ancora {
    margin-bottom: 0.2em;
}


/* ! STILE MENU */

.nav li li {
    line-height: 1.4em;
}

#top-menu li li a {
    padding: 6px 8px;
    width: 200px;
}


/* ! HERO SECTION */

.hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    justify-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.hero-title h1 {
    overflow-wrap: normal;
}

.hero-title h2 {
    overflow-wrap: normal;
}

strong.evidenza {
    background-color: #f9e5f7;
    padding: 0 0.3em;
    border-radius: 3px;
}


/* ! pallini slider */

.et-pb-controllers a {
    border-radius: 3px;
    width: 28px;
    height: 4px;
}


/* ! BLOG */


/*  -----------------------------------------------------------------------------------------------
BOLLETTINO
--------------------------------------------------------------------------------------------------- */

.titolo-bollettino {
    margin-bottom: 10px;
}


/* ! CTA */

.pa-inline-buttons .et_pb_button_module_wrapper {
    display: inline-block;
}

.pa-inline-buttons {
    text-align: center !important;
}

strong.highlight {
    background-color: transparent;
    padding: 0 0.2em;
}

strong.highlight:hover {
    padding: 0 0.2em;
    border-bottom: 3px dotted #d6b46a;
    opacity: 1;
    transition: all 0.3s ease-in-out;
    border-radius: 3px;
}


/* ! ------------------------------------------------------------------------------------------------------------ 
--------------------------------------------------------MASONRY GRID  ----------------------------------- */


/* ! 

### Change grid element size ###

If you want to change the size of a grid element, you have to change the class of the row. The basic grid has the class dv-11. The first number is for the width (column) and the second number for the height (rows).

### Change grid column number ###

If you want to change the number of columns your grid has, you have to change the grid-template-columns property.
Search in the CSS (Ctrl + F) for grid-template-columns and replace the value with e.g. repeat(3, 1fr) !important;
Now you have 3 columns. In this way, you can also change the number of columns on tablet and mobile.

### Change grid gap ###

Just change the grid-gap value in the CSS file to your desired value.
 */


/* --------------------- GRID STYLE ------------------- */


/* create grid */

.dv-grid {
    display: grid;
    grid-auto-flow: dense;
    grid-gap: 5px;
    /* space between elements */
    grid-template-columns: repeat(6, 1fr) !important;
    grid-template-rows: repeat(5, 180px);
}


/* tablet */

@media (min-width: 768px) and (max-width: 980px) {
    .dv-grid {
        grid-template-rows: repeat(8, 150px);
        /* change number of rows */
        grid-template-columns: repeat(4, 1fr) !important;
        /* change number of columns */
    }
}


/* phones */

@media (max-width: 767px) {
    .dv-grid {
        grid-template-rows: repeat(10, 120px);
        /* change number of rows */
        grid-template-columns: repeat(3, 1fr) !important;
        /* change number of columns */
    }
}


/* remove padding and margin of rows and set width */

.dv-grid .et_pb_row {
    padding: 0px !important;
    margin: 0px !important;
    width: 100% !important;
}


/* set height of row */

.dv-grid .et_pb_column,
.dv-masonry .et_pb_column {
    height: 100% !important;
}


/* set height of image */

.dv-grid .et_pb_image,
.dv-masonry .et_pb_image {
    height: 100% !important;
}

.dv-grid .et_pb_image_wrap,
.dv-masonry .et_pb_image_wrap {
    width: 100% !important;
    height: 100% !important;
}

.dv-grid .et_pb_image img,
.dv-masonry .et_pb_image img {
    height: inherit !important;
    width: 100% !important;
    object-fit: cover;
}


/* --------------------- GRID SIZES ------------------- */


/* 1 column */

.dv-11 {
    grid-column: span 1;
}

.dv-12 {
    grid-column: span 1;
    grid-row: span 2;
}

.dv-13 {
    grid-column: span 1;
    grid-row: span 3;
}

.dv-14 {
    grid-column: span 1;
    grid-row: span 4;
}

.dv-15 {
    grid-column: span 1;
    grid-row: span 5;
}

.dv-16 {
    grid-column: span 1;
    grid-row: span 6;
}

.dv-17 {
    grid-column: span 1;
    grid-row: span 7;
}


/* 2 column */

.dv-21 {
    grid-column: span 2;
    grid-row: span 1;
}

.dv-22 {
    grid-column: span 2;
    grid-row: span 2;
}

.dv-23 {
    grid-column: span 2;
    grid-row: span 3;
}

.dv-24 {
    grid-column: span 2;
    grid-row: span 4;
}

.dv-25 {
    grid-column: span 2;
    grid-row: span 5;
}

.dv-26 {
    grid-column: span 2;
    grid-row: span 6;
}

.dv-27 {
    grid-column: span 2;
    grid-row: span 7;
}


/* 3 column */

.dv-31 {
    grid-column: span 3;
    grid-row: span 1;
}

.dv-32 {
    grid-column: span 3;
    grid-row: span 2;
}

.dv-33 {
    grid-column: span 3;
    grid-row: span 3;
}

.dv-34 {
    grid-column: span 3;
    grid-row: span 4;
}

.dv-35 {
    grid-column: span 3;
    grid-row: span 5;
}

.dv-36 {
    grid-column: span 3;
    grid-row: span 6;
}

.dv-37 {
    grid-column: span 3;
    grid-row: span 7;
}


/* --------------------- MASONRY GRID STYLE ------------------- */


/* create grid */

.dv-masonry {
    display: grid;
    grid-gap: 5px;
    /* space between elements */
    grid-template-columns: repeat(4, 1fr) !important;
    grid-template-rows: repeat(14, 100px);
}


/* tablet */

@media (min-width: 768px) and (max-width: 980px) {
    .dv-masonry {
        grid-template-rows: repeat(20, 70px);
        /* change number of rows */
        grid-template-columns: repeat(3, 1fr) !important;
        /* change number of columns */
    }
}


/* phones */

@media (max-width: 767px) {
    .dv-masonry {
        grid-template-rows: repeat(25, 50px);
        /* change number of rows */
        grid-template-columns: repeat(2, 1fr) !important;
        /* change number of columns */
    }
}


/* remove padding and margin of rows and set width */

.dv-masonry .et_pb_row {
    padding: 0px !important;
    margin: 0px !important;
    width: 100% !important;
}