/*!
 * Steinkind
 * Copyright 2016 Paka.me, Mary-Anne Kockel
 */

/* General */
body {
    color: #000;
    font-family: "Montserrat";
}

a {
    color: #000;
    transition: all 0.3s ease 0s;
        transition-property: all;
        transition-duration: 0.3s;
        transition-timing-function: ease;
        transition-delay: 0s;
}

a:hover, a:focus, a:active, a.active {
    color: #73c8fd;
    text-decoration: none;
}

::selection,
::-moz-selection {
    background-color: #73c8fd;
    color: white;
}

.gap--top {
    margin-top: 80px;
}

/* Headlines & Typo */

section:nth-child(odd) h2.section-heading {
    transform: rotate(2.5deg);
}

section:nth-child(even) h2.section-heading {
    transform: rotate(-2.5deg);
}

h2, section h2.section-heading,
.portfolio-caption h4,
.team-member h4,
.release h4,
.release h5 {
    font-family: "helveticrapregular",Arial,sans-serif;
    font-weight: normal;
    letter-spacing: 0.03em;
}

section h3.section-subheading.text-loud {
    color: #000;
    font-family: "impact_labelregular",Arial,sans-serif;
    font-weight: normal;
    font-size: 42px;  
    margin-top: 80px;  
}

.release h4 {
    font-size: 34px;
}

.release h5 {
    font-size: 18px;
}

.release ul.social-links li a h6, 
.release p {
    font-size: 28px;
    line-height: 1.2em;
}

.team-member {
    margin-bottom: 0;
}

.team-member p {
    font-weight: 700;
}

.portfolio-caption h4 {
    letter-spacing: 0.07em;
}

section h3.section-subheading,
#portfolio .portfolio-item .portfolio-caption p {
    font-family: "Montserrat";
    font-style: normal;
}

/* Header */

header {
    background-image: url("../files/header/steinkind-stripes.jpg");
}

header .container {
    height: 90vh;
}

header .intro-text {
    padding-bottom: 10vh;
    padding-top: 16vh;
}

header .intro-text .intro-lead-in {
    font-family: "helveticrapregular", Arial, sans-serif;
    font-style: normal;
    font-size: 20px;
    line-height: 20px;
}

header .intro-text .intro-lead-in p {
    font-size: 40px;
    line-height: 40px;
    margin: 0px;
}

header .intro-text span a {
    color: #fff;
    text-decoration: underline;
}

header .intro-logo {
    width: 60vw;
}

header .intro-input {
    font-size: 36px;
    height: 10vh;
    margin: auto;
    text-align: center;
    width: 40%;
}

header .intro-botton {
    background-color: #000;
    border: none;
    margin-top: 25px;
    transition: all 0.3s ease 0s;
        transition-property: all;
        transition-duration: 0.3s;
        transition-timing-function: ease;
        transition-delay: 0s;
}

/* Navigation */

.navbar-default.navbar-shrink {
    background-color: rgba(0, 0, 0, 0.75);
}

.navbar-default .navbar-brand {
    color: white;
    font-family: "helveticrapregular",Arial,sans-serif;
    font-weight: normal;    
    letter-spacing: 0.07em;
    transform: rotate(-2.5deg);
}

.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus,
.navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a {
    background-color: #73c8fd;
}

.navbar-default .navbar-toggle {
    background-color: #666;
    border: none;
}

.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:active, .navbar-default .navbar-brand.active {
    color: #73c8fd;
}

.navbar-default .nav li a:hover, .navbar-default .nav li a:focus {
    color: #73c8fd;
}

.navbar-collapse {
    text-align: center;
}

/* Buttons */

.btn-xl, .btn-xl:hover, .btn-xl:focus, .btn-xl:active, .btn-xl.active, .open .dropdown-toggle.btn-xl {
    background-color: #73c8fd;
    border: none;
}

.btn-xl.btn-default {
    background-color: white;
    color: #000;
    margin-top: 60px;
}

ul.social-buttons li a:hover, ul.social-buttons li a:focus, ul.social-buttons li a:active {
    background-color: #73c8fd;
}

ul.social-buttons li a h6 {
    color: #000;
}

ul.social-links li a h6 {
    color: #000;
    font-family: "impact_labelregular",Arial,sans-serif;
    font-weight: normal;
    font-size: 22px;
}

ul.social-buttons li a.download h6,
ul.social-links li a.download h6 {
    color: #999;
}


.bg-black ul.social-buttons li a h6,
.bg-black ul.social-links li a h6 {
    color: white;
}

.bg-black ul.social-buttons li a.download h6,
.bg-black ul.social-links li a.download h6 {
    color: #999;
}

ul.social-buttons.success li a {
    background-color: #fff;
    color: #000;
    font-size: 50px;
    height: 100px;
    line-height: 100px;
    margin-top: 20px;
    width: 100px;
}

ul.social-buttons.success li a:hover, ul.social-buttons.success li a:focus, ul.social-buttons.success li a:active {
    background-color: #73c8fd;
    color: #fff;
}

.btn-primary {
    color: #FFF;
    background-color: #000;
    border: none;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {
    color: #FFF;
    background-color: #73c8fd;
    border: none;
}

/* Text */

.floating-2 {
    -webkit-column-count: 2;
    -webkit-column-gap: 1%; /* Saf3, Chrome*/
    -moz-column-count: 2;   
    -moz-column-gap: 1%; /* FF3.5+ */
    column-count: 2;        
    column-gap: 1%; /* Opera 11+*/
}

.floating-3 {
    -webkit-column-count: 3;
    -webkit-column-gap: 1%; /* Saf3, Chrome*/
    -moz-column-count: 3;   
    -moz-column-gap: 1%; /* FF3.5+ */
    column-count: 3;        
    column-gap: 1%; /* Opera 11+*/
}

/* Sections */

.bg-black {
    background-color: #000;
    color: white;
}

.bg-stone {
    background-image: url('../files/texture/stone.jpg');
    background-position: top center;
    background-size: cover;
}

.bg-ice {
    background-image: url('../files/texture/ice.jpg');
    background-position: top center;
    background-size: cover;
}

.bg-mad {
    background-image: url('../files/texture/mad.jpg');
    background-position: top center;
    background-size: cover;
}

.bg-moon {
    background-image: url('../files/texture/moon.jpg');
    background-position: top center;
    background-size: cover;
}

.bg-dust {
    background-image: url('../files/texture/dust.jpg');
    background-position: top center;
    background-size: cover;
}

.bg-stripes {
    background-image: url('../files/texture/stripes.jpg');
    background-position: top center;
    background-size: cover;
}

/* Video */

.video {
    height: 280px;
    width: 100%;
}

.portfolio-item {
    margin-bottom: 20px;
}

.portfolio-item h4 {
    margin-bottom: 0;
}

.bg-black .portfolio-item h4, .bg-black .portfolio-item .h4 {
    font-size: 24px;
}

/* Modal */

.modal-body h2 {
    font-size: 36px;
    margin-bottom: 30px;
}

.modal-body h3 {
    font-size: 20px;
    margin-bottom: 16px;
    margin-top: 60px;
}

.modal-body p strong {
    letter-spacing: 0.03em;
}

.modal-body p.item-intro.text-muted {
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 30px;
    padding: 0 50px;
}

.modal-body form {
    margin-bottom: 30px;
}

.modal-body form .success, 
.modal-body form .error {
    margin-bottom: 20px;
}

.modal-body .button--send {
    background-color: #000;
    color: white;
    padding: 16px 48px;
    font-size: 16px;
    border-radius: 4px
}

.modal-content {
    margin: 30px 20px;
}

/* Forms */

.form-group.error .form-control {
    border-color: #ff0000;
}

.checkbox {
    margin: 20px 0 30px;
}

.checkbox.form-group.error {
    border: 1px solid #ff0000;
    border-radius: 3px;
    padding: 10px 5px;
}

@media (min-width:994px){
    textarea.form-control.input--message {
        height: 280px;
    }

    textarea.form-control.input--message--press {
        height: 230px;
    }

    textarea.form-control.input--message--contact {
        height: 180px;
    }
}

/* Footer */

footer {
    background-color: white;
    padding: 15px 0px;
    text-align: center;
}

/* Media Queries */

@media (max-width:768px) {

    header .intro-text .intro-lead-in p {
        font-size: 30px;
        line-height: 30px;
    }

    section h2.section-heading,
    .release h4,
    section h3.section-subheading.text-loud {
        font-size: 20px;
        line-height: 20px;
    }

    section h3.section-subheading.text-loud {
        margin-top: 30px;
    }
        
    section h3.section-subheading {
        margin-bottom: 20px;
    }
    
    .release p,
    .bg-black .portfolio-item h4,
    .bg-black .portfolio-item .h4 {
        font-size: 16px;
    }

    ul.social-links li a h6,
    .release ul.social-links li a h6 {
        font-size: 20px;
        line-height: 0.8em;
    }

    section {
        padding: 50px;
    }
        
    section#music.bg-light-gray.bg-stone {
        padding-bottom: 150px;
    }
    
    section#music .btn-xl.btn-default {
        margin-top: 20px;
    }
    
    .gap--top {
        margin-top: 40px;
    }

    footer.navbar-fixed-bottom {
        font-size: 10px;
    }
    
    footer ul.social-buttons li a {
        height: 30px;
        width: 30px;
        font-size: 15px;
        line-height: 30px;   
    }
    
    footer ul.quicklinks {
        line-height: 30px;
    }

}

@media (min-width:1280px){
    h4, .h4 {
        font-size: 28px;
    }
    
    p, .p {
        font-size: 18px;
    }
    
    ul.social-links li a h6 {
        font-size: 28px;
    }
    
    .modal-body p, .p {
        font-size: 14px;
    }
    
    .portfolio-modal .modal-content {
        text-align: left;
    }
}


/* Generated by Font Squirrel (http://www.fontsquirrel.com) on January 17, 2016 */

@font-face {
    font-family: 'impact_labelregular';
    src: url('../fonts/impact_label-webfont.eot');
    src: url('../fonts/impact_label-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/impact_label-webfont.woff2') format('woff2'),
         url('../fonts/impact_label-webfont.woff') format('woff'),
         url('../fonts/impact_label-webfont.ttf') format('truetype'),
         url('../fonts/impact_label-webfont.svg#impact_labelregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'helveticrapregular';
    src: url('../fonts/helveticrap-webfont.eot');
    src: url('../fonts/helveticrap-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/helveticrap-webfont.woff2') format('woff2'),
         url('../fonts/helveticrap-webfont.woff') format('woff'),
         url('../fonts/helveticrap-webfont.ttf') format('truetype'),
         url('../fonts/helveticrap-webfont.svg#helveticrapregular') format('svg');
    font-weight: normal;
    font-style: normal;
}