/* top */

body {
    font-family: Montserrat,sans-serif;
    font-weight:300;
    background:#F4ECE3;
}

a {
    color: #f1951f;
}

.btn {
    border-radius: 0px;
}

.btn-primary {
    color: #fff;
    background-color: #f1951f;
    border-color: #f1951f;
    display:inline-block;
    overflow:hidden;
}


.btn-primary:hover {
    color: #fff;
    background-color: #f1951f;
    border-color: #f1951f;
}

.btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #f1951f;
    border-color: #f1951f;
}

.btn-primary.focus, .btn-primary:focus {
    box-shadow: none;
}

.cta {
    font-size: 0.8rem;
    padding: 12px 20px;
    text-transform: uppercase;
}

/*navbar */

.navbar {
    padding-right:0;
    padding-left:0px;
}

.navbar-light .navbar-nav .nav-link {
    font-size:0.95rem;
}

.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: .8rem;
    padding-left: .8rem;
}

/* hero */

.hero {
    position: relative;
    display: block;
    z-index: 3;
    height: 500px;
    background: #eee;
}

.bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.bg-saw {
    position: absolute;
    height:20px;
    width:100%;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(45deg, #ddd 50%, transparent 50%), linear-gradient(-45deg, #ddd 50%, transparent 50%);
    background-position: bottom left, bottom left;
    background-size: 20px 20px;
    background-repeat: repeat-x;
    z-index:100;
}

.herotext {
    position: absolute;
    top: auto;
    right: 0;
    bottom: -200px;
    left: 0;
    display: block;
    z-index:101;
}

.herotext_block {
    background:#EFDBC4;
    border-left:8px solid #f1951f;
    margin-left:10%;
    margin-right:10%;
    padding:3rem 2rem;
}

.herotext_block h1 {
    font-size:1.5rem;
}

.herotext_block h2 {
    font-size:0.95rem;
    margin-top:35px;
    margin-bottom:35px;
}

.content {
    background:#ddd;
    padding:10%;
    padding-top:120px;
    padding-bottom:120px;
    position:relative;
}

.content-saw {
    position: absolute;
    height:20px;
    width:100%;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(45deg, #F4ECE3 50%, transparent 50%), linear-gradient(-45deg, #F4ECE3 50%, transparent 50%);
    background-position: bottom left, bottom left;
    background-size: 20px 20px;
    background-repeat: repeat-x;
    z-index:150;
}

@media only screen and (min-width: 768px) {
  .herotext {
    bottom: -60px;
    }
    
    .herotext_block {
    margin-right:40%;
    padding:3rem 2rem;
    }
    
    .content {
    padding-top:120px;
    } 
    
    .herotext_block h1 {
    font-size:2rem;
    }
}

.content h1 {
    margin-bottom:40px;
    display:inline-block;
    padding-bottom:30px;
    border-bottom:1px solid #CEBEAB;
    font-size:1.5rem;
}

.home-reference, .page-reference {
    margin-top:100px;
    padding: 0px 10% 0px 10%;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-align-items: flex-start;

}

.page-reference h2 {
    display:block;
    width:100%;
    margin-top:100px;
}

.reference {
    width:100%;
    margin-top:30px;
}

.reference .imgcontainer {
    max-height:214px;
    overflow: hidden;
    border-bottom: 8px solid #f1951f;
}

a.ref {
    display:block;
    text-decoration:none;
    position:relative;
    color:#333;
}

a.ref:hover, a.ref:active, a.ref:focus  {
    color:#f1951f;
}

a.ref .ref_text {
    margin:20px 20px 20px 0px;
    font-weight:bold;
    color:#333;
}

a.ref .ref_icon {
    display:none;
}

.home-reference h1, .page-reference h1 {
    margin-bottom:40px;
    display:block;
    width:100%;
    padding-bottom:30px;
    border-bottom:1px solid #CEBEAB;
    font-size:1.5rem;
}

footer {
    background:#eee;
    font-size:0.9rem;
    margin-top:100px;
}

footer .col-sm-4:first-child {
    background:#EFDBC4;
    border-left:8px solid #f1951f;
}

footer .block {
    padding:10%;
}

footer .col-sm-4 .block i {
    display:inline-block;
    margin-right:15px;
}

.bottom {
    font-size:0.9rem;
    color:#999;
    margin: 40px 0;
}

@media only screen and (min-width: 768px) {
    
    .reference {
    width:31%;
    }
    
    .home-reference h1, .page-reference h1 {
    font-size:2.5rem;
    }
    
    .content h1 {
    font-size:2.5rem;
    }
    
    a.ref .ref_icon {
    display:inline;
    position:absolute;
    right:15px;
    bottom:0;
    }
    
    a.ref .ref_text {
    margin:20px 20px 20px 20px;
    width:calc(100%-50px);
    }
}

.form-wrap {
    margin-top:50px;
}

.error {
    color:#ff0000;
    margin-top:5px;
}

.success {
    color:#28a745;
    border: 1px solid #28a745;
    padding:10px;
    background:#d4edda;
    border-radius:4px;
    margin-bottom:30px;
}

label {
    font-weight:bold;
    font-style:italic;
}

/* filter */

button.mixitup-control-active {
    background: #ffffff;
    color:#f1951f;
    border:1px solid #f1951f;
}


.btn[data-filter] {
    margin-right: 0.75rem;
    margin-bottom: 0.75rem;
}


/* Target Elements
---------------------------------------------------------------------- */

.mix,
.gap {
    display: inline-block;
    vertical-align: top;
}

.mix {
    position: relative;
}

.mix:before {
    content: '';
    display: inline-block;
}


/* Grid Breakpoints
---------------------------------------------------------------------- */

/* 2 Columns */

.mix,
.gap {
    width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
}

/* 3 Columns */

@media screen and (min-width: 541px) {
    .mix,
    .gap {
        width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
    }
}

/* 4 Columns */

@media screen and (min-width: 961px) {
    .mix,
    .gap {
        width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
    }
}

/* 5 Columns */

@media screen and (min-width: 1281px) {
    .mix,
    .gap {
        width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
    }
}