/*
Theme Name: Computer
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
/* ==========================
   D GRID SYSTEM
   ========================== */

.d_grid{
    --d-gap:12px;
}

/* GAP OPTIONS */

.d_gap_0{--d-gap:0px;}
.d_gap_4{--d-gap:4px;}
.d_gap_8{--d-gap:8px;}
.d_gap_12{--d-gap:12px;}
.d_gap_16{--d-gap:16px;}
.d_gap_20{--d-gap:20px;}
.d_gap_24{--d-gap:24px;}
.d_gap_32{--d-gap:32px;}

/* ==========================
   RESET FLATSOME GUTTER
   ========================== */

.d_grid .row{
    margin-left:0!important;
    margin-right:0!important;
}

.d_grid .col,
.d_grid .columns,
.d_grid .gallery-item{
    padding-left:0!important;
    padding-right:0!important;
    padding-bottom: 0 !important;
}

.d_grid > .col {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.d_grid .row:not(.row-collapse){
    display:flex;
    flex-wrap:wrap;
    gap:var(--d-gap);
}

/* ==========================
   LARGE COLUMNS
   ========================== */

.d_grid .large-columns-1>.col{
    flex:0 0 100%;
    max-width:100%;
}

.d_grid .large-columns-2>.col{
    flex:0 0 calc((100% - var(--d-gap))/2);
    max-width:calc((100% - var(--d-gap))/2);
}

.d_grid .large-columns-3>.col{
    flex:0 0 calc((100% - (var(--d-gap) * 2))/3);
    max-width:calc((100% - (var(--d-gap) * 2))/3);
}

.d_grid .large-columns-4>.col{
    flex:0 0 calc((100% - (var(--d-gap) * 3))/4);
    max-width:calc((100% - (var(--d-gap) * 3))/4);
}

.d_grid .large-columns-5>.col{
    flex:0 0 calc((100% - (var(--d-gap) * 4))/5);
    max-width:calc((100% - (var(--d-gap) * 4))/5);
}

.d_grid .large-columns-6>.col{
    flex:0 0 calc((100% - (var(--d-gap) * 5))/6);
    max-width:calc((100% - (var(--d-gap) * 5))/6);
}

.d_grid .large-columns-7>.col{
    flex:0 0 calc((100% - (var(--d-gap) * 6))/7);
    max-width:calc((100% - (var(--d-gap) * 6))/7);
}

.d_grid .large-columns-8>.col{
    flex:0 0 calc((100% - (var(--d-gap) * 7))/8);
    max-width:calc((100% - (var(--d-gap) * 7))/8);
}

/* ==========================
   MEDIUM
   ========================== */

@media(max-width:849px){

    .d_grid .medium-columns-1>.col{
        flex:0 0 100%;
        max-width:100%;
    }

    .d_grid .medium-columns-2>.col{
        flex:0 0 calc((100% - var(--d-gap))/2);
        max-width:calc((100% - var(--d-gap))/2);
    }

    .d_grid .medium-columns-3>.col{
        flex:0 0 calc((100% - (var(--d-gap) * 2))/3);
        max-width:calc((100% - (var(--d-gap) * 2))/3);
    }

    .d_grid .medium-columns-4>.col{
        flex:0 0 calc((100% - (var(--d-gap) * 3))/4);
        max-width:calc((100% - (var(--d-gap) * 3))/4);
    }

    .d_grid .medium-columns-5>.col{
        flex:0 0 calc((100% - (var(--d-gap) * 4))/5);
        max-width:calc((100% - (var(--d-gap) * 4))/5);
    }

    .d_grid .medium-columns-6>.col{
        flex:0 0 calc((100% - (var(--d-gap) * 5))/6);
        max-width:calc((100% - (var(--d-gap) * 5))/6);
    }

}

/* ==========================
   SMALL
   ========================== */

@media(max-width:549px){

    .d_grid .small-columns-1>.col{
        flex:0 0 100%;
        max-width:100%;
    }

    .d_grid .small-columns-2>.col{
        flex:0 0 calc((100% - var(--d-gap))/2);
        max-width:calc((100% - var(--d-gap))/2);
    }

    .d_grid .small-columns-3>.col{
        flex:0 0 calc((100% - (var(--d-gap) * 2))/3);
        max-width:calc((100% - (var(--d-gap) * 2))/3);
    }

    .d_grid .small-columns-4>.col{
        flex:0 0 calc((100% - (var(--d-gap) * 3))/4);
        max-width:calc((100% - (var(--d-gap) * 3))/4);
    }

    .d_grid .small-columns-5>.col{
        flex:0 0 calc((100% - (var(--d-gap) * 4))/5);
        max-width:calc((100% - (var(--d-gap) * 4))/5);
    }

    .d_grid .small-columns-6>.col{
        flex:0 0 calc((100% - (var(--d-gap) * 5))/6);
        max-width:calc((100% - (var(--d-gap) * 5))/6);
    }

}

/* ==========================
   FIX FLATSOME WIDTH
   ========================== */

.d_grid .row,
.d_grid .row-small,
.d_grid .row-large{
    max-width:none;
}


@media only screen and (max-width: 48em) {



}