/* This file includes CSS to override Bootstrap defaults */

/* Typography */
body{
    font-family: 'Dancing Script', sans-serif;
    font-weight: 500;
}
h1, h2, h3, h4, h5, h6{
    font-family: 'Marck Script', serif;
}
.badge{
    font-family: 'Dancing Script', sans-serif;
}

/* Wordmark */
#wordmark {
    font-family: 'Marck Script', serif;
    font-size: 1.4em;
}
#wordmark span {
    font-family: 'Dancing Script', sans-serif;
    font-weight: 300;
    font-size: 1.4em;
}

/* Hero */
#hero{
    background-image: url(../img/vancouver.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 75% 55%;
    background-blend-mode: darken;
}

#process #hero{
    background-image: url(../img/collage.jpg); 
    background-size: 50%;
    background-blend-mode: normal;
    opacity: 70%;
}

#levelofskills{
    background-image: url(../img/torontoislands.png);
    background-size: cover;
    background-position: 80% 50%;
    background-blend-mode: light;
}

#levelofskills .row{
    background-color: #f1f3f3;  
    opacity: 85%;
}

#about .progress{
    height: 100%;
}

#tabular{
    background-image: url(../img/cesky.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.table-striped > tr:nth-child(odd){
    background-color: green!important;
}

table tr{
    padding: 20px!important;
    margin: 20px!important;
}

#appeal{
    background-image: url(../img/vancouver.jpg);
    background-size: cover;
    background-position: 80% 50%;
    background-blend-mode: light;
}

#design #hero {
    background-image: none;
}

.bg-dark {
    background-color: #bababa!important;
}

#design #hero video{
    object-fit: cover;
    mix-blend-mode: hard-light;
    opacity: 1!important;
    background-color: transparent!important;
}

#design .carousel-caption{
    background: #00000066;
}

/* Dark background */
.bg-light {
    background-color: #eefaf7!important;
}

.dropdown-menu-dark {
    background-color: $gray-900;
}

.bg-secondary {
    background-color: #fff!important;
}

.dropdown-menu-dark .dropdown-item.active, 
.dropdown-menu-dark .dropdown-item:active {
    background-color: $gray-200;
}


.bg-info{
    background-color: #ddf5f0!important;
}

.designprocess {
padding: 25px!important;
}