@import url(https://fonts.googleapis.com/css?family=Lato:400,700,900);
@import url('https://fonts.googleapis.com/css?family=Titillium+Web:300,400');
@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css";

@font-face {
  font-family: 'MyWebFont';
  src: url('TitilliumWeb-Regular.ttf');

}

body {
	margin: 0 auto;
	padding: 0;
	background-color: #81b71b;
	background-image: url('/img/antigaspi.png');
	background-repeat: no-repeat;
	background-position: 100% 30px;
	background-attachment: scroll;
	background-size: 12%;
}

#fromage {
	width: 100%;
	height: 100%;
	background-image: url('/img/moins-cheres.jpg');
	background-repeat: no-repeat;
	background-position: 0px 150px;
	background-attachment: scroll;
	background-size: 12%;
}


#header {
	background: white;
	height: 150px;
	width: 100%;
}
#header > .logo {
	display: block;
	margin-left: auto;
	margin-right: auto;
	top: 20px;
	text-align: center;
}


#container {
	background-color: transparent;
	margin: 0 auto;
	margin-top: 50px;
	/* width: 1320px; */
	width: 886px;
}

.container2 {
	width: 100%;
}

.container2 h1 {
	margin: 0;
	background: #ea6a40;
	padding: 20px;
	text-align: center;
	border: 10px solid white;	
	font-family: 'Titillum Web', sans-serif;
	font-weight: 300;
	color: white;
	text-shadow: 1px 1px 4px rgba(0,0,0,0.4);
}

.both-img {
	margin: 0;
	padding: 0;
}
.img-container {
	height: 322px;
	width: 440px;
	overflow: hidden;
	/*box-shadow: 0 0 0 2px #72ba30;*/
	margin: 0;
}

.img-container > img {
	transition: 1s;
}

.both-img > li {
	display: inline-block;
	margin: 0px;
	list-style: none;
	height: 324px;
	overflow: hidden;
}

.img-container > img:hover {
	transform:scale(1.5);
    -ms-transform:scale(1.5);
    -moz-transform:scale(1.5);
    -webkit-transform:scale(1.5);
    -o-transform:scale(1.5); 
	transition: 1s;
	/*opacity: 0.5;*/
}

.ontop-back {
	position: relative;
	top: -69px;
	width: 100%;
	transition: 0.5s;
	background-color: rgba(0,0,0,0.5);
}

.ontop-top3,
.ontop-top2,
.ontop-top1 {
	color: white;
	font-family: 'Titillum Web', sans-serif;
	font-weight: 300;
	margin: 0;
	padding: 20px;
	text-shadow: 1px 1px 4px black;
		transition: 0.3s;
}

.both-img > li > a {
	text-decoration: none;
}

.img-container:hover + .ontop-back > .ontop-top3,
.img-container:hover + .ontop-back > .ontop-top2,
.img-container:hover + .ontop-back > .ontop-top1 {
	transition: 0.5s;
	transform:scale(1.25);
    -ms-transform:scale(1.25);
    -moz-transform:scale(1.25);
    -webkit-transform:scale(1.25);
    -o-transform:scale(1.25); 
}

.ontop-top3:hover {
	transition: 0.5s;
	transform:scale(1.25);
    -ms-transform:scale(1.25);
    -moz-transform:scale(1.25);
    -webkit-transform:scale(1.25);
    -o-transform:scale(1.25);
	padding-left: 90px;
}

.ontop-top2:hover {
	transition: 0.5s;
	transform:scale(1.25);
    -ms-transform:scale(1.25);
    -moz-transform:scale(1.25);
    -webkit-transform:scale(1.25);
    -o-transform:scale(1.25);
	padding-left: 90px;
}

.ontop-top1:hover {
	transition: 0.5s;
	transform:scale(1.25);
    -ms-transform:scale(1.25);
    -moz-transform:scale(1.25);
    -webkit-transform:scale(1.25);
    -o-transform:scale(1.25);
	padding-left: 150px;
}

.img-container:hover + .ontop-back > .ontop-top3 {
	padding-left: 90px;
}

.img-container:hover + .ontop-back > .ontop-top2 {
	padding-left: 90px;
}

.img-container:hover + .ontop-back > .ontop-top1 {
	padding-left: 150px;
}

.img-container:hover + .ontop {
	color: red;
}

#footer {
	margin-top: 350px;
	background-color: #eb6a40;
	box-shadow: 0 1px 3px 1px #454545 inset;
	border-bottom: #22B9D6 solid 20px;
	height: 20px;
	min-height: 20px !important;
}


@media screen and (min-width: 1181px) AND (max-width: 1720px) {
	#container {
		width: 886px;
	}
}

@media screen and (min-width: 681px) AND (max-width: 1180px) {
	#container {
		width: 440px;
	}
}

@media screen and (max-width: 680px) {
	#container {
		width: 440px;
	}
	#header > .logo > img {
		transform:scale(0.75);
		-ms-transform:scale(0.75);
		-moz-transform:scale(0.75);
		-webkit-transform:scale(0.75);
		-o-transform:scale(0.75); 
	}
	body,
	#fromage {
		background-image: none;
	}
}