/* css général */

* {
margin: 0;
padding: 0;
color: #ababab;
}

a { 
text-decoration: none;
}

a img {
border: none;
}

body {
background-color: #2c2c2c;
}

@font-face{
font-family: "lunabar";
src: url("LUNABAR_.ttf");
}

.content {
margin-top: 25px;
margin-bottom: 150px;

}

#site {
margin: auto;
margin-top: 50px;
width: 900px;
}


/* ====================================================
====== le CSS qui concerne la partie top du site ======
=====================================================*/


#top {    /* pour le bloc */
position: fixed;
    top: 0px;
    left: 200px;
z-index: 999; /* pour les galeries */
width: 900px;
/*height: 200px;*/

}

#top_fond {
position: fixed;
    top: 0px;
    left: 0px;
z-index: 999; /* pour les galeries */
width: 100%;
heigth: 280px;
background-image: url("images/points.png");
background-repeat: repeat-x;
width: 100%;
min-height: 280px;
}

/* le logo "Sunsun Art " 
=========================================================================================*/

#logo {

width: 268px;
height: 114px;
margin-left: 40px;
font-family: "lunabar" 
}

.sunsun /* le mot sunsun */ {
padding-top: 20px;
font-size: 33px;
transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
-webkit-transform: rotate(-8deg);
-khtml-transform: rotate(-8deg);
}

.art /* le mot art */ {
padding-left: 113px;
margin-top: -55px;
font-size: 44px;
transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
-webkit-transform: rotate(-8deg);
-khtml-transform: rotate(-8deg);
}

/* survol */

#logo a:link {	
text-decoration: none;
list-style-type: none;
text-shadow: 5px 5px 2em #000000, 5px 5px 2em #000000, 5px 5px 2em #000000, 5px 5px 2em #000000, 5px 5px 2em #000000;
}

#logo a:hover {
text-shadow: 0 0 0.2em #ffffff, 0 0 1em #ffffff, 0 0 0.2em #ffffff, 0 0 0.2em #ffffff, 0 0 0.2em #ffffff, 0 0 0.2em #ffffff;
color: #2c2c2c;
text-shadow: 40px;
}


/* le bloc de menu
========================================================================================*/

#blocmenu {

position: absolute;
top: 50px;
z-index: 999; /* pour les galeries */
margin: 50px 0 0 0;
height: 50px;
width: 700px;
background-color: #2c2c2c;
position: right;
box-shadow: 0 0 0.5em #000000, 0 0 5em #000000, 0 0 0.5em #000000, 0 0 0.5em #000000, 0 0 0.5em #000000, 0 0 0.5em #000000;

 filter: progid:DXImageTransform.Microsoft.Shadow(color='#000000', Strength=3); /* fix IE */


transform: rotate(-8deg);
	-moz-transform: rotate(-8deg);
	-webkit-transform: rotate(-8deg);
	-khtml-transform: rotate(-8deg);

border-radius: 5px;
	-moz-radius: 5px;
	-webkit-radius: 5px;
	-khtml-radius: 5px;

font-family: "lunabar";
font-size: 30px;
}

#blocmenu a {

padding-left: 30px;
padding-right: 30px;
text-decoration: none;
list-style-type: none;
transition: .4s all ease-in-out;
-webkit-transition: .4s all ease-in-out;
-moz-transition: .4s all ease-in-out;
-o-transition: .4s all ease-in-out;
}

#blocmenu p {

margin-left: 15px;
line-height: 50px;
}

.line_gallerie {
line-height: 58px;

}

#blocmenu a:hover {

color: green;
transition: .4s all ease-in-out;
-webkit-transition: .4s all ease-in-out;
-moz-transition: .4s all ease-in-out;
-o-transition: .4s all ease-in-out;
}
/* ==========================================================
=============================================================
======= le CSS qui concerne la partie accueil du site =======
=============================================================
===========================================================*/

#news {
height: 375px; /* hauteur du bloc */
width: 900px;

}

#texte_news, #latest {
float: left;
}

#texte_news {
width: 300px;
height: 400px;
margin: 25px 75px 15px 100px;
text-align: justify;
}

#latest {
width: 290px;
height: 280px;
padding: 20px 10px 10px 20px;
margin: 15px 10px 10px 10px;
border: 2px solid #000000;

border-radius: 5px;
	-moz-radius: 5px;
	-webkit-radius: 5px;
	-khtml-radius: 5px;

	box-shadow: 0 0 0.5em #000000, 0 0 0.5em #000000, 0 0 0.5em #000000, 0 0 0.5em #000000;
}

.sous_titre2 {

margin-top: -70px;

}

/* ==========================================================
=============================================================
======= le CSS qui concerne la partie galerie du site =======
=============================================================
===========================================================*/


#div_g {
margin: auto;
width: 900px;
}

#web_g, #print_g, #crea_g, #all_g {
width: 200px;
height: 200px;

margin: 10px 10px 0 10px;
float: left;
opacity : 0.5; 
filter : alpha(opacity=50); 
transition: .4s all ease-in-out;
-webkit-transition: .4s all ease-in-out;
-moz-transition: .4s all ease-in-out;
-o-transition: .4s all ease-in-out;
}

#web_g:hover, #print_g:hover, #crea_g:hover, #all_g:hover {
opacity : 1; 
filter : alpha(opacity=100); 
transition: .4s all ease-in-out;
-webkit-transition: .4s all ease-in-out;
-moz-transition: .4s all ease-in-out;
-o-transition: .4s all ease-in-out;
}

#zone_galerie {
margin-top: 250px;
z-index:500;
}

/* ==========================================================
=============================================================
========= le CSS qui concerne la partie cv du site ==========
=============================================================
===========================================================*/


.cadre {
padding: 25px;
margin: 25px;
border: 2px solid #000000;
width: 600px;

border-radius: 5px;
	-moz-radius: 5px;
	-webkit-radius: 5px;
	-khtml-radius: 5px;

	box-shadow: 0 0 0.5em #000000, 0 0 0.5em #000000, 0 0 0.5em #000000, 0 0 0.5em #000000;
}

.cadre ul {
clear: both;
}

.cadre ul li {
list-style-type: none;
font-weight: bold;
}

.clair {
color: #888888;
}

.sous_titre {
/*float: left;*/
margin-bottom: -60px;
margin-left: 50px;
}


/* ==========================================================
=============================================================
======= le CSS qui concerne la partie contact du site =======
=============================================================
===========================================================*/

#contact {
margin-left: 250px;

}

a:hover {

color: green;
transition: .4s all ease-in-out;
-webkit-transition: .4s all ease-in-out;
-moz-transition: .4s all ease-in-out;
-o-transition: .4s all ease-in-out;
}

#contact input {
border-radius: 10px;
background-color: #1b5b16;
border: none;
margin: 5px 0 5px 10px;
padding: 5px 0 5px 10px;
width: 400px;
}

#contact textarea {
border-radius: 10px 10px 30px 10px;
background-color: #1b5b16;
border: none;
margin: 10px 0 0 10px;
padding: 10px 0 0 10px;
width: 400px;
}

#contact .contact_bouton input {
width: 90px;
box-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000;
}


/* ====================================================
===== le CSS qui concerne la partie footer du site ====
=====================================================*/

#footer {
position: fixed;
   bottom: 0px;
width: 100%;
height: 81px;
clear: both;
color: #333;
background-image: url("images/points_3.png");
background-repeat: repeat-x;
}

#footer a:hover {

color: green;
transition: .4s all ease-in-out;
-webkit-transition: .4s all ease-in-out;
-moz-transition: .4s all ease-in-out;
-o-transition: .4s all ease-in-out;
}

#footer_galerie {
position: fixed;
   bottom: 0px;
width: 100%;
height: 87px;
clear: both;
color: #333;
background-image: url("images/points_3.png");
background-repeat: repeat-x;
z-index:10;
}

#liens_footer {
text-align: center;
position: fixed;
left: 50%;
width: 450px;
margin-top: 40px;
margin-left: -225px; /* la moitié de la largeur */
background-color: #2c2c2c;
border-radius: 25px;
box-shadow: 0 0 0.2em #2c2c2c, 0 0 0.2em #2c2c2c
}

#twitter {
width: 34px;
height: 34px;
background-image: url("images/social/twitter.jpg");
position: fixed;
    bottom: 5px;
    left: 40px;
transition: .4s all ease-in-out;
-webkit-transition: .4s all ease-in-out;
-moz-transition: .4s all ease-in-out;
-o-transition: .4s all ease-in-out;
}

#twitter:hover {
background-image: url("images/social/twitter_active.jpg");
transition: .4s all ease-in-out;
-webkit-transition: .4s all ease-in-out;
-moz-transition: .4s all ease-in-out;
-o-transition: .4s all ease-in-out;
}

#facebook {
width: 34px;
height: 34px;
background-image: url("images/social/facebook.jpg");
position: fixed;
    bottom: 5px;
    left: 90px;
transition: .4s all ease-in-out;
-webkit-transition: .4s all ease-in-out;
-moz-transition: .4s all ease-in-out;
-o-transition: .4s all ease-in-out;
}

#facebook:hover {
background-image: url("images/social/facebook_active.jpg");
transition: .4s all ease-in-out;
-webkit-transition: .4s all ease-in-out;
-moz-transition: .4s all ease-in-out;
-o-transition: .4s all ease-in-out;
}

#google_plus {
width: 34px;
height: 34px;
background-image: url("images/social/google.jpg");
position: fixed;
    bottom: 5px;
    left: 140px;
transition: .6s all ease-in-out;
-webkit-transition: .6s all ease-in-out;
-moz-transition: .6s all ease-in-out;
-o-transition: .6s all ease-in-out;
}

#google_plus:hover {
background-image: url("images/social/google_active.jpg");
transition: .6s all ease-in-out;
-webkit-transition: .6s all ease-in-out;
-moz-transition: .6s all ease-in-out;
-o-transition: .6s all ease-in-out;
}

/*=======================================
==========   retour en haut =============
=======================================*/

#reac {
height: 100px;
width: 100px;
position: fixed;
    bottom: 0px;
    right: 40px;
background-color: red;
}

#reac1 {
height: 100px;
width: 100px;
position: fixed;
    bottom: -550px;
    right: 40px;
background-color: green;
transition: .9s all ease-in-out;
-webkit-transition: .9s all ease-in-out;
-moz-transition: .9s all ease-in-out;
-o-transition: .9s all ease-in-out;
}

#reac2 {
height: 100px;
width: 100px;
position: fixed;
    bottom: -550px;
    right: 40px;
background-color: blue;
transition: .7s all ease-in-out;
-webkit-transition: .7s all ease-in-out;
-moz-transition: .7s all ease-in-out;
-o-transition: .7s all ease-in-out;

}

#reac3 {
height: 100px;
width: 100px;
position: fixed;
    bottom: -550px;
    right: 40px;
background-color: purple;
transition: .4s all ease-in-out;
-webkit-transition: .4s all ease-in-out;
-moz-transition: .4s all ease-in-out;
-o-transition: .4s all ease-in-out;
}

#reac4 {
height: 100px;
width: 100px;
position: fixed;
    bottom: -550px;
    right: 40px;
background-color: orange;
transition: .2s all ease-in-out;
-webkit-transition: .2s all ease-in-out;
-moz-transition: .2s all ease-in-out;
-o-transition: .2s all ease-in-out;
}

#reac:hover > #reac1 {
position: fixed;
    bottom: 20px;
background-color: green;
transition: .2s all ease-in-out;
-webkit-transition: .2s all ease-in-out;
-moz-transition: .2s all ease-in-out;
-o-transition: .2s all ease-in-out;
}

#reac:hover > #reac2 {
position: fixed;
    bottom: 30px;
background-color: blue;
transition: .4s all ease-in-out;
-webkit-transition: .4s all ease-in-out;
-moz-transition: .4s all ease-in-out;
-o-transition: .4s all ease-in-out;
}

#reac:hover > #reac3 {
position: fixed;
    bottom: 40px;
background-color: purple;
transition: .7s all ease-in-out;
-webkit-transition: .7s all ease-in-out;
-moz-transition: .7s all ease-in-out;
-o-transition: .7s all ease-in-out;
}

#reac:hover > #reac4 {
position: fixed;
    bottom: 50px;
background-color: orange;
transition: .9s all ease-in-out;
-webkit-transition: .9s all ease-in-out;
-moz-transition: .9s all ease-in-out;
-o-transition: .9s all ease-in-out;
}











/* suite css général */

/* =================================================
== les classes pour charger en décalage les halos ==
==================================================*/

.s2 {
transition: .2s all ease-in-out;
-webkit-transition: .2s all ease-in-out;
-moz-transition: .2s all ease-in-out;
-o-transition: .2s all ease-in-out;
}

.s3 {
transition: .3s all ease-in-out;
-webkit-transition: .3s all ease-in-out;
-moz-transition: .3s all ease-in-out;
-o-transition: .3s all ease-in-out;
}

.s4 {
transition: .4s all ease-in-out;
-webkit-transition: .4s all ease-in-out;
-moz-transition: .4s all ease-in-out;
-o-transition: .4s all ease-in-out;
}

.s5 {
transition: .5s all ease-in-out;
-webkit-transition: .5s all ease-in-out;
-moz-transition: .5s all ease-in-out;
-o-transition: .5s all ease-in-out;
}

.s6 {
transition: .6s all ease-in-out;
-webkit-transition: .6s all ease-in-out;
-moz-transition: .6s all ease-in-out;
-o-transition: .6s all ease-in-out;
}

.s7 {
transition: .7s all ease-in-out;
-webkit-transition: .7s all ease-in-out;
-moz-transition: .7s all ease-in-out;
-o-transition: .7s all ease-in-out;
}

.s8 {
transition: .8s all ease-in-out;
-webkit-transition: .8s all ease-in-out;
-moz-transition: .8s all ease-in-out;
-o-transition: .8s all ease-in-out;
}

.s9 {
transition: .9s all ease-in-out;
-webkit-transition: .9s all ease-in-out;
-moz-transition: .9s all ease-in-out;
-o-transition: .9s all ease-in-out;
}