body {
    font-family: "Montserrat", sans-serif !important;
}

.text-lobster {
    font-family: 'Lobster', cursive !important;
}


#progressbar {
    margin-bottom: 30px;
    overflow: hidden;
    /*CSS counters to number the steps*/
    counter-reset: step;
}
#progressbar li {
    list-style-type: none;
    color: #343a40;
    text-transform: uppercase;
    font-size: 9px;
    width: 25%;
    float: left;
    position: relative;
}
#progressbar li:before {
    content: counter(step);
    counter-increment: step;
    width: 20px;
    line-height: 20px;
    display: block;
    font-size: 10px;
    color: #333;
    background: transparent;
    border-radius: 3px;
    margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
    content: '';
    width: 100%;
    height: 2px;
    background: transparent;
    position: absolute;
    left: -50%;
    top: 9px;
    z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
    /*connector not needed before the first step*/
    content: none;
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before,  #progressbar li.active:after{
    background: #FFC124 ;
    color: #343a40;
}

/*#progressbar li:hover:before{*/
/*    cursor: pointer;*/
/*    background: #2499ff;*/
/*}*/

.main-pictures {
    height: 192px !important;
}

.wix-box-text {
    font-size: 16px
}

.bg-custom-wave {
    background: url("/assets/current/media/background/vague.png") no-repeat center center;
    background-size: cover;
}

.font-size-75-100 {
    font-size: 1rem;
}

#mainPresentation, .mainPresentation {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

.community-code {
    background: linear-gradient(-45deg, #52caee, #3c53e7, #23a6d5, #23c6d5);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

.community-code-transparent {
    background: linear-gradient(-45deg, rgba(82, 202, 238,.5), rgba(63,83,231,.5), rgba(35,166,213,.5), rgba(32,198,213,.5));
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}
.personal-code {
    /*background: linear-gradient(-45deg, #ee7752, #e73c7e, #d5237f, #d52347);*/
    background: linear-gradient(-45deg, #ee5752, #c61035, #d52355, #e73c64);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}
.personal-code-transparent {
    /*background: linear-gradient(-45deg, #ee7752, #e73c7e, #d5237f, #d52347);*/
    background: linear-gradient(-45deg, rgba(238,87,82,.33), rgba(198,16,53,.33), rgba(213,35,85,.33), rgba(231,60,100,.33));
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

.gain-code {
    background: linear-gradient(-45deg, #26ba61, #12b058, #23d588, #1ec8af);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

.pink-code {
    background: linear-gradient(-45deg, #f06292, #e91e63, #ec407a, #f48fb1);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

.yellow-code {
    background: linear-gradient(-45deg, #ffc100, #ff4d00, #ff9a00, #ffc100);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

.presse-color {
    background: linear-gradient(-45deg, #591C37, #343a40);
    background-size: 1000% 1000%;
    animation: gradient 15s ease infinite;
}

.dark-color {
    background: linear-gradient(-45deg, #373b40, #272c30, #51585f, #616970);
    background-size: 1000% 1000%;
    animation: gradient 15s ease infinite;
}

.add-type {
    background: transparent;
    transition-duration: 333ms !important;
}
.add-type:hover {
    background: #f48fb1;
    border-color: #e91e63 !important;
    color: white !important;
}

.dark-color-transparent {
    background: linear-gradient(-45deg, rgba(55,59,64,.5), rgba(39,44,48,.5), rgba(81,88,95,.5), rgba(97,105,112,.5));
    background-size: 1000% 1000%;
    animation: gradient 15s ease infinite;
}

.grey-color {
    background: linear-gradient(-45deg, #8f98a5, #859099, #8c959f, #96a2ac);
    background-size: 1000% 1000%;
    animation: gradient 15s ease infinite;
}

.white-color {
    background: linear-gradient(-45deg, #cfd5dd, #bcc2c6, #ccd1d6, #e3eaee);
    background-size: 1000% 1000%;
    animation: gradient 15s ease infinite;
}
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@media (min-width: 576px) {
    .main-pictures {
        height: 360px !important;
    }
}

@media (min-width: 768px) {
    #feedContent .card-columns {
        column-gap: unset !important;
        column-count: unset !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between;
    }
    #feedContent .card-columns .card {
        width: 33% !important;
    }
    .main-pictures {
        height: 420px !important;
    }
    .wix-box-text {
        font-size: 20px;
    }
    .font-size-75-100 {
        font-size: .75rem;
    }
}

@media (min-width: 992px) {
    .main-pictures {
        height: 480px !important;
    }
}

@media (min-width: 1200px) {
    .main-pictures {
        height: 540px !important;
    }
}