/* Ce code absolument obsolète sera bientôt réécrit totalement */
/*Definition des polices de caractères */
@font-face {
    font-family: 'latoregular';
    src: url('fonts/lato-reg-webfont.eot');
    src: url('fonts/lato-reg-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/lato-reg-webfont.woff') format('woff'),
         url('fonts/lato-reg-webfont.ttf') format('truetype'),
         url('fonts/lato-reg-webfont.svg#latoregular') format('svg');
    font-weight: normal;font-style: normal;}

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

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

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

}
	
/*Initialisation */

*{margin:0px 0px 0 0;padding:0 0 0 0;font-family:"latoregular", serif;}

html{height:100%;} /* Pour que le fond d'écran atteigne toute la page */

p{font-family:"latoregular", serif;text-align:justify;}
body
{ 
/* Radient gris-noir */
background: #ffffff;
background: -moz-radial-gradient(center, ellipse cover,  #ffffff 36%, #c4c4c4 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(36%,#ffffff), color-stop(100%,#c4c4c4));
background: -webkit-radial-gradient(center, ellipse cover,  #ffffff 36%,#c4c4c4 100%);
background: -o-radial-gradient(center, ellipse cover,  #ffffff 36%,#c4c4c4 100%);
background: -ms-radial-gradient(center, ellipse cover,  #ffffff 36%,#c4c4c4 100%);
background: radial-gradient(ellipse at center,  #ffffff 36%,#c4c4c4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#c4c4c4',GradientType=1 );
background-attachment:fixed;
/*  width:90%;  Bordures de la page pour donner un peu d'espace */
margin: 0 auto;
}


/* 
DEBUT
HEADER ET MENU

*/

header{
	position:fixed;
	width:100%;
	z-index:50;
}

.nav_up{
	-moz-box-shadow: 0px 5px 10px 0px #656565; /* Old Mozilla */
	-webkit-box-shadow: 0px 5px 10px 0px #656565; /* Chrome Safari */
	-o-box-shadow: 0px 5px 10px 0px #656565; /* OPER MOBILE */
	box-shadow: 0px 5px 10px 0px #656565;
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=180, Strength=10); /* IE */
	background-color:white;
	margin-top:20px;
	width:100%;
	position:fixed;
	
}

header .logo-main{float:left;position:absolute;margin-top:0px;z-index:52;max-width:80%;margin-left:5%;}
header .logo-main img{max-width:80%;transition:0.3s;}
header .logo-main img:hover{max-width:80%;transition:0.3s;transform:rotate(-15deg);}
header ul{list-style-type:none;float:right;height:100%;font-size:0;}
header li{display:inline-block;font-size:initial;}
header li a{text-decoration:none;color:inherit;
	display:block;
	min-width:140px;
	height: 100%;
	text-align: center;
	line-height: 80px;
	font-family: 'latobold','latoregular', Helvetica, Arial, sans-serif;
	background: white;
	border-left:2px solid #E3B31F;}
header li a:hover{color:#E3B31F;transition:0.3s;background-color:#fafafa;}



#logo img{
margin:0 auto;
display:block;
max-width:80%; /* Taille max */

}
ul{list-style-type:none;}

.dateenvoicrea{font-style:italic;}

.categorie{height:139px;text-align:center;}

.categorie img{max-height:100%;max-width:50%;}

.categorie p{font-family:"latoitalic",serif;text-align:center;color:black;}


#contact {margin-right:auto;margin-left:auto;}
#contact input{margin:5px 0px 5px 0px; }
.red{color:#C62B2E;}
.petit{font-size:70%;}
    

/*
FIN
HEADER ET MENU

*/


/*
debut
PRINCIPALE (Skinneeeeeer!)

*/

.main{}

/* PRESENTATION */
.notice{
	text-align:center;
	width:90%;
	display: block;
	font-size:0.9rem;
	border-radius:5px;
	padding:5px 10px;
	border: 1px solid #C99E1C;
	color:#000;
	background-color: #E3B31F55;
	font-weight:700;
	margin:10px auto;
}

.notice a{
	color:#C99E1C;
}


/* Titre principal */
h1{text-align:center;font-family:'latobold', serif;margin-bottom:10px;}
h2{text-align:center;font-family:'latoitalic', serif;margin-bottom:10px;}

/* ZONE 1 ABOUT ME */

.zone_about{
	height:100vh;
	width:100%;
	background-image:url(../img/pacman.jpg);
	background-size:cover;
	background-repeat:no-repeat;
	background-attachment: fixed;
	background-position: center 0;
	display:table;
	
}
.zone_about .bg_layer{width:100%;height:100%;background:rgba(0,0,0,0.5);display:table-cell;vertical-align:middle;}

#about h1{color:#E3B31F;font-variant:small-caps;font-size:300%;}
#about h2{color:#eeeeee;font-family:'latolight', serif;font-size:200%;}

#about .button {
	-moz-box-shadow: 0px 10px 14px -7px #332c25;
	-webkit-box-shadow: 0px 10px 14px -7px #332c25;
	box-shadow: 0px 10px 14px -7px #332c25;
	background-color:#e3b21f;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:'latolight', serif;
	text-transform:uppercase;
	font-size:15px;
	font-weight:bold;
	padding:15px 12px;
	margin-top:15px;
	text-decoration:none;
}
#about .button:hover {
	background-color:#f5c020;
	
}
#about .button:active {
	position:relative;
	top:1px;
}

#about p{font-size:125%;line-height:120%;font-family:latolight, serif;text-align:center;color:#eeeeee;}
#about strong{font-family:latoregular, serif;font-weight:normal;}



/* COMPETENCES */

#comp_prim h3{padding:15px;}


.exemples_crea{position:relative;bottom:0px;display:block;}
.exemples_crea a{cursor:default;}


.compimage img{max-width:80%;margin:0 auto;display:block;}

.resp-tab-content h3{margin-top:15px;margin-bottom:15px;}



strong {font-weight:400px;}

/* CREATIONS */
#toute_crea{font-weight:700px;font-style:italic;padding: 10px 10px 10px 10px;background-color:rgba(255,255,255,0.5);
font-size:20px;text-align:center;border-radius:50px;font-family:"latoregular", serif;
-webkit-box-shadow: 8px 7px 22px 0px rgba(51, 50, 50, 0.64);
-moz-box-shadow:    8px 7px 22px 0px rgba(51, 50, 50, 0.64);
box-shadow:         8px 7px 22px 0px rgba(51, 50, 50, 0.64);
cursor:pointer;}

.liencrea {font-weight:700;margin-top:60px;text-align:center;}
.lightbox .liencrea {font-weight:700;text-align:center;font-size:120%;color:#B32848;}
.lightbox .liencrea a{cursor:pointer;text-decoration:underline;}
/*
FIN
PRINCIPALE (Skinneeeeeer!)

*/

footer {background-color:#3E3D40;float:left;width:100%;padding-top:15px;}
.footer_col{text-align:center;}
.footer_col h2{text-align:center;font-family:'latobold', serif;margin-bottom:10px;color:#eeeeee;}
.co_formcontact{text-align:center;padding-left:5%;}
.co_formcontact label{color:white;font-family: 'latobold','latoregular', Helvetica, Arial, sans-serif;}
.co_formcontact  .errorsent{color:#C62B2E;font-family:'latobold','latoregular', Helvetica, Arial, sans-serif;font-size:120%;}
.co_formcontact input[type="text"],.co_formcontact textarea{color:#FFFFFF;border-radius:5px;padding:5px 5px 5px 5px;background-color:transparent;border:2px solid transparent;border-bottom-color:#E3B31F;margin-top:10px;transition:ease-in-out 0.3s}
.co_formcontact input[type="text"]:focus,.co_formcontact textarea:focus{background-color:rgba(255,255,255,0.1);transition:ease-in-out 0.3s}
.co_formcontact textarea{width:99.8%;height:120px;padding:10px 0px 10px 0px;}
.co_formcontact input[type="text"]{width:35%;padding:10px 0px 10px 30px;background-repeat:no-repeat;background-position:left;}
.co_formcontact input[type="text"]#location{visibility: hidden;}
.co_formcontact button{
	background-color:#E3B31F;
	border:1px solid #e3b21f;
	display:inline;
	cursor:pointer;
	color:#eeeeee;
	font-family: 'latobold','latoregular', Helvetica, Arial, sans-serif;
	font-size:17px;
	padding:10px 15px;
	margin-top:5px;
	margin-bottom:15px;
	text-decoration:none;
	margin-left:auto;
	margin-right:auto;
	transition:0.3s;
	-moz-box-shadow: 0px 5px 10px 0px #656565;
	-webkit-box-shadow: 0px 5px 10px 0px #656565;
	-o-box-shadow: 0px 5px 10px 0px #656565;
	box-shadow: 0px 5px 10px 0px #656565;
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=180, Strength=10);
}
.co_formcontact #tel{background-image:url('../img/tel.png');}
.co_formcontact #sujet_message{background-image:url('../img/subject.png');}
.co_formcontact #nom{background-image:url('../img/name.png');}
.co_formcontact #email{background-image:url('../img/mail.png');}

.co_formcontact button:hover{background-color:#C99E1C;transition:0.3s;}
.co_formcontact button:active{position:relative;top:1px;}
footer p{color:#eeeeee;text-align:center;margin-right:auto;margin-left:auto;}

/* MEDIA QUERIES */
@media screen and (max-width: 1050px){ /* 1050 px Ecran Tablette petit ordi */
  .col_4.categorie{
    width:31.666666666667%;
	
  }
  
	
	#aboutme p{font-size:110%;line-height:110%;font-family:latolight, serif;}
	
}

@media screen and (max-width: 768px){ /* 768 px Ecran Tablette  */

.col_5, .col_7{width:98.333333333333%;}
#aboutme p{line-height:120%;font-family:latolight, serif;}

.col_6.footer_col{width:98.333333333333%;}
.co_formcontact input[type="text"],.co_formcontact textarea{width:90%;}
}

@media screen and (max-width: 480px){ /* 480 px Ecran Smartphone  */
 .col_4.categorie{
    width:48.333333333333%;
	margin-top:230px;
	
  }
  .col_4.categorie img{
    max-width:100%;
  }
  

#about p{font-size:100%;}

.profilimg {width:48.333333333333%;margin-left:15px;}

.compimage{width:100%;margin-right: auto;margin-left:auto;}

}