/****************** ALGEMEEN ******************************/
html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust:100%
}

body {
    -moz-font-feature-settings: 'kern';
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
}

body    {
    margin: 0px;
    padding: 0px;
    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    font-size: 100% ;
    font-weight: 400;
    font-style: normal;
    background-color: #222222;
    line-height: 1.5em;
    color: #adadad;
    min-height: 100%;
    letter-spacing: .02em;
}
 

a {
    text-decoration: none;
    }
#about a:hover {
    text-decoration: underline;
    }



a, a:visited, a:active {
    color: #0066cc;
    }

#artwork a, #artwork a:visited, #artwork a:active {
    color: #0099CC;
    }


strong, b {
font-weight: 600;
}

i {
    font-style: italic;
    }




h1, h2, h3, h4, h5, h6 {
        padding: 0px;
        margin: 0px;
        font-weight: 500;
        line-height: 1.5em;
        clear: both;
    }


h3 {
     font-size: 1.5em;
    }


h5 {
     font-weight: 300;
     line-height: 2em;
     padding-bottom: 2em;
     
}

h6 {
    font-style: normal;
    color: #8e8e8e;
     font-weight: normal;
     padding: 30px 0px 20px;
     
}

div, ul, li, img, section  {
   margin: 0px;
   padding: 0px;
   list-style: none;
   border: 0px;
}


p, ul, ol,  li {
        font-weight: 400;
}


a img:hover   {
/*    opacity: 0.5;   */
}

.image, .thumbimage   {
     background-color: #0099CC;
}

 .clear    {
     clear:both;
 }

/****************** LAYOUT ******************************/
 
.container {
    height: 100%;
    width:100%;
    margin: auto;
}

.wrapper    {
    width: 90%;
    max-width: 1000px;
    margin: 0;
    margin: auto;
   padding-top: 30px;
   padding-bottom: 40px;
}
.textwrapper    {
      max-width: 550px;
}

.left   {
     float: left;
 }
 
  
 
 .right   {
     float: right;

 }

.image50    {
    width: 50%;
}

/****************** MENU ******************************/
#page-header  {
    background: #333;
}

#main-navigation {
    /*    padding-top: 12px;*/
    width:90%;
    height: 50px;
    max-width: 960px;
    margin: 0;
    margin: auto;
}

#main-navigation a  {
    color: #d6d6d6;
}


#main-navigation a:hover {
    color: #fff;
    text-decoration: none;
}

#main-navigation h1  a {
    float: left;
    padding-top: 5px;
    letter-spacing: .04em;
}

#main-navigation ul {
    padding-top: 12px;
    list-style: none;
    float: right;
}

#main-navigation li {
    float: left;
    margin-left: 60px;
}


#main-navigation li a {
/*    color: #aaa;*/
    
}


#main-navigation li.current {
    color: white;
    text-decoration: none;
   cursor: default;
}
  /******************  INDEX ******************************/
#index {
  max-width: 960px;
    margin: 0;
    margin: auto;
    margin-top: 3em;
     margin-bottom: 3em;

}


#index li{
margin-bottom: 48px;

}

.welcome  img  {
    clear: both;
    width: 100%;
    background-color: #CCC;
}

.welcome  a {
    color: gray;
}




.welcome a:hover    {
    color: #0066cc;
}

#index h4   {
     padding: 0px 20px;
}
  /******************  THUMBS MENU WORKS******************************/
.thumb img {
    vertical-align: middle;
    margin-right: 20px;
    width: 100%;
    height: 100px;
}


.thumb {
    padding-bottom: 0.9em;
    padding-top: 0.9em;
    border-bottom: 1px solid #bbb; /*#d9d9d9 bij witte achtergrond  #bbb*/
  
}

#works  {
    background-color: white;
}

  /******************  CONTENT ******************************/


#artwork    {

    clear: both;
    padding-bottom: 100px; /*NODIG VOOR RUIMTE tot FOOTER aanpassen voor mediaqueries*/
}

.description  li  {
    margin-left:20px;
    list-style: disc;
}

.contentbox   {
    border-top: 1px solid #444;
    border-bottom: 1px solid #444;
    padding-bottom: 20px;
    padding-top: 20px;
     text-align: center;
}

.contentbox_noborder  {
    padding-top: 20px;
    margin: auto;
    text-align: center;
}

.contentbox  img, .contentbox_noborder img {
    padding-top: 20px;
}

.description   {
        width: 90%;
       margin: auto;
}

.stage,  .description, .contentbox, .contentbox_noborder    {
    clear:both;
    margin: auto;
    max-width:750px;
    }


.stage  {
        padding-top:60px;
        padding-bottom:20px;
        text-align: center;
}

.stage img, .stage video, .contentbox img, .contentbox_noborder img {
    max-width:100%;
/*    width:100%;*/
    height:auto;
    margin: auto;
}





.description h4  {
    font-weight: 400;
     font-size: 1em;

}

.textcontainer h4  {
    font-weight: 500;
     font-size: 1em;
     padding: 20px 0px;
}

.title  {
        padding: 20px 0 20px 0;
/*        font-size: medium;*/
}

.textcontainer {
     padding: 30px 0px 0px 0px;
           
}




/****************** about ******************************/
#about {
    background-color: #d2d2d2;
    color: #000;
}  


.bglight    {
     background-color: #d2d2d2;
}
.bglighter    {
     background-color: #f2f2f2;
}
.bgwhite    {
    background-color: white;
}

/****************** footer ******************************/
.footer-container {
      width:100%;
      background-color: #222222;
      position: fixed;
      bottom:0;
      left:0;
      
}

.inner-footer-container {
    margin: auto;
    width: 96%;
    max-width: 750px;
    border-top: 1px solid #444;
    height: 60px;
}

footer p a:link, footer p a:visited {
    color: #8e8e8e;
}
footer p a:hover {
    color: white;
    text-decoration: none;
}
/********************* HTML5 reset for older browsers ***********/
header, nav, section, article, figure, aside, footer {
	display: block;	
}




/* ====================
Max 400
 ====================*/
@media only screen  and (max-width: 400px)  {
    .image50 {
        width: 100%;
       
    }
    
    #main-navigation li {
        float: left;
        margin-left: 33px;
    }
   
}


/* ====================
Max hoogte weghalen fixed footer
 ====================*/
@media only screen  and (max-height: 750px)  {
   
    .footer-container {
          width:100%;
          position: relative;
     }
   
   #artwork    {
   clear: both;
    padding-bottom: 30px; /*NODIG VOOR RUIMTE tot FOOTER aanpassen voor mediaqueries*/
   }
   
}