/* @override 
	http://127.0.0.1/Sites/www.fattoriadivibio.com/_templates/fattoriadivibio_template/css/layout_fattoriadivibio.css */


/* @group base fonts families (site override) */
html,
.elf .elf-font-main,
.elf.elf-font-main {
	font-family: 'Thasadith', sans-serif;
	font-weight: 400;
	letter-spacing: 1px;
	color: #777;
}

.elf-font-main .uk-light,
.uk-light .elf-font-main,
.uk-light.elf-font-main {
	color:#fff;
}

.elf .elf-font-main .elf-text-bold,
.elf .elf-font-main.elf-text-bold,
.elf.elf.elf-font-main.elf-text-bold,
.elf .elf-font-main b,
.elf .elf-font-main strong,
.elf.elf-font-main b,
.elf.elf-font-main strong,
b.elf.elf-font-main,
strong.elf.elf-font-main {
	font-weight: 700;
	
}

.elf .elf-font-labels,
.elf.elf-font-labels {
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 200;
	letter-spacing: 3px;
	color: #555;
}

.elf-font-labels .uk-light,
.uk-light .elf-font-labels,
.uk-light.elf-font-labels {
	color:#fff;
}

.elf .elf-font-labels .elf-text-bold,
.elf .elf-font-labels.elf-text-bold,
.elf.elf-font-labels.elf-text-bold,
.elf .elf-font-labels b,
.elf .elf-font-labels strong,
.elf.elf-font-labels b,
.elf.elf-font-labels strong,
b.elf.elf-font-labels,
strong.elf.elf-font-labels {
	font-weight: 400;
}

.elf .elf-font-alt,
.elf.elf-font-alt {
}

/* @end */



/* Evita lo scroll durante l'uikit modal TO DO */
body_OFF {
	overflow: hidden;
	position:fixed;
}


html,body {
}


/* Responsive text size FIX */
/* Uso gli stessi bearkpoint scelti per UIKit */
/*
- ingrandisco il testo base sul telefono e sugli schermi molto grandi
- rimpiccolisco i testi negli header (slideshow ed immagini statiche di intestazione) 

	TODO 
*/

/* ELF CSS OVERRIDE */

.elf a,
a.elf {
  color: #1cabba;
}
.elf a:hover,
a:hover.elf {
	color:#666;
	text-decoration: underline;
}



.elf a.elf-link-text,
a.elf.elf-link-text {
  color: #1cabba;
}

.elf a.elf-button-default,
.elf a.elf-button-primary,
.elf a.elf-button-secondary,
.uk-button,
input[type="submit"]
{
	display: inline-block;
	padding: 12px 48px;
	letter-spacing: 2px;
	font-weight: bold;
	font-size: 12px;
}
.elf a.elf-button-default {
	border: 1px solid #ccc;
	background-color: transparent;
	border-color:  #eee;
	color: #fff;
}
.elf a.elf-button-default.elf-active,
a.elf.elf-button-default.elf-active,
.elf a.elf-button-default:hover,
a.elf.elf-button-default:hover,
.elf a.elf-button-default:focus,
a.elf.elf-link.button:focus {
  background-color: #ccc;
  color: #000;
  opacity: 0.7;
}

.elf a.elf-button-primary {
	background-color: #3dcad8;
	border-color:  #3dcad8;
	opacity: 0.85;
	color: #000;
}
.elf a.elf-button-primary.elf-active,
a.elf.elf-button-primary.elf-active,
.elf a.elf-button-primary:hover,
a.elf.elf-button-primary:hover,
.elf a.elf-button-primary:focus,
a.elf.elf-link.button-primary:focus {
  background-color: #1cabba;
  color: #fff;
}


.elf a.elf-button-secondary {
	background-color: #ddd;
	border-color:  #ccc;
	opacity: 0.85;
	color: #000;
}
.elf a.elf-button-secondary.elf-active,
a.elf.elf-button-secondary.elf-active,
.elf a.elf-button-secondary:hover,
a.elf.elf-button-secondary:hover,
.elf a.elf-button-secondary:focus,
a.elf.elf-link.button-secondary:focus {
  background-color: #aaa;
  color: #fff;
}


/* Fix padding che lasciava posto all'icona*/
input[type=text].uk-input.uk-form-small, input[type=text].uk-input.uk-form-large {
	padding: 0 10px !important;
}

#wrapper {
	margin1: 0 auto;
	background-color: #fff;
	max-width1: 1600px;
	box-shadow1: 0px 0px 5px #444;
}
#main {
	border1: 1px solid #333;
}


/* Evito le voci su due righe */
div.uk-navbar-dropdown {
	width: auto;
}

.uk-navbar-nav .language-switcher {
	display: flex;
	align-items: center;
	padding: 0;
	min-height:  80px;	
	color: #fff;
}

.uk-offcanvas-bar .language-switcher {
	margin: 0 auto;
}

.language-switcher a {
	color: #fff;
	margin: 8px	
}

.language-switcher a.current-language {
	border-color: #fff;
}


#header-top-wrapper-fullwidth {
	width1: 100%;
}
#header-top-wrapper {
	max-width1: 1600px;
	width1: 96%;

	margin-left1: auto;
	margin-right1: auto;
}
#header-top {
	padding-top1: 10px;
	padding-bottom1: 20px;
}


#header-wrapper-fullwidth {
	width: 100%;
	background-color1: red;
}
#header-wrapper {
	max-width1: 1600px;
	margin1: 0 auto;
	background-color1: lime;
}
#header {
	max-width1: 1200px;
	margin1: 0 auto;
	background-color1: purple;
}



#header-menu ul.uk-navbar-nav  {
}

#header-menu .uk-navbar-nav > li {
	padding: 0 1.75vw;
}
#header-menu .uk-navbar-nav > li a {
	padding: 6px 0;
}


#header-menu .uk-navbar-nav > li > a {
	color: #fff;
}

#header-menu .uk-navbar-nav li div {
	margin-top: -16px;
	background-color: rgba(255,255,255,0.8);
}
#header-menu .uk-navbar-nav li div a {
	color: #333;
	font-weight: bold;
}


.language-switcher .current-language {
	border-bottom: 1px solid orange;
}






.icon-scroll {
	display: inline-block;
    width: 23px;
    height: 38px;
    top: 50%;
    box-shadow: inset 0 0 0 2px #fff;
    border-radius:16px;
	position: relative;
	display: none;

}
.icon-scroll:before {
    position: absolute;
    content: '';
    width: 5px;
    height: 5px;
    background: #fff;
    margin-left: -3px;
    top: 6px;
    border-radius: 5px;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: scroll;
    animation-name:scroll
}

@-webkit-keyframes
scroll {
    0% {
        opacity:1
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(18px);
        transform: translateY(18px)
    }
}

@keyframes
scroll {
    0% {
        opacity:1
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(18px);
        transform: translateY(18px)
    }
}




/* @group elf-navpath-flat */
.elf-navpath-flat {
	text-align: center;
	font-size: 120%;
}
.elf-navpath-flat .navtitle a {
	display: inline;
	color: #999;
	text-decoration: none;
}
.elf-navpath-flat ul {
	display: inline;
}
.elf-navpath-flat li {
	display: inline;
}

.elf-navpath-flat li a {
	text-decoration: none;
}
.elf-navpath-flat li a:hover,
.elf-navpath-flat .navtitle a:hover {
	text-decoration: underline;
}
.elf-navpath-flat li.currentitem a {
	text-decoration: none;
	color: #7d8970;
}
.elf-navpath-flat li:not(:first-child):before {
	font-size: 100%;
	content: " » ";
}
/* @end */


/* @group elf-navlist */
.elf-navlist {
	width: 100%;
}
.elf-navlist .currentitem a {
	text-decoration1: underline;
	font-weight: bold;
	text-transform: uppercase;
}

.elf-navlist .navtitle {
	display: block;
	padding: 4px;
	border-bottom: 1px #ccc solid;
	margin-bottom: 10px;
}
.elf-navlist .navtitle a {
	font-size: 120%;
	/*color1:  #c00;*/
	text-decoration: none;
	color: #333;
}
.elf-navlist ul {
	width: 100%;
	margin: 0;
	text-align: left;
	padding-left: 36px;
	list-style: outside;
	color: #aaa;
}
.elf-navlist ul li {
	font-size: 110%;
	padding: 0;
	background-image: none;
	padding: 4px 0px;
}
.elf-navlist ul li ul {
	padding-left: 24px;
	list-style: outside;
	color: #ccc;
	font-size: 90%;
}
.elf-navlist ul li ul li {
	font-size: 90%;
}

/* @end */


#footer-wrapper-fullwidth {
	background-color1: #2F2722;
}
#footer-wrapper {
	max-width1: 1600px;
	width1: 96%;
	
	margin-left1: auto;
	margin-right1: auto;
}
#footer {	
	padding1: 40px 20px;
	color1: #fff;
}
#footer a {
	color1: #fff;
}


#credits {
	/* display: none; Da riattivare al deploy*/
	float:right;
	width: 260px;
	width: 90px;
	margin-top: 36px;
	margin-top: 16px;
	padding-right: 0px;
}
#credits img {
	padding-bottom: 5px;
}



.body-content-container-wrapper-fullwidth {
	background-color1: #2F2722;	
}
.body-content-container-wrapper {
	max-width: 1600px; /* 1424px= 1440 - 16 vscrollbar oppure 1584px; */
	width: 96%;
	margin-left: auto;
	margin-right: auto;	
}
.body-content-container {
	padding: 24px; /* spazio di default -> con il margin laterale negativo e pari al padding posso eliminarlo in modo che i contenuti arrivino al bordo */

}
.body-content {
}









/* Mobile device styles */
/*
Device logical resolution:
- iPhone <= 4S = 320x480
- iPhone 5, 5S, 6 (display zoom) = 320x568
- iPhone 6 Display Zoom = 375x667
- iPhone 6, 6 Plus (display zoom) = 375x667
- iPhone 6 Plus = 414x736
- iPad (all) = 768x1024
*/

/* 
NB: se imposto la viewport ad un valore fisso allora le queries scattano sempre a quel valore indipendentemente dal device perché con la viewport forzo la dimensione della finestra che imposta il browser (che è diversa dalla device-width) -> per far funzionare le queries successive devo impostare nell'HTML la viewport alla larghezza del device mettenno nell'head 
<meta name="viewport" content="width=device-width, initial-scale=1" />
altrimenti il dispositivo scala la pagina per riempire la propria viewport di default che è 980px
*/

/* Punto chiave per media queries -> devo sfruttare il cascading altrimenti in ogni range devo ripetere tutti gli stili -> al limite alla fine (così sovrascrive) faccio qualcosa selettivo usando il range */
/* SOLUZIONE:*/
/* Desktop down design -> uso max-width in modo che le impostazioni vanno a cascata scendendo di dimensione */
/* Mobile up design -> uso min-width in modo che le impostazioni vanno a cascata salendo di dimensione */
/* NB: max-width significa if (viewport-with<=max-width)

/* Desktop, Tablet landscape */
/* iPad 2/Air/Retina Landscape */
#winsize {
	text-align: center;
	display: block;
	position: fixed;
	bottom: 0;
	width: 100%;
	background-color: yellow;
	opacity: 1;
	z-index:9999;
	display: none;	
}
#winsize::before {
	content: "Desktop - Large tablet | > 1920px";
	color: #000;
}

#main {
}


#breakpoint-range {
	display: none;
}

@media (max-width: 1920px) {
	#winsize {
		background-color: #f59e00;	
	}
	#winsize::before {
		content: "Desktop - Large tablet | max 1920px";
	}
}
@media (max-width: 1600px) {
	#winsize {
		background-color: #84d5ff;	
	}
	#winsize::before {
	
		content: "Desktop - Large tablet | max 1600px";
	}
}
@media (max-width: 1440px) {
	#winsize {
		background-color: #e39aff;	
	}
	#winsize::before {
		content: "Desktop - Large tablet | max 1440px";
	}
}
@media (max-width: 1200px) {
	#winsize {
		background-color: #9ff7a0;	
	}
	#winsize::before {
		content: "Desktop - Large tablet | max 1200px";
	}
}



/* small desktop ipad landscape (1024x768) */
/* iPad Pro 10.5" landscape (1112x834) */
/* iPad Pro 12.9" portrait (1024x1336)  */

@media (max-width: 1024px) {
	
	#winsize {
		background-color: #f996b0;	
	}
	#winsize::before {
		content: "Desktop - tablet landscape (iPad 2 3 mini Air) | max 1024px";
	}
	}
	
	/* Tablet portrait (and below if not overwritten) */
	/* iPad, iPad2, iPad3, iPad Mini, iPad Air portrait (768x1024) */
	 
	@media (max-width: 768px) {
	
	#winsize {
		background-color: lightblue;	
	}
	#winsize::before {
		content: "Tablet portrait (iPad 2 3 mini Air) | max 768px";
	}
	
	
	#main {
	}

	
}

/* Da qui in giù devo prendere tutti i telefoni perchè anche se la larghezza in pixel è poco diversa dal tablet, le dimensioni del dispositivo sono significativamente inferiori -> non devono ricadere nel caso precedente */
/* iPhone 5, 5S, SE, 6 (display zoom) = 320x568 /* 
/* iPhone 6, 6 Plus (display zoom) = 375x667 */
/* iPhone 6S (no display-zoom) = 414x736

/* -> il phone landscape più largo = 736 -> uso questo altrimenti il 6S landscape rientrerebbe sopra */

/* iPhone 5/5S/6/6S Landscape */
@media (max-width: 736px) {

	#winsize {
		background-color: lightcoral;	
	}
	#winsize::before {
		content: "Phones landscape: 5 5S SE 6 6+ 6S 6S+ 7+ 8+ | max 736px";
	}
	
	
	#main {
	}
	
}

/* iPhone 4S landscape (and below if not overwritten) */
/* iPhone 6/6S portrait */
@media (max-width: 480px) {

	#winsize {
		background-color: lightslategrey;	
	}
	#winsize::before {
		content: "Phones all portrait + 4s landscape | max 480px";
	}
	
	
	#main {
	}
	
	
	
	}
	
	/* iPhone 4S,5,5S,SE portrait */
	@media (max-width: 320px) {
	
	#winsize {
		background-color: lawngreen;	
	}
	#winsize::before {
		content: "Phones: 4S 5 5S SE portrait | max 320px";
	}

}