/************************
 * Color Background *****
************************/
html.sm-user-ui  {
    background-color: #ffffff;
}

.sm-user-ui .sm-page-content > .sm-page-layout > .sm-page-layout-region-header {
    background-color: #ffffff;
            background-color: rgba(255,255,255, 0);
    }
.sm-user-ui .sm-page-content > .sm-page-layout >
    .sm-page-layout-region >
    .sm-page-layout-region-left {
    background-color: #ffffff;
            background-color: rgba(255,255,255, 0);
    }
.sm-user-ui .sm-page-content > .sm-page-layout >
    .sm-page-layout-region >
    .sm-page-layout-region-center {
    background-color: #fcfcfc;
            background-color: rgba(252,252,252, 0);
    }
.sm-user-ui .sm-page-content > .sm-page-layout >
    .sm-page-layout-region >
    .sm-page-layout-region-right {
    background-color: #ffffff;
            background-color: rgba(255,255,255, 0);
    }
.sm-user-ui .sm-page-content > .sm-page-layout > .sm-page-layout-region-footer {
    background-color: #ffffff;
    }
.sm-user-ui .sm-page-layout.sm-page-layout-sitetemplate .sm-page-layout >
    .sm-page-layout-region >
    .sm-page-layout-region-left {
    background-color: #ffffff;
            background-color: rgba(255,255,255, 0);
    }
.sm-user-ui .sm-page-layout.sm-page-layout-sitetemplate .sm-page-layout >
    .sm-page-layout-region >
    .sm-page-layout-region-center {
    background-color: #ffffff;
            background-color: rgba(255,255,255, 0);
    }
.sm-user-ui .sm-page-layout.sm-page-layout-sitetemplate .sm-page-layout >
    .sm-page-layout-region >
    .sm-page-layout-region-right {
    background-color: #ffffff;
    }
.sm-user-ui .sm-page-widget-nav-mobile .sm-page-widget-nav-mobile-header {
    background-color: transparent;
    }

@media only screen and (max-width: 600px) {

    .sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-align-center{
        text-align: left;
        margin-top: -20px;
        }

    .sm-user-ui .sm-page-widget-13009851 .sm-page-widget-content {
        padding-top: 0 !important;
        }   

    .sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-menu-expand a.sm-h5:before {
        font-family: 'SmugMug Icon Font Regular';
        font-size: 96px;
        width: 96px;
        content: '\E039 ';
        display: block;
        margin:0 5px 32px auto;
        }   

    .sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile,
    .sm-user-ui .sm-page-widget-nav-mobile .sm-page-widget-nav-mobile-header {
        background: #00fff;
        }   

    .sm-user-ui .sm-page-widget-nav {
        position: absolute;
        top: 0;
        right: 0;
        }

}

.ss-before-and-after {
	position: relative;
	overflow: hidden;
	margin: 1em 0;	
}
.ss-before-and-after-before {
    position: relative;
}
.ss-before-and-after-after {
	position: absolute;
	    
	top: 0;
	left: 0;
    right:0;
    bottom: 0;
	overflow: hidden;
}

.ss-before-and-after-after > div {
	position: relative;
}

/* Set the initial position of the split between before/after */
.ss-before-and-after-after {
  left: 50%;
}
.ss-before-and-after-after > div {
  left: -50%;
}

.ss-before-and-after-after,
.ss-before-and-after-after > div {
	-webkit-transition: left 0.5s;
	-moz-transition: left 0.5s;
	transition: left 0.5s;
}

.ss-before-and-after-before,
.ss-before-and-after-after,
.ss-before-and-after div,
.ss-before-and-after div img {
	width: 100%;
	display: block;
}

/* Add "before" and "after" labels to images */
.ss-before-and-after-before > div:after,
.ss-before-and-after-after > div:after {
	padding:0.5em;
	background-color:rgba(0,0,0,0.25);
	color:#eee;
	font-size:14px;
	position:absolute;
	bottom:1em;
}
.ss-before-and-after-before > div:after {
	content: "Before";
	left:1em;
}
.ss-before-and-after-after > div:after {
	content: "After";
	right:1em;
}

.ss-before-and-after-hover {
	position: absolute;
	z-index: 1;

	width: 5%;
	height: 100%;
	
	display: block;
	top: 0;
	bottom: 0;
}
.sm-page-edit .ss-before-and-after-hover {
	z-index: default;
}

/* Separator between images */
.ss-before-and-after-after {
    box-shadow:0 0 10px rgba(0,0,0,0.8);
}

.ss-before-and-after-hover:nth-of-type(1) { left: 0% }
.ss-before-and-after-hover:nth-of-type(2) { left: 4.761904761904762% }
.ss-before-and-after-hover:nth-of-type(3) { left: 9.523809523809524% }
.ss-before-and-after-hover:nth-of-type(4) { left: 14.285714285714285% }
.ss-before-and-after-hover:nth-of-type(5) { left: 19.047619047619047% }
.ss-before-and-after-hover:nth-of-type(6) { left: 23.80952380952381% }
.ss-before-and-after-hover:nth-of-type(7) { left: 28.57142857142857% }
.ss-before-and-after-hover:nth-of-type(8) { left: 33.333333333333336% }
.ss-before-and-after-hover:nth-of-type(9) { left: 38.095238095238095% }
.ss-before-and-after-hover:nth-of-type(10) { left: 42.857142857142854% }
.ss-before-and-after-hover:nth-of-type(11) { left: 47.61904761904762% }
.ss-before-and-after-hover:nth-of-type(12) { left: 52.38095238095238% }
.ss-before-and-after-hover:nth-of-type(13) { left: 57.14285714285714% }
.ss-before-and-after-hover:nth-of-type(14) { left: 61.904761904761905% }
.ss-before-and-after-hover:nth-of-type(15) { left: 66.66666666666667% }
.ss-before-and-after-hover:nth-of-type(16) { left: 71.42857142857143% }
.ss-before-and-after-hover:nth-of-type(17) { left: 76.19047619047619% }
.ss-before-and-after-hover:nth-of-type(18) { left: 80.95238095238095% }
.ss-before-and-after-hover:nth-of-type(19) { left: 85.71428571428571% }
.ss-before-and-after-hover:nth-of-type(20) { left: 90.47619047619048% }
.ss-before-and-after-hover:nth-of-type(21) { left: 95.23809523809524% }

.ss-before-and-after-hover:nth-of-type(1):hover ~ .ss-before-and-after-after { left: 0%; }
.ss-before-and-after-hover:nth-of-type(1):hover ~ .ss-before-and-after-after > div { left: 0%; }
.ss-before-and-after-hover:nth-of-type(2):hover ~ .ss-before-and-after-after { left: 5%; }
.ss-before-and-after-hover:nth-of-type(2):hover ~ .ss-before-and-after-after > div { left: -5%; }
.ss-before-and-after-hover:nth-of-type(3):hover ~ .ss-before-and-after-after { left: 10%; }
.ss-before-and-after-hover:nth-of-type(3):hover ~ .ss-before-and-after-after > div { left: -10%; }
.ss-before-and-after-hover:nth-of-type(4):hover ~ .ss-before-and-after-after { left: 15%; }
.ss-before-and-after-hover:nth-of-type(4):hover ~ .ss-before-and-after-after > div { left: -15%; }
.ss-before-and-after-hover:nth-of-type(5):hover ~ .ss-before-and-after-after { left: 20%; }
.ss-before-and-after-hover:nth-of-type(5):hover ~ .ss-before-and-after-after > div { left: -20%; }
.ss-before-and-after-hover:nth-of-type(6):hover ~ .ss-before-and-after-after { left: 25%; }
.ss-before-and-after-hover:nth-of-type(6):hover ~ .ss-before-and-after-after > div { left: -25%; }
.ss-before-and-after-hover:nth-of-type(7):hover ~ .ss-before-and-after-after { left: 30%; }
.ss-before-and-after-hover:nth-of-type(7):hover ~ .ss-before-and-after-after > div { left: -30%; }
.ss-before-and-after-hover:nth-of-type(8):hover ~ .ss-before-and-after-after { left: 35%; }
.ss-before-and-after-hover:nth-of-type(8):hover ~ .ss-before-and-after-after > div { left: -35%; }
.ss-before-and-after-hover:nth-of-type(9):hover ~ .ss-before-and-after-after { left: 40%; }
.ss-before-and-after-hover:nth-of-type(9):hover ~ .ss-before-and-after-after > div { left: -40%; }
.ss-before-and-after-hover:nth-of-type(10):hover ~ .ss-before-and-after-after { left: 45%; }
.ss-before-and-after-hover:nth-of-type(10):hover ~ .ss-before-and-after-after > div { left: -45%; }
.ss-before-and-after-hover:nth-of-type(11):hover ~ .ss-before-and-after-after { left: 50%; }
.ss-before-and-after-hover:nth-of-type(11):hover ~ .ss-before-and-after-after > div { left: -50%; }
.ss-before-and-after-hover:nth-of-type(12):hover ~ .ss-before-and-after-after { left: 55%; }
.ss-before-and-after-hover:nth-of-type(12):hover ~ .ss-before-and-after-after > div { left: -55%; }
.ss-before-and-after-hover:nth-of-type(13):hover ~ .ss-before-and-after-after { left: 60%; }
.ss-before-and-after-hover:nth-of-type(13):hover ~ .ss-before-and-after-after > div { left: -60%; }
.ss-before-and-after-hover:nth-of-type(14):hover ~ .ss-before-and-after-after { left: 65%; }
.ss-before-and-after-hover:nth-of-type(14):hover ~ .ss-before-and-after-after > div { left: -65%; }
.ss-before-and-after-hover:nth-of-type(15):hover ~ .ss-before-and-after-after { left: 70%; }
.ss-before-and-after-hover:nth-of-type(15):hover ~ .ss-before-and-after-after > div { left: -70%; }
.ss-before-and-after-hover:nth-of-type(16):hover ~ .ss-before-and-after-after { left: 75%; }
.ss-before-and-after-hover:nth-of-type(16):hover ~ .ss-before-and-after-after > div { left: -75%; }
.ss-before-and-after-hover:nth-of-type(17):hover ~ .ss-before-and-after-after { left: 80%; }
.ss-before-and-after-hover:nth-of-type(17):hover ~ .ss-before-and-after-after > div { left: -80%; }
.ss-before-and-after-hover:nth-of-type(18):hover ~ .ss-before-and-after-after { left: 85%; }
.ss-before-and-after-hover:nth-of-type(18):hover ~ .ss-before-and-after-after > div { left: -85%; }
.ss-before-and-after-hover:nth-of-type(19):hover ~ .ss-before-and-after-after { left: 90%; }
.ss-before-and-after-hover:nth-of-type(19):hover ~ .ss-before-and-after-after > div { left: -90%; }
.ss-before-and-after-hover:nth-of-type(20):hover ~ .ss-before-and-after-after { left: 95%; }
.ss-before-and-after-hover:nth-of-type(20):hover ~ .ss-before-and-after-after > div { left: -95%; }
.ss-before-and-after-hover:nth-of-type(21):hover ~ .ss-before-and-after-after { left: 100%; }
.ss-before-and-after-hover:nth-of-type(21):hover ~ .ss-before-and-after-after > div { left: -100%; }