/***************************************************************
# Tags
***************************************************************/

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html,
body {
    background: whitesmoke;
    font-family: 'Open Sans', sans-serif;
    line-height: 1.4;
}

h1,
h2,
h3,
h4,
h5,
p {
    margin: 1rem 0;
}

p {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #828282;
}

img { width: 100%; }



/***************************************************************
# Content
***************************************************************/

.wrapper {
    width: 100vw;
    height: 100vh;
}

.grid {
    display: flex;
    flex-flow: wrap;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.grid__col {
    width: 25%;
    height: 100%;
}

#grid-col-1 { margin-top: -20%; }
#grid-col-2 { margin-top: 0%; }
#grid-col-3 { margin-top: -20%; }
#grid-col-4 { margin-top: 0%; }

.button {
    
display: inline-block;
    
color: white;
    
background: #1c1c1c;
    
text-decoration: none;
    
padding: 0.8em 1.6em;
    
border-radius: 0.3em;
    
font-weight: bold;
}



/***************************************************************
# Swiper
***************************************************************/

.swiper-container { height: 100%; }
.swiper-slide { height: auto; }


/***************************************************************
# Cards
***************************************************************/

.card {
    background: white;
    padding: 5%;
    border-radius: 0.3em;
    box-shadow: 0 0.3em 0.3em rgba(0, 0, 0, 0.1);
    margin: 3%;
    display: block;
    color: inherit;
    text-decoration: none;
}

.card--orange {
    background: #ED6B24;
    color: white;
}

.card--loading {
    text-align: center;
    padding: 60% 5%;
    font-size: 2em;
    color: #656161;
}

.card__image {
    padding: 30% 5%;
    text-align: center;
    background: whitesmoke;
}

.card__title {
    font-size: 1.6rem;
    font-weight: bold;
    margin: 1rem 0;
    line-height: 1.2;
    color: #656161;
}

.card__content {}


.card--orange .card__title,
.card--orange .card__content,
.card--orange p {
    color: inherit;
}




/***************************************************************
# Responsive
***************************************************************/

@media (max-width: 1199.98px) {}
@media (max-width: 991.98px) {

    .card__title { font-size: 1.4rem; }
    .grid__col { width: 33.3333%; }
    .grid__col--4 { display: none; }

}

@media (max-width: 767.98px) {

    .grid__col { width: 50%; }
    .grid__col--3 { display: none; }


}

@media (max-width: 575.98px) {

    p { font-size: inherit; }
    .card__title { font-size: 1.2rem; }
    .card__content { font-size: 0.8rem; }

}