@charset "utf-8";

/* CSS Document */

/* RESET STYLES */
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, font, 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 
{ margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

body { padding-left: 10px; padding-right: 10px; font-size: 11px; font-family: Helvetica, Arial, sans-serif; background: #fff; margin-bottom: 20px;}

ul { margin: 10px 0 15px 0; list-style: none; }

img { max-width: 100%; }

/* Tablet Landscape */
@media screen and (max-width: 1060px) {
    #primary { width:67%; }
    #secondary { width:30%; margin-left:3%;}  
}

/* Tabled Portrait */
@media screen and (max-width: 768px) {
    #primary { width:100%; }
    #secondary { width:100%; margin:0; border:none; }
}

/*HEADER*/
header { width:1005px; border-bottom: 1px dotted #999; margin:0 auto; display: block;}
nav { display: block; }
nav li { float: left; display: inline; margin: 0 0 0 15px; width: 240px; text-transform: uppercase;}
nav li:first-child { margin-left: 0; }
nav li a { color: #999; display: block; text-decoration: none; padding: 10px 0px 5px 0px; border-bottom: 1px dotted #999;  
-moz-transition: color 0.4s ease-out 0s; -webkit-transition: color 0.4s ease-out 0s; }
nav li a:hover { color: #555; text-decoration: none; border-bottom: 1px solid #158cc3; }
nav li a.active { color: #555; border-bottom: 1px solid #3cbda8; }
/*logo*/
.logo a{float:left; text-indent:-9999px; margin-top: 25px; margin-bottom: 15px; display:block; width:100px; height:100px; background:transparent url(/img/pr-logo.svg); background-repeat:no-repeat;}



/*INDEX PAGE*/
.portfolio-list { width: 1020px; display: block; margin: 5px auto 0px auto; padding: 0 0 0 15px;}
/*thumbs*/
.portfolio-list li { width: 240px; height:240px; float: left; margin: 0 15px 15px 0; position: relative;}
/*project title*/
/*project hover*/
.portfolio-list .precis { width:240px; height:240px; display:none; position: absolute; background: #158cc3; background: rgba(21, 140, 195, 0.7); z-index: 999; }
.portfolio-list .precis:hover { cursor: pointer; }
.portfolio-list li>div p { color: #fff; margin: 10px 20px; font-size: 11px; font-weight:800; line-height: 18px;  margin-top: 7px; padding-top: 10px;}

/*PROJECT PAGE*/
.project { width: 1020px; display: block; margin: 0px auto 0px auto; padding: 0 0 0 15px;}

.project-description { width: 240px; float: left; margin-right: 15px;}
.project-images { width: 750px; margin-left:255px;}

.project h1 { margin-top:30px; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; color: #999; padding-bottom: 10px; border-bottom: 1px dotted #999; }
.project p { color: #999; line-height: 18px;  margin-top: 20px;}
.project-images img { margin-top: 30px; }
.link a { color: #777; text-decoration: none; }
.link a:hover { color: #333; text-decoration: none;  }


/*ABOUT*/

.about { width: 1020px; display: block; margin: 50px auto 0px auto; padding: 0 0 0 15px; font-family: Helvetica, Arial, sans-serif; font-size: 11px; line-height: 16px; color: #555; text-decoration:none;}

.about h1 {width: 480px; font-size:18px; font-weight:900; margin-bottom:20px;}
.about p {width: 470px;}
.about a {color:#999; text-decoration:none;}
.about a:hover {color:#333; text-decoration:none;}

.clients { width:1005px;
    -webkit-column-count: 4; /* Chrome, Safari, Opera */
    -moz-column-count: 4; /* Firefox */
    column-count: 4;
    -webkit-column-gap: 15px; /* Chrome, Safari, Opera */
    -moz-column-gap: 15px; /* Firefox */
    column-gap: 15px;
}

.likes { width: 1020px; display: block; margin-top: 30px; font-family: Helvetica, Arial, sans-serif; font-size: 11px; font-weight:800; line-height: 16px; color: #999; text-decoration:none; text-transform: uppercase;}
.likes li { width: 112px; height:112px; float: left; margin: 0px 15px 15px 0px; position: relative;}
.likes img{ position: absolute;}

/*CONTACT*/
.contact { width: 1020px; display: block; margin: 50px auto 0px auto; padding: 0 0 0 15px; font-family: Helvetica, Arial, sans-serif; font-size: 11px; line-height: 16px; color: #555; text-decoration:none;}

.contact .text {width: 510px; margin-bottom: 30px; }

.contact img {margin-right:10px;}

.trad {margin-bottom:10px;}
.trad a {color:#555; text-decoration:none; margin-bottom: 20px; }
.trad a:hover {opacity:0.7;}

.socials a {color:#555; text-decoration:none;}
.socials a:hover{opacity:0.7;}

.contact .copyright {width: 510px; margin: 300px 0 0 0;}


/* NEW CLEAR FIX */
/* For modern browsers */
.cf:before, .cf:after { content:""; display:table; }
.cf:after { clear:both; }
/* For IE 6/7 (trigger hasLayout) */
.cf { zoom:1; }