/*
Theme Name: Maximefaure2015 
Theme URI: http://maximefaure.net
Description: Theme portfolio perso fait avec amour . W3C Clean
Version: 2.0
Author: Maxime FAURE
Author URI: http://maximefaure.net
Tags: 3 column theme, clean, portfolio
*/
/* =WordPress Core
-------------------------------------------------------------- */
*{padding:0;margin:0}
.clear{clear:both}
html { margin-top: 0 !important;}
::-webkit-scrollbar-track { background: rgba(25, 25, 25, 0.75);}
::-webkit-scrollbar {width: 6px;}
::-webkit-scrollbar-thumb { background: #64a8d1; width: 10%;}
a {  text-decoration: none; color: #8f8f8f; }
#wpadminbar{z-index:99999999999999!important}
.btn{position:relative}
a.btn { color: #64a8d1; border: 3px solid #64a8d1; transition: all 0.3s; padding:1em; margin: 1%; display: inline-block;z-index:1;position:relative;overflow:hidden}
a.btn:hover { color: white;cursor:pointer}
.btn:hover:after { height: 320%;}
a.btn:after { content: ""; position: absolute; z-index: -1; width: 100%; height: 0; bottom: -56px; left: 0;background-color: #64a8d1;-moz-transform: skewY(-10deg);-ms-transform: skewY(-10deg);
    -webkit-transform: skewY(-10deg); transform: skewY(-10deg);transition: all 1s;}
p { margin-bottom: 2%;line-height:180%;}
h1.titre:after { content: " ";display: block; width: 100%;border-bottom: 1px solid; margin: 0.2em 0;}

h1{text-transform:uppercase;margin-bottom:2%;margin-top:2%;/*margin:2%;text-align:center*/}

body{font-family: 'Roboto', sans-serif;color:#454545;font-weight:100;font-size: small;
    line-height: 150%;}
h1, h2, h3, h4, h5, h6 { /*font-family: 'Oswald', sans-serif; color: #64A8D1;*/ font-weight:300}
h3{font-family: 'Playfair Display', serif;}
h2 {font-weight: 400;    border-top: 1px solid #00000024;    padding-top: .5em;}

.alignnone { margin: 5px 20px 20px 0;}
.aligncenter, div.aligncenter { display: block; margin: 5px auto 5px auto;}
.alignright { float:right; margin: 5px 0 20px 20px;}
.alignleft { float: left; margin: 5px 20px 20px 0;}
.aligncenter { display: block; margin: 5px auto 5px auto;}
a img.alignright { float: right; margin: 5px 0 20px 20px;}
a img.alignnone { margin: 5px 20px 20px 0;}
a img.alignleft { float: left; margin: 5px 20px 20px 0;}
a img.aligncenter { display: block; margin-left: auto; margin-right: auto}
a{transition:all 0.5s}


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

/*_______________________header____________*/
.loader {background-image:url('images/loader.gif');background-repeat:no-repeat;background-position:50% 50%;position:fixed;background-color:white;height:100%;width:100%;opacity:0;transition:all 1s;z-index:-900000}
.loader.visible{opacity:.9;z-index:99999999!important}
.logo_cont{    position: relative; width: 100%; overflow: hidden; z-index: 999999!important;}
.logo_cont a {transition:all 1s; margin-top: 0!important;width: auto!important;height: auto!important;
 z-index: 99999;background-color: rgba(255, 255, 255, 0.73);padding:1%;display: block; margin: auto;background-position: 50% -100%;background-image: rgba(255, 255, 255, 0)}
.header .logo_cont a:hover{transition:all 0.3s;background-color: black}
.logo_cont a:hover img {margin-left:100%;opacity:0}
.logo_cont a:hover{background-image:url('images/home.png');background-repeat:no-repeat;background-color:rgba(100, 168, 209, 0.7);background-position:50% 50%;}
.logo_cont a img {max-width:100%;transition:all 1s}
.logo a img {  display: block;  max-width: 100%;}
header{position: relative;background:url('images/bg.jpg');background-size:cover;}
#bgvid {    min-width: 100%;    position: absolute;    top: 0;    right: 0;}
.videoo { width: 100%;    height: 100%;    position: absolute;overflow: hidden;}
.home .logo_cont{ top: 50%; margin-top: -200px; }
.home header{height: 94vh;}
.home .logo_cont a {max-width: 300px;padding: 5%;background-position: 50% -100%;}
.home .logo_cont a:hover{background-image:url('images/bas.png');background-color:rgba(100, 168, 209, 0.7);background-position:50% 50%;}
/*_______________________header______/_____*/


/*_________MENU_________*/

.home nav { display:block;background: #262626;font-size: 11pt;}
nav{display:none}
nav ul {padding: 0;margin: 0;height: 40px;height:6vh;text-align:center}
nav li {display: inline;/*float: left;*/}
nav ul a {color: #fff;display: inline-block;text-align: center;text-decoration: none;
padding:2vh 3em;    height: 6vh;}
nav ul a:hover{background:whitesmoke;color:#262626}
nav a#pull {display: none;}

@media screen and (max-width: 800px) {nav {height: auto;border-bottom: 0;}
.home header {height:100vh}
nav {    padding: 3px;}
nav ul {display: none;height: auto;}
nav li {width: 100%;float: none;position: relative;border-bottom: 1px solid #262626;}
nav ul a {    text-align: center; width: 100%; text-indent: 25px; background: #2e2e2e;padding: 2em 0;padding:2vh 0}
nav a#pull {  transition:all 0.5s;  display: block; background-color: #262626; width: 90%; position: relative; padding: 5%; color: white;}
nav a#pull:after {content: ""; transition:all 0.5s;background: url(images/nav-icon.png) no-repeat; width: 20px; height: 20px; color: #FFF; display: inline-block; position: absolute; right: 0; top: 50%; margin-top: -10px;}
nav a#pull:hover:after{transform:rotate(90deg)}
}
.fixe { z-index: 99999!important; position: fixed; top: 0;    width: 100%;}


/*_________MENU___/______*/

/*________CONTENT ___________________________*/

.contenu { padding: 5%; border: 3px solid #64a8d1;margin:-2%;}
.container-demi img { min-width: 100%; height: auto;}
.metaslider.metaslider-nivo.metaslider-1168.ml-slider {
    min-width: 100%;
}
.textwidget .btn { display: block; width: 50%; margin: 2%auto;text-align:center}
.container { width: 1200px;max-width: 80%; margin: auto;}
.marge{margin-top: 3em;}
.section { padding: 4%;}
.section.blanc { /*background:whitesmoke*/}
.section.gris { background:rgb(226, 226, 226)}
.section.gris {
    background: rgb(26 26 26);
}


.bloc_competences {width: 46%;padding: 2%; float: left;}

.bloc_competences_full h2, .bloc_competences_full h3, .bloc_competences_full p, .bloc_competences_full ul {
    /*text-align: center;*/
}
.bloc_competences_full li {
    display: inline;
}

.bloc_competences_full li:before{
content:"//";font-weight:bolder;color:#64a8d1;
margin:1%}
.bloc_competences_full li:first-child:before{    display:none}

.bloc_competences_full h2{
text-transform:uppercase;margin-top:2em
}

.bloc_competences_full h3{
margin-top:2em
}
.footer_copyright {text-align: center;padding:2%}
.container-demi { width: 50%; float: left;}
video {    margin-bottom: 1%;width:100%}
.container-demi.vid{width:48%;margin-left:1%}

.container-demi span { text-align: center; color: whitesmoke; padding: 0; margin: 0;  text-transform: uppercase; display:inherit;}
img{max-width:100%;height:auto}
.left, .right {float: left; width: 50%; background-size: cover; height:200px;    position: relative;    background-position: 50% 50%;background-color: #1D1D1D;}
.left a, .right a{position:absolute;width:100%;height:100%;display:table;background-color:rgba(0,0,0,0.5);text-shadow:0px 0px 10px black}
.left p, .right p{display:table-cell;vertical-align:middle;text-align:center}
.left a:hover, .right a:hover { font-size: xx-large; background-color: rgba(46, 46, 46, 0.84);}
.video-container { position: relative;padding-bottom: 56.25%; padding-top: 0px; height: 0;  overflow: hidden;}
.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;border:0}
/*--------------------------------------------------------------
    Portfolio
-------------------------------------------------------------- */

/* Grille portfolio */

ul#portfolio-list {margin-top: 20px;}
ul#portfolio-list h2 {font-weight: lighter;}
.thumbnail {width: 100%;overflow:hidden}
.isotope, .isotope .isotope-item {-webkit-transition: all 0.6s ; -moz-transition: all 0.6s ;-ms-transition: all 0.6s ; -o-transition: all 0.6s ;transition: all 0.6s ;}
.isotope { transition-property: height, width;}
.isotope .isotope-item { transition-property: transform, opacity, height, width;list-style-type: none;}
.isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition {transition-duration: 0s;}
ul#portfolio-filter {margin-top: 20px;}
a.thumbnail:hover, a.thumbnail:focus { box-shadow: none; outline: 0 none;}
.thumbnail { border-radius: 0 0 0 0; box-shadow: none;display:block}
.single-portfolio header {text-align: center;}
.single-portfolio h1 { margin: 50px auto 0;}
.single-portfolio h2 {font-family: Georgia, serif;font-size: 18px;font-style: italic;font-weight: lighter; margin: 0;}
ul#project-details li { margin: 10px 0;}
.single-portfolio .carousel img { height: auto; left: 0;margin: 0 auto; min-width: inherit;position: relative; top: 0;border:0!important}
.thumbnail img { margin: 0!important;width:100%;height:auto;border:0!important;z-index: -1;transition: all 2s;}
.thumbnail:hover img { transform: scale(1.5); transform: rotate(20deg) scale(2);}
.wrap{   z-index:1; position: absolute; height: 0%; width: 100%; height: 0; overflow: hidden; border: 0!important; border-radius: 0 0 300% 0;;transition: all 0.7s}
.wrap .hover{display:table;height:100%;width:100%;text-align:center;border:0!important}
.wrap .hover div {display: table-cell;vertical-align: middle;text-transform: uppercase;
 color: whitesmoke;border:0!important; /*font-size: xx-large;*/ font-family: 'Oswald', sans-serif;padding: 0 2em}
a:hover .wrap {     background-color: rgba(100, 168, 209, 0.95); height: 100%; width: 100%; opacity: 1; top: 0; border-radius: 0;}
.item-portfolio { width: 33%;margin:0;display:block;border:0!important}
.portfolio { }
#portfolio-filter{text-align:center}
#portfolio-filter li{display:inline}
#pull:hover{cursor:pointer}
#portfolio-filter li a { display: inline-block;padding: 10px 20px;margin: 1em;    border: none;    border-bottom: 2px solid;transition: all 1s;    font-size: 11px;    font-weight: 400;}
#portfolio-filter li a:hover, #portfolio-filter li a.active{  color: white; background-color: #64a8d1;}
div#portfolio-wrapper {    width: 90%;    margin: auto;}
ul.category_real li:before {
    content: "#";
    font-weight: bold;
    color: #B7B163;
}

ul.category_real li {
    list-style-type: none;
    display: inline;
    margin-right: 1em;
    /*font-weight:500;
    color: #004799;*/
    font-weight: 200;
    color: #B7B163;
    font-style: oblique;
    text-transform: uppercase;
   
}

ul.category_real {
    margin-left: 0;
}

/*___________FOOTER__________*/
.footer_top_cont {background-color: rgb(29, 29, 29);color: whitesmoke;padding: 4%;}
input, textarea {background: rgba(255, 255, 255, 0.12); border: 0; padding: 3%;    width: 100%!important;color:white}
input[type=submit]{background:transparent;border:2px dotted #64a8d1;color:#64a8d1;transition:all 0.5s}
input[type=submit]:hover{background:#64a8d1;border:2px solid #64a8d1;color:black;cursor:pointer}
/*_____________RESPONSIVE________*/
@media screen and (max-width: 1500px) {
.item-portfolio { width: 32.3%;}}

@media screen and (max-width: 1300px) {
.item-portfolio { width: 32.3%;}}

@media screen and (max-width: 1000px) {
.container-demi, .container-demi.vid{width:100%;float:none;margin-bottom:7%}
.wrap .hover div {font-size:large}
.item-portfolio { width: 49%;}
}

@media screen and (max-width: 600px) {
.home .logo_cont {top: 50%; margin-top: -150px;}
.textwidget .btn { width: auto;}
.item-portfolio { width: 49%;}
.bloc_competences{float:none;width:94%}}


#eu-cookie-law {
    background-color: #1d1d1d;
    border: 0;
    color: #64a8d1;
    font-size: 10px;
    line-height: 1.5;
    overflow: hidden;
    padding: 2%;
    position: fixed;
    width: 96%;
    bottom: 0;
    left: 0;
	z-index:9999999999999;
}

#eu-cookie-law input {
    font-size: 9px;
    display: block;
    
    width: 105px!important;
    margin: 0 1em;
}


body {
    font-family: 'Roboto', sans-serif;
    color: whitesmoke;
    background-color: #333333;
}

h1, body{
	color:whitesmoke!important;
}