@font-face {
    font-family: Lato;
    src: url(https://fonts.googleapis.com/css?family=Lato);
}

@keyframes swinging{
    0%{transform: rotate(2deg);}
    50%{transform: rotate(-2deg)}
    100%{transform: rotate(2deg);}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes FadeInCiders {
    0%   {opacity:0;}
   	80% {opacity:1;}
	90%   {opacity:0;}
   	100% {opacity:1;}
}

/* Standard syntax */
@keyframes FadeInCiders {
    0%   {opacity:0;}
   	80% {opacity:1;}
	90%   {opacity:0;}
   	100% {opacity:1;}
}


body {
    background-color: #edecac;
    background-image: url(../images/mere-header.png);
    background-position: 50% 0%;
    background-repeat: repeat-x;
    background-size: 100%;
}

p {
	font-family: 'Lato', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Lato', sans-serif;
	margin:10px 15px;
	text-align:center;
}

h1, h3 {
	color: #FBB117;
}

.Main {
	max-width:800px;
	margin:10px auto;
	background-color:#ffffff;
}

.ImgWide {
	width:100%;
	height:auto;
}

.ImgSmallContainer {
		width:290px;
		height:290px;
		margin:5px auto;
		overflow: visible;
}

.ImgSmall {
	position:relative;
	z-index:3;
	width:75px;
	height:auto;
	margin:2px auto;
	animation: swinging 2s infinite linear;
}

.ImgSmall:hover {
	position:relative;
	z-index:900;
	width:250px;
	height:auto;
	margin:2px auto;
}

.Top {
}


@media screen and (min-width: 1000px) {
.Middle, .MidSection p, .MidSection h1, .MidSection h2 {
	text-align:center;
		padding:0px 110px 20px 110px;
}
}

@media screen and (min-width: 800px) and (max-width:999px) {
.Middle, .MidSection p, .MidSection h1, .MidSection h2 {
	text-align:center;
		padding:0px 80px 20px 80px;
}
}

@media screen and (min-width:580px) and (max-width:799px) {
.Middle, .MidSection p, .MidSection h1, .MidSection h2 {
	text-align:center;
		padding:0px 50px 20px 50px;
}
}

@media screen and (max-width:579px) {
.Middle, .MidSection p, .MidSection h1, .MidSection h2 {
	text-align:center;
		padding:0px 10px 10px 10px;
}
}

.MidSection{
}

.CiderSection {
}

.RulesSection {
}

.RulesSection p {
	text-align:justify;
}



.ImgRomanianCiders {
	width:100%;
	height:auto;
	 opacity:1;
    -webkit-animation-name: FadeInCiders; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 10s; /* Safari 4.0 - 8.0 */
    animation-name: FadeInCiders;
    animation-duration: 10s;
}

.Bottom {
	padding:10px;
	height: 80px;
	text-align:center;
	background-color: #000000;
	color:#cccccc;
	font-size:14px;
}

.Clear {
	clear:both;
}