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

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

}

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

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

html,body {
    height:100%;
    margin:0;
    padding:0;
}

::selection {
    background: #EA9228;
    color: white;
}

::-moz-selection {
   background: #EA9228;
    color: white;
}

main {
    width: 980px;
    margin: 0 auto;
    padding: 0 22px 0 22px;
}

ul {
    list-style: none;
}

h1 {
    font-family: "bebas_neuebook", sans-serif;
    font-size: 72px;
    color: white;
    letter-spacing: 3px;
    font-weight: 100;
    text-align: right;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
}

h1 a {
    color: white;
    text-decoration: none;
}

.header_404 a {
    color: black;
}    

h2 {
    font-family: "open_sansregular", sans-serif;
    font-size: 24px;
    color: #EA9228;
    font-weight: 100;
    text-align: right;
    margin-bottom : 40px;
}

h3 {
    font-family: "pt_serifregular", serif;
    font-size: 36px;
    color: #3D3D3D;
}

h4 {
    font-family: "pt_serifregular", serif;
    font-size: 28px;
    color: #EA9228;
    margin-bottom: 25px;
}

h5 {
    font-family: "pt_serifregular", serif;
    font-size: 24px;
    color: #333333;
    text-align: left;
    margin-bottom: 30px;
    border-bottom: 2px dashed white;
    padding-bottom : 15px;
    width : 150px;
}

p {
    font-family: "open_sansregular", sans-serif;
}

a {
    text-decoration: none;
} 

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

blockquote {
    position: absolute;
    font-family: "pt_serifregular", serif;
    font-size: 36px;
    text-align: center;
    color: #3D3D3D;
    top: 215px;
    left: 50%;
    margin-left: -301px;
    -webkit-animation: blockquote 2s linear;
    
}

.header_content {
    width: 1024px;
    height: 688px;
    margin: 0 auto;
}

.header_content2 {
    position: absolute;
    margin-top: 393px;
    margin-left: 624px;
}

.header_content3 {
    position: absolute;
    margin-top: 105px;
    margin-left: 624px;
}

.boat {
    transition: all 0.1s ease-in-out;
}

.boat:hover {
    -webkit-filter: grayscale(1) contrast(1.7);
     -moz-filter: grayscale(1) contrast(1.7);
    transition: all 0.1s ease-in-out;
}

footer {
    display: block;
    width: 100%;
    background-color: #EA9228;
    overflow:hidden;
    text-align: center;
    padding: 30px 0px 20px 0px;
    color: white;
}

.grid_button {
    font-size: 20px;
    width: 30px;
    padding: 10px 10px 10px 10px;
    background-color: #EA9228;
    z-index: 100000;
    position: fixed;
    top: 0;
    right: 0;
    cursor: pointer;
    color: white;
    text-align: center;
}

.grid_button:hover {
    background-color: #424242;
}

.grid {
    background-image: url("img/grid.png");
    width: 1024px;
    min-height: 100%;
    position: fixed;
    left: 50%;
    margin-left: -512px;
    z-index: 99999;
        
}

.hide {
    display: none;
}
    



/*----------- HOME -----------*/

.header_home {
    background-image:url("img/home.jpg");
    background-attachment: fixed;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 2150px 688px;
    width: 100%;
    height: 688px;
    margin-bottom: 80px;
}



.rect {
    margin-left: 325px;
    position: absolute;
    top: 1149px;
  
}

#home_col2 {
    display: inline-block;
    margin-left: 200px;  
    width: 580px;
}

#home_col2 p {
    position: relative;
    font-size: 18px;
    line-height: 30px;
    width: 580px;
    display: inline-block;
    margin-top: 20px;
    text-align: center;
}

#home_col2 h3 {
    text-align: center;
}

#home_col2 ul {
    display: inline-block;
    margin-top: 20px;
    margin-left: 80px;
}

#home_col2 ul li {
    float:left; 
}

#home_col2 ul li a {
    display: block;
    color: white;
    margin-right: 20px;
    color: white;
    font-family: "open_sansregular", sans-serif;
    font-size: 18px;
    width: 200px;
    background-color: #EA9228;
    text-align: center;
    padding: 8px 0px 8px 0px;
    transition: all 0.2s ease-in-out;
    }

#home_col2 ul li a:hover {
    background-color: #424242;

}    

.home_main > h3 {
    text-align: center;
    margin-top: 80px;
    margin-bottom: 80px;
}

#Calque_1 {
    width: 780px;
    height: 270px;
    margin-left: 100px;
    margin-top: 180px;
}

#facebook:hover,#twitter:hover,#behance:hover,#linkedin:hover,#pinterest:hover{
    fill: #424242;
}

.home_col {
    background-color: #EAEAEA;
    width: 200px;
    float: left;
    margin-left: 80px;
    padding: 10px 0px 10px 20px;    
}

dt {
   font-family: "open_sansregular", sans-serif;
    font-size: 20px;
    color: black;
    margin-bottom: 5px;
}

dd {
    font-family: "open_sansitalic", sans-serif;
    font-size: 16px;
    color: black;
    margin-bottom: 20px;
}

.looking {
    width: 100%;
    background-color: #F6F6F6;
    border-top: 3px dashed #EA9228;
    margin-top: 500px;
}

.looking_content {
    width: 1024px;
    margin: 0 auto;  
}

.looking_col1{
    float: left;
    height: 650px;
    padding-top: 25px;
}

#looking_col2 {
    display: inline-block;
    width: 380px;
    background-color: white;
    padding: 20px 20px 20px 20px;
    margin-top: 40px;
    margin-left: 47px;   
}

#looking_col2 h3 {
    font-size: 32px;
    margin-bottom: 50px;
}

#looking_col2 p {
    font-family: "open_sansregular", sans-serif;
    font-size: 16px;
    line-height: 30px;
    width: 330px;
}

#looking_col2 a {
    display: block;
    width: 200px;
    background-color: #EA9228;
    text-align: center;
    padding: 8px 0 8px 0;
    color: white;
    text-decoration: none;
    font-size: 18px;
    line-height: normal;
    margin: 30px 0 30px 0;
    transition: all 0.2s ease-in-out;
}

#looking_col2 a:hover {
    background-color:#424242;
}

#plane {
    margin-top: 5px;
    margin-left: 180px;
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(1);
    transition: all 0.2s ease-in-out;
}

#plane:hover {
    -webkit-filter: grayscale(0);
    -moz-filter: grayscale(1);
}

.footer_content {
    margin: 0 auto;
    width: 1024px;
    padding: 0 22px 0 22px;
}

footer ul li a {
    text-decoration: none;
    color: white;
}

footer ul {
    text-align: left;
    line-height: 14px;
    font-family: "open_sansregular", sans-serif;
    font-size: 14px;
}

footer ul li ul li:hover {
    border-left: 2px solid white;
    padding-left: 10px;
    transition: all 0.2s ease-in-out;
}

footer ul li:first-child ul li:first-child:hover {
    border-left: 2px solid #0196BA;
}

footer ul li:first-child ul li:nth-child(2):hover {
    border-left: 2px solid #E75553;
}

footer ul li:first-child ul li:nth-child(3):hover {
    border-left: 2px solid #313C40;
}

footer ul li:first-child ul li:nth-child(4):hover {
    border-left: 2px solid #0C4174;
}

footer ul li:first-child ul li:nth-child(5):hover {
    border-left: 2px solid #A88260;
}

footer ul li:first-child ul li:last-child:hover {
    border-left: 2px solid #82AF3A;
}

footer ul li ul li {
    margin-bottom: 14px;
    transition: all 0.2s ease-in-out;
}
    

.list_footer > li {
    float:left;
    width: 200px;
}

.list_footer > li:first-child {
    margin-left: 100px;
}

footer p {
    margin-top: 55px;
    line-height: 30px;
}

footer p a {
    letter-spacing: 2px;
    text-transform: uppercase;
    padding-bottom: 5px;
}

footer p a:hover {
    border-bottom: 1px dashed white;
}

li.footer_p {
    width: 400px;
}
    


/*----------- WORK -----------*/

.header_work {
    background-image:url("img/work.jpg");
    background-attachment: fixed;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 2150px 688px;
    width: 100%;
    height: 400px;
}

.work_main {
    overflow: hidden;
}

.p_work {
    font-family: "open_sansregular", sans-serif;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    margin-top: 80px;
    margin-bottom: 80px;
}

.work_main ul li h3 {
    font-family: "open_sansregular", sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    transition: all 0.2s ease-in-out;
    padding-top: 10px;
    padding-bottom: 10px;
}

.work_main ul {
    width: 990px;
}

.work_main ul li {
    width: 326px;
    height: 326px;
    float: left;
    text-align: center;
    transition: all 0.2s ease-in-out;
}


.work_main ul li:nth-child(1) { background-image: url("img/mosa2.png"); transition: all 0.3s ease-in;}
.work_main ul li:nth-child(2) { background-image: url("img/mosa2.png"); background-position: -326px top; transition: all 0.3s ease-in;}
.work_main ul li:nth-child(3) { background-image: url("img/mosa2.png"); background-position: -652px top; transition: all 0.3s ease-in;}
.work_main ul li:nth-child(4) { background-image: url("img/mosa2.png"); background-position: 0px bottom; transition: all 0.3s ease-in;}
.work_main ul li:nth-child(5) { background-image: url("img/mosa2.png"); background-position: -326px bottom; transition: all 0.3s ease-in;}
.work_main ul li:nth-child(6) { background-image: url("img/mosa2.png"); background-position: -652px bottom; transition: all 0.3s ease-in;}

.work_main ul li:nth-child(1):hover { background-image: url("img/mosa.png"); transition: all 0.3s ease-in;}
.work_main ul li:nth-child(2):hover { background-image: url("img/mosa.png"); background-position: -326px top; transition: all 0.3s ease-in;}
.work_main ul li:nth-child(3):hover { background-image: url("img/mosa.png"); background-position: -652px top; transition: all 0.3s ease-in;}
.work_main ul li:nth-child(4):hover { background-image: url("img/mosa.png"); background-position: 0px bottom; transition: all 0.3s ease-in;}
.work_main ul li:nth-child(5):hover { background-image: url("img/mosa.png"); background-position: -326px bottom; transition: all 0.3s ease-in;}
.work_main ul li:nth-child(6):hover { background-image: url("img/mosa.png"); background-position: -652px bottom; transition: all 0.3s ease-in;}




.work_main ul li h3, .work_main ul li h4 {
    opacity: 0;
    background-color: white;
    transition: all 0.3s ease-in;
    margin-left: 70px;
    }

.work_main ul li h4 {
    font-family: "open_sansregular", sans-serif;
    font-size: 16px; 
    padding-bottom: 10px;
}

.work_main ul li:nth-child(1):hover h4,.work_main ul li:nth-child(2):hover h4,.work_main ul li:nth-child(3):hover h4,.work_main ul li:nth-child(4):hover h4,.work_main ul li:nth-child(5):hover h4,.work_main ul li:nth-child(6):hover h4,.work_main ul li:nth-child(1):hover h3,.work_main ul li:nth-child(2):hover h3,.work_main ul li:nth-child(3):hover h3,.work_main ul li:nth-child(4):hover h3,.work_main ul li:nth-child(5):hover h3,.work_main ul li:nth-child(6):hover h3 {
    opacity: 1;
    transition: all 0.3s ease-in;
    margin-left: 0px;
}

.work_main a {
    text-decoration: none;
}

.work_main ul li div {
    height: 326px;
    width: 326px;
    padding-top: 223px;
}

.further {
    position: relative;
    display: block;
    margin-top: 80px;
    margin-bottom: 80px;
    text-align: center;
}    

.further a {
    text-decoration: none;
    color: white;
    background-color: #EA9228;
    padding: 10px 20px 10px 20px;
    transition: all 0.2s ease-in-out;    
}

.further a:hover {
    background-color: #424242;
}

.work_header {
    margin-top: 40px;
    width: 980px;
}

.h3_work {
    font-family: 'pt_serifregular', serif;
    font-size: 36px;
    margin-top: 80px;
    color: #EA9228;
    border-bottom: 3px #EA9228 dashed;
    padding-bottom: 10px;
    padding-left: 100px;

}

.h4_work {
    font-family: "open_sansregular", sans-serif;
    text-transform: uppercase;
    font-size: 24px;
    color: #424242;
    margin-top: 40px;
    margin-left: 100px;

}

.p_work2 {
    text-align: left;
    margin-left: 100px;
    font-family: "open_sansregular", sans-serif;
    font-size: 18px;
    line-height: 30px;
    width : 720px;
}

.p_work2 a {
    color: #EA9228;
}

.p_work2 a:hover {
    border-bottom: 1px #EA9228 dashed ;
}

.ul_end li a{
    position: relative;
    display: block;
    margin-top: 80px;
    margin-bottom: 80px;
    text-align: center;
    float: left;
    font-family: "open_sansregular", sans-serif;
    width: 180px;
    background-color: #EA9228;
    padding: 10px 0px 10px 0px;
    transition: all 0.2s ease-in-out;
}

.ul_end {
    display: block;
    margin-left: 302px;
}

.ul_end li a:first-child {
    margin-right: 20px;
}

.ul_end a {
    text-decoration: none;
    color: white;
    padding: 10px 0px 10px 0px;
    width: 180px;  
    }

.ul_end li a:hover {
    background-color: #424242;
} 

.pairi {
    margin-left: 100px;
    margin-top: 40px;
    width: 780px;
}

#work_menu {
    width: 980px;
}

/*---------- CASE STUDIES---------- */

.header_case {
    background-image:url("img/casestudies.jpg");
    background-attachment: fixed;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 2150px 688px;
    width: 100%;
    height: 400px;
}

.case_main {
    width: 980px;
}

.h5_case {
    font-family: "open_sansregular", sans-serif;
    text-transform: uppercase;
    font-size: 18px;
    color: #EA9228;
    margin-top: 40px;
    margin-left: 100px;
    margin-bottom: 20px;
}

#team {
    margin-left: 152px;
}

.case_img {
    margin-top: 40px;
    margin-left: 100px;
    margin-bottom: 40px;
    width: 780px;
}

.case_main a {
    text-decoration: none;
}

.case_link {
    font-family: "open_sansregular", sans-serif;
    margin-bottom: 0px;
    margin-bottom: 80px;
}

.top {
    background-image: url("img/top.png");
    background-repeat: no-repeat;
    height: 58px;
    background-position: top left;
    text-align: center;
    padding-top: 30px;
    font-family: "open_sansregular", sans-serif;
    width: 78px;
    position: fixed;
    bottom : 248px;
    margin-left: 900px;    
}

.top:hover {
    background-position: top right;
}

.top a {
     text-decoration: none;
    color: white;
}

/*---------- 404 ----------*/

.main_404 h3 {
    margin-bottom: 40px;
}

.main_404 ul {
    margin-top: 40px;
}

.main_404 ul li {
    float: left;
    margin-right: 20px;
    margin-bottom: 40px;
    background-color: #EA9228;
     transition: all 0.2s ease-in-out;
}

.main_404 ul li:last-child {
    margin-left: 0;
}

.main_404 ul li a {
    display: block;
    text-decoration: none;
    color: white;
    width: 180px;
    font-family: "open_sansregular", sans-serif;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;    
}

.main_404 ul li:hover  {
    background-color: #424242;   
}

.header_404 {
    background-image:url("img/404.jpg");
    background-attachment: fixed;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 2150px 688px;
    width: 100%;
    height: 400px;
    margin-bottom: 80px;
}

.header_404 h1 {
    color: black;
}

/*---------- Credits ----------*/

.header_credits {
    background-image:url("img/home.jpg");
    background-attachment: fixed;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 2150px 688px;
    width: 100%;
    height: 400px;
    margin-bottom: 80px;
}

.p_credits {
    line-height: 30px;
    margin-left: 100px;
    width: 800px;
}

.p_credits a {
    color: #EA9228;
}

.p_credits a:hover {
    border-bottom: 1px #EA9228 dotted;
}

.ul_credits {
    margin-left: 100px;
    font-family: "open_sansregular", sans-serif;
    margin-bottom: 80px;
}

.ul_credits a {
    color: #EA9228;
    text-decoration: none;
}

.ul_credits a:hover {
    border-bottom: 1px #EA9228 dashed ;
}

.ul_credits li {
    margin-top: 20px;
}

/*------------ Privacy ----------*/

.header_privacy {
    background-image:url("img/home.jpg");
    background-attachment: fixed;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 2150px 688px;
    width: 100%;
    height: 400px;
    margin-bottom: 80px;
}

.last_p_credits {
    margin-bottom: 80px;
}

/* ---------- CONTACT ----------*/

.header_contact {
    background-image:url("img/contact.jpg");
    background-attachment: fixed;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 2150px 688px;
    width: 100%;
    height: 400px;
    margin-bottom: 80px;
}

#container_form {
    width : 816px;
    border: 3px #EA9228 dashed;
    padding: 40px 80px 40px 80px;
    font-family: "open_sansregular", sans-serif;
    line-height : 40px; 
    float: left;
    margin-bottom : 80px;
}

input  {
    border: none;
    border-bottom: 1px #EA9228 dashed;
     font-family: "open_sansregular", sans-serif;
    font-size: 16px;
    color : #EA9228;
}

#input_email {
    width: 250px;
}

textarea {
    width : 400px;
    height : 200px;
     font-family: "open_sansregular", sans-serif;
    font-size: 16px;
    color : #EA9228;
    padding: 10px 10px 10px 10px;
}

form {
    width: 550px;
    display: block;
    float: left;
}

#timbre img {
    width: 250px;
}

#timbre {
    width: 250px;
    float:right;
}

#adress {
    margin-top: 80px;
    border-left: 1px solid #EA9228;
    width: 200px;
    float: right;
    padding-left: 60px;
    height: 200px;
}

#adress p a {
    color: #EA9228;
    text-decoration: none;
}

#adress p a:hover {
    border-bottom: 1px dashed #EA9228;
}

#container_form #adress p {
    font-family: 'open_sansitalic', sans-serif;
}

#feedback {
    display: inline-block;
}

#bouton {
    background-image: url("img/plane.png");
    background-repeat: no-repeat;
    width: 56px;
    height: 50px;
    background-color: transparent;
    border: none;
    padding-left: 60px;
    margin-top: 40px;
    margin-left: 170px;
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(1);
    -o-filter: grayscale(1);
    -ms-filter: grayscale(1);
}

#bouton:hover {
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
    -moz-filter: grayscale(0);
    -o-filter: grayscale(0);
    -ms-filter: grayscale(0);
    cursor: pointer;
}


#input_cadre {
    margin-left: 10px;
    margin-right: 10px;
}

.p_thanks {
    margin-left: 100px;
    width: 320px;
    margin-top: 40px;
    line-height: 30px;
}

.ul_thanks {
    margin-top: 40px;
    margin-bottom: 120px;
}



.ul_thanks li a:hover {
    background-color: #424242;
}

.ul_thanks li:first-child {
    margin-left: 80px;
}

.ul_thanks li a {
    text-decoration: none;
    color: white;
    font-family: "open_sansregular", sans-serif;
    text-align: center;
    width: 180px;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #EA9228;
    text-align: center;
    float: left;
    margin-left: 20px;
    transition: all 0.2s ease-in-out;
}

#feedback li {
    color: #E5650E;
}

#feedback {
    margin-top: 40px;
}

form input:focus {
    outline: 0;
}

form textarea:focus {
    outline: 0;
}



/* RECAP */

#ul_tfa {
    position: relative;
    left: 50%;
    margin-left: -110px;
    width: 200px;
}

#ul_tfa li a {
    text-decoration: none;
    color: white;
    font-family: "open_sansregular", sans-serif;
    text-align: center;
    width: 220px;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #EA9228;
    text-align: center;
    float: left;
    transition: all 0.2s ease-in-out;
    margin-bottom: 20px;
}

#ul_tfa li:last-child a {
    margin-bottom: 80px;
}



#ul_tfa li a:hover {
    background-color: #424242;
    color: white;
}

/* Personnas */

#h1_personnas {
    color: black;
    font-size: 36px;
    text-align: center;
    margin-top: 80px;
    border-bottom: 2px #EA9228 dashed; 
    padding-bottom: 20px;    
}

.h2_personnas {
    font-family: "open_sansregular", sans-serif;
    font-size: 24px;
    color: #EA9228;
    font-weight: 100;
    text-align: left;
    margin-bottom : 40px;
    margin-top: 40px;
}

#main_personnas {
    width: 980px;
    position: relative;
    left: 50%;
    margin-left: -512px;
}

#main_personnas ul li img {
    width: 200px;
    border: 2px #EA9228 solid;
}

#main_personnas ul li {
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
}

#main_personnas ul li:last-child {
    float:none;
}

#main_personnas ul li img:hover {
    border: 2px dashed #EA9228;
}

/* MAIL */

#mail {
    border: 1px #EA9228 solid ;
    margin-left: 212px;
    margin-top: 40px;
    margin-bottom: 40px;
        
    
}