/* Ecran de connexion */
.flat-form {
    height: auto;
    margin: 25px auto;
    max-width: 100%;
    position: relative;
    width: 425px;
    padding : 10px;
	padding-bottom: 60px;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.65);
	border : 1px solid rgba(0, 0, 0, 0.40)
}

.main {
	max-width : 100%;
}


/*-------- menu connexion ---------*/

.tabs li a:hover {
    background: #D14836 !important;
    -webkit-box-shadow: 0 1px 1px #333333;
    box-shadow: 0 1px 1px #333333;
}


.tabs {
  height: 40px;
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 100%;
  position: relative;
  display: block;
  margin-bottom: 20px;
}

@-moz-document url-prefix() {
	.tabs {
		font-size : 0.92em;
	}
}

.tabs li {
	display: block;
	float: left;
	padding: 0;
    border: 0 solid #999999;
    color: #FFFFFF;
    text-align: center;
    text-decoration: none;
}

.tabs1 a {
	width : 95px;
	margin-right : 10px;
}

.tabs2 a {
	width : 125px;
	margin-right : 10px;
}

.tabs3 a {
	width : 163px;
}

.tabs a {
	display: block;
	float: left;
	font-weight : normal;
	text-decoration: none;
	color: white;
	padding: 12px 5px;
    background: #dd4b39 !important;
    border: 0 solid #999999;
    color: #FFFFFF;
    text-align: center;
}

@media (max-width: 500px),(max-device-width: 500px) {
	.flat-form {
		width : calc(100% - 20px) !important;
		margin-left : 5px !important;
		margin-right : 12px;
		padding : 8px;
	}
	
	.tabs1 {
		margin-right : 5px;
		width : calc(25.7% - 4px);
	}

	.tabs2 {
		margin-right : 5px;
		width : calc(33.7% - 3px);
	}

	.tabs3 {
		width : calc(40.6% - 3px);
	}

	.tabs {
		padding : 8px 3px;
		font-size : 0.84em;
	}
	
	.tabs1 a, .tabs2 a, .tabs3 a {
		width : 100%;
		margin : 0;
	}
	
}

.tabs a.active, .bouton_co {
  background: #00BFFF;
  border-right: none;
  -webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	transition: all 0.5s linear;
}
.form-action {
  padding: 0 20px;
  position: relative;
}

.form-action h1 {
  font-size: 35px;
  padding-bottom: 10px;
}

.form-action p {
  font-size: 12px;
  padding-bottom: 10px;
  line-height: 25px;
}
#login_form {
  padding-right: 20px !important;
}

#login_form input[type=text],
#login_form input[type=password] {
  width: 100%;
  height: 40px;
  margin-bottom: 10px;
  padding-left: 15px;
  color: #000 !important; /* couleur texte co */
  outline: none;
  text-align : right;
  padding-right : 15px;
}


.dark-box {
  background: #5e0400;
  box-shadow: 1px 3px 3px #3d0100 inset;
  height: 40px;
  width: 50px;
}
.form-action .dark-box.bottom {
  position: absolute;
  right: 0;
  bottom: -24px;
}
.tabs + .dark-box.top {
  position: absolute;
  right: 0;
  top: 0px;
}
.show {
  display: block;
}
.hide {
  display: none;
}

::-webkit-input-placeholder {
  color: #e74c3c;
}
:-moz-placeholder {
  /* Firefox 18- */
  color: #e74c3c;
}
::-moz-placeholder {
  /* Firefox 19+ */
  color: #e74c3c;
}
:-ms-input-placeholder {
  color: #e74c3c;
}






















/* Normal styles for the modal */
#modal {
	left:50%;
	margin:-250px 0 0 -40%;
	opacity: 0;
	position:absolute;
	top:-50%;
	visibility: hidden;
	width:80%;
	box-shadow:0 3px 7px rgba(0,0,0,.25);
	box-sizing:border-box;
	transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-webkit-transition: all 0.4s ease-in-out;
}
	/* Make the modal appear when targeted */
	#modal:target {
		opacity: 1;
		top:50%;
		visibility: visible;
	}
#modal .header,#modal .footer {
	border-bottom: 1px solid #e7e7e7;
	border-radius: 5px 5px 0 0;
}
	#modal .footer {
		border:none;
		border-top: 1px solid #e7e7e7;
		border-radius: 0 0 5px 5px;
	}
#modal h2 {
	margin:0;
}
#modal .btn {
	float:right;
}
#modal .copy,#modal .header, #modal .footer {
	padding:15px;
}
.modal-content {
	background: #f7f7f7;
	position: relative;
	z-index: 30;
	border-radius:5px;
}
#modal .copy {
	background: #fff;
}

#modal .overlay {
	background-color: #000;
	background: rgba(0,0,0,.5);
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 10;
}


ol, #login_form ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/********* CLEARFIX *********/
.cf:before,
.cf:after {
    content:"";
    display:table;
}
.cf:after {
    clear:both;
}

.logo{
    display: block;
	margin : 25px auto 0 auto;
	max-height : 100%;
	max-width : 100%;
}