@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100);

.html5 textarea {
  box-sizing:border-box;
  border:0;
  padding:10px;
}

body{
	font-family:'Roboto', 'MS Sans Serif';
	margin:0 auto;
	padding:0;
	background-color:#fafafa;
}

/*#background {
	background: url("bck.jpg") no-repeat center fixed #000;
	width: 100%;
	height: 100%;
	z-index: 0;
	text-align: center;
	background-size: cover;
}*/

#header {
	height:60px;
	width:100%;
	background-color: #EEE;
	float:left;
	display:block;
	text-align:center;
	border-bottom:1px solid #e0e0e0;
	opacity:0.9;
}
#logo {
	background: transparent url(images/Smaaart-IA.jpg) no-repeat center center;
    width: 290px;
    height: 60px;
    float: left;
    display: inline-block;
	opacity: 0.8;
	transition: .5s all .3s;
}
#logo:hover {
	opacity: 1;
	transition: .5s all .3s;
}
#document{
	float:left;
	display:block;
	width:100%;
	margin:0 auto;
}
.footer
{
	background-color:#EEE;
	
	text-align:center;
	clear:both;
	border-top: 1px solid #cccccc;
	position: fixed;
    bottom: 0;
    width: 100%;
	opacity:0.9;
}
.footer:hover
{
	opacity:1;
}
#inner-document{
	padding:20px 20px 80px 20px;
	border-top: 1px solid #ccc;
	text-align:left;
}

.blocNoir {
	text-align:left;
	background-color:#1b1e24;
	color:white;
	padding:5px;
	font-family:'Titillium Web', 'MS Sans Serif';
}
.texteLight{
    color:#555;
}

H1 {
	color: #4066a9;
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 26px;
    font-weight: 100;
    line-height: 20px;
    letter-spacing: 1px;
    padding: 0 0 1px;
    border-bottom: 1px solid #4066a9;
}

H2 {
	color:#0CB1A8;
	
}

H4 {
	color: #4066a9;
    font-weight: bolder;
	margin: 2px 0px;
}

a{
    text-decoration:none;
    color:#FC4A1A;
}
a:hover{
    text-decoration:none;
    color:#1b1e24;
}

.textError
{
    color:red;
}
.textGris
{
    color:#555;
}
.textGrisClair
{
    color:#BBB;
}
.textVert
{
    color:green;
}

.iconeiphone {
	background: url(/medias/iphone.jpg) center left no-repeat;
}

.iconeipad {
	background: url(/medias/ipad.jpg) center left no-repeat;
}
/*  Menu  */
#menu-demo2, #menu-demo2 ul{
	padding:0;
	margin:0;
	list-style:none;
	text-align:center;
	background-color:#eee;
	font-family:'Roboto','Titillium Web', 'MS Sans Serif';
}
#menu-demo2 {
	padding-top: 15px;
    padding-right: 4px;
	position: absolute;
    right: 0;
}

#menu-demo2 li{
display:inline-block;
position:relative;
}
#menu-demo2 ul li{
display:inherit;
border-radius:0;
}
#menu-demo2 ul li:hover{
border-radius:0;
}

#menu-demo2 ul{
position:absolute;
z-index: 1000;
max-height:0;
left: 0;
right: 0;
overflow:hidden;
-moz-transition: .5s all .3s;
-webkit-transition: .5s all .3s;
transition: .5s all .3s;
}
#menu-demo2 li:hover ul{
max-height:20em;
}
/* background des liens menus */
#menu-demo2 li{
background-color: #eee;
//transition: .3s all .3s;
}

/* background des liens sous menus */
#menu-demo2 li li{
background:#333;
text-align:left;
padding-left:5px;
}

/* background des liens menus et sous menus au survol */
#menu-demo2 li:hover{
background:#00b097;
}
#menu-demo2 li li:hover{
background:#666;
}

/* les a href */
#menu-demo2 a{
text-decoration:none;
display:block;
padding:8px 30px;
color:#555;
font-family:"Roboto",arial;
min-width: 60px;
}
#menu-demo2 ul a{
padding:8px 0;
}
#menu-demo2 li:hover li a{
color:#eee;
text-transform:inherit;
}
#menu-demo2 li:hover a, #menu-demo2 li li:hover a{
color:#eee;
}


.debugbloc
{
    padding:5px;
    width:100%;
    background:#F7B733;
}
.errorbloc
{
    padding:5px;
    width:100%;
    background: #fbdede;
    color: #e20404;
}

.RedirectMessage {
	padding: 45px;
    width: 100%;
    text-align: center;
    font-size: larger;
}

/*** Table Styles **/

.table-fill {
	border-spacing: 0;
	border-spacing: 0;
}
 
th {
  color:#D5DDE5;
  background-color:#1b1e24;
  border-bottom:4px solid #9ea7af;
  border-right: 1px solid #343a45;
  font-size:18px;
  font-weight: 100;
  padding:14px;
  text-align:left;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  vertical-align:middle;
}

th:first-child {
  border-top-left-radius:3px;
}
 
th:last-child {
  border-top-right-radius:3px;
  border-right:none;
}
  
tr {
  border-top: 1px solid #C1C3D1;
  border-bottom-: 1px solid #C1C3D1;
  color:#666B85;
}
 
tr:hover td {
  background:#4E5066;
  color:#FFFFFF;
  border-top: 1px solid #22262e;
}
 
tr:first-child {
  border-top:none;
}

tr:last-child {
  border-bottom:none;
}
 
tr:nth-child(odd) td {
  background:#EBEBEB;
}
 
tr:nth-child(odd):hover td {
  background:#4E5066;
}

tr:last-child td:first-child {
  border-bottom-left-radius:3px;
}
 
tr:last-child td:last-child {
  border-bottom-right-radius:3px;
}
 
td {
  background:#FFFFFF;
  padding:10px;
  text-align:left;
  vertical-align:middle;
  border-right: 1px solid #C1C3D1;
}

td:last-child {
  border-right: 0px;
}

th.text-left {
  text-align: left;
}

th.text-center {
  text-align: center;
}

th.text-right {
  text-align: right;
}

td.text-left {
  text-align: left;
}

td.text-center {
  text-align: center;
}

td.text-right {
  text-align: right;
}

/*************************************  Bouton *****************************/


.formsofi{
    box-sizing:border-box;
    padding:40px;
    width:400px;
    box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, .45);
    background-color:#222;
}
.textboxsofi{
  height:50px;
  width:100%;
  border-radius:3px;
  border:rgba(0,0,0,.3) 2px solid;
  box-sizing:border-box;
  padding:10px;
  margin-bottom:10px;
}

.textboxsofi:focus{
  outline:none;
   border:rgba(24,149,215,1) 2px solid;
   color:rgba(24,149,215,1);
}

.buttonsofi{
  height:50px;
  width:100%;
  border-radius:3px;
  border:rgba(0,0,0,.3) 0px solid;
  box-sizing:border-box;
  padding:10px;
  background:#90c843;
  color:#FFF;
  font-weight:bold;
  font-size: 12pt;
  transition:background .4s;
  cursor:pointer;
}

.buttonsofi:hover{
  background:#80b438;
  
}

.form-signin {
  padding: 7px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid rgba(0,0,0,0.1);  
}
.form-signin label {
	display:inline-block;
	min-width:120px;
}

.form-signin-heading,
.checkbox {
  margin-bottom: 30px;
}

.checkbox {
  font-weight: normal;
}

.form-control {
  position: relative;
  font-size: 16px;
  height: auto;
  padding: 10px;
	@include box-sizing(border-box);

	&:focus {
	  z-index: 2;
	}
}

input[type="text"] {
  margin-bottom: -1px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

input[type="password"] {
  margin-bottom: 20px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

label {
  width: 110px;
  display: inline-block;
  margin: 16px;
  color: #777;
  text-align: left;
}
legend {
	padding: 20px;
    color: darkgray;
}

em {
  font-weight: bold;
  font-style: normal;
  color: #f00;
}
	
.tablemessage {
    border-collapse: collapse;
}
.tablemessage tr td{
padding: 5px 20px;
}
.msgquestion {
    color: #4a4a4a;
    border-top: 1px solid #bdbbbb;
}
.msgreponse {
	color: #447fe6;
}
.messagetext {
    width: 600px;
    height: 200px;
}


button,.submbutton {
	padding: 10px 20px;
    background-color: #3d84ff;
    color: white;
    border-width: 0px;
    cursor: pointer;
    text-decoration: none;
    font-style: normal;
    font-size: 16px;
    line-height: normal;
	margin: 0 2px;
	transition: all .3s;
}
button:hover {
	background-color: #5da4ff;
	transition: all .3s;
}

.lighttext {
	color: #bbb;
    font-size: 12px;
}
/*           HELLO           */
@-webkit-keyframes HELLONIMATION {
  0%   { left : -125px; }
  30% { left : 100px; }
  80% { left : 100px; }
  100%   { left : -125px; }
}
@keyframes HELLONIMATION {
  0%   { left : -125px; }
  30% { left : 100px; }
  80% { left : 100px; }
  100%   { left : -125px; }
}
.hello {
	color:rgba(255,255,255,0.9);
	text-align:center;
	font-size:25px;	
	top : 55px;
	left : -125px;
	
	color:#fff;
	text-shadow:1px 1px 1px #006;
	letter-spacing: 0em;
	line-height:45px;
	
	
	position: absolute;
		
 -webkit-animation: HELLONIMATION 3s 1; /* Safari 4+ */
  animation:         HELLONIMATION 3s 1; /* IE 10+, Fx 29+ */
}

.vignette {
    width: 250px;
    height: 250px;
    background-color: white;
    padding: 15px;
    overflow-y: hidden;
	float:left;
	margin:15px;
	box-shadow:0px 0px 4px 2px #eee;
	transition:all 0.5s ease-in-out;
}

.vignette:hover {
	width: 250px;
    height: 250px;
    padding: 20px;
	margin:10px;
	box-shadow:0px 0px 4px 2px #ccc;
	transition:all 0.5s ease-in-out;
}

.vignettetitre {
	padding: 15px 0px;
    text-align: center;
    color: #777;
}

input[type="text"],select,input[type="checkbox"],input[type="radio"],input[type="password"],input[type="email"]{
	padding: 10px;
    margin: 5px;
    border: 1px;
}

fieldset {
	display: inline-block;
}

.droit{
	padding: 0 0px;
}