﻿/* login */
#acces-bilnet p{float:left;text-align: left;}
#acces-bilnet .btn-default{margin-left: 10px;float:right;}

.section-default {border-bottom:solid 1px #d2d2d2;padding-top: 70px;padding-bottom: 70px;}
.grid-visual-header p {font-size: 22px;color: #2d2d2d;}
.grid-visual-header h2 {font-size: 36px;color: #702f8a;font-weight: 600;}
.grid-visual-header h3 {font-size: 30px;color: #702f8a;}
p a {color: #07afba;text-decoration:underline;}
a.btn-default{color: #fff;text-decoration:none;}
p a:hover {text-decoration:none;}

#language-inline{text-align:center;margin:0 auto;}
#language-inline li{display:inline-block;border-right:solid 1px #c6aad1;margin-left:-5px;}
#language-inline li:first-child{border-left:solid 1px #c6aad1;}
#language-inline .page-header-tooltip-link{padding: 14px 30px;}
#language-inline .is-language{color:#fff;}

#page-header-row-2{border-bottom:solid 1px #d3d3d3;}

#page-login{text-align:center;padding-top: 80px;}
#page-login h1{color:#702f8a;font-size:32px;}

.tabs-1{margin-bottom:-1px;padding-top:2px;overflow:hidden;margin-top:30px;text-align:center;margin-left: auto; margin-right: auto;max-width:900px;}
.tabs-1 > li{float:left;width:300px;position: relative;padding-bottom: 20px;}
.tabs-1 > li:first-child .sub-link-1{margin-left:0;}
.tabs-1 .sub-link-1{display:block;padding:10px 20px;margin-left:-1px;font-size:18px;color:#333;font-weight:500;cursor:pointer;transition:0.2s;}
.tabs-1 .sub-link-1:hover{color:#702f8a;text-decoration:none;}
.tabs-1 .sub-link-1.is-current{color:#702f8a;padding-bottom:20px;}
.tabs-1 .sub-link-1.is-current:after{color: #e5e5e5;font-family: FontAwesome;content: "\f0d8";font-size: 40px;position:absolute;bottom:-24px;left:50%;margin-left:-12px;}
.tabs-1.is-responsive > li{float:none;display:block;margin-bottom:-1px;width:auto;}
.tabs-1.is-responsive .sub-link-1{margin-left:0;}
.tabs-1.is-responsive .sub-link-1.is-current:after{top: 19px;}
.tabs-1-content{padding:25px;background-color:#e5e5e5;overflow: auto;}

/* ============================================================
  Liste mode connexion
============================================================ */
nav ul {
  list-style-type: none;
  margin: 0 0 30px 0;
  padding: 0;
  text-align: center;
}
nav ul li {
  display: inline-block;
  margin-bottom: 4px;
}
nav ul li a {
  display: block;
  padding: 5px 20px;
  color: #fff;
  background-color: #32c896;
}
nav ul li a:hover {
  color: #fff;
  background-color: #238b68;
}
nav ul li a.active {
  color: #fff;
  background-color: #238b68;
}

/* ============================================================
  effets
============================================================ */
.clearfix {
  clear: both;
  float: none;
}
.effects {
  margin: 0 auto;
  display: block;
  width: 1020px;
}
.effects .img {
  position: relative;
  float: left;
  margin-bottom: 5px;
  width: 25%;
  overflow: hidden;
  max-width: 225px;
  margin-left: 30px;
}

.effects .img:first-child {
  margin-left: 0px;
}

.effects .img img {
  display: block;
  margin: 0;
  padding: 0;
  max-width: 100%;
  height: auto;
}

.overlay {
  display: block;
  position: absolute;
  z-index: 20;
  background: rgba(136, 215, 228, 0.8);
  overflow: hidden;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  cursor: pointer;
}

span.expand {
  display: block;
  position: absolute;
  z-index: 100;
  width: 60px;
  height: 60px;
  border: solid 5px #fff;
  text-align: center;
  color: #fff;
  line-height: 50px;
  font-weight: 700;
  font-size: 30px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}

span.expand:after {
font-family: FontAwesome;content: "\f25a";font-size: 28px;line-height: 60px;
}

.overlay {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
}
.overlay span.expand {
  left: 0;
  right: 0;
  top: 0;
  margin: 0 auto;
  opacity: 0;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.img:hover .overlay {
  opacity: 1;
}
.img:hover .overlay span.expand {
  top: 50%;
  margin-top: -30px;
  opacity: 1;
}

/* ------------------------------------------------------------ *\
|* ------------------------------------------------------------ *|
|* Media Queries
|* ------------------------------------------------------------ *|
\* ------------------------------------------------------------ */
@media only screen and (max-width: 1100px) {

	.effects {
	  margin: 0 auto;
	  display: block;
	  width: 100%;
	}
	
	.effects .img {
	  width: 23%;
	  max-width: none;
	  margin-left: 2%;
	}
	
	.effects .img:first-child {
	  margin-left: 1%;
	}
}

@media only screen and (max-width: 965px) {

	.tabs-1{border-bottom:solid 1px #d2d2d2;}

	.section-default {padding-top: 40px;padding-bottom: 40px;}

	#acces-bilnet p{float:none;text-align: center;clear: both;}
	#acces-bilnet .btn-default{margin-left: 10px;float:none;text-align: center;clear: both;}
	
	.grid-visual-header p {font-size: 18px;}
	.grid-visual-header h2 {font-size: 30px;}
	.grid-visual-header h3 {font-size: 24px;}

	.effects {
	  margin: 0 auto;
	  display: block;
	  width: 100%;
	}
	
	.effects .img {
	  width: 23%;
	  max-width: none;
	  margin-left: 2%;
	}
	
	.effects .img:first-child {
	  margin-left: 1%;
	}
}

@media only screen and (max-width: 800px) {
	.effects {
	  height: 300px;
	}
	
	.effects .img {
	  display: none;
	}
	
	.effects .img:first-child {
	  display: block;
	  width: 100%;
	  max-width: 300px;
	  margin: 0 auto;
	  text-align: center;
	  position: absolute;
	  left: 50%;
	  margin-left: -150px;
	}
	ul.tabs-1.is-responsive {
	  display: none;
	}
}