/* navbar */




.navbar {
    background-color: #FFF ;
    -webkit-transition: padding .3s;
    -moz-transition: padding .3s;
    transition: padding .3s;
    border: none;
}

.navbar .navbar-nav {
    float: right;
    padding-right: 100px;
    padding-top: 25px;
}


.navbar-default .navbar-nav>li>a {
  	font-family: 'Open Sans', sans-serif;
  	font-size: 15px;
    color: #000;
    text-transform: uppercase;
    background: #FFFFFF;
    position: relative;
    display: block;
    padding: 10px 15px;
}


.navbar-default .navbar-brand {
    font-size: 50px;
    color: #7d7da9;
}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
    color:  #555;
    background-color: black;
}


.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
    background-color: RGB(217,215,215);
    color:  orange;
}

.nav-tabs {
    padding-top: 25px;
}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
    color: #ffffff;
    background-color: black;
}





/* body */

.nav-tabs>li>a {
    margin-right: 2px;
    line-height: 1.42857143;
    border: 1px solid #ffffff;
    background-color:honeydew;
    color: white;
    border-radius: 4px 4px 0 0;
}


.nav-tabs>li>a:hover {
    border-color: #eee #eee #ddd;
    background: olivedrab;
}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
    color: #fff;
    cursor: default;
    background-color: green;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
}

.nav-tabs>li>a {
    margin-right: 2px;
    line-height: 1.42857143;
    color: navy;
    border-radius: 4px 4px 0 0;
}




.voronoys-block {
    position: relative;
    display: table;
    width: 170px;
    height: 110px;
    margin-bottom: 10px;
    font-weight: 700;
    border-radius: 7px;
    cursor: pointer;
    overflow: hidden;
    transition: box-shadow .4s;
}







.voronoys-block span.name {
    position: absolute;
    left: 0;
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1.2em;
    letter-spacing: 1px;
    padding-right: 10px;
    padding-top: 10px;
    padding-left: 10px;
    word-break: normal;
    color: #fff;
    transition: font-weight .4s;
}

.well {
    background-color: black;
	color: white;
}




.block {
    position: relative;
    display: table;
    width: 300px;
    height: 500px;
    margin-bottom: 10px;
    font-weight: 700;
    text-align: center;
    border-radius: 7px;
    #cursor: pointer;
    overflow: hidden;
    transition: box-shadow .10s;
    text-transform: uppercase;
    color: #000;
    #background-color: RGB(237,252,254);
    top: 30px;
   left: 60px;
   width: 250px;
   #border: 2px solid black;
   padding: 20px 6px;
}

.block span.close {
    position: absolute;
    left: 0;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.2em;
    letter-spacing: 1px;
    padding-right: 10px;
    padding-top: 10px;
    padding-left: 10px;
    word-break: normal;
    color: #000;
    transition: font-weight .4s;
}




.bloc {
    position: relative;
    display: table;
    width: 100px;
    height: 50px;
    float: right;
    margin-bottom: 10px;
    font-weight: 700;
    border-radius: 7px;
    cursor: pointer;
    overflow: hidden;
    transition: box-shadow .4s;
    text-transform: uppercase;
    color: #000;
    background-color: RGB(0,181,181) ;
}







.blo {
    position: relative;
    display: block;
    width: 100px;
    height: 50px;
    float: right;
    margin-bottom: 10px;
    font-weight: 700;
    border-radius: 7px;
    #cursor: pointer;
    overflow: hidden;
    transition: box-shadow .4s;
    text-transform: uppercase;
    color: #000;
    #background-color: RGB(0,181,181) ;
}

.box {
  #width: 350px;
  #height: 150px;
  #margin: 10px;
  #padding: 25px;
 # border: 1px solid black;
}



.joli {
  text-align: center;
  color : white	;
  box-sizing: border-box;
  width     : 150px;
  height    : 150px;
  padding   : 80px 1em 0 1em;
  margin    : 0 100px;
  position: relative;
  background-color: #A4C9CF;
  border-radius: 100% 100% 0 0;
}



.joli::before,
.joli::after {
  content: '';
  position: absolute;
  bottom  : 0;
  z-index : -1;
  background-color: RGB(120,208,237);
  border-radius: 100%;
}


.joli::before {
  width  : 125px;
  height : 125px;
  left    : -80px;
  border-bottom-right-radius: 0;
}


.joli::after {
  width  : 100px;
  height : 100px;
  right   : -60px;
  border-bottom-left-radius: 0;
}


################### table

.center,
.content{
	
	position: absolute;
	top: 50%;
	left:50%;
	transform: translate(-50%, -50%);
}




#click{
	display: none;
}

.click-me{
	display:block;
	width:160px;
	height:50px;
	background: green;
	border:1px solid grey;
	color : white;
	text-align: center;
	font-size:22px;
	line-height:50px;
	border-radius:3px;
	cursor:pointer;
	transition : .5s
}
 .click-me:hover{
	 background: red;
 }
 
 .content{
	
	width: 400px;
	height:350px;
	background: white;
	border-radius:3px;
	box-shadow: 0 2px 12px 0;
}

 #click:checked ~.content{
	opacity:1;
	visibility: visible;
 }


 .header{
	
	height:60px;
	background: green;
	overflow:hidden;
	border-radius:3px 3px 0 0;
	box-shadow: 0 2px 3px 0 rgba(0,0,0,0.2);
	
}

 .header h2{
	color: white;
	padding-left: 32px;
	font-weight: normal;
	
}

p{
	padding-top:10px;
	font-size : 19px;
	color: #1a1a1a;
	text-align:center;
}


 .line{
	#position : absolute; 
	bottom:60px;
	width:  100%;
	height : 1px;
	background: silver; 
	
}

.close-btn{
	 
	 position: absolute;
	 bottom:12px;
	 right:25px;
	 border: 1px solid green;
	 border-radius: 3px;
	 color:green;
	 padding:8px 10px;
	 font-size:18px;
	 cursor:pointer;
	 
	
	
}

 .close-btn:hover{
	 background: green;
	 color:white;
	 transition : .5s;
 }


.cercle{
       position: relative;
       width:110px;
       height:110px;
       border-radius:50%;  
       cursor:pointer;
       box-shadow: 0 2px 3px 0 white;
       border:2px solid white;
  

}


.cercle h5{
	padding-top:30px;
	font-size : 12px;
	text-align:center;
        color:white;
           
	
}


.cercle:hover{
        
         background-color:aliceblue;
	
 }

.cercle h5:hover{
	color:orange;
	
	
 }



#######################################################




.containe{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  background-color: #eee;
  justify-content:space-evenly;
}


.case{

     opacity:1;
     #cursor:pointer;
     background-color:white;
     border: 1px solid white;
     border-radius: 15px;
     transition: 0.4s ease;
     margin:20px;
     padding:30px;
     width:280px;
     height:400px;
     box-shadow: 0 2px 3px 0 steelblue;
     #color: steelblue;
     font-size:24px;
     text-align:center;  

}





 .lin{
	bottom:60px;
	width:  100%;
	height : 1px;
	background: steelblue; 
	
}



 .case p{
	padding-top:10px;
	font-size : 19px;
	color:steelblue;
	text-align:center;
	
}

 .case h4{
	padding-top:10px;
        padding-bottom:10px;
	font-size : 19px;
	color:white;
        background-color:steelblue;
	text-align:center;
}



.case:hover{
        
         background-color:aliceblue;
         opacity:1;
         transform: scale(1.1);
         box-shadow:0 15px 30px rgba(0,0,179,0.5);
         
}


.case p:hover{
          background-color:white;
         
}


 .debu h2{
	 color: steelblue;

}


.deb {
	 color: RGB(18,127,250);

}