@font-face {
    font-family: 'open_sanslight';
    src: url('../font/OpenSans-Light-webfont.eot');
    src: url('../font/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/OpenSans-Light-webfont.woff') format('woff'),
         url('../font/OpenSans-Light-webfont.ttf') format('truetype'),
         url('../font/OpenSans-Light-webfont.svg#open_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'gotham_black';
    src: url('../font/gotham_black.eot');
    src: url('../font/gotham_black.eot') format('embedded-opentype'),
         url('../font/gotham_black.woff2') format('woff2'),
         url('../font/gotham_black.woff') format('woff'),
         url('../font/gotham_black.ttf') format('truetype'),
         url('../font/gotham_black.svg#gotham_black') format('svg');
}



h1,h2,h3,h4,h4,h6 {font-family: 'gotham_black';}
p,a {font-family: 'open_sanslight';}
.left {text-align: left;}
.right {text-align:right;}


            /*----HEADER----*/
header {
/*    background: url("../img/headerBg4.jpg") no-repeat;*/
    background: url("../img/headerBg.jpg") no-repeat;
    background-attachment: fixed;
    background-position: center;
    width: 100%;
    height: auto;
    padding-top: 20px;
    padding-bottom: 40px;
}

#titlebar {
    position:fixed;
    background-color: #fff;
    padding: 10px;
    width: 100%;
    z-index: 1;
     -webkit-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
}
#title {
    text-align: center;
    padding: 200px 0;
}
#title h1 {
    color: #fff;
    padding-top: 50px;
    font-size: 70px;
    letter-spacing: -5px;
}
#titlebar ul {
    margin-top: 20px;
    text-align: right;
}
#titlebar li {
    display: inline;
    font-size: 12px;
    padding-right: 20px;
    border-right: 1px solid #3e3e3e;
}
#titlebar ul li a {
    color: #3e3e3e;
    font-family: 'gotham_black';
    margin-left: 20px;
    transition: all linear 0.5s;
}
#titlebar ul li a:hover {
    opacity: 0.5;
    transition: all linear 0.5s;
}

.sticky {
    transition: all 1s ease;
    -o-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    box-shadow: 0 8px 10px -6px #3e3e3e;
    -webkit-box-shadow: 0 8px 10px -6px #3e3e3e;
    -moz-box-shadow: 0 8px 10px -6px #3e3e3e;
    -o-box-shadow: 0 8px 10px -6px #3e3e3e;
    -msbox-shadow: 0 8px 10px -6px #3e3e3e;
}



            /*----INFO----*/
#info {
    padding: 150px 0;
    background: #fff;
}
#info h1 {
    font-size: 60px;
    color: #3e3e3e;
    line-height: 34px;
    letter-spacing: -5px;
    padding-top: 70px;
}
#info p {
    padding-top: 20px; 
    font-size: 17px;
    color: #3e3e3e;
    line-height: 25px;
}
.border {padding-left: 30px;}
.center {text-align: center;}



            /*----SERVICE----*/
#service {
/*    background-color: #ff4b50;*/
    background-blend-mode:darken;
    height: auto;
    padding: 150px 0;
    background: url("../img/headerBg5.jpg") no-repeat;
    background-attachment: fixed;
}
#service h1 {
    color:#fff;
    letter-spacing: -5px;
    padding-bottom: 20px;
    font-size: 60px;
}
#service h4 {
    color: #fff;
/*    line-height: 10px;*/
}
#service ul {text-align: right;}
#service ul li {list-style-type: none;}
#service  ul li a {
    position: relative;
/*    color: #fff;*/
    color: #3e3e3e;
    font-family: 'gotham_black';
    transition: all linear 0.5s
}
#service ul li a:hover {
    color: #fff;
    transition: all linear 0.2s
}
.last {
    padding-bottom: 40px;
}
#service p, .Spanel {
    color: #fff;
    font-weight: lighter;
    line-height: 25px;
    padding: 10px;
}
.Spanel {
    background: #3e3e3e;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    opacity: 0.8;
}
#panel3 ul {
    text-align: left; 
    font-family: 'open_sanslight';
    }
#panel3 ul li { list-style-type: none;}


            
            /*----CONTACT----*/
#contact {
    padding-top: 100px;
    padding-bottom: 50px;
    text-align: center;
}
#contact h1 {
    color:#ff4b50;
    letter-spacing: -5px;
    padding-bottom: 20px;
    font-size: 60px;
}
#contact .button, input[type="submit"] {
    font-family: 'gotham_black';
    background: transparent;
    border: 1px solid #ff4b50;
    color: #ff4b50;
/*    border-radius: 10px;*/
/*
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
*/
}
h6 {font-weight: lighter;}
#contact .button:hover,input[type="submit"]:hover {
    background: #ff4b50;
    color: #fff;
    cursor:pointer;
}
textarea {
    height: 100px;
    overflow-y: hidden;
}
input[type="text"]:focus, 
input[type="text"]:hover, 
textarea:hover, 
textarea:focus, 
input[type="email"]:focus,
input[type="email"]:hover {box-shadow: none; background: none;}
input[type="text"], 
input[type="email"], textarea {
    border-top:none;
    border-left:none;
    border-right:none;
    border-bottom: 1px solid #ff4b50;
    box-shadow: none;
}



            /*----FOOTER----*/
footer .columns {border-top: 1px solid #ff4b50;}
footer p {
    font-family: 'gotham_black';
    font-size: 10px;
    color:  #ff4b50;
}




            /*----FOR RESPONSIVE LAYOUT-----*/
@media only screen and (max-width: 64.063em){
    #info h1 {font-size: 50px;}
    #info p {font-size: 16px;}
}
@media only screen and (max-width: 40.063em) {
    .logo {text-align:center;}
    #menu {display: none;}
    #title {padding: 80px 0;}
    #title h1 { font-size: 40px; letter-spacing:-2px; line-height: 40px;}
    .divider {display: none;}
    #info {padding: 10px 0;}
    #info h1, #service h1, #contact h1 {font-size: 38px;line-height: 22px;}
    #info p {font-size: 15px;}
    #border {display: none;}
    #service ul {text-align: left;}
    footer {text-align: center;}
    #titlebar ul {display: none;}
}


/* 

    author : Axel Ilali
    mail : ilali.axel@gmail.com

*/