/* colors 

shadow:         #111110    
dark grey:      #24211E
lighter grey:   #2E2925
light grey:     #36312C
orange:         #EF6D28
blue:           #839D92
dark blue:      #556860
beige:          #FFEFDD

*/


 /*--- GENERAL ---*/
/* ------------- */

html {
    font-size: 16px;
}

html, body {
    min-height: 100%;
    background-color: #24211E;
}

h1, h2, h3, h4, strong, .button, .buttonAnimated {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: #FFEFDD;
}

h5, h6 {font-family: 'Montserrat', sans-serif; font-weight: 400; color: #FFEFDD;}

/* Heroimage Heading */
h1 {font-size: 1.875rem; letter-spacing: 4.4px;} /* CULT SOUNDS */

/* Section Heading */
h2 {position: relative; font-size: 1.5rem; letter-spacing: 0.05rem; line-height: 33px; margin-bottom: 14px; }

/* Navigation Heading / Subheadings */
#menu h3 {font-size: 1rem; letter-spacing: 2.71px;}
h3 {font-weight: 600; font-size: 0.875rem; position: relative; letter-spacing: 0.9px;}

/* NavBar Heading */
h4 {font-size: 0.875rem; letter-spacing: 2.37px; text-align: center; line-height: 53px; margin: 0;}

/* Button Labels */
h5 {font-size: 1.0625rem; letter-spacing: 1.31px; line-height: 1.2rem; opacity: 0.9}

/* Heroimage Subtitle */
h6 {font-size: 1.05rem; letter-spacing: 0.19px; line-height: 1.3rem}

/* Footer Text */
strong {font-size: 1.03125rem; line-height: 38px;}
em {font-weight: 700; font-style: normal;}

.container-fluid {padding: 0 7%; max-width: 1300px}
article.firstBlock {padding-top: 4vh}

p, ul {
    font-family: 'Lato', sans-serif;
    font-size: 1.0625rem;
    color: #FFEFDD;
    line-height: 25px;
    font-weight: 400;
    letter-spacing: 0.45px;
}

body::-moz-selection {background: #A7A7A7;}
body::selection {background: #A7A7A7;}

p > a, .alignright > em > a {color: #FFEFDD; text-decoration: none; border-bottom: 2px solid #839D92}
p > a:hover, .alignright a:hover {color: #839D92 !important; text-decoration: none}
p > a:visited, .alignright a:visited {color: #FFEFDD; text-decoration: none}
p > a:active, .alignright a:active {color: #839D92; text-decoration: none}

#top-pusher {height: 60px;}

.right-aligned {text-align: right}
.italic {font-style: italic}

.data-card {
    background-color: #2E2925;
    border: 1px solid #36312C;
    -webkit-box-shadow: 3px 3px 8px 0 #111110;
    box-shadow: 0px 6px 20px 0 #111110;
    border-radius: 5px;
}

#contentWrapper {
    position: relative;
}

#mask {
    width: 100%;
    height: 100vh;
    background-color: #24211E;
    position: fixed;
    z-index: 5;
    opacity: 0;
    visibility: hidden;
}

/*--- NAVBAR ---*/
/* ------------ */

#navbar {
    height: 53px;
    width: 100%;
    position: fixed;
    padding: none;
    z-index: 1000;
    background-color: #2E2925;
    -webkit-box-shadow: 0px 5px 19px #111110;
    box-shadow: 0px 5px 19px #111110;
    border-bottom: 3px solid #EF6D28;
}

#menuButton {
    position: absolute;
    left: 0;
    top: 0;
    width: 56px;
    height: 50px;
    margin-left: 9px;
    cursor: pointer;
}

.menuButtonLED {
    height: 100%;
    width: 20px;
    float: left;
    margin-right: -2px;
    background: url("images/LEDoff.png") 0px 15px/contain no-repeat;
}

.LED-off {
    background: url(images/LEDoff.png) center/contain no-repeat;
}

.LED-on {
    background-image: url("images/LEDon.png");
}

 /*--- MENU ---*/
/* ---------- */

#menu {
    width: 290px;
    position: fixed;
    left: -293px;
    margin-top: 53px;
    padding-top: 15px;
    background-color: #2E2925;
    border-right: 3px solid #EF6D28;
    overflow: auto;
    top: 0;
    bottom: 0;
    z-index: 6;
}

#menu > ul {
    padding-left: 20px;
}

#menu > ul > li {
    list-style: none;
    position: relative;
}

#menu > ul > ul > li > a > h3 {
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 1.4px;
    margin: 0;
    line-height: 1.9rem;
}

#menu > ul > li > a > h3 {
    margin: 0;
    line-height: 2rem;
}

.LEDoff {
    background: url("images/LEDoff.png") no-repeat left;
    background-size: 1rem 1rem;
    padding: 0px 0px 0px 29px; 
    list-style: none;
    margin: 0px 0px 0px -41px;
    list-style-position: outside;
}

.LEDon {
    background: url("images/LEDon.png") no-repeat left;
    background-size: 1rem 1rem;
    padding: 0px 0px 0px 29px; 
    list-style: none;
    margin: 0px 0px 0px -41px;
    list-style-position: outside;
}

.underline {
    width: 0;
    height: 2px;
    background-color: #EF6D28;
    position: absolute;
    top: 1.2rem;
    opacity: 1;
    margin-top: 2px;
}

#menu a {
    color: #FFEFDD; 
    text-decoration: none;  
}

#menu h3:visited {color: #FFEFDD}
#menu h3:active {color: #EF6D28; text-decoration: none;}
#menu h3:hover {color: #EF6D28; text-decoration: none;}


 /*--- BUTTONS ---*/
/* ------------- */


#button-container {
    padding: auto;
    margin: 27px 0px; 
    text-decoration: none;
}

.button {
    position: relative;
    text-decoration: none;
    font-size: 1rem;
    color: #EF6D28;
    letter-spacing: 0.52px;
    padding: 8px 15px;
    display: inline-block;
    z-index: 3;
}

#exploreButton::before {
    content: " ";
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border: 4px solid #FFEFDD;
    border-radius: 9px;
    opacity: 0
}

#exploreButton::after {
    content: " ";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border: 2px solid #EF6D28;
    border-radius: 4px;
}

.button:hover {
    text-decoration: none;
    color: #EF6D28;
    -webkit-box-shadow: -4px 6px 18px #24211E;
    box-shadow: -4px 6px 18px #24211E;
}

.button:visited {
    text-decoration: none;
    color: #EF6D28;
}

.button:active {
    text-decoration: none;
    color: #EF6D28;
    padding: 9px 15px 7px;
}

#contactButton::before {
    content: " ";
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border: 4px solid #FFEFDD;
    border-radius: 9px;
    opacity: 0
}

#contactButton::after {
    content: " ";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border: 2px solid #EF6D28;
    border-radius: 4px;
}


 /*--- FOOTER ---*/
/* ------------ */

#wrapper {
    min-height: calc(100vh);
}

#main {
    overflow: auto;
    padding-bottom: 320px;
}

#contentWrapper > footer {
    position: relative;
    width: 100%;
    height: 320px;
    margin-top: -320px; /* negative value of footer height */
    padding-top: 27px;
    padding-bottom: 20px;
    clear: both;
    background-color: #2E2925;
    border-top: solid 2px #36312C;
    -webkit-box-shadow: 0px 2px 19px #111110;
    box-shadow: 0px 2px 19px #111110;
}

#contentWrapper > footer p {
    font-size: 0.8125rem;
    line-height: 1.1875rem;
}

#contentWrapper > footer div.col-sm-2 {
    padding: 0;
}

#contactButtonContainer {
    padding: 10px 0 20px;
    text-align: center;
}

.alignleft {
    text-align: center;
}
    
.alignright {
    text-align: center;
}

.alignright a {
    color: #839D92
}


 /*--- MISCALLANEOUS ---*/
/* ------------------- */

.soundBtnContainer {padding: 4vh 10%; max-width: 1300px}

 /*--- MEDIA QUERIES ---*/
/* ------------------- */

@media only screen and (min-width: 768px) {
    
/*--- FOOTER ---*/
    
    .alignleft {
        text-align: left;
    }
    
    .alignright {
        text-align: right;
    }
    
    #contactButton {
        margin-top: 4px;
    }
    
    #contentWrapper > footer {
        margin-top: -165px; /* negative value of footer height */
        height: 165px;
    }
}

@media only screen and (max-width: 769px) {
    
    article.container-fluid {padding: 0 4%}
    article.firstBlock {padding-top: 1vh}
    
    .soundBtnContainer {padding: 1vh 5%}
    
}