/**
 *  quick portfolio
 *  bryan@bryanlademann.com 2016
 *
 *  = 01 : base
 *  = 02 : grid
 *  = 03 : navigation
 *  = 04 : layout
 *  = 05 : utilities
 *  = 06 : media queries
-------------------------------------------------------------------------------- */


/* ----------------------------------------
  = 01 : base
----------------------------------------- */

:root {
	--minor-second: 1.067;
	--major-second: 1.125;
	--minor-third: 1.2;
	--major-third: 1.25;
	--perfect-fourth: 1.333;
	--augmented-fourth: 1.414;
	--perfect-fifth: 1.5;
	--golden-ratio: 1.618;
	
	--root-size: 1rem;
	--ratio: 0.4292;
	--initial-scale: calc(var(--root-size) + var(--ratio) * 1vw);

	--modular-scale: 1.618;
	
	--scale-sixteenth: calc(var(--initial-scale) * 0.0625);
	--scale-eighth: calc(var(--initial-scale) * 0.125);
	--scale-quarter: calc(var(--initial-scale) * 0.25);
	--scale-third: calc(var(--initial-scale) * 0.333);
	--scale-half: calc(var(--initial-scale) * 0.5);
	--scale-three-fourths: calc(var(--initial-scale) * 0.75);
	--scale: var(--initial-scale);
	--scale-1-25: calc(var(--scale) * 1.25);
	--scale-1-5: calc(var(--scale) * 1.5);
	--scale-2: calc(var(--scale) * var(--modular-scale));
	--scale-3: calc(var(--scale-2) * var(--modular-scale));
	--scale-4: calc(var(--scale-3) * var(--modular-scale));
	--scale-5: calc(var(--scale-4) * var(--modular-scale));
	--scale-6: calc(var(--scale-5) * var(--modular-scale));
	--scale-7: calc(var(--scale-6) * var(--modular-scale));
	--scale-8: calc(var(--scale-7) * var(--modular-scale));
	--scale-9: calc(var(--scale-8) * var(--modular-scale));
	--scale-10: calc(var(--scale-9) * var(--modular-scale));
}

*,
*:before,
*:after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}




html {
    overflow-y: scroll;

    -webkit-box-sizing: border-box;
    box-sizing: border-box;

    background: #0f172a;
    background-image: -webkit-radial-gradient(circle,
            #022c22, #0f172a);
    background-image: radial-gradient(circle,
            #022c22, #0f172a);
    font-size: 62.5%;

    scroll-behavior: smooth;
    /*background-attachment: fixed;*/
    /* prevents visual 'page jump' effect when scrollbar
    appears due to amount of vertical content. */
    -webkit-font-smoothing: antialiased;
    overscroll-behavior: none;

}


body {
    font: 400 1.6rem/var(--modular-scale) 'Lato', Helvetica, Arial, sans-serif;
    color: #aeaeae;
}

body:before {
    position: fixed;
    z-index: 999;
    top: -1rem;
    left: 0;

    width: 100%;
    height: 1rem;

    content: '';

    -webkit-box-shadow: 0 0 1rem rgba(0, 0, 0, .8);
    box-shadow: 0 0 1rem rgba(0, 0, 0, .8);
}



a,
a:visited {
    display: inline-block;

    -webkit-transition: all .3s cubic-bezier(.17, .67, .83, .67);
    transition: all .3s cubic-bezier(.17, .67, .83, .67);
    text-decoration: none !important;

    border: none;
}

a:hover {
    color: #b1934c;
}

/*
a:after
{
    display: block;

    width: 0;
    height: 1px;
    margin: auto;

    content: '';
    -webkit-transition: width .3s cubic-bezier(.17,.67,.83,.67), background-color .3s cubic-bezier(.17,.67,.83,.67);
            transition: width .3s cubic-bezier(.17,.67,.83,.67), background-color .3s cubic-bezier(.17,.67,.83,.67);

    background: transparent;
}
a:hover:after
{
    width: 100%;

    background: #a16207;
}
a.no-hover:hover:after
{
    display: none;
}
*/
a.no-hover,
a.no-hover:hover {
    color: #aeaeae;
}

a:not(.no-hover),
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #a16207;
}




h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Eczar', sans-serif;
    font-weight: 300;
    line-height: 1.225;
    margin: 0;
    padding: 0 0 var(--scale);
}

h1 {
    font-size: var(--scale-4);
    font-weight: bolder;
    padding: 0;
    color: #d6d3d1;
}

h2 {
    font-size: var(--scale-3);
}
h3 {
    font-size: var(--scale-2);
}

p,
ul {
    margin: 0 0 var(--scale);
}

blockquote {
    position: relative;
    margin: 0;
    padding: var(--scale-2) var(--scale-2);

    background: rgba(0, 0, 0, .33);
}

blockquote p {
    position: relative;
}

blockquote cite {
/*     font-size: var(--scale); */
}

code {
/*     font-size: var(--scale); */

    color: #777;
}

iframe {
    overflow: hidden;

    border: 0;
}

img {
    max-width: 100%;
    height: auto;

    border: 0 none;
}





/* ----------------------------------------
  =  : pace.js
----------------------------------------- */

.pace {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;

    -webkit-pointer-events: none;
}

.pace-inactive {
    display: none;
}

.pace .pace-progress {
    position: fixed;
    z-index: 999;
    top: 0;
    right: 100%;

    width: 100%;
    height: var(--scale-quarter);

    background: #a16207;
}

.oldie .pace {
    display: none;
}



/* ----------------------------------------
  =  : preloader.js
----------------------------------------- */

#preloader {
    position: fixed;
    z-index: 998;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: #0f172a;
    background-image: -webkit-radial-gradient(circle,
            #022c22, #0f172a);
    background-image: radial-gradient(circle,
            #022c22, #0f172a);
}

.no-js #preloader,
.oldie #preloader {
    display: none;
}

#loader {
    position: absolute;
    top: 50%;
    left: 50%;

    width: var(--scale-4);
    height: var(--scale-4);
    margin-top: calc(var(--scale-2) * -1 );
    margin-left: calc(var(--scale-2)  * -1 );
    padding: 0;

    -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
    animation: sk-scaleout 1.0s infinite ease-in-out;

    border-radius: 100%;
    background-color: #a16207;
}

@-webkit-keyframes sk-scaleout {
    0% {
        -webkit-transform: scale(0);
    }

    100% {
        -webkit-transform: scale(1);

        opacity: 0;
    }
}

@keyframes sk-scaleout {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);

        opacity: 0;
    }
}


/* ----------------------------------------
  = particles // #022c22, #0f172a
----------------------------------------- */
.particles {
    /*background: #0f172a;*/
    overflow: hidden;
}

.particles .pg-canvas {
    position: absolute;
    top: 0;
    left: 0;

    width: 100% !important;
    height: 100% !important;

    opacity: .33;
}

.particles .shadow-overlay {
    display: none;
}






/* ----------------------------------------
  = 03 : navigation
----------------------------------------- */
/* assign to all navigation menus */
.menu {
    position: relative;
    z-index: 901;

    margin: var(--scale) 0;

    list-style: none;

    text-align: center;
}

menu:after {
    display: table;

    content: '';
}

.menu:after {
    clear: both;
}

.menu ul {
    margin: 0;
    padding: 0;
}

.menu li:before {
    display: none;
}

.menu li:first-of-type {
    margin-left: 0;
}

/*  assign to set horizontal or vertical layouts for navs/lists */
.menu-horizontal li {
    display: inline-block;
}

.menu-vertical li {
    display: block;
    margin: var(--scale-half) 0;
}

.menu-vertical a .menu-horizontal a {
    display: block;
    text-decoration: none;
}

.menu-skills.menu-horizontal li {
    margin-bottom: 0;
}

.menu-skills a {
    color: #d6d3d1;
}

.menu-skills a:after {
    display: none;
}

.menu-social a,
.menu-social .fa {
    font-size: 1.8rem;
}


/* ----------------------------------------
  =: forms
----------------------------------------- */

form {
    width: 100%;
}

form ol {
    margin: 0;

    list-style: none;
}

form li {
    margin-bottom: var(--scale);
}

/* Targets Webkit based browsers: Safari, Chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    form li {
        margin-bottom: var(--scale);
    }
}

legend,
fieldset {
    width: 100%;
}

fieldset {
    margin: 0;
    padding: 0;

    border: none;
}

label {
    font-size: var(--scale-three-fourths);

    display: block;

    margin: 0;
}


/* ----------------------------------------
  = 03 : navigation
----------------------------------------- */

button {
    border: none;
}

.button {
    position: relative;

    display: block;

    width: auto;
    margin: var(--scale) auto;
    padding: var(--scale) var(--scale-2);

    cursor: pointer;
    text-decoration: none;
    letter-spacing: 0.1rem;
    text-transform: uppercase;

    color: #eee;
    border: none;
    /* Saf4+, Chrome */
    /*    background-image: -webkit-gradient(linear, left top, left bottom, from(#B8CC66), to(#90A14B)); */
    /* Chrome 10+, Saf5.1+, iOS 5+ */
    /*    background-image: -webkit-linear-gradient(top, #B8CC66, #90A14B); */
    /* Firefox 3.6-15 */
    /*    background-image:    -moz-linear-gradient(top, #B8CC66, #90A14B); */
    /* Firefox 16+ */
    /*    background-image:     -ms-linear-gradient(to bottom, #B8CC66, #90A14B); */
    /* Opera 11.10+ */
    /*    background-image:      -o-linear-gradient(top, #B8CC66, #90A14B); */
    /* Firefox 16+ */
    /*    background-image:         linear-gradient(to bottom, #B8CC66, #90A14B); */
    border-radius: 0.3rem;
    /*   background: #90A14B; */
    background: rgba(0, 0, 0, 0.6);
}


.button:hover,
.button:focus {
    /*
   background: -moz-linear-gradient(top, #C7D590, #90A14B);
   background: -webkit-gradient(linear, 0 0, 0 100%, from(#C7D590), to(#90A14B));
*/
    /* Saf4+, Chrome */
    /*    background-image: -webkit-gradient(linear, left top, left bottom, from(#C7D590), to(#90A14B)); */
    /* Chrome 10+, Saf5.1+, iOS 5+ */
    /*    background-image: -webkit-linear-gradient(top, #C7D590, #90A14B); */
    /* Firefox 3.6-15 */
    /*    background-image:    -moz-linear-gradient(top, #C7D590, #90A14B); */
    /* Firefox 16+ */
    /*    background-image:     -ms-linear-gradient(to bottom, #C7D590, #90A14B); */
    /* Opera 11.10+ */
    /*    background-image:      -o-linear-gradient(top, #C7D590, #90A14B); */
    /* Firefox 16+ */
    /*    background-image:         linear-gradient(to bottom, #C7D590, #90A14B); */
    color: #fff;
    background: rgba(0, 0, 0, 0.3);
}

.button:active {
    top: 1px;

    cursor: wait;

    -webkit-box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1);
    box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1);
}


.btn-back-to-top {
    font-size: var(--scale);
    font-weight: 100;
    line-height: var(--scale);

    position: fixed;
    z-index: 901;
    right: var(--scale-2);
    bottom: var(--scale-2);

    display: none;
    overflow: hidden;

/*
    width: var(--scale);
    height: var(--scale);
*/
    padding: var(--scale-half) var(--scale-three-fourths);

    text-align: center;
    letter-spacing: 0;

    opacity: 0.77;
    color: white !important;
    outline: none;
    background: #a16207;
}

.btn-back-to-top:hover {
    opacity: 1;
}

.button-toggle {
    position: absolute;
    z-index: 902;
    top: var(--scale);
    right: 0;

    display: none;

    width: var(--scale-3);
    height: var(--scale-3);
    padding: var(--scale);

    text-align: center;

    outline: none;
}

.button-toggle .button-toggle-bar {
    position: relative;

    display: inline-block;

    background: rgba(0, 0, 0, .6);
}

.button-toggle .button-toggle-bar:last-of-type {
    height: 0.15rem;
    margin-bottom: 0;
}

.button-toggle .button-toggle-bar {
    float: left;
    clear: left;

    width: 100%;
    height: 0.2rem;
    margin-bottom: 0.25rem;

    background: rgba(255, 255, 255, .7);
}

.button-toggle .button-toggle-bar.square {
    float: left;

    width: var(--scale);
    height: var(--scale);
    margin-top: var(--scale);

    background: rgba(0, 0, 0, .7);
}

.button-toggle .button-toggle-bar.line {
    float: left;

    width: 0.1rem;
    height: 0.2rem;
    margin-left: 0.6rem;

    background: rgba(0, 0, 0, .7);
}





/* 5.1 form fields
----------------------------------------- */

/* align checkboxes, radios, text inputs with their label
   by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css  */
input[type='radio'] {
    padding-right: var(--scale);
}

input[type='checkbox'] {
    padding-right: var(--scale-2);
}

/* use to make checkbox + radio appear as buttons */
label.checkbox {
    display: inline-block;

    min-width: 33%;
    margin: 0.25rem 0 0;
    padding: 0.4rem 0.2rem;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    border-radius: 0.2rem;
    background: rgba(black, .1);
}

/* hand cursor on clickable input elements */
label,
input[type=button],
input[type=submit],
button,
select,
.pointer {
    cursor: pointer;
}

input,
select {
    vertical-align: middle;
}

select,
input,
textarea {
    font: 99% sans-serif;
}

input[type='color'],
input[type='datalist'],
input[type='date'],
input[type='email'],
input[type='file'],
input[type='number'],
input[type='password'],
input[type='search'],
input[type='text'],
input[type='tel'],
input[type='time'],
input[type='url'],
textarea {
    width: auto;
    margin: 0;
    padding: var(--scale-eighth) var(--scale);

    color: #444;
    border: 1px solid rgba(black, .1);
    border-radius: 0.4rem;
    outline: none;
    background: $white;

    *margin-left: calc(var(--scale-2) * -1);
    /*ie*/
}


input[type='color']:focus,
input[type='datalist']:focus,
input[type='date']:focus,
input[type='email']:focus,
input[type='file']:focus,
input[type='number']:focus,
input[type='password']:focus,
input[type='search']:focus,
input[type='text']:focus,
input[type='tel']:focus,
input[type='time']:focus,
input[type='url']:focus,
textarea:focus {
    outline: none;
    -webkit-box-shadow: 0 0 0.6rem rgba(0, 0, 0, .3);
    box-shadow: 0 0 0.6rem rgba(0, 0, 0, .3);
}

textarea {
    height: 10.1rem;
    padding: 0.3rem;
}






/* ----------------------------------------
  = 04 : layout
----------------------------------------- */
.top-bar {
    font-weight: 700;

    position: relative;
    z-index: 901;

    padding: var(--scale-half) 0;

    text-align: center;
    letter-spacing: .1rem;
    word-spacing: .225rem;
    text-transform: uppercase;

    color: #d6d3d1;
    background: #a16207;
}


.view-container {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
}


.masthead {
    line-height: 1;

    position: relative;
    z-index: 101;

/*     padding: var(--scale) 0; */

    background: rgba(0, 0, 0, .33);
}

.masthead:before {
    position: absolute;
    z-index: 100;
    top: -1rem;
    left: 0;

    width: 100%;
    height: 1rem;

    content: '';

    -webkit-box-shadow: 0 0 1rem rgba(0, 0, 0, .8);
    box-shadow: 0 0 1rem rgba(0, 0, 0, .8);
}

.availability {
    padding: var(--scale-half) 0;
    text-align: center;
}

.availability p {
    font-weight: 700;

    letter-spacing: .1rem;
    word-spacing: var(--scale-eighth);
    text-transform: uppercase;

    color: #d6d3d1;
}


/*
.ribbon {
  background: #a16207;
  color: #d6d3d1;
  font-weight: 700;
  padding: 1.618em 0;
  text-align; center;
  }


 .corner-ribbon-right {
  position: fixed;
  top: 50px;
  right: -200px;
  width: 600px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
 }
*/


.bio {
    text-align: left;
}

/*
.bio:before {
  display: inline-block;
  position: relative;
  content: " ";
  float: left;
  background: url('../img/bryan-bw.png') no-repeat;
  border-radius: 20px 5px 20px;
  margin-right: 3.2%;
  margin-bottom: 1.618em;
  top: .9em;
  height: 100px;
  width: 100px;
   }
*/
.logo {
    margin: 0 auto;
    /*    -webkit-transform: scaleX(-1);
        -ms-transform: scaleX(-1);
            transform: scaleX(-1);*/

    text-align: center;

    border-radius: var(--scale-eighth) var(--scale) var(--scale-eighth) var(--scale);

    /*-webkit-filter: FlipH;
            filter: FlipH;
        -ms-filter: 'FlipH';*/
}


.footer {
    padding: 3.2rem 0;
}


.skills a {
    -webkit-transition: all .2s cubic-bezier(.17, .67, .83, .67);
    transition: all .2s cubic-bezier(.17, .67, .83, .67);
    text-align: center;
}

.skills a:hover {
    color: #d6d3d1;
}

.skills a:hover:after {
    background: none;
}

/* masonry
----------------------------------------- */

.masonry-block {
    margin-bottom: var(--scale-2);
}


.masonry-block-2 {
    margin: 0 var(--scale) var(--scale-2);
    background: rgba(0, 0, 0, .5);
}



/* ----------------------------------------
  = 05 : utilities
----------------------------------------- */
.center {
    margin: auto;

    text-align: center;
}

@media (max-width: 768px) {
    .xs-center {
        margin: auto;

        text-align: center;
    }
}

.no-top {
    margin-top: 0;
    padding-top: 0;
}

.no-btm {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.fl-left {
    float: left;
}

.fl-right {
    float: right;
}

.cf:before,
.cf:after {
    display: table;
    /* 2 */

    content: ' ';
    /* 1 */
}

.cf:after {
    clear: both;
}

.hide {
    display: none;
}

.txt-strong {
    font-weight: 700;
}

.txt-thin {
    font-weight: 100;
}

.txt-uc {
    text-transform: uppercase;
}

.txt-lc {
    text-transform: lowercase;
}

.clr-white {
    color: #d6d3d1;
}

.bg-darkest {
    background-color: #212121;
}

.bg-darker {
    background-color: #424242;
}

.bg-dark {
    background-color: #616161;
}

.bg-branding-dark {
    background-color: #37474f;
}

.bg-mid {
    background-color: #9e9e9e;
}

.bg-light {
    background-color: #e0e0e0;
}

.bg-lighter {
    background-color: #eee;
}

.bg-lightest {
    background-color: #f5f5f5;
}

.bg-white {
    background-color: #fff;
}

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


.bg-branding-secondary {
    background: #a16207;
}

.clr-branding-secondary {
    color: #a16207;
}



/* ----------------------------------------
  =  : font awesome
----------------------------------------- */

.fa {
    padding: 0 .225rem;
}

.fa-alt {
    color: #3d3d3d;
}

.fa-quote-left {
    margin-top: -1rem;

    text-indent: -1.33rem;
}

.fa-quote-left,
.fa-quote-right {
    opacity: .33;
}

/* .fa-quote-left { position: absolute;top: 0; left: 0;} */



/* ----------------------------------------
  =  : animations
----------------------------------------- */

.js .animate-this,
.js .animate-intro {
    opacity: 0;
}

.js .done-animating {
    opacity: 1;

    -webkit-animation-fill-mode: none;
    animation-fill-mode: none;
}


/* ----------------------------------------
  = 06 : media queries
----------------------------------------- */

@media only screen and (min-width: 1536px) {
		p { font-size: var(--scale) }
/*
    h1 { font-size: 8.9rem; }
    h2 { font-size: 5.5rem; }
*/
 }

/* mobile first : use min
/* ----------------------------------------- */
@media screen and (min-width: 1px) {
    .menu-horizontal li {
        display: inline-block;
        margin: 0 .445rem var(--scale-half);
    }

    .skills .row a {
        margin-bottom: var(--scale);
    }

    .skills .row a:last-of-type {
        margin-bottom: 0;
    }


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

}

@media screen and (min-width: 768px) {
    .skills a {
        margin-bottom: 0;
    }

    .menu-horizontal li {
        display: inline-block;
        margin: 0 var(--scale-half) var(--scale-half);
    }

    .one-half {
        width: 50%;
    }

    .one-third {
        width: 33.33%;
    }

    .two-thirds {
        width: 66.66%;
    }

    .one-quarter {
        width: 25%;
    }

    .three-quarters {
        width: 75%;
    }

    .one-fifth {
        width: 20%;
    }

    .two-fifths {
        width: 40%;
    }

    .three-fifths {
        width: 60%;
    }

    .four-fifths {
        width: 80%;
    }


}

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

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

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