html {
  min-height: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  background: #ffffff;
  background: #ffffff -webkit-linear-gradient(top, #ffffff, #ffffff) no-repeat;
  background: #ffffff -moz-linear-gradient(top, #ffffff, #ffffff) no-repeat;
  background: #ffffff -o-linear-gradient(top, #ffffff, #ffffff) no-repeat;
  background: #ffffff linear-gradient(top, #ffffff, #ffffff) no-repeat;
  padding: 7px;
  margin:0;
/*  min-height:1150px;*/
}

body {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 12px;
  line-height: 21pt;
  background: #fff;
  color: #8a8a8a;
  height: 100%;
  margin:0;
  padding:0
}

* {margin: 0;padding: 0;}



#wrapper {
min-height: 100%;
height: auto !important;
/*height: 100%;*/
margin-bottom: -200px; 
background:#fff;
}

a {
  color: #222;
  text-decoration: none;
  -webkit-transition: color .3s;
  -moz-transition: color .3s;
  -o-transition: color .3s;
  transition: color .3s;
}

a:hover {color:#000;}
img {outline: 0;border: 0;}
p {padding-bottom: 20px; font-style:italic}

.centered {margin: 0 auto;width: 855px;}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {display: block; }
header {padding-top: 70px;text-align: center;width: 860px;}

header h1 {position: absolute;width: 122px;height: 44px;left: 50%;margin-left: -61px;top: 55px;}
header h1 a {display: inline-block;width: 122px;height: 44px;text-indent: -6000px;background:url(../images/basile-logo.png) no-repeat center center;}

nav {font-family:'LatoBold', Arial, sans-serif;text-transform: uppercase;margin: 50px auto; overflow: hidden; no-repeat center center }
nav li {display: inline-block;margin: 0 52px;}
nav li a {display: block;line-height: 1;padding: 3px 0;font-size:0.80em; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
nav li a:hover { color:#999}

.grey {background-color:#f5f5f5}
.white  {background-color:#fff; margin-top:20px}
.content {width: auto;}

section {float: left;display:block}

.projects {width: 880px;margin: 0 auto; position:relative;}
.projectitem {margin:20px;float:left; position:relative}
.size-3 {width: 840px; }
.size-3 img {width:100% !important; height:auto}
.size-2 {width: 400px;}
.size-2 img {width:100% !important; height:auto}
.banner {
    height: 564px;
    background: url(../img_voorbeeld/banner-home-liggend_Morley.jpg) no-repeat center center;
    position: relative;
    background-image: url(../img_voorbeeld/banner-home-liggend_Morley.jpg);
}
.col-2 {width: 400px;margin:20px 20px 50px 20px;float: left; position:relative}
.col-4 {float:left; position:relative; font-style:italic;-moz-column-count: 5; -webkit-columns: 5; -o-columns: 5; columns:5;width:100%; margin:20px 20px 50px;}
.col-4 .category {font-family:'LatoBold', Arial, sans-serif;color:#333;padding:28px 0px 0px;font-size:0.9em;letter-spacing:0.15em; font-style:normal; text-transform:uppercase}
.col-3-1, .col-3-3 {width: 190px;margin:20px 10px;float:left; position:relative;}
.col-3-2 {width:340px;margin:20px 10px 50px;float:left; position:relative; padding:0 45px; color:#2a2424}
.col-8 {margin:20px 20px 50px;font-style:italic;}

#gallery {width: 100%;margin: 0 auto; position:relative; background-color:#FFF;clear: both;}
#gallery figure {margin:10px 15px; float:left;width:200px;height:auto;}
#gallery figure img {width:200px;height:auto;}
#gallery figure h1 {text-transform:capitalize;}
/*#gallery .portrait img {height:254px;width:auto}
#gallery .landscape img {width:254px;height:auto;}*/

.projects h1 {text-align:center; font-family:'LatoBlack', Arial, sans-serif;font-size:1.110em; letter-spacing:0.15em;text-transform:uppercase; color:#333; padding:25px 0 10px 0;}
.projects h1 span {font-family:'LatoBold', Arial, sans-serif;color:#fff; background-color:#000; padding:10px 20px;font-size:0.8em}

.balk { background:url(../images/bg-balk.jpg) no-repeat center 93px;}
.balk2 { background:url(../images/bg-balk2.png) no-repeat center 93px;}
.left {text-align:right;}
.right {text-align:left;}
.col-2 .left {padding:0 20px 0 50px}
.col-2 .right {padding:0 50px 0 20px}
.col-3-1 .left {padding:0 0px 0 45px}
.col-3-3 .right {padding:0 0px 0 0px}
.col-3-1 a, .col-3-3 a {color:#8a8a8a}
.col-3-1 a:hover , .col-3-3 a:hover {color: #222;}

.col-3-2 ul {font-style:italic}
.col-3-2 ul li {width:99%}
.col-3-2 ul .day {display:inline-block;float:left; width:33%}
.col-3-2 ul .hour1 {display:inline-block;float:left; width:33%; text-align:center}
.col-3-2 ul .hour2 {display:inline-block;float:left; width:33%; text-align:right}

.adress {padding:50px 0px 0 0px; background:url(../images/adress.png) no-repeat right 20px}
.details {padding:50px 0px 0 0px; background:url(../images/talk.png) no-repeat 0 20px}
.projecttekst { margin:10px 20px 20px 20px; }
.projecttekst a {-webkit-transition: opacity .3s;-moz-transition: all .3s ease-in;-o-transition: all .3s ease-in;transition: all .3s ease-in;padding:75px 30px 30px 30px; display:block; background:#f4d6ef url(../images/icon-camera.png) no-repeat center 20px;text-align:center; text-transform:uppercase; font-family:'LatoBold', Arial, sans-serif; color:#ba019d !important; font-size:1.1em; letter-spacing:0.05em}
.projecttekst a:hover {background:#e293d5 url(../images/icon-camera.png) no-repeat center 20px; color: #fff !important;}

/*-------
newsletter
---------*/

.newsletter {text-align:center}
.newsletter .formwrapper {text-align:center}
.newsletter .formwrapper table {width:100%}
.newsletter .formwrapper table td {padding:5px 0px;}
.newsletter p {padding-bottom: 10px;}
.newsletter h1 {padding:14px 0 10px 0;}

.formwrapper .tekstinput {font-size:0.9em; font-family:'LatoBold', Arial, sans-serif;color:#a1a1a1; background-color: #f5f5f5; width:250px;  height: 30px; border: solid 1px #fff; outline-style: none; padding:5px 20px;/*margin-top:4px;*/text-align:center; letter-spacing:0.05em;}
.formwrapper .button{font-size:0.85em; font-family:'LatoBold', Arial, sans-serif;color: #fff;width:150px; background-color: #000; height: 30px; border: none; outline-color: #000;text-align:left; padding:0 17px; text-align:center; letter-spacing:0.05em;}
.formwrapper .button:hover {background-color: #413c3c;}
.formwrapper .error {font-style:italic; color:#f17171}

/*-------
overlay image
---------*/
.banner a {display: block;width:100%; height:364px; position: absolute;top
: 0;padding-top: 200px;line-height: 22px;z-index: 2;color:#fff;font-style:italic;text-align: center;-webkit-transition: opacity .3s;-moz-transition: opacity .3s;-o-transition: opacity .3s;transition: opacity .3s;opacity: 0; background-color:#FFF; filter: alpha(opacity = 0);}

.banner a:hover {opacity: 0.4;filter: alpha(opacity = 40);}

.gallery .item {position: relative;zoom:1}

figure {position: relative;line-height: 0;}
figure a {position: relative;display: block;-webkit-transition: opacity .3s;-moz-transition: opacity .3s;-o-transition: opacity .3s;transition: opacity .3s;background: #fafafa;zoom:1}
figure img {position: relative;-webkit-transition: opacity .3s;-moz-transition: opacity .3s;-o-transition: opacity .3s;transition: opacity 0.3s;zoom:1}
figure a:hover {opacity: 0.9;filter: alpha(opacity = 90);-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";zoom:1}
figure a:hover img {opacity: .3;filter: alpha(opacity = 30);-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";;zoom:1}
figure figcaption {position: absolute;top: 50%;margin-top: -10px;left: 0;right: 0;line-height: 22px;z-index: 2;pointer-events: none;color:#333;font-style:italic;text-align: center;-webkit-transition: opacity .3s;-moz-transition: opacity .3s;-o-transition: opacity .3s;transition: opacity .3s;opacity: 0;filter: alpha(opacity = 0);zoom:1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";}
figure:hover figcaption {opacity: 1;filter: alpha(opacity = 100);zoom:1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";}

/*-------
footer
---------*/

footer, #push {height: 200px; /* .push must be the same height as .footer */}
footer {color:#b5b4b4;background:#fafafa url(../images/edge.png) repeat-x 0 0;position:relative; line-height:16pt; padding:0px 0}
footer .sections {padding:0;width:800px;/*background-color:#0C0;*/margin:0 auto;overflow: hidden;}

footer h2 {font-family:'LatoBlack', Arial, sans-serif;font-size:0.8em; letter-spacing:0.05em;text-transform:uppercase; color:#514e4e; padding:25px 0 10px 0;}
footer .hello h2 { background:url(../images/instagram.png) no-repeat center 0 }
footer .facebook h2 {background:url(../images/facebook.png) no-repeat center 0}
section p a { color:#b5b4b4; display:block;}
footer .hello, footer .facebook {width:25%;text-align: center;margin-top:50px}
footer .basiledog{width:50%;text-align: center;margin-top:50px}

/*------------------------------------------------------------------
undercast
------------------------------------------------------------------*/

#undercast a.under { height: 51px; width: 7px; margin:20px; position: fixed; right: 0; bottom: 0; visibility: visible; background:url(../images/undercast.png) -2px 0 no-repeat; text-decoration:none }
#undercast a:hover.under {background:url(../images/undercast.png) 7px 0; text-decoration:none; }


/*-----------
fontface
-----------*/

@font-face {
    font-family: 'LatoBold';
    src: url('Lato-Bol-webfont.eot');
    src: url('Lato-Bol-webfont.eot?#iefix') format('embedded-opentype'),
         url('Lato-Bol-webfont.woff') format('woff'),
         url('Lato-Bol-webfont.ttf') format('truetype'),
         url('Lato-Bol-webfont.svg#LatoBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LatoBlack';
    src: url('Lato-Bla-webfont.eot');
    src: url('Lato-Bla-webfont.eot?#iefix') format('embedded-opentype'),
         url('Lato-Bla-webfont.woff') format('woff'),
         url('Lato-Bla-webfont.ttf') format('truetype'),
         url('Lato-Bla-webfont.svg#LatoBlack') format('svg');
    font-weight: normal;
    font-style: normal;
}


/*-----------
masonry bricks
-----------*/

.masonry,
.masonry .masonry-brick {
  -webkit-transition-duration: 0.7s;
     -moz-transition-duration: 0.7s;
      -ms-transition-duration: 0.7s;
       -o-transition-duration: 0.7s;
          transition-duration: 0.7s;
}

.masonry {
  -webkit-transition-property: width, height;
     -moz-transition-property: width, height;
      -ms-transition-property: width, height;
       -o-transition-property: width, height;
          transition-property: width, height;
}

.masonry .masonry-brick {
  -webkit-transition-property: left, right, top;
     -moz-transition-property: left, right, top;
      -ms-transition-property: left, right, top;
       -o-transition-property: left, right, top;
          transition-property: left, right, top;
}



/*-----------
2013
-----------*/

p.crazy {float:left; font-size:12px}
h1.crazy {font-size:18px; color:#F66}
h1.crazy span.ondertitel  {font-family:'LatoBold', Arial, sans-serif;text-transform: uppercase; background:none;color:#333}

.youngad  {color:#8a8a8a !important}
.projects h2.expl {text-align:center !important;font-family:'LatoBold', Arial, sans-serif;color:#333;padding:28px 0px 0px;font-size:0.8em;letter-spacing:0.15em; font-style:normal; text-transform:uppercase}
img.men, img.women  {padding-left:7px}