/* keep scrollbar present on all pages */
html {
    overflow-y: scroll;
}

body {
    padding-right:0px !important;
    overflow:hidden !important;
    background-color: #333333;
    color: #d5d5d5;
}

/* all page content styling */

#content-container {
    margin-top: 50px;
}

#footer-container a {
    color: #d5d5d5;
    font-size: 2em;
}

#footer-container p, #footer-container a {
    line-height: 30px;
}

.hover-facebook:hover {
    opacity: 1 !important;
    color: #3f51b5 !important;
}

.hover-google:hover,
.hover-pinterest:hover {
    opacity: 1 !important;
    color:#f44336 !important;
}

.hover-instagram:hover {
    opacity: 1 !important;
    color: #4b0082 !important;
}

.hover-twitter:hover {
    opacity: 1 !important;
    color:#87CEEB !important;
}

.hover-linkedin:hover {
    color:#3f51b5 !important;
}

.hover-email:hover {
    color:#757575 !important;
}

.page-header {
    font-variant: small-caps;
    margin-top: 30px;
}

/* nav styling */

#nav-container #nav-name {
    color:#D4AF37;
    font-variant: small-caps;
    font-size: 1.2em;
}

 /* Add a dark background color with a little bit see-through */
#nav-container .navbar {
    margin-bottom: 0;
    background-color: #2d2d30;
    border: 0;
    font-size: 11px !important;
    letter-spacing: 4px;
    opacity:0.9;
}

/* Add a gray color to all navbar links */
#nav-container .navbar a {
    color: #d5d5d5 !important;
}

#nav-container .navbar .selected {
    color: #D4AF37 !important;
}

/* On hover, the links will turn white */
#nav-container .navbar li a:not(.selected):hover {
    color: #fff !important;
}

/* The active link */
#nav-container .navbar li.active a {
    color: #fff !important;
    background-color:#29292c !important;
}

/* Remove border color from the collapsible button */
#nav-container .navbar .navbar-toggle {
    border-color: transparent;
}

/* Dropdown */
#nav-container .open .dropdown-toggle {
    color: #fff ;
    background-color: #555 !important;
}

#nav-container .nav .dropdown.open .caret{
    border-top: none;
    border-bottom: 4px solid #d5d5d5;
}

/* Dropdown links */
#nav-container .dropdown-menu li a {
    color: #000 !important;
}

/* On hover, the dropdown links will turn red */
#nav-container .dropdown-menu li a:hover {
    background-color: #2d2d30 !important;
}

/* home page styling */
#home-page-container {
    margin-bottom: 25px;
}

#home-page-container blockquote {
    border: none;
}

#home-page-container h1 {
    color:#D4AF37;
    font-variant: small-caps;
}

#home-page-container h1,
#home-page-container h2 {
    text-shadow: 0 1px 0 rgb(0, 0, 0);
}

#home-quote-container {
    margin: 10px 0;
}

#home-quote-container p {
    font-style: italic;
    position: relative;
}

#home-page-container #home-image {
    padding: 0;
}

/* Position the quotes on the headings */
#home-quote-container .fa-quote-left,
#home-quote-container .fa-quote-right {
    font-size: 0.5em;
    position: relative;
    top: -14px;
}

#home-quote-container .fa-quote-left {
    padding-right: 3px;
}

#home-quote-container .fa-quote-right {
    padding-left: 8px;
}

#home-page-container #myCarousel {
    display: inline-block;
}

/* Remove background shadow on carousel controls */
#home-page-container .carousel-control.left, .carousel-control.right {
  background: none !important;
  filter: none !important;
  outline: 0;
 }

#home-page-container .carousel-control.left:focus, .carousel-control.right:focus {
    color: #d5d5d5;
    opacity: 0.6;
}

#home-page-container .carousel-control.left:hover, .carousel-control.right:hover {
    color: #d5d5d5;
    opacity: 1;
}

/* about page styling */

#about-page-container .affix {
    top: 70px;
    padding-right: 30px;
    width: inherit;
  }

#about-page-container a {
    color: #d5d5d5;
}

#about-page-container p {
    font-size: 18px;
    line-height: 1.5;
}

#about-page-container #opening {
    margin-top: 20px;
}

#about-page-container .about-section-header {
    margin: 30px 0;
    color: #D4AF37;
    font-style: italic;
    overflow: hidden;
    position: relative;
}

/* Position the quotes on the headings */
#about-page-container .about-section-header .fa-quote-left,
#about-page-container .about-section-header .fa-quote-right {
    font-size: 0.5em;
    position: relative;
    top: -14px;
}

#about-page-container .about-section-header .fa-quote-left {
    padding-right: 3px;
}

#about-page-container .about-section-header .fa-quote-right {
    padding-left: 8px;
}

#about-page-container #section1 .about-section-header:after,
#about-page-container #section3 .about-section-header:after,
#about-page-container #section5 .about-section-header:after,
#about-page-container #section7 .about-section-header:after,
#about-page-container #section9 .about-section-header:after {
    background-color: #D4AF37;
    content: "";
    display: inline-block;
    height: 2px;
    position: relative;
    vertical-align: middle;
    width: 80%;
    left: 0.5em;
    margin-right: -80%;

}

#about-page-container #section2 .about-section-header:before,
#about-page-container #section4 .about-section-header:before,
#about-page-container #section6 .about-section-header:before,
#about-page-container #section8 .about-section-header:before {
    background-color: #D4AF37;
    content: "";
    display: inline-block;
    height: 2px;
    position: relative;
    vertical-align: middle;
    width: 80%;
    right: 0.5em;
    margin-left: -80%;
}

#about-page-container #section1 h2,
#about-page-container #section3 h2,
#about-page-container #section5 h2,
#about-page-container #section7 h2,
#about-page-container #section9 h2 {
    text-align: left;
}

#about-page-container #section2 h2,
#about-page-container #section4 h2,
#about-page-container #section6 h2,
#about-page-container #section8 h2 {
    text-align: right;

}

#about-page-container #about-page-content p {
    text-align: justify;
}


#about-page-container ul li.active a {
    background-color: transparent;
    margin: -1px;
    border: 1px solid #d5d5d5;
    color: #D4AF37;
}

#about-page-container ul li:not(.active) a:hover {
    color: #2d2d30;
    background-color: #d5d5d5;
    opacity: 0.9;
}

/* gallery page styling */

#gallery-page-container .thumbnail:focus,
#gallery-page-container .thumbnail:active {
    border-color: #d5d5d5;
}

#gallery-page-container .thumbnail:hover {
    border-color: #D4AF37;
    background-color: #D4AF37;
}

#gallery-page-container figure {
    display: block;
    position: relative;
    overflow: hidden;
}

#gallery-page-container figcaption {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.75);
    color: white;
    max-height: 100%;
    height: auto;
    overflow-y: auto;
    word-wrap: break-word;
    padding: 5px 5px 5px 17%;
    text-align: left;
    width: 100%;
}

#gallery-page-container figure button {
    position: absolute;
    border: 1px solid #ababab;
    background-color: #d5d5d5;
    color: #2d2d30;
    min-height: 32px;
    width: 13%;
    text-align: center;
    padding: 5px 0.5em;
    left: 2px; /* position left */
    opacity: 0.7;
    outline: none !important;
    z-index: 2;
}

#gallery-page-container .artwork-share {
    bottom: 2px;
}

#gallery-page-container .artwork-info {
    bottom: 34px;
}

#gallery-page-container figure button:active,
#gallery-page-container figure button:focus {
    background-color: #d5d5d5;
}

#gallery-page-container figure button:hover {
    opacity: 1 !important;
    background-color: #ababab;
}

#gallery-page-container .social-buttons {
    position: relative;
}

#gallery-page-container .social-buttons a {
    position: absolute;
    min-height: 32px;
    border: 1px solid #ababab;
    background-color: #d5d5d5;
    color: #2d2d30;
    opacity: 0.7;
    bottom: 2px;
    left: 2px;
    width: 13%;
    text-align: center;
    padding: 5px 0.5em;
}

#gallery-page-container .social-buttons a:hover {
    background-color: #ababab;
}

#gallery-page-container .gallery-image {
    text-align: center;
    border: 2px solid #d5d5d5;
    padding: 0;
}

#gallery-page-container .tooltip {
    max-width: 80px;
}

#gallery-page-container .thumb {
    margin-bottom: 15px;
}

/* Add background colour two-tone effect to caption plaque */
#gallery-page-container .artwork-title {
	background: -moz-linear-gradient(top,  #bdbdbd 50%, #adadad 50%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #bdbdbd), color-stop(50%,#adadad)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #bdbdbd 50%,#adadad 50%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #bdbdbd 50%,#adadad 50%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #bdbdbd 50%,#adadad 50%); /* IE10+ */
	background: linear-gradient(to bottom, #bdbdbd 50%,#adadad 50%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdbdbd', endColorstr='#adadad',GradientType=0 ); /* IE6-9 */
    box-shadow: inset 0 0 2px 1px hsla(0,0%,0%,.3), inset 0 -15px 30px hsla(0,0%,0%,.1), 0 0 5px 1px hsla(0,0%,0%,.3), 0 6px 6px -3px hsla(0,0%,0%,.3);
    color: #2d2d30;
    margin: 10px auto 20px;
    padding: 5px;
    text-align: center;
    text-shadow: 0 1px 1px hsla(0,0%,100%,.6);
    min-width: 100px;
    max-width: 130px;
}

#gallery-page-container .artwork-title-container {
    height: 60px;
}

#gallery-page-container .artwork-title p {
    margin: 0;
}

/* Center the modal image */
#gallery-page-container .modal {
    text-align:center;
}

/* Fake psuedo element that allows vertical alignment */
#gallery-page-container .modal:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

/* Hide scrollbar on modal */
#gallery-page-container .modal-open {
    overflow: hidden !important;
    padding-right: 0 !important;
    margin-right:0 !important;
}

/* Inline-block to allow dynamic sizing with image content */
#gallery-page-container .modal-dialog {
    display: inline-block;
    vertical-align: middle;
    width: auto;
}

/* Modal image will always be smaller than viewport */
#gallery-page-container .modal .gallery-modal-image {
    width: auto;
    max-width: calc(100vw * 0.9);
    max-height: calc(100vh * 0.9);
}

/* Workshop styling */

#workshop-page-container h1 {
    font-variant: small-caps;
}

#workshop-page-container h2 {
    margin-top: 10px;
}

#workshop-page-container .sidenav h3 {
    margin-top: 10px;
}

#workshop-page-container .sidenav p {
    margin: 20px 0;
}

#workshop-page-container .sidenav .btn {
    background-color: #d5d5d5;
    color: #333;
    outline: none !important;
}

#workshop-page-container .sidenav .btn:hover,
#workshop-page-container .sidenav .btn:focus {
    background-color: #ababab;
    color: #333;
    outline: none !important;
}

#workshop-page-container .sidenav .btn:active {
    background-color: #d5d5d5;
    color: #333;
    outline: none !important;
}

#workshop-page-container .sidenav a {
    color: #D4AF37;
}

#workshop-page-container p.date {
    color:#ccc;
    font-size: 12px;
    font-style: italic;
}

#workshop-page-container p.date .glyphicon {
    padding-right: 2px;
}

/* Post page styling */

#post-page-container p.date {
    color:#ccc;
    font-size: 12px;
    font-style: italic;
}

#post-page-container #comments-row h4 {
    margin-top: 5px;
}

/* Purchase styling */

#purchase-page-container {
    padding: 100px 0;
}

/* Contact styling */

#contact-page-container p {
    font-size: 18px;
}

#contact-page-container #messages-container i {
    padding-right: 4px;
}

#contact-page-container .glyphicon {
    padding-right: 4px;
}

#contact-page-container .btn {
    margin: 0 0 10px;
}

#contact-page-container i {
    padding-right: 5px;
    margin-left: -5px;
}

#contact-page-container .form-group {
    margin-top: 15px;
}

#contact-page-container #recaptcha_widget_div {
    display: inline-block;
}