@charset "utf-8";

/**
 * Theme Name:     Fruttini
 * Theme URI:      www.biscotti-per-cavalli.it
 * Description:    Biscotti per cavalli
 * Author:         Pircher Stefan
 * Author URI:     www.ps-design.it
 * Version:        1.0
 */

/* ============================
   > CONTENTS
   ==================
		> BODY, HTML
		> LINKS
		> PRELOADER
		> FLEXBOX
*/

/* ============================
   > BODY, HTML
   ================== */

body, html, input, button, textarea, select {
		font-family:var(--frut_font_default); font-size:24px;
		line-height:2rem; color:var(--frut_white);
}
body { background-color:var(--frut_white); overflow:hidden; }
body.loaded { overflow:auto; } body.menu_mobile_opened { overflow:hidden; }

/* media-queries */
@media screen and (max-width: 480px) {}

/* ============================
   > CSS-VARIABLES
   ================== */

:root {
		/* farbwerte */
		--frut_blue:#207dbb;
		--frut_green:#80af47;
		--frut_orange:#dfaa27;
		--frut_purple:#9d3756;
		--frut_yellow:#e3b626;
		--frut_black:#000;
		--frut_white:#fff;
		/* schriften */
		--frut_font_default:'Lora', Arial, Helvetica, sans-serif;
		--frut_font_handwritten:'OoohBaby-Regular', Arial, Helvetica, sans-serif;
}

/* ============================
   > FONT-EMBEDS
   ================== */

@font-face {
		font-family:'Lora';
		src:url('fonts/Lora-Bold.woff2') format('woff2');
}
@font-face {
		font-family:'OoohBaby-Regular';
		src:url('fonts/OoohBaby-Regular.woff2') format('woff2');
}

/* ============================
   > LINKS
   ================== */

a:link 			{ font-family:var(--frut_font_default); color:var(--frut_white); text-decoration:underline; }
a:visited 	{ font-family:var(--frut_font_default); color:var(--frut_white); text-decoration:underline; }
a:active 		{ font-family:var(--frut_font_default); color:var(--frut_white); text-decoration:none; }
a:hover 		{ font-family:var(--frut_font_default); color:var(--frut_white); text-decoration:none; }

/* ============================
   > PRELOADER
   ================== */

#preloader {
		position:fixed; z-index:999;
		top:0; width:100%; height:100vh;
		background:var(--frut_blue);

		display:flex; align-items:center;
		justify-content:center;

		animation-timing-function:ease-in-out;
		animation-fill-mode:forwards;
		animation-duration:1s;
}
#preloader .logo {
		background:url('images/fruttini-white.svg') no-repeat center;
		background-size:contain; width:150px; height:121px;
		animation:zoom-in-zoom-out 3s ease infinite;
		display:none; /* not-in-use */
}
#preloader .loader {
		width:48px; height:48px; background-size:48px 48px;
		background:url('images/loading.svg') no-repeat center;
}
/* body-loaded-and-ready */
.loaded #preloader .loader,
.loaded #preloader .logo {
		transition:all .3s ease-out;
		opacity:0;
}
.loaded #preloader {
		animation-name:fadeOut;
		animation-delay:.4s;
}
/* keyframe-animations */
@keyframes fadeOut {
		0% { opacity:1; visibility:visible; }
		100% { opacity:0; visibility:hidden; }
}
@keyframes zoom-in-zoom-out {
		0% { transform:scale(1, 1); }
		50% { transform:scale(1.2, 1.2); }
		100% { transform:scale(1, 1); }
}

/* media-queries */
@media screen and (max-width: 720px) {
		#preloader .logo {
				width:100px; height:81px;
		}
}

/* ============================
   > FLEXBOX
   ================== */

.flex {
		display:-webkit-flex;
		display:-ms-flexbox;
		display:flex;
}

/* ============================
   > H/V CENTERING
   ================== */

.halign { left:50%; transform:translateX(-50%); }
.valign { top:50%; transform:translateY(-50%); }
.hvalign { top:50%; left:50%; transform:translate(-50%,-50%); }

/* ============================
   > HEADLINES
   ================== */

h1, h2, h3, h4, h5 {
		font-weight:normal;
}
/* section-headline */
section h2 {
		font-size:68px; line-height:3rem;
		color:var(--frut_white);
}
/* section-subline */
section h3, #footer h5 {
		line-height:1.2rem;
		font-size:24px;
}

/* media-queries */
@media screen and (max-width: 980px) {
		section h2 {
				line-height:2.6rem;
				font-size:58px;
		}
}
@media screen and (max-width: 720px) {
		section h2 {
				line-height:2.2rem;
				font-size:48px;
		}
		section h3, #footer h5 {
				line-height:1.1rem;
				font-size:22px;
		}
}
@media screen and (max-width: 480px) {
		section h2 {
				line-height:1.8rem;
				font-size:38px;
		}
		section h3, #footer h5 {
				line-height:1rem;
				font-size:20px;
		}
}


/* ============================
   > WRAPPER
   ================== */

.max1400, .max1200, .max980 {
		margin:0 auto;
}
.max1400 { max-width:1400px; }
.max1200 { max-width:1200px; }
.max980 {	max-width:980px; }

/* media-queries */
@media screen and (max-width: 1480px) {
		.max1400 {
				max-width:none;
				margin:0 40px;
		}
}
@media screen and (max-width: 1280px) {
		.max1200 {
				max-width:none;
				margin:0 40px;
		}
}
@media screen and (max-width: 1060px) {
		.max980 {
				max-width:none;
				margin:0 40px;
		}
}
@media screen and (max-width: 720px) {
		.max1400, .max1200, .max980 {
				margin:0 20px !important;
		}
}

/* ============================
   > HEADER
   ================== */

#preheader {
		background:var(--frut_blue);
		height:40px;
}
#header {
		background:var(--frut_blue);
}
#header .inner {
		border-bottom:1px solid #3592d0;
		align-items:center;
}
#header .col {
		flex:1 0 280px;
}
#header .col.left {
		/*background:lightblue;*/
}
#header .col.center {
		text-align:center;
		/*background:lightgreen;*/
		flex:0 0 280px;
}
#header .col.center .logo {
		display:block; margin:0 0 12px;
		width:280px; height:97px;
}
#header .col.right {
		display:flex;
		justify-content:flex-end;
		/*background:lightcoral;*/
}
#header .col.right .equihelp {
		position:relative; width:174px; height:49px;
		background:url('images/equihelp.svg') no-repeat;
		text-decoration:none;
}
/* header-is-sticky */
#header.sticky {
    position:fixed; z-index:6;
		animation-name:slideInTop;
		top:0; left:0; right:0;
		/*animation-delay:3s;*/

		animation-duration:.6s;
		animation-fill-mode:both;
}
#header.sticky .col {
		flex:1 0 196px;
}
#header .col.center {
		flex:0 0 196px;
}
#header.sticky .col.center .logo {
		width:196px; /*height:68px;*/ height:44px;
		margin:12px 0; background-size:cover;
		background-position:top;
}
#header.sticky .col.center {
		flex:0 0 196px;
}

/* keyframe-animations */
@keyframes slideInTop {
		0% {
				opacity:0;
				top:-80%;
		}
		100% {
				opacity:1;
				top:0%;
		}
}

/* media-queries */
@media screen and (max-width: 1280px) {
		.max1400 {
				max-width:none;
				margin:0 40px;
		}
		#header .col {
				flex:1 0 196px;
		}
		#header .col.center {
				flex:0 0 196px;
		}
		#header .col.center .logo {
				width:196px; height:68px;
		}
}
@media screen and (max-width: 1080px) {
		#preheader {
				display:none;
		}
		.menu_mobile_opened #header {
				position:fixed; z-index:6;
				top:0; left:0; right:0;
		}
		#header .col.center .logo,
		#header.sticky .col.center .logo {
				margin:18px 0 12px;
		}
}
@media screen and (max-width: 720px) {
		#header .col.right .equihelp {
				width:62px; height:49px;
				background-size:cover;
		}
		#header .col,
		#header.sticky .col {
				flex:1 0 auto;
		}
}
@media screen and (max-width: 480px) {
		#header {
				position:fixed; z-index:6;
				transition:all .2s ease;
				top:0; left:0; right:0;
		}
		.menu_mobile_opened #header {
				background:var(--frut_purple);
		}
		.menu_mobile_opened #header .inner {
				border-bottom:1px solid #b05e77;
		}
		#header.sticky {
				animation:none;
		}
		#header.sticky .col.center,
		#header .col.center {
				flex:0 0 160px;
		}
		#header .col.center .logo,
		#header.sticky .col.center .logo {
				width:160px; height:55px;
		}
}

/* ============================
   > LOGO-FRUTTINI
   ================== */

.logo {
		background-image:url('images/fruttini-white.svg');
		background-repeat:no-repeat; background-size:contain;
		background-position:center; text-decoration:none;
}

/* ============================
   > MMENU-U-MOBILE
   ================== */

.mmenu {
		display:flex; list-style:none;
		grid-gap:40px; padding:0;
}
.mmenu li {
		white-space:nowrap;
}
.mmenu li a {
		font-family:var(--frut_font_default);
		text-decoration:none; padding:10px 0;
		font-size:24px; line-height:100%;
}
.mmenu li a:hover,
.mmenu li a.active,
.mmoverlay .mmenu li a:hover,
.mmoverlay .mmenu li a.active {
		color:var(--frut_yellow);
}

/* media-queries */
@media screen and (max-width: 1280px) {
		.mmenu {
				grid-gap:30px;
		}
		.mmenu li a {
				font-size:22px;
		}
}
@media screen and (max-width: 1080px) {
		.mmenu {
				display:none;
		}
		.mmoverlay .mmenu {
				display:flex; align-items:center;
				flex-direction:column;
		}
		.mmoverlay .mmenu li a {
				font-size:36px;
				padding:0;
		}
}
@media screen and (max-width: 720px) {
		.mmoverlay .mmenu li a {
				font-size:28px;
		}
}

/* ============================
   > MOBILEMENU
   ================== */

.mmtrigger {
		display:none; z-index:992; width:40px;
		padding:25px 30px; transition-duration:0.5s;
		align-items:center; justify-content:center;
}
.mmtrigger .icon,
.mmtrigger .icon:before,
.mmtrigger .icon:after {
 		position:absolute; width:40px;
		height:4px; cursor:pointer;
		background:var(--frut_white);
}
.mmtrigger .icon:before,
.mmtrigger .icon:after { content:''; }
.mmtrigger .icon { transition-duration:0.5s; }
.mmtrigger .icon:before { transition-duration:0.5s; top:-12px; }
.mmtrigger .icon:after { transition-duration:0.5s; top:12px; }
.mmtrigger.open .icon { transition-duration:0.5s; transform:rotateZ(180deg); }
.mmtrigger.open .icon:before { transform:rotateZ(45deg) scaleX(0.75) translate(12px, -6px); }
.mmtrigger.open .icon:after {	transform:rotateZ(-45deg) scaleX(0.75) translate(12px, 6px); }
.mmtrigger:hover { cursor:pointer; }

/* overlay-slidedown */
.mmoverlay {
		position:fixed; z-index:4; top:-100vh; left:0; right:0; bottom:0;
		opacity:1; width:100%; height:100vh; background-color:var(--frut_purple);
		transition:top 0.5s cubic-bezier(0.46, 0.03, 0.52, 0.96), box-shadow 0.3s ease-out;
		display:flex; justify-content:center; align-items:center; overflow:hidden;
}
.mmoverlay .useful {
		position:absolute;
		bottom:-12%; opacity:0;
		display:flex; grid-gap:0; 
		justify-content:center;
		transition:all .4s ease;
		transition-delay:.6s;
		margin:0;
}
.mmoverlay .useful a {
		line-height:1rem;
		text-decoration:none;
		font-size:20px;
}
body.menu_mobile_opened .mmoverlay .useful {
		bottom:12%; opacity:1;
}
body.menu_mobile_opened .mmoverlay {
		top:0;
}

/* media-queries */
@media screen and (max-width: 1080px) {
		.mmtrigger {
				display:flex;
		}
}
@media screen and (max-width: 720px) {
		.mmoverlay .useful a {
				font-size:18px;
		}
}

/* ============================
   > SECTIONS
   ================== */

.section {
		position:relative;
}
.section .inner {
		position:relative;
		z-index:2;
}
#hero { background-color:var(--frut_blue); }
#flavors { background-color:var(--frut_green); }
#benefits { background-color:var(--frut_orange); }

/* section-paddings */
#hero.section {
		padding:150px 0;
}
#flavors.section {
		padding:50px 0 350px;
		text-align:center;
}
#benefits.section {
		padding:100px 0 250px;
		text-align:center;
}

/* media-queries */
@media screen and (max-width: 980px) {
		#hero.section {
				padding:100px 0;
		}
		#flavors.section {
				padding:50px 0 250px;
		}
		#benefits.section {
				padding:100px 0 150px;
		}
}
@media screen and (max-width: 720px) {
		#hero.section {
				padding:50px 0;
		}
		#flavors.section {
				padding:50px 0 200px;
		}
		#benefits.section {
				padding:100px 0;
		}
}
@media screen and (max-width: 480px) {
		#hero.section {
				padding:126px 0 50px;
		}
		#flavors.section {
				padding:50px 0 150px;
		}
}
@media screen and (max-width: 380px) {
		#flavors.section {
				padding:50px 0 100px;
		}
}

/* ============================
   > ORDERNOW-BUTTON
   ================== */

.ordernow {
		display:inline-block;
		font-size:24px; line-height:100%;
		background-color: var(--frut_yellow);
		color:var(--frut_white); box-sizing:border-box;
		border-radius:999px; padding:20px 56px;
		text-decoration:none !important;
}
/* arrow-animation */
.ordernow {
		position:relative;
		overflow:hidden;
}
.ordernow span {
		transition:all 300ms ease-out;
		display:inline-block; position:relative;
		display:flex; align-items:center;
		will-change:transform;
}
.ordernow:hover span {
  	transform:translate3d(-1rem, 0, 0);
}
.ordernow span:after {
		position:absolute; content:'';
		background:url('images/ico-next.svg');
		background-size:contain; opacity:0;
		width:36px; height:18px; right:0rem;
		transition:all 300ms ease-out;
		will-change:right, opacity;
}
.ordernow:hover span:after {
		opacity:1; right:-2rem;
}

/* media-queries */
@media screen and (max-width: 720px) {
		.ordernow {
				padding:16px 56px 18px;
				font-size:22px;
		}
}
@media screen and (max-width: 480px) {
		.ordernow {
				font-size:20px;
		}
}

/* ============================
   > SECTION:HERO
   ================== */

#hero {
		padding:160px 0;
}
/* when-navbar-is-fixed */
.fixedheader {
		margin-top:110px;
}
#hero .inner {
		box-sizing:border-box;
		/*flex-wrap:wrap;*/
}
#hero .inner .col {
		flex:0 0 50%;
}
/* linke-spalte */
#hero .left {
		text-align:center;
}
#hero .left h2 span {
		color:var(--frut_yellow);
		display:block;
}
#hero .left h3 {
		margin:32px 0 52px;
}
/* linke-spalte */
#hero .right {
		display:flex;
		justify-content:flex-end;
}
#hero .right img {
		min-width:550px;
}
/* slide-in */
#hero .slidein {
		display:flex; flex:0 0 100%;
		justify-content:flex-end;
		display:none; /* ausgeblendet */
}
#hero .slidein .item {
		/*background:var(--frut_yellow);*/
		font-size:28px; line-height:100%;
		color:var(--frut_white); height:50px;
		padding:0 40px; display:flex;
		align-items:center;
}
/* vertical-slider */
.dynamic-text {
		position:absolute; height:50px;
		list-style:none; overflow:hidden;
		display:inline-block;
}
.item {
		position:relative; top:0;
		animation:move 5s infinite 3s;
}
.item:first-child { background-color:var(--frut_yellow); }
.item:nth-child(2) { background-color:var(--frut_purple); }
.item:nth-child(3) { background-color:var(--frut_green); }
.item:nth-child(4) {background-color:var(--frut_orange); }

@keyframes move {
  0% {
    top:0px;
  }
	10% { top:0px; }
  20% {
    top:-50px;
  }
	30% { top:-50px; }
  40% {
    top:-100px;
  }
	50% { top:-100px; }
  60% {
    top:-150px;
  }
	70% { top:-150px; }
  80% {
    top:-200px;
  }
}

/* media-queries */
@media screen and (max-width: 980px) {
		#hero .inner {
				flex-wrap:wrap;
		}
		#hero .inner .col {
				justify-content:center;
				flex:100%;
		}
		#hero .left h3 {
				margin:24px 0 42px;
		}
		#hero .right img {
				min-width:auto;
		}
}
@media screen and (max-width: 720px) {
		#hero .left h3 {
				margin:18px 0 28px;
		}
}
@media screen and (max-width: 480px) {
		.fixedheader {
				margin-top:0;
		}
}

/* ============================
   > SECTION:FLAVORS
   ================== */

#flavors h3, #benefits h3 {
		margin:22px 0 78px;
}
#flavors .applecarote {
		position:absolute; z-index:2; bottom:-80px;
		background-image:url('images/mela-carota.webp');
		background-repeat:no-repeat; height:400px;
		width:100%; background-position:center;
		background-size:contain;
}
/* splide-slider */
.splide__slide {
		display:flex; opacity:.5;
		justify-content:center;
}
.splide__slide a {
		text-decoration:none;
}
.splide__slide h4 {
		font-size:24px;
}
.splide__slide img {
		/*transition:max-height .4s ease;*/
		max-height:300px;
		margin:0 auto;
}
/* zoom-effekt */
.splide__slide {
		-webkit-transition:all 0.3s ease-out;
    transition:all 0.3s ease-out;
}
.splide__slide.is-visible.is-active {
		/*-webkit-transform:scale(1.4);
    transform:scale(1.4);*/
		opacity:1;
}
.splide__slide.is-active h4 {
		font-size:36px;
		opacity:1;
}

/* media-queries */
@media screen and (max-width: 1280px) {
		#flavors .applecarote {
				height:350px;
		}
}
@media screen and (max-width: 980px) {
		#flavors .applecarote {
				height:300px;
		}
}
@media screen and (max-width: 720px) {
		#flavors .applecarote {
				height:250px;
		}
		#flavors h3, #benefits h3 {
				margin:22px 0 48px;
		}
		.splide__slide h4 {
				font-size:22px;
		}
		.splide__slide.is-active h4 {
				font-size:32px;
		}
}
@media screen and (max-width: 480px) {
		#flavors .applecarote {
				height:200px;
		}
		#flavors h3, #benefits h3 {
				margin:22px 0;
		}
		.splide__slide h4 {
				font-size:20px;
		}
		.splide__slide.is-active h4 {
				font-size:28px;
		}
}
@media screen and (max-width: 380px) {
		#flavors .applecarote {
				height:180px;
		}
}

/* ============================
   > SECTION:BENEFITS
   ================== */

#benefits {
		background-image:url('images/happy-horse.webp');
		background-repeat:no-repeat; /*background-position:top right;*/
		background-position:105% top;
}
#benefits .desc {
		line-height:1.4rem;
		max-width:600px;
		text-align:left;
}
/* cards */
#benefits .cards {
		margin:180px 0 50px;
		grid-gap:40px;
}
#benefits .cards div {
		background:var(--frut_purple);
		min-height:180px; border-radius:16px;
		display:flex; align-items:center;
		justify-content:center; width:100%;
}
#benefits .cards span {
		display:flex; align-items:center;
		flex-direction:column; grid-gap:20px;
		justify-content:center; margin:0 10%;
		font-size:18px; line-height:1rem;
}
#benefits .cards span:after {
		display:block; content:'';
		background-repeat:no-repeat;
		background-size:contain;
		margin-top:6px;
}
#benefits .cards div:first-of-type span:after {
		background:url('images/ico-delivery.svg');
		width:92px; height:50px;
}
#benefits .cards div:nth-of-type(2) span:after {
		background:url('images/ico-delivery.svg');
		width:92px; height:50px;
}
#benefits .cards div:last-of-type span:after {
		background:url('images/ico-delivery.svg');
		width:92px; height:50px;
}
#benefits .ordernow {
		background-color: var(--frut_green);
}

/* media-queries */
@media screen and (max-width: 1280px) {
		#benefits {
				background-size:388px 500px;
				background-position:105% 20%;
		}
}
@media screen and (max-width: 980px) {
		#benefits .desc {
				max-width:450px;
				line-height:1.2rem;
				font-size:22px;
		}
		#benefits .cards {
				flex-wrap:wrap;
				grid-gap:30px;
		}
		#benefits .cards div {
				flex:1 0 44%;
				width:auto;
		}
}
@media screen and (max-width: 720px) {
		#benefits {
				background-size:349px 450px;
				background-position:110% 22%;
		}
		#benefits .cards {
				grid-gap:20px;
		}
}
@media screen and (max-width: 480px) {
		#benefits .cards div {
				flex:100%; min-height:0;
		}
		#benefits .cards span {
				padding:30px 0 ;
		}
}

/* ============================
   > WAVE-SEPARATOR
   ================== */

.wave {
		position:absolute; z-index:1;
		bottom:-1px; left:0; right:0;
}
#hero .wave svg {
		fill:var(--frut_green);
}
#flavors .wave svg {
		fill:var(--frut_orange);
}
#benefits .wave svg {
		fill:var(--frut_purple);
}

/* media-queries */

/* ============================
   > SECTION-PAGE.PHP
   ================== */

#page {}

/* media-queries */

/* ============================
   > SPLIDE-SLIDER
   ================== */

.splide {
		margin:0 auto;
}
.splide__pagination {
		display:none;
}
.splide__arrow {
		width:62px; height:34px;
		border-radius:0; opacity:1;
		background-color:transparent;
		background-repeat:no-repeat;
		background-size:contain;
}
.splide__arrow svg {
		display:none;
}
.splide__arrow--next { background-image:url('images/ico-next.svg'); right:-4em; }
.splide__arrow--prev { background-image:url('images/ico-prev.svg'); left:-4em; }

/* media-queries */
@media screen and (max-width: 1280px) {
		.splide__arrow--next { right:-2em; }
		.splide__arrow--prev { left:-2em; }
}
@media screen and (max-width: 980px) {
		.splide { max-width:none !important; }
		.splide__arrow--next { right:0; }
		.splide__arrow--prev { left:0; }
}

/* ============================
   > FOOTER
   ================== */

#footer {
		background-color:var(--frut_purple);
		padding:100px 0 150px;
}
#footer, #footer a {
		line-height:100%;
		text-decoration:none;
		font-size:15px;
}
#footer .inner {
		max-width:600px; grid-gap:0 80px;
		flex-wrap:wrap; margin:0 auto;
}
#footer .col {
		line-height:1.8rem;
}
#footer h5 {
		color:var(--frut_yellow);
		margin-bottom:6px;
}
#footer .left .logo {
		display:block; margin:8px 0 22px;
		width:184px; height:64px;
}
#footer .left .social {
		justify-content:center;
		grid-gap:22px;
}
#footer .social a {
		width:42px; height:42px;
		background-size:contain;
		text-decoration:none;
}
#footer .social .facebook { background:url('images/facebook.svg'); }
#footer .social .instagram { background:url('images/instagram.svg'); }
#footer .social .instagram { display:none; }

#footer .center a, #footer .right a {
		display:inline-block; position:relative;
		padding:14px 0; white-space:nowrap;
		text-decoration:none;
}
/* underline-animation */
#footer .center a:after,
#footer .right a:before {
		position:absolute; content:'';
		width:100%; height:1px; left:0;
		bottom:10px; transform:scaleX(0);
		background-color:var(--frut_yellow);
		transition:transform 0.3s ease-out;
		transform-origin:bottom right;
}
#footer .center a:hover:after,
#footer .right a:hover:before {
		transform-origin:bottom left;
		transform:scaleX(1);
}
/* useful-links */
#footer .block {
		display:flex; flex:0 0 100%;
		justify-content:center;
}
.useful {
		margin:80px 0 30px;
		flex-wrap:wrap;
}
.useful a {
		display:flex;
}
.useful a:after {
		content:'|'; display:block;
		padding:0 10px;
}
.useful a:hover {
		color:lightcoral;
}
.useful a:hover:after {
		color:var(--frut_white);
}
.useful a:last-of-type:after {
		display:none;
}
.copyright {
		line-height:1rem;
		text-align:center;
		margin-top:60px;
}

/* media-queries */
@media screen and (max-width: 980px) {
		#footer {
				padding:50px 0 100px;
		}
}
@media screen and (max-width: 680px) {
		#footer .inner {
				max-width:none; margin:0 40px;
				justify-content:center;
		}
		#footer .left {
				display:flex; align-items:center;
				flex-direction:column; flex:0 0 100%;
				margin-bottom:30px;
		}
		#footer .left .social {
				grid-gap:12px;
		}
		#footer .center,
		#footer .right {
				/*text-align:center;*/
		}
		.useful {
				margin:40px 0 20px;
		}
		.copyright {
				margin-top:30px;
		}
}
@media screen and (max-width: 480px) {
		#footer {
				padding:20px 0 40px;
		}
		#footer .inner {
				grid-gap:0 40px;
				margin:0 20px;
		}
		#footer .col {
				line-height:1.4rem;
		}
		#footer .left {
				margin-bottom:20px;
		}
		#footer .center a, #footer .right a {
				padding:7px 0;
		}
		.useful {
				grid-gap:10px 0;
		}
		.copyright {
				margin-top:20px;
		}
}

/* ============================
   > POPUP-FANCYBOX
   ================== */

.popup {
		display:none; width:100%;
		max-width:95%; padding:40px;
		border-radius:3px;
}
.popup a:focus {
    outline:none;
}

/* media-queries */

/* ============================
   > BACKTOP
   ================== */

.backtop {
		position:fixed; z-index:3; cursor:pointer;
		bottom:-100px; right:0; width:50px; height:50px;
		border-radius:0; background:var(--frut_yellow);
		display:flex; align-items:center;
		justify-content:center; opacity:0;
		transition:all .3s ease-in-out;
}
.backtop.active {
		bottom:0; opacity:1;
}
.backtop:after {
		border:solid var(--frut_white);
		display:inline-block; content:'';
		border-width:0 2px 2px 0; padding:5px;
		margin-top:5px; transform:rotate(-135deg);
		-webkit-transform:rotate(-135deg);
}