/* [Table des matieres]

01. Global Styles
02. Preloader
03. Layout
04. Header
05. Navigation
06. Main Content
07. Section A propos
08. Section Compétences
09. Section Projets
10. Section Contact
11. Section Footer
12. Section Video
13. Responsive */

/*-----------------------------------------------------------------*/
/*                      GLOBAL STYLES                              */
/*-----------------------------------------------------------------*/
* {
outline: 0;
}

html {
  font-size: 62.5%;
}

html, body {
  height:100%;
}

body.is-loading *, body.is-loading *:before, body.is-loading *:after {
  -moz-animation: none !important;
  -webkit-animation: none !important;
  -ms-animation: none !important;
  animation: none !important;
  -moz-transition: none !important;
  -webkit-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}

body {
  background-color: #000;
  color:#000;
  font-family: "Raleway", sans-serif;
  font-size:1.65em;
  overflow-x: hidden;
  line-height: 1.65;
}

h2,h3,h4,h5,h6 {
  font-family: "Dosis",cursive;
  margin-top: 20px;
  margin-bottom: 10px;
}

.block-title {
  font-weight: 300;
  font-size: 2em;
  font-family: "Dosis",cursive;
  text-align: center;
  overflow: hidden;
  margin-bottom: 50px;
}

.block-title:before, .block-title:after {
  content: "";
  background: #fff;
  display: inline-block;
  height: 1px;
  position: relative;
  width: 42%;
  vertical-align: middle;
}

.block-title:before {
    right: 0.5em;
    margin-left: -42%;
}

.block-title:after {
    left: 0.5em;
    margin-right: -42%;
}

h3 {
  font-family: "Dosis", sans-serif;
}

p {
  line-height: 1.8;
}

img {
  max-width: 100%;
  height: auto;
}

ul {
  padding-left: 15px;
}

li {
  padding: 0 0 10px;
}

ul li {
  list-style: none;
}

a {
  /* color:#fafafa; */
  position: relative;
  text-decoration: none;
}

a:hover, a:focus {
  outline: none;
  text-decoration: none;
  -moz-transition: all 0.2s ease 0s;
  -webkit-transition: all 0.2s ease 0s;
  transition: all 0.2s ease 0s;
}

.hide {
  display:none;
}

.show {
  display:block;
}

.container {
  margin: 0 auto;
  text-align: center;
  max-width:90%;
}

.container-fluid {
  margin: 0 auto;
  text-align:center;
  width:100%;
}

.container-flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;

  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;

  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;

  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;

  -webkit-box-pack: start;
  -moz-box-pack: start;

  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;

  -webkit-align-content: space-between;
  -ms-flex-line-pack: space-between;
  align-content: space-between;

  -webkit-box-align: start;
  -moz-box-align: start;

  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}

.col-half {
  display: block;
  float:left;
  width:50%;
  padding-left: 15px;
  padding-right: 15px;
}

.col-third {
  display: block;
  float:left;
  padding-left: 15px;
  padding-right: 15px;
  width:33.33333%;
}

.col-2third {
  display: block;
  float:left;
  padding-left: 15px;
  padding-right: 15px;
  width:66.66666%;
}

.col-quarter {
  display: block;
  float:left;
  padding-left: 15px;
  padding-right: 15px;
  width:25%;
}

.column {
  margin:20px 30px;
  padding:15px 0;
  box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.2);
}

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

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

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

.align-justify {
  text-align: justify;
}

.float-left {
  float:left;
  margin:0 auto;
}
.float-right {
  float:right;
  margin:0 auto;
}

.clearfloat {
  clear: both;
  overflow: hidden;
}

.clearfix {
  overflow: auto;
  zoom: 1;
}

.hide {
  display: none;
}

.show {
  display: block;
}

img {
  max-width: 100%;
  height: auto;
  border:none;
  /* border-radius:4%; */
}

ul {
  padding-left: 15px;
}

li {
  padding: 0 0 10px;
}

.bgc-overlay {
  background-color: rgba(12,12,12,0.65);
}

.bgc-black {
  background-color: #0C0C0C;
}

.bgc-green {
  /* background-color: #39b54a; */
  background-color: #02c9c9;
}

.bgc-blue {
  /* background-color: royalblue; */
  background-color: #1C86FC;
}

.bgc-red{
  background-color: red;
}

.bgc-yellow {
  /* background-color: yellow; */
  background-color: #ffc300;
}

.bgc-grey {
  background-color: #dcdcdc;
  /* background-color: #f3f5f8; */
}



/* BUTTON */
.btn {
  background-color: #3f3f3f;
	/* background:rgba(115, 224, 179, 1); */
  /* background: rgba(61, 201, 179, 1); */
  /* background: -webkit-linear-gradient( 135deg, rgb(244,202,216) 0%, rgb(129,112,137) 35%, rgb(14,21,58) 100%); */
	color:#fff;
	display: inline-block;
	font-family: 'Raleway', serif;
	font-weight: 200;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	border: 1px solid #fafafa;
	padding: 15px 20px;
	font-size: 1.6rem;
	line-height: 1.5;
	border-radius: 6px;
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.btn:hover {
	color:#fff;
}
.small-btn {padding: 5px 10px}
.regular-btn {padding: 10px 15px}
.big-btn {padding: 20px 25px}

.arrows {
	position: absolute;
	font-size:4rem;
	top:90%;
	left:50%;
  transform: translate(-50%, -50%);
}

.arrows .fa {
  color:#fafafa;
}

/*-----------------------------------------------------------------*/
/*                      PRELOADER                                  */
/*-----------------------------------------------------------------*/

.preloader-outer {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #0C0C0C;
    z-index: 6;
    overflow: hidden;
}

.preloader {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 60px;
    margin: -30px 0 0 -40px;
}

.preloader .lines {
    width: 80px;
    height: 40px;
    position: absolute;
}

.preloader .lines .line {
    width: 80px;
    height: 1px;
    background-color: #fff;
    position: absolute;
    clip: rect(0,0,20px,0);
}

.preloader .lines .line.line-1 {
    top: 0;
    animation: slide 2s ease 0.1s infinite;
}

.preloader .lines .line.line-2 {
    top: 15px;
    animation: slide 2s ease .25s infinite;
}

.preloader .lines .line.line-3 {
    top: 30px;
    animation: slide 2s ease .5s infinite;
}

.preloader .loading-text {
    position: absolute;
    top: 50px;
    text-align: center;
    width: 100%;
    color: #fff;
    font-size: 14px;
    font-family: "Montserrat",sans-serif;
    letter-spacing: 1px;
    line-height: 10px;
    height: 10px;
    text-transform: uppercase;
}

@keyframes slide {
    0% {
        clip: rect(0,0,20px,0);
    }

    30% {
        clip: rect(0,80px,20px,0);
    }

    50% {
        clip: rect(0,80px,20px,0);
    }

    80% {
        clip: rect(0,80px,20px,80px);
    }

    100% {
        clip: rect(0,80px,20px,80px);
    }
}

@keyframes fade {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


/*-----------------------------------------------------------------*/
/*                      LAYOUT                                     */
/*-----------------------------------------------------------------*/


/*-----------------------------------------------------------------*/
/*                      HEADER                                     */
/*-----------------------------------------------------------------*/

.header {
  background: url('../../images/ilya-pavlov.jpg');
  background-attachment: fixed;
  background-position:center;
  background-repeat: no-repeat;
  background-size: cover;
  display:none;
  position:relative;
  overflow: hidden;
  height:100vh;
  width: 100%;
}

.header h2 {
  font-family: "Raleway", sans-serif;
}

.logo {
  line-height: 60px;
  position: fixed;
  float: left;
  margin: 0 46px 16px;
}

.logo :after {
  content:"";
  height:10px;
  border-right:2px solid #fff;
  margin-left:15px;
  text-shadow:1px 1px 1px #000;
}

.logo a {
  color: #fff;
  font-size: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.banner {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  width:100%;
}

.banner h1 {
  font-size: 75px;
  margin: 0;
  margin-bottom: 15px;
  font-weight: 400;
  font-family: 'Dosis', cursive;
  line-height: 90px;
  color: #fff;
  letter-spacing: 1px;
  word-spacing: 6px;
  text-shadow: 2px 2px 1px #000;
}

.banner p {
  font-size: 32px;
  margin-bottom: 60px;
  color: #fff;
  font-weight: bold;
  line-height: 56px;
  word-spacing: 2px;
  text-shadow: 2px 2px 1px #000;
  letter-spacing: 2px;
  text-transform: capitalize;
}

.overlay {
  background-color: rgba(33, 32, 42, 0.15);
  height:100%;
  width: 100%;
}

.overlay-2 {
  background-color: rgba(255, 255, 255, 0.22);
  height:400px;
  width: 100%;

}


/*-----------------------------------------------------------------*/
/*                      NAVIGATION                                 */
/*-----------------------------------------------------------------*/

nav {
  position: fixed;
  height:66px;
  width: 100%;
  line-height: 66px;
  z-index: 1;
  text-shadow:1px 1px 1px #000;
}

nav ul {
  line-height: 66px;
  list-style: none;
  background: rgba(0, 0, 0, 0);
  overflow: hidden;
  color: #fff;
  padding: 0;
  text-align: right;
  margin: 0;
  padding-right: 40px;
  transition: 1s;
}

nav.black ul {
  background-color: #3f3f3f;
}

nav ul li {
  display: inline-block;
  padding: 0px 30px;
}

nav ul li a {
  text-decoration: none;
  color: #fff;
  font-size: 16px;
  /* font-weight: bold; */
}

nav ul li a:before {
 content: "";
 position: absolute;
 width: 100%;
 height: 2px;
 bottom: -5px;
 left: 0;
 background-color: #02c9c9;
 visibility: hidden;
 -webkit-transform: scaleX(0);
 transform: scaleX(0);
 -webkit-transition: all 0.3s ease-in-out 0s;
 transition: all 0.3s ease-in-out 0s;
}

nav ul li a:hover:before {
 visibility: visible;
 -webkit-transform: scaleX(1);
 transform: scaleX(1);
}

.menu-icon {
  line-height: 66px;
  height:66px;
  width: 100%;
  background-color: #3f3f3f;
  text-align: right;
  box-sizing: border-box;
  padding: 5px 24px;
  cursor: pointer;
  color: #fff;
  display: none;
}

.menu-icon .fa {
  color:#fff;
}

/*-----------------------------------------------------------------*/
/*                      MAIN CONTENT                               */
/*-----------------------------------------------------------------*/

.main-content  {
  overflow: hidden;
  position:relative;
  height:100%;
  width:100%;
}

/* paralax */

.parallax1 {
  background-color: #f5f5f5;
  background-image: url('../../images/joanna-kosinska.jpg');
  background-attachment: fixed;
  background-position:center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 450px;
  position: relative;
}

.parallax1 h2 {
  font-family: "Dosis", cursive;
  font-size: 100px;
  position: absolute;
  top:47%;
  left:48%;
  transform: translate(-50%, -50%);
  color:#fafafa;
  text-shadow: 2px 1px 1px  rgba(0,0,0,0.7);
}

.parallax1 a {
  position: absolute;
  top:70%;
  left:47%;
  transform: translate(-50%, -50%);

}

.parallax2 {
  background-color: #f5f5f5;
  background-image: url('../../images/bg-callout.jpg');
  background-attachment: fixed;
  background-position:center top;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 450px;
  position: relative;
}

.parallax2 h2 {
  font-family: "Dosis", cursive;
  font-size: 100px;
  position: absolute;
  top:47%;
  left:48%;
  transform: translate(-50%, -50%);
  color:#fafafa;
  text-shadow: 2px 1px 1px  rgba(0,0,0,0.7);
}

.parallax3{
  background-image: url('../../images/contact.jpg');
  background-attachment: fixed;
  background-position: center center;
  background-repeat: repeat;
  background-size: cover;
  height: 450px;
  position: relative;
}

.parallax3 h2 {
  font-family: "Dosis", cursive;
  font-size: 100px;
  position: absolute;
  top:47%;
  left:48%;
  transform: translate(-50%, -50%);
  color:#fafafa;
  text-shadow: 2px 1px 1px  rgba(0,0,0,0.7);
}

/*-----------------------------------------------------------------*/
/*                      SECTION A PROPOS                           */
/*-----------------------------------------------------------------*/

.avatar {
  overflow: hidden;
  width: 200px;
  height:200px;
  margin:20px auto;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  border:2px solid #f2f2f2;
}

.avatar img {
width:100%;
height:100%;
}

.about {
  height: 100%;
  /* max-width:1200px; */
  padding-top: 100px!important;
  padding-bottom: 100px!important;
  position: relative;
  margin:0 auto;
  overflow: hidden;
}

/*-----------------------------------------------------------------*/
/*                      SECTION COMPETENCES                        */
/*-----------------------------------------------------------------*/

.owl-theme .owl-controls .owl-page span {
    width: 10px;
    height: 10px;
    margin: 5px 3px;
    filter: Alpha(Opacity=20);
    opacity: .2;
    background: #0C0C0C;
}

.owl-theme .owl-controls {
    margin-top: 30px;
}

/* ul.slides li { margin-bottom: 20px; } */

.skills {
  height: 100%;
  /* max-width:1200px; */
  padding-top: 100px!important;
  padding-bottom: 100px!important;
  position: relative;
  margin:0 auto;
  overflow: hidden;
}

.features {
  margin: 70px 0 0;
}

.technologie {
  /* margin:20px auto; */
  /* padding-top: 80px;
  padding-bottom: 80px; */
}

.framework {
  /* padding-top: 80px;
  padding-bottom: 80px; */
}


.cv {
  margin:30px;
}

.skill-detail {
  display:inline-block;
  height: 175px;
  width: 175px;
  line-height: 175px;
  max-width: 100%;
  background: #283048; /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #283048, #859398); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #283048, #859398);
  border-radius: 50%;
  -o-border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  display: block;
  color: #fff;
  font-size: 55px;
  text-align: center;
  vertical-align: middle;
  position: relative;
  margin: 0 auto 50px ;
}

.skill-detail p {
  font-size: 16px;
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);

}

.technologie h3, .framework h3 {
  color:#fff;
}

.technologie h4, .framework h4 {
  font-size: 20px;
  color:#fff;
}

.technologie h3:after, .framework h3:after {
  content: " ";
  border: solid 2px #ffff;
  display: block;
  width: 35px;
  margin: 25px auto;
}

.technologie h4:after, .framework h4:after {
  content: " ";
  border: solid 2px #fff;
  display: block;
  width: 35px;
  margin: 25px auto;
}

.shadow {
 text-shadow: rgb(55, 181, 161) 1px 1px,
 rgb(55, 181, 161) 2px 2px,
 rgb(55, 181, 161) 3px 3px,
 rgb(55, 181, 161) 4px 4px,
 rgb(55, 181, 161) 5px 5px,
 rgb(55, 181, 161) 6px 6px,
 rgb(55, 181, 161) 7px 7px,
 rgb(55, 181, 161) 8px 8px,
 rgb(55, 181, 161) 9px 9px,
 rgb(55, 181, 161) 10px 10px,
 rgb(55, 181, 161) 11px 11px,
 rgb(55, 181, 161) 12px 12px,
 rgb(55, 182, 162) 13px 13px,
 rgb(55, 183, 163) 14px 14px,
 rgb(56, 184, 164) 15px 15px,
 rgb(56, 185, 165) 16px 16px,
 rgb(56, 186, 166) 17px 17px,
 rgb(57, 187, 167) 18px 18px,
 rgb(57, 188, 168) 19px 19px,
 rgb(57, 189, 169) 20px 20px,
 rgb(58, 191, 170) 21px 21px,
 rgb(58, 192, 171) 22px 22px,
 rgb(58, 193, 172) 23px 23px,
 rgb(59, 194, 173) 24px 24px,
 rgb(59, 195, 174) 25px 25px,
 rgb(59, 196, 175) 26px 26px,
 rgb(60, 197, 176) 27px 27px,
 rgb(60, 198, 177) 28px 28px,
 rgb(60, 199, 178) 29px 29px,
 rgb(61, 201, 179) 30px 30px;
}

/*-----------------------------------------------------------------*/
/*                      SECTION PROJETS                            */
/*-----------------------------------------------------------------*/

.portfolio {
  margin:0 auto;
  padding-top: 100px!important;
  padding-bottom: 120px!important;
  position: relative;
  height: 100%;
  /* max-width:1200px; */
}

.projets {

}

.projet-item {
  cursor: pointer;
  margin:20px auto;
  position: relative;
  height:450px;
  width:100%;
  background:#fafafa;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  -webkit-box-shadow:0 0 7px rgba(0,0,0,.3);
  -moz-box-shadow:0 0 7px rgba(0,0,0,.3);
  box-shadow:0 0 7px rgba(0,0,0,.3);
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

.projet-image {
  overflow: hidden;
  padding:10px;
  position: relative;
  width:100%;
  height: 250px;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

.projet-item h5:after {
  content: " ";
  border: solid 2px #3dc9b3;
  display: block;
  width: 35px;
  margin: 25px auto;
}

.projet-info {
  padding:15px;
}

.projet-info p {
  font-size: 0.75em;
}

.projet-detail {
  position: absolute;
  height:200px;
  width: 100%;
  opacity:0;
  visibility: hidden;
  bottom: 100%;
  top:0;
  left: 0;
  z-index: 0;
  text-align: center;
  font-size: 12px;
  color: #fafafa;
  padding: 20px;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

.projet-detail a {
  position: absolute;
  top:28%;
  left: 16%;
  text-align: center;
  color: #fafafa;
}

.projet-item:hover .projet-detail {
  opacity:1;
  padding:20px;
  visibility: visible;
  background: rgba(0, 0, 0, 0.6);
  z-index: 0;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

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

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.contact {
  /* max-width:1200px; */
  padding-top: 100px!important;
  padding-bottom: 100px!important;
}

form {
  max-width: 1200px;
  text-align: center;
  margin: 20px auto;
}

.form-contact {
  padding:20px 0 15px;
}
form input, form textarea {
  background-color: #f2f2f2;
  border: 0;
  outline: 0;
  padding: 1em;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  display: block;
  width: 100%;
  margin-top: 1em;
  font-family: 'Raleway', sans-serif;
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
  resize: none;
}
form input:focus, form textarea:focus {
  -moz-box-shadow: 0 0px 2px #e74c3c !important;
  -webkit-box-shadow: 0 0px 2px #e74c3c !important;
  box-shadow: 0 0px 2px #e74c3c !important;
}

form #submit {
  color: #fff;
  background-color: #3f3f3f;
  -webkit-box-shadow: inset 0 2px rgba(255,255,255,.29);
  -moz-box-shadow: inset 0 2px rgba(255,255,255,.29);
  box-shadow: inset 0 2px rgba(255,255,255,.29);
  border: solid 2px #fff;
  cursor: pointer;
}

form #submit:hover {
  -moz-box-shadow: 0 1px 1px 1px rgba(170, 170, 170, 0.6);
  -webkit-box-shadow: 0 1px 1px 1px rgba(170, 170, 170, 0.6);
  box-shadow: 0 1px 1px 1px rgba(170, 170, 170, 0.6);
}
form textarea {
  height: 178px;
}

.half {
  float: left;
  width: 48%;
  margin-bottom: 1em;
}

.right {
  width: 50%;
}

.left {
  margin-right: 2%;
}

/* Clearfix */
.cf:before,
.cf:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.cf:after {
  clear: both;
}

.info {
  padding:20px;
}

.info-detail {
  padding:15px 0;
}

.info a {
  color:#000;
}

.info a:hover {
  color:#fafafa;
}

/** Google maps **/

iframe {
  width: 100%;
}

/*-----------------------------------------------------------------*/
/*                      SECTION FOOTER                            */
/*-----------------------------------------------------------------*/

#footer {
	padding: 4em 2em 1em 2em;
  background-color: #3f3f3f;
}

#footer a {
	color:#fafafa;
}

#footer a:hover {
	color:#02c9c9;
}

#footer  {
	color:#B9F3D6;
}

#footer p {
	color:#f2f2f2;
}

#footer > .inner {
	margin: 0 auto;
	width: 80em;
}

#footer .copyright {
	color: #bfbfbf;
	font-size: 0.9em;
	margin: 0 0 2em 0;
	padding: 0;
	text-align: center;
}

#footer .copyright .icons a {
	border-radius: 100%;
	box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 0px 0px 4px #fff, 0px 0px 0px 5px rgba(0, 0, 0, 0.1);
	display: block;
	font-size: 1em;
	height: 3em;
	line-height: 3em;
	margin: 0 auto 0.7em;
	text-align: center;
	width: 3em;
}

#footer ul {
	list-style: disc;
	margin: 0 0 2em 0;
	padding-left: 1em;
}

#footer ul li {
	padding-left: 0.5em;
}

#footer ul.icons {
	cursor: default;
	list-style: none;
}

#footer ul.icons li {
	display: inline-block;
	padding: 0 2em 0 0;
}

#footer ul.icons li:last-child {
	padding-right: 18px;
}

#footer ul.icons li .icon:before {
	font-size: 2em;
}

#footer {
	padding: 3em 1em 1em 1em;
}

/* Icon */

.icon {
	text-decoration: none;
	border-bottom: none;
	position: relative;
}

.icon:before {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	text-transform: none !important;
}

/*** scroll-to-top button ***/

.scrolltop {
	display:none;
	width:100%;
	margin:0 auto;
	position:fixed;
	bottom:20px;
	right:10px;
}
.scroll {
	position:absolute;
	right:20px;
	bottom:0px;
	background:#b2b2b2;
	background:rgba(178,178,178,0.7);
	padding:20px;
	text-align: center;
	margin: 0 0 0 0;
	cursor:pointer;
	transition: 0.5s;
	-moz-transition: 0.5s;
	-webkit-transition: 0.5s;
	-o-transition: 0.5s;
}
.scroll:hover {
	background:rgba(178,178,178,1.0);
	transition: 0.5s;
	-moz-transition: 0.5s;
	-webkit-transition: 0.5s;
	-o-transition: 0.5s;
}
.scroll:hover .fa {
	padding-top:-10px;
}
.scroll .fa {
	font-size:30px;
	margin-top:-5px;
	margin-left:1px;
	transition: 0.5s;
	-moz-transition: 0.5s;
	-webkit-transition: 0.5s;
	-o-transition: 0.5s;
}

/*-----------------------------------------------------------------*/
/*                      VIDEO                                      */
/*-----------------------------------------------------------------*/

video {
  max-width: none;
}

.video-container {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
}

.video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
	    transform: translate(-50%, -50%);
}

@media (max-width: 767px) {
    .video-container {
        background: url('../../videos/Workaholic.jpg') center center / cover no-repeat;
    }

    .video {
        display: none;
    }
}


/*-----------------------------------------------------------------*/
/*                      SECTION RESPONSIVE                         */
/*-----------------------------------------------------------------*/

@media(max-width: 767px) {

  .col-half, .col-third, .col-quarter {
    width:100%;
  }

  .logo {
    margin:0px 20px;
  }

  .banner p {
    margin:0;
  }

  .banner h1 {
    font-size: 50px;
  }


  .parallax1 a {
    left:40%;
  }

  .parallax1 h2, .parallax2 h2, .parallax3 h2 {
    top:49%;
    font-size: 50px;
    left:50%;
    width:100%;
  }

  .projet-item {
    height:100%;
    width:100%;
  }

  .projet-item img {
    height: 200px;
    width;100%;
  }

}


@media only screen and (min-width: 768px) {

  .container-flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    `
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;

    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;

    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;

    -webkit-box-pack: start;
    -moz-box-pack: start;
    `
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;

    -webkit-align-content: space-evenly;
    -ms-flex-line-pack: space-evenly;
    align-content: space-evenly;

    -webkit-box-align: start;
    -moz-box-align: start;

    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
  }

  .col-quarter {
    width:50%;
  }

  .banner h1{
    font-size: 100px;
  }

  .arrows {
    top:85%;
  }


  .parallax1 h2, .parallax2 h2, .parallax3 h2 {
    font-size: 100px;
    left:50%;
    width:100%;
  }

  .projet-item {
    height:350px;
    width:300px;
  }

  .projet-image {
    height:200px;
  }

  .projet-detail {
    height:200px;
  }

  .projet-detail a {
    top:26%;
    left:20%;
  }

}

@media only screen and (max-width: 992px) {

  .logo {
    font-size: 16px;
    position: fixed;
    top: 0;
  }

  nav ul {
    max-height: 0px;
    padding-right:0;
    background-color: #3f3f3f;
  }

  nav.black ul {
    background-color: #3f3f3f;
  }

  .showing {
    max-height: 34em;
  }

  nav ul li {
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
    text-align: center;
  }

  .menu-icon {
    display: block;
  }
}

@media only screen and (min-width: 992px) {

  .col-quarter {
    width:25%;
  }

  .projet-item {
    height:335px;
    width:200px;
  }

  .projet-image {
    height:175px;
  }

  .projet-detail {
    height:175px;
  }

  .projet-detail a {
    top:22%;
    left:5%;
  }



}

@media only screen and (min-width: 1200px) {

  nav ul li {
    padding:0px 40px
  }

  .portfolio .col-quarter {
    margin-top:40px;
    margin-bottom:10px;
  }
  .projet-item {
    height:360px;
    width:275px;
  }

  .projet-image {
    height:200px;
  }

  .projet-detail {
    height:200px;
  }

  .projet-detail a {
    top:26%;
    left:18%;
  }

  #footer > .inner {
    width: 65em;
  }
}

@media only screen and (max-device-width: 1366px) {

    .header {
        background-attachment: scroll;
    }
    .parallax1 {
        background-attachment: scroll;
    }

    .parallax2{
        background-attachment: scroll;
    }

    .parallax3 {
        background-attachment: scroll;
    }
}


/*-----------------------------------------------------------------*/
/*                      PHP ERRORS                           */
/*-----------------------------------------------------------------*/
xdebug-error {
  background-color: 	#400D01 !important;
  border-color: 		#26011B !important;
  color: 				#F1D179 !important;
  font-size: 			1.4em;
  margin: 			auto;
}
.xdebug-error th {
  background-color: 	#400D01 !important;
  color: white !important;
  padding: 			5px;
  text-shadow: none !important;
  font-size: 16px;
  font-weight: normal;
}
.xdebug-error th span{
  background-color: 	#400D01 !important;
  color: 				#F1D179 !important;
  font-size: 			large !important;
}
.xdebug-error tr td {
  background-color: 	#59331A !important;
}