/*
Template Name: Hoshi
Description: A Single Page Portfolio HTML Template
Author: Chris Creed
URL: http://www.chris-creed.com
*/

@import "reset.css";

/* ----------- */
/* -- Tools -- */
/* ----------- */
.line { clear: both; height: 3px; background-color: #ddd; margin: 40px 0 50px 0; }

/* -------------------- */
/* -- General Styles -- */
/* -------------------- */
#wrap { width: 960px; margin: 0 auto; }
body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #eee; color: #666; }
h1 { font-size: 38px; margin: 0 0 30px 0; }
h2 { font-size: 34px; margin: 0 0 30px 0; }
h3 { font-size: 24px; margin: 30px 0 30px 0; }
h4 { font-size: 20px; margin: 30px 0 15px 0;}
h5 { font-size: 18px; margin: 30px 0 5px 0;}
p { font-size: 14px; line-height: 22px; margin: 0 0 15px 0; }
a { text-decoration: none; color: #cc0000; }
a.nom { text-decoration: none; color: #666; }
a:hover { color: #666; }

/* ------------ */
/* -- Header -- */
/* ------------ */
#header { padding: 50px 0 10px 0; border-bottom: 10px #ddd solid; overflow: hidden; }
#header h1 { float: left; font-size: 40px; font-weight: bold; letter-spacing: -2px; margin: 0; }
#header h2 { float: right; font-size: 30px; color: #aaa; margin: 8px 0 0 0; letter-spacing: -1px; }

/* --------- */
/* -- Bio -- */
/* --------- */
#bio { margin: 55px 0 40px 0; }
#bio h3 { font-size: 20px; color: #666; margin: 0 0 17px 0; }
#bio h4 { font-size: 20px; margin: 0 0 0 0; }
#bio h4 span { color: #888; }
#bio h5 { font-size: 16px; margin: 9px 0 0 0; }
#bio p { line-height: 22px; margin: 0 0 23px 0; }
#bio #about { float: left; width: 610px; margin: 0 0 60px 0; }
#photo-bg { float: left; width: 180px; height: 180px; margin: 0 50px 0 0; -webkit-box-shadow: 0px 0 5px #aaa; -moz-box-shadow: 0px 0 5px #aaa; box-shadow: 0px 0 5px #aaa; padding: 5px; }
#photo-bg2 { float: left; width: 250px; height: 180px; margin: 0 50px 0 0; -webkit-box-shadow: 0px 0 5px #aaa; -moz-box-shadow: 0px 0 5px #aaa; box-shadow: 0px 0 5px #aaa; padding: 5px; }
#bio #about .photo img {  border: 1px #ccc solid; width: 180px; height: 180px; }
#contact-details { float: right; width: 270px; }
#contact-details h5 { color: #555; }
#contact-details h5 span { color: #888; }

/* ----------------------- */
/* -- Featured Projects -- */
/* ----------------------- */
#featured-projects { float: left; margin: 0 0 10px 0; width: 100%; }
#featured-projects h2 { float: right; font-size: 30px; color: #aaa; margin: 8px 0 0 0; letter-spacing: -1px; }
#featured-projects h3 { margin: 0 0 35px 0; }
#featured-projects h5 { margin: 0 0 35px 0; font-size: 24px; color: #cc0000; }

.project { float: left; padding: 5px;  -webkit-box-shadow: 0px 0 5px #aaa; -moz-box-shadow: 0px 0 5px #aaa; box-shadow: 0px 0 5px #aaa; margin: 0 20px 55px 0; }
.project:hover { opacity: 0.7; }
.last { float: right; }

/* ----------------------- */
/* -- Història -- */
/* ----------------------- */
#historia { float: left; margin: 0 0 10px 0; width: 100%; }
#historia h2 { float: right; font-size: 30px; color: #aaa; margin: 8px 0 0 0; letter-spacing: -1px; }
#historia h3 { margin: 0 0 35px 0; }
.quadre { float: left; padding: 5px;  -webkit-box-shadow: 0px 0 5px #aaa; -moz-box-shadow: 0px 0 5px #aaa; box-shadow: 0px 0 5px #aaa; margin: 0 50px 55px 0; width: 100% ; height: 400px}
.quadre:hover { opacity: 0.7; }
.last { float: right; }





/* -------------- */
/* -- Services -- */
/* -------------- */
#services { overflow: hidden; padding: 0 0 0 0; }
#services h3 { margin: 0 0 25px 0; }
#services .service { float: left; margin: 0  0 60px; }
#services .first { margin-left: 0; }
#services img { float: left; }
#services h4 { float: left; margin: 0px 0 10px 10px; font-size: 18px; }
#services p { clear: both; width: 270px; }

/* ------------------------ */
/* -- Additional Details -- */
/* ------------------------ */
#testimonials { width: 100%; overflow: hidden; }
#testimonials h3 { margin: 0 0 25px 0; }
#testimonials .testimonial { float: left; width: 455px; font-style: italic; margin: 0 0 30px 0; }
#testimonials .testimonial .author-details { color: #222; margin: -10px 0 0 0; font-style: normal; }
#testimonials .testimonial span { color: #888; }
.last { float: right !important; }

/* ------------ */
/* -- Footer -- */
/* ------------ */
#footer { clear: both; margin: 40px 0 35px 0; border-top: 3px #ddd solid; }
#footer p { font-size: 18px; color: #aaa; margin-top: 10px; }
#footer h2 { float: right; font-size: 30px; color: #aaa; margin: 8px 0 0 0; letter-spacing: -1px; }