/***********
**** MAIN
***********/
body{
	border-top: 5px solid #df7b36;
	display: flex;
    min-height: 100vh;
    flex-direction: column;
    background-color: #d2e5ea;
}

main {
flex: 1 0 auto;
}


h1,h2{
	font-family:Museo-700;
}

h3,h4{
	font-family:Museo-500;
}

h1{
	color: #444;
	font-size:2.7rem;
}

h2{
	color: #a0a0a0;
	font-size:2rem;
}

h3{
	font-size: 1.2rem;
}

h4{
	font-size:1.1rem;
}


.divider{
	background-color: rgb(19,98,115);
}

.margin-auto{
	margin-right: auto;
	margin-left: auto;
}

.page-footer{
	padding-top:30px;
	padding-bottom:30px;
}


/***********
**** ART HOME PAGE
***********/
.art-top{
    background: url('../resources/img/fond.png') no-repeat top left fixed;
    background-color: rgba(27, 75, 118, 0.3);
    padding: 20px;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    text-align: right;
}

.art-special-container{
	padding-top: 60px;
    padding-bottom: 25px;
    padding-left: 30px;
    padding-right: 30px;
}

.art-container-padding{
	padding-left: 30px;
    padding-right: 30px;
}


.art-container-bio{
    border-radius: 1px;
    min-width: 250px;
    position: relative;
    /* border: 1px solid #136273; */
    background-color: white;
}
.art-container-bio.message{
	background-color: rgba(236,238,239,0.9);
    padding-top: 10px;
}

img.logo-partner{
	background-color: white;
    border: solid 1px gray;
    float: left;
    margin-top: -50px;
    margin-left: -50px;
    max-width:250px;
    max-height:120px;
}

img.logo-partner-no-border{
    float: left;
    margin-top: -50px;
    margin-left: -50px;
    max-width:250px;
    max-height:120px;
}

img.logo-partner-small-screen{
	display:none;
	background-color: white;
    border: solid 1px gray;
    margin-top: 10px;
    margin-bottom: 10px;
    max-width: 200px;
    max-height:150px;
}

img.logo-partner-small-screen-no-border{
    display:none;
    margin-top: 10px;
    margin-bottom: 10px;
    max-width: 200px;
    max-height:150px;
}

.art-citation{
    padding: 30px;
    background-color: rgba(236,238,239,0.9);
    min-height: 80px;
}

.art-citation img.quoteBefore{
	width:20px;
	margin-right: 7px;
}

.art-citation img.quoteAfter{
	width:20px;
	margin-left: 7px;
}

img.art-mini-a{
	float:right;
	width:15px;
}

.art-description{
	font-size: 1.2em;
	line-height: 1.2em;
	padding-left:30px;
	padding-right: 30px;
}

.art-description img{
    float: left;
    padding-right: 20px;
    padding-bottom: 15px;
    max-width: 100%;
}

.art-titles{
	padding-left:30px;
	padding-right: 30px;
}

.art-social{
	padding:30px;
}
.art-social a{
	margin-left: 30px;
	margin-right: 30px;
}
.art-social img{
	width:50px;
}

.art-link{
	padding:30px;
}

.art-link a{
	cursor:pointer;
}

.art-card{
    min-height: 220px;
    position: relative;
    margin-bottom: 30px;
    cursor: pointer;
}

.art-card img{
	width:100%;
}

.art-card span{
	background-color: white;
}

.art-card-title{
	width: 100%;
    height: 110px;
	background-color: rgba(211,211,211,0.6);
    position: absolute;
    bottom: 0px;
    padding-left: 10px;
    padding-right: 10px;
     transition: background-color 0.5s ease;
      transition: height 0.5s ease;
}

.art-card:hover .art-card-title{
	height: 220px;
	background-color: rgba(211,211,211,0.8);
}

a.art-card-link{
	color:black!important;
}

/***********
**** ART FORMULAIRE ENVOI MAIL
***********/
.art-form{
    padding: 20px;
    max-width:400px;
    margin-left: auto;
    margin-right: auto;
}

/* label color */
.input-field label {
 color: #136273;
}
/* label focus color */
.input-field input[type=text]:focus + label {
 color: #136273;
}
/* label underline focus color */
.input-field input[type=text]:focus {
 border-bottom: none;
 box-shadow: none;
}

.input-field input[type=email]:focus {
 border-bottom: none;
 box-shadow: none;
}

.input-field input{
    border-bottom: none;
    font-size: 1em;
    border-radius: 1px;
    padding: 3px;
    background-color: white;
    margin-bottom: 0px;
}

.input-field textarea{
    border-bottom: none;
    font-size: 1em;
    border-radius: 1px;
    padding: 3px;
    background-color: white;
    margin-bottom: 0px;
    height:300px;
}

.art-form .btn {
    font-size: 18px;
    color: black;
    background-color: #fff;
    border-color: rgba(0,0,0,0.1);
    font-weight: bold;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.art-form .btn:hover {
    background-color: rgba(19, 98, 115, 0.5);
}


/***********
****COLORS
***********/
.artips-blue{
	color:#2c3277;
}

.artips-pink{
	color:#a60b47;
}

.artips-background-blue{
	background-color:rgba(8,110,166,0.7);
}

.artips-background-pink{
	background-color:rgba(166,11,72,1);
}

.economitips-background-orange{
    background-color: rgba(223, 123, 54, 0.7);
}

/***********
**** LISTE ANECDOTES
***********/
.grid {
	margin: 10%;
	padding: 3em 0 0 0;
	width: 70%;
	list-style: none;
}

figure h3 {
	position: absolute;
	top: 10%;
	width: 88%;
	text-align: center;
	opacity: 1;
	transition: opacity 0.45s, transform 0.45s;
	-webkit-transition: opacity 0.45s, -webkit-transform 0.45s;
}


/***********
**** Special responsive
***********/

@media only screen and (max-width: 400px) {
	.art-special-container{
		padding:0px;
		padding-bottom: 50px;
	}
	img.logo-partner{
		display:none;
	}
	img.logo-partner-no-border{
		display:none;
	}
	img.logo-partner-small-screen{
		display:inherit;
	}
	img.logo-partner-small-screen-no-border{
		display:inherit;
	}

	.art-top{
	    -webkit-background-size: cover;
	    -moz-background-size: cover;
	    -o-background-size: cover;
	    background-size: cover;
	}


}
@media only screen and (max-width: 500px) {

	.art-hide-small{
		display:none;
	}

}