/*
 * The Typekit service used to deliver this font or fonts for use on websites
 * is provided by Adobe and is subject to these Terms of Use
 * http://www.adobe.com/products/eulas/tou_typekit. For font license
 * information, see the list below.
 *
 * futura-pt:
 *   - http://typekit.com/eulas/000000000000000000010091
 * myriad-pro:
 *   - http://typekit.com/eulas/00000000000000000001709e
 * program:
 *   - http://typekit.com/eulas/00000000000000007735b2d6
 *   - http://typekit.com/eulas/00000000000000007735b2df
 *   - http://typekit.com/eulas/00000000000000007735b2e3
 *   - http://typekit.com/eulas/00000000000000007735b2e6
 *   - http://typekit.com/eulas/00000000000000007735b2e8
 *   - http://typekit.com/eulas/00000000000000007735b2ea
 *   - http://typekit.com/eulas/00000000000000007735b2ec
 * program-narrow:
 *   - http://typekit.com/eulas/00000000000000007735b2e7
 *   - http://typekit.com/eulas/00000000000000007735b2e9
 *
 * © 2009-2020 Adobe Systems Incorporated. All Rights Reserved.
 */
/*{"last_published":"2020-12-17 10:59:30 UTC"}*/

@import url("https://p.typekit.net/p.css?s=1&k=upd8xbp&ht=tk&f=6846.10881.28506.28507.28508.28509.28510.28511.28513.28518.28519&a=4189930&app=typekit&e=css");

@font-face {
font-family:"myriad-pro";
src:url("https://use.typekit.net/af/1b1b1e/00000000000000000001709e/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/1b1b1e/00000000000000000001709e/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/1b1b1e/00000000000000000001709e/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:700;
}

@font-face {
font-family:"futura-pt";
src:url("https://use.typekit.net/af/309dfe/000000000000000000010091/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/309dfe/000000000000000000010091/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/309dfe/000000000000000000010091/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:700;
}

@font-face {
font-family:"program";
src:url("https://use.typekit.net/af/353646/00000000000000007735b2d6/30/l?subset_id=2&fvd=n5&v=3") format("woff2"),url("https://use.typekit.net/af/353646/00000000000000007735b2d6/30/d?subset_id=2&fvd=n5&v=3") format("woff"),url("https://use.typekit.net/af/353646/00000000000000007735b2d6/30/a?subset_id=2&fvd=n5&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:500;
}

@font-face {
font-family:"program";
src:url("https://use.typekit.net/af/81e4d5/00000000000000007735b2df/30/l?subset_id=2&fvd=n9&v=3") format("woff2"),url("https://use.typekit.net/af/81e4d5/00000000000000007735b2df/30/d?subset_id=2&fvd=n9&v=3") format("woff"),url("https://use.typekit.net/af/81e4d5/00000000000000007735b2df/30/a?subset_id=2&fvd=n9&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:900;
}

@font-face {
font-family:"program";
src:url("https://use.typekit.net/af/98d0af/00000000000000007735b2e3/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff2"),url("https://use.typekit.net/af/98d0af/00000000000000007735b2e3/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff"),url("https://use.typekit.net/af/98d0af/00000000000000007735b2e3/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("opentype");
font-display:auto;font-style:italic;font-weight:700;
}

@font-face {
font-family:"program";
src:url("https://use.typekit.net/af/f1f987/00000000000000007735b2e6/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/f1f987/00000000000000007735b2e6/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/f1f987/00000000000000007735b2e6/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:700;
}

@font-face {
font-family:"program";
src:url("https://use.typekit.net/af/cf1dc1/00000000000000007735b2e8/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/cf1dc1/00000000000000007735b2e8/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/cf1dc1/00000000000000007735b2e8/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:400;
}

@font-face {
font-family:"program";
src:url("https://use.typekit.net/af/07e83e/00000000000000007735b2ea/30/l?subset_id=2&fvd=i5&v=3") format("woff2"),url("https://use.typekit.net/af/07e83e/00000000000000007735b2ea/30/d?subset_id=2&fvd=i5&v=3") format("woff"),url("https://use.typekit.net/af/07e83e/00000000000000007735b2ea/30/a?subset_id=2&fvd=i5&v=3") format("opentype");
font-display:auto;font-style:italic;font-weight:500;
}

@font-face {
font-family:"program";
src:url("https://use.typekit.net/af/5ef07f/00000000000000007735b2ec/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff2"),url("https://use.typekit.net/af/5ef07f/00000000000000007735b2ec/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff"),url("https://use.typekit.net/af/5ef07f/00000000000000007735b2ec/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("opentype");
font-display:auto;font-style:italic;font-weight:400;
}

@font-face {
font-family:"program-narrow";
src:url("https://use.typekit.net/af/62a995/00000000000000007735b2e7/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/62a995/00000000000000007735b2e7/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/62a995/00000000000000007735b2e7/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:400;
}

@font-face {
font-family:"program-narrow";
src:url("https://use.typekit.net/af/d7dd3a/00000000000000007735b2e9/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff2"),url("https://use.typekit.net/af/d7dd3a/00000000000000007735b2e9/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff"),url("https://use.typekit.net/af/d7dd3a/00000000000000007735b2e9/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:500;
}

.tk-myriad-pro { font-family: "myriad-pro",sans-serif; }
.tk-futura-pt { font-family: "futura-pt",sans-serif; }
.tk-program { font-family: "program",sans-serif; }
.tk-program-narrow { font-family: "program-narrow",sans-serif; }



@font-face {
  font-family: 'Peperon';
  src: url("fonts/PeperoncinoSans-Regular.eot");
  src: url("fonts/PeperoncinoSans-Regular.eot?#iefix") format("embedded-opentype"), url("fonts/PeperoncinoSans-Regular.woff") format("woff"), url("fonts/PeperoncinoSans-Regular.ttf") format("truetype"), url("fonts/PeperoncinoSans-Regular.svg#Peperon") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
	font-family: 'Futura Heavy';
	src: url('fonts/hinted-FuturaStd-Heavy.eot');
	src: url('fonts/hinted-FuturaStd-Heavy.eot?#iefix') format('embedded-opentype'),
		url('fonts/hinted-FuturaStd-Heavy.woff2') format('woff2'),
		url('fonts/hinted-FuturaStd-Heavy.woff') format('woff'),
		url('fonts/hinted-FuturaStd-Heavy.ttf') format('truetype'),
		url('fonts/hinted-FuturaStd-Heavy.svg#FuturaStd-Heavy') format('svg');
	font-weight: 900;
	font-style: normal;
}

@font-face {
  font-family: 'Futura';
  src: url("fonts/futurastd-book-webfont.eot");
  src: 	url("fonts/futurastd-book-webfont.eot?#iefix") format("embedded-opentype"),
		url("fonts/futurastd-book-webfont.woff") format("woff"),
		url("fonts/futurastd-book-webfont.ttf") format("truetype"),
		url("fonts/futurastd-book-webfont.svg#Futura") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
    font-family: 'Londrina';
    src: url('fonts/londrinasolid-regular-webfont.woff2') format('woff2'),
         url('fonts/londrinasolid-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


@keyframes oscillate {
  0% { transform: scale(0.9); }
  50% { transform: scale(1); }
  100% { transform: scale(0.9); }
}

.oscillate {
	animation: oscillate 0.33s;
	animation-iteration-count: infinite; 
}

body {
	font: 1.4em/1.8em 'program', "Arial", sans-serif;
	background:#023b59 url('img/sep.png') repeat-x top center / 176px auto;
	background-attachment:fixed;
	color:#fff;
}

a { color:#97c11f }
a:hover { color: #ed1e24 } 


h1,h2,h3 { font-family:Londrina; line-height:1.1; margin:0.4em 0; letter-spacing:.04em }

h2 { font-size:38px!important }

label {	color:#fff; }

.full-height { min-height:100vh }
.fc50 { min-height:50vh; display:flex; align-items:center }
.fptp { padding-top:180px }

.ir {
    display: block;
    max-width: 100%;
    height: auto;
}

.np { padding:0!important }
.mi { margin:inherit!important }
.m4 { margin:4em 0!important }
.uc { text-transform:uppercase!important }
.aic { display:flex; align-items:center }

.pn p {
	font-family:"program-narrow";
	font-size:36px;
	line-height:30px;
	color:#0c3e5a;
	/* white-space:nowrap */
}

.pn span {
	font-family:"Londrina";
	color:#fff;
	text-shadow: -4px -4px 0 #0c3e5a, 4px 4px 0 #0c3e5a, -4px 4px 0 #0c3e5a, 4px -4px 0 #0c3e5a, -4px 0 0 #0c3e5a, 4px 0 0 #0c3e5a, 0 4px 0 #0c3e5a, 0 -4px 0 #0c3e5a;
	padding:0 4px
} 

.home-cow{
	position:relative;
}

.home-yog {
	transform:rotate(-6deg); max-width:352px
}

.home-speech{
	position:absolute;
	position: absolute;
    width: 22%;
    top: -33%;
    left: 20%;
}

.home-look { width:90%; margin:0 auto; }
.home-look img { max-width:1275px; margin:0 auto }
.home-look-small {
	width: 66%;
	position: relative;
	top: 50%;
	margin: 0 auto;
	left: -13%;
	transform: rotate(-4.3deg);
}
.home-look-small-m {
	position: relative;
	margin: 0 auto;
	left: 3%;
	transform: rotate(-5.5deg);
}

.home-cariad p { font-weight:bold; letter-spacing:0.05em }


.mo, .mo-flex { display:none!important }

.separator {
	height: 0;
	width: 100%;
	padding-bottom: 10vh;
}

.sep1 { background:#023b59 url('img/sep1.png') top center / auto 100%; }
.sep2 { background:#fbfadc url('img/sep2.png') top center / auto 100%; }
.sep3 { background:#dbdaef url('img/sep3.png') top center / auto 100%; }

.bb { font-family:Londrina; text-transform:uppercase; font-size:2.4em; margin:1.8em 0; display:inline-block }

h1.bighead { font-size:6em; text-transform:uppercase }
h2.bighead { font-size:4em!important; margin:2em 0; color:#0c3e5a }
h2.bighead small { font-family:"program-narrow"; color:inherit; font-size:60%; font-weight:bold }
h2.bighead span {
	color:#fff;
	text-shadow: -5px -5px 0 #0c3e5a, 5px 5px 0 #0c3e5a, -5px 5px 0 #0c3e5a, 5px -5px 0 #0c3e5a, -5px 0 0 #0c3e5a, 5px 0 0 #0c3e5a, 0 5px 0 #0c3e5a, 0 -5px 0 #0c3e5a;
}

h1.mediumhead { text-transform:uppercase; font-size:60px; line-height:1.8 }
h1.mediumhead small { display:block; text-transform:initial; font-size:50% }

.flavourhead { margin:0; padding:2em 0 }

.topbanner { position:absolute; max-height:200vh; overflow:hidden }
.post-date { margin:2em 0 }

.pagewrap84 { position:relative; top:75vh }
.post.pagewrap84 { background:rgba(2, 59, 89, 0.93); padding:2em 0.9375rem }

.post.pagewrap84::before { content:" "; position:absolute }

.c1 a { color:#fff!important; }

.bg1 { background:#023b59 }
.bg1 p { color:#fff }


.bg2 { background:#fadee2; position:relative }
.bg2.sl::before {
	position: absolute;
	content: '';
	width: 100%;
	height: 90px;
	bottom: 0;
	transform: skewY(2.3deg);
	background-color: #fadee2;
	top: -45px;
	z-index:-1
}



.bg3 { background:#dbdaef; color:#023b59; position:relative; z-index:2 }
.bg3.sl::before {
	position: absolute;
	content: '';
	width: 100%;
	height: 90px;
	bottom: 0;
	transform: skewY(-2.3deg);
	background-color: #dbdaef;
	top: -45px;
	z-index:-1
}
.bg3 a { color:#0c3e5a }

a.og,
.bg1 a.og,
.bg3 a.og {
	color:#fff;
	text-shadow: -5px -5px 0 #0c3e5a, 5px 5px 0 #0c3e5a, -5px 5px 0 #0c3e5a, 5px -5px 0 #0c3e5a, -5px 0 0 #0c3e5a, 5px 0 0 #0c3e5a, 0 5px 0 #0c3e5a, 0 -5px 0 #0c3e5a;
}

a.og-sm,
.bg1 a.og-sm,
.bg3 a.og-sm {
	color:#fff;
	text-shadow: -3px -3px 0 #0c3e5a, 3px 3px 0 #0c3e5a, -3px 3px 0 #0c3e5a, 3px -3px 0 #0c3e5a, -3px 0 0 #0c3e5a, 3px 0 0 #0c3e5a, 0 3px 0 #0c3e5a, 0 -3px 0 #0c3e5a;
}

/* .bg3 a.og:hover { color:#0c3e5a; text-shadow: -5px -5px 0 #fff, 5px 5px 0 #fff, -5px 5px 0 #fff, 5px -5px 0 #fff, -5px 0 0 #fff, 5px 0 0 #fff, 0 5px 0 #fff, 0 -5px 0 #fff; } */
.bg1 a.og-sm:hover,
.bg3 a.og-sm:hover { color:#0c3e5a; text-shadow: -3px -3px 0 #fff, 3px 3px 0 #fff, -3px 3px 0 #fff, 3px -3px 0 #fff, -3px 0 0 #fff, 3px 0 0 #fff, 0 3px 0 #fff, 0 -3px 0 #fff; } 

.bg4 { background:#cbe8f5; position:relative; z-index:2; color:#093b58 }
.bg4.sl::before {
	position: absolute;
	content: '';
	width: 100%;
	height: 90px;
	bottom: 0;
	transform: skewY(-2.3deg);
	background-color: #cbe8f5;
	top: -45px;
	z-index:-1
}
.bg4.sa::after {
	position: absolute;
	content: '';
	width: 100%;
	height: 90px;
	bottom: -45px;
	transform: skewY(2.3deg);
	background-color: #cbe8f5;
	z-index:1
}



.bg5 { background:#fbfadc; position:relative;  color:#093b58  }
.bg5.sl::before {
	position: absolute;
	content: '';
	width: 100%;
	height: 90px;
	bottom: 0;
	transform: skewY(2.3deg);
	background-color: #fbfadc;
	top: -45px;
	z-index:-1
}

.bg6 { background:#fcd4a9; position:relative;  color:#093b58  }
.bg6.sl::before {
	position: absolute;
	content: '';
	width: 100%;
	height: 100px;
	bottom: 0;
	transform: skewY(2.3deg);
	background-color: #fcd4a9;
	top: -55px;
	z-index:-1
}

.bg7 { background:#b6d26b; position:relative;  color:#093b58  }
.bg7.sl::before {
	position: absolute;
	content: '';
	width: 100%;
	height: 100px;
	bottom: 0;
	transform: skewY(2.3deg);
	background-color: #b6d26b;
	top: -55px;
	z-index:-1
}

.bg7 a { color:#fff }


.bg-toffee { background:url('img/Toffeeee_SQrptXY.jpg') repeat center center / 100% auto; margin-bottom:-360px }
.bg-toffee .ontoff { position:relative; z-index:1 }
.bg-toffee .toffset { position:relative; top:-444px; z-index:0 }


.blog-posts > .cell { padding:2em 1em }
.blog-posts > .cell:nth-child(even) { background:rgba(253, 251, 239, 0.2) }
.blog-posts > .cell:nth-child(odd) { background:rgba(253, 251, 239, 0.33) }

.button-item { font-family:Londrina; font-size:1.75em; text-align:right }

.pot-detail { padding-top:15vh; padding-bottom:100px }
.pot-detail img { padding:33px 0 }


#header {
	position: relative;
	text-align: center;
	padding: 2em 0;
	overflow: visible; /* required to prevent menu dropdown hidden */
	z-index: 1;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}
.iphone #headerwrap {
	background-attachment: scroll !important;
}


header#header {
	padding:0!important
}
#headerwrap {
	background-color:rgba(2,59,89,0);
	color:#inherit;
	border:0!important;
	min-height:85px;
	transition: background-color 0.33s!important;
	width:100%;
	z-index:2222;
	position:fixed;
	top:0
}
#headerwrap.fixed-header {
	background-color:rgb(2,59,89,0.9);
	color:#fff!important;
	height:auto;
}
#headerwrap .header-icons {
	position:relative!important;
	right:auto!important
}


#menu-icon {
	font-size: .9em;
}
#menu-icon:before {
	content: "\e68e";
	font-family: themify;
	font-size: 1.65em;
}
#headerwrap #menu-icon-close {
	-webkit-transform: rotateZ(0deg);
	-moz-transform: rotateZ(0deg);
	transform: rotateZ(0deg);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
#headerwrap #menu-icon-close:hover {
	-webkit-transform: rotateZ(90deg);
	-moz-transform: rotateZ(90deg);
	transform: rotateZ(90deg);
}


#headerwrap #basket-icon { float:left; margin:10px 16px;font-size:26pt; }
#headerwrap #site-logo2 { width:60px; height:60px; margin:0 auto }
#headerwrap #menu-icon { float:right; margin:12px 18px }
#headerwrap #menu-icon::before { font-size:26pt }

.ti-map::before {
	font-family: "FontAwesome"; 
	content: "\f278";
}

ul.social-links.horizontal {
	width:auto!important
}
ul.social-links.horizontal > li {
	display:inline-block!important
}
ul.social-links.horizontal a {
	color:inherit!important;
	padding:0!important
}
.themify-social-links {
	margin:0!important
}

.social-links .icon-medium i {
	border-radius: 100%;
	padding: .25em;
	font-size:20px;
	margin-right: 0;
	line-height: 1em;
	display:inline-block
}





/* main navigation */
#main-nav {
	margin: 0;
	padding: 0;
	font-family:'Londrina';
}
#main-nav ul {
	width: 210px;
}
#main-nav li {
	margin: 0;
	padding: 0;
	list-style: none;
	position: relative;
	display: inline-block;
}
#main-nav > li > a { font-size:32px }

#main-nav li.themify-widget-menu {
	min-width: 155px;
}

/* main level link */
#main-nav a {
	color: inherit;
	display: block;
	padding: .4em;
	margin: 0;
	text-decoration: none;
	-moz-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
/* main level link :hover */
#main-nav a:hover {
	color: #ed1e24;
}

/* current link */
#main-nav .current_page_item > a,
#main-nav .current-menu-item > a {
	color: #ed1e24;
}

/* sub-levels link */
#main-nav ul {
	font-size: .95em; /* make overall dropdown font size smaller */
	line-height: 1.45em;
}
#main-nav ul a {
	font-weight: normal;
	text-transform: none;
	text-align: left;
	padding: 0.4em 1.4em;
	margin: 0;
	display: block;
	background: none;
	border: none;
	text-shadow: none;
	border-radius: 0;
	box-shadow: none;
}

/* set both dropdown and mega container bg to have consistent bg */
#main-nav li:not(.themify-widget-menu) > ul,
#main-nav .has-mega-sub-menu .mega-sub-menu,
#main-nav .has-mega-column > .sub-menu {
	background-color: #fff;	
}

/* set both dropdown and mega links so they have consistent color */
#main-nav ul a,
#main-nav .mega-menu-posts a {
	color: #484848;
}
#main-nav ul a:hover,
#main-nav .mega-menu-posts a:hover {
	color: #ed1e24;
}

#main-nav ul.sub-menu { font-family:'program', sans-serif }
/* dropdown ul */ 
#main-nav li:not(.themify-widget-menu) > ul {
	margin: 0;
	padding: .6em 0;
	list-style: none;
	border: 1px solid rgba(138, 138, 138, 0.35);
	position: absolute;
	z-index: 100;
	display: none;
	display: block;
	opacity: 0;
	left: -.3em;
	top: 100%;
	-webkit-transform: scale(1,0);
	-moz-transform: scale(1,0);
	transform: scale(1,0);
	-webkit-transform-origin: top;
	-moz-transform-origin: top;
	transform-origin: top;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}
#main-nav ul li {
	background: none;
	padding: 0;
	margin: 0;
	float: none;
	display: block;
}
/* sub-levels dropdown */
#main-nav li:not(.themify-widget-menu) > ul ul {
	left: 100%;
	top: -.65em;
}
/* show dropdown ul */
.no-touch #main-nav li:hover > ul {
	display: block;
	opacity: 1;
	-webkit-transform: scale(1,1);
	-moz-transform: scale(1,1);
	transform: scale(1,1);
}
#main-nav .dropdown-open > .sub-menu {
	opacity: 1 !important;
	-webkit-transform: none !important;
	-moz-transform: none !important;
	transform: none !important;
}
#main-nav .has-mega-column > .sub-menu .sub-arrow {
	display: none;
}

/* Edge Menu */
#main-nav li.edge > ul {
	left: auto;
    right: 0;
}
#main-nav ul li.edge > ul {
	left: auto;
    right: 100%;
}


#main-nav ul.sub-menu { width:auto!important; min-width:210px }
#main-nav li:not(.themify-widget-menu) > ul {
	background:#073c58
}
#main-nav li, #footer-nav li {
	/* text-transform:uppercase; */
	vertical-align:middle
}
#main-nav ul a {
	color:#97c11f;
	text-transform:uppercase
}

/* main level link :hover */
#main-nav a:hover {
	color: #97c11f;
}

#main-nav .current_page_item > a, #main-nav .current-menu-item > a {
	color:#fff;
	border-bottom:4px solid
}


/* Edge Menu */
#main-nav li.edge > ul {
	left: auto;
    right: 0;
}
#main-nav ul li.edge > ul {
	left: auto;
    right: 100%;
}

/* mega menu */
#main-nav li:not(.has-mega-column).dropdown-columns-2 > .sub-menu {
	width: 400px; /* about 2x dropdown width */
}
#main-nav li:not(.has-mega-column).dropdown-columns-3 > .sub-menu {
	width: 540px; /* about 3x dropdown width */
}
#main-nav li:not(.has-mega-column).dropdown-columns-4 > .sub-menu {
	width: 680px; /* about 4x dropdown width */
}
#main-nav li:not(.has-mega-column).dropdown-columns-2 > .sub-menu > li,
#main-nav li:not(.has-mega-column).dropdown-columns-3 > .sub-menu > li,
#main-nav li:not(.has-mega-column).dropdown-columns-4 > .sub-menu > li {
	float: left;
	width: 50%;
	box-sizing: border-box;
}
#main-nav li:not(.has-mega-column).dropdown-columns-3 > .sub-menu > li {
	width: 33.32%;
}
#main-nav li:not(.has-mega-column).dropdown-columns-4 > .sub-menu > li {
	width: 25%;
}
#main-nav li:not(.has-mega-column).dropdown-columns-2 > .sub-menu > li:nth-child(2n+1),
#main-nav li:not(.has-mega-column).dropdown-columns-3 > .sub-menu > li:nth-child(3n+1),
#main-nav li:not(.has-mega-column).dropdown-columns-4 > .sub-menu > li:nth-child(4n+1) {
	clear: left;
}
#main-nav {
	position: relative;
}
#main-nav .has-mega-sub-menu,
#main-nav .has-mega-column,
#main-nav .has-mega-column ul {
	position: static;
}
#main-nav .has-mega-sub-menu .mega-sub-menu,
#main-nav .has-mega-column > .sub-menu {
	color: #484848;
	border: 1px solid rgba(138, 138, 138, 0.35);
	display: none;
	margin: 0;
	list-style: none;
	padding: 5px;
	position: absolute;
	z-index: 100;
	width: 100%;
	left: 0;
	top: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display: block;
	opacity: 0;
	-webkit-transform: scale(1,0);
	-moz-transform: scale(1,0);
	transform: scale(1,0);
	-webkit-transform-origin: top;
	-moz-transform-origin: top;
	transform-origin: top;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}
#main-nav .has-mega-sub-menu .mega-sub-menu {
	min-height: 210px;
	max-height: 70vh;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}
#main-nav .has-mega-sub-menu .mega-sub-menu ul {
	width: 15.8%;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	position: static;
	float: left;
	background: none;
    box-shadow: none;
	border: none;
	padding: 0;
	padding-bottom: 2em;
	margin: 1em 0;
	opacity: 1;
	-webkit-transform: none;
	-moz-transform: none;
	transform: none;
}
#main-nav .has-mega-sub-menu .mega-sub-menu > ul li {
	display: block;
}
#main-nav .has-mega-sub-menu .mega-sub-menu > ul a {
	width: auto;
	display: block;
    padding: .75em 1.4em .25em;
	position: relative;
}
#main-nav .has-mega-sub-menu:hover .mega-sub-menu,
#main-nav .has-mega-sub-menu:hover .mega-sub-menu > ul {
	display: block;
	opacity: 1;
	-webkit-transform: scale(1,1);
	-moz-transform: scale(1,1);
	transform: scale(1,1);
}
#main-nav .mega-sub-menu li a:after {
	content: '';
	display: none;
	width: 10px;
	height: 10px;
	border: solid transparent;
	border-width: 1px;
	border-top-color: #000;
	border-right-color: #000;
	margin-top: -2px;
	position: absolute;
	top: 50%;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
	right: 22px;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
	display: inline-block;
	opacity: 0;
}
#main-nav .mega-sub-menu li:hover a:after {
	opacity: 1;
	display: inline-block;
}
#main-nav li.mega-link.loading:before {
	content: "\f110";
	font-family: FontAwesome;
	-webkit-animation: fa-spin 2s infinite linear;
	animation: fa-spin 2s infinite linear;
	position: absolute;
	top: 10px;
	right: 40px;
	z-index: 99;
}



/* site logo */
#site-logo {
	margin:12px 0;
	padding: 0;
	line-height: 1.2em;
	font-weight: 300;
	font-size: 2.6em;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: .055em;
	-moz-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
#site-logo a {
	text-decoration: none;
	color: inherit;
	width:142px;
	height:142px;
	padding:8px!important
}
#site-logo a:hover {
	text-decoration: none;
}



/* mobile menu icon */
.header-icons,
#menu-icon-close {
	display: none; /* will toggle on mobile */
}
.header-icons a,
.header-icons a:hover {
	color: inherit;
	text-decoration: none;
}
.transparent-header .header-icons a {
	color: #fff;
}
#headerwrap .header-icons > * {
	vertical-align: top;
}
#cart-icon {
	margin-left: .3em;
}
#menu-icon {
	font-size: .9em;
}
#menu-icon:before {
	content: "\f0c9";
	font-family: FontAwesome;
	font-size: 1.65em;
}
#headerwrap #menu-icon-close {
	-webkit-transform: rotateZ(0deg);
	-moz-transform: rotateZ(0deg);
	transform: rotateZ(0deg);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
#headerwrap #menu-icon-close:hover {
	-webkit-transform: rotateZ(90deg);
	-moz-transform: rotateZ(90deg);
	transform: rotateZ(90deg);
}


#headerwrap.fixed-header .header-bar,
#headerwrap.fixed-header .social-widget,
#headerwrap.fixed-header #searchform-wrap,
#headerwrap.fixed-header .header-widget {
	display: none; /* hide unnecessary elements in fixed-header */
}
#headerwrap.fixed-header #header {
	padding-top: 5px;
	padding-bottom: 5px;
}
#headerwrap.fixed-header #site-logo {
	margin:0
}
#headerwrap.fixed-header #site-logo a {
	height:auto!important; width:auto!important
}
#headerwrap.fixed-header #site-logo img {
	max-height: 60px; /* prevent tall logo img in fixed header covering the page */
}
#headerwrap.fixed-header #site-description {
	display: none;
}
#headerwrap.fixed-header #main-nav {
	margin: 0;
	padding: 0;
	position: static; /* prevent users to override with absolute position */
}
#headerwrap.fixed-header #main-nav li {
	padding-top: 0;
	padding-bottom: 0;
}



/* FORM
================================================ */

.wpcf7-form {
	margin:0 auto;
	max-width:768px
}
.wpcf7-form label {
	text-transform:uppercase
}
.wcf_left {
	width:50%;
	float:left
}
.wcf_right {
	width:50%;
	float:right
}
.wcf_full {
	clear:both
}

.wpcf7-text, .wpcf7-textarea {
	background:none;

	border-top:0!important;
	border-left:0!important;
	border-right:0!important;
	border-bottom:3px solid!important;
	resize:none;
	
	color:#fff!important
}
.wcf7-text {
	width:85%!important;
	height:68px
}

input.wpcf7-submit {
	background:#fff;
	color:#073c58!important;
	width:217px;
	height:68px;
	font-family:'Futura Heavy',sans-serif;
	font-weight:normal;
	display:block;
	margin:0 auto;
	border:none;
	cursor:pointer
}

/* form input */
input[type="text"], input[type="password"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], textarea {
	max-width:inherit!important;
	transition:background-color .3s ease-in;
}
/* form focus */
input[type="text"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="tel"]:focus, textarea:focus {
	background-color:rgba(255,255,255,0.1);
	-webkit-box-shadow:none;
	box-shadow:none;
}




body.mobile-menu-visible {
    position: relative;
}

#mobile-menu.sidemenu-on #site-logo,
#mobile-menu.sidemenu-on .themify-social-links {
	display:none
}
#mobile-menu.sidemenu-on .btn-ww {
	padding:inherit
}

/* clearfix */
.clearfix:after, .widget li:after, #body:after, #footer:after, footer:after, .pagenav:after, #main-nav:after, .menu:after, .gallery:after, #content:after {
	content: "";
	display: table;
	clear: both;
}

body.post-4 { background-color:#fcd4a9; color:#023b59 }

body.post-4 .owl-stage { display:table; height:80vh }
body.post-4 .owl-item { display:table-cell; vertical-align:bottom; float:none!important; text-align:center }
body.post-4 .owl-item h3 { font-family:Londrina, sans-serif; margin:1em 0; font-size:28px; text-transform:uppercase; letter-spacing:.03em }

body.post-68 { background-color:#fbfadc; color:#023b59 }
body.post-5 { background-color:#dbdaef; color:#023b59 }

body.post-67,
body.category-67 { background-color:#cbe8f5; color:#023b59 }
body.category-68 { background-color:#fbfadc; color:#023b59 }
body.post-67 .bg4, body.post-67 .bg4:before { background-color:#fbfadc }

body.post-131 { background-color:#ddf1fc; color:#023b59 }

#dairy_new { height:0; padding-bottom:41.3%; background:url('img/newdairyF.jpg') no-repeat top center / 100% auto }

body.post-132 { background-color:#97c11f; color:#023b59 }

body.post-4 #headerwrap,
body.post-5 #headerwrap,
body.post-68 #headerwrap,
body.post-67 #headerwrap,
body.post-131 #headerwrap,
body.post-132 #headerwrap,
body.post-132 #headerwrap { color:#023b59 }

#old_stable { height:0; padding-bottom:49.06%; background:url('img/old_stable.png') no-repeat top center / 100% auto }

div.content { min-height:89vh }

figure.post-image {
	height: 0;
	padding-bottom: 66%;
	overflow: hidden;
}


/* PRODUCT POTS! and slides */

.lawn,.lawn2 { position:relative }
.lawn::after, .lawn2::after {
	position: absolute;
	content: '';
	width: 100%;
	height: 100px;
	bottom: 10px;
	background:url('img/grass.png') no-repeat top center / 100% auto;
	z-index:-1
}

.lawn2::after {
	bottom: 60px;
}	

.star1,.star2,.star3 { position:absolute; animation-duration:.5s }

.star1 { left:73%; top:133px }
.star2 { left:42%; top:-44px }
.star3 { left:23%; top:184px }

.wwsf { position:relative; min-height:936px }
.wwsf > div { position:absolute; }



.wwsf-blueberry1 { width:7%; top:330px; left:5%; animation: scatty2 .55s step-end infinite }
.wwsf-blueberry2 { width:7%; top:360px; left:14%; animation: scatty1 .45s step-end infinite }
.wwsf-blueberry3 { width:7%; top:660px; left:5%; transform:rotate(25deg); animation: scatty1 .5s step-end infinite }

.wwsf-blueberry4 { width:7%; top:727px; left:81%; animation: scatty3 .5s step-end infinite}

.wwsf-blueberry5 { width:7%; top:444px; left:91%; animation: scatty2 .48s step-end infinite}
.wwsf-blueberry6 { width:6.6%; top:389px; left:84%; animation: scatty4 .44s step-end infinite;  }
.wwsf-blueberry7 { width:6.9%; top:199px; left:69%; animation: scatty5 .5s step-end infinite;  }

.wwsf-flag { width:40%; top:340px; left:30%; text-align:center }
.wwsf-flag img { max-width:590px; width:100% }

.wwsf-arrow1 { width:8%; top:290px; left:21% }
.wwsf-arrow2 { width:6.5%; top:444px; left:22% }
.wwsf-arrow3 { width:8%; top:596px; left:21% }
.wwsf-arrow4 { width:9%; top:600px; left:66% }
.wwsf-arrow5 { width:10%; top:380px; left:71% }


.wwsf-cow { width:269px; top:131px; left:44%; z-index:2 }
.wwsf-cowtipped { width:189px; top:174px; left:31% }
.wwsf-cowtipped > img { transform:rotate(-18deg) }
.wwsf-dragon { width:12%; top:190px; left:9% }
.wwsf-field { width:20%; top:224px; left:77% }
.wwsf-cariad { width:20%; top:484px; left:2%; transform:rotate(4.4deg) }
.wwsf-community { width:38%; top:660px; left:32%; text-align:center }
.wwsf-heart { width:10%; top:680px; left:13%;  } /* animation: heartbeat 1s infinite */
.wwsf-greatsource { width:25%; top:546px; left:73%;  } /* animation: oscillate 0.333s infinite */

.ourupdate { height:777px }

#product_slider { padding-bottom:3em }

h1.tubhead { line-height:0.85; font-size:60px; margin:0 } 
h1.tubhead span { display:block; text-transform:uppercase; font-size: .75em; padding-left: 0.1em; } 

.parabg { color:#fff; font-family:Londrina, sans-serif; text-transform:uppercase; position:absolute; z-index:1; padding:1em; box-sizing:content-box; min-width:260px }
.parabg::before { content:" "; position:absolute; z-index:-1;  }
.parabg::after { content:" "; position:absolute  }

.parabg P {  line-height:1.1!important; padding:0 .5em; font-size:22px }

.parabg1 { max-width:391px; height:262px; width:25%; top:20%;  }
.parabg2 { max-width:407px; height:168px; width:25%; top:54%;left:14%; }
.parabg3 { max-width:442px; height:268px; width:25%; top:54%;left:54%; }
.parabg4 { max-width:427px; height:193px; width:25%; top:19%;left:71% }



.parabg1::before { top:-20%; left:-8%; width:104%; height:140%; background:url('img/parabg1.png') no-repeat top center / 100% auto }
.parabg2::before { top:0; left:-8%; width:100%; height:117%; background:url('img/parabg2.png') no-repeat top center / 100% auto } 
.parabg3::before { top:0; left:-9%; width:110%; height:106%; background:url('img/parabg3.png') no-repeat top center / 100% auto }
.parabg4::before { top:-33%; left:6%; width:100%; height:111%; background:url('img/parabg4.png') no-repeat top center / 100% auto }


.parabg1::after { top:34%; right:-25%; width:25%; height:50%; background:url('img/parrow1.png') no-repeat top center / 100% auto }
.parabg2::after { top:-50%; right:10%; width:13%; height:50%; background:url('img/parrow2.png') no-repeat top center / 100% auto } 
.parabg3::after { top:-30%; left:3%; width:13%; height:50%; background:url('img/parrow3.png') no-repeat top center / 100% auto }
.parabg4::after { top:34%; left:-24%; width:20%; height:50%; background:url('img/parrow4.png') no-repeat top center / 100% auto }

.parabg5 p, 
.parabg6 p,
.parabg7 p,
.parabg8 p { font-size:18px }

.parabg5::before { top:-54%; left:-10%; width:106%; height:149%; background:url('img/parabg5.png') no-repeat center center / 100% auto }
.parabg6::before { top:-25%; left:3%; width:100%; height:100%; background:url('img/parabg6.png') no-repeat center center / 100% auto } 
.parabg7::before { top:-30%; left:5%; width:90%; height:128%; background:url('img/parabg7.png') no-repeat center center / 100% auto }
.parabg8::before { top:-66%; left:6%; width:104%; height:156%; 
background:url('img/parabg8.png') no-repeat center center / 100% auto }

.parabg5 { max-width:333px; min-width:290px; height:173px; width:25%; top:555px;right:41%; text-align:right; transform:rotate(-9deg)!important; font-size:18px }
.parabg6 { max-width:333px; min-width:290px; height:168px; width:25%; top:555px;left:70%; transform:rotate(-9deg)!important; font-size:18px  }
.parabg7 { min-width:180px; max-width:230px; height:168px; width:25%; top:333px;left:77.8%; transform:rotate(-8deg)!important; font-size:18px  }
.parabg8 { min-width:199px; max-width:230px; height:168px; width:25%; top:200px;left:76%; transform:rotate(-8deg)!important; font-size:18px  }

.raspberrybigpot { position:absolute; top:99px; right:20%; max-width:369px;  }
.raspberrybigpot img { transform:rotate(-14deg)   }
.gooseberrysmallpot { position:absolute; top:311px; right:44%; max-width:242px; z-index:6  }
.gooseberrysmallpot img { transform:rotate(7deg)   }

.redcow { min-width:250px; width:15%; position:absolute; left:69%; top:0; z-index:3 }
.ophead { position:absolute; width:100%; top:17% }
.ophead h1 { text-transform:uppercase; line-height:1; font-size:84px }
.strawbheart { min-width:200px; width:28%; position:absolute; left:9%; top:0; z-index:3 }
.heartstrawb { min-width:200px; width:24%; position:absolute; left:79%; top:69%; z-index:3 }
.strawb { min-width:100px; width:12%; position:absolute; left:18%; top:74%; z-index:3 }

.orange { position: absolute; right: -7%; top: -20px; max-width: 184px; }

.orange1 { position: absolute; left: 38%; max-width: 70px; top: 153px; }
.orange2 { position: absolute; left: 79%; max-width: 122px; top: -53px; }


.great-taste-producer { position:absolute; top:55%; max-width:180px; width:13%;z-index:3 }
.BRC-food-certified { position:absolute; top:53%; left:43%; max-width:100px; width:9%;z-index:3  }
.red-tractor-certified-milk { position:absolute; top:46%; left:86%; max-width:144px; width:12%;z-index:3  }

.tiwwad { text-align:center; width:25% }
.tiwwad p { font-family:Londrina,sans-serif; line-height:1.1em }
.newlid { width:44%; position:relative; left:56% }
.newlid p { text-align:left; padding-top:73%;  }
.newlid::before { content:" "; position:absolute; right:84%; width:150%; height:300px; background:url('img/recyclable-lid.png') no-repeat top center / 100% auto; }

.pots-67::before {
	content:" ";
	background:url('img/blinktopleft.png') no-repeat top center / 100% auto;
	display:block;
	position:absolute;
	width:15%;
	height:217px;
	top:12%;
	left:12%;
	z-index:1	
}

.pots-67::after {
	content:" ";
	background:url('img/blinktopright.png') no-repeat top center / 100% auto;
	display:block;
	position:absolute;
	width:15%;
	height:177px;
	top:20%;
	right:-3%;
	z-index:1
}


.pots-68::before {
	content:" ";
	background:url('img/blinkleft.png') no-repeat top center / 100% auto;
	display:block;
	position:absolute;
	width:15%;
	height:195px;
	top:74%;
	left:-5%;
	z-index:1	
}

.pots-68::after {
	content:" ";
	background:url('img/blinkright.png') no-repeat top center / 100% auto;
	display:block;
	position:absolute;
	width:15%;
	height:168px;
	top:34%;
	right:-2%;
	z-index:1
}

.pots-67 .sp-grass { position:absolute; bottom:136px }
.pots-68 .sp-grass { position:absolute; bottom:170px; right:0; width:88% }

.pots-68 .sp-grass::before {
	content:" ";
	background:url('img/grassleft.png') no-repeat top center / 100% auto;
	display:block;
	position:absolute;
	width:22.86%;
	height:100px;
	top:69%;
	left:9%;
	z-index:4
}

.pots-68 .sp-grass::after {
	content:" ";
	background:url('img/grassright.png') no-repeat top center / 100% auto;
	display:block;
	position:absolute;
	width:27.14%;
	height:104px;
	top:93%;
	right:0;
	z-index:4
}


.pots-67 .sp-grass::before {
	content:" ";
	background:url('img/grassright.png') no-repeat top center / 100% auto;
	display:block;
	position:absolute;
	width:22.86%;
	height:100px;
	top:93%;
	left:12%;
	z-index:4
}

.pots-67 .sp-grass::after {
	content:" ";
	background:url('img/grassleft.png') no-repeat top center / 100% auto;
	display:block;
	position:absolute;
	width:20%;
	height:104px;
	top:97%;
	right:20%;
	z-index:4
}

.therange { position:relative; padding:1em; transform:rotate(-4.3deg);  }
.therange::after { content:" "; display:block; position:absolute; z-index:-1!important  }

.therange h2 { text-transform:uppercase; line-height:1; letter-spacing:0.04em; margin-top:0 }
.therange h4 { font-family:Londrina,sans-serif; line-height:1; margin:0; color:#023b59!important; text-transform:uppercase;  letter-spacing:0.04em }

.post-67 .therange { margin:0 2em;  }

.post-67 .therange::after { background:url('img/listblink2.png') no-repeat top center / 100% auto; top:-42px; left:-77px; width:313px; height:400px }
.post-68 .therange::after { background:url('img/listblink.png') no-repeat top center / 100% auto; top:-47px; left:-47px; width:313px; height:400px }

.post-67 .therange h4 { font-size:20px;   }

.therange a > h4:hover { color:#fff!important; text-shadow: -3px -3px 0 #0c3e5a, 3px 3px 0 #0c3e5a, -3px 3px 0 #0c3e5a, 3px -3px 0 #0c3e5a, -3px 0 0 #0c3e5a, 3px 0 0 #0c3e5a, 0 3px 0 #0c3e5a, 0 -3px 0 #0c3e5a; }

.pot { position:absolute; display:block }
.pot img { height:100%; width:auto }

.pots-68 { height:auto!important; min-height:888px!important }

.pot-84 { top:475px; left:24%; height:270px; z-index:3 } /* Honey Greek Style */ 
.pot-110 { top:221px; left:24%; height:260px; z-index:1 } /* Strawberry */ 
.pot-80 { top:460px; left:39%; height:320px; z-index:4 } /* Natural */ 
.pot-73 { top:160px; left:39%; height:320px; z-index:2 } /* Raspberry */ 
.pot-129 { top:462px; left:55%; height:310px; z-index:3 } /* Toffee */ 
.pot-130 { top:191px; left:55%; height:285px; z-index:1 } /* Natural Fat Free */ 
.pot-108 { top:486px; left:70%; height:260px } /* Vanilla */ 


.pots-67 { height:auto!important; min-height:888px!important }

.pot-124 { top:120px; left:28%; height:200px } /* Blueberry  */
.pot-83 { top:89px; left:51%; height:230px } /* Vanilla  */
.pot-128 { top:120px; left:73%; height:200px } /* Toffee  */

.pot-75 { top:1280px; left:0; height:200px; display:none } /* Black Cherry  */
.pot-105 { top:1280px; left:0; height:200px; display:none } /* Natural  */
.pot-125 { top:1280px; left:0; height:200px; display:none } /* Lemon  */
.pot-127 { top:1280px; left:0; height:200px; display:none } /* Raspberry  */

.pot-106 { top:350px; left:27%; height:222px; z-index:1 } /* Rhubarb  */
.pot-107 { top:350px; left:49%; height:222px; z-index:1 } /* Strawberry  */
.pot-78 { top:350px; left:71%; height:222px; z-index:1 } /* Gooseberry  */

.pot-126 { top:570px; left:5%; height:222px; z-index:2 } /* Peach  */
.pot-104 { top:570px; left:27%; height:222px; z-index:2 } /* Mandarin  */
.pot-76 { top:570px; left:49%; height:222px; z-index:2 } /* Blackcurrant  */
.pot-102 { top:570px; left:71%; height:222px; z-index:2 } /* Mixed Berries  */

.pot-detail table * { background:none!important; border:none!important; padding:0!important; color:inherit }


/* about us spinny photos */

.pol { position:absolute; visibility:hidden; z-index:7  }

p.pold,div.pold { margin:4em 0; }

.pold h3 { text-transform:uppercase }

.polr { position:relative }
.polr > .wow { right:0 }

.pol img { transform-origin:50% 50%; max-width:500px }
body.post-132 .pol img { max-width:369px }
.pol.pold1 img { transform:rotate(-3deg) }
.pol.pold2 img { transform:rotate(3deg) }
.pol.pold3 img { transform:rotate(-4deg) }
.pol.pold4 img { transform:rotate(4deg) }
.pol.pold5 img { transform:rotate(-5deg) }
.pol.pold6 img { transform:rotate(3deg) }
.pol.pold7 img { transform:rotate(-4deg) }

#social-twitter ul { margin:0; list-style:none }
#social-twitter li  { clear:both; display:block }
#social-twitter li .pic { width:25%; float:left }
#social-twitter li .txt { width:100%; float:left; font-size:85%; padding:0 0 1em 0 }

.instapost {
    width: 50%;
    height: 0;
    padding-bottom: 50%;
    overflow: hidden;
    float: left;
}

footer { background:#0c3e5a url('img/sep.png') repeat-x bottom center / 176px auto; color: #fff; font-size:85%; padding:1em 0 128px 0; position:relative; z-index:6  }
footer .logo { width:97px; height:auto; padding:1em 0 }
footer h4 { font-family:Londrina, sans-serif; color:#cacaca; letter-spacing:.04em; padding-top:1em }

footer .newsletter-subscription {
	margin-top:0.4em
}
footer .newsletter-subscription input[type="submit"] {
	background:none;
	color:#97c11f;
	position:absolute;
	top:0;
	right:0;
	padding:10px;
	border:0;
	cursor:pointer
}
footer .newsletter-subscription input[type="email"]:focus {
	background-color:#fff!important;
	color:#111!important
}

@media screen and (max-width: 1280px) {

	body {
		font-size: 1em;
	}

	/************************************************************************************
	STRUCTURE
	*************************************************************************************/
	#pagewrap {
		max-width: 100%;
	}

	.pagewidth,
	.full_width .themify_builder_row .row_inner,
	.full_width .related-posts,
	.full_width .post-nav,
	.full_width .commentwrap	{
		max-width: 96%;
	}

	body {
		font-size: 1em;
	}
	
	#main-nav > li > a { font-size:20px } 
	#main-nav .btn-ww { width:160px; padding:8px 0!important }
	
	.star1 { left:66%; top:84px }
	.star2 { left:42%; top:-44px }
	.star3 { left:28%; top:104px }

}


.icon-scroll,
.icon-scroll:before {
  position: absolute;
  left: 50%;
}
.icon-scroll {
  width: 40px;
  height: 70px;
  margin-left: -20px;
  top: calc(100vh - 60px);
  margin-top: -35px;
  box-shadow: inset 0 0 0 1px #fff;
  border-radius: 25px;
  transition:opacity 0.33s, top 0.33s
}

.icon-scroll.off {
	opacity:0;
	top:80vh
}

.icon-scroll:before {
  content: '';
  width: 8px;
  height: 8px;
  background: #fff;
  margin-left: -4px;
  top: 8px;
  border-radius: 4px;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-name: scroll;
}
@keyframes scroll {
  0% { opacity: 1 }
  100% { opacity: 0; transform: translateY(46px) }
}
/************************************************************************************
MOBILE NAVIGATION
*************************************************************************************/
/* change max-width to trigger mobile menu (#headerwrap added to override Themify Customize output css) */
@media screen and (max-width: 1024px) {
	
	body, footer { background-size:72px auto }
	.mo { display:block!important }
	.mo-flex { display:flex!important }
	
	.nm { display:none!important; background:white!important }
	
	.mo-flex .home-cow { width:100%!important }
	.mo-flex .home-yog { width:42%; height:auto; position:absolute; top:14vh;  max-width:293px!important;  }
	.mo-flex #homecow { width:72%; height:auto; position:absolute; right:0; top:30vh;  max-width:442px;  }
	.mo-flex #delicious { position:relative; top:0; padding-bottom:10vh; }
	
	#home-video { padding-bottom:22vh }
	#home-products img { padding-bottom:10vh } 
	#home-products .pn { text-align:center } 
	
	h1.bighead { font-size:4em; margin:0 0 0.5em 0 }
	h2.bighead { font-size:2.67em!important; margin:2em 0 }
	/* h2.bighead small { font-family:"program-narrow"; color:inherit; font-size:60%; font-weight:bold } */
	.bg-toffee { background-size:150% auto; margin-bottom:-180px }
	.bg-toffee .toffset { top:-280px }
	img.toffset,video.toffset { width:300px; height:auto; left:44px }
	
	.star1 { left:63%; top:0 }
	.star2 { left:42%; top:-124px }
	.star3 { left:28%; top:24px }
	
	#home-products h1.bighead { margin-bottom:1em }

	.lawn::after { bottom:24%; }	
	.lawn2::after {	bottom:29%; }
	
	
	.ophead  { top:23% }
	.ophead h1 { font-size:69px }
	
	
	.parabg5 { top:555px;right:51%;  }
	.parabg6 { top:555px;left:55%;  }
	.parabg7 { top:333px;left:70.8%; }
	.parabg8 { top:200px;left:67.6%;  }
	
	.raspberrybigpot { max-width:333px; right:24% }
	.gooseberrysmallpot { max-width:212px; top:341px; right:50% }
	
	.orange1 { left:27%; top:206px }
	.orange2 { left:69% }
	
	.wwsf .pn p { font-size:24px; line-height:1 }
	.wwsf .pn span { text-shadow: -3px -3px 0 #0c3e5a, 3px 3px 0 #0c3e5a, -3px 3px 0 #0c3e5a, 3px -3px 0 #0c3e5a, -3px 0 0 #0c3e5a, 3px 0 0 #0c3e5a, 0 3px 0 #0c3e5a, 0 -3px 0 #0c3e5a }
	
	
	.wwsf-cow { width:236px; top:93px; left:45%; z-index:2 }
	.wwsf-cowtipped { width:169px; top:124px; left:28% }
	
	.wwsf-flag { top:290px  }
	
	.wwsf-cowtipped > img { transform:rotate(-18deg) }
	.wwsf-community { width:38%; top:593px; left:31%; text-align:center }
	
	.wwsf-arrow1 { top:240px }
	.wwsf-dragon { width:15%; top:105px; left:5% }
	
	.wwsf-arrow2 { top:404px }
	.wwsf-cariad { top:444px; left:4% }
	
	.wwsf-arrow5 { top:290px }
	.wwsf-field { top:169px; left:77% }
	
	.wwsf-arrow3 { top:555px }
	.wwsf-heart { width:10%; top:620px; left:13%;  } 
	
	.wwsf-arrow4 { top:550px }
	.wwsf-greatsource { width:25%; top:506px; left:73%;  } 
	
	.wwsf-blueberry3 { top:573px; left:3% }
	.wwsf-blueberry4 { top:666px }
	/************************************************************************************
	HEADER
	*************************************************************************************/
	#headerwrap #header {
		height: auto;
		padding: 10px 0 5px;
		text-align: inherit;
	}
	#headerwrap.fixed-header #header {
		padding-top: 5px;
		padding-bottom: 5px;
	}

	/* reset absolute elements to static */
	#headerwrap #site-logo,
	#headerwrap #site-description {
		position: static;
		float: none;
		clear: both;
		margin: 0;
		padding: 0;
	}

	/* site logo */
	#headerwrap #site-logo {
		font-size: 30px;
		margin: 5px 0 5px;
		padding: 0;
	}

	/* site description */
	#headerwrap #site-description {
		margin: 0 0 .5em;
	}

	/* header widget */
	#headerwrap .header-widget {
		position: static;
		float: none;
		clear: both;
		margin: 0;
		text-align: inherit;
	}
	#headerwrap .header-widget .widget {
		margin: 0 0 10px;
		padding-top: 1.1em;
	}

	/* menu icon */
	#headerwrap .header-icons {
		position: absolute;
		display: block;
		top: 15px;
		right: 2%;
		z-index: 1999;
	}
	#headerwrap .header-icons a {
		text-decoration: none !important;
		font-size: 1em;
	}
	#headerwrap.fixed-header .header-icons {
		top: 10px;
	}

	#body { margin:0!important }
	
	#pagewrap { padding-top:85px!important }
	/************************************************************************************
	MENU PANEL
	*************************************************************************************/
	body.mobile-menu-visible {
		overflow-y: hidden;
	}
	body.mobile-menu-visible .header-icons,
	body.slide-cart-visible .header-icons {
		z-index: 1 !important; /* prevent the overlap of header buttons with the sidemenu */
	}
	/* Mobile Menu Styles */
	.sidemenu {
		transition: all .2s ease-in-out;
		height: 100%;
		width: 300px;
		padding: 50px 25px 20px;
		background-color: #023b59;
		color: #fff;
		display: block;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		position: fixed;
		top: 0;
		z-index: 11111;
	}
	.admin-bar .sidemenu {
		top: 32px;
	}
	#mobile-menu {
		right: -300px;
	}
	#mobile-menu.sidemenu-on {
		right: 0;
	}
	.sidemenu-active {
		position: relative;
	}
	.sidemenu-active, .sidemenu-active #headerwrap {
		left: 0;
		transition: left .2s ease-in-out;
	}
	.sidemenu-right, .sidemenu-right #headerwrap.fixed-header {
		left: -300px;
	}
	.sidemenu-left, .sidemenu-left #headerwrap.fixed-header {
		left: 300px;
	}
	.sidemenu-left #mobile-menu.sidemenu-on {
		left: 0;
	}

	/* mobile menu panel link */
	#headerwrap #mobile-menu-panel a {
		color: #fff;
		text-decoration: none;
	}

	/* slide menu close */
	#headerwrap #menu-icon-close {
		position: absolute;
		display: block;
		text-decoration: none;
		top: 10px;
		right: 10px;
		font-size: 20px;
		color: inherit;
	}
	#headerwrap #menu-icon-close:after {
		content: "\f00d";
		font-family: 'FontAwesome';
	}

	/* main nav */
	#headerwrap #main-nav {
		position: static;
		width: auto;
		height: auto;
		padding: 0;
		margin: 15px 0;
		background: none;
		border: none;
		text-align: left;
		float: none;
		clear: both;
	}
	#headerwrap #main-nav li {
		float: none;
		display: block;
		border: none;
		background: none;
		padding: 0;
		margin: 0;
		clear: both;
		width: 100%;
	}
	
	#headerwrap.fixed-header #main-nav li {
		padding-top: 0;
		padding-bottom: 0;
	}

	/* sub level */
	#headerwrap #main-nav ul {
		position: static;
		width: auto;
		height: auto;
		display: block;
		border: none;
		margin: 0;
		padding: 0 0 0 1em;
		background: none;
		clear: both;
		opacity: 1;
		-webkit-transform: none;
		-moz-transform: none;
		transform: none;
		color: inherit;
	}
	#headerwrap #main-nav ul li {
		border: none;
		background: none;
		padding: 0;
		margin: 0;
	}

	/* menu link */
	#headerwrap #main-nav a,
	#headerwrap #main-nav ul a {
		width: auto;
		display: block;
		border: none;
		padding: .4em 0;
		margin: 0;
		color: inherit;
		line-height: 1.5em;
		background: none;
		text-decoration: none;
	}
	#headerwrap #main-nav > li:last-child a {
		border: none;
	}

	/* sub level menu link */
	#headerwrap #main-nav ul a {
		font-weight: normal;
	}

	/* menu hover */
	#headerwrap #main-nav a:hover,
	#headerwrap #main-nav ul a:hover {
		color: #97c11f;
	}

	/* sub-menu icon */
	#headerwrap #main-nav .menu-item-has-children > a:after,
	#headerwrap #main-nav ul .menu-item-has-children > a:after {
		display: none;
	}

	/* current link */
	#headerwrap #main-nav .current_page_item > a,
	#headerwrap #main-nav .current-menu-item > a {
		color: #97c11f;
	}

	/* mega menu */
	#headerwrap #main-nav .has-mega-sub-menu .mega-sub-menu,
	#headerwrap #main-nav .has-mega-column > .sub-menu {
		background: none;
		box-shadow: none;
		opacity: 1;
		-webkit-transform: none;
		-moz-transform: none;
		transform: none;
	}
	#headerwrap #main-nav .has-mega-column > .sub-menu {
		max-height: inherit;
	}
	#headerwrap #main-nav .has-mega-sub-menu .mega-sub-menu,
	#headerwrap #main-nav .has-mega-column > ul.sub-menu {
		position: static;
		display: block;
		border: none;
		min-height: 0;
		max-height: none;
		margin: 0;
		width: auto;
		color: inherit;
	}
	#headerwrap #main-nav .has-mega-sub-menu .mega-sub-menu ul {
		height: auto;
		width: auto;
		float: none;
	}
	#headerwrap #main-nav .has-mega-column > .sub-menu > li {
		width: auto;
		float: none;
		margin-left: 0;
	}
	#headerwrap #main-nav .has-mega-column .sub-menu > li > a {
		text-transform: none;
		margin: 0;
	}
	#headerwrap #main-nav .mega-sub-menu li:after {
		content: '';
	}
	#main-nav li.mega-link.loading:before,
	#headerwrap #main-nav .has-sub-menu > a:after,
	#headerwrap #main-nav .has-mega-sub-menu > a:after,
	#headerwrap #main-nav .mega-sub-menu li a:after,
	#headerwrap #main-nav .mega-menu-posts {
		display: none;
	}

	/* SEARCH FORM */
	#headerwrap #searchform-wrap {
		display: block;
	}
	
	#headerwrap #searchform {
		position: relative;
		left: auto;
		right: auto;
		top: auto;
		bottom: auto;
		float: none;
		clear: both;
		margin: 0 0 1em;
		padding: 0;
		width: auto;
	}
	#headerwrap #searchform #s {
		width: 100%;
		float: none;
		-webkit-transition: none;
		-moz-transition: none;
		transition: none;
		margin: auto;
		color: #000;
		padding: 5px 15px 5px 35px;
		background-color: #fff;
		position: static;
		height: auto;
	}
	#headerwrap #searchform #s:focus,
	#headerwrap #searchform #s:hover,
	#headerwrap #searchform .icon-search:hover + #s {
		width: 100%;
		background-color: #fff;
	}	
	#headerwrap #searchform .icon-search:before {
		left: 7px;
		top: 3px;
		position: absolute;
		background: transparent;
		color: #000;
		width: 16px;
		height: 16px;
		font-size: 18px;
		padding: 3px;
		margin: 0;
	}

	/* SOCIAL LINKS */
	#headerwrap .social-widget {
		position: static;
		float: none;
	}

	/* widget twitter */
	.widget .twitter-list .twitter-timestamp {
		opacity: 1;
	}

	#headerwrap .header-widget .col3-1 {
		margin-left: 0;
		width: 100%;
		max-width: 100%;
	}

	#headerwrap .sidemenu .header-widget {
		height: auto;
		margin-bottom: 1em;
	}

	/* fixed header */
	#headerwrap.fixed-header .cart-wrap,
	#headerwrap.fixed-header .header-bar,
	#headerwrap.fixed-header .social-widget,
	#headerwrap.fixed-header #searchform-wrap,
	#headerwrap.fixed-header .header-widget {
		display: block;
	}
	
	/* header block cart wrap */
	.header-block.slide-cart #main-nav-wrap {
		display: block;
	}
	
	/*
	HEADER FULL HEIGHT
	================================================ */
	.header-full-height #headerwrap {
		height: auto;
		display: block;
	}
	.header-full-height #header {
		vertical-align: middle;
		display: block;
	}
	
	/************************************************************************************
	ANNOUNCEMENT BAR PLUGIN
	*************************************************************************************/
	.announcement-bar-showing.announcement-top.admin-bar #headerwrap {
		top: 0 !important;
	}
	.announcement-bar-showing.admin-bar .themify_announcement.top {
		top: 0; /* @todo */
	}
	
}

@media screen and (max-width: 800px) {

	/************************************************************************************
	POST LAYOUTS
	*************************************************************************************/
	.loops-wrapper.grid4 .post {
		width: 48.4%; /* change grid4 to 2 columns */
	}
	.loops-wrapper.grid4 .post:nth-of-type(2n+1) {
		margin-left: 0;
		clear: left;
	}
	
	
	.star1 { left:73%; top:0; display:none!important }
	.star2 { left:42%; top:-124px; display:none!important }
	.star3 { left:6%; top:0; display:none!important }
	
	
	.wwsf { min-height:1069px; overflow:hidden }
	
	.wwsf-blueberry1,
	.wwsf-blueberry2,
	.wwsf-blueberry3,
	.wwsf-blueberry4,
	.wwsf-blueberry5,
	.wwsf-blueberry6,
	.wwsf-blueberry7,
	.wwsf-arrow1,
	.wwsf-arrow2,
	.wwsf-arrow3,
	.wwsf-arrow4,
	.wwsf-arrow5 { display:none }
	
	.wwsf-flag { width:88%; left:6%; top:236px; text-align:center }
	.wwsf-flag img { width:100%; max-width:530px }
	
	.wwsf-cow { width:222px; top:59px; left:43%; }
	.wwsf-cowtipped { width:163px; left:unset; right:52%; top:88px }
	
	.wwsf-cariad { width:69%; left:29%; top:576px }
	.wwsf-heart { width:22%; left:3%; top:545px; max-width:122px }
	
	.wwsf-greatsource { width:69%; left:44%; top:639px; text-align:center}
	.wwsf-greatsource img { width:100%; max-width:333px }
	
	.wwsf-field { width:44%; left:4%; top:699px; text-align:center }
	.wwsf-field img { width:100%; max-width:222px }
	
	.wwsf-community { width:69%; left:3%; top:877px; transform:rotate(-6.9deg); animation-delay:0.1!important; }
	.wwsf-dragon { width:28%; left:unset; right:3%; top:876px; transform:rotate(16.3deg); animation-delay:0.1!important; }
	
	.parabg1,
	.parabg2,
	.parabg3,
	.parabg4,
	.ophead{ position:relative }
	
	.parabg1::after,
	.parabg2::after,
	.parabg3::after,
	.parabg4::after { display:none }
	
	.strawbheart { left:3%; top:27% }
	.heartstrawb { left:60%; top:69% }
	.redcow { left:58%; top:41% }
	.parabg1 { left:6% }
	.parabg3 { left:39% }
	.parabg4 { left:1% }
	
	
	.great-taste-producer { top:16%; right:1%; max-width:180px; width:33%;z-index:3 }
	.BRC-food-certified { top:84%; left:unset; right:2%; max-width:100px; width:34%;z-index:3  }
	.red-tractor-certified-milk { top:53%; left:2%; max-width:144px; width:33%;z-index:3  }
	
	.therange { display:none }
	
	.pots-67 .sp-grass { bottom:116px }
	.pots-68 .sp-grass { bottom:140px }

	.pots-68 { min-height:666px!important }
	
	.pot-110 { top:211px; left:34%; height:173px; z-index:1 } /* Strawberry */ 
	.pot-73 { top:150px; left:47%; height:213px; z-index:2 } /* Raspberry */ 
	.pot-130 { top:181px; left:61%; height:190px; z-index:1 } /* Natural Fat Free */ 
	
	.pot-84 { top:365px; left:34%; height:180px; z-index:3 } /* Honey Greek Style */ 
	.pot-80 { top:350px; left:47%; height:213px; z-index:4 } /* Natural */ 
	.pot-129 { top:352px; left:61%; height:207px; z-index:3 } /* Toffee */ 
	.pot-108 { top:376px; left:75%; height:173px } /* Vanilla */ 
		
	
	.pots-67 { min-height:666px!important }

	.pot-124 { top:120px; left:28%; height:134px } /* Blueberry  */
	.pot-83 { top:89px; left:51%; height:153px } /* Vanilla  */
	.pot-128 { top:120px; left:73%; height:134px } /* Toffee  */

	.pot-75 { top:1280px; left:0; height:134px; display:none } /* Black Cherry  */
	.pot-105 { top:1280px; left:0; height:134px; display:none } /* Natural  */
	.pot-125 { top:1280px; left:0; height:134px; display:none } /* Lemon  */
	.pot-127 { top:1280px; left:0; height:134px; display:none } /* Raspberry  */

	.pot-106 { top:284px; left:27%; height:148px; z-index:1 } /* Rhubarb  */
	.pot-107 { top:284px; left:49%; height:148px; z-index:1 } /* Strawberry  */
	.pot-78 { top:284px; left:71%; height:148px; z-index:1 } /* Gooseberry  */

	.pot-126 { top:430px; left:5%; height:148px; z-index:2 } /* Peach  */
	.pot-104 { top:430px; left:27%; height:148px; z-index:2 } /* Mandarin  */
	.pot-76 { top:430px; left:49%; height:148px; z-index:2 } /* Blackcurrant  */
	.pot-102 { top:430px; left:71%; height:148px; z-index:2 } /* Mixed Berries  */
	
	.pagewrap84 { top:44vh }
}

@media screen and (max-width: 760px) {

	/************************************************************************************
	GENERAL
	*************************************************************************************/
	body {
		font-size: .95em;
	}


	/************************************************************************************
	STRUCTURE
	*************************************************************************************/
	body .pagewidth,
	body.full_width .themify_builder_row .row_inner,
	body.full_width .related-posts,
	.full_width .post-nav,
	.full_width .commentwrap	{
		max-width: 90%;
	}
	body #content {
		width: 100%;
		max-width: 100%;
		float: none;
		clear: both;
		/*padding-top: 10%;*/
	}

	/* sidebar */
	body #sidebar {
		width: 100%;
		max-width: 100%;
		float: none;
		clear: both;
		padding-top: 10%;
	}
	
}

@media screen and (max-width: 680px) {

	/************************************************************************************
	GRID
	*************************************************************************************/
	.col4-1,
	.col4-2, .col2-1,
	.col4-3,
	.col3-1,
	.col3-2	 {
		margin-left: 0;
		width: 100%;
		max-width: 100%;
	}
	
	.col4-2 .module-text, .col4-3 .module-text, .col4-2 .module-buttons { text-align:center!important }
	#LYLWinner { padding-bottom:5em }
	
	h1.mediumhead small { letter-spacing:1px; font-size:30% }
	h2 { font-size:24px!important }
	
	.pots-67 .sp-grass { bottom:128px }
	.pots-68 .sp-grass { bottom:119px }
	
	.pots-68 { min-height:584px!important }
	
	.pot-110 { top:216px; left:25%; height:138px; z-index:1 } /* Strawberry */ 
	.pot-73 { top:155px; left:40%; height:170px; z-index:2 } /* Raspberry */ 
	.pot-130 { top:186px; left:58%; height:152px; z-index:1 } /* Natural Fat Free */ 
	
	.pot-84 { top:335px; left:25%; height:144px; z-index:3 } /* Honey Greek Style */ 
	.pot-80 { top:320px; left:40%; height:170px; z-index:4 } /* Natural */ 
	.pot-129 { top:322px; left:58%; height:166px; z-index:3 } /* Toffee */ 
	.pot-108 { top:346px; left:75%; height:138px } /* Vanilla */ 
	
	.pots-67 { min-height:584px!important }
	
	.pot-124 { top:120px; left:28%; height:107px } /* Blueberry  */
	.pot-83 { top:89px; left:50%; height:122px } /* Vanilla  */
	.pot-128 { top:120px; left:73%; height:107px } /* Toffee  */

	.pot-75 { top:1280px; left:0; height:107px; display:none } /* Black Cherry  */
	.pot-105 { top:1280px; left:0; height:107px; display:none } /* Natural  */
	.pot-125 { top:1280px; left:0; height:107px; display:none } /* Lemon  */
	.pot-127 { top:1280px; left:0; height:107px; display:none } /* Raspberry  */

	.pot-106 { top:244px; left:27%; height:118px; z-index:1 } /* Rhubarb  */
	.pot-107 { top:244px; left:49%; height:118px; z-index:1 } /* Strawberry  */
	.pot-78 { top:244px; left:71%; height:118px; z-index:1 } /* Gooseberry  */

	.pot-126 { top:360px; left:5%; height:118px; z-index:2 } /* Peach  */
	.pot-104 { top:360px; left:27%; height:118px; z-index:2 } /* Mandarin  */
	.pot-76 { top:360px; left:49%; height:118px; z-index:2 } /* Blackcurrant  */
	.pot-102 { top:360px; left:71%; height:118px; z-index:2 } /* Mixed Berries  */


	.pol { position:initial!important }
	.pol img { max-width:100% }
	p.pold,div.pold { margin:0 }
	
	body.post-132 .pol img { max-width:90% }

	/************************************************************************************
	HEADER
	*************************************************************************************/
	/* prevent logo img extend the fixed header on mobile */
	.fixed-header #headerwrap #site-logo img {
		width: auto;
		max-height: 40px;
	}

	/* mega menu */
	#main-nav .has-mega-column > .sub-menu {
		overflow: inherit; /* prevent scrollbar */
	}

	/* menu icon */
	#headerwrap .header-icons { 
		right: 5%;
	}
	.pr-text { height:auto; padding:1em 2em 0 }
	
	.ourupdate { height:1001px }
	
	.tiwwad { width:60%; max-width:333px }
	.orange { top:84px }
	.orange1 { left:-5%; top:-30px }
	.orange2 { left:9%; top:676px }
	
	.newlid { display:none }
	
	.raspberrybigpot { width:200px; top:389px; right:48% }
	.gooseberrysmallpot { top:765px; right:unset; left:63%;  width:189px }
	
	
	.parabg5 { right:31%; top:829px }
	.parabg6 { left:27%; top:627px }
	.parabg7 { left:49.7%; top:480px }
	.parabg8 { left:46%; top:389px }
	
	#footer h2, #footer .newsletter-subscription { width:100%; text-align:center }
	#footer .footer-nav-wrap.right { float:none; text-align:center }
	

	/************************************************************************************
	POST LAYOUTS
	*************************************************************************************/
	/* all post */
	.shortcode.loops-wrapper.list-post .post,
	.shortcode.loops-wrapper.grid4 .post,
	.shortcode.loops-wrapper.grid3 .post,
	.shortcode.loops-wrapper.grid2 .post,
	.shortcode.grid2-thumb .post,
	.shortcode.list-thumb-image .post,
	.shortcode.list-large-image .post,
	.loops-wrapper.list-post .post,
	.loops-wrapper.grid4 .post,
	.loops-wrapper.grid3 .post,
	.loops-wrapper.grid2 .post,
	.loops-wrapper.grid2-thumb .post,
	.loops-wrapper.list-thumb-image .post,
	.loops-wrapper.list-large-image .post,
        .loops-wrapper.no-gutter.grid2 .post,
	.loops-wrapper.no-gutter.grid3 .post,
	.loops-wrapper.no-gutter.grid4 .post {
		width: 100%;
		margin-left: 0;
		float: none;
	}

	/* all post title */
	.post-title,
	.loops-wrapper.list-post .post-title,
	.loops-wrapper.grid4 .post-title,
	.loops-wrapper.grid3 .post-title,
	.loops-wrapper.grid2 .post-title,
	.loops-wrapper.grid2-thumb .post-title,
	.loops-wrapper.list-thumb-image .post-title,
	.loops-wrapper.list-large-image .post-title,
	.loops-wrapper.slider .post-title {
    font-size: 1.8em;
}

	/* all post image */
	.loops-wrapper.list-post .post-image,
	.loops-wrapper.grid4 .post-image,
	.loops-wrapper.grid3 .post-image,
	.loops-wrapper.grid2 .post-image,
	.loops-wrapper.list-large-image .post-image {
		float: none;
		position: static;
		width: auto;
		overflow: visible;
	}

	/* all post content */
	.loops-wrapper.grid2-thumb .post-content,
	.loops-wrapper.list-thumb-image .post-content {
		overflow: visible;
	}

	/* post meta */
	.loops-wrapper.list-post .post-meta, .single .post-meta {
		font-size: .9em;
	}
	
	/* all post date */
	.loops-wrapper.list-post .post-date-wrap,
	.single .post-content .post-date-wrap,
	.loops-wrapper.list-post .post-date,
	.single .post-content .post-date {
		width: auto;
		height: auto;
		text-align:center;
		margin:0
	}
	.loops-wrapper.list-post .has-post-thumbnail .post-date-wrap,
	.single .has-post-thumbnail .post-date-wrap {
		/*margin-top: -65px; WHAT!? */
	}
	.loops-wrapper.list-post .post-date .day,
	.single .post-date .day {
    font-size: 23px;
}
	.loops-wrapper.list-post .post-date .month,
	.single .post-date .month {
		font-size: 13px;
		padding-top: 18px;
	}
	.loops-wrapper.list-post .post-date .year,
	.single .post-date .year {
		font-size: 10px;
	}

	/* slider post */
	.loops-wrapper.slider .post-meta {
		position: static;
	}
	#gallery-controller .slider .carousel-nav-wrap,
	#gallery-controller .slider-dot {
		display: none;
	}
	.colour-bar { height:5em }
	
	/* related post */
	.related-posts .post {
		width: auto;
		float: none;
	}
	.related-posts .post img {
		width: 100%;
	}

	/************************************************************************************
	COMMENT FORM
	*************************************************************************************/
	#commentform input[type=text], 
	#contactform input[type=text] {
		max-width: 50%;
	}

	/************************************************************************************
	COMMENTS
	*************************************************************************************/
	.commentlist .reply {
		position: static;
	}
	#respond #cancel-comment-reply-link {
		position: static;
		display: table;
	}
	.commentwrap .pagenav.top {
		position: static;
	}
	
	/*
	SINGLE SPLIT LAYOUT
	================================================ */
	.single.single-split-layout .featured-area,
	.single.single-split-layout #footerwrap,
	.single.single-split-layout #layout,
	.single.single-split-layout .post-nav {
		position: relative;
		width: 100%;
		float: none;
	}
	.single.single-split-layout #layout {
		max-width: 90%;
	}
	.single.single-split-layout #content,
	.single.single-split-layout #footerwrap {
		padding-left: inherit;
		padding-right: inherit;
	}
	.single.single-split-layout .featured-area .post-image {
		margin-bottom: 0;
	}
	.single.single-split-layout .related-posts .post-image img,
	.single.single-split-layout .post-image img {
		height: auto;
		min-height: initial;
	}
	.single.single-split-layout .post-nav {
		background-color: transparent;
		margin-bottom: 1em;
	}
	.single.single-split-layout .post-nav .prev,
	.single.single-split-layout .post-nav .next {
		clear: none;
	}
	.single.single-split-layout .featured-area .post-content {
		padding-top: 1.7em;
	}
	.single.single-split-layout .post-image + .post-content .post-meta,
	.single.single-split-layout .post-meta {
		margin-bottom: 0.5em;
	}
	
	/*
	SINGLE POST LAYOUTS
	================================================ */
	.single.single-fullwidth-layout .featured-area .post-image + .post-content .post-date-wrap {
		margin-top: -65px;
	}
	.single.single-slider-layout .featured-area .post-content .post-date-wrap {
		margin-top: -65px;
	}
	.single.single-slider-layout .featured-area .carousel-pager {
		bottom: 55px;
	}
	.single.single-slider-layout .featured-area .carousel-next,
	.single.single-slider-layout .featured-area .carousel-prev {
		max-height: 50px;
		font-size: 14px;
	}
	.single.single-slider-layout .featured-area .carousel-next:before,
	.single.single-slider-layout .featured-area .carousel-prev:before {
		padding: 16px 8px 16px 5px;
	}
	.single.single-gallery-layout .featured-area .gallery-wrapper + .post-content .post-date-wrap {
		margin-top: -40px;
	}

	/* FOOTER LEFT COL, FOOTER RIGHT COL, FOOTER HORIZONTAL LEFT, FOOTER HORIZONTAL RIGHT
	================================================ */
	.footer-horizontal-left .footer-left-wrap,
	.footer-horizontal-right .footer-left-wrap,
	.footer-horizontal-left .footer-right-wrap,
	.footer-horizontal-right .footer-right-wrap,
	.footer-left-col .main-col,
	.footer-right-col .main-col,
	.footer-left-col .section-col,
	.footer-right-col .section-col {
		margin-left: 0;
		margin-right: 0;
		width: 100%;
		max-width: 100%;
	}

	/************************************************************************************
	POST NAV
	*************************************************************************************/
	.post-nav .prev,
	.post-nav .next {
		display: block;
		width: 100%;
		clear: both;
		margin-bottom: 10px;
	}
	.builder-posts-wrap .post-content .entry-content,
	.fp_posts figure.post-image	{ height:auto }
	.pot-insert { top:0 }

	/************************************************************************************
	COMMENTS
	*************************************************************************************/
	.commentlist {
		padding-left: 0;
	}
	.commentlist .commententry {
		clear: left;
	}
	.commentlist .avatar {
		float: left;
		width: 40px;
		height: 40px;
		margin: 0 1em 1em 0;
	}

}

/************************************************************************************
HEADER WIDGETS
*************************************************************************************/
@media screen and (max-height:900px) {
	.full-section-scrolling #headerwrap .header-widget,
	.header-horizontal #headerwrap .header-widget,
	.header-top-bar #headerwrap .header-widget,
	.boxed-compact #headerwrap .header-widget {
		max-height: 300px;
	}
}

@media screen and (max-height:750px) and (min-width:480px) {
	
	body.post-4 .owl-stage { height:100vh }
}

@media screen and (max-height:750px) {
	.full-section-scrolling #headerwrap .header-widget,
	.header-horizontal #headerwrap .header-widget,
	.header-top-bar #headerwrap .header-widget,
	.boxed-compact #headerwrap .header-widget {
		max-height: 300px;
	}
	
}

@media screen and (max-height:600px) {
	.full-section-scrolling #headerwrap .header-widget,
	.header-horizontal #headerwrap .header-widget,
	.header-top-bar #headerwrap .header-widget,
	.boxed-compact #headerwrap .header-widget {
		max-height: 300px;
	}
}

@media screen and (max-height:480px) {
	.full-section-scrolling #headerwrap .header-widget,
	.header-horizontal #headerwrap .header-widget,
	.header-top-bar #headerwrap .header-widget,
	.boxed-compact #headerwrap .header-widget {
		max-height: 250px;
	}
}

@media screen and (max-height:400px) {
	.full-section-scrolling #headerwrap .header-widget,
	.header-horizontal #headerwrap .header-widget,
	.header-top-bar #headerwrap .header-widget,
	.boxed-compact #headerwrap .header-widget {
		max-height: 200px;
	}
}

@media screen and (max-height:320px) {
	.full-section-scrolling #headerwrap .header-widget,
	.header-horizontal #headerwrap .header-widget,
	.header-top-bar #headerwrap .header-widget,
	.boxed-compact #headerwrap .header-widget {
		max-height: 130px;
	}
}

@media screen and (max-height:280px) {
	.full-section-scrolling #headerwrap .header-widget,
	.header-horizontal #headerwrap .header-widget,
	.header-top-bar #headerwrap .header-widget,
	.boxed-compact #headerwrap .header-widget {
		max-height: 120px;
	}
}

/* Second sidebar */
@media screen and (max-width: 760px) {
	#sidebar-alt + #sidebar {
		padding-top: 0;
	}

	.sidebar2 #layout {
		display: block;
	}
	
	body:not(.sidebar2):not(.sidebar-none):not(.sidebar-left):not(.full_width) #content,
	body:not(.sidebar2):not(.sidebar-left) #sidebar,
	.sidebar-left #content,
	.sidebar-left #sidebar {
		float: none;
		width: 100%;
	}
}


.wow {
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both
}

/* animate.css */

@charset "UTF-8";


/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license

Copyright (c) 2013 Daniel Eden

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  60% {
    -webkit-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
}

@-webkit-keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

@keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
}

@keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  40% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  60% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }

  80% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  40% {
    -webkit-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  60% {
    -webkit-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg);
  }

  80% {
    -webkit-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

.swing {
  -webkit-transform-origin: top center;
  -ms-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg);
  }

  100% {
    -webkit-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}

@keyframes tada {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    -ms-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    -ms-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    -ms-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg);
  }

  100% {
    -webkit-transform: scale(1) rotate(0);
    -ms-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}

.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes wobble {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }

  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
    transform: translateX(-25%) rotate(-5deg);
  }

  30% {
    -webkit-transform: translateX(20%) rotate(3deg);
    transform: translateX(20%) rotate(3deg);
  }

  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
    transform: translateX(-15%) rotate(-3deg);
  }

  60% {
    -webkit-transform: translateX(10%) rotate(2deg);
    transform: translateX(10%) rotate(2deg);
  }

  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
    transform: translateX(-5%) rotate(-1deg);
  }

  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
}

@keyframes wobble {
  0% {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
  }

  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
    -ms-transform: translateX(-25%) rotate(-5deg);
    transform: translateX(-25%) rotate(-5deg);
  }

  30% {
    -webkit-transform: translateX(20%) rotate(3deg);
    -ms-transform: translateX(20%) rotate(3deg);
    transform: translateX(20%) rotate(3deg);
  }

  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
    -ms-transform: translateX(-15%) rotate(-3deg);
    transform: translateX(-15%) rotate(-3deg);
  }

  60% {
    -webkit-transform: translateX(10%) rotate(2deg);
    -ms-transform: translateX(10%) rotate(2deg);
    transform: translateX(10%) rotate(2deg);
  }

  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
    -ms-transform: translateX(-5%) rotate(-1deg);
    transform: translateX(-5%) rotate(-1deg);
  }

  100% {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
  }
}

.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
    transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
    transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
    -ms-transform: scale(.3);
    transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
    -ms-transform: scale(.9);
    transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }

  80% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    transform: translateY(30px);
  }

  80% {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }

  80% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }

  80% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
  }

  80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    -ms-transform: translateX(-30px);
    transform: translateX(-30px);
  }

  80% {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  80% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  80% {
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  25% {
    -webkit-transform: scale(.95);
    transform: scale(.95);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(.3);
    transform: scale(.3);
  }
}

@keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  25% {
    -webkit-transform: scale(.95);
    -ms-transform: scale(.95);
    transform: scale(.95);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(.3);
    -ms-transform: scale(.3);
    transform: scale(.3);
  }
}

.bounceOut {
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

@keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

@keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

@keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

@keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
}

@keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }
}

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

@keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }
}

@keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }
}

.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

@keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
}

@keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }
}

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

@keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}

@keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

@keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

.animated.flip {
  -webkit-backface-visibility: visible;
  -ms-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}

@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}

@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    -ms-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    -ms-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}

@keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    -ms-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    -ms-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    -ms-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    -ms-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}

.flipInY {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}

@keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}

.flipOutX {
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}

@keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    -ms-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    -ms-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}

.flipOutY {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}

@-webkit-keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    transform: translateX(-20%) skewX(30deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    transform: translateX(0%) skewX(-15deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}

@keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    -ms-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    -ms-transform: translateX(-20%) skewX(30deg);
    transform: translateX(-20%) skewX(30deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    -ms-transform: translateX(0%) skewX(-15deg);
    transform: translateX(0%) skewX(-15deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    -ms-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}

.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
  0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
}

@keyframes lightSpeedOut {
  0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    -ms-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    -ms-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
}

.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    -ms-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0;
  }
}

@keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(200deg);
    -ms-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0;
  }
}

.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
}

@-webkit-keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

@keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

@keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

@keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%, 60% {
    -webkit-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40% {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  80% {
    -webkit-transform: rotate(60deg) translateY(0);
    transform: rotate(60deg) translateY(0);
    opacity: 1;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  100% {
    -webkit-transform: translateY(700px);
    transform: translateY(700px);
    opacity: 0;
  }
}

@keyframes hinge {
  0% {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%, 60% {
    -webkit-transform: rotate(80deg);
    -ms-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40% {
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  80% {
    -webkit-transform: rotate(60deg) translateY(0);
    -ms-transform: rotate(60deg) translateY(0);
    transform: rotate(60deg) translateY(0);
    opacity: 1;
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  100% {
    -webkit-transform: translateY(700px);
    -ms-transform: translateY(700px);
    transform: translateY(700px);
    opacity: 0;
  }
}

.hinge {
  -webkit-animation-name: hinge;
  animation-name: hinge;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
    transform: translateX(-100%) rotate(-120deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }
}

@keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
    -ms-transform: translateX(-100%) rotate(-120deg);
    transform: translateX(-100%) rotate(-120deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    -ms-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }
}

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
    transform: translateX(100%) rotate(120deg);
  }
}

@keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    -ms-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
    -ms-transform: translateX(100%) rotate(120deg);
    transform: translateX(100%) rotate(120deg);
  }
}

.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}

@keyframes zoomIn {
 0% {
  opacity:0;
  -webkit-transform:scale3d(.3,.3,.3);
  -ms-transform:scale3d(.3,.3,.3);
  transform:scale3d(.3,.3,.3)
 }
 50% {
  opacity:1
 }
}
.zoomIn {
 -webkit-animation-name:zoomIn;
 animation-name:zoomIn
}

@keyframes heartbeat
{
  0%	{ transform: scale( .85 ); }
  20%	{ transform: scale( 1 ); }
  40%	{ transform: scale( .85 ); }
  60%	{ transform: scale( 1 ); }
  80%	{ transform: scale( .85 ); }
  100%	{ transform: scale( .85 ); }
}

@keyframes scatty1
{
  0%	{ transform: translate( -5px, 5px ); }
  20%	{ transform: translate( 5px, 0px ); }
  40%	{ transform: translate( 3px, 5px ); }
  60%	{ transform: translate( -3px, 0px ); }
  80%	{ transform: translate( 5px, 5px ); }
  100%	{ transform: translate( 0, -5px ); }
}

.scatty1 {
 -webkit-animation-name:scatty1;
 animation-name:scatty1;
  animation-iteration-count:infinite;
  -webkit-animation-iteration-count:infinite;
  animation-timing-function:step-end;
  -webkit-animation-timing-function:step-end
}

@keyframes scatty2
{
  0%	{ transform: translate( 5px, 0px ); }
  20%	{ transform: translate( -5px, 5px ); }
  40%	{ transform: translate( -3px, 0px ); }
  60%	{ transform: translate( 3px, 5px ); }
  80%	{ transform: translate( 0, -5px ); }
  100%	{ transform: translate( 5px, 5px ); }
}


.scatty2 {
 -webkit-animation-name:scatty2;
 animation-name:scatty2;
  animation-iteration-count:infinite;
  -webkit-animation-iteration-count:infinite;
  animation-timing-function:step-end;
  -webkit-animation-timing-function:step-end
}

@keyframes scatty3
{
  0%	{ transform: translate( 0, -5px ); }
  20%	{ transform: translate( 5px, 5px ); }
  40%	{ transform: translate( 5px, 0px ); }
  60%	{ transform: translate( -3px, 0px ); }
  80%	{ transform: translate( 3px, 5px ); }
  100%	{ transform: translate( -5px, 5px ); }
}


.scatty3 {
 -webkit-animation-name:scatty3;
 animation-name:scatty3;
  animation-iteration-count:infinite;
  -webkit-animation-iteration-count:infinite;
  animation-timing-function:step-end;
  -webkit-animation-timing-function:step-end
}

@keyframes scatty4
{
  0%	{ transform: translate( -5px, 5px ) rotate(-23deg); }
  20%	{ transform: translate( 5px, 0px ) rotate(-21deg); }
  40%	{ transform: translate( 3px, 5px ) rotate(-18deg); }
  60%	{ transform: translate( -3px, 0px ) rotate(-24deg); }
  80%	{ transform: translate( 5px, 5px ) rotate(-28deg); }
  100%	{ transform: translate( 0, -5px ) rotate(-17deg); }
}



.scatty4 {
 -webkit-animation-name:scatty4;
 animation-name:scatty4;
  animation-iteration-count:infinite;
  -webkit-animation-iteration-count:infinite;
  animation-timing-function:step-end;
  -webkit-animation-timing-function:step-end
}


@keyframes scatty5
{
  0%	{ transform: translate( -5px, 5px ) rotate(13deg); }
  20%	{ transform: translate( 5px, 0px ) rotate(16deg); }
  40%	{ transform: translate( 3px, 5px ) rotate(14deg); }
  60%	{ transform: translate( -3px, 0px ) rotate(17deg); }
  80%	{ transform: translate( 5px, 5px ) rotate(19deg); }
  100%	{ transform: translate( 0, -5px ) rotate(16deg); }
}




.scatty5 {
 -webkit-animation-name:scatty5;
 animation-name:scatty5;
 animation-iteration-count:infinite;
 -webkit-animation-iteration-count:infinite;
  animation-timing-function:step-end;
  -webkit-animation-timing-function:step-end
}



@keyframes star1
{
  0%	{ transform: translate( -25px, 25px ) rotate(13deg) scale(0.3); }
  20%	{ transform: translate( 25px, 0px ) rotate(46deg) scale(0.9); }
  40%	{ transform: translate( 13px, 25px ) rotate(24deg) scale(0.6); }
  60%	{ transform: translate( -13px, 0px ) rotate(97deg) scale(0.7); }
  80%	{ transform: translate( 25px, 25px ) rotate(119deg) scale(0.4); }
  100%	{ transform: translate( 0, -25px ) rotate(216deg) scale(0.8); }
}

.star1 {
 -webkit-animation-name:star1;
 animation-name:star1;
 -webkit-animation-duration:0.45s;
 animation-name-duration:0.45s;
 animation-iteration-count:infinite;
 -webkit-animation-iteration-count:infinite;
  animation-timing-function:step-end;
  -webkit-animation-timing-function:step-end
}


@keyframes star2
{
  0%	{ transform: translate( 25px, 0px ) rotate(146deg) scale(0.9); }
  20%	{ transform: translate( -25px, 25px ) rotate(213deg) scale(0.3); }
  40%	{ transform: translate( 0, -35px ) rotate(316deg) scale(0.8); }
  60%	{ transform: translate( 23px, 35px ) rotate(124deg) scale(0.6); }
  80%	{ transform: translate( 25px, 25px ) rotate(19deg) scale(0.4); }
  100%	{ transform: translate( -33px, 0px ) rotate(97deg) scale(0.7); }
}

.star2 {
 -webkit-animation-name:star2;
 animation-name:star2;
 -webkit-animation-duration:0.55s;
 animation-name-duration:0.55s;
 animation-iteration-count:infinite;
 -webkit-animation-iteration-count:infinite;
  animation-timing-function:step-end;
  -webkit-animation-timing-function:step-end
}

@keyframes star3
{
  0%	{ transform: translate( 55px, 10px ) rotate(96deg) scale(0.4); }
  20%	{ transform: translate( -35px, 15px ) rotate(113deg) scale(0.7); }
  40%	{ transform: translate( 10px, -65px ) rotate(216deg) scale(0.6); }
  60%	{ transform: translate( 43px, 35px ) rotate(24deg) scale(0.9); }
  80%	{ transform: translate( -33px, 0px ) rotate(297deg) scale(0.3); }
  100%	{ transform: translate( 35px, 15px ) rotate(119deg) scale(0.8); }
}

.star3 {
 -webkit-animation-name:star3;
 animation-name:star3;
 -webkit-animation-duration:0.51s;
 animation-name-duration:0.51s;
 animation-iteration-count:infinite;
 -webkit-animation-iteration-count:infinite;
  animation-timing-function:step-end;
  -webkit-animation-timing-function:step-end
}


/** ihavecookies.js **/

button#ihavecookiesBtn {
    margin-left: 0px !important;
}
/* Cookie Dialog */
#gdpr-cookie-message {
    position:fixed; right:30px; bottom:30px; z-index:12;
    max-width:375px;
    background-color:#111;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 6px 6px rgba(0,0,0,0.25);
    margin-left: 30px;
    font-family: system-ui;
}
#gdpr-cookie-message h4 {
    color:#fff;
    font-family: 'Londrina', sans-serif;
    font-size: 18px; font-weight: 500; margin-bottom: 10px; padding:0
}
#gdpr-cookie-message h5 {
    color:#8b0101;
    font-family:'Londrina', sans-serif; font-size:15px; font-weight:500;
    margin-bottom: 10px;
}
#gdpr-cookie-message p, #gdpr-cookie-message ul {
    color: white;
    font-size: 15px; font-family:Program,sans-serif;
    line-height: 1.5em;
}
#gdpr-cookie-message p:last-child {
    margin-bottom: 0;
}
#gdpr-cookie-message li {
    width: 49%;
    display: inline-block;
}
#gdpr-cookie-message a {
    color:#8b0101;
    text-decoration: none;
    font-size: 15px;
    padding-bottom: 2px;
    border-bottom: 1px dotted rgba(255,255,255,0.75);
    transition: all 0.1s ease-in;
}
#gdpr-cookie-message a:hover {
    color: white;
    border-bottom-color:#d47979;
    transition: all 0.1s ease-in;
}
#gdpr-cookie-message button,
button#ihavecookiesBtn {
    background:#8b0101;
    color: white;
    font-family:'Londrina', sans-serif;
    font-size: 15px;
    padding: 7px; display:inline; margin-right:5px;
    cursor: pointer;
    transition: all 0.1s ease-in;
}
#gdpr-cookie-message button:hover {
    background: white;
    color:#8b0101;
    transition: all 0.1s ease-in;
}
button#gdpr-cookie-advanced {
    background: white;
    color:#8b0101;
}
#gdpr-cookie-message button:disabled {
    opacity: 0.3;
}
#gdpr-cookie-message input[type="checkbox"] {
    float: none;
    margin-top: 0;
    margin-right: 5px;
}