/************************
 * Color Background *****
************************/
html.sm-user-ui  {
        background-size: 100%;
    background-size: cover;
}

@media screen and (max-width: 768px) {
    html.sm-user-ui  {
        background-size: auto;
    }
}
        .sm-user-ui .sm-page-content > .sm-page-layout > .sm-page-layout-region-header {
    background-color: #000000;
            background-color: rgba(0,0,0, 0.85);
    }
    .sm-user-ui .sm-page-content > .sm-page-layout >
    .sm-page-layout-region >
    .sm-page-layout-region-left {
    background-color: #010101;
            background-color: rgba(1,1,1, 0.85);
    }
/* =====================================
   Define additional fonts to be used  =
   =====================================
   Use Open Sans Condensed */
@font-face {
  font-family: 'Open Sans Condensed';
  font-style: normal;
  font-weight: 300;
  src: 
     url(https://themes.googleusercontent.com/static/fonts/opensanscondensed/v6/gk5FxslNkTTHtojXrkp-xOnoCx_jK1JUF_-5xuexfsU.eot?#iefix) format('embedded-opentype'),
     url(https://themes.googleusercontent.com/static/fonts/opensanscondensed/v6/gk5FxslNkTTHtojXrkp-xGAzD5WKQVN4wSyA0MYYi4rr7w4p9aSvGirXi6XmeXNA.woff) format('woff'),
     url(https://themes.googleusercontent.com/static/fonts/opensanscondensed/v6/gk5FxslNkTTHtojXrkp-xD1GzwQ5qF9DNzkQQVRhJ4g.ttf) format('truetype');
}

/* Use Roboto Condensed */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: 
     url(https://themes.googleusercontent.com/static/fonts/robotocondensed/v8/Zd2E9abXLFGSr9G3YK2MsG8ITcfo9NwJpvZiO7_FxEg.eot?#iefix) format('embedded-opentype'),
     url(https://themes.googleusercontent.com/static/fonts/robotocondensed/v8/Zd2E9abXLFGSr9G3YK2MsNxB8OB85xaNTJvVSB9YUjQ.woff) format('woff'),
     url(https://themes.googleusercontent.com/static/fonts/robotocondensed/v8/Zd2E9abXLFGSr9G3YK2MsDR-eWpsHSw83BRsAQElGgc.ttf) format('truetype');
}

/* ====================
   = LARGE DISPLAYS   =
   ====================
   SmartPhones display a special page but tablets do not. 
   For small screens and tablets in vertical orientation, 
   show a horizontal menubar in the header. 
   Hide the header for screens that are large enough */
@media only screen and (min-width: 801px) {
  .sm-page-layout-region-header { display: none; }
  .sm-page-layout { 
    margin-left: 25px !important;
    margin-right: 12px !important;
  }
}

/* =============================
   = iPads and Small Monitors  =
   =============================
   Hide the left nav bar for screens that aren't large enough */
@media only screen and (min-width: 671px) and (max-width: 800px) {
  .sm-page-layout-region-left { display: none; } 
  .sm-page-layout-region .sm-page-layout-region-center { margin-left: 0px !important; }
} 

/* ==================
   = Mobile Phones  =
   ==================
/* Hide the search form and social media links for mobile browsers */
@media only screen and (max-width: 670px) {
  .sm-search-form,  
  .sm-page-layout-region-header .sm-page-widget-logo,
  .sm-page-layout-region-top .sm-page-widget-nav { display: none !important; }

  /* Move the menu up slightly */
  .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-mobile-header { margin-top: -10px; }
  
  /* Make the menu items have a bigger height, for fat fingers */
  .sm-user-ui .sm-page-layout-region-left .sm-accordion-item-label { 
      line-height: 20px !important; 
      border: 0px !important;
  }
  /* Move the +/- accordion buttons so it is centered */
  .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-accordion>.sm-accordion-item>.sm-accordion-item-action .sm-fonticon { top: -5px !important; }

  /* Center the nav bar links */
  .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-accordion {
    text-align: center !important;
  }

  /* Shrink the width and move it to the center of the screen */
  .sm-page-widget-1711069 {
    width: 75%;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Make the background almost transparent for mobile */
  .sm-user-ui .sm-page-content>.sm-page-layout>.sm-page-layout-region>.sm-page-layout-region-left {
    background-color: rgba(1, 1, 1, 0.6);
    height: 100vh;
  }

  /* Make the semi-transparent menu fill the entire screen 
  html, .sm-page, .sm-page-content, .sm-page-layout, .sm-page-layout-region-body, .sm-page-layout-region-left {
    height: 100% !important;
  } */

  /* Make the menu links slightly whiter, since they’re over the background image */
  .sm-accordion-item a {
    color: #CFC1C1 !important;
    text-transform: uppercase !important;
  }
 
  /* Get rid of the separator (bottom border) between navbar links */
  .sm-page-layout-region-left .sm-nav-item-sublevel {
    border-bottom: none !important;
  }
}

/* On Mobile Phones in landscape orientation make it so the navbar 
   doesn't get too wide
@media only screen and (min-width: 340px) and (max-width: 670px) {
  .sm-page-content {
    max-width: 210px !important;
    margin-left: 0px !important;
  }
} */

/* For large screens only  */
@media only screen and (min-width: 1200px) {
  /* Add the word "Download" after the download button */
  .sm-button.sm-button-image-download:after {
    content: " Download" !important;
    font-size: 95%;
  }
}

/* Hide the caption from iPads */
@media only screen and (min-width: 671px) and (max-width: 1200px) {
  .sm-gallery .sm-tile-info,
  .sm-gallery .sm-gallery-footer,
  .sm-search-form  { display: none; }
  
  /* Take more control of the left/right margins of the page. */
  .sm-page-layout { 
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
  
  /* Move the "Add to cart" button up */
  .sm-gallery-headerbuttons {
    position: absolute !important;
    top: -65px !important; 
  }
}

/* ****************************************
   START VERTICAL NAV BAR CUSTOMIZATIONS  *
   **************************************** */
/* Add a line underneath each link in the menu (nav) bar */
.sm-page-layout-region-left .sm-page-widget-nav-toplink, 
.sm-page-layout-region-left .sm-page-widget-nav-toplink:last-child {
  padding: 7px 0px 7px 0px !important;
  width: 90%;
  margin-bottom: 0px !important;
}

@media only screen and (min-width: 671px) {
  .sm-page-layout-region-left .sm-page-widget-nav-toplink, .sm-page-layout-region-left .sm-page-widget-nav-toplink:last-child {
    border-bottom: 1px solid #595959 !important;
  }
}

/* Add some room to the right of each nav bar item so the sub-menu has a gap */
.sm-page-layout-region-left .sm-page-widget-nav-toplink > a {
  padding-right: 12px;
}

/* The 7px padding causes the sub-menu to not align properly. 
   Move it 7px up */
.sm-page-layout-region-left .yui3-menu-children {
  margin-top: -6px !important;
  border: 0px !important;
}

/* Make the menu nav bar text for the active page a different color */
.sm-page-widget-nav-activepage > a {
  color: #E3E3E3!important;
}

/* Make the menu nav bar hover text for the active page a different color */
.sm-page-widget-nav-activepage > a:hover {
  color: #FFFFFF!important;
}

/* Make sure the navbar items have a hover color */
.sm-user-ui .sm-page-widget-nav-color-default a:hover {
  color: #ffffff;
}

/* Change the way the sub-menu bar looks */
.sm-page-layout-region-left .yui3-menu-item .yui3-menu-label {
  padding: 7px 32px 6px 11px !important;
  font-size: 12px;
  /* border: 1px solid rgba(89, 89, 89, 0.4) !important; */
  border-bottom: 1px solid #595959 !important;
  background-color: rgba(68, 68, 68, 0.75);
}

/* Give the sub-menu background some transparency */
.sm-page-widget-nav .sm-page-widget-nav-popover .yui3-menu,
.sm-page-widget-nav .sm-page-widget-nav-popover .yui3-menu-children {
    background-color: #444444;
    background-color: rgba(68, 68, 68, 0.75);
}
/* **************************************
   END VERTICAL NAV BAR CUSTOMIZATIONS  *
   ************************************** */

/* ************************************************
   START HORIZONTAL (TOP) NAV BAR CUSTOMIZATIONS  *
   ********************************************** */
/* Change the way the sub-menu bar looks */
.sm-page-layout-region-top .yui3-menu-item .yui3-menu-label {
  padding: 7px 32px 6px 11px !important;
  font-size: 12px;
  /* border: 1px solid rgba(89, 89, 89, 0.4) !important; */
  border-bottom: 1px solid #595959 !important;
  background-color: rgba(68, 68, 68, 0.75);
}

/* **********************************************
   END HORIZONTAL (TOP) NAV BAR CUSTOMIZATIONS  *
   ******************************************** */

/* **************
   START ACCORDION NAV BAR CUSTOMIZATIONS *
   ************** */
/* Accordion: Add a line underneath each link in the menu (nav) bar */
.sm-page-layout-region-left .sm-nav-item-toplevel {
  padding: 7px 0px 7px 0px !important;
  width: 90%;
  margin-bottom: 0px !important;
}

@media only screen and (min-width: 671px) {
  /* Accordion: Add a line underneath each link in the menu (nav) bar */
  .sm-page-layout-region-left .sm-nav-item-toplevel {
    border-bottom: 1px solid #595959 !important;
  }

  /* Add a line underneath the sub-menu items */
  .sm-page-layout-region-left .sm-nav-item-sublevel {
    border-bottom: 1px solid #595959 !important;
  }
}

@media only screen and (max-width: 670px) {
	/* Accordion: Remove line underneath each link in the menu (nav) bar */
	.sm-page-layout-region-left .sm-nav-item-sublevel {
	  border-bottom: none !important;
	}
	
	/* Make the sub-menu accordion items Capitalize */
	.sm-page-layout-region-left .sm-nav-item-sublevel a {
	  text-transform: Capitalize !important;
	}
  
	  /* On mobile, make the tap areas a bit larger. Start by reducing the padding so we can make the links have more line height */
	.sm-page-layout-region-left .sm-nav-item-toplevel {
	    padding: 0px !important;
	}
	
	/* Now make the tap areas larger by increasing the height of the links */
	/* Also make the font size a smidge bigger */
	.sm-user-ui .sm-accordion>.sm-accordion-item>.sm-accordion-item-label {
	    line-height: 40px !important;
	    font-size: 15px !important;
	}
}


/* Add a line underneath the sub-menu items */
.sm-page-layout-region-left .sm-nav-item-sublevel {
  padding: 7px 0px 7px 0px !important;
  width: 90%;
  margin-bottom: 0px !important;
}

/* On the last sub-menu item, don't do a line */
.sm-page-layout-region-left .sm-nav-item-sublevel:last-child {
  border-bottom: 0px solid #595959 !important;
  padding: 7px 0px 0px 0px !important;
  width: 90%;
  margin-bottom: 0px !important;
}

/* Accordion: only do this for non-smart phones  */
@media only screen and (min-width: 671px) {
  /* Set the height of the accordion items */
  .sm-user-ui .sm-page-layout-region-left .sm-accordion-item-label {
    line-height: 17px !important;
    border: 0px !important;
  }
  
  /* Move the "+" icon up on mobile devices so it aligns with the navbar */
  .sm-page-widget-nav .sm-page-widget-nav-mobile 
  .sm-accordion>.sm-accordion-item>.sm-accordion-item-action .sm-fonticon { 
    top: -10px !important;
  }
}

/* ***** END ACCORDION ****** */

/* Custom Right-Click Protection */
.sm-user-ui .sm-right-click-message:after {
  content: 'Thanks for loving my photos. If you\'d like to get a copy of this for yourself just head on over to the \"Add to Cart\" button and have a copy delivered straight to your door!';
}

/* Disable the default Right Click Protection Message */
.sm-user-ui .sm-right-click-message .sm-tooltip-content {
  display: none;
}
/* END Custom Right Click Protection */

/* Remove the "Slideshow" button" */
.sm-gallery-slideshow-button {
  display: none;
}

/* Remove the keywords below the gallery */
.sm-tile-keywords {
  display: none;
}

/* Transition the links so they fade in and out */
a { 
	-webkit-transition:color 0.25s ease-in;
	-moz-transition:color 0.25s ease-in;
	transition:color 0.2s ease-in;
}

/* Remove the "Photo Sharing by SmugMug */
.sm-page-powered-by A:first-child {
   display: none;
}

/*  Add a line under the breadcrumb */
.sm-breadcrumb {
  border-bottom: 1px solid #595959;
  padding-bottom: 4px;
}

/* Customize the way my sub-titles work in the caption below the photo */
.AaronsSubTitle {
  color: white;
}

/* Hide the Photo title in the caption. But still display it 
   on my Legacy SmugMug Site */
.AaronsOldTitle {
  display: none;
}

/* Set the buttons to transition grey on mouse hover */
.sm-user-ui .sm-button-skin-accent:hover {
  background-color: grey;
  border-color: grey;
}

/* Set the buttons to transition to the hover color slowly */
.sm-user-ui .sm-button-skin-accent, .sm-user-ui .sm-button {
  -webkit-transition: all 0.15s ease-in;
  -moz-transition: all 0.15s ease-in;
  transition: all 0.15 ease-in;
}

/* Transition the links under the photo */
.sm-button .sm-fonticon-small, .sm-user-ui .sm-button-label {
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  transition: all 0.2 ease-in;
}

/* Hide the special navbar for customizations */
.sm-page-layout-region-left .sm-page-layout-row:nth-of-type(3) {
  display: none !important;
}