/* RESET CSS !!!!  */
body,ul,h1,h2,h3,h4,h5,blockquote, section, nav, header, footer, img,  .travaux, .menu, .blockapropos, .block, .blokprojets, .slika, .cv {
	margin: 0;
	padding: 0; 
}


/* TRANSITIONS  ----------------------------------*/

img {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* GENERAL  ----------------------------------*/

.menu {

background-color: rgba(255, 255, 255, 0.8);
position: fixed;
z-index: 100;
left: 0px;
right: 0px;
top:0px;

}

/* HEADER  ----------------------------------*/

header a { 
text-decoration: none;
}

header img { 
 float:left;
margin-left: 20px;
margin-top: 20px;
padding-right: 5px; 
}

header {
  display: inline-block;
}


iframe {
  padding-bottom: 20px;
}


nav {
  margin-right: 20px; 
  margin-top: 30px;
  float: right;
}


nav a:hover {
   border-top: 1px solid #000008; 
	border-bottom: 1px solid #000008; 
	 font-size: 14px;
  font-weight: 600;                                         
}
    

nav a {
 
 text-decoration: none;
 color: #000008; 
 font-family: 'Roboto';
 font-size: 14px;
 margin-left: 30px;
 padding-top: 2px;
 padding-bottom: 8px;
 font-weight: 500; 
}


nav li { 

 display: inline;
}


/* BLOK  ----------------------------------*/

.blok  {  
  
 margin-top: 160px;
 margin-left: auto;
 margin-right: auto;
 max-width: 500px;
 min-width: 250px;
 padding-left: 20px;
 padding-right: 20px;
 padding-bottom: 120px;

}
  
  
.blok li { 

  list-style-type:none; 
}


.blok p { 
 font-family: "Roboto";
 font-size: 25px;
 font-weight: bold;
}

.blok img { 
  width: 100%;
  min-width: 250px;
  max-width: 500px;
}


/* BLOK A PROPOS  ----------------------------------*/

.blokapropos{ 
  
  padding-left: 20px;
  padding-right: 20px; 
  margin-left: auto;
  margin-right: auto;
  max-width: 500px;
  min-width: 250px;
}


.blokapropos p {

 
  color: #424242; 
  font-family: "Roboto";
  text-align:left;
  font-weight: 300;
  font-size: 18px;
  line-height: 200%;
  margin-top: 40%; 

  margin-left: auto;
  margin-right: auto;
  
}






/* CV  ----------------------------------*/



.cv {

 
  font-family: "Roboto";
  font-size:18px;
  line-height: 100%;
  font-weight: 400;
  letter-spacing: 1pt;
  color: #000008;
  width: 45px;
  padding-top: 10px;
  padding-bottom: 10px;
  
  
}

.cv a {
  
  text-decoration: none;
  border-top: 1px solid #000008; 
  border-bottom: 1px solid #000008; 
  color: #000008;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.cv :hover {  

  font-weight:500;                                              

}


/* KOLONA  ----------------------------------*/

.kolona1, .kolona2{ 
  width: 240px;
  vertical-align: top;
  display: inline-block;
} 

.kolona1 {  
  margin-right: 20px;
}

.kolona1 img, .kolona2 img{
  position: absolute;
  left: 0;
}

.kolona1 div,.kolona2 div
{
    position: relative;
    height: 240px;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 25px;
}

.kolona2 img.top:hover, .kolona1 img.top:hover {
  opacity: 0;
}


/* HAUTEUR PARTICULIERE DES IMAGES -adjusts position of tiles on home page----------------------------------*/

#inside_cal_ed {
 height: 240px;
}

#yspca {
  height: 240px;
}

#916ink {
  height: 240px;
}

#cochin {
  height: 240px;
}

#gasvalve {
  height: 240px;
}

#motion {
  height: 240px;
}

#icouldbe {
  height: 240px;
}

#survived {
  height: 240px;
}


/* PROJECTS BLOCK  ----------------------------------*/

.blokprojets { 
 
  margin-top: 160px;
  margin-left: auto;
  margin-right: auto;
  max-width: 520px;
  min-width: 250px;
  padding-bottom: 120px;
}
 

.blokprojets img {
  width: 100%;
  
}



/* BLOK CONTACTS  ----------------------------------*/

.blokcontact h2 { 

  word-wrap: break-word;
  max-width: 100%;
  font-weight: 600;
  font-family: "Roboto";
  font-size: 25px;
  padding-bottom: 5px;
  border-bottom: solid #000008 1px;
  color: #000008;
  line-height: 100%; 
}

     
.blokcontact { 
  
  padding-right: 20px;
  padding-left: 20px;
  margin-left: auto;
  margin-right: auto;
  max-width: 520px;
  min-width: 250px;
  color: #000008; 
  font-family: "Roboto";
  font-size: 18px;
  font-weight: 400;
  line-height: 200%;
  margin-top: 23%; 

}

.blokcontact a:hover {  

  border-top: 1px solid #000008; 
  border-bottom: 1px solid #000008; 
  font-weight: 500;
  font-size: 18px;                                            

}


.blokcontact a { 

  text-decoration: none;
  color: #000008; 
  padding-top: 2px;
}

.blokcontact img {
float: right;
}


/* PROJECTS BLOCK ----------------------------------*/

 .bloktravaux  {  

   word-wrap: break-word;
   max-width: 500px;
   padding-left: 20px;
   padding-right: 20px;
   margin-top: 160px; 
   margin-left: auto;
   margin-right: auto;
   max-width: 500px;
   min-width: 250px;
   color: #424242; 
   font-family: "Roboto";
   text-align:left;
   font-weight: 300;
   font-size: 15px;
   line-height: 200%;
   padding-bottom: 120px;
   
}



.bloktravaux h2 {

  max-width: 100%;
  font-weight: 400;
  font-family: "Roboto";
  font-size: 55px;
  color: #000008;
  line-height: 100%; 
}



.bloktravaux img {
 
  width: 100%; 
  margin-top: 50px;
}


.bloktravaux p { 

  margin-top: 40px;
} 


.bloktravaux li { 

  list-style-type: none; 
  display: inline-block;
  margin-top: 20px;
                
}


.bloktravaux a {

  text-decoration: none;
  font-size: 35px;
  color: #000008;
  font-weight: bold;
  margin-right: 50px; 

}



iframe { 
  padding-top: 50px;

}



/* FOOTER  ----------------------------------*/

 footer { 
  
  background-color: rgba(0, 0, 8, 0.8);
  color: white;
  position: fixed;
  z-index: 99;
  bottom: 0px;
  text-align: center;
  font-family: 'Roboto';
  font-size: 10px; 
  font-weight: normal;
  width: 100%;
  padding-top: 3px;
  padding-bottom: 3px;                
           
}

 

  footer a { 

    text-decoration: none;
  }




/* POUR SMARTPHONES  ----------------------------------*/   
   
/* pour smartphones de 0px à 550px */
@media (max-width: 550px) {



header img {
  
  max-width: 60px; 
  margin-top: 15px;
  margin-bottom: 15px;
}


 

nav { 
  
  float: none;
  width: 100%;
  margin-top: 2px;
  padding-bottom: 4px;  
}

   

nav a { 
  
  margin-left: 20px;
  margin-right: 6px;
  color: #000008;
  margin-bottom: 3px;
  padding-bottom: 10px;
  font-size: 14px;
  font-weight: 600; 
}


nav a:hover { 
  border-top: none;  
  font-weight: 500; 
}


.kolona1,.kolona2 { 
  width: 100%;
  margin-left: 0 auto;
  margin-right: 0 auto;
}

.kolona1 div, .kolona2 div{
  margin-bottom: 20px;
  width: 295px;
  height: 295px;
}

#yspca {
 height: 295px;
}

#inside_cal_ed {
  height: 295px;
}

#survived {
  height: 295px;
}

#cochin {
  height: 295px;
}

#motion {
  height: 295px;
}


#icouldbe {
  height: 295px;
}
#916ink {
  height: 295px;
}

#gasvalve { 
  height: 295px;
 }


.kolona2 img.top:hover, .kolona1 img.top:hover {
  opacity: 1;
}

.blokcontact { 
  font-size: 17px;
  margin-top: 50%;
}
  
.blokcontact a:hover {
  border-top: none; 
  font-weight: 500;
  font-size: 20px;
}

.blokapropos img {
  margin-right: 20px;
  position: relative;
}

}
/* FIN DE SMARTPHONES  ----------------------------------*/