body {
    position: relative;
    /* font-family: 'Josefin Slab', serif; */
    font-family: 'Comfortaa', sans-serif; /*cursive;*/
    background-color: #000;
}

/*
.navbar-nav ul {
    text-align: center;
    margin-top: 300px;
}
*/

.body-text {
        font-size: medium;
    }

.loading-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 2000;
}

.fa-grande {
    font-size: 4em;
}

.full-page-desk-bg {
    display: none;
}

.full-page-synth-bg {
    display: none;
}

.loading-mask-fade {
    background-color: rgba(0, 0, 0, 0.0);
    -webkit-transition: background-color 2.5s ease-in-out;
    -moz-transition: background-color 2.5s ease-in-out;
    -o-transition: background-color 2.5s ease-in-out;
    transition: background-color 2.5s ease-in-out;
}

.loading-animation {
    color: white;
    width: 50px;
    height: 50px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 2001;
}

.contact-form-container {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1999;
}

.contact-form {
    color: #fff;
    position: relative;
    top: 375px;
    left: 0;
    width: 100%;
    /* background-color: rgba(0, 0, 0, 0.6); */
    /*z-index: 1999;*/
    
}

.contact-form form.well {
    background-color: rgba(0, 0, 0, 0.0);
    border: none;
}

.contact-form-init {
    display: none;    
}

.contact-form-fade-out {
    background-color: rgba(0, 0, 0, 0.0);
    -webkit-transition: background-color .5s ease-in-out;
    -moz-transition: background-color .5s ease-in-out;
    -o-transition: background-color .5s ease-in-out;
    transition: background-color .5s ease-in-out;
}

.contact-form-fade-in {
    display: block;
    background-color: rgba(0, 0, 0, 0.8);
    -webkit-transition: background-color .5s ease-in-out;
    -moz-transition: background-color .5s ease-in-out;
    -o-transition: background-color .5s ease-in-out;
    transition: background-color .5s ease-in-out;
}

.close-form-button {
    text-align: right;
}

#success_message{ display: none;}

.nav>li>a.homelink {
    display: none;
}

/*
.loading-animation-fade {
    background: rgba(255, 255, 255, 0.0);
    background-color: rgba(255, 255, 255, 0.0);
    color: rgba(255, 255, 255, 0.0);
    -webkit-transition: all 2.5s ease-in-out;
    -moz-transition: all 2.5s ease-in-out;
    -o-transition: all 2.5s ease-in-out;
    transition: all 2.5s ease-in-out;
}
*/

.header {
    margin-left: 0px;
    margin-right: 0px;
}

/*
.navbar-default .navbar-nav>li>a {
    color: #777;
} */

/* work out mouse over issues w/transitions
.navbar-default .navbar-nav>li.active>a,
.navbar-inverse .navbar-nav>li.active>a {
    font-weight: bolder;
    color: rgb(209,114,44);
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
*/

.logo {
    position: absolute;
    z-index: 1031;
}

#header-text {
    color: white;
    text-align:  right;
    font-size: 4em;
    right: 5%;
    /* width: 465px; */
}

/* Container controls positioning relative to nav */
.hero-quote-container {
  position: relative;
  top: -300px;
  width: 100%;
  height: 0px;
  pointer-events: none; /* allows nav clicks through if overlapping */
}

/* Main quote block */
.hero-quote {
  position: relative; /* Change to relative if you want it ABOVE nav instead */
  top: 0px;        /* Adjust to float over nav */
  /* margin: 40px auto 0 auto; */
  left: 50%;
  transform: translateX(-50%);
  
  max-width: 900px;
  padding: 40px 60px;

  font-size: clamp(1.6rem, 2.8vw, 2.6rem);
  font-weight: 500;
  line-height: 1.25;

  color: rgba(255, 255, 255, 0.92);
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(6px);

  border-radius: 18px;

  z-index: 999; /* Raise above nav if needed */
}

/* Quote paragraph */
.hero-quote p {
  margin: 0;
}

/* Big quote marks */
.quote-mark {
  position: absolute;
  font-size: 120px;
  font-weight: 700;
  opacity: 0.15;
  pointer-events: none;
}

/* Left quote */
.quote-mark.left {
  top: -10px;
  left: 10px;
}

/* Right quote */
.quote-mark.right {
  bottom: -60px;
  right: 10px;
}

.about-anchor {
    position: relative;
    top: -100px;
}

#name-tag {
    /*color: orangered;*/
    color: #d45520;
    text-align: right;
    font-size: 0.8em;
    width: 375;
    font-family: 'Monoton', cursive;
}

#skills {
    opacity: 0.5;
    line-height: 1.4;
    font-size: 0.4em;
}

#engineering {
        width: 900px;
}

#resume {
    font-size: 12pt;
}

/*

.soundcloud-wrapper {
    width: 100%;
}

.soundcloud-wrapper iframe {
    width: 100%;
    min-height: 300px;
    height: 300px;
    display: block;
}
*/

@media (min-width: 1200px) {
    #header-text {
        position: absolute;
        top: 20%;
        right: 5%;
    }
    body {
        font-size: 18px;
    }
    .body-text {
        font-size: large;
    }
    h2 {
        font-size: 48px;
    }
    .logo {
        top: 600px;
        left: 100px;
    }
    #about {
        width: 900px;
        padding-bottom: 35px; /* padding top is handled in .anchor */
    }
    #music {
        width: 900px;
    }
    #music div.nav-up {
        padding-bottom: 10%;
    }
    .music-box-wrapper {
        padding: 40px 0px 40px 0px;
    }
    .music-box {
        width: 260px;
        margin-right: 40px;
    }
    .music-text {
       width: 400px;
    }
    #design {
        width: 600px;
    }
    #design div.nav-up {
        padding-bottom: 10%;
    }
    #designCarousel {
        padding-left: 0px;
    }
    #designCarousel div {
        height: 600px;
    }
    .design-text {
        height: 400px;
        padding-top: 40%;
    }
    .design-chris-slide {
        padding-top: 40px;
    }
    .design-ego-slide {
        padding-top: 100px;
    }
    .custom-carousel-control {
        display: block;
    }
    .carousel-caption {
        right: 0%;
        left: 0%;
    }
    .top-carousel-indicators {
        width: 345px;   
    }
    #code {
        width: 600px;
    }
    .code-bg {
        width: 400px;
    }
    .code-text {
        width: 400px;
    }
    .bg-image-01 {
        height: 400px;
        background-image: url('/img/bg-desk-02.jpg');
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
    }
    .bg-image-02 {
        height: 600px;
        background-image: url('/img/bg-synth-01.jpg');
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
    }
    .music-bg-image-mask-01 {
        height: 104px;
        background-color: rgb(56,111,144);
        background-image: url('/img/bg-desk-02.jpg');
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
    }
    .bg-image-mask-02 {
        height: 104px;
        background-image: url('/img/bg-synth-01.jpg');
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
    }
    .contact-block {
        width: 1000px;
    }
    .contact-address-block {
        float: left;
        padding-top: 110px;
        padding-left: 60px;
    }
    .contact-logo-block {
        float: left;
        padding-top: 0px;
        padding-left: 85px;
        padding-right: 0px;
    }
    .contact-link-block {
        float: left;
        padding-left: 60px;
        padding-top: 90px;
    }
    .social-media-etc {
        width: 400px;
        margin: 20px auto;
    }
}

@media (max-width: 1199px) {
    /*.logo {
        top: 600px;
        left: 10px;
    }*/
    .logo {
        left: 100px;
    }
   #header-text {
        position: absolute;
        top: 26%;
        /* right: 5%; */
    }
    .body-text {
        font-size: large;
    }
    .bg-image-01 {
        height: 400px;
        background-image: url('/img/bg-desk-02.jpg');
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
    }
    .bg-image-02 {
        height: 600px;
        background-image: url('/img/bg-synth-01.jpg');
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
    }
    .music-bg-image-mask-01 {
        height: 104px;
        background-color: rgb(56,111,144);
        background-image: url('/img/bg-desk-02.jpg');
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
    }
    .bg-image-mask-02 {
        height: 104px;
        background-image: url('/img/bg-synth-01.jpg');
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
    }
    .music-box-wrapper {
        padding: 40px 0px 40px 0px;
    }
    .music-text {
       width: 400px;
    }
    #design {
        width: 600px;
    }
    #designCarousel {
        padding-left: 0px;
    }
    #designCarousel div {
        height: 600px;
    }
    .design-inner div img {
        width: 100%;
        padding-top: 10%;
    }
    .design-text {
        height: 400px;
        padding-top: 40%;
    }
    .design-chris-slide {
        padding-top: 40px;
    }
    .design-ego-slide {
        padding-top: 100px;
    }
    .design-inner div .design-logo-slide {
        width: 450px;
    }
    #design div.nav-up {
        padding-bottom: 10%;
    }
    .custom-carousel-control {
        display: none;
    }
    .carousel-caption {
        right: 0%;
        left: 0%;
    }
    .top-carousel-indicators {
        width: 332px;   
    }
    iframe {
        width: 350px;
        height: 100px;
    }
    #about {
        width: 400px;
        height: auto;
        padding-bottom: 35px; /* padding top is handled in .anchor */
    }
    #music {
        width: 400px;
        height: auto;
    }
    #music div {
        height: auto;
    }
    .music-box-wrapper {
        width: 400px;
        height: auto;
    }
    .music-box {
        width: 350px;
        margin: 10px auto 10px auto;
    }
    #code {
        width: 400px;
    }
    .code-bg {
        width: 400px;
    }
    .code-text {
        width: 400px;
    }
    .contact-block {
        width: 400px;
    }
    .contact-address-block {
        float: left;
        padding-top: 0px;
        padding-left: 110px;
    }
    .contact-logo-block {
        float: left;
        padding-top: 20px;
        padding-left: 50px;
        padding-right: 0px;
    }
    .contact-link-block {
        float: left;
        padding-left: 55px;
        padding-top: 90px;
    }
    .social-media-etc {
        width: 400px;
        margin: 20px auto;
    }
}

@media (min-width: 768px) {
    #navigation li:nth-child(2) {
        margin-top: 0px;
    }

    /* #skills {
        font-size: 0.3em;
    } */
}

@media (max-width: 768px) {
    .logo {
        top: 600px;
        left: 10px;
    }
    .body-text {
        font-size: large;
    }
    #header-text {
        position: absolute;
        top: 20%;
        left: 10px;
        /* width: 90%; */
    }
    #skills {
        font-size: 0.3em;
    }
    /*
    .design-inner div {
        height: 490px;
    }
    */
    .bg-image-01 {
        height: 400px;
        background-image: url('/img/bg-desk-02.jpg');
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        /*background-position: top center;
        background-size: contain;*/
    }
    .bg-image-02 {
        height: 600px;
        background-image: url('/img/bg-synth-01.jpg');
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        /*background-position: top center;
        background-size: contain;*/
    }
    .music-bg-image-mask-01 {
        height: 104px;
        background-color: rgb(56,111,144);
        background-image: url('/img/bg-desk-02.jpg');
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        /*background-position: top center;
        background-size: contain;*/
    }
    .bg-image-mask-02 {
        height: 104px;
        background-image: url('/img/bg-synth-01.jpg');
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        /*background-position: top center;
        background-size: contain;*/
    }
    .music-text {
       width: 350px;
    }
    .design-inner div img {
        width: 265px;
        padding-top: 10%;
    }
    .design-inner div .design-logo-slide {
        width: 300px;
    }
    .design-text {
        /* padding-top: 70px; */
        padding-top: 40%;
    }
    .design-ego-slide {
        padding-top: 30px;
    }
    .design-chris-slide {
        padding-top: 10px;
    }
    #design {
        width: 300px;
        /* padding-top: 10%; */
    }
    #designCarousel {
        width: 300px;
        padding-left: 0px;
    }
    .custom-carousel-control {
        display: none;
    }
    .top-carousel-indicators {
        width: 180px;   
    }  
    iframe {
        width: 300px;
        /* height: 100px; */
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    #about {
        width: 350px;
        height: auto;
        padding-bottom: 35px; /* padding top is handled in .anchor */
    }
    #music {
        width: 350px;
        height: auto;
    }
    #music div {
        height: auto;
    }
    .music-box-wrapper {
        width: 300px;
        height: auto;
        padding: 0px;
    }
    .music-box {
        width: 300px;
        margin: 10px auto 10px auto;
    }
    #code {
        width: 350px;
    }
    .code-bg {
        width: 350px;
    }
    .code-text {
       width: 350px;
    }
    .contact-block {
        width: 350px;
    }
    .contact-address-block {
        float: left;
        padding-top: 0px;
        padding-left: 90px;
    }
    .contact-logo-block {
        float: left;
        padding-top: 20px;
        padding-left: 30px;
        padding-right: 0px;
    }
    .contact-link-block {
        float: left;
        padding-top: 40px;
        padding-left: 30px;
    }
    .social-media-etc {
        width: 400px;
        margin: 20px auto;
    }
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    /*html {
        transform: rotate(-90deg);
        transform-origin: left top;
        width: 100vh;
        overflow-x: hidden;
        position: absolute;
        top: 100%;
        left: 0;
    }*/
    #header-text {
        position: absolute;
        top: 60%;
        left: 0px;
        font-size: 3.5em;
        /* width: 365px; */
    }
    #name-tag {
        font-size: 0.79em;
    }
    #skills {
        line-height: 1.5;
        font-size: .25em;
    }
    .logo {
        left: 20px;
    }
    /* Main quote block */
    .hero-quote {
        position: relative; /* Change to relative if you want it ABOVE nav instead */
        top: 0px;          /* Adjust to float over nav */
        /* margin: 40px auto 0 auto; */
        left: 50%;
        transform: translateX(-50%);
        
        max-width: 480px;
        padding: 30px 20px;

        font-size: clamp(1.0rem, 3.2vw, 2.0rem);
        font-weight: 250;
        line-height: 1.4;

        color: rgba(255, 255, 255, 0.92);
        background: rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(6px);

        border-radius: 18px;

        z-index: 999; /* Raise above nav if needed */
    }
    .quote-mark {
        position: absolute;
        font-size: 80px;
        font-weight: 500;
        opacity: 0.15;
        pointer-events: none;
    }
    .full-page-desk-bg {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: black;
        background-image: url('/img/bg-desk-02-sm.jpg');
        background-repeat: no-repeat;
        z-index: -100;
    }
    .full-page-synth-bg {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: black;
        background-image: url('/img/bg-synth-01-sm1.jpg');
        background-repeat: no-repeat;
        z-index: -101;
    }
    .bg-image-01 {
        height: 400px; /*446px;*/
        /*background-image: url('/img/bg-desk-02-sm1.jpg');*/
        background-image: none;
        /*background-image: none;*/
        /*background-attachment: fixed;*/
        background-repeat: no-repeat;
        background-position: center center;
        background-position: 3px 50%;
        background-size: 100% auto;
        background-attachment: scroll;
    }
    .bg-image-02 {
        height: 600px;
        background-image: none;
        /*
        background-image: url('/img/bg-synth-01-sm1.jpg');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: auto 600px;
        */
    }
    .music-bg-image-mask-01 {
        height: 104px;
        background-color: rgba(56,111,144,0);
        background-image: none;
        /*
        background-image: url('/img/bg-desk-02-sm1.jpg');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: auto 104px;
        */
    }
    #code {
        width: 300px;
    }
    .code-bg {
        width: 300px;
        margin-top: 0px;
    }
    .code-text {
        width: 300px;
        margin-top: -10px;
    }
    .bg-image-mask-02 {
        height: 104px;
        background-image: none;
        /*
        background-image: url('/img/bg-synth-01-sm1.jpg');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: auto 104px;
        */
    }
    .social-media-etc {
        width: 340px;
        margin: 20px auto;
    }
    .loading-animation {
        color: white;
        width: 25px;
        height: 50px;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        z-index: 2001;
    }

    .contact-form-container {
        position: fixed;
        /*width: 100%;*/
        height: 100%;
        z-index: 1999;
    }

    .contact-form {
        color: #fff;
        position: relative;
        top: 375px;
        left: 0;
        width: 100%;
        /* background-color: rgba(0, 0, 0, 0.6); */
        /*z-index: 1999;*/

    }
}

.snippet {
    width: 300px;
    border-color: aqua;
    border-style: solid;
    border-radius: 12px;
    border-width: medium;
    margin: 10px;
    padding: 20px;
}

/* remove Bootstrap padding */
.container-fluid.music-bg-image-mask-01,
.container-fluid.bg-image-mask-02 {
    padding-left: 0;
    padding-right: 0;
}

/* Divider wrapper */
.divider {
    display: flex;           /* left fill | SVG | right fill */
    width: 100%;
    height: 104px;           /* fixed height */
    align-items: stretch;    /* fill height */
    margin: 0;
    padding: 0;
}

/* Side fills */
.divider-fill {
  flex: 1 1 auto;
  background-color: inherit;
}

.divider-fill.blue {
  background: #386f90;
}

.divider-fill.gray {
  background-color: #313131;
}

.divider-fill.transparent {
  background: transparent;
}

/* Center SVG */
.divider-svg {
    display: block;
    height: 104px;
    width: auto;
    flex: 0 0 auto; /* fixed width, do not stretch */
}

.divider-svg.blue {
  color: #386f90;
}

.divider-svg.gray {
  color: #313131;
}

.divider-svg polygon {
  fill: currentColor;
}

.section-block {
    /* breaks on mobile... */
    /*
    align-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    */
}

.bg-blue {
   background-color:  rgb(56,111,144);
}

.bg-black {
   background-color:  black;
}

.anchor {
    margin-top: -35px;
    padding-top: 35px;
}

a, a:link, a:visited {
    text-decoration: none;
    /* color: rgb(243,113,108); */
    color: rgb(209,114,44);
    /* color: rgb(204, 101, 27); */
    /* color: yellowgreen; */
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

a:hover, a:active, a:focus {
    text-decoration: none;
    /* color: aquamarine;  */
    color: rgb(167,52,52);
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}


a.big-link {
    text-decoration: none;
    font-size: xx-large;
    /* color: yellowgreen; */
    padding-left: 40px;
}

a.big-link:link,
a.big-link:visited {
    color: rgb(76,191,173);
}

a.big-link:hover,
a.big-link:active,
a.big-link:focus {
    text-decoration: none;
    font-size: xx-large;
    color: aquamarine; /* springgreen; coral; */
}

/* example for vertical centering
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
*/

#top-nav.fixed-top {
    position: fixed;
    top: 0px;
    right: 0px;
/*    text-align: right;*/
    z-index: 1030;
}

.navpad {
    padding-top: 20px;
}

#top-nav {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

/*
.navbar-default {
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
    background: -webkit-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
    background: linear-gradient(to bottom, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 );
}
*/

/*
.navbar-inverse {
    background-color: rgb(97,92,104);
    border-color: rgb(148,148,162);
}
*/

#home {
    width: 750px;
}

.home {
    position: relative;
}

/* special case, first nav should be clearly visible */
.first-nav-down,
.first-nav-down a {
    position: relative;
    width: 48px;    /* width and font-size for proper centering */
    font-size: 18px;
    margin: -72px auto 0px auto;
    color: rgba(248, 248, 248, 0.8);
}

.first-nav-down a:link,
.first-nav-down a:visited {
    color: rgba(248, 248, 248, 0.8);
}

.first-nav-down a:hover,
.first-nav-down a:active {
    color: rgba(248, 248, 248, 1.0);
}

.nav-down,
.nav-down a {
    position: relative;
    width: 48px;    /* width and font-size for proper centering */
    font-size: 18px;
    margin: -100px auto 0px auto;
    color: rgba(248, 248, 248, 0.1);
}

.nav-up a:link,
.nav-up a:visited
.nav-down a:link,
.nav-down a:visited {
    color: rgba(248, 248, 248, 0.1);
}

.nav-up a:hover,
.nav-up a:active,
.nav-down a:hover,
.nav-down a:active {
    color: rgba(248, 248, 248, 0.6);
}

.nav-up,
.nav-up a {
    position: relative;
    width: 48px;    /* width and font-size for proper centering */
    font-size: 18px;
    /* margin: -100px auto 100px auto; */
    margin: 0px auto 10px auto;
    color: rgba(248, 248, 248, 0.1);
}

#nav {
    position: relative;
}

.logo-wrapper {
    margin-right: auto;
    margin-left: auto;
    margin-top: 100px;
    /* padding-right: 15px;
    padding-left: 15px; */
    width: 288px;
}

.logo-lg {
    position: relative;
    /* top: 500px;
    left: 240px; */
}

.about {
    /* background-color: paleturquoise; */
    /* background-color: rgb(157,220,249); */
    background-color: rgb(56,111,144);
	padding: 50px auto;
    position: relative;
    color: white;
    min-height: 300px;
}

.dev {
    /* background-color: paleturquoise; */
    /* background-color: rgb(157,220,249); */
    background-color: rgb(56,111,144);
	padding: 50px auto;
    position: relative;
    color: white;
    min-height: 300px;
}

.music {
    /* background-color: paleturquoise; */
    /* background-color: rgb(157,220,249); */
    background-color: rgb(56,111,144);
	padding: 50px auto;
    position: relative;
    color: white;
}

.music-box {
    background-color: #313131;
    border-style: solid;
    border-color: rgb(204, 101, 27);/* rgb(167,52,52); */
    border-width: thin;
    color: #909090;
    float: left;
    padding: 10px;
    font-size: small;
    /* color: #616161; */
}

.music-box hr {
    border-style: dotted;
    color: #909090;
    border-color: #909090;
    margin-top: 0px;
    margin-bottom: 7px;
}


.soundcloud-player {
   padding-bottom: 30px;
   height: 450px;
}

.about-text {
   /*float: right;*/
   height: auto;
   margin-top: 30px;
   /*padding-left: 30px;
   padding-bottom: 30px;*/
}

.dev-text {
   /*float: right;*/
   height: auto;
   margin-top: 30px;
   /*padding-left: 30px;
   padding-bottom: 30px;*/
}

.music-text {
   float: right;
   height: auto;
   padding-left: 30px;
   padding-bottom: 30px;
}

.code-bg {
    font-size: 5.8em;
    opacity: .1;
    position: relative;
    z-index: 100;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50%;
    height: 100%;
}
.code-text {
    font-size: 5em;
    opacity: .3;
    position: relative;
    z-index: 110;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: -41%;
    height: 100%;
    line-height: .9;
    color: rgb(76,191,173);
}

.top-carousel-indicators {
   position: relative;
   /* left: 0px; */
    /* bottom: 10px; */
    /* left: 50%; */
    z-index: 15;
    /* width: 390px; */
    /* padding-left: auto;
    margin-left: auto;
    margin-right: auto; */
    list-style: none;
    text-align:center;
}

.design-inner {
    /*
    height: 680px;
    position: relative;
    width: 100%;
    */
    overflow-x: hidden;
    overflow-y: hidden;
}

.design {
    background-color: rgb(56,111,144); /* rgb(76,191,173); */
    height: 800px;
    position: relative;
}

.design-text {
    color: white; /* rgb(156, 255, 255); */
}

.custom-carousel-control.left {
    left: -110px;
}

.custom-carousel-control.right {
    left: 570px;
}

.next-prev-button {
    position: absolute;
    top: 300px;
    margin-bottom: auto;
    /* width: 10px; */
    /* height: 10px; */
}

.custom-carousel-control {
    position: absolute;
    top: 0px;
    /* bottom: 0; */
    width: 15%;
    height: 690px;
    font-size: 20px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

a.custom-carousel-control:link,
a.custom-carousel-control:visited {
    color: white;
}

a.custom-carousel-control:hover,
a.custom-carousel-control:active {
    color: rgb(209,114,44);
}

.shadow-text {
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

.heading-sm {
    color: white;
    font-size: x-large;
    padding-bottom: 0px;
    /* white-space: nowrap; */
}

.heading {
    font-size: xx-large;
    padding-bottom: 5px;
    /* white-space: nowrap; */
}

.slide-description {
    color: #e2e2e2;
    font-size: medium;
    /* margin-right: auto;
    margin-left: auto;
    width: 740px; */
    height: 20px;
    margin-top: 10px;
    margin-bottom: auto;
}

.design-logo-slide {
    width: 400px;
    padding-top: 60px;
    margin-left: auto;
    margin-right: auto;
}

.code {
    background-color: black;
    color: azure;
    position: relative;
    /*width: 750px; */ /* instead of specifying width -- we'll use bootstraps presets... */
}

.contact-header {
    /* padding-bottom: 60px; */
}

.contact {
    background-color: #313131;
    /* color: lightblue; */
    /* color: rgb(157,220,249); */
    color: rgb(255,255,255);
    /* height: 500px; */
    position: relative;
    padding-top: 50px;
    padding-bottom: 50px;
}

.contact .row {
    padding: 40px auto;
}

.contact-block {
    /* height: 480px; */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;
    margin-top: 150px;
}

.social-media-wrapper {
    background-color: #313131;
    position: relative;
    padding-top: 50px;
    padding-bottom: 0px;
}

.social-media-etc a {
    color: rgb(167,167,167);
    margin: auto 20px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.social-media-etc a:hover {
    color: white;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

/*
.well1 {
	background-color: orangered;
	color: white;
	height: 800px;
	width: 100%;
	position: absolute;
	top: 0px;
	z-index: -1;  
}
*/

/*
.bg-image-01 {
    height: 400px;
    background-image: url('/img/bg-desk-02.jpg');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.music-bg-image-mask-01 {
    height: 104px;
    background-color: rgb(56,111,144);
    background-image: url('/img/bg-desk-02.jpg');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.bg-image-02 {
    height: 600px;
    background-image: url('/img/bg-synth-01.jpg');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.bg-image-mask-02 {
    background-image: url('/img/bg-synth-01.jpg');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
*/

/* attempt to fix backgrounds for mobile */
/* could use a smaller version of the bg image instead */

/*
@media (min-width: 1200px) {
   .bg-image-01 {
       background-position: center center;
       background-size: cover;
   }

   .bg-image-02 {
       background-position: center center;
       background-size: cover;
   }
}

@media (min-width: 768px) {
    .bg-image-01 {
        background-position: top center;
        background-size: contain;
    }

    .bg-image-02 {
        background-position: top center;
        background-size: contain;
    }
}
*/

#footer {
    width: 100%;
    padding-top: 10px;
    font-size: smaller;
    text-align: center;
}

.footer {
    /* margin-top: 1px; */
    background-color: #313131;
    border-top-style: solid;
    border-color: rgb(167,52,52); /* #a73434 */
    border-top-width: thin;
    color: #909090;
}

/*
.footer-hr {
    border-top-style: solid;
    border-color: rgb(167,52,52);
    border-top-width: thin;
}
*/

.pad-10 {
    padding-top: 10px;
}

.pad-40 {
    padding-top: 40px;
}

a.orange-button:link,
a.orange-button:visited {
    background-color: rgb(204, 101, 27);
    border-color: rgb(255,255,255);
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    color: white;
}

a.orange-button:hover,
a.orange-button:active {
    background-color: rgb(234, 131, 57);
    /* background-color: white; */
    border-color: rgb(255,255,255);
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    /* width; */
    height: 110%;
    color: white;
}

/* Fonts */