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

@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: #232428;
            background-color: rgba(35,36,40, 0.71);
    }
/* Add the Lovelo Font */
@font-face {
    font-family: 'loveloblack';
    src: url('https://blog.aaronmphotography.com/files/Fonts/Lovelo Black-webfont.eot');
    src: url('https://blog.aaronmphotography.com/files/Fonts/Lovelo Black-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://blog.aaronmphotography.com/files/Fonts/Lovelo Black-webfont.woff2') format('woff2'),
         url('https://blog.aaronmphotography.com/files/Fonts/Lovelo Black-webfont.woff') format('woff'),
         url('https://blog.aaronmphotography.com/files/Fonts/Lovelo Black-webfont.ttf') format('truetype'),
         url('https://blog.aaronmphotography.com/files/Fonts/Lovelo Black-webfont.svg#loveloblack') format('svg');
    font-weight: normal;
    font-style: normal;
} 

/* Make the navbar use the Lovelo Font */
.sm-page-layout-region-top .sm-page-widget-nav-toplink > a {
  font-family: 'loveloblack', sans-serif;
  font-size: 15px !important;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Add a white border under the header */
.sm-page-layout-region-header .sm-page-layout-region-top .sm-page-layout-row {
  border-bottom: 1px solid #ffffff;
}

/* Change the custom link icon to the 500px */
.sm-fonticon-LinkSquare:before {
  content: '\E25F' !important
}

/* Change the font of the sub-menu text */
.sm-page-layout-region-top .yui3-menu-item .yui3-menu-label {
  font-family: 'loveloblack', sans-serif;
  font-size: 13px !important;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Add a left border line to the left of the magifying glass search icon */
.sm-page-layout-region-top .sm-page-layout-column:nth-of-type(3) {
  border-left: 1px solid white;
  width: 4% !important;
}

/* Make widget (like YouTube Content Block) title fonts match the theme */
.sm-page-widget-header h2 {
	font-family: 'loveloblack', sans-serif !important;
	font-size: 22px;
}

/* Make the breadcrumb emphasized location font match the theme */
.sm-breadcrumb-item h1 {
	font-family: 'loveloblack', sans-serif !important;
	font-size: 26px;
}

/* Make Tile (Gallery/Folders) Title Fonts match the theme */
.sm-page-widget-nodes .sm-tiles-list .sm-tile .sm-tile-info p {
  font-family: 'loveloblack', sans-serif !important;
}

/* Make Large Title Text fonts match the theme */
.sm-page-widget .sm-page-widget-pagetitle-l,
.sm-page-widget .sm-page-widget-pagetitle-s,
.sm-page-widget .sm-page-widget-pagetitle-xs {
	font-family: 'loveloblack', sans-serif !important;
}

/* Hide the Prints unless we're on the prints pages */
.sm-page-layout-region-header .sm-page-layout-region-top .sm-page-layout-row:nth-of-type(2) {
  display: none !important;
}

/* Also hide the bottom border from the Prints unless we're on the Prints page */
.sm-page-layout-region-header .sm-page-layout-region-top .sm-page-layout-row:nth-of-type(2) {
  border: 0 !important;
}

/* Make the main navbar have a hover color */
.sm-page-widget-10448658 .sm-page-widget-nav-toplink > a:hover {
  color: rgb(155, 153, 153);
}

/* Hide the mobile only menu content block 
.sm-page-widget-10797800 {
  display: none;
}*/

/* ===================
   = MOBILE DEVICES  =
   =================== */
/* For mobile devices do the following */
@media only screen and (max-width: 670px) {  
	/* Center the navbar items */
	.sm-page-widget-nav .sm-page-widget-nav-mobile .sm-accordion>.sm-accordion-item {
	  text-align: center;
	}
	
	/* Make the navbar items have less height */
	.sm-accordion>.sm-accordion-item .sm-accordion-item-label {
	  line-height: 40px !important;
	}
	
	/* Move the "+" icons up so they properly align */
	.sm-page-widget-nav .sm-page-widget-nav-mobile .sm-accordion>.sm-accordion-item>.sm-accordion-item-action .sm-fonticon {
	  top: -9px !important;
	}
	
	/* Set the navbar font */
	.sm-accordion-item > a {
	  font-family: 'loveloblack', sans-serif;
	  font-size: 16px;
	}
	
	/* Make the navbar sub-items have a different color */
	.sm-accordion-children .sm-accordion-item > a {
	  color: rgb(155, 153, 153) !important;
	  font-size: 14px !important;
	}
	
	/* Navbar children should be centered - get rid of the left margin so they properly align in the center */
	.sm-accordion>.sm-accordion-item>.sm-accordion-children>.sm-accordion-item {
      margin-left: 0px !important;
	}
	
	/* Hide the search magnifying glass */
	.sm-page-widget-10449741 {
	  display: none;
	}
	
	/* Turn off the white border beneath the header that I had added */
	.sm-page-layout-region-header .sm-page-layout-region-top .sm-page-layout-row {
	  border: 0px !important;
	}
	
	/* Hide the normal menu bar since it's collapsed, and show a special mobile homepage only navbar that's expanded */
	.sm-page-widget-10448658 {
      display: none !important;
	}
	
	/* Show the mobile only menu content block */
	.sm-page-widget-10797800 {
	  display: block !important;
	}	
}

/* =============
   = TABLETS   =
   ============= */
@media only screen and (min-width: 769px) and (max-width: 1025px) {
	/* Shrink the width of the logo area */
	.sm-page-layout-region-top .sm-page-layout-row:nth-of-type(1) .sm-page-layout-column:nth-of-type(1) {
	  width: 20% !important;
	}
	
	/* Give more width to the navbar area */
	.sm-page-layout-region-top .sm-page-layout-row:nth-of-type(1) .sm-page-layout-column:nth-of-type(2) {
	  width: 72% !important;
	}
}

/* Tablets in Portrait mode */
@media only screen and (min-width: 671px) and (max-width: 768px) {
	/* Shrink the width of the logo area */
	.sm-page-layout-region-top .sm-page-layout-row:nth-of-type(1) .sm-page-layout-column:nth-of-type(1) {
	  width: 20% !important;
	}
	
	/* Give more width to the navbar area */
	.sm-page-layout-region-top .sm-page-layout-row:nth-of-type(1) .sm-page-layout-column:nth-of-type(2) {
	  width: 72% !important;
	}
	
	/* Make the font smaller so we have more room for the navbar */
	.sm-page-widget-nav-toplink > a, .sm-page-widget-nav-activepage > a {
	  font-size: 13px !important;
	}
	
	/* Make the logo smaller */
	.sm-page-widget-10448657 .sm-page-widget-logo-img-retina, .sm-page-widget-10448657 .sm-page-widget-logo-img {
	  width: 150px !important;
	}
	
	/* Make less room between navbar elements */
	.sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .sm-page-widget-nav-toplink {
	  margin-right: 13px !important;
	}
	
	/* Move the logo to the left */
	.sm-page-widget-10448657 .sm-page-widget-content {
	  margin-left: 5px !important;
	}
	
	/* Narrow the right-margin of the navbar for more room */
	.sm-page-widget-10448658 .sm-page-widget-content {
	  margin-right: 10px !important;
	}

	/* Fix the magnifying glass position */
	.sm-page-widget-10449741 .sm-page-widget-content {
	  margin-left: 25px !important;
	}
}

/* ===================
   = LARGE SCREENS   =
   =================== */
@media only screen and (min-width: 671px) {
	/* Move the social icons down */
	.sm-page-widget-social-links {
	  position: relative;
	  top: 35px;
	}
}

/* =====================
   = Social Icon Order =
   =====================
   Instagram
   facebook
   youtube
   500px
   Tumblr
   Twitter 
   */

/* Make Instagram be first */
.sm-page-widget-social-links-instagram {
	order: 1;
}

/* Make facebook be second */
.sm-page-widget-social-links-facebook {
	order: 2;
}

/* Make YouTube be third */
.sm-page-widget-social-links-youTube {
	order: 3;
}

/* Make 500px be fourth */
.sm-page-widget-social-links-fiveHundredPX {
	order: 4;
}

/* Make Tumblr be fifth */
.sm-page-widget-social-links-tumblr {
	order: 5;
}

/* Make Twitter be sixth */
.sm-page-widget-social-links-twitter {
	order: 6;
}

.sm-page-widget-social-links.sm-flex-row li:last-child {
    padding-right: 18px !important;
}

/* =============================
   = Social Icon Order, Mobile =
   =============================
   Instagram
   facebook
   youtube
   500px
   Tumblr
   Twitter 
   */
/* For iphone5 devices and smaller do the following */
@media only screen and (max-width: 374px) {  
	/* Make Instagram be first */
	.sm-page-widget-social-links-instagram {
		order: 1;
	}
	
	/* Make facebook be second */
	.sm-page-widget-social-links-facebook {
		order: 2;
	}
	
	/* Make YouTube be third */
	.sm-page-widget-social-links-youTube {
		order: 3;
	}
	
	/* Make 500px be fourth */
	.sm-page-widget-social-links-fiveHundredPX {
		order: 4;
	}
	
	/* Make Tumblr be fifth */
	.sm-page-widget-social-links-tumblr {
		order: 5;
	}
	
	/* Make Twitter be sixth */
	.sm-page-widget-social-links-twitter {
		order: 6;
	}
	
	/* Shrink the padding between the icons so it fits on the device */
	.sm-page-widget-social-links.sm-social-links-medium[data-layout="row"] li:not(.sm-page-widget-social-links-twitter) {
    	padding-right: 12px !important;
	}
	
	.sm-page-widget-social-links.sm-flex-row li:last-child {
	    padding-right: 12px !important;
	}
	
	/* Move the whole block of social links to the right to center it */
	.sm-page-widget-social-links.sm-social-links-medium {
        padding-left: 12px;
	}
	
	/* Since twitter is last, we have to remove its padding */
	.sm-page-widget-social-links-twitter {
		padding-right: 0px !important;
	}
}

/* For iPhone 6, move the social icons over a bit more */
@media only screen and (min-width:375px) AND (max-width: 760px) {
	.sm-page-widget-social-links.sm-social-links-medium {
		padding-left: 24px !important;
	}
}