@charset "utf-8";
/* CSS Document */
body {
	width: 100%;
	padding: 0px;
	margin: 0px;
	font-family:Arial, Helvetica, sans-serif;
}
/* Header */

.header{background-color:#fff;height: 51px;line-height: 49px;}
.header address div{list-style:none;margin-bottom:0px;height:51px;margin-right: 15px;}
.header address div a{color:#171b1e;font-size:14px;font-weight:bold;font-family:Arial, Helvetica, sans-serif;text-decoration:none;}
.header address div p{color:#171b1e;font-size:14px;font-weight:bold;}
.header address div img{width:40px;}
.projects{width:33.3333%;float:left;display:inline-block;text-align:center;}
.projects img{width:80%;padding-top:34px;}
.desc{font-family: Arial, Helvetica, sans-serif;
    color: #171b1e;
    font-size: 15px;
    font-weight: bold;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
}
.nav .logo img{width:29%;}
.nav{background-color:#171b1e;height: 100px;line-height: 99px;position:relative;}
.nav nav .nav-list{list-style:none;display:flex;justify-content:space-around;margin-bottom:0px;padding-left:0px;}
.nav nav .nav-list .list a{display:block;text-decoration:none;color:#ffcc00;font-weight:bold;font-size:15px;}
.nav nav .nav-list .list a:hover{color:#b79200;transition:all 0.3s ease-in-out;}
#menuToggle{display:none;}

.footer{float:left;background-color:#171b1e;height:auto;}
      .footer img{width:58%;}
      .footer p{padding-right: 33px;padding-top: 25px;font-family:Arial, Helvetica, sans-serif;font-size:17px;color:white;text-align: inherit;line-height: 1.4em;}
      .footer li{font-family:Arial, Helvetica, sans-serif;font-size:17px;color:white;padding-top: 17px;list-style:none;margin-top: 9px}
      .footer ul{padding-left: 0px;text-align: initial;margin-left: 54px;}
      .btn-footer{width: 69%;background-color:  #ffcc00;color: white;font-family:Arial, Helvetica, sans-serif;font-size: 21px;height:66px;border: solid 2px  #ffcc00;
        border-radius: 8px;}
@media(max-width:900px){
  .header address div img{width:21px;}
  .nav nav .nav-list{display:none;} 
  #menuToggle
{width:50%;
  display: block;
  position:relative;
  bottom:62px;
    left: 14px;
  
  z-index: 99999;
  
  -webkit-user-select: none;
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
}

#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background:#ffcc00 ;
  border-radius: 3px;
  
  z-index: 1;
  
  -webkit-transform-origin: 4px 0px;
  
          transform-origin: 4px 0px;
  
  transition: background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease,
              -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease,
              -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menuToggle span:first-child
{
  -webkit-transform-origin: 0% 0%;
          transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  -webkit-transform-origin: 0% 100%;
          transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  -webkit-transform: rotate(45deg) translate(-2px, -1px);
          transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  -webkit-transform: rotate(0deg) scale(0.2, 0.2);
          transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  -webkit-transform: rotate(-45deg) translate(0, -1px);
          transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu
{ height:600px;
  position: absolute;
  width: 452px;
  margin: -100px 0 0 -50px;
  background: white;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  -webkit-transform-origin: 0% 0%;
  
          transform-origin: 0% 0%;
  -webkit-transform: translate(-100%, 0);
          transform: translate(-100%, 0);
  
  transition: -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
      padding-top: 42px;
    padding-left: 9px;
}

#menu li
{  color:#171b1e;font-family:Arial, Helvetica,
    padding: 10px 0;
    font-size: 2em;
    margin-left: -10%;
    text-align: center;
    line-height:3em;
    
}

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul
{
  -webkit-transform: none;
          transform: none;
}
  .header address .fb{display:none;}
  .header address div .info2{float:left;margin-right: 70px;}
  .nav .logo img{width:33%;}
  address{margin-bottom:0px;}
  
.footer{display:inline-block;text-align:center;}
.footer p{text-align:initial;margin-left: 55px;font-size: 16px;}
.btn-footer{font-size:13px;height: 53px;}
.nav .logo{text-align:right}
.nav .logo img{width:34%;}
.nav .logo a{width:40px;}

}
/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
.header address div a{font-size: 10px;}
.header address div {
    list-style: none;
    margin-bottom: 0px;
    height: 51px;
}
#menuToggle {width: 50%;
    display: block;
    position: relative;
    bottom: 59px;
    left: 14px;
    z-index: 99999;}
}


/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {

.footer p {
    text-align: initial;
    margin-left: 6px;
    font-size: 16px;
}
.footer ul {
    padding-left: 0px;
    text-align: initial;
    margin-left: 7px;
}
.nav .logo img {
    width: 34%;
    /* margin-left: -1%; */
    margin-right: 0%;
}
#menu li {
    color: #171b1e;
    font-family: Arial, Helvetica,
 padding: 10px 0;
    font-size: 2em;
    margin-left: -19%;
    text-align: center;
    line-height: 3em;
}
.header address div img {
    width: 21px;
}
/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
.header address div {
    list-style: none;
    margin-bottom: 0px;
    height: 51px;
    margin-right: 92px;
}
.header address div img {
    width: 38px;
}
.header address div a {
    font-size: 13px;
}
#menuToggle {
    width: 50%;
    display: block;
    position: relative;
    bottom: 69px;
    z-index: 99999;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    left: 0px;
}
#menu {
    height: 600px;
    position: absolute;
    width: 603px;
    margin: -100px 0 0 -50px;
    background: white;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
    transition: -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    padding-top: 42px;
    padding-left: 9px;
}
#menu li {
    color: #171b1e;
    font-family: Arial, Helvetica,
 padding: 10px 0;
    font-size: 1.5em;
    margin-left: 1%;
    text-align: center;
    line-height: 3em;
}
.nav .logo img {
    width: 22%;
}

.footer img {
    width: 52%;
}
.footer p {
    text-align: initial;
    margin-left: 118px;
    font-size: 16px;
}
.footer ul {
    padding-left: 0px;
    text-align: initial;
    margin-left: 120px;
}
.nav .logo img {
    width: 23%;
    /* margin-left: -1%; */
    margin-right: -4%;
}
}



/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
.header address div {
    list-style: none;
    margin-bottom: 0px;
    height: 51px;
    margin-right: 35px;
}

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 
    .header address div img {
    width: 21px;
}

.nav .logo img {
    width: 34%;
    /* margin-left: -1%; */
    margin-right: 0%;
}
#menu li {
    color: #171b1e;
    font-family: Arial, Helvetica,
 padding: 10px 0;
    font-size: 2em;
    margin-left: -19%;
    text-align: center;
    line-height: 3em;
}

}
}
/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 
.header address div {
    list-style: none;
    margin-bottom: 0px;
    height: 51px;
    margin-right: 111px;
}
.header address div img {
    width: 38px;
}
.nav .logo img {
    width: 37%;
    /* margin-left: -1%; */
    margin-right: -57px;
}


.footer img {
    width: 46%;
}
#menuToggle {
    width: 50%;
    display: block;
    position: relative;
    bottom: -39px;
    z-index: 99999;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    left: -295px;
}
}

/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 
#menuToggle {
    width: 50%;
    display: block;
    position: relative;
    bottom: 69px;
    left: 14px;
    z-index: 99999;
}
.header address div {
    list-style: none;
    margin-bottom: 0px;
    height: 51px;
    margin-right: 54px;
}
.nav .logo img {
    width: 34%;
    /* margin-left: -1%; */
    margin-right: 0%;
}

}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
#menuToggle {
    width: 50%;
    display: block;
    position: relative;
    bottom: -38px;
    z-index: 99999;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    left: -326px;
}
.nav .logo img {
    width: 34%;
    /* margin-left: -1%; */
    margin-right: -18%;
}
.header address div {
    list-style: none;
    margin-bottom: 0px;
    height: 51px;
    margin-right: 148px;
}


.footer img {
    width: 43%;
}


}


  


/* ----------- Galaxy S6 ----------- */
@media(max-width:360px){

#loadLess {margin-left: 29%;}
    .header address div {
    list-style: none;
    margin-bottom: 0px;
    height: 51px;
    margin-right: 33px;
}

    .header address div {
    list-style: none;
    margin-bottom: 0px;
    height: 51px;
    margin-right: 33px;
}
#menuToggle {
    width: 50%;
    display: block;
    position: relative;
    bottom: -38px;
    z-index: 99999;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    left: -304px;
}
}

/* ----------- iPad 3, 4 and Pro 9.7" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {
#menuToggle {
    width: 50%;
    display: block;
    position: relative;
    bottom: -36px;
    left: -229px;
    z-index: 99999;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.nav .logo a {
    margin-right: -94%;
}

.footer img {
    margin-top: 32px;
    width: 94%;
}

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {

.fond {
    width: 100%;
    height: 415px;
    float: left;
    background: url(../images/fond.jpg)no-repeat;
    background-size: 100%;
}
.info {
    width: 100%;
    height: 326px;
    float: left;
}
.footer img {
    width: 66%;
}
}


@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {

.footer p {
    padding-right: 33px;
    padding-top: 72px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    color: white;
    text-align: inherit;
    line-height: 1.4em;
}
.footer ul {
    padding-left: 0px;
    text-align: initial;
    margin-left: 54px;
    margin-top: 47px;
}
}

/* Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen 
  and (min-device-width: 1366px) 
  and (max-device-width: 1366px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {

}
/* ----------- laptop ----------- */

/* ----------- Non-Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
}

/* ----------- Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) { 
}
  s