html{
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#C98180), to(#E9AE91));
	background-image: -webkit-linear-gradient(top, #C98180, #E9AE91);
	background-image: -moz-linear-gradient(top, #C98180, #E9AE91);
	background-image: -o-linear-gradient(top, #C98180, #E9AE91);
	font-family: Arcon, 'Candara', Arial;
	min-height: 100%;
	height: auto;
}

.container{
	max-width: 480px;
	margin: auto;
}

body .container ul{
	list-style-type: none;
	max-width: 60%;
	margin: 0 auto;
	padding: 0;
}

body .container ul li{
	width: 98%;
	margin: 0 auto 0 0;
	padding: 2%;
	border-bottom: 1px dotted #968789;
	background-color: #FDECD4;
	color: #903340;
	opacity: .9;
	opacity: .9;
  	-webkit-transition: all 0.3s ease-out;
  	-moz-transition: all 0.3s ease-out;
  	-o-transition: all 0.3s ease-out;
  	transition: all 0.3s ease-out;
	clear: both;
}

body .container ul li:hover{
	opacity: 1;
  	-webkit-transform: scale(1.1);
  	-moz-transform: scale(1.1);
  	-0-transform: scale(1.1);
  	-ms-transform: scale(1.1);
  	transform: scale(1.1);
}

body .container ul li:active{
	opacity: 1;
  	-webkit-transform: scale(1.1);
  	-moz-transform: scale(1.1);
  	-0-transform: scale(1.1);
  	-ms-transform: scale(1.1);
  	transform: scale(1.1);
}

body .container ul li:last-child{
	border-radius: 0 0 20px 20px;
	border-bottom: none;
}

body .container ul li a img{
	max-width: 25%;
	border-radius: 10px;
}

body .container ul li a img,
body .container ul li a div.info{
	display: inline-block;
}

body .container ul li a div.info{
	vertical-align: top;
}

body .container ul li a div.info h3,
body .container ul li a div.info h4,
body .container ul li a div.info h5{
	margin: 0;
}

body .container ul li a div.info h3{
	font-weight: bold;
}

body .container ul li a div.info h4,
body .container ul li a div.info h5{
	font-size: 0.9em;
	font-weight: normal;
	font-style: italic;
}

body .container ul li a div.info h4{
	color: #382F31;
}

body .container ul li a div.info h5{
	color: #968789;
}


body .container ul li a{
	text-decoration: none;
	color: inherit;
}

body .container div.formulaire{
	width: 80%;
	background-color: #382F31;
	opacity: .7;
	color: #FDECD4;
	padding: 10%;
	border-radius: 20px;
}

body .container div.formulaire label.recherche{
	display: block;
}

body .container div.formulaire input[type='text']{
	margin-top: 1%;
	border-radius: 7px;
	outline: none;
	width: 90%;
	height: 25px;
	padding: 5px;
	border: 1px solid #FDECD4;
	background-color: #968789;
	color: #382F31;
	font-weight: bold;
}

body .container div.formulaire select{
	border-radius: 7px;
	height: 30px;
	outline: none;
	margin-top: 1%;
	padding: 5px;
	border: 1px solid #FDECD4;
	background-color: #968789;
	color: #382F31;
	font-weight: bold;
}

/*************************************
*********** Details styling **********
*************************************/

body .container .detay{
	width: 90%;
	padding: 5%;
	background-color: #FDECD4;
	opacity: 0.8;
	border-radius: 15px;
	float: left;
}

body div.container div.detay h2,
body div.container div.detay h3,
body div.container div.detay div{
	margin: 0;
	padding: 0;
	
}

body div.container div.detay h3{
	color: #C98180;
}

body div.container div.detay h2{
	color: #382F31;
}

body div.container div.detay div{
	color: #968789;
}

body .container div div img{
	max-width: 200px;
	width: 40%;
	border-radius: 10px;
	float: left;
	margin-right: 2%;
}

body div.container div.detay div p{
	vertical-align: top;
}

body div.container div.detay a{
	width: 100%;
	clear: both;
}

.container .detay a.btn {
	width: 15px;
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 1rem;
    line-height: 140%;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 4px;
    background: #968789;
    color: #FDECD4;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
         -o-user-select: none;
            user-select: none;
}

.container .detay a.btn .btn-left {
  float: left;
}

.container .detay a.btn .btn-right {
  float: right;
}

.container .detay a.btn:hover {
    background: #382F31;
}

/* Customize list and details at 480px wide */
@media (max-width: 480px) {
	body .container div.formulaire h2{
		font-size: 1.1em;
	}

	body .container div.formulaire label{
		font-size: 0.8em;
	}

	body .container div.formulaire label.radio{
		display: block;
		margin: 2%;
	}

	body .container ul{
		max-width: 80%;
	}

	body .container ul li{
		width: 100%;
	}

	body .container ul li a div.info h3{
		font-size: 1em;
		font-weight: bold;
	}

	body .container ul li a div.info h4,
	body .container ul li a div.info h5{
		font-size: 0.9em;
		font-weight: normal;
		font-style: italic;
		
	}
	
	body .container ul li a div.info h5{
		color: #968789;
	}

	body .container ul li a div.info h4{
		color: #382F31;
	}
	
}

/****************************************
************* Angular animate ***********
*****************************************/

.yawers.ng-leave.ng-leave-active,
.yawers.ng-enter{
	opacity: 1;
	height: 80px;
	overflow: hidden;
}

.yawers.ng-leave.ng-leave-active,
.yawers.ng-enter{
	opacity: 0;
	height: 0;
	overflow: hidden;
}