@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,800);
@import url(fontawesome.css);
/* CSS Document */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
    font-family: 'Lato',sans-serif;
    font-weight: 400;
    line-height: 1.5em;
    font-size: 1em;
	color: #676767;
	background-attachment: fixed;
    background-clip: border-box;
    background-color: rgba(255,255,255,.3);
    background-image: url("../images/body2.jpg");
    background-origin: padding-box;
    background-repeat: no-repeat;
    background-size: auto auto;
}
ol, ul {
    list-style: none outside none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}



/*-------------Genuine Styles-------------------*/


nav.genuine {
    background: none repeat scroll 0 0 #fff;
    border-bottom: 1px dotted #f2f2f2;
    box-shadow: 0 2px 3px #111;
    height: 60px;
    margin-bottom: 40px;
    position: fixed;
    width: 100%;
    z-index: 2000;
	top:0px;
}
nav ul {
width:1200px;
}
nav.genuine li {
    float: left;
    list-style: none;
}
nav.genuine li a {

    color: #424242;
    text-align: center;
    text-decoration: none;

}
nav.genuine li a:hover {
    background: #ccc;
}


.intro {
    font-size: 1.5em;
    font-weight: 300;
    line-height: 1.5em;
	margin-top:10%;
	text-align:center;
}

.logo {
    background: url("../images/genuine_design_logo.png") no-repeat 50% 50% / 100% 100%;
    min-height: 244px;
    margin: 30px auto;
    max-width: 354px;
}

h1 {
   background: #424242;
    color: #FFFFFF;
    font-size: 4em;
    font-weight: normal;
    margin-bottom: 30px;
    padding: 25px;
    text-align: center;    
}
h2, h3, h4, h5, h6 {
    font-weight: 200;
    text-transform: uppercase;
}
.col-1, .col-2, .col-3 {
    width: 30%;
    margin: 0px 40px 0px 0px;
    float: left;
}
.main {
    width: auto;
    margin: 60px auto 0;
	max-width:1200px;
}
h2 {
    font-size: 1.2em;
    border-bottom: 1px dotted #999;
    padding-bottom: 5px;
	margin-bottom: 10px;
}
h3 {
    font-size: 1em;
	
}
.main a {
    color: #999999;
    text-decoration: none;
	display:block;
	transition: .5s;
}
.main a:hover {
    background: #ccc;
    color: #fff;
	padding: 5px;
}
li {
    border-bottom: 1px dotted #EEEEEE;
    padding: 5px;
}
li ul {
    text-indent: 10px;
}
li ul li {
    border-bottom: medium none;
}
li a:hover {
    background: #ccc;
    color: #fff;
    transition: .5s;
}
li a {
    padding: 5px;
    display: block;
}
li a span {
    padding: 0px 20px 0px 0px;
}
li a:hover span {
    font-size: 1.5em;
    transition: .5s ease;
    padding: 0px 15px 0px 0px;
}
li:last-child {
    border-bottom: none!important;
}
article {
	padding:20px 0px;
}
.col2-1, .col2-2 {
	float:left;
	width:45%;
	margin-right: 40px;
}
.col3-1, .col3-2, .col3-3 {
float:left;
width: 30%;
margin-right: 20px;
}
.clear {
	clear:both;
}
p {
	padding-bottom:10px;
}

.quote {
/*	clear:both;*/
	border-top: 1px dotted #ccc;
	border-bottom: 1px dotted #ccc;
/*	padding: 40px;
	font-size:2em;
	line-height:1.7em;
	margin: 100px 0 40px !important;*/
	transition:.5s;
}
.quote:hover {
	background: #ccc;
	color: #fff;
	border-top: 1px dotted #222;
	border-bottom: 1px dotted #222;
	
}
.quote i {
	float:right;
	margin-right: 20px;
}


footer.main {
    background: #424242 none repeat scroll 0 0;
    bottom: 0;
    color: #ccc;
    float: right;
    font-size: 0.75em;
    padding: 20px 50px;
    position: fixed;
    max-width:100%;
	width: 100%;

/* PORTFOLIO */

.prt-img-hov-bg { width: 100%;	background:rgba(0,0,0,.8) url(../images/fancy-big-ico.png) no-repeat center;	opacity:0;	-webkit-transition:all .3s ease-in-out;	-moz-transition:all .3s ease-in-out;	-ms-transition:all .3s ease-in-out;	-o-transition:all .3s ease-in-out;	transition:all .3s ease-in-out;	color: transparent;	display: block;	left: 0;	filter: alpha(opacity=0); 	position: absolute;	top: 0;	bottom:0px; } 

.portfolio-item img:hover .prt-img-hov-bg { opacity:1; }
.Single-Item:hover .prt-img-hov-bg { opacity:1; }
#Iframe-Item .prt-img-hov-bg { background:rgba(0,0,0,.8) url(../images/fancy-big-ico2.png) no-repeat center; }
#Iframe-Item:hover .prt-img-hov-bg { opacity:1; }

.portfolio .eight img { width:100%;}

.col2-item img { width:420px; height:150px; margin-bottom:10px; }
.portfolio-item:hover h3 { color:#ff9900; }
.col2-item .prt-img-hov-bg { bottom:114px; }
.proj-det { padding-left:10px;}


.container .four.columns {
    margin: 0;
    padding: 0;
    width: 300px;
}


a.portfolio-item, .portfolio-item {  height:198px; text-align:center; float:left;  opacity: 0.9; 
      -webkit-transition: opacity 0.4s ease, border 0.4s ease; -moz-transition: opacity 0.4s ease, border 0.4s ease; -ms-transition: opacity 0.4s ease, border 0.4s ease; -o-transition: opacity 0.4s ease, border 0.4s ease; transition: opacity 0.4s ease, border 0.4s ease;margin:1px;  }
.portfolio-item { max-width:auto; height:auto; opacity: 0.92;}
.portfolio-item h5 { white-space:nowrap; overflow:hidden; line-height:1.1; color: #fff; font-weight:700;margin-top:40px; }
a.portfolio-item em, .portfolio-item em { color:#ffffff; font-size:12px;}
a.portfolio-item img, .portfolio-item img { margin-bottom:0px; max-width:100%; }
a.portfolio-item img { max-width:220px;}
a.portfolio-item:hover, .portfolio-item:hover { opacity: 1; cursor:pointer;}
a.portfolio-item:hover h5, .portfolio-item:hover h5 { color:#f90}
.portfolio-item a { display:block;margin: 5px;}

/* ISOTOPE */

.portfolio { display:block;width:100%; }
.isotope-item { z-index: 2; }
.isotope-hidden.isotope-item {  pointer-events: none;  z-index: 1;}
.isotope,
.isotope .isotope-item {-webkit-transition-duration: 0.8s;   -moz-transition-duration: 0.8s;  transition-duration: 0.8s;}
.isotope {-webkit-transition-property: height, width;   -moz-transition-property: height, width;        transition-property: height, width;}
.isotope .isotope-item {-webkit-transition-property: -webkit-transform, opacity;   -moz-transition-property: -moz-transform, opacity;  transition-property: transform, opacity; }
nav.primary {padding-bottom:10px; }
nav.primary ul { list-style:none; margin:2px 0 9px 0; float:left}
nav.primary ul li { font-size:18px; float:left; margin-right:12px; color:#666;}
nav.primary ul li a { height:18px;	min-width:20px;	padding:4px 10px 5px 10px;	display:block;	font-size:14px;	text-decoration:none;	color:#777;	line-height:19px;	float:left;	margin:1px; }
nav.primary ul li a:hover {	color:#fff;	background:#ff9900;	display:block;}
nav.primary ul li a:active, nav.primary ul li a.selected {	background:#424242;	color:#fff;}



/* #Media Queries
================================================== */
 
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {
	.main{width:90%;}
	
	}
 
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	.main{width:90%;	}
	.col-1, .col-2, .col-3 {    width: 20%;    margin: 0px 40px 40px 0px;    float: left;}
	.col2-1, .col2-2 {	float:left;	width:90%;	margin-right: 0px;}
	}
 
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
	.main{width:90%;}
	.col-1, .col-2, .col-3 {    width: 90%;    margin: 0px;    float: left;}
	.col2-1, .col2-2 {	float:left;	width:90%;	margin-right: 0px;}
	}
 
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	.main{width:90%;}
	}
 
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
	.main{width:90%;}
}