/*
Theme Name: Origin
Theme URI: http://www.marcelpater.com/
Description: A clean, minimal portfolio theme.

Author: Marcel Pater
Version: 0.1
Tags: minimalistic, clean, portfolio, elegant
*/

/* #Basic
================================================== */

html, body {height: 100%; width: 100%;}
body {font-size: 100%;}
img { height: auto; width: 100%; max-width: 100%; min-width: 100%; }

.spacer {height: 50px; width: 100%; clear: both;}

.fadeWrapper {
    animation: fadein 2s;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */
}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

/* #Typography
================================================== */

h1 {font-family: 'Open Sans', sans-serif; letter-spacing: 0.2em;}
h2 {font-family: 'Open Sans', sans-serif; letter-spacing: 0.2em;}
h3 {font-family: 'Open Sans', sans-serif; letter-spacing: 0.2em; font-size: 1.4em; font-weight: 600;}
.btn { padding: 6px 16px; font: 600 1.1em 'Open Sans', sans-serif; color: #FFF; letter-spacing: 0em; text-decoration: none; text-align: left; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; transition: all .3s; /* Once again, vendor prefixes required. */ -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; float: right; margin-left: 30px; }
.btn_free { background: #FF5959;; 	
}
.btn_free:hover { background: #EE4848; }
.btn_prem { background: #336699; }
.btn_prem:hover { background: #254A70; }

hr { width: 50px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #eee; height: 0px; margin-right: auto; margin-left: auto; border-top-style: none; border-right-style: none; border-left-style: none; }
.galleryWrap hr { width: 100%; height: 0px; }


.description hr { width: 100%; margin-bottom: 25px; }

p {font-family: 'Roboto Slab', serif; font-size: 1.25em; color: #777; font-weight: 300; line-height: 1.6em;}
p b { font-weight: 700; }

p a {
	color: #69F; text-decoration: none; font-weight: 400;
	overflow: hidden;
	display: inline-block;
	margin-bottom: -8px; /* Value depends on your design. Fix the awkward space from overflow:hidden. */
	text-decoration: none;
	position: relative;
	transition: all .3s; /* Vendor prefixes required in your code. */
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-ms-transition: all .3s;
	-o-transition: all .3s;
}
p a:before { content: ""; position: absolute; /*left: -100%;*/ bottom: 0; display: block; width: 0%; height: 1px; background-color: #69F; margin-left: 50%; }
p a:hover:before { left: 0; width: 100%; margin-left: 0%; }
p a:after, a:before {
	transition: all .3s; /* Once again, vendor prefixes required. */
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-ms-transition: all .3s;
	-o-transition: all .3s;
}


p strong { font-weight: 700; }



.textblock  {
display: block; width: 80%; padding-right: 10%; padding-left: 10%; text-align: center;
}

/* #HOME - Header
================================================== */

#headSplash {background-color: #CCC; width: 100%; height: 100%; min-height: 100%; position: relative;}
#headSplash #textwrap {width: 700px; height: 35%; overflow: hidden; margin: auto; color: #FFF; padding-left: 100px; position: absolute; top: 0; left: 0; bottom: 0; right: 0;}

#headSplash h1 {margin: 0px; padding: 0px; letter-spacing: 0.02em; font-weight: 100; font-size: 3em;}
#headSplash h2 {margin: 0px; padding: 0px; letter-spacing: 0.02em; font-size: 2em; font-weight: 100;}

#topNavigationWrapper { height: 150px; width: 100%; background-color: #FFF; position: relative; clear: both; border-bottom: 1px solid #eee; }
.home #topNavigationWrapper { position: absolute; bottom: 0px; }

#topNavigation { height: 110px; width: 80%; margin-right: auto; margin-left: auto; padding: 20px 10%; max-width: 1180px; }

/* Navigation */

#topNavigation #logo { height: 40px; margin-top: 35px; float: left; }
#topNavigation #logo img {height: 100%; width: auto;}

#topNavigation ul { display: block; list-style-type: none; float: right; margin-top: 45px; margin-bottom: 0px; margin-left: 0px; padding: 0px; }
#topNavigation ul li {float: left; margin-left: 50px;}
#topNavigation ul li a {font-family: 'Open Sans', sans-serif; text-transform: uppercase; color: #888; letter-spacing: 0.2em; font-size: 0.8em; text-decoration: none;
	-webkit-transition: color 0.5s;
    -moz-transition: color 0.5s;
    -ms-transition: color 0.5s;
    -o-transition: color 0.5s;
     transition: color 0.5s;
}
#topNavigation ul li a:hover {color: #666;}

/* #HOME - Project Gallery
================================================== */

.galleryWrap { width: 80%; clear: both; margin-right: auto; margin-left: auto; max-width: 1180px; }
.galleryWrap .col {position: relative; margin-bottom: 1.4%;}
.galleryWrap h2 { letter-spacing: 0.2em; font: 600 1.3em 'Open Sans', sans-serif; text-transform: uppercase; margin: 0px 0px 0.2em; padding: 0px; text-align: center; }


/* #Hover
================================================== */

#hover {opacity: 0; background-color: #fff; position: absolute; text-align: center; z-index: 10; left: 35px; top: 25px; right: 35px; bottom: 25px; overflow: hidden;
	transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-webkit-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
}
#hover:hover { opacity: 0.95; }
#hover .link-text {position: absolute; width: 100%; top: 41%;}

#hover h2 {font-size: 1em; font-weight: 600; text-transform: uppercase; text-align: center; padding: 0px; width: 100%; margin-top: 0px; margin-right: 0px; margin-bottom: 0.4em; margin-left: 0px; color: #000;}
#hover p { margin: 0px; padding: 0px; font-size: 0.9em; color: #777; font-weight: 300; line-height: 1.6em; text-align: center; width: 100%;}



#projectBanner { width: 98%; margin: 25px 1% 70px; }


.description { margin: 0px auto; text-align: center; width: 80%; max-width: 1180px; }

.description h1 { letter-spacing: 0.2em; font: 600 1.5em 'Open Sans', sans-serif; text-transform: uppercase; margin: 0px 0px 0.2em; padding: 0px; }
.description h3 { color: #bbb; letter-spacing: normal; margin: 0px; padding: 0px; font: 300 0.95em/1.6em 'Roboto Slab', serif; }
.description p { font-family: 'Roboto Slab', serif; font-size: 1.25em; color: #777; font-weight: 300; line-height: 1.6em; letter-spacing: normal; margin: 20px 15% 70px 15%; }
.workNav { width: 98%; margin-right: auto; margin-left: auto; border-top-width: 1px; border-top-style: solid; border-top-color: #eee; clear: both; padding: 30px 0px 50px; }

.workNav h3 { opacity: 0; font-size: 13px; text-transform: uppercase; color: #333; text-decoration: none; margin: 0px; padding: 0px 30px; line-height: 20px; font-weight: 400; transition: all 0.2s linear; -moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; }
.workNav h3:hover { opacity: 0.95; }
.workNav #buttonPrev { background: url(../images/button-left-grey.png) no-repeat left center; float: left; height: 20px; 
	transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-webkit-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;}
.workNav #buttonNext { background: url(../images/button-right-grey.png) no-repeat right center; float: right; height: 20px; 
	transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-webkit-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;}
.workNav #buttonPrev:hover { background: url(../images/button-left-black.png) no-repeat left center; }
.workNav #buttonNext:hover { background: url(../images/button-right-black.png) no-repeat right center; }

.workNav #buttonMenu { background: url(../images/button-menu-grey.png) no-repeat center center; height: 20px; transition: all 0.2s linear; -moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; width: 20px; margin-right: auto; margin-left: auto; }
.workNav #buttonMenu:hover { background: url(../images/button-menu-black.png) no-repeat center center; }


/* #Footer
================================================== */

footer #contact { padding-top: 40px; width: 98%; margin-right: auto; margin-left: auto; border-top-width: 1px; border-top-style: solid; border-top-color: #eee; clear: both; }
footer #contact .row { width: 80%; margin-right: auto; margin-left: auto; max-width: 1180px; padding-right: 10%; padding-left: 10%; }
footer #contact h3 {font-size: 0.9em; text-transform: uppercase; padding: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0.8em; margin-left: 0px; text-align: left;}
footer #contact p { padding: 0px; font-size: 0.9em; color: #777; width: 100%; text-align: left; margin-top: 0px; margin-right: 0px; margin-bottom: 0.2em; margin-left: 0px;}

footer #rights { background-color: #eee; padding-top: 35px; height: 50px;}
footer #rights .row {width: 70%; margin-right: 15%; margin-left: 15%;}
footer #rights p { font-size: 0.6em; width: 100%; text-align: right; font-family: 'Open Sans', sans-serif; letter-spacing: 0.15em; font-weight: 600; text-transform: uppercase; padding: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0.4em; margin-left: 0px; color: #999; }