@import url('https://fonts.googleapis.com/css?family=Leckerli+One');
@import url('https://fonts.googleapis.com/css?family=Quicksand:400,700');


body, html { height: 100%; }

div { font: 1em 'Quicksand', sans-serif;}
h6 { font: 2.5em 'Leckerli One', sans-serif; padding: 0; margin: 0 0 20px 0; }
h1, h2 { padding: 0; margin: 0;}
h1 { font: 3em 'Leckerli One', sans-serif; }
h2 { font: 2em 'Leckerli One', sans-serif; }

a { text-decoration:none; }
.clear { clear: both; }

.strike { text-decoration: line-through; }

a.jump {
    display: block;
    position: relative;
    top: -125px;
    visibility: hidden;
}


/* Animation */

/**/


body { 
    background: url(../elements/bg.png) repeat; 
    padding: 0; 
    margin: 0; 
    color:#594b41;
} /*Pattern provided by SubtlePatterns.com*/
.all_body { min-height:100%; width: 100%; }
.fullwidth { margin: 0 auto; width: 100%; max-width: 1250px; }
.all_body  { height: 100%; }

.services h6 { color: #00cfae; }
.design h6 { color: #88b16d; text-align:right; }
.illustrate h6 { color:#d9bf53; }
.about h6 { color:#c8783f; text-align:right; }

/* Columns */

.column { float:left;}
.col-1 { width: 8.3333%;}
.col-2 { width: 16.6666%;}
.col-3 {width: 25%;}
.col-4 { width: 33.3333%;}
.col-5 { width: 41.6666%;}
.col-6 { width: 50%;}
.col-7 { width: 58.3333%;}
.col-8 { width: 66.6666%;}
.col-9 { width: 75%;}
.col-10 { width: 83.3333%; }
.col-11 { width: 91.6666%;}
.col-12 { width: 100%;}

/* Header */

.header { 
    background-image: url(../images/the-closet-guy-home.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-color: #eeeeed;
    background-size: auto 100%;
    min-height: 535px;
}

.header .content { 
    text-align:right;
    max-width: 400px; 
    right:0; 
    margin-top: 14%;
    position:absolute; 
}

.banner .fullwidth { position: relative; }

.banner .content div { 
    padding-top: 25px;
    font-size: 1.15em; }

.header .banner img { 
    width:100%;
}


/*Navigation*/

#nav {
    width: 100%;
    height: 125px;
    z-index: 500;
    position:fixed;
}

#nav > .logo1 { float:left;}
.diamond {
    background: url(../elements/diamond-bg.png) repeat-x;
    width: 100%;
    height: 125px;
    position:absolute;
}

#nav .nav-tab {
    position:fixed;
}

#nav .nav-tab > div {
    height:35px;
    position:fixed;
    width:100%;
}

#nav .nav-tab .unscroll { 
    width:100%;
    margin-top:50px;
    background: url(../elements/logo-tab.png) no-repeat center;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}


#nav .nav-tab .scroll .top {
    background: url(../elements/diamond-bg.png) repeat-x;
    height:50px;
    width:100%;
    opacity:0;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}
#nav.scroll .nav-tab .scroll .top { 
    opacity:1; }

#nav .nav-tab .scroll .bot { 
    background: url(../elements/logo-tab.jpg) repeat-x center center;
    position:relative;
    margin: 0 auto;
    height:35px;
}

#nav.unscroll .nav-tab .scroll .bot {
    width:0%;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}
#nav.scroll .nav-tab .scroll .bot {
    width:100%;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

#nav .menu .hamburger {
	float:right;
	position:relative;
	z-index:500;
	margin: 35px 5px 0 0;
    opacity:0;
	height: 15px;
	width: 20px;
    -webkit-transition: all .7s ease;
    -moz-transition: all .7s ease;
    -o-transition: all .7s ease;
    transition: all .7s ease;
    -webkit-transition-delay: .3s;
    -moz-transition-delay: .3s;
    -o-transition-delay: .3s;
    transition-delay: .3s;
}

#nav .menu .hamburger img { width: 100%; height: 100%; }

/* Logo */

#nav .logo {
    position:relative;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    background-image: url(../elements/katelyn-stone-logo.png);
    background-repeat: no-repeat;
    background-size: auto 100%;
    width:100%;
    z-index:25;
}

#nav.unscroll .logo {
    height:116px;
    margin-top:15px;
    background-position: center center;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

#nav.scroll .logo {
    margin-top:25px;
    height:91px;
    background-position: left center;
    -webkit-transition: all .7s ease;
    -moz-transition: all .7s ease;
    -o-transition: all .7s ease;
    transition: all .7s ease;
    -webkit-transition-delay: .3s;
    -moz-transition-delay: .3s;
    -o-transition-delay: .3s;
    transition-delay: .3s;
}

#nav .logo a { }
#nav.unscroll .logo a { display:none; } 
#nav.scroll .logo a { display:block; height:91px; width:88px; } 

/* Menu */

#nav ul.menu {
    position:absolute;
    z-index:1000;
    padding:0;
    -webkit-padding-start: 0px;
    list-style-type: none;
    margin-left: 100px;
}

#nav.unscroll ul.menu { margin-top: -100px;}
#nav.scroll ul.menu { 
    margin-top: 57px;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}


#nav ul.menu li {
    display:inline-block; padding: 0 14px;
}


#nav.unscroll ul.menu li { 
    margin-left:-100px;
    opacity: 0;
}
#nav.scroll ul.menu li { 
    margin-left: 0px; 
    opacity: 1;
    -webkit-transition-property: margin-left, opacity, background-color;
    -moz-transition-property: margin-left, opacity, background-color;
    -otransition-property: margin-left, opacity, background-color;
    transition-property: margin-left, opacity, background-color;
    -webkit-transition-duration: 1.5s, .5s, .2s;
    -moz-transition-duration: 1.5s, .5s, .2s;
    -o-transition-duration: 1.5s, .5s, .2s;
    transition-duration: 1.5s, .5s, .2s;
    -webkit-transition-delay: 0.3s, .7s, 0s;
    -moz-transition-delay: 0.3s, .7s, 0s;
    -o-transition-delay: 0.3s, .7s, 0s;
    transition-delay: 0.3s, .7s, 0s;}

#nav ul.menu li a {
    color:#fff;
    font-weight:700;
}

#nav li.teal a:hover { color:#00cfae; }
#nav li.green a:hover { color:#93c476; }
#nav li.yellow a:hover { color:#d9bf53; }
#nav li.orange a:hover { color:#c8783f; }

#nav li.teal a:hover,
#nav li.green a:hover,
#nav li.yellow a:hover,
#nav li.orange a:hover { 
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out; }


.top-paper { height: 16px; width:100%; background: url(../elements/paper-top.png) repeat-x; }
.mid-paper { background: #443a31; padding: 100px 50px; }
.bottom-paper { height: 28px; width:100%; background: url(../elements/paper-bottom.png) repeat-x; }

/* Section 1 */

.services { margin-top: -10px; color: #fff;}

.services h6 { 
    display:block;
    margin: 0 25px 0 0;
}

.services .content { 
    padding: 25px 0; }

.services .col-3 { float:left; }

.services .service { 
    margin: 0px auto; 
    padding: 20px 0px;
}

.services .icon {
    float:left;
    border-radius: 100px;
    width: 44px;
    height: 44px;
    margin-right:15px;
    background-size: 50% auto;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-transition: background-color .5s ease;
    -moz-transition: background-color .5s ease;
    -otransition: background-color .5s ease;
    transition: background-color .5s ease;
    border: 3px solid;
}

.services .title { 
    font-size: 0.95em;
    width:90%;
    line-height: 50px;
    font-weight: 700;
}

.services .text {
    margin: 10px 0 0;
    width: 90%;
}

.services .service:hover .icon { 
    -webkit-transition: background-color .5s ease;
    -moz-transition: background-color .5s ease;
    -otransition: background-color .5s ease;
    transition: background-color .5s ease;
}

.services .brown .icon { background-color: #594b41; border-color: #594b41; background-size: 55% auto; } 
.services .orange .icon { background-color:#c8783f; border-color:#c8783f; background-size: 45% auto; }
.services .yellow .icon { background-color:#d9bf53; border-color:#d9bf53; background-size: 40% auto; }
.services .green .icon {  background-color:#88b16d; border-color:#88b16d;}
.services .teal .icon { background-color:#008871; border-color:#008871;}
.services .blue .icon { background-color:#69b0d1; border-color:#69b0d1;}
.services .purple .icon { background-color:#8479a0; border-color:#8479a0;}
.services .pink .icon { background-color:#da59a1; border-color:#da59a1;}

.services .brown .icon { background-image: url(../elements/print.png); }
.services .orange .icon { background-image: url(../elements/brand.png);}
.services .yellow .icon { background-image: url(../elements/other.png); }
.services .green .icon { background-image: url(../elements/social.png); }
.services .teal .icon { background-image: url(../elements/web.png); }
.services .blue .icon { background-image: url(../elements/code.png); }
.services .purple .icon { background-image: url(../elements/quote.png); }
.services .pink .icon { background-image: url(../elements/illo.png); }

/*.services .brown:hover .icon { background-image: url(../elements/print-over.png);}
.services .orange:hover .icon { background-image: url(../elements/brand-over.png);}
.services .yellow:hover .icon { background-image: url(../elements/other-over.png); }
.services .green:hover .icon { background-image: url(../elements/social-over.png); }
.services .teal:hover .icon { background-image: url(../elements/web-over.png); }
.services .blue:hover .icon { background-image: url(../elements/code-over.png);}
.services .purple:hover .icon { background-image: url(../elements/quote-over.png); }
.services .pink:hover .icon { background-image: url(../elements/illo-over.png); }

.services .service:hover .icon { background-color:transparent; }

.services .brown:hover .title { color:#594b41;}
.services .orange:hover .title { color:#c8783f;}
.services .yellow:hover .title { color:#d9bf53;}
.services .green:hover .title { color:#88b16d;}
.services .teal:hover .title { color:#008871;}
.services .blue:hover .title { color:#69b0d1;}
.services .purple:hover .title { color:#8479a0;}
.services .pink:hover .title { color:#da59a1;}*/



/* Section 2 | Design */

.design { width: 100%; margin: -20px auto 0 auto;}

.design .content { background-color: #2c241e; padding:150px 0; }

.big-square { 
    width:25%; 
    height:auto;
    padding-bottom: 25%;
    background-repeat: no-repeat;
    background-size: 100% auto;
    float: left;
    position:relative;
    margin-bottom: -1px;
    perspective: 1000px;
}

.big-square.fix { margin-top: 1px;}

.big-square .flip { transform-style: preserve-3d; position:relative; transition: all .7s ease; }
.big-square:hover .flip { transform: rotateY(180deg); }
.big-square .front, .big-square .back { backface-visibility: visible; } 
.big-square .front, .big-square .back { backface-visibility: hidden; position: absolute; top: 0; left:0; }
.big-square .front { transform: rotateY(0deg);}
.big-square .back { transform: rotateY(180deg);}

.big-square img { width: 100%; height: auto;}

/* Section 3 | Illustration */

.illustrate { padding: 125px 0;}


.illustrate .thumbnail {
    float:left;
    width: 20%;
    height:auto;
}
.illustrate .thumbnail img { 
    width:100%;
    height:auto;
    opacity:1;
    -webkit-transition: all ease-in-out .3s;
    -moz-transition: all ease-in-out .3s;
    -o-transition: all ease-in-out .3s;
    transition: all ease-in-out .3s;
}

.illustrate .thumbnail img:hover { opacity:.4; }

.illustrate .pink { background-color:#da59a1;}
.illustrate .purple { background-color:#8479a0;}
.illustrate .blue { background-color:#69b0d1;}
.illustrate .teal { background-color:#008871;}
.illustrate .green { background-color:#88b16d;}
.illustrate .yellow { background-color:#d9bf53;}
.illustrate .orange { background-color:#c8783f;}
.illustrate .brown { background-color:#594b41;}


/* Section 4 */

.top-paper.white { background: url(../elements/paper-top-w.png) repeat-x; }

.about { 
    padding: 75px 0;
    background: url(../elements/canvas-bg.jpg) repeat;
    color: #fff;
}

.about .pic { width: 25%; padding-right: 3%; float:left; }
.about .content { width: 71%; }

.about img { 
    width:100%;
}

.about .fullwidth > div { margin: 0 auto; width:600px;}
.about .fullwidth > div > div { display: table-row;}
.about .me, .about .items { display: table-cell; vertical-align:middle;}
.about .items { width: 250px; }
div.me { float:left; }
div.me img { 
    width: 100%;
    max-width:300px;
    -webkit-border-radius: 500px;
    -moz-border-radius: 500px;
    border-radius: 500px;
    margin-right: 50px;
}


.about div.item { padding-bottom: 25px; }
.about div.item:last-child { padding-bottom: 0px;}
.about .item div { line-height:35px;
    font-weight: 700;
    font-size: 1em;}
.about .item img { width: 35px; float:left;margin-right: 10px; }

.about a { color: #fff; 
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;}
.about a:hover { 
    color: #b0632b;
}

/* Footer */

.pre-footer { 
    background-image: url(../elements/dash.png);
    background-repeat: repeat-x;
    background-position: left 3px;
    background-color: #443a31;
    min-height: 40px;
}
 
.footer {
    background-image: url(../elements/dash-dark.png);
    background-repeat: repeat-x;
    background-position: left 3px;
    min-height: 40px;
    background-color: #2c241e;
    width: 100%;
}
.footer > div {
    color: #594b41;
    font-size: 0.8em;
    padding: 12px 0;
}