/*-------------------------------------------------------------------
    Butzke Burch Construction Styles - 02/2020

    Colors:
    primary #122154
    secondary #0055a0
-------------------------------------------------------------------*/
:root {
    --primary: #122154;
    --secondary: #0055a0;
}

/* Fonts
--------------------- */
@font-face {
    font-family: 'Franklin Gothic Book';
    font-style: normal;
    font-weight: normal;
    src: local('ITC Franklin Gothic Std Book'), url('../fonts/FranklinGothicStd-Book.woff') format('woff');
}

@font-face {
    font-family: 'Franklin Gothic Book';
    font-style: normal;
    font-weight: bold;
    src: local('ITC Franklin Gothic Std Medium'), url('../fonts/FranklinGothicStd-Med.woff') format('woff');
}

@font-face {
    font-family: 'Franklin Gothic Medium';
    font-style: normal;
    font-weight: normal;
    src: local('ITC Franklin Gothic Std Medium'), url('../fonts/FranklinGothicStd-Med.woff') format('woff');
}

/* Helpers
--------------------*/
*, *:before, *:after {box-sizing:border-box;}
.sr-only, input[type=text].sr-only:not(.browser-default) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}
.hidden {
    display: none;
    visibility: hidden;
}

img {max-width:100%; height:auto;}
.photo-right {margin:0 0 20px; }
.photo-right .caption {margin:0; padding:0 5px;}


.col.m1, .col.m2, .col.m3, .col.m4, .col.m5, .col.m6,
.col.m7, .col.m8, .col.m9, .col.m10, .col.m11, .col.m12 {
    width:100%;
}
/*
--------------------------*/
html {
    /* font-size:62.5%;  */
    font-size: 100%;
    background-color:#fff;
}
body {
    position:relative;
    margin:0; 
    padding:0; 
    font-family:'Franklin Gothic Book', franklin-gothic-urw, 'Arial Narrow', Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif; 
    font-size:1.125rem; 
    line-height:1.5;
    font-weight:normal;
    color:var(--primary);
    background-color:#fff;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    z-index:1;
    
}

.home {
    text-align:center;
}

.bg-gradient {
    display:block;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.5) 60%, rgba(255,255,255,1) 100%), url(/assets/img/dsm-skyline-blurbg.jpg);
    background-size:cover;
    background-position:center top;
    background-repeat:no-repeat;
    z-index:-1;
}


a {color:var(--secondary)}
a:hover, a:focus {color:var(--primary)}

h1, h2, h3, h4, h5 {
    font-family:'Franklin Gothic Medium', franklin-gothic-urw, 'Arial Narrow', Arial, sans-serif;  
}

h1 {font-size:2rem; line-height:1.25; color: var(--primary);}
h2 {font-size:1.5rem; line-height:1.25; color: var(--primary);}
h3 {font-size:1.25rem; line-height:1.25; color: var(--secondary);}
strong {font-weight:bold}
.profile h2 {font-size:1.25rem}
.profile p {font-weight:400;}
.opensans .profile p {font-weight:600;}
.roboto .profile p {font-weight:500;}
.primary-link {color:var(--secondary); text-decoration:none;}
.primary-link:hover, .primary-link:focus {text-decoration:underline;}


.navbar-fixed {
    height:90px;
}
.navbar-fixed nav {
    height:70px;
    line-height:70px;
    background-color:#fff;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.08), 0 3px 1px -2px rgba(0,0,0,0.05), 0 1px 5px 0 rgba(0,0,0,0.15);
    transition:0.2s;
}
nav .sidenav-trigger {
    height:70px;
    position:absolute;
    left:0;
    margin:0;
    padding:0 3vw;
    display:flex;
    align-items:center;
    top:0;
}
.navbar-fixed .sidenav-trigger i {
    color:var(--secondary)
}
.navbar-fixed .brand-logo {
    position:absolute;
    display:inline-flex;
    align-items:center;
    padding: 10px 0;
}
.navbar-fixed .brand-logo img {
    width:auto;
    height:50px;
}

.logo-v {margin:0 auto; width:160px; height:auto;}
.top-header .logo {display:block; margin:0 auto; width:300px; height: auto;}
.intro {margin:3rem auto;}
.intro h1 {width:90vw; max-width:920px; margin:3rem auto 4rem auto; font-size:1.25rem;}
header p {width:90vw; max-width:900px; margin-left:auto; margin-right:auto;}


.profiles {display:flex; flex-direction:column; align-items:center; justify-content:space-around; width:90vw; max-width:960px; margin:3rem auto;}
.profile {text-align:center; margin-bottom:1.25rem;}
.round-img {border-radius:100%; overflow:hidden; border:10px solid #e5e5e5; background-color:#fff;}
.round-img img {display:block; margin:auto; width:240px; height:240px;}

.callout {position:relative; text-align:center; margin:8rem 0; padding:6rem 0;z-index:1;}
.callout:after {display:block; content:''; position:absolute; top:0; bottom:0; left:0; right:0; background:var(--primary); z-index:-1; transform:skew(0deg,-2deg)}
.callout h2 {color:#fff; background-color:var(--primary); width:90vw; max-width:960px; margin:0 auto; text-align:center;}

footer {margin-top:2rem; font-weight:400; text-align:center;}
.opensans footer {font-weight:600;}
.roboto footer {font-weight:500;}
.social-links {display:flex; align-items:center; justify-content: center;}
.social-links a {color:rgb(147,147,157); margin:0 1.5rem; transition:0.3s;}
.social-links a:hover, .social-links:focus {color:var(--secondary)}
.social-icon {width:3rem; height:3rem;}
.address a {color:inherit; text-decoration:none;}
.address a:hover, .address a:focus {text-decoration:underline;}

.site-by {visibility:hidden;}

button {cursor:pointer;}

.btn {
    position: relative;
    display: block;
    font-family:'Franklin Gothic Book', franklin-gothic-urw, 'Arial Narrow', Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif; 
	font-size:1.25rem;
	font-weight: 700;
	color: #fff;
	line-height: 1.25;
	padding: 0.75rem 2rem;
    width: auto;
    height:auto;
	max-width: 300px;
	margin: 1rem auto 2rem auto;
	border: none;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .1em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: var(--secondary);
	background-size: cover;
	text-shadow:0 1px 2px var(--primary);
	transition:0.3s ease;
}
.btn:hover, .btn:focus {
    background-color: var(--primary);
}
.btn:before {content:'';display:block;background-color:transparent;}
.btn.disabled:before, .btn:disabled:before, .btn[disabled]:before {
    position: absolute;
    content: '';
    display: block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background-color: rgba(255,255,255,0.3);
}

.btn.disabled, .disabled.btn-large, .disabled.btn-small, .btn-floating.disabled, .btn-large.disabled, .btn-small.disabled, .btn-flat.disabled, .btn:disabled, .btn-large:disabled, .btn-small:disabled, .btn-floating:disabled, .btn-large:disabled, .btn-small:disabled, .btn-flat:disabled, .btn[disabled], .btn-large[disabled], .btn-small[disabled], .btn-floating[disabled], .btn-large[disabled], .btn-small[disabled], .btn-flat[disabled] {
    background-color: var(--primary) !important;
    color: #fff !important;
}

.carousel {
    height:37vw;
}
.carousel.carousel-slider .carousel-item {
    width:80vw;
    min-height:37vw;
    height:auto;
    box-shadow:none;
}

.carousel.carousel-slider .carousel-item.active {

}

.carousel-wrapper {
    margin:2rem auto;
}

.carousel-wrapper h2 {
    position: relative;
    display:inline-block;
    font-weight:bold; 
    font-size:2rem; 
    margin:1rem auto 0;
    width:auto;
}
/* 
.carousel-wrapper h2:after {
    display: block;
    position: absolute;
    content: '';
    font-weight:bold;
    font-size:0.5rem;
    text-align:right;
    height: 2px;
    width: calc(100% + 1rem); 
    bottom: -0.25rem;
    left: -0.5rem;
    background: linear-gradient(135deg, var(--primary) 0, var(--primary) calc(100% - 40px), transparent calc(100% - 40px)), repeating-linear-gradient( 135deg, transparent, transparent 4px, var(--primary) 4px, var(--primary) 6px);
    z-index: 1;
    transition: width 0.2s;
} */

.carousel-info {
    position:absolute;
    z-index:10;
    bottom: 20%;
    left:12.5%;
    width:75%;
    color:#fff;
    text-shadow:0 0 2px rgba(0,0,0,0.8), 0 2px 4px rgba(0,0,0,0.7)
}

.carousel-info h3 {
    color: #fff;
    font-size:1.125rem;
    line-height:1.125;
    margin: 0 auto;
}

.carousel-before {
    position: absolute;
    z-index: 10;
    bottom: 15%;
    left: 5%;
    text-align: left;
    color: #fff;
    text-shadow: 0 0 2px rgba(0,0,0,0.8), 0 2px 4px rgba(0,0,0,0.7)
}

.carousel-after {
    position: absolute;
    z-index: 10;
    bottom: 15%;
    right: 5%;
    text-align: right;
    color:#fff;
    text-shadow: 0 0 2px rgba(0,0,0,0.8), 0 2px 4px rgba(0,0,0,0.7)
}

.carousel .indicators .indicator-item {
    margin-top:12px;
    margin-bottom:12px;
}

/* Subpages
--------------------------------*/
.container {
    width:90vw;
    max-width:1200px;
    margin-left:auto;
    margin-right:auto;
    padding:0;
}

.interior-copy {
    background:#fff;
    padding:2.5rem 1.5rem;
    box-shadow:0 2px 6px rgba(0,0,0,0.1)
}  

.interior-copy h1 {
    position: relative;
    display:inline-block;
    font-weight:bold; 
    font-size:2rem; 
    margin:0 auto 3rem;
    width:auto;
}

.interior-copy h1:after {
    display: block;
    position: absolute;
    content: '';
    font-weight:bold;
    font-size:0.5rem;
    text-align:right;
    height: 2px;
    width: calc(100% + 1rem); 
    bottom: -0.25rem;
    left: -0.5rem;
    background: linear-gradient(135deg, var(--primary) 0, var(--primary) calc(100% - 40px), transparent calc(100% - 40px)), repeating-linear-gradient( 135deg, transparent, transparent 4px, var(--primary) 4px, var(--primary) 6px);
    z-index: 1;
    transition: width 0.2s;
}


/* Form 
----------------------*/
.form-container {
    background:#fff;
    width: 90vw;
    max-width: 500px;
    padding:2.5rem 1.5rem 0;
    margin:2rem auto 4rem;
    box-shadow:0 2px 8px rgba(0,0,0,0.2)
}
.form-contactpage {
    max-width:500px;
}
form {
    text-align:left;
}

form .btn {
    margin-left:0;
}
fieldset {
    border:none;
    padding:0;
    margin:0;
}
legend {
    font-size:1.5rem;
    font-weight:bold;
    margin-bottom:0.25rem;
}

.form-container {
    text-align:left;
}

form .row {
    margin-bottom:0;
}

.input-field {
    margin-bottom:0.5rem;
}

.input-field .helper-text {
    position: absolute;
    right: 1.5rem;
    top: 1rem;
}

input:not([type]), input[type=text]:not(.browser-default), input[type=password]:not(.browser-default), input[type=email]:not(.browser-default), input[type=url]:not(.browser-default), input[type=time]:not(.browser-default), input[type=date]:not(.browser-default), input[type=datetime]:not(.browser-default), input[type=datetime-local]:not(.browser-default), input[type=tel]:not(.browser-default), input[type=number]:not(.browser-default), input[type=search]:not(.browser-default), textarea.materialize-textarea {
    height:2.5rem;
}

input:not([type]):focus:not([readonly]), input[type=text]:not(.browser-default):focus:not([readonly]), input[type=password]:not(.browser-default):focus:not([readonly]), input[type=email]:not(.browser-default):focus:not([readonly]), input[type=url]:not(.browser-default):focus:not([readonly]), input[type=time]:not(.browser-default):focus:not([readonly]), input[type=date]:not(.browser-default):focus:not([readonly]), input[type=datetime]:not(.browser-default):focus:not([readonly]), input[type=datetime-local]:not(.browser-default):focus:not([readonly]), input[type=tel]:not(.browser-default):focus:not([readonly]), input[type=number]:not(.browser-default):focus:not([readonly]), input[type=search]:not(.browser-default):focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) {
    border-bottom: 1px solid var(--secondary);
    -webkit-box-shadow: 0 1px 0 0 var(--secondary);
    box-shadow: 0 1px 0 0 var(--secondary);
}
input:not([type]):focus:not([readonly])+label, input[type=text]:not(.browser-default):focus:not([readonly])+label, input[type=password]:not(.browser-default):focus:not([readonly])+label, input[type=email]:not(.browser-default):focus:not([readonly])+label, input[type=url]:not(.browser-default):focus:not([readonly])+label, input[type=time]:not(.browser-default):focus:not([readonly])+label, input[type=date]:not(.browser-default):focus:not([readonly])+label, input[type=datetime]:not(.browser-default):focus:not([readonly])+label, input[type=datetime-local]:not(.browser-default):focus:not([readonly])+label, input[type=tel]:not(.browser-default):focus:not([readonly])+label, input[type=number]:not(.browser-default):focus:not([readonly])+label, input[type=search]:not(.browser-default):focus:not([readonly])+label, textarea.materialize-textarea:focus:not([readonly])+label {
    color: var(--secondary)
}

form.submitting button[type=submit] {
    position:relative;
}
form .loading-animation {
    display:none;
}
form.submitting button[type=submit] .loading-animation {
    display:block;
    position:absolute;
    right: -72px;
    top: 0;
}

.contact-intro h2 {margin-top:0;}
.contact-list h2 {margin-bottom:0; font-size:1.5rem;}
.contact-intro a {
    color:var(--secondary);
}
.contact-intro a:hover,
.contact-intro a:focus {
    text-decoration: underline;
}

/* Modals
----------------------*/
.modal {
    max-width: 600px;
    position: fixed;
    top: 50% !important;
    transform: scaleX(1) scaleY(1) translateY(-50%) !important;
}
.modal-content {text-align:left; padding: 30px 30px 20px;}
.readmore {font-weight:bold; font-style:italic; color:var(--secondary);}
.readmore:hover, .readmore:focus {color:var(--primary)}
.hidden-anchor {display:block; padding-top:80px; margin-top:-80px;}

h2 + .hidden-anchor + h3 {margin-top:0;}


/* Responsive Styles
----------------------*/

@media screen and (max-width:991px){
    nav .nav-wrapper {
        padding:0;
        text-align:center;
    }

    .sidenav {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .sidenav-overlay {
        background-color:rgba(0,0,0,0.3)
    }
    .sidenav li > a {
        font-size:1rem;
        padding:0 1.5rem;
        position:relative;
        font-weight:bold;
        color: var(--secondary);
        text-decoration:none;
    }

    .mobile-nav-contact {
        font-size: 1rem;
        padding:1.5rem;
    }
}

@media screen and (min-width:601px){
    nav, .navbar-fixed {height:90px; line-height:90px;}

    html[data-scroll='0'] .navbar-fixed nav,
    html[data-scroll='1'] .navbar-fixed nav,
    html[data-scroll='2'] .navbar-fixed nav,
    html[data-scroll='3'] .navbar-fixed nav,
    html[data-scroll='4'] .navbar-fixed nav,
    html[data-scroll='5'] .navbar-fixed nav {
        background-color:transparent;
        box-shadow:none;
    }
/* 
    .navbar-fixed nav {
        background-color:transparent;
        box-shadow:none;
    } */
    .navbar-fixed .nav-wrapper {
        display:flex;
        justify-content: space-between;
    }
    .navbar-fixed .brand-logo {
        position:relative;
    }
    .navbar-fixed nav ul a {
        padding:0 1.5rem;
        position:relative;
        font-weight:bold;
        color: var(--secondary);
        text-decoration:none;
    }
    
    .navbar-fixed nav ul a:hover,
    .navbar-fixed nav ul a:focus {
        background-color:rgba(0,0,0,0.05);
        outline:none;
        text-decoration:none;
    }
    .navbar-fixed nav ul a:after {
        display: block;
        position: absolute;
        content: '';
        height: 2px;
        width: 0;
        bottom: 0.75rem;
        left: 1rem;
        background-color: var(--secondary);
        z-index: 1;
        transition:width 0.2s;
    }
    .navbar-fixed nav ul a:hover:after,
    .navbar-fixed nav ul a:focus:after {
        width: calc(100% - 2rem);
    }

    .profiles {flex-direction:row; align-items:center; justify-content:space-around; width:90vw; max-width:960px; margin:3.5rem auto;}


    .carousel-info h3 {
        font-size:1.5rem;
        margin: 0 auto;
    }
    
    .carousel-info {
        bottom: 20%;
        
    }
    .carousel .indicators .indicator-item {
        margin-top:15px;
        margin-bottom:15px;
    }

    .photo-right {float:right;margin-left:20px;}
}

@media screen and (min-width:768px){
    .interior-copy {
        padding:3rem;
    }

    .top-header .logo {width:300px; margin:0}

    .carousel-info {
        bottom: 15%;
        
    }

}

@media screen and (min-width:992px){
    h1 {font-size:2rem;}
    h2 {font-size:1.75rem;}
    h3 {font-size:1.5rem}

    .intro h1 {font-size:1.75rem; margin:4rem auto 5rem auto;}
    .profile h2 {font-size:1.5rem}
    
    .logo-v {width:247px;}
    .profile {margin-bottom:0;}
    .round-img img {width:330px; height:330px;}

    .carousel-wrapper {
        margin:0rem auto 4rem auto;
    }
    .carousel .indicators .indicator-item {
        margin-top:24px;
        margin-bottom:24px;
    }

    .form-container {
        margin-bottom: 6rem;
    }
}

@media screen and (min-width:1200px){

    .carousel-wrapper h2 {
        font-size:2.5rem;
    }
    .carousel-info {
        bottom: 10%;
        left:25%;
        width:50%;
    }
    
    .carousel-info h3 {
        font-size:2.5rem;
    }
    
    .carousel-before {
        bottom: 10%;
        left: 5%;
    }
    
    .carousel-after {
        bottom: 10%;
        right: 5%;
    }
}

@media screen and (max-height:768px){
    
}

@media (orientation: landscape) {
    html {
        background-size:100vw auto;
    }
}

@media (orientation: portrait) {
    html {
        background-size:auto calc(100vh + 80px);
    }
}





/* Internal page
----------------------*/
.internal-visit-page h1 {margin-bottom:2rem; }
#analytics-status {
    color:var(--secondary);
    font-weight:700;
}

#internal-select {
	display: block;
	font-family:'Franklin Gothic Book', franklin-gothic-urw, 'Arial Narrow', Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif; 
	font-size: 1rem;
	font-weight: 700;
	color: #444;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	width: 100%;
	max-width: 300px;
	box-sizing: border-box;
	margin: 1.5rem auto;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .1em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
	cursor:pointer;
}
#internal-select::-ms-expand {
	display: none;
}
#internal-select:hover {
	border-color: #888;
}
#internal-select:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222;
	outline: none;
}
#internal-select option {
	font-weight:normal;
}