/*
    Page body
*/
body {
    padding-top: 45px;
    padding-bottom: 20px;
}

.body-content {
    /* Set padding to keep content from hitting the edges on mobile */
    padding-left: 15px;
    padding-right: 15px;
}

.no-padding {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.text-center {
    text-align: center !important;
}

.jumbotron {
    background: none !important;
}

.jumbo-custom {
    padding-top: 100px;
}

.navbar-inverse {
    /* Nav bar overrides */
    background-color: #060606 !important;
    border-color: #444;
}

.navbar-custom {
    border-bottom: 6px;
    border-color: #222;
    color: #222;
}
.navbar-nav>.active>a, .dark-color:hover, .navbar-nav>a:focus {
    background-color: #222 !important;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
  background-color: #222;
}

.dl-horizontal dt {
    /* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column */
    white-space: normal;
}



/*
    Tumblr Apps
*/
.css-opaque-hover:hover {
    opacity: 0.5;
}
.css-highest-post-image {
    visibility: visible;
    max-width: 100% !important;
}
.tumblr-api-error-message {
    font-size: 12px;
    color: red;
}



/*
    Background images
*/
.responsive-background-image {
    background-image: url(/Content/images/general/mountain.jpg);
    /* Center vertically and horizontally at all times */
    background-position: center center;
    background-repeat: no-repeat;
    /* Image is fixed in the viewport so that it doesn't move if the page is taller. We don't want to see the background-color if we scroll down */
    background-attachment: fixed;
    background-size: cover;
    background-color: #B3BFCF;
}

.responsive-background-image-2 {
    background-image: url(/Content/images/general/iceblur.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: #11699e;
}

.responsive-background-image-bluefade {
    background-color: #118be7;
    background: linear-gradient(to top right,#0179d7 10%,#21aaff 94%);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

/* CSS specific to iOS devices */ 
@supports (-webkit-overflow-scrolling: touch) {
    .responsive-background-image { background-attachment: scroll; }
    .responsive-background-image-2 { background-attachment: scroll; }
}



/*
    Animation
*/
.bounce:hover {
    animation: 0.2s ease-in-out bouncy;
}
@keyframes bouncy {
    0% { transform: translateX(0) }
    50% { transform: translateX(-5px) }
    100% { transform: translateX(0) }
}

.hover-pink:hover {
    animation: 0.5s ease-in-out forwards fadepink;
}
@keyframes fadepink {
    0% { background-color: #222222; }
    100% { background-color: #ea4c89; }
}

.hover-insta:hover {
    animation: 0.5s ease-in-out forwards fadeinsta;
}
@keyframes fadeinsta {
    0% {
         background-color: #222222;
    }
    90% {
         background-color: #db9d50;
    }
    100% {
        background-color: #fbad50;
        background: linear-gradient(to top right,#fbad50 10%,#bc2a8d 94%);
    }
}

.hover-linkedin:hover {
    animation: 0.5s ease-in-out forwards fadelinkedin;
}
@keyframes fadelinkedin {
    0% { background-color: #222222; }
    100% { background-color: #0077B5; }
}

.hover-tumblr:hover {
    animation: 0.5s ease-in-out forwards fadetumblr;
}
@keyframes fadetumblr {
    0% { background-color: #222222; }
    100% { background-color: #32506d; }
}

.hover-white:hover {
    animation: 0.5s ease-in-out forwards fadewhite;
}
@keyframes fadewhite {
    0% { background-color: #222222; }
    100% { background-color: #666666; }
}



/*
    Styling
*/
.drop-shadow {
    -webkit-filter: drop-shadow(2px 2px 15px #ccc);
    filter: drop-shadow(2px 2px 15px #ccc);
}

.bottom-shadow {
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.20);
}

.blue-line {
    display: block;
    width: 100%;
    margin: auto;
    border: none;
    color: white;
    height: 1px;
    background: black;
    background: linear-gradient(to right, #108cda, #40B0D0, #fafafa);
    background: -webkit-linear-gradient(to right, #108cda, #40B0D0, #fafafa);     
}

.footer-blue-line {
    height: 5px;
    background: linear-gradient(to right, #61c0d5 25%,#3964ab 100%);
    background: -webkit-linear-gradient(to right, #61c0d5 25%,#3964ab 100% );  
}

.no-underline, .no-underline:hover, .no-underline:active, .no-underline:visited {
    text-decoration: none !important;
}

.btn-outline {
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 30px;
    padding-right: 30px;
    background: linear-gradient(to bottom right, #0070ba 20%, #0070ba 100%);
    color: #fff;
    font-weight: bold;
}

.btn-outline:hover {
    background: #fff;
    background: linear-gradient(to bottom right, #00509a 20%, #00509a 100%);
    color: #fff;
}

.hr-10-wide {
    width: 10%;
    margin-top: 10px;
    margin-bottom: 10px;
}

.btn-small-round {
    background: #ffffff;
    font-weight: bold;
    border-radius: 5px;
}

.btn-my-blue {
    background-color: #2181e1 !important;
    border-color: #2181e1 !important;
}

.btn-my-blue-inverse {
    background-color: #fafafa !important;
    border-color: #2181e1 !important;
    color: #2181e1 !important;
}

.btn-red-inverse {
    background-color: #fafafa !important;
    border-color: #ea2f10 !important;
    color: #f04124 !important;
}

.btn-my-blue-inverse-white-bg {
    background-color: #fff !important;
    border-color: #2181e1 !important;
    color: #2181e1 !important;
}

.border-radius-5 { border-radius: 5px !important; }
.border-radius-10 { border-radius: 10px; }

.flexboxgrid {
    display: flex;
    flex-wrap: wrap;
}

.img-avatar-32 {
    width: 32px;
    height: 32px;
    border-radius: 15px;
}

.img-avatar-22 {
    width: 22px;
    height: 22px;
    border-radius: 11px;
}

.tag {
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 12px;
    color: #ffffff;
    line-height: 1;
    vertical-align: middle;
    /*white-space: nowrap;*/
    text-align: center;
    border: #ccc 1px solid;
    border-radius: 10px;
}

.tag-inverse {
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 12px;
    color: #cccccc;
    line-height: 1;
    vertical-align: middle;
    text-align: center;
    border: #cccccc 1px solid;
    border-radius: 10px;
}

.tag-222 {
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 12px;
    color: #222222;
    line-height: 1;
    vertical-align: middle;
    text-align: center;
    border: #222222 1px solid;
    border-radius: 10px;
    margin: 1px;
}

.tag-555 {
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 12px;
    color: #555555;
    line-height: 1;
    vertical-align: middle;
    text-align: center;
    border: #555555 1px solid;
    border-radius: 10px;
    margin: 1px;
}

.tag-fff {
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 12px;
    color: #fff;
    line-height: 1;
    vertical-align: middle;
    text-align: center;
    border: #fff 1px solid;
    border-radius: 10px;
    margin: 1px;
}

.tag-circle {
    display: inline-block;
    min-width: 22px;
    padding: 3px 7px;
    font-size: 12px;
    color: #aaa;
    line-height: 1.3;
    vertical-align: middle;
    text-align: center;
    border: #aaa 1px solid;
    border-radius: 10px;
    margin: 1px;
}

.item-tag-circle-color {
    display: inline-block;
    margin: 5px 0;
    width: 28px;
    height: 28px;
    line-height: 28px;
    padding: 0;
    border-radius: 50%;
    text-indent: -23em;
    border: none;
}

.social-icon {
    display: inline-block;
    height: 30px;
    width: 30px;
    font-size: 1.6rem;
    line-height: 1.7;
    vertical-align: middle;
    text-align: center;
    margin-left: 6px;
    margin-right: 6px;
    background-color: #333;
    border-radius: 50px;
}

.tick-box-line {
    padding-left: 40px;
    padding-bottom: 10px;
    background: url(/Content/images/icons/tick-icon.svg) no-repeat left 0px;
    background-size: 16px 16px;
}

.display-inline { display: inline !important; }
.display-inline-block { display: inline-block; }



/*
    Width
*/
.width-33 { width: 33%; }
.width-50 { width: 50%; }
.width-100 { width: 100%; }
.max-width-100 { max-width: 100%; }

.width-33-center {
    width: 66%;
    padding-left: 33%;
}
.width-50-center {
    width: 75%;
    padding-left: 25%;
}
.width-66-center {
    width: 80%;
    padding-left: 20%;
}


/*
    Spacing
*/
.pad-top-10 { padding-top: 10px; }
.pad-top-30 { padding-top: 30px; }
.pad-top-40 { padding-top: 40px; }
.pad-top-50 { padding-top: 50px; }
.pad-top-60 { padding-top: 60px; }
.pad-top-70 { padding-top: 70px; }
.pad-top-80 { padding-top: 80px; }
.pad-top-100 { padding-top: 100px; }
.pad-top-120 { padding-top: 120px; }
.pad-top-180 { padding-top: 180px; }

.pad-bottom-0 { padding-bottom: 0px !important; }
.pad-bottom-10 { padding-bottom: 10px; }
.pad-bottom-20 { padding-bottom: 20px; }
.pad-bottom-30 { padding-bottom: 30px; }
.pad-bottom-40 { padding-bottom: 40px; }
.pad-bottom-50 { padding-bottom: 50px; }
.pad-bottom-60 { padding-bottom: 60px; }
.pad-bottom-70 { padding-bottom: 70px; }
.pad-bottom-80 { padding-bottom: 80px; }
.pad-bottom-95 { padding-bottom: 95px; }
.pad-bottom-100 { padding-bottom: 100px; }
.pad-bottom-180 { padding-bottom: 180px; }

.pad-right-10 { padding-right: 10px; }

.margin-top-20 { margin-top: 20px; }

.margin-bottom-0 { margin-bottom: 0px !important; }
.margin-bottom-4 { margin-bottom: 4px !important; }
.margin-bottom-10 { margin-bottom: 10px !important; }
.margin-bottom-20 { margin-bottom: 20px; }
.margin-bottom-40 { margin-bottom: 40px; }
.margin-bottom-60 { margin-bottom: 60px; }

.less-padding {
    padding-left: 6px !important;
    padding-right: 6px !important;
}

.thin-padding {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    padding-right: 5px !important;
    padding-left: 5px !important;
}

.pad-sides-15 {
    padding-right: 15px !important;
    padding-left: 15px !important;
}

.thin-padding-sides-only {
    padding-right: 5px !important;
    padding-left: 5px !important;
}

.left-heavy-thin-padding {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    padding-right: 5px !important;
    padding-left: 15px !important;
}

.height-100 { height: 100%; }



/*
    Color
*/
.color-000 { color: #000 !important; }
.color-111 { color: #111; }
.color-222 { color: #222 !important; }
.color-2a2a2a { color: #2a2a2a !important; }
.color-333 { color: #333; }
.color-444 { color: #444 !important; }
.color-555 { color: #555 !important; }
.color-666 { color: #666; }
.color-667 { color: #667777; }
.color-777 { color: #777; }
.color-888 { color: #888888; }
.color-889 { color: #889999; }
.color-a1a { color: #a1a1a1;}
.color-aaa { color: #aaa !important; }
.color-bbb { color: #bbb; }
.color-ccc { color: #ccc !important;}
.color-ddd { color: #ddd !important;}
.color-eee { color: #eee; }
.color-fff { color: #fff !important; }

.link-my-blue { color: #108cda !important; }
.color-my-blue { color: #0091ea !important; }

.bg-color-1a1 { background-color: #1a1a1a !important; }
.bg-color-222 { background-color: #222222 !important; }
.bg-color-888 { background-color: #888888 !important; }
.bg-color-white { background-color: #ffffff !important; }
.bg-color-grey-1 { background-color: #fafafa !important; }
.bg-color-grey-2 { background-color: #eaeaef !important; }
.bg-color-pink { background-color: #ea4c89 !important; }
.bg-color-aaa { background-color: #aaaaaa !important; }


/*
    Text / Font
*/
.google-font-1 { font-family: 'Raleway', sans-serif; }
.font-playfair { font-family: 'Playfair Display', serif; }
.font-oldstandardtt { font-family: 'Old Standard TT', serif; }
.font-serif { font-family: serif; }

.font-size-0p8 { font-size: 0.8em; }
.font-size-1p2 { font-size: 1.2em; }
.font-size-1p6 { font-size: 1.6em; }
.font-size-12 { font-size: 12px !important; }
.font-size-16 { font-size: 16px !important; }
.font-size-18 { font-size: 18px !important; }
.font-size-20 { font-size: 20px !important; }
.font-size-26 { font-size: 26px !important; }

.bold { font-weight: bold; }
.italic { font-style: italic; }
.lighter { font-weight: lighter; }
.underline { text-decoration: underline; }
.font-weight-400 { font-weight: 400; }
.font-weight-500 { font-weight: 500; }

.line-height-1p6 { line-height: 1.6; }
.line-height-1p8 { line-height: 1.8; }

.letter-spacing-minus-1 { letter-spacing: -1px; }
.letter-spacing-minus-2 { letter-spacing: -2px; }
.letter-spacing-plus-2 { letter-spacing: 2px; }

.letter-spacing-2 {
    letter-spacing: 2em;
    text-indent: 2em;
}

.cursor-pointer { cursor: pointer; }

.btn-dribbble, .btn-dribbble:active, .btn-dribbble:visited {
    color: #fff;
    padding: 16px 20px;
    border-radius: 30px;
    background-color: #ea4c89 !important;
}
.btn-dribbble:hover {
    animation: 0.5s ease-in-out forwards btndribbblefade;
}
@keyframes btndribbblefade {
    100% { background-color: #f47cab; }
}

/* 
    Dummy text lines
*/
.dummy-text-line {
    height: 8px;
    line-height: 1.6rem;
    border-radius: 10px;
}

/* 
    Modal settings
*/
.custom-modal-body { position: relative; }

/*
    Media Screen Queries: Leave last to give priority
*/
@media only screen and (max-width: 768px) {
  .responsive-background-image {
    background-image: url(/Content/images/general/mountainmobile.jpg);
  }

  .responsive-background-image-2 {
    background-image: url(/Content/images/general/iceblurmobile.jpg);
  }
    
  .letter-spacing-2 {
    letter-spacing: 1em;
    text-indent: 1em;
  }

  .jumbo-custom {
    padding-top: 20px;
  }

  .text-center-mobile { text-align: center !important; }
  .text-small-mobile { font-size: 0.8em !important; }
  .text-tiny-mobile { font-size: 0.6em !important; }
  .icon-30px-mobile { height: 30px;width: 30px; }
}

@media (min-width: 768px) {
  .pad-sides-30-desktop {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
}

.photography-item {
    /*box-shadow: 0 0 9px rgba(82, 84, 86, .2);*/
}