/* =============================================================================
1. General Styles
2. Page loading animation
3. Template
4. Site Header (Left Menu)
5. Site Content
6. Subpages
  6.1 Home
  6.2 ABbout Me
  6.3 Resume
  6.4 Portfolio
  6.5 Prestations
  6.6 Contact
7. Single Page
8. Media Queries 

============================================================================= */

/* ============================================================================= 
1. GENERAL STYLES
============================================================================= */
html
{
  height: 100%;
}

body
{
  font-family: 'Inconsolata', monospace;
  color: #555;
  margin: 0;
  height: 100%;
  font-size: 17px;
  line-height: 1.5em;
}

::selection
{
  color: #FFF;
  background: #FF6600;
}

h1, h2, h3, h4, h5, h6
{
  color: #222;
  font-family: 'Share Tech Mono', monospace;
  font-weight: 700;
  line-height: 1.5em;
  margin-top: 0;
  margin-bottom: 10px;
}

p
{
  margin: 0 0 10px;
  font-weight: 300;
}

a
{
  color: #FF6600;
  text-decoration: none;
  outline: none;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

a:hover
{
  color: rgba(255, 102, 0, 0.7);
  text-decoration: none;
  outline: none;
}

a:focus
{
  outline: 0;
}

.color
{
  color: #FF6600 !important;
}

.txt-shadow
{
  text-shadow: 5px 0px 5px rgba(15, 15, 15, 1);
}

span.bold
{
  font-weight: bold;
}

span.underline
{
  text-decoration: underline;
}

span.underline-color
{
  text-decoration: underline;
  text-decoration-color: #FF6600 !important;
}

span.italic
{
  font-style: italic;
}

.justify
{
  text-align: justify;
}

.left
{
  text-align: left;
}

.uppercase
{
  text-transform: uppercase;
}

.mg-bt-0
{
  margin-bottom: 0 !important;
}

.font18
{
  font-size: 18px;
}

.font20
{
  font-size: 20px;
}

.font22
{
  font-size: 22px;
}

.margin-10
{
  margin-left: -10px;
}

.center
{
  text-align: center;
}

.btn
{
  border-radius: 0;
}

.page
{
  position: relative;
  height: 100%;
}

.mobile-visible
{
  display: none;
  visibility: hidden;
}

.mobile-hidden
{
  display: block;
  visibility: visible;
}

/* Custom Scroll */
.mCSB_inside>.mCSB_container {
  margin-right: 0;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #FF6600;
  opacity: 1;
  border-radius: 0;
}

.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger:focus .mCSB_dragger_bar {
  background-color: #FF6600;
  opacity: 1;
}

.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #E5E5E5;
}
/* END Custom Scroll */

.subpage-block
{
  margin-bottom: 30px;
}

.text-rotation
{
  display: block;
}

.border-block-top-40
{
  display: inline-block;
  position: absolute;
  background: transparent;
  width: 40px;
  height: 40px;
  border-top: 2px solid #FF6600;
  border-left: 2px solid #FF6600;
  left: 0;
  top: 0;
  z-index: 0;
}

.border-block-bottom-40
{
  display: inline-block;
  position: absolute;
  background: transparent;
  width: 40px;
  height: 40px;
  border-bottom: 2px solid #FF6600;
  border-right: 2px solid #FF6600;
  right: 0;
  bottom: 0;
  z-index: 0;
}

.border-block-bottom-60
{
  display: inline-block;
  position: absolute;
  background: transparent;
  width: 60px;
  height: 60px;
  border-bottom: 2px solid #FF6600;
  border-right: 2px solid #FF6600;
  right: 0;
  bottom: 0;
  z-index: 0;
}

.border-block-top-110
{
  display: inline-block;
  position: absolute;
  background: transparent;
  width: 110px;
  height: 110px;
  border-top: 3px solid #FF6600;
  border-left: 3px solid #FF6600;
  left: 20px;
  top: 10px;
  z-index: 0;
}

/* ============================================================================= 
2. PAGE LOADING ANIMATION
============================================================================= */
.preloader
{
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: #222;
}

.loader
{
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  animation: rotatePreloader 2s infinite ease-in;
}

@keyframes rotatePreloader
{
  0% {
    transform: translateX(-50%) translateY(-50%) rotateZ(0deg);
  }
  100% {
    transform: translateX(-50%) translateY(-50%) rotateZ(-360deg);
  }
}

.loader div
{
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.loader div:before
{
  content: "";
  position: absolute;
  left: 50%;
  top: 0%;
  width: 10%;
  height: 10%;
  background-color: #FF6600;
  transform: translateX(-50%);
  border-radius: 50%;
}

.loader div:nth-child(1)
{
  transform: rotateZ(0deg);
  animation: rotateCircle1 2s infinite linear;
  z-index: 9;
}

@keyframes rotateCircle1
{
  0% {
    opacity: 0;
  }
  0% {
    opacity: 1;
    transform: rotateZ(36deg);
  }
  7% {
    transform: rotateZ(0deg);
  }
  57% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-324deg);
    opacity: 1;
  }
}

.loader div:nth-child(2)
{
  transform: rotateZ(36deg);
  animation: rotateCircle2 2s infinite linear;
  z-index: 8;
}

@keyframes rotateCircle2
{
  5% {
    opacity: 0;
  }
  5.0001% {
    opacity: 1;
    transform: rotateZ(0deg);
  }
  12% {
    transform: rotateZ(-36deg);
  }
  62% {
    transform: rotateZ(-36deg);
  }
  100% {
    transform: rotateZ(-324deg);
    opacity: 1;
  }
}

.loader div:nth-child(3)
{
  transform: rotateZ(72deg);
  animation: rotateCircle3 2s infinite linear;
  z-index: 7;
}

@keyframes rotateCircle3
{
  10% {
    opacity: 0;
  }
  10.0002% {
    opacity: 1;
    transform: rotateZ(-36deg);
  }
  17% {
    transform: rotateZ(-72deg);
  }
  67% {
    transform: rotateZ(-72deg);
  }
  100% {
    transform: rotateZ(-324deg);
    opacity: 1;
  }
}

.loader div:nth-child(4)
{
  transform: rotateZ(108deg);
  animation: rotateCircle4 2s infinite linear;
  z-index: 6;
}

@keyframes rotateCircle4
{
  15% {
    opacity: 0;
  }
  15.0003% {
    opacity: 1;
    transform: rotateZ(-72deg);
  }
  22% {
    transform: rotateZ(-108deg);
  }
  72% {
    transform: rotateZ(-108deg);
  }
  100% {
    transform: rotateZ(-324deg);
    opacity: 1;
  }
}

.loader div:nth-child(5)
{
  transform: rotateZ(144deg);
  animation: rotateCircle5 2s infinite linear;
  z-index: 5;
}

@keyframes rotateCircle5
{
  20% {
    opacity: 0;
  }
  20.0004% {
    opacity: 1;
    transform: rotateZ(-108deg);
  }
  27% {
    transform: rotateZ(-144deg);
  }
  77% {
    transform: rotateZ(-144deg);
  }
  100% {
    transform: rotateZ(-324deg);
    opacity: 1;
  }
}

.loader div:nth-child(6)
{
  transform: rotateZ(180deg);
  animation: rotateCircle6 2s infinite linear;
  z-index: 4;
}

@keyframes rotateCircle6
{
  25% {
    opacity: 0;
  }
  25.0005% {
    opacity: 1;
    transform: rotateZ(-144deg);
  }
  32% {
    transform: rotateZ(-180deg);
  }
  82% {
    transform: rotateZ(-180deg);
  }
  100% {
    transform: rotateZ(-324deg);
    opacity: 1;
  }
}

.loader div:nth-child(7)
{
  transform: rotateZ(216deg);
  animation: rotateCircle7 2s infinite linear;
  z-index: 3;
}

@keyframes rotateCircle7
{
  30% {
    opacity: 0;
  }
  30.0006% {
    opacity: 1;
    transform: rotateZ(-180deg);
  }
  37% {
    transform: rotateZ(-216deg);
  }
  87% {
    transform: rotateZ(-216deg);
  }
  100% {
    transform: rotateZ(-324deg);
    opacity: 1;
  }
}

.loader div:nth-child(8)
{
  transform: rotateZ(252deg);
  animation: rotateCircle8 2s infinite linear;
  z-index: 2;
}

@keyframes rotateCircle8
{
  35% {
    opacity: 0;
  }
  35.0007% {
    opacity: 1;
    transform: rotateZ(-216deg);
  }
  42% {
    transform: rotateZ(-252deg);
  }
  92% {
    transform: rotateZ(-252deg);
  }
  100% {
    transform: rotateZ(-324deg);
    opacity: 1;
  }
}

.loader div:nth-child(9)
{
  transform: rotateZ(288deg);
  animation: rotateCircle9 2s infinite linear;
  z-index: 1;
}

@keyframes rotateCircle9
{
  40% {
    opacity: 0;
  }
  40.0008% {
    opacity: 1;
    transform: rotateZ(-252deg);
  }
  47% {
    transform: rotateZ(-288deg);
  }
  97% {
    transform: rotateZ(-288deg);
  }
  100% {
    transform: rotateZ(-324deg);
    opacity: 1;
  }
}

.loader div:nth-child(10)
{
  transform: rotateZ(324deg);
  animation: rotateCircle10 2s infinite linear;
  z-index: 0;
}

@keyframes rotateCircle10
{
  45% {
    opacity: 0;
  }
  45.0009% {
    opacity: 1;
    transform: rotateZ(-288deg);
  }
  52% {
    transform: rotateZ(-324deg);
  }
  102% {
    transform: rotateZ(-324deg);
  }
  100% {
    transform: rotateZ(-324deg);
    opacity: 1;
  }
}

/* ============================================================================= 
3. TEMPLATE
============================================================================= */
.template-style-dark p
{
  color: #E5E5E5;
}

.template-style-dark .pt-page
{
  background-color: #222;
}

.template-style-dark .pt-page.section-without-bg
{
  background-color: transparent;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.template-style-dark ul.social-links li a
{
  display: inline-block;
  margin: 0 1px;
  width: 44px;
  height: 44px;
  color: #E5E5E5;
  background-color: transparent;
  border: 1px solid #555;
  text-align: center;
}

.template-style-dark ul.social-links li a:hover
{
  color: #FFF;
  background-color: #FF6600;
  border-color: transparent;
}

.template-style-dark h1,
.template-style-dark h2,
.template-style-dark h3,
.template-style-dark h4,
.template-style-dark h5,
.template-style-dark h6
{
  color: #FFF;
}

.template-style-dark .section-title
{
  color: #E5E5E5;
}

.template-style-dark .info-list li .title
{
  color: #FFF;
}

.template-style-dark .info-list li .value
{
  color: #EEE;
}

/* Cookies */
#cookie
{
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 5px;
  z-index: 9999;
  width: 100%;
  background-color: #FF6600;
  color: #FFF;
  line-height: 1em;
}

#link_cookie
{
  background: #222;
  padding: 5px 10px;
  margin: 0;
  border: 0;
}
/* END Cookies */

/* ============================================================================= 
4. SITE HEADER (Left Menu)
============================================================================= */
.header
{
  position: fixed;
  width: 200px;
  height: 100%;
  background-color: #222;
  overflow: auto;
  -webkit-box-shadow: 0 1px 10px rgba(0,0,0,0.2);
  -moz-box-shadow: 0 1px 10px rgba(0,0,0,0.2);
  box-shadow: 0 1px 10px rgba(0,0,0,0.2);
  z-index: 10;
}

.my-photo
{
  position: relative;
  margin: 25px auto 10px;
  max-width: 80px;
  text-align: center;
  z-index: 0;
}

.my-photo img
{
  position: relative;
}

.my-photo .img_logo
{
  vertical-align: bottom;
  max-width: 100%;
  height: auto;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

.site-title-block
{
  position: relative;
  z-index: 1;
  margin: 25px 0px 5px;
  text-align: center;
}

.site-title
{
  color: #FF6600 !important;
  font-size: 24px;
  line-height: 1.2em;
  margin: 0 0 12px;
}

.site-citation
{
  font-size: 18px;
  line-height: 1.2em;
  margin-bottom: 0;
  font-family: 'Share Tech Mono', monospace;
  text-align: center;
  color: #E5E5E5;
}

/* Mobile Site Title */
.mobile-header
{
  position: fixed;
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #eee;
  background-color: #fff;
  z-index: 1000;
}

.mobile-logo-container
{
  margin: 0 20px;
  text-align: left;
}

.mobile-site-title
{
  display: inline-block;
  float: left;
  font-size: 18px;
  font-weight: 400;
  font-family: 'Share Tech Mono', monospace;
  margin: 0;
  line-height: 50px;
  color: #E5E5E5;
}
/* END Mobile Site Title */

.site-main
{
  height: 100%;
  margin-left: 150px;
  position: relative;
  background-color: #313131;
}

/* Main Menu */
.site-nav
{
  display: block;
  padding: 25px 0 30px;
}
.site-main-menu
{
  display: block;
  padding: 0;
  margin: 0;
  font-family: 'Share Tech Mono', monospace;
}

.site-main-menu li
{
  display: block;
  position: relative;
  padding: 0;
  text-align: center;
}

.site-main-menu li a,
.site-main-menu li a:hover
{
  display: block;
  position: relative;
  padding: 10px 20px;
  text-align: center;
  color: #FFF;
  font-size: 17px;
  font-weight: 400;
  position: relative;
  text-decoration: none;
  outline: none;
  opacity: 0.6;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.site-main-menu li:first-child a
{
  border-top: 1px solid rgba(255,255,255,0.12);
}

.site-main-menu li a:hover,
.site-main-menu li.active a
{
  background-color: transparent;
  opacity: 1;
}

.site-main-menu li a:after
{
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  content: '';
  width: 0;
  height: 100%;
  margin: 0 auto;
  background-color: #FF6600;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.site-main-menu li a:hover:after,
.site-main-menu li.active a:after
{
  width: 3px;
}

.menu-icon
{
  display: block;
  font-size: 21px;
  margin-bottom: 3px;
  text-align: center;
}
/* END Main Menu */

/* Social Links */
.header .social-links
{
  display: inline-block;
  position: relative;
  width: 100%;
  list-style: none;
  margin: 0;
  margin-bottom: 10px;
  padding: 0;
  text-align: center;
}

.header .social-links a
{
  display: inline-block;
  margin: 0 2px;
  width: 28px;
  height: 28px;
  color: #AAA;
  background-color: #313131;
  text-align: center;
}

.header .social-links a:hover
{
  background-color: #FF6600;
}

.header .social-links a i
{
  font-size: 14px;
  line-height: 28px;
}

.header .social-links a:hover i
{
  color: #FFF;
}

.header .copyrights
{
  width: 100%;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 5px 10px 15px;
  line-height: 16px;
  font-size: 14px;
  text-align: center;
  color: #AAA;
  font-family: 'Share Tech Mono', monospace;
}
/* END Social Links */

.menu-toggle
{
  display: block;
  width: 50px;
  margin: 0 4px;
  line-height: 50px;
  height: 50px;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  float: right;
}

.menu-toggle i
{
  color: #FF6600;
  font-size: 21px;
  line-height: 50px;
}

/* Arrows Nav */
.lmpixels-arrows-nav
{
  position: absolute;
  bottom: 10px;
  right: 15px;
  z-index: 100;
}

.lmpixels-arrows-nav > div
{
  display: inline-block;
  padding: 0;
  height: 40px;
  width: 40px;
  text-align: center;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.lmpixels-arrows-nav > div:first-child
{
  margin-right: 1px;
}

.lmpixels-arrows-nav > div i
{
  line-height: 40px;
  height: 40px;
  margin-top: -1px;
  font-size: 40px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.lmpixels-arrows-nav > div:hover i
{
  color: #FF6600;
}
/* END Arrows Nav */

/* ============================================================================= 
5. SITE CONTENT
============================================================================= */
/* Section title */
.section-title-block
{
  position: relative;
  margin-bottom: 40px;
  text-align: center;
}

.section-title-wrapper
{
  display: inline-block;
  position: relative;
  text-align: right;
}

.section-title
{
  display: block;
  width: 100%;
  position: relative;
  margin: 12px 0 0;
  font-size: 60px;
  line-height: 1.1em;
  color: #EEE;
  z-index: 1;
}

.section-description
{
  display: inline-block;
  position: relative;
  margin: 0;
  color: #FFF;
  background-color: #FF6600;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 200;
  text-align: center;
  z-index: 2;
}

.block-title h3
{
  display: inline-block;
  position: relative;
  margin: 0 0 20px;
  padding: 0;
}

.block-title h3:after
{
  content: '';
  display: block;
  position: absolute;
  width: 2px;
  height: 100%;
  left: -10px;
  bottom: 0;
  background-color: #FF6600;
}

/* ============================================================================= 
6. SUBPAGES
============================================================================= */
.pt-wrapper
{
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  padding: 25px 5%;
  background-image: url(../images/background.png);
  background-color: #313131;
  background-attachment: fixed;
  background-position: 50%;
  background-size: cover;
  -webkit-background-size: cover;
  background-attachment: scroll;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.subpages
{
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  max-width: 1500px;
  -webkit-perspective: 1500px;
  -moz-perspective: 1500px;
  perspective: 1500px;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

.pt-page
{
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0;
  top: auto;
  padding: 10px 0;
  left: 0;
  background-color: #fff;
  overflow: hidden;
  visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-box-shadow: 0 1px 33px rgba(0,0,0,0.15);
  -moz-box-shadow: 0 1px 33px rgba(0,0,0,0.15);
  box-shadow: 0 1px 33px rgba(0,0,0,0.15);
}

.pt-page-current, .no-js .pt-page
{
  overflow: auto;
}

.pt-page .section-inner
{
  position: relative;
  padding: 20px 60px 50px;
}

.no-js .pt-page
{
  position: relative;
}

.pt-page-content
{
  position: absolute;
  width: 100%;
}

.pt-page-current,
.no-js .pt-page
{
  visibility: visible;
  z-index: 90;
  opacity: 1;
  overflow: hidden;
  height: 100%;
  min-height: 100%;
}

.pt-page.pt-page-current .portfolio-grid
{
  display: block;
}

.no-js .pt-page *
{
  height: auto;
}

.no-js body
{
  overflow: auto;
}

/* =======================================
6.1. Home subpage
======================================= */
.home-page-block
{
  position: relative;
  display: block;
  width: 100%;
  z-index: 1;
}

.home-page-block h1
{
  color: #FF6600;
  text-align: center;
  font-size: 70px;
  margin: 0;
}

.home-page-description
{
  color: #FFF;
  font-size: 25px;
  font-weight: 300;
  font-family: 'Share Tech Mono', monospace;
  margin: 0 0 5px;
  text-align: center;
}

.home-page-scramble
{
  color: #E5E5E5;
  font-size: 40px;
  font-weight: bold;
  font-family: 'Share Tech Mono', sans-serif;
  text-align: center;
  margin-top: 4%;
  height: 50px;
}

/* =======================================
6.2. About Me subpage
======================================= */
/* About me list */
.info-list
{
  list-style: none;
  margin: 0;
  padding: 10px 0 0;
}

.info-list li
{
  padding: 10px 0;
  font-size: 18px;
}

.info-list li:first-child
{
  padding-top: 0;
}

.info-list li .title
{
  display: inline-block;
  font-family: 'Share Tech Mono', monospace;
  font-weight: 700;
  margin-right: 12px;
  color: #222;
}

.info-list li .title:after
{
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    margin-top: -3px;
    background-color: #FF6600;
}

.info-list li .value
{
  font-family: 'Inconsolata', monospace;
  min-width: 250px;
}

ul.social-links
{
  display: block;
  list-style: none;
  margin: 25px 0 5px;
  padding: 0;
  text-align: left;
}

ul.social-links li
{
  display: inline-block;
  margin: 0 0 10px;
  padding: 0;
}

ul.social-links li a
{
  display: inline-block;
  margin: 0 1px;
  width: 34px;
  height: 34px;
  color: #555;
  background-color: transparent;
  border: 1px solid #E5E5E5;
  text-align: center;
}

ul.social-links li a:hover
{
  color: #FFF;
  background-color: #FF6600;
  border-color: transparent;
}

ul.social-links li a i
{
  font-size: 28px;
  line-height: 42px;
}

ul.social-links li:last-child a
{
  margin-right: 0;
}
/* END About me list */

/* Services */
.service-block
{
  text-align: center;
}

.service-block img
{
  max-width: 100px;
  max-height: 74px;
  margin: 0 0 18px;
}

.service-icon
{
  font-size: 60px;
  color: #FF6600;
  margin: 5px 0 18px;
}
/* END Services */

/* Clients */
.client-block
{
  text-align: center;
  padding: 5px 0;
  opacity: 0.4;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.client-block:hover
{
  opacity: 1;
}

.client-block img
{
  max-width: 80px;
}
/* END Clients */

/* =======================================
6.3. Resume subpage
======================================= */
/* Timeline  */
.timeline
{
  position: relative;
  border-left: 1px solid #282828;
  padding-bottom: 50px;
}
  
.timeline-event
{
  position: relative;
  padding-left: 20px;
  padding-bottom: 20px;
}
  
.timeline-event:last-child
{
  padding-bottom: 0px;
}

.timeline-event > *
{
  display: block;
}
  
.event-date
{
  display: inline-block;
  position: relative;
  color: #fff;
  font-weight: 300;
  line-height: 1.1em;
  margin: 0 0 3px;
  background-color: #FF6600;
  padding: 5px 8px 5px 20px;
  margin-left: -20px;
}

.event-name
{
  margin: 10px 0 0 -12px;
}

.event-description a
{
  color: #818181;
  margin: 0 0 0 -10px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.45em;
}
/* END Timeline */

/* Skills */
.skills-info
{
  margin-bottom: 30px;
}

.skills-info h4
{ 
  font-size: 0.8em;
  line-height: 1.1em;
  position: relative; 
  margin: 0 0 5px;
}

.skill-main-container
{
  margin: 6px auto 20px;
  height: 25px;
  border-radius: 4px;
  font-family: sans-serif;
  font-weight: normal;
  font-size: 0.8em;
  color: #FF6600;
}

.skill-container
{
  float: right;
  border-radius: 10px;
  border: 1px solid #555;
  height: 10px;
  background: rgba(49, 49, 49, 0.50);
  width: 82%;
  margin: 9px 0px;
  overflow: hidden;
}

.skill-main-percentage
{
  float: left;
  background: rgba(49, 49, 49, 0.50);
  border-radius: 4px;
  border: 1px solid #555;
  width: 14%;
  text-align: center;
  font-weight: bold;
  font-family: 'Share Tech Mono', sans-serif;
  padding: 2px;
  font-size: 15px;
}

.skill-percentage
{
  background-color: #FF6600;
  height: 10px;
  padding: 0;
}
/* Animate skills on subpage load */
.pt-page .skill-percentage
{
  -webkit-transition: all 2s ease-in-out;
  -moz-transition: all 2s ease-in-out;
  -o-transition: all 2s ease-in-out;
  -ms-transition: all 2s ease-in-out;
  transition: all 2s ease-in-out;
}
.js .pt-page:not(.pt-page-current) .skill-percentage
{
  width: 0;
}

.skill-percentage.skill-1
{
  width: 91%;
}
.skill-percentage.skill-2
{
  width: 64%;
}
.skill-percentage.skill-3
{
  width: 61%;
}
.skill-percentage.skill-4
{
  width: 89%;
}
.skill-percentage.skill-5
{
  width: 63%;
}
.skill-percentage.skill-6
{
  width: 78%;
}
.skill-percentage.skill-7
{
  width: 56%;
}
.skill-percentage.skill-8
{
  width: 69%;
}
.skill-percentage.skill-9
{
  width: 76%;
}
.skill-percentage.skill-10
{
  width: 49%;
}
.skill-percentage.skill-11
{
  width: 74%;
}
.skill-percentage.skill-12
{
  width: 58%;
}
.skill-percentage.skill-13
{
  width: 55%;
}
.skill-percentage.skill-14
{
  width: 73%;
}
.skill-percentage.skill-15 {
  width: 67%;
}
/* END Skills */

/* Progress Bar Circle */
.progress-circle
{
  font-size: 40px;
  margin: 20px auto;
  position: relative;
  padding: 0;
  width: 5em;
  height: 5em;
  background-color: #313131; 
  border-radius: 50%;
  line-height: 5em;
}

.progress-circle:after
{
  border: none;
  position: absolute;
  top: 0.35em;
  left: 0.35em;
  text-align: center;
  display: block;
  border-radius: 50%;
  width: 4.3em;
  height: 4.3em;
  background-color: #222;
  content: " ";
}

.progress-circle span
{
  position: absolute;
  line-height: 5em;
  width: 5em;
  text-align: center;
  display: block;
  color: #FF6600;
  z-index: 2;
}

.left-half-clipper
{ 
  border-radius: 50%;
  width: 5em;
  height: 5em;
  position: absolute;
  clip: rect(0, 5em, 5em, 2.5em);
}

.progress-circle.over50 .left-half-clipper
{
  clip: rect(auto,auto,auto,auto);
}

.value-bar
{
  position: absolute;
  clip: rect(0, 2.5em, 5em, 0);
  width: 5em;
  height: 5em;
  border-radius: 50%;
  border: 0.45em solid #FF6600;
  box-sizing: border-box;
}

.progress-circle.over50 .first50-bar
{
  position: absolute;
  clip: rect(0, 5em, 5em, 2.5em);
  background-color: #FF6600;
  border-radius: 50%;
  width: 5em;
  height: 5em;
}

.progress-circle:not(.over50) .first50-bar{ display: none; }

/* Progress bar rotation position */
.progress-circle.p0 .value-bar { display: none; }
.progress-circle.p1 .value-bar { transform: rotate(4deg); }
.progress-circle.p2 .value-bar { transform: rotate(7deg); }
.progress-circle.p3 .value-bar { transform: rotate(11deg); }
.progress-circle.p4 .value-bar { transform: rotate(14deg); }
.progress-circle.p5 .value-bar { transform: rotate(18deg); }
.progress-circle.p6 .value-bar { transform: rotate(22deg); }
.progress-circle.p7 .value-bar { transform: rotate(25deg); }
.progress-circle.p8 .value-bar { transform: rotate(29deg); }
.progress-circle.p9 .value-bar { transform: rotate(32deg); }
.progress-circle.p10 .value-bar { transform: rotate(36deg); }
.progress-circle.p11 .value-bar { transform: rotate(40deg); }
.progress-circle.p12 .value-bar { transform: rotate(43deg); }
.progress-circle.p13 .value-bar { transform: rotate(47deg); }
.progress-circle.p14 .value-bar { transform: rotate(50deg); }
.progress-circle.p15 .value-bar { transform: rotate(54deg); }
.progress-circle.p16 .value-bar { transform: rotate(58deg); }
.progress-circle.p17 .value-bar { transform: rotate(61deg); }
.progress-circle.p18 .value-bar { transform: rotate(65deg); }
.progress-circle.p19 .value-bar { transform: rotate(68deg); }
.progress-circle.p20 .value-bar { transform: rotate(72deg); }
.progress-circle.p21 .value-bar { transform: rotate(76deg); }
.progress-circle.p22 .value-bar { transform: rotate(79deg); }
.progress-circle.p23 .value-bar { transform: rotate(83deg); }
.progress-circle.p24 .value-bar { transform: rotate(86deg); }
.progress-circle.p25 .value-bar { transform: rotate(90deg); }
.progress-circle.p26 .value-bar { transform: rotate(94deg); }
.progress-circle.p27 .value-bar { transform: rotate(97deg); }
.progress-circle.p28 .value-bar { transform: rotate(101deg); }
.progress-circle.p29 .value-bar { transform: rotate(104deg); }
.progress-circle.p30 .value-bar { transform: rotate(108deg); }
.progress-circle.p31 .value-bar { transform: rotate(112deg); }
.progress-circle.p32 .value-bar { transform: rotate(115deg); }
.progress-circle.p33 .value-bar { transform: rotate(119deg); }
.progress-circle.p34 .value-bar { transform: rotate(122deg); }
.progress-circle.p35 .value-bar { transform: rotate(126deg); }
.progress-circle.p36 .value-bar { transform: rotate(130deg); }
.progress-circle.p37 .value-bar { transform: rotate(133deg); }
.progress-circle.p38 .value-bar { transform: rotate(137deg); }
.progress-circle.p39 .value-bar { transform: rotate(140deg); }
.progress-circle.p40 .value-bar { transform: rotate(144deg); }
.progress-circle.p41 .value-bar { transform: rotate(148deg); }
.progress-circle.p42 .value-bar { transform: rotate(151deg); }
.progress-circle.p43 .value-bar { transform: rotate(155deg); }
.progress-circle.p44 .value-bar { transform: rotate(158deg); }
.progress-circle.p45 .value-bar { transform: rotate(162deg); }
.progress-circle.p46 .value-bar { transform: rotate(166deg); }
.progress-circle.p47 .value-bar { transform: rotate(169deg); }
.progress-circle.p48 .value-bar { transform: rotate(173deg); }
.progress-circle.p49 .value-bar { transform: rotate(176deg); }
.progress-circle.p50 .value-bar { transform: rotate(180deg); }
.progress-circle.p51 .value-bar { transform: rotate(184deg); }
.progress-circle.p52 .value-bar { transform: rotate(187deg); }
.progress-circle.p53 .value-bar { transform: rotate(191deg); }
.progress-circle.p54 .value-bar { transform: rotate(194deg); }
.progress-circle.p55 .value-bar { transform: rotate(198deg); }
.progress-circle.p56 .value-bar { transform: rotate(202deg); }
.progress-circle.p57 .value-bar { transform: rotate(205deg); }
.progress-circle.p58 .value-bar { transform: rotate(209deg); }
.progress-circle.p59 .value-bar { transform: rotate(212deg); }
.progress-circle.p60 .value-bar { transform: rotate(216deg); }
.progress-circle.p61 .value-bar { transform: rotate(220deg); }
.progress-circle.p62 .value-bar { transform: rotate(223deg); }
.progress-circle.p63 .value-bar { transform: rotate(227deg); }
.progress-circle.p64 .value-bar { transform: rotate(230deg); }
.progress-circle.p65 .value-bar { transform: rotate(234deg); }
.progress-circle.p66 .value-bar { transform: rotate(238deg); }
.progress-circle.p67 .value-bar { transform: rotate(241deg); }
.progress-circle.p68 .value-bar { transform: rotate(245deg); }
.progress-circle.p69 .value-bar { transform: rotate(248deg); }
.progress-circle.p70 .value-bar { transform: rotate(252deg); }
.progress-circle.p71 .value-bar { transform: rotate(256deg); }
.progress-circle.p72 .value-bar { transform: rotate(259deg); }
.progress-circle.p73 .value-bar { transform: rotate(263deg); }
.progress-circle.p74 .value-bar { transform: rotate(266deg); }
.progress-circle.p75 .value-bar { transform: rotate(270deg); }
.progress-circle.p76 .value-bar { transform: rotate(274deg); }
.progress-circle.p77 .value-bar { transform: rotate(277deg); }
.progress-circle.p78 .value-bar { transform: rotate(281deg); }
.progress-circle.p79 .value-bar { transform: rotate(284deg); }
.progress-circle.p80 .value-bar { transform: rotate(288deg); }
.progress-circle.p81 .value-bar { transform: rotate(292deg); }
.progress-circle.p82 .value-bar { transform: rotate(295deg); }
.progress-circle.p83 .value-bar { transform: rotate(299deg); }
.progress-circle.p84 .value-bar { transform: rotate(302deg); }
.progress-circle.p85 .value-bar { transform: rotate(306deg); }
.progress-circle.p86 .value-bar { transform: rotate(310deg); }
.progress-circle.p87 .value-bar { transform: rotate(313deg); }
.progress-circle.p88 .value-bar { transform: rotate(317deg); }
.progress-circle.p89 .value-bar { transform: rotate(320deg); }
.progress-circle.p90 .value-bar { transform: rotate(324deg); }
.progress-circle.p91 .value-bar { transform: rotate(328deg); }
.progress-circle.p92 .value-bar { transform: rotate(331deg); }
.progress-circle.p93 .value-bar { transform: rotate(335deg); }
.progress-circle.p94 .value-bar { transform: rotate(338deg); }
.progress-circle.p95 .value-bar { transform: rotate(342deg); }
.progress-circle.p96 .value-bar { transform: rotate(346deg); }
.progress-circle.p97 .value-bar { transform: rotate(349deg); }
.progress-circle.p98 .value-bar { transform: rotate(353deg); }
.progress-circle.p99 .value-bar { transform: rotate(356deg); }
.progress-circle.p100 .value-bar { transform: rotate(360deg); }
/* END Progress Bar Circle */

/* =======================================
6.4. Portfolio subpage
======================================= */
.portfolio-filters
{
  list-style: none;
  padding: 0;
  margin: 0 0 2em;
  text-align: center;
}

.portfolio-filters li
{
  display: inline-block;
}

.portfolio-filters li a,
.portfolio-filters li a:hover
{
  color: #888;
  text-decoration: none;
  font-family: 'Share Tech Mono', sans-serif;
}

.portfolio-filters li a:hover
{
  background-color: #eee;
}

.portfolio-filters li.active a,
.portfolio-filters li.active a:hover
{
  background-color: #FF6600;
  color: #fff;
}

.portfolio-grid
{
  margin: 0 -1em 1.8em;
}

.portfolio-grid.one-column .item
{
  width: 100%;
  padding:  0 10px;
}

.portfolio-grid.two-columns .item
{
  width: 50%;
  float: left;
  padding:  0 10px;
}

.portfolio-grid.three-columns .item
{
  width: 33.333333%;
  float: left;
  padding: 0 10px;
}

.portfolio-grid img
{
  position: relative;
  display: block;
  width: 100%;
}

.portfolio-card
{
  display: block;
  position: relative;
  padding: 0;
  background: #353535;
  box-shadow: 1px 0px 8px rgba(15, 15, 15, 1);
}

.portfolio-card .portfolio-block
{
  position: relative;
  overflow: hidden;
}

.portfolio-card .portfolio-block img
{
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.portfolio-card .portfolio-block:hover img
{
  transform: scale(1.1);
}

.portfolio-card .portfolio-block a .mask
{
  position: absolute;
  background: #4f565e;
  background: rgba(0, 0, 0, .12);
  display: inline-block;
  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;
  width: 100%;
  left: 0;
  bottom: 0;
  top: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.portfolio-card .portfolio-block:hover a .mask
{
  visibility: visible;
  opacity: 1
}

.portfolio-card .portfolio-info
{
  padding: 15px 14px;
  border: 1px solid #353535;
  border-top: 0;
}

.portfolio-info a h5
{
  color: #FF6600;
}

.portfolio-info a h5:hover
{
  color: rgba(255, 102, 0, 0.7);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.portfolio-card .portfolio-item-title
{
  margin: 5px 0 0 0;  
}

.portfolio-card .portfolio-date
{
  display: inline-block;
  color: #AAA;
  font-size: 12px;
  line-height: 1.1em;
  font-weight: 300;
}

.portfolio-card .category
{
  position: absolute;
  top: 10px;
  left: 10px;
  background: #FF6600;
  padding: 2px 7px;
  line-height: 1.2em;
  font-size: 12px;
  color: #FFF;
  z-index: 3;
  box-shadow: 1px 0px 8px rgba(15, 15, 15, 1);
}

/* =======================================
6.5. Prestation subpage
======================================= */
.prestation-filters
{
  list-style: none;
  padding: 0;
  margin: 0 0 2em;
  text-align: center;
}

.prestation-filters li
{
  display: inline-block;
}

.prestation-filters li a,
.prestation-filters li a:hover
{
  color: #888;
  text-decoration: none;
  font-family: 'Share Tech Mono', sans-serif;
}

.prestation-filters li a:hover
{
  background-color: #eee;
}

.prestation-filters li.active a,
.prestation-filters li.active a:hover
{
  background-color: #FF6600;
  color: #fff;
}

.prestation-grid
{
  margin: 0 -1em 1.8em;
}

.prestation-grid.one-column .item
{
  width: 100%;
  padding:  0 10px;
}

.prestation-grid.two-columns .item
{
  width: 50%;
  float: left;
  padding:  0 10px;
}

.prestation-grid.three-columns .item
{
  width: 33.333333%;
  float: left;
  padding: 0 10px;
}

.prestation-grid img
{
  position: relative;
  display: block;
  width: 100%;
}

.prestation-card
{
  display: block;
  position: relative;
  padding: 0;
  background: #353535;
  box-shadow: 1px 0px 8px rgba(15, 15, 15, 1);
}

.prestation-card .prestation-block
{
  position: relative;
  overflow: hidden;
}

.prestation-card .prestation-block img
{
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.prestation-card .prestation-block:hover img
{
  transform: scale(1.1);
}

.prestation-card .prestation-block a .mask
{
  position: absolute;
  background: #4f565e;
  background: rgba(0, 0, 0, .12);
  display: inline-block;
  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;
  width: 100%;
  left: 0;
  bottom: 0;
  top: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.prestation-card .prestation-block:hover a .mask
{
  visibility: visible;
  opacity: 1
}

.prestation-card .prestation-info
{
  padding: 15px 14px;
  border: 1px solid #353535;
  border-top: 0;
}

.prestation-info a h5
{
  color: #FF6600;
}

.prestation-info a h5:hover
{
  color: rgba(255, 102, 0, 0.7);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.prestation-card .prestation-item-title
{
  margin: 5px 0 0 0;  
}

.prestation-card .prestation-date
{
  display: inline-block;
  color: #AAA;
  font-size: 12px;
  line-height: 1.1em;
  font-weight: 300;
}

.prestation-card .category
{
  position: absolute;
  top: 10px;
  left: 10px;
  background: #FF6600;
  padding: 2px 7px;
  line-height: 1.2em;
  font-size: 12px;
  color: #FFF;
  z-index: 3;
  box-shadow: 1px 0px 8px rgba(15, 15, 15, 1);
}

/* =======================================
6.6. Contact subpage
======================================= */
.form-control,
.form-control:focus,
.has-error .form-control,
.has-error .form-control:focus
{
  color: #EEE;
  border-color: #555;
}

.form-group
{
  position: relative;
  margin: 0 0 20px;
}
.form-control,
.form-control:focus
{
  height: 42px;
}

.form-control,
.form-control:focus,
.has-error .form-control,
.has-error .form-control:focus
{
  position: relative;
  border: 1px solid #555;
  border-radius: 0;
  display: block;
  font-size: 0.9em;
  margin: 0;
  padding: 10px 35px 10px 12px;
  width: 100%;
  background: 0 0;
  text-align: left;
  color: inherit;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  outline: none;
  font-family: 'Share Tech Mono', monospace;
  color: #FFF;
}

textarea.form-control, textarea.form-control:focus
{
  height: auto;
}

.form-control + .form-control-border
{
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  right: 50%;
  bottom: 0;
  background: #FF6600;
  height: 2px;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.form-control:focus + .form-control-border
{
  left: 0;
  right: 0;
  z-index: 1;
}

.has-error .form-control + .form-control-border
{
  background: #FF4C4C;
}

.form-control-icon
{
  position: absolute;
  top: 9px;
  right: 12px;
  font-size: 24px;
  color: #AAA;
}

.form-control:focus + .form-control-border + .form-control-icon
{
  color: #FF6600;
}

/* Placeholders */
.form-control::-moz-placeholder
{
  color: #AAA;
}

.form-control:-ms-input-placeholder
{
  color: #AAA;
}

.form-control::-webkit-input-placeholder
{
  color: #AAA;
}
/* /Placeholders */

.form-group .help-block
{
  position: absolute;
  display: inline-block;
  padding: 0px 5px;
  font-size: 0.8em;
  line-height: 1.5em;
  margin: -2px 0 0 10px;
  color: #FFF;
  background: #FF4C4C;
}

.form-group .help-block:after
{
  content: " ";
  position: absolute;
  left: 5px;
  bottom: 100%;
  width: 0;
  height: 0;
  border-bottom: 10px solid #FF4C4C;
  border-right: 10px solid transparent;
}
.form-group .help-block:empty
{
  display: none;
}

.form-control.form-select
{
  color: rgba(238, 238, 238, .7);
  border-color: #555;
}

select:focus
{
  border-color: gray;
  outline:none;
}

option
{
  background: #222222;
  color: #eee;
  border: 1px solid green;
}

/* Remove the original arrow */
select.select-contact
{
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
}

.fa-caret-down
{
  pointer-events: none;
}
/* Remove the original arrow */

input[type=submit],
input[type=button],
button, a.button
{
  display: inline-block;
  position: relative;
  padding: 0.8em 2em;
  margin-bottom: .25em;
  font-size: 0.875em;
  line-height: 1.2;
  border: 0;
  outline: 0;
  border: 2px solid #FF6600;
  color: #FFF;
  text-shadow: none;
  background: none;
  border-radius: 0;
  font-family: 'Share Tech Mono', monospace;
}

input[type=submit]:hover,
input[type=submit]:focus,
input[type=button]:focus,
button:hover,
button:focus,
a.button:hover,
a.button:focus
{
  color: #FFF;
  background-color: #FF6600;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
/* END Form controls */

/* Info Block */
.info-content
{
  background: #313335;
  border: 1px solid #5E6062;
  border-radius: 6px;
  margin: 25px 0 40px;
  box-shadow: 0px 0px 10px rgba(15, 15, 15, 1);
}

.info-header
{
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #424345, color-stop(1, #3C3E40)));
  background: -webkit-linear-gradient(top, #424345, #3C3E40);
  background: -moz-linear-gradient(top, #424345, #3C3E40);
  background: -ms-linear-gradient(top, #424345, #3C3E40);
  background: -o-linear-gradient(top, #424345, #3C3E40);
  background: linear-gradient(top, #424345, #3C3E40);
  color: #E5E5E5;
  line-height: 20px;
  text-align: center;
  width: 100%;
  height: 35px;
  border-top: 1px solid #5E6062;
  border-bottom: 1px solid #080909;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  cursor: default;
  padding: 0;
  position: relative;
  font-family: 'Share Tech Mono', monospace;
}

.info-title
{
  float: left;
  margin-left: 100px;
  padding-top: 5px;
  font-size: 22px;
}

.available
{
  margin-left: 85px;
}

.info-body
{
  padding: 18px;
  color: #E5E5E5;
  font-family: 'Share Tech Mono', monospace;
}

.info-body i
{
  margin-bottom: 20px;
  color: #E5E5E5;
}

.info-body a i
{
  margin-bottom: 20px;
  color: #E5E5E5;
}

.info-body a i:hover
{
  color: #FF6600;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.info-body .fa-check-circle
{
  color: #00A034;
}

.info-location
{
  font-size: 22px;
}

.info-available
{
  font-size: 22px;
  color: #FF6600;
}

.info-buttons
{
  padding-left: 8px;
  padding-top: 10px;
  float: left;
  line-height: 0px;
}

.info-close
{
  background: #ff5c5c;
  font-size: 9pt;
  width: 14px;
  height: 14px;
  border: 1px solid #e33e41;
  border-radius: 50%;
  display: inline-block;
}

.info-minimize
{
  background: #ffbd4c;
  font-size: 9pt;
  line-height: 11px;
  margin-left: 4px;
  width: 14px;
  height: 14px;
  border: 1px solid #e09e3e;
  border-radius: 50%;
  display: inline-block;
}

.info-zoom
{
  background: #00ca56;
  font-size: 9pt;
  line-height: 11px;
  margin-left: 6px;
  width: 14px;
  height: 14px;
  border: 1px solid #14ae46;
  border-radius: 50%;
  display: inline-block;
}
/* END Info Block */

/* Messages Box */
.messages
{
  width: 70%;
  margin: auto;
}

.box-content
{
  background: #313335;
  border: 1px solid #5E6062;
  border-radius: 6px;
  margin: -18px auto 20px;
  box-shadow: 0px 0px 10px rgba(15, 15, 15, 1);
}

.box-header
{
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #424345, color-stop(1, #3C3E40)));
  background: -webkit-linear-gradient(top, #424345, #3C3E40);
  background: -moz-linear-gradient(top, #424345, #3C3E40);
  background: -ms-linear-gradient(top, #424345, #3C3E40);
  background: -o-linear-gradient(top, #424345, #3C3E40);
  background: linear-gradient(top, #424345, #3C3E40);
  color: #E5E5E5;
  line-height: 20px;
  text-align: center;
  width: 100%;
  height: 35px;
  border-top: 1px solid #5E6062;
  border-bottom: 1px solid #080909;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  cursor: default;
  padding: 0;
  position: relative;
  font-family: 'Share Tech Mono', monospace;
}

.box-buttons
{
  padding-left: 8px;
  padding-top: 10px;
  float: left;
  line-height: 0px;
}

.box-buttons a
{
  visibility: hidden;
  line-height: 15px;
  color: #000;
}

.box-buttons:hover a
{
  visibility: visible;
  color: #000;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.box-close
{
  background: #ff5c5c;
  font-size: 9pt;
  width: 14px;
  height: 14px;
  border: 1px solid #e33e41;
  border-radius: 50%;
  display: inline-block;
}

.box-close:active
{
  background: #c14645;
  border: 1px solid #b03537;
}

.box-minimize
{
  background: #ffbd4c;
  font-size: 9pt;
  line-height: 11px;
  margin-left: 8px;
  width: 14px;
  height: 14px;
  border: 1px solid #e09e3e;
  border-radius: 50%;
  display: inline-block;
}

.box-minimize:active
{
  background: #c08e38;
  border: 1px solid #af7c33;
}

.minus-button
{
  margin-left: 1px;
}

.box-zoom
{
  background: #00ca56;
  font-size: 9pt;
  line-height: 11px;
  margin-left: 8px;
  width: 14px;
  height: 14px;
  border: 1px solid #14ae46;
  border-radius: 50%;
  display: inline-block;
}

.box-zoom
{
  background: #029740;
  border: 1px solid #128435;
}

.box-title
{
  float: left;
  margin-left: 25%;
  padding-top: 5px;
  font-size: 22px;
}

.box-body
{
  padding: 12px 5px;
  color: #E5E5E5;
  font-family: 'Share Tech Mono', monospace;
}

.box-body i
{
  margin-right: 5%;
}

.box-i,
.box-text
{
  display: inline-block;
}

.box-text
{
  vertical-align: middle;
  margin-top: -12px;
}

/* END Messages Box */

/* ============================================================================= 
7. SINGLE PAGE
============================================================================= */
.single-page-wrapper
{
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  padding: 25px 5%;
  background-image: url(../images/background.png);
  background-color: #313131;
  background-attachment: fixed;
  background-position: 50%;
  background-size: cover;
  -webkit-background-size: cover;
  background-attachment: scroll;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.single-page-content
{
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  max-width: 1500px;
  -webkit-perspective: 1500px;
  -moz-perspective: 1500px;
  perspective: 1500px;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

.content-area
{
  width: 100%;
  height: 100%;
  position: absolute;
  top: auto;
  padding: 10px 0;
  left: 0;
  background-color: #222;
  visibility: visible;
  z-index: 90;
  opacity: 1;
  overflow: hidden;
  min-height: 100%;
  -webkit-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-box-shadow: 0 1px 33px rgba(0,0,0,0.15);
  -moz-box-shadow: 0 1px 33px rgba(0,0,0,0.15);
  box-shadow: 0 1px 33px rgba(0,0,0,0.15);
}

.content-area .section-inner
{
  position: relative;
  padding: 20px 60px 50px;
}

/* Arrows */
.single-page-nav
{
  text-align: center;
}

.single-page-nav > div.nav-item
{
  position: relative;
  display: inline-block;
  margin: 0 3px;
}

.single-page-nav > div.nav-item a
{
  display: inline-block;
  height: 30px;
  width: 40px;
  text-align: center;
  color: #888;
}

.single-page-nav > div.nav-item a:hover
{
  color: #FF6600;
}

.single-page-nav > div.nav-item a i
{
  line-height: 30px;
  font-size: 30px;
}

.single-page-close-button
{
  float: right;
}

.close-btn:hover
{
  color: #FF0000 !important;
}
/* END Arrows */

.single-page-description-title
{
  padding-top: 30px;
  margin: auto;
  text-align: center;
}

.single-page-description-title .page-description-title
{
  font-size: 50px;
  color: #FF6600;
  text-transform: uppercase;
}

.single-page-description ul
{
  color: #E5E5E5;
}

/* Carousel */
.carousel-wrapper
{
  margin: 0 auto 60px;
  padding: 10px 0 0;
}

.carousel-indicators li
{
  background-color: #FF6600;
}

.img-carousel
{
  max-width: 100%;
}

/* END Carousel */

.single-page-description
{
  text-align: justify;
  padding: 0 60px 0 80px;
}

.project-general-info
{
  list-style: none;
  padding: 0;
  margin: 0 0 15px;
}

.project-general-info li
{
  margin : 0 0 10px;
}

.project-general-info .fa
{
  color: #FF6600;
  margin-right: 5px;
}

.project-general-info p
{
  margin: 0;
}

/* Tags Block */
.tags-block
{
  margin: 25px 0 0;
}

.tags
{
  list-style: none;
  margin: 0;
  padding: 0;
}

.tags li
{
  display: inline-block;
  margin: 2px 0;
}

.tags li a
{
  font-size: 14px;
  color: #fff !important;
  padding: 2px 7px;
  background-color: #313131;
  border: 1px solid #FF6600;
  font-weight: bold;
}
/* END Tags Block */

/* Share Buttons */
.wrapper-share-buttons
{
  margin: 25px 0 0;
}

.share-buttons button
{
  display: inline-block;
  margin: 0 7px 0 0;
  padding: 0;
  width: 35px;
  height: 35px;
  color: #AAA;
  background-color: #313131;
  text-align: center;
}

.share-buttons button:hover
{
  color: #fff;
  background-color: #FF6600;
  border-color: transparent;
}

.share-buttons button:last-child
{
  margin-right: 0;
}

.share-buttons button i
{
  font-size: 18px;
  line-height: 34px;
}
/* END Share Buttons */

/* Prestations */
.prestation-page-description-title
{
  padding-top: 20px;
  margin: auto;
  padding-bottom: 30px;
  font-size: 22px;
  text-align: center;
}

.prestation-page-description-title .page-description-title
{
  font-size: 50px;
  color: #FF6600;
  text-transform: uppercase;
}

.prestation-page-description
{
  text-align: justify;
  padding-right: 60px;
}

.prestation-page-description ul
{
  color: #E5E5E5;
}

img.prestation
{
  margin-bottom: 35px;
  max-width: 100%;
}

.prestation-list
{
  list-style: none;
  margin: 0;
  padding: 0;
}

.prestation-list li
{
  padding: 5px 0;
  font-size: 18px;
}

.prestation-list li:first-child
{
  padding-top: 0;
}

.prestation-list li .title
{
  display: inline-block;
  font-family: 'Share Tech Mono', monospace;
  font-weight: 700;
  margin-right: 12px;
  color: #fff;
}

.prestation-list li .title:after
{
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    margin-top: -3px;
    background-color: #FF6600;
}

.prestation-list li .value
{
  font-family: 'Inconsolata', monospace;
  min-width: 250px;
  color: #fff;
}

ul.prestation
{
  list-style: none;
  color: #fff;
  line-height: 30px;
  font-size: 18px;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: -30px;
  text-align: justify;
}
/* END Prestations */

/* ============================================================================= 
8. MEDIA QUERIES 
============================================================================= */
@media screen and (max-width: 1536px)
{
  .my-photo
  {
    margin: 10px auto;
  }

  .site-title-block
  {
    margin: 10px 0px 5px;
  }

  .site-nav
  {
    display: block;
    padding: 10px 0;
  }

  .site-main-menu li a,
  .site-main-menu li a:hover
  {
    padding: 7px 20px;
  }
}

@media only screen and (max-width: 1024px)
{
  .mobile-visible
  {
    display: block;
    visibility: visible;
  }

  .mobile-hidden
  {
    display: none !important;
    visibility: hidden !important;
  }

  .border-block-top-110
  {
    display: none;
  }

  .header
  {
    width: 100%;
    max-width: 320px;
    height: calc(100% - 50px);
    top: 50px;
    z-index: 999;
    -webkit-box-shadow: 5px 0px 20px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 5px 0px 20px 0px rgba(0,0,0,0.1);
    box-shadow: 5px 0px 20px 0px rgba(0,0,0,0.1);
    -webkit-transition: all 0.66s ease-in-out;
    -moz-transition: all 0.66s ease-in-out;
    -o-transition: all 0.66s ease-in-out;
    -ms-transition: all 0.66s ease-in-out;
    transition: all 0.66s ease-in-out;
  }

  .site-title
  {
    font-size: 27px;
  }

  .mobile-header
  {
    position: fixed;
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #444;
    background-color: #222;
    z-index: 1000;
  }

  .site-main
  {
    position: absolute;
    top: 50px;
    bottom: 0;
    width: 100%;
    height: auto;
    margin: 0;
    border: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }

  .home-page-description
  {
    margin-top: 45px;
    font-size: 25px;
  }

  .home-page-scramble
  {
    display: none;
  }

  .section-title-block
  {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 30px;
  }

  .section-title-wrapper
  {
    display: block;
    text-align: center;
  }

  .section-title
  {
    display: inline-block;
    position: relative;
    font-size: 38px;
  }

  .section-title:after
  {
    display: none;
  }

  .section-title-block .section-description
  {
    position: relative;
    font-size: 13px;
  }

  .pt-wrapper
  {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  .single-page-wrapper
  {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  .pt-page-current, .no-js .pt-page
  {
    overflow: auto;
  }

  .pt-page-current,
  .no-js .pt-page,
  .single-page-wrapper
  {
    -webkit-overflow-scrolling: touch;
  }

  .pt-page,
  .single-page-wrapper,
  .pt-page *
  {
    -webkit-overflow-scrolling: touch;
    -webkit-transform: translateZ(0);
  }

  .content-area
  {
    overflow: auto;
  }

  .pt-page .section-inner
  {
    padding: 5px 20px;
  }

  .single-page-description
  {
    padding: 0 15px;
  }

  .prestation-page-description
  {
    padding-right: 30px;
  }

  .prestation-page-description h3
  {
    font-size: 24px;
  }

  .mobile-menu-hide
  {
    margin-left: -100%;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }

  .home-page-block h1
  {
    font-size: 60px;
  }

  .home-page-scramble
  {
    font-size: 30px;
  }

  .prestation-info a h5
  {
    font-size: 18px;
  }

  .info-minimize,
  .info-zoom
  {
    margin-left: 0;
  }

  .info-title
  {
    margin-left: 32px;
  }

  .info-location,
  .info-available
  {
    font-size: 18px;
  }

  .info-body a i,
  .info-body .fa-check-circle
  {
    font-size: 40px;
  }

  .box-title
  {
    margin-left: 15%;
  }
}

/*@media only screen and (max-width: 991px)
{
  
}*/

@media only screen and (max-width: 768px)
{
  .content-area .section-inner
  {
    padding: 20px 20px 30px;
  }

  .home-page-block h1
  {
    font-size: 50px;
  }

  .portfolio-grid.three-columns .item
  {
    width: 50%
  }
  
  .prestation-grid.three-columns .item
  {
    width: 50%
  }

  .info-content
  {
    margin: 20px 0 10px;
  }

  .info-title
  {
    margin-left: 50px;
  }

  .info-list
  {
    margin-top: 20px;
  }

  .block-title
  {
    margin-top: 20px;
  }

  .lmpixels-arrows-nav > div
  {
    display: none;
  }

  .carousel-wrapper
  {
    margin: 0 auto 30px;
  }

  #cookie
  {
    font-size: 14px;
  }

  #link_cookie
  {
    font-size: 10px;
  }
}

@media only screen and (max-width: 645px)
{
  .portfolio-grid.three-columns .item
  {
    width: 100%
  }

  .prestation-grid.three-columns .item
  {
    width: 100%
  }
}

@media only screen and (max-width: 575px)
{
  .empty-title
  {
    height: 0;
  }

  .single-page-description-title .page-description-title,
  .prestation-page-description-title .page-description-title
  {
    font-size: 30px;
  }

  .prestation-page-description
  {
    padding-right: 15px;
  }

  .messages
  {
    width: 90%;
  }
}


@media only screen and (max-width: 480px)
{
  .home-page-block h1
  {
    font-size: 40px;
  }
}

@media screen and (max-width: 361px)
{
  .mobile-header .mobile-site-title
  {
    font-size: 15px;
  }

  .home-page-block h2
  {
    font-size: 36px;
  }

  .home-page-description
  {
    margin-top: 10px;
    font-size: 20px;
  }
}