@font-face {
    font-family: 'Quicksand';
    font-weight: normal;
    font-style: normal;

}

 .pictogram {

     background-image: url('../img/cam.png');
     background-size: cover; 
     background-position: center;
     min-height: 80px;
     min-width: 80px;


}
   body, html {

      height: 100%;
      transition:all .2s linear; 
      -o-transition:all .2s linear; 
      -moz-transition:all .2s linear; 
      -webkit-transition:all .2s linear;

    }

    .header, .footer {

      background-color: #000;


    }

    .header .container, .about .container, .contact .container, .footer .container, .navigation .container {
      position: relative;
      z-index: 9;
    }

    .header {


      background-image: url('../img/header.jpg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      height: 500px

    }



    .navigation {

      background-color: #313131;
      padding-top: 10px;

    }



    .about {

      padding: 50px 0 80px 0;
      background-color: #F7FBFF;
      text-align: center;

    }

    .portfolio {


      padding: 50px 0 80px 0;
      background-color: #fff;



    }

    .contact {

      background-color: #3e4356;
      text-align: center;
      padding: 50px 0 40px 0;

    }




    #map {

        min-height: 400px ; 
        background-size: cover;
        background-position: center; 
        background-repeat: no-repeat;
        background-image: url('../img/map.jpg');


    }


    .welcome {

      padding: 10px 0 100px 0;
      text-align: center;
      height: 100%;

    }


    .welcome span {


      background-color: rgba(62, 67, 86, 0.7) ;
      padding: 5px 25px 5px 25px;

    }




    .welcome h1 {

      font-family: "Sacramento",cursive;
      font-weight: 400;
      font-size: 45px;
      color: #fff;
    }

    .welcome p {

      font-family: "Quicksand",sans-serif;
      font-weight: 300;
      font-size: 30px;
      color: #fff;
      line-height: 110%;
      margin-top : 50px;
    }


    .navigation a {

      font-family: "Quicksand",sans-serif;
      font-weight: 300;
      font-size: 14px;
      color: #fff;



    }

    .contact h1 {

      font-family: "Quicksand",sans-serif;
      font-weight: 400;
      font-size: 45px;
      color: #fff;




    }

    .contact p {

      font-family: "Open Sans",sans-serif;
      font-weight: 300;
      font-size: 14px;
      color: #fff;
      line-height: 135%;
      margin-top : 30px;


    }

   .about h1 {

      font-family: "Quicksand",sans-serif;
      font-weight: 400;
      font-size: 45px;
      color: #474747;
      margin-bottom: 30px;




    }

    .about p {

      font-family: "Open Sans",sans-serif;
      font-weight: 300;
      font-size: 14px;
      color: #2B2B2B;
      line-height: 135%;
      margin-top : 30px;


    }


   .portfolio h1 {

      font-family: "Quicksand",sans-serif;
      font-weight: 400;
      font-size: 45px;
      color: #474747;
      text-align: center;
      margin-bottom: 50px;


    }

    .portfolio p {

      font-family: "Open Sans",sans-serif;
      font-weight: 300;
      font-size: 14px;
      color: #000;
      line-height: 135%;
      text-align: center;


    }


    hr.soften {

      height: 1px;
      margin: 30px 0;
      background-image: -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,.1), rgba(255,255,255,0));
      background-image:    -moz-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,.1), rgba(255,255,255,0));
      background-image:     -ms-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,.1), rgba(255,255,255,0));
      background-image:      -o-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,.1), rgba(255,255,255,0));
      border: 0;
      color: #fff;

    }


    hr.soften-address {

      height: 1px;
      margin: 10px 0;
      background-image: -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,.1), rgba(255,255,255,0));
      background-image:    -moz-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,.1), rgba(255,255,255,0));
      background-image:     -ms-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,.1), rgba(255,255,255,0));
      background-image:      -o-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,.1), rgba(255,255,255,0));
      border: 0;
      color: #fff;

    }


    hr.soften-box {

      height: 1px;
      margin: 30px 0;
      background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
      background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
      background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
      background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
      border: 0;

    }

    .portfolio a {

      color: #fff;
      padding-top: 10px;
      font-family: "Quicksand";
      font-size: 14px;

    }

    .portfolio a:hover {

         color: #fff;

    }


    .btn-about {

      background-color: #142047;
      height:25px;
      padding: 5px 20px 1px 20px;
      color: #fff;

    }

    .btn-about:hover{

      background-color: #5c2157;
      color:#fff;
    }

      .box {
        background-color: #142047;
        min-height: 150px;
        margin-top: 30px;
        transition: all .8s;
        -moz-transition: all .8s; /* Firefox 4 */
        -webkit-transition: all .8s; /* Safari and Chrome */
        -o-transition: all .8s; /* Opera */
        cursor: hand; cursor: pointer;
      }

      .box:hover {

        opacity: 0.7;

      }
      .project1 {
        background-image: url('../img/project1_small.jpg');
        background-size: cover; 
        background-position: center;
        min-height: 250px;
      }
      .project2 {
        background-image: url('../img/project2_small.jpg');
        background-size: cover; 
        background-position: center;
        min-height: 250px;
      }
      .project3 {
        background-image: url('../img/project3_small.jpg');
        background-size: cover; 
        background-position: center;
        min-height: 250px;
      }
      .project4 {
        background-image: url('../img/project4_small.jpg');
        background-size: cover; 
        background-position: center;
        min-height: 250px;
      }
      .project5 {
        background-image: url('../img/project5_small.jpg');
        background-size: cover; 
        background-position: center;
        min-height: 250px;
      }
      .project6 {
        background-image: url('../img/project6_small.jpg');
        background-size: cover; 
        background-position: center;
        min-height: 250px;
      }
      .sticky{
        width: 100%;
        z-index: 100;
        opacity: 1;
      }
      .map-overlay {
        position:absolute;
        top: 20%;
        right: 20%;
        display:block;
        background-color: rgba(62, 67, 86, 0.9) ;
        color: #fff;
        z-index: 10;
        padding: 20px;
      }
      .map-overlay p {
        font-size: 14px; 
        font-family: "Open Sans", sans-serif ; 
        color: #fff;
      }
      .map-overlay a {
        font-size: 14px; 
        font-family: "Open Sans", sans-serif ; 
        color: #fff;
      }
      .map-overlay a:hover {
        font-size: 14px; 
        font-family: "Open Sans", sans-serif ; 
        color: #e4e4e4;
        text-decoration: none;
      }
      .main-slider {
        margin-bottom: 25px;
      }


    /* RESPONSIVE CSS
    -------------------------------------------------- */

    @media (max-width: 979px) {




    }


    @media (max-width: 767px){



      .header, .about, .footer, .contact, .portfolio, .navigation {
        margin-left: -20px;
        margin-right: -20px;
      }
      .header .container, .about .container, .contact .container, .footer .container, .portfolio .container, .navigation .container {
        margin-left: 10px;
        margin-right: 10px;
      }

      .header {

        height: 390px;
      }
      .about h1{font-size: 30px;}
      .about { padding: 20px 0 40px 0; }
      .contact { padding: 20px 0 40px 0; }
      .portfolio { padding: 20px 0 40px 0; }
      .header p {font-size: 50px;}
      .about p { font-size: 14px; }
      .welcome p{ font-size: 20px; }
      .contact p { font-size: 14px ; }
      .btn-custom { height:40px; }
      .btn-custom-success { height:40px; }

      .navbar .brand p {
        display: inline-block;
        vertical-align: bottom;
        font-size: 14px;
        font-family: "Open Sans", sans-serif;
        font-weight: 300;
        color: #fff;
      }

      .navigation { padding-top: 0px; }
      .contact h1 { font-size: 30px ; }
      .portfolio h1 { font-size: 30px ;}
      .map-overlay {
        position:absolute;
        top: 20%;
        right: 5%;
        left: 5%;
        display:block;
        background-color: rgba(62, 67, 86, 0.8) ;
        color: #fff;
        z-index: 10;
        padding: 20px;
      }


    }


      @media screen and (max-height:600px){

          .welcome {

            padding: 0px;


          }


      }



  .about img {

  
      padding: 0 10px 0 10px;

  }


  .desc1{

    text-align: left; margin-top: 50px;
    
  }


  .desc2{

    text-align: left; margin-top: 50px;

  }

  .header a:hover {

    color: #fff;
    text-decoration: none;
  }