:root { 
    --jumbotron-padding-y: 3rem; 
    --primary-color: #ec4e20;
    --secondary-color: #353531;
}

html, body {
    color: var(--secondary-color);
}

button.col-4 {
    padding: 0;
}
.hidden { display: none; }
.jumbotron {
    padding: 50px 0;
    margin-bottom: 0;
    background-color: #fff;
}

.jumbotron p:last-child { margin-bottom: 0; }
.jumbotron-heading { font-weight: 300; }
.jumbotron .container { max-width: 40rem; }

footer {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

footer p { margin-bottom: .25rem; }
.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }

.symbol-card { position: relative; }

.symbol-on-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background-repeat: no-repeat;
    background-size: cover;
}

.symbol-on-pet {
    top: 12%;
    left: 35%;
}

.symbol-on-schoen {
    top: 165px;
    left: 300px;
}

.symbol-on-skateboard {
    top: 180px;
    left: 240px;
}

.symbol-BOOM { background-image: url('/img/symbols/symbol-BOOM!.png'); }
.symbol-BAM { background-image: url('/img/symbols/symbol-BAM.png'); }
.symbol-BOO { background-image: url('/img/symbols/symbol-BOO.png'); }
.symbol-BANG { background-image: url('/img/symbols/symbol-BANG.png'); }
.symbol-LOL { background-image: url('/img/symbols/symbol-LOL.png'); }
.symbol-OH { background-image: url('/img/symbols/symbol-OH.png'); }
.symbol-OMG { background-image: url('/img/symbols/symbol-OMG!.png'); }
.symbol-POW { background-image: url('/img/symbols/symbol-POW.png'); }
.symbol-WOW { background-image: url('/img/symbols/symbol-WOW.png'); }


@media (max-width: 566px) {
    .order-image-product {
        width: 200px;
    }
    .symbol-on-pet {
        width: 50px;
        height: 50px;
        top: 55px;
        left: 75px;
    }
    .symbol-on-schoen {
        width: 50px;
        height: 50px;
        top: 60px;
        left: 140px;
    }
    .symbol-on-skateboard {
        width: 45px;
        height: 45px;
        top: 80px;
        left: 85px;
    }
}
@media (min-width: 576px) { 
    .symbol-on-pet {
        width: 140px;
        height: 140px;
        top: 130px;
        left: 180px;
    }
    
    .symbol-on-schoen {
        width: 120px;
        height: 120px;
        top: 170px;
        left: 350px;
    }
    
    .symbol-on-skateboard {
        width: 115px;
        height: 115px;
        top: 205px;
        left: 240px;
    }
}
@media (min-width: 768px) { 
    .symbol-on-pet {
        width: 100px;
        height: 100px;
        top: 90px;
        left: 110px;
    }
    
    .symbol-on-schoen {
        width: 80px;
        height: 80px;
        top: 110px;
        left: 230px;
    }
    
    .symbol-on-skateboard {
        width: 85px;
        height: 85px;
        top: 130px;
        left: 150px;
    }
}
@media (min-width: 992px) {  
    .symbol-on-pet {
        width: 130px;
        height: 130px;
        top: 120px;
        left: 150px;
    }
    
    .symbol-on-schoen {
        width: 110px;
        height: 110px;
        top: 150px;
        left: 310px;
    }
    
    .symbol-on-skateboard {
        width: 115px;
        height: 115px;
        top: 180px;
        left: 240px;
    }
}
@media (min-width: 1200px) {  
    .symbol-on-pet {
        width: 175px;
        height: 175px;
        top: 140px;
        left: 190px;
    }
    
    .symbol-on-schoen {
        width: 130px;
        height: 130px;
        top: 190px;
        left: 350px;
    }
    
    .symbol-on-skateboard {
        width: 125px;
        height: 125px;
        top: 220px;
        left: 240px;
    }
}
@media (min-width: 1400px) { 
    .symbol-on-pet {
        width: 200px;
        height: 200px;
        top: 150px;
        left: 210px;
    }
    
    .symbol-on-schoen {
        width: 170px;
        height: 170px;
        top: 190px;
        left: 430px;
    }
    
    .symbol-on-skateboard {
        width: 150px;
        height: 150px;
        top: 250px;
        left: 240px;
    }
}