body {
    padding-top: 0rem;
    background-image: url('../images/background.jpg');
}

.maxime {
    text-align: center;
    height: 35px;
    background-color: red;
}

.carre_volant {
    width: 120px;
    height: 100px;
    text-align: center;
    padding: 35px 0;
    background-color: red;
    position: relative;
    text-shadow: 1px 1px blue;
}

.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 30px;
    background: #000000;
    color: #FFFFFF;
}

.titre_bleu {
    color: blue;
    font-size: 22px;
    font-weight: 300;
}

.item_bleu {
    color: blue;
}

#item_bleu {
    color: blue;
}

li a {
    padding-left: 8px;
    color: blue; /* Or a color you prefer */
}

.vertical .carousel-inner {
    height: 100%;
}
 
.carousel.vertical .item {
    -webkit-transition: 0.6s ease-in-out top;
    -moz-transition: 0.6s ease-in-out top;
    -ms-transition: 0.6s ease-in-out top;
    -o-transition: 0.6s ease-in-out top;
    transition: 0.6s ease-in-out top;
}
 
.carousel.vertical .active {
    top: 0;
}
 
.carousel.vertical .next {
    top: 400px;
}
 
.carousel.vertical .prev {
    top: -400px;
}
 
.carousel.vertical .next.left,
.carousel.vertical .prev.right {
    top: 0;
}
 
.carousel.vertical .active.left {
    top: -400px;
}
 
.carousel.vertical .active.right {
    top: 400px;
}
 
.carousel.vertical .item {
    left: 0;
}
 
.carousel.vertical .carousel-control {
    width: 100%;
    bottom: inherit;
    top: inherit;
}
 
.carousel.vertical .carousel-control.left {
    top: 0;
}

.modal-body .contact {
    color: #027de7;
    text-align: center;
    font-weight: bold;
    font-style: italic;
}

#carre_bureautique {
    -webkit-animation-name: bureautique; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name: bureautique;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

#carre_prog_web {
    padding: 20px 0;
    -webkit-animation-name: prog_web; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name: prog_web;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

#carre_infographie {
    -webkit-animation-name: infographie; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name: infographie;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

#carre_bdd {
    padding: 20px 0;
    -webkit-animation-name: bdd; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name: bdd;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

#carre_reseau {
    -webkit-animation-name: reseau; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name: reseau;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

#carre_secretariat {
    -webkit-animation-name: secretariat; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name: secretariat;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

#modal_liste_prix .modal-dialog  {width:900px;}

#caroussel-position {
    width: 100%;
}

/* Standard syntax */
@keyframes bureautique {
      0% {background-color: red; left:150px; top:10px;}
     25% {background-color: blue; left:860px; top:10px;}
     50% {background-color: yellow; left:860px; top:220px;}
    100% {background-color: green; left:150px; top:10px;}
}
@keyframes prog_web {
      0% {background-color: red; left:150px; top:100px;}
     25% {background-color: green; left:150px; top:-100px;}
     50% {background-color: blue; left:860px; top:-100px;}
    100% {background-color: magenta; left:150px; top:120px;}
}
@keyframes infographie {
      0% {background-color: red; left:480px; top:190px;}
     25% {background-color: hotpink; left:860px; top:190px;}
    100% {background-color: yellow; left:480px; top:190px;}
}
@keyframes bdd {
      0% {background-color: red; left:830px; top:-90px;}
     25% {background-color: cyan; left:130px; top:-90px;}
    100% {background-color: blue; left:830px; top:-90px;}
}
@keyframes reseau {
      0% {background-color: red; left:830px; top:-400px;}
     25% {background-color: blue; left:470px; top:0px;}
    100% {background-color: red; left:830px; top:-400px;}
}
@keyframes secretariat {
      0% {background-color: red; left:830px; top:-110px;}
     25% {background-color: red; left:830px; top:-290px;}
    100% {background-color: green; left:830px; top:-110px;}
}

.wrapper {	
    margin-top: 80px;
    margin-bottom: 80px;
}

.form-signin {
    max-width: 380px;
    padding: 15px 35px 45px;
    margin: 0 auto;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,0.1);  
}

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

.checkbox {
    font-weight: normal;
}

.form-control {
    position: relative;
    font-size: 16px;
    height: auto;
    padding: 10px;
    &: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;
}