@font-face { font-family: 'CABIN'; src: url('/fonts/Cabin-Regular.otf') format('opentype'); }

html * {
    font-family: CABIN;
}

body {
    background-image: url("images/body_background_blue.jpeg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    padding-top: 120px;
    color: #888888;
}

/* respect the height of the navbar when directing to page content */
:target {
    display: block;
    position: relative;
    top: -60px;
    visibility: hidden;
}

@media screen and (max-width: 768px) {
    .row-offcanvas {
        position: relative;
        -webkit-transition: all 0.25s ease-out;
        -moz-transition: all 0.25s ease-out;
        transition: all 0.25s ease-out;
        background:#ecf0f1;
    }

    .row-offcanvas-left,
    .sidebar-offcanvas {
        left: -40%;
    }

    .row-offcanvas-left.active {
        left: 40%;
    }

    .sidebar-offcanvas {
        position: absolute;
        top: 0;
        width: 40%;
        margin-left: 12px;
    }
}

#sidebar {
    padding:15px;
    margin-top:10px;
}

.navbar {
    background: #22731c;
}

.navbar-nav .nav-link {
    color: #dddddd !important;
    font-weight: bold;
}

.nav-item.active .nav-link,
.nav-item:hover .nav-link {
    color: #ffffff !important;
    font-weight: bold;
}

.page-footer {
    color: #ffffff;
}

/* See here: https://smartlazycoding.com/bootstrap-tutorial/social-media-share-buttons-font-awesome-css-bootstrap */
/* Social Button Stype */
.scl-btn {
    padding: 15px;
    font-size: 25px;
    width: 55px;
    text-align: center;
    text-decoration: none;
    margin:5px;
    color: white;
}
/* Hover Effect */
.scl-btn:hover {
    opacity: 0.8;
    text-align: center;
    text-decoration: none;
    color: white;
}
/* Round buttons */
.scl-crcl {
    border-radius: 50%;
}
/* Round Corners */
.scl-rnd {
    border-radius:5px;
}
/* Brand Colors */
.fa-facebook-f { background: #3B5998; }
.fa-twitter { background: #55ACEE; }
.fa-at, .fa-envelope { background: #888888; }

/* https://stackoverflow.com/questions/37751375/instagram-new-logo-css-background/53379365#53379365 */
.fa-instagram{
    background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%),
                radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%),
                radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%),
                radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%),
                radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%),
                radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%),
                radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent),
                linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
}

.download-fab {
    background: #888888;
    position: fixed; bottom: 0px; right: 0px;
}

.animation-fade-out {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s linear 300ms, opacity 300ms;
}

.animation-fade-in {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s linear 0s, opacity 300ms;
}

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
    background-color: #0099ff !important;
    border-color: #0099ff !important;
}

.card {
    border: none;
}

.carousel-control-prev {
    margin-left: -75px;
}

.carousel-control-next {
    margin-right: -75px;
}

.carousel-indicators {
    margin-bottom:-50px;
}

.carousel-indicators li {
    display: inline-block;
    background-color: #888888;
}

.carousel-indicators .active {
    background-color: #0099ff;
}

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230099ff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230099ff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}

.outlined-text-headline {
    color: white;
    text-shadow: -1px 0 #0099ff, 0 1px #0099ff, 1px 0 #0099ff, 0 -1px #0099ff;
}

.outlined-text-subheadline {
    color: white;
    text-shadow: -1px 0 #0099ff, 0 1px #0099ff, 1px 0 #0099ff, 0 -1px #0099ff;
}

.transparent-background {
    background: rgba(255, 255, 255, 0.90);
}

.sp-compare-blue {
    color: #0099ff;
}

.sp-compare-green {
    color: #00bb00;
}

.sp-compare-gray {
    color: #aaaaaa;
}