@import url("reset.css");

/* ---------- Icons -----------*/

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

[class^="icon-"], [class*=" icon-"] {
   font-family: 'icomoon';
   speak: none;
   font-style: normal;
   font-weight: normal;
   font-variant: normal;
   text-transform: none;
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

.icon-design:before {
  content: "\e600";
}
.icon-house:before {
  content: "\e605";
}
.icon-commercial:before {
  content: "\e601";
}
.icon-misc:before {
  content: "\e602";
}
.icon-developement:before {
  content: "\e603";
}
.icon-arrow-left:before {
  content: "\e606";
}
.icon-twitter:before {
  content: "\e604";
}
.icon-facebook:before {
  content: "\e607";
}
.icon-googleplus:before {
  content: "\e608";
}
.icon-linkedin:before {
  content: "\e609";
}

/* ---------- Body Globals -----------*/
body {font-family: 'Raleway', sans-serif; font-size: 18px; color: #333537; background: #e2e5e8}
strong {font-weight: 700}

h1, h2, h3, h4 {font-weight: normal}
a {color: #333537}
   a:hover {text-decoration: none;}

h1 { font-weight: 700}
h2 {font-size: 1.4em; margin-bottom: .2em;  }
h2 a {color: inherit; text-decoration: none;}


.wrapper {max-width: 1100px; margin: 0 auto; padding: 0 2%}
.col-main {width: 65%; float: left;}
.sidebar {width: 25%; float: right}
@media only screen and (max-width : 760px)  {
  .col-main,
  .sidebar {width: auto; float: none;}
}

/* ---------- Top bar -----------*/
.top-bar {background: #26292c; color: #fff; padding: 1.2em 0; font-size: .8em}
.logo-link {padding-left: 52px; font-weight: bold}
.logo { position: absolute; top: -.3em; left: 0}
.logo-svg {fill: #EF2A79;}
.top-bar ul {position: relative; z-index: 20;}
.top-bar li {display: inline-block; padding-right: 2em}
.top-bar a {color: #fff; text-decoration: none;}
@media only screen and (max-width : 520px)  {
  .top-bar li.right {display: none}
  .top-bar li {padding-right: .5em}
     
}


.icon-cd svg {
  fill: #fff;
}



/* ---------- Header -----------*/

#header {background: #fff;} 
.home-hero {font-size: 1.2em; line-height: 1.5em; padding: 6% 0;}
.home-hero h1 {font-size: 3em; text-align: center; margin-bottom: 1em; position: relative; color: #ef2a79}
.home-hero h2 {margin-bottom: 1em; font-weight: 700; line-height:1.3; }
.home-hero p {margin-bottom: 1em;}

.home-hero h2 em {
  font-style:normal;
  color:orange;
}

.home-hero h2 strong {
  color:green;
}

/*anim h1*/
.home-hero h1 { 
  -webkit-animation-duration: 2s; 
          animation-duration: 2s; 
  -webkit-animation-fill-mode: both; 
          animation-fill-mode: both; 
  -webkit-animation-name: fadeInUp; 
          animation-name: fadeInUp; 
} 


.inner-header {padding: 2em 0;}
.inner-header h1 {font-size: 1.6em; color: #fff;}
.inner-header a {text-decoration: none; font-weight: bold}
.inner-header [class^="icon-"] {font-size: 1.4em; vertical-align: middle}

@media only screen and (max-width : 960px)  {
  body {font-size: 16px;}
  .home-hero {font-size: 1em;}
}

@media only screen and (max-width : 640px)  {
   .home-hero h1 {font-size: 1.2em;}
}


/* ---------- Menu -----------*/
#main-nav {font-size: 0; text-align: center; padding-top: 2%}
#main-nav ul {margin: 0 -5px; position: relative;}
#main-nav li {display: inline-block; width: 25%; padding: 0 5px; font-size: 21px; text-align: center}
#main-nav a {text-decoration: none; padding: 1.4em 0; color: #fff; display: block; border-radius: 2px;}
#main-nav [class^="icon-"] {display: block; position: relative; font-size: 1.8em; margin-bottom: .4em;  
-webkit-transition: all .2s ease-in-out;  -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out; -webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;-ms-backface-visibility: hidden; }
#main-nav a:hover [class^="icon-"] { -webkit-transform: scale(1.4); -moz-transform: scale(1.4); transform: scale(1.4); }

.background-developement {background: #ef2a79}
.background-design {background: #8e44ad}
.background-commercial {background: #f39c12}
.background-misc {background: #5299c7}

.color-developement {color: #ef2a79}
.color-design {color: #8e44ad}
.color-commercial {color: #f39c12}
.color-misc {color: #5299c7}

.sidebar #main-nav {padding: 0;} 
.sidebar #main-nav ul {margin: 0}
.sidebar #main-nav li {display: block; width: auto; padding: 0; margin-bottom: 1px;}
.sidebar  #main-nav [class^="icon-"] {display: inline-block; margin-right: .2em}


@media only screen and (max-width : 960px)  {
  #main-nav li {font-size: 16px;}
}    

@media only screen and (max-width : 640px)  {
  #main-nav ul {margin-top: 0;}
  #main-nav li {display: block; width: auto; margin-bottom: 1px; padding: 0}
}

/* ---------- Content -----------*/

#content {padding: 3% 0}
.job-list article { margin-bottom: 1em;}
.job-list h2 a {display: block; position:relative; padding: 1em; border-radius: 3px; background: #f7f8f8 url(../images/arr.svg) no-repeat 97% center; position: relative;   -webkit-transition: all .2s ease-in-out;  -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out;}
.job-list h2 a:hover {  background-position: 98% center;}
.job-list h2 small {font-size: .7em; display: block; color: #333537; margin-top: .4em}
   
@media only screen and (max-width : 640px)  {
  .job-list article { margin-bottom: 1px;}
}

.job-offer {line-height: 1.5em; font-size:16px;}
.job-offer p,
.job-offer ul {margin-bottom: 1em}
.job-offer h2 {margin-bottom: .5em; font-weight: bold;}

.job-offer ul li {margin-left: 1.2em}
.job-offer ul li:before { position: absolute; font-size: 1.2em; margin-left:-1.2em; content: "\2022"; width: 1em; text-align: center; color: #808487; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.apply {padding: 2em; border-radius: 3px; background: #f7f8f8; font-size: .8em; line-height: 1.5em; margin-bottom: 2em}
.apply h2 {margin-bottom: .5em; font-weight: bold}
.apply strong {white-space: nowrap;}

.share {margin-bottom: 2em}
.share ul {margin: 0 -2px;}
.share li {float: left; width: 50%; margin-bottom: 2px; text-align: center}
.share a {margin: 0 2px; display: block; font-size: 2em; text-decoration: none; padding: 1em 0; color: #fff; border-radius: 3px; -webkit-transition: all .2s ease-in-out;  -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out;}
.share a:hover {opacity: .9}

.share-googleplus {background: #d3492c}
.share-facebook {background: #33599f}
.share-twitter {background: #2aa9e0}
.share-linkedin {background: #02669a}

.message-info { padding:1em; border-radius: 3px; background: #f7f8f8; line-height: 1.5em; margin-bottom: 2em }
.message-info  strong {white-space: nowrap;}

/* ---------- Footer -----------*/

html {position: relative; min-height: 100%;}
body {margin: 0 0 42px;}
#footer {position: absolute; left: 0; bottom: 0; height: 42px; width: 100%; font-size: .7em}

.sep {padding: 0 .4em; opacity: .4}


/* ---------- Helpers -----------*/

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }  
.clearfix { zoom: 1;}


.left {float: left;}
.right {float: right;}


img.left {margin:0 20px 20px 0;}
img.right {margin:0 0 20px 20px;}

.text-left {text-align: left;}
.text-right {text-align: right;}
.text-center {text-align: center;}

.reset-top-margin {margin-top: 0 !important}
.reset-left-margin {margin-top: 0 !important}
.reset-right-margin {margin-right: 0 !important}
.reset-bottom-margin {margin-bottom: 0 !important}

/* ---------- Animations -----------*/
@-webkit-keyframes fadeInUp { 
  0% { 
    opacity: 0; 
    -webkit-transform: translateY(20px); 
  } 
  100% { 
    opacity: 1; 
    -webkit-transform: translateY(0); 
  } 
} 

@keyframes fadeInUp { 
  0% { 
    opacity: 0; 
    transform: translateY(20px); 
  } 
  100% { 
    opacity: 1; 
    transform: translateY(0); 
  } 
}