html,body {
  height: 100%;
  /*overflow:hidden;*/
}

body.bkg-maybellin{
	background:#e3b0ba;
}

body{
	background:#f8f9fa;
}

.content-text{
	margin:20px 0 0 0;
}

.content-loc{
	margin:40px 0 0 0;
}

.content-text h3{
	color:#000000;
	font-size:40px;
	margin:30px 0 0 0;
}

.content-text h3.color-white{
	color:#ffffff;
}

.form-select {
	max-width: 330px;
	padding: 1rem;
	margin:0 auto;
}

.content-roata {
    max-width: 600px;
    margin: 60px auto 60px;
    position: relative;
}

.content-roata img {
    width: 100%;
    height: auto;
}

.content-roata img:hover {
	-webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}

@-moz-keyframes spin { 
    100% { -moz-transform: rotate(360deg); } 
}
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); } 
}
@keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg); 
        transform:rotate(360deg); 
    } 
}

.content-roata button {
    font-size: 18px;
    padding: 6px 15px 6px 15px;
    color: #000000;
    background: #ffffff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: none;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.7);
	border-radius:20px;
	margin:0;
}

.undo{
	margin:30px 0 0 0;
}

.btn:first-child:active{
	color:transparent;
}

@media only screen and (max-width:767px){
	.content-text h3{
		font-size:30px;
		margin:30px 0;
	}
	
	.content-roata button{
		font-size: 16px;
	}
	
	.optiune-logo img{
		display:block;
		margin:0 auto;
		max-width:180px;
	}
}

.form-signin {
  max-width: 330px;
  padding: 1rem;
}

.logout{
	float:right;
}


/* garnier */

body.bkg-garnier{
	background:#c4e143;
}