</*
Theme Name: Reseaux de la Creation
Theme URI: 
Description: The first theme created by Simon Denise.
Version: 0.1
Author: Simon Denise
*/


* {
    margin: 0; 
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
 outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
html {
	color:black;
  overflow-x: hidden;
}
body {
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
   font-weight: 300;
}
#container {
}
ul { list-style: none;  }

/* 
/////////
SIDEBAR
/////////
*/

a {
	color:black;
}
a:link {
	text-decoration: none;
}
a:hover {

}
.aligncenter {
  position: relative;
  left: 50%;
  transform: translate(-50%, 0%);
}
#logo {
position: absolute;
top: 15px;
width: calc((100% - 800px)/2);
}
#logo img {
width: 99px;
height: 127px;
position: relative;
left: 50%;
transform: translateX(-50%);
}
#menu-gauche li {
  font-size: 24px;
  color: black;
  display: inline-block;
  vertical-align: top;
  margin-right: 3vw;
}
.menu-1 > a:hover {
  color: #cc071d;
        -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}
.gris {
    height: 230px;
    width: 240px;
    position: absolute;
    top: 0;
    right: -16px;
    z-index: -30;
}
#post p {
      max-width: 800px;
    margin: 25px auto;
}
.blanc {
    position: absolute;
    height: 100px;
    width: 300px;
    right: 0;
    top: 142px;
    z-index: -30;
    background-color: white;
}
#menu-gauche li ul li {
  font-size: 16px;
  line-height: 25px;
  color:black;
  float: left;
  clear: both;
  margin-right: 0 !important;
  padding-right: 20px;
}
@keyframes transBlack {
    from {background-color: white;}
    to {background-color: #cfd1d2;}
}
@keyframes transWhite {
    from {background-color: white;}
    to {background-color: white;}
}
@keyframes transParent {
    from {opacity: 0;}
    to {opacity: 1;}
}
.fond:hover::before {
    content: "";
    margin-bottom: -25px;
    display: block;
    margin-left: -5px;
    margin-right: -5px;
    z-index: -30;
    height: 25px;
    width: unset;
    left: -3px;
    background-color: #cfd1d2;
  animation-name: transBlack;
  animation-duration: 1s;
}
#menu-gauche li ul ul {
  position: relative;
    left: 89px;
    top: -25px;
    padding-top: 0;
    z-index: 60;

}
#menu-gauche li ul {
    padding-top: 3px;
    position: absolute;
    display: none;
    white-space: nowrap;
}
.bodyHidden {
  position: relative;
  overflow: hidden;
  height: 0;
  width: 0;
}
.menu-1 {
padding-bottom: 100px;}
#menu-gauche li ul ul li::before {
    content: "";
    margin-bottom: -25px;
    display: block;
    margin-left: -5px;
    margin-right: -5px;
    z-index: -30;
    height: 25px;
    width: unset;
    left: -3px;
    background-color: white;
  animation-name: transWhite;
  animation-duration: 1s;
}
#menu-gauche li li::before {
    content: "";
    margin-bottom: -25px;
    display: block;
    margin-left: -5px;
    margin-right: -5px;
    z-index: -30;
    height: 25px;
    width: unset;
    left: -3px;
    background-color: white;
  animation-name: transWhite;
  animation-duration: 1s;
}
#menu-gauche li li:hover::before {
    content: "";
    margin-bottom: -25px;
    display: block;
    margin-left: -5px;
    margin-right: -5px;
    z-index: -30;
    height: 25px;
    width: unset;
    left: -3px;
    background-color: #cfd1d2;
  animation-name: transBlack;
  animation-duration: 0.5s;
}

#menu-gauche li ul ul li:hover::before {
    content: "";
    margin-bottom: -25px;
    display: block;
    margin-left: -5px;
    margin-right: -5px;
    z-index: -30;
    height: 25px;
    width: unset;
    left: -3px;
    background-color: #cfd1d2;
  animation-name: transBlack;
  animation-duration: 0.5s;
}
#menu-gauche li ul ul:hover {
  display: block;
}

#menu-gauche li:hover > .menu {
  display: block;
} 
#menu-gauche li:hover + .menu {
  display: block;
  opacity: 1;
  animation-name: transParent;
  animation-duration: 1s;

} 

#menu-gauche li:hover + .sousmenu {
  display: block;
  opacity: 1;
  animation-name: transParent;
  animation-duration: 1s;

}
#fond-menu {
  height: 300px ;
  width: 300px;
  position: absolute;
  top: 0;
  right: 0;
}
#menu-droite {
    position: absolute;
    right: 22px;
    top: 57px;
    font-size: 16px;
    line-height: 25px;
    color: black;
    text-align: right;
}
#menu-droite li:hover > a {
  color: #cc071d;
   -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}
#menu-droite li:nth-child(2) {
  margin-left: 19px;
}
#menu-droite li:nth-child(3) {
  margin-left: 35px;
}
#menu-droite li:nth-child(4) {
  margin-left: 45px;
}
#menu-gauche {
    top: 102px;
    position: absolute;
    max-width: 800px;
    width: 90vw;
    left: 50%;
    transform: translateX(-50%);
}
nav {
    height: 152px;
}
#iconeMedia {
    position: absolute;
    right: 20px;
    top: 15px;
}
#iconeMedia img {
margin-left: 6px;
width: 32px;
}
.bx-wrapper, .bx-viewport, .bx-wrapper img {
    max-height: 282px !important;
    height: 21.67563413vw !important;
    z-index: -30;
}
.bx-wrapper {
      clear: both;
}
.titre-page {
max-height: 70px;
min-height: 40px;
max-width: 800px;
width: 90vw;
height: 6vw;
}
.titre-page img {
  height: 100%;
}
.content-single {
  max-width: 800px;
  margin: 40px auto;
    font-size: 16px;
  line-height: 25px;
  color:black;
  width: 90vw;
}
.bx-wrapper {
}
.content-single p {
  margin-bottom: 20px;
  text-align: justify;
}
.content-single a {
  text-decoration: underline;
}
strong {
  font-weight: bold;
}
#footer {
      position: fixed;
    bottom: 5px;
    left: 5px;
}
.corner {
    position: absolute;
    top: -47px;
    z-index: 60;
    background-repeat: no-repeat;
    background-size: contain;
    width: 33px;
    height: 60.5px;
  background-image: url(http://reseaux-creation.org/wp-content/themes/reseaucreation/images/corner2.svg);
}
.last > .corner {
    width: 33px;
    height: 33px;
  background-image: url(http://reseaux-creation.org/wp-content/themes/reseaucreation/images/corner.svg);
  transform: rotate(-90deg);
}
.first > .corner {
    width: 33px;
    height: 33px;
    top: -19px;
  background-image: url(http://reseaux-creation.org/wp-content/themes/reseaucreation/images/corner.svg);
}
.first > div:last-child {
transform: rotate(90deg);
}

.last div:last-child {
transform: rotate(180deg);
}
.Cleft {
  left: 52px;
}
.Cright {
  right: 52px;
  transform: rotate(180deg);
}
.positionCorner {
  position: relative;
  height: 0;
  width: 100%;
}
.slider li {
  padding: 0 !important;
}
.slider {
    height: 282px;

    overflow: hidden;
}
#accueilCover {
    background-color: white;
    height: 200vh;
    width: 200vw;
    z-index: 220;
    position: fixed;
    cursor: pointer !important;
    opacity: 1;
    transform: translate(-25%,-25%);
    overflow: hidden;
}
#accueilGif {
    height: 40vh;
    width: 40vh;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-image: url(http://reseaux-creation.org/wp-content/themes/reseaucreation/images/logoGif.gif);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
#accueilGif:hover {
  background-image: url(http://reseaux-creation.org/wp-content/themes/reseaucreation/images/logo2.svg);
}
.hidden {
  opacity: 0 !important;
     -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
  z-index: -200 !important;
}
@media screen and (max-width: 1080px) {
  #logo {
    position: relative;
margin-left: 5px;
margin-top: 15px;
  width: 130px;
float: left;
    left: 0px;
    top: 0px;
}
#menu-gauche {
    left: 216px;
    top: 22px;
    width: 159px;
}
#menu-gauche li {
    font-size: 24px;
    color: black;
    display: block;
    vertical-align: top;
float: left;
clear: both;

}

#menu-gauche li ul {
    padding-top: 3px;
    position: absolute;
    display: none;
    z-index: 200;
    left: 157px;
}
#menu-gauche li:hover > .menu {
  display: inline-block;
} 
#menu-gauche li:hover + .menu {
  display: inline-block;
  opacity: 1;
  animation-name: transParent;
  animation-duration: 1s;

} 
#menu-gauche li:hover + .sousmenu {
  display: block;
  opacity: 1;
  animation-name: transParent;
  animation-duration: 1s;
}
#menu-gauche li ul ul {
   }
#menu-gauche li ul {
white-space: nowrap;
}
.menu-1 {
    padding-bottom: 0px;
    width: 100%;
}


#menu-droite li {
    margin-left: 0px !important;
}
.Cright {
    right: 1vw;
}
.Cleft {
    left: 1vw;
}
}

@media screen and (max-width: 680px) {
  .bx-wrapper, .bx-viewport, .bx-wrapper img {
    height: 253px !important;
}
.bx-wrapper .bx-viewport ul li  {
width: 1167px !important;
}
nav {
    display: block;
    height: auto;
    padding: 20px;
}
.gris {
  display: none;
}
#logo {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
margin: 5px auto 15px auto;
}
#logo img {
    width: auto;
    height: 90px;
}
#menu-gauche {
left: 0px;
top: 0px;
position: relative;
transform: none;
text-align: center;
width: 100%;
display: inline-block;
}
#menu-gauche li {
    font-size: 24px;
    color: black;
    display: block;
    vertical-align: top;
    margin-right: 0;
}
.menu-1 {
    padding-bottom: 0px;
}
#iconeMedia {
    position: relative;
    left: 50%;
    display: inline-block;
    transform: translate(-50%);
    right: 0;
    top: 0;
}
#menu-droite {
position: relative;
right: 0;
top: 0;
font-size: 16px;
line-height: 25px;
color: black;
text-align: center;
margin: 10px auto;
}
.menu {
  text-align: center;
  width: 100%;
}
#menu-gauche li:hover + .sousmenu {
  display: none;
}

#menu-gauche li ul {
    position: relative;
    left: 0;
}
#menu-gauche li ul li {
  float: none;
padding: 0;
display: table;
left: 50%;
position: relative;
transform: translateX(-50%);
}
#menu-droite li {
    margin-left: 0px !important;
}
.blanc {
  display: none;
}
.bx-wrapper, .bx-viewport, .bx-wrapper img {
    max-height: 253px !important;
    width: auto !important;

}
}