/* @override
	http://127.0.0.1/SitiPicov/ELF_Devel/Sites/www.gmtendaggi.it/_templates/gmtendaggi_template/css/layout_gmtendaggi.css
	http://127.0.0.1/Sites/www.gmtendaggi.it/_templates/gmtendaggi_template/css/layout_gmtendaggi.css 

/* @group base fonts families (site override) */
html,
.elf .elf-font-main,
.elf.elf-font-main {
	font-family1: 'Montserrat', sans-serif;
	font-family1: helvetica;
	font-weight1: 300;
	font-family1: 'Playfair Display', sans-serif;
	font-family1: 'Montserrat', sans-serif;
	font-family1: 'Montserrat Alternates', sans-serif;
	font-family1: arial;
	font-family1: 'Open Sans';
	font-family1: cobforta;
	font-family1: 'Maven Pro';
	font-family1: 'Nanum Gothic'; 
	font-family1: Quicksand;
	font-family1: Raleway; /* simile più compatto  */
	font-family1: 'Fira Sans'; /* non male forse il migliore con cirillico*/
	font-family1:  Spectral;
	font-family1:  "Spectral SC";
	
	font-family: Sanchez;
	font-style: italic;
	letter-spacing1: 1px;
	
	/* base text color */
	color: #fefefe;
}

.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: 500;
}

.elf .elf-font-labels,
.elf.elf-font-labels {
	font-family1: 'Playfair Display', sans-serif;
	font-family1: 'Montserrat', sans-serif;
	font-family1: 'Montserrat Alternates', sans-serif;
	font-family1: arial;
	font-family1: 'Open Sans';
	font-family1: cobforta;
	font-family1: 'Maven Pro';
	font-family1: 'Nanum Gothic'; /* non male */
	font-family1: Quicksand;
	font-family1: Raleway;
	font-family1: helvetica;

	font-family1: Roboto;
	font-weight1: 600;
	
	font-family1: 'Open Sans', sans-serif;
	font-family1: 'Open Sans Condensed', sans-serif;
	font-family1: Raleway; /* simile più compatto  */
	font-family1: 'Fira Sans';
	font-weight1: 100;
	font-family1:  "Spectral";
	font-family:  "Spectral SC";
}
/* @end */

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

.elf .elf-font-alt,
.elf.elf-font-alt {
	font-family: 'Montserrat Alternates', sans-serif;
}



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


html,body {
	background-color1: #453A36; /* light warm version*/
	background-color: #2F2722; /* dark warm version*/
}


/* 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 b  {
	color: #ffac76;
}

.elf .elf-text-color-accent,
.elf.elf-text-color-accent {
	color: #EE7203; 	/* GM accent color */
	color1: red;
}

.uk-tooltip {
	background: #EE7203; 	/* GM accent color */;
	background1: rgba(155, 130, 74, 0.90);
}

.uk-background-muted {
  background-color1: #f8f8f8; /* UI KIT*/ 
  background-color1: #e4e4e4; /* grafica originale*/ 
  background-color: #f0f0f0; /* media per evidenziare bordo basso campi form */ 
}

/* @group ELF Links override */
.elf a,
a.elf {
	text-decoration: none;
	color1: #EE7203;	/* GM accent color */
	color: #ff8a22;	/* GM accent color LINK */
}
.elf a:hover,
a:hover.elf {
	color:#fefefe;
	text-decoration: none;
}

/* styled text link */
.elf a.elf-link-text,
a.elf.elf-link-text {
  color-off: #EE7203;/* GM accent color */
  color: #ff8a22;	/* GM accent color LINK */
}
.elf a.elf-link-text::before,
a.elf.elf-link-text::before {
  border-bottom: 1px solid #fefefe;
}
.elf a.elf-link-text:hover,
a.elf.elf-link-text:hover,
.elf a.elf-link-text:focus,
a.elf.elf-link-text:focus {
  color: #fefefe;
  text-decoration: none;
}


.elf-form-message {
	background: none;
	border-color: #ccc;
}
.elf-form-error {
	background: none;
	border-color: #ccc;
}.elf-form-message h3 {
	color: orange !important;
}



/* styled button link override */
.elf form .elf-button-default,
form .elf.elf-button-default,
.elf a.elf-button-default,
a.elf.elf-button-default {
 	text-decoration: none;
 	background-color: #EE7203; /* GM accent color */
 	color: #fff; 
 	padding: 5px 12px;
 	border: 1px solid #EE7203;

	border-radius: 12px 24px;
	
}
.elf form .elf-button-default.elf-active,
form.elf.elf-button-default.elf-active,
.elf form .elf-button-default:hover,
form .elf.elf-button-default:hover,
.elf form .elf-button-default:focus,
form .elf.elf-link.button:focus,
.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 {
	color: #fff;
	text-decoration: none;
 	background-color: #453A36; /* GM accent color */ 	
}


/* styled primary button link override */
.elf a.elf-button-primary,
a.elf.elf-button-primary {
 	text-decoration: none;
 	color: #fff;
 	background-color: #EE7203;
 	background-color: #453A36;
 	background-color: #2F2722;
 	padding: 5px 12px;
 	border: 1px solid #2F2722; 
 	
	border-radius: 12px 24px;

}
.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: #EE7203;
  text-decoration: none;
  border: 1px solid #fff; 
}
.elf a.elf-button-primary:disabled,
a.elf.elf-button-primary:disabled {
  color: #999;
  text-decoration: none;
}

/* @end */


.elf ul.elf-list,
ul.elf.elf-list {
	color:  #eee;
}


/* Override colore uk-tab */
/* uk-tab active item */

.uk-tab::before {
	border-bottom: 0; /*1px solid #ccc;*/
	width1: 50%;
	margin1: 0 auto;
}

.uk-tab > li:not(:first-child) {
	padding-left1: 5px;
}
.uk-tab > .uk-active > a {
	color: #fff; 	/* GM accent color */
	background-color: #EE7203;
	border-bottom: 1px #333 solid;
	
	border-radius: 8px 16px;
	border-radius: 12px 24px;

}
/* uk-tab available item */
.uk-tab > li > a {
	color: #aaa;
	
	font-size:  130%; /* roberto ok */
}
.uk-tab > li > a:hover {
	color: #fff;
}

.elf-phone .uk-tab > li {
	padding: 3px;
}
.elf-phone .uk-tab > li > a {
	font-size:  90%;
}


/* Bordi su tendine menu a più colonne */

/* Sfondo tendina */
#main-nav-menu .uk-navbar-dropdown {
	background-color: #2F2722;
	background-color: rgba(47,39,34,0.9);
	padding: 0px;
	
	border-radius: 8px 16px;
	border-radius: 12px 24px;
	width: 35%;
	
}

/* Link barra principale e tendina */
#main-nav-menu .uk-navbar-nav li a {
	color: #fff;
	padding: 10px 16px;
}
#main-nav-menu .uk-navbar-nav li a:hover {
	background-color: #EE7203;
	
	border-radius: 8px 16px;
	border-radius: 12px 24px;
}

/* Elemento tendina */
#main-nav-menu .uk-navbar-dropdown li a {
	padding: 8px 24px;
	padding-top: 6px;
}

/* Testo nav headers non cliccabile */
#main-nav-menu .uk-navbar-nav li.uk-nav-header {
	padding: 0; /* margine extra su tendina menu */
	color: #EE7203;
}
/* Link nav headers cliccabile */
#main-nav-menu .uk-navbar-nav li.uk-nav-header a {
	color: #EE7203;
	padding: 10px 16px;
}
/* hover comune  elmenti menu */
#main-nav-menu .uk-navbar-nav li.uk-nav-header a:hover {
	color: #FFFFFF;
}



.uk-navbar-dropdown-grid > :not(.uk-first-column)::before {
	border: none;
}
.uk-navbar-dropdown-nav .uk-nav-header  {
	margin-top: 0;
}

.uk-navbar-dropdown-nav .uk-nav-header a {
	text-transform: uppercase !important;
	color1: #333;
}

.uk-offcanvas-bar ul {
	text-align: left;
	
}
.uk-offcanvas-bar .uk-nav-header {
		margin: 0px;
}
.uk-offcanvas-bar .uk-nav-header a {
	color: #EE7203 !important;
}


.uk-form-label {
	color: #fff;	
	font-size: 17px;
}
.uk-input,
.uk-textarea
{
	font-size: 18px;
	background-color: #685751;
	border-color: #2f2621;
	color: #fff;
}


.elf-navpath-flat {
	text-transform: lowercase;
}



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

#header-top-wrapper-fullwidth {
	width: 100%;
	background-color: #2F2722;
}
#header-top-wrapper {
	max-width: 1600px;
	width: 96%;

	margin-left: auto;
	margin-right: auto;
	background-color: #2F2722;
	background-color1: #453A36;
}

#header-top {
	padding-top: 10px;
	padding-bottom: 20px;
}
#header-top ul li {
	display: inline-block;
	margin-left: 8px;
	margin-right: 8px;
}
#header-top span,
#header-top ul li a {
	vertical-align: bottom;
}

#logo {
	max-height: 80px;
}

.uk-sticky-fixed.uk-active #header-menu #logo {
	height: 48px; /* set sticky menu height -> handled with #logo max-height */
}



#header-wrapper-fullwidth {
	background-color: rgba(47,39,34,0.75);
	width: 100%;
	/* se non uso uk.sticky */
	position: absolute;
	top1:0;
	z-index:981; /* sopra Google Maps che ha 980 */
		
}

@media (max-width: 960px) {
#header-wrapper-fullwidth {
	position: static;
}
}


.uk-offcanvas-bar {
	background-color: #261c16;
}


#header-wrapper-fullwidth.uk-sticky-fixed.uk-active {
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
	opacity: 0.95;
	
}
.elf-mobile #header-wrapper-fullwidth.uk-sticky-fixed.uk-active {
	opacity: 0.95;
}
.uk-sticky-placeholder {
}

#header-menu-wrapper {
	max-width: 1600px;
	width: 96%;

	margin-left: auto;
	margin-right: auto;
	background-color1: lime;
}


#header-menu .uk-navbar-nav > li > a {
	height: auto;
	margin-right: 10px;
	margin-left: 0;
	background-color1: red;
	text-transform: uppercase; /* main menu item */
	min-height: auto; /* override uikit value 80px*/

}
#header-menu li a {
	text-transform1: lowercase;  /* menu sub items */
}

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


.gm-shadow-mini {
	text-shadow1: 0 2px 2px rgba(0,0,0,0.7);
	background-color: rgba(47,39,34,0.75);
	border-radius: 12px 36px;
	border-radius: 24px 48px;
	padding: 6px 16px;	
}
img.gm-shadow-mini {
	filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.7));	
}


.gm-shadow-small {
	text-shadow: 0 2px 3px rgba(0,0,0,1);
}
img.gm-shadow-small {
	filter: drop-shadow(0px 2px 3px rgba(0,0,0,1));	
}


.gm-main-slideshow {
	background-color: #f0f0f0; /* Muted */ 
}
.gm-main-slideshow h2 {
	color: #fff;
	
	background-color: rgba(47,39,34,0.3);
	background-color1: rgba(238,114,3,0.75);

	padding: 20px;

	border-radius: 12px 36px;
	border-radius: 24px 48px;
}
.gm-main-slideshow p {
	color: #fff;
}
.gm-main-slideshow li {
	background-color1: #000;
	color: #fff;
}
.gm-main-slideshow img {
}
.gm-main-slideshow li:hover img {
	opacity1: 1;
}





#social-bar {
	position: absolute;
	right: 0px;
	bottom: -32px; /* rispetto all'HTML */
	z-index: 999;
	color:  #fff;
	border-radius: 16px 0  0 16px ;
	background-color: #EE7203; 	/* GM accent color */
	
	box-shadow: 0px 0px 2px #444;	
}
#social-bar a {
	text-align: right;
	display: block;
	width: 24px;
	padding: 8px;
}
#social-bar a:hover {
	color: #333;
}


#partners-wrapper-fullwidth {
	background-color: #EE7203; 	/* GM accent color */
	
}

#partners-wrapper {
	text-align: center;
	margin: 0 auto;
	margin-top: -1px; /* compensa il pixel bianco distanziatore che a volte compare*/
	padding: 5px;
}



.gm-category-slider-wrapper {
	width:  calc(100% - 90px); /* (40 freccia + 5 margine freccia) x 2 */
	max-width: 1480px;
	margin: 0 auto;

	overflow: hidden;

}

.gm-category-slider {
	overflow1: hidden;
}


.gm-category-slider li {
	background-color1: #000;
	overflow1: hidden;
}
.gm-category-slider li>img {
	background-color1: #000; /* non ha effetto, conta quello del container */
	opacity: 0.9;
	transition: all 0.1s ease-out;
	border-radius: 48px 96px 48px 96px;
}
.elf-desktop .gm-category-slider li:hover>img {
	opacity: 1;
	transition: all 0.3s ease-out;
	transform: scale(1.025);
}
.elf-mobile .gm-category-slider li>img {
	opacity: 0.8;
}







.gm-category-slider .explore-button {
	-webkit-font-smoothing: antialiased;
	width: 128px;
	height: 36px;
	position: absolute;
	right: 32px;
	bottom: 24px;
}
.elf-desktop .gm-category-slider .explore-button {
	bottom: -100px;
	transition: all 0.15s ease-in-out;
	opacity: 0;

	bottom1: 24px;
	opacity1: 1;

}
.elf-desktop .gm-category-slider  li:hover .explore-button {
	bottom: 24px;
	opacity: 1;
}

.gm-category-slider .explore-button a {
	text-decoration: none;
	text-align: center;
	display: block;
	width: 100%;
	height: 100%;
	line-height: 36px;
	border-radius: 0 999px;
	border1: 1px solid white;
	background-color: rgba(238, 114, 3, .85);
	color: #fff;

	border-radius: 8px 16px;
	border-radius: 12px 24px;


}
.elf-mobile .gm-category-slider .explore-button a {

}
.gm-category-slider .explore-button a:hover {
	text-decoration: none;
	background-color: rgba(238, 114, 3, 1);
}



.outdoor {	
	background-color: #282828;
	background-color: #2F2722;
	
}






#blog-wrapper {
	width:  calc(100% - 80px);
	max-width: 1480px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 40px
}

#blog {
}


.uk-card {
	border-radius: 24px 48px;
	overflow: hidden;
}

.uk-card.uk-card-secondary {
 	background-color: #2F2722;
}


#footer-wrapper-fullwidth {
	background-color: #2F2722;
}
#footer-wrapper {
	max-width: 1600px;
	width: 96%;
	
	margin-left: auto;
	margin-right: auto;
}
#footer {	
	padding: 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;
}




#header-image-container-wrapper {
	max-width1: 1600px;
	margin-left1: auto;
	margin-right1: auto;
	background-color1: red;
	background-color: #2F2722;
}
#header-image-container {
	background-color1: #000;
	width: 100%;
	margin: 0 auto;
	max-width: 1600px;
	width: 96%;

	border-radius: 24px 48px;
	border-radius1: 48px 96px;
	overflow: hidden;

}
#header-image-container img {
	opacity1: 0.9;
	-webkit-font-smoothing1: antialiased;
}
#header-image-container:hover img {
	opacity1: 1;
}
#header-image-container h1, /* altrimenti nella pagina non esiste questo tag */
#header-image-container h2,
#header-image-container p {
	color: #fff;
	max-width1: 95%;
	margin: 0 auto;
	border-radius1: 999px;
	padding: 8px;
}
#header-image-container h2 {
	color: #fff;
	
	background-color: rgba(47,39,34,0.5);
	background-color: rgba(238,114,3,0.85);

	padding: 16px;

	border-radius: 12px 36px;
	border-radius: 24px 48px;
}
#header-image-container p {
	background-color1: rgba(0,0,0,0.3);
	background-color1: rgba(155, 130, 74, 0.5);
	border-radius1: 99px;
	padding-bottom: 20px;
}


.path-container-wrapper-fullwidth {
	background-color: #2F2722;	
}
.path-container-wrapper {
	max-width: 1576px; /* 1424px= 1440 - 16 vscrollbar oppure 1584px; */
	width: 96%;
	
	margin-left: auto;
	margin-right: auto;
}
.path-container {
	padding: 16px 16px ;
}





.body-content-container-wrapper-fullwidth {
	background-color: #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 */
	background-color: #453A36;
	border-radius: 48px 96px;

}
.elf-phone .body-content-container {
	padding: 12px;
	border-radius: 32px 64px;
}


.body-content-container h1 {
	color: #EE7203;
}
.body-content-container h2 {
	color: #EE7203;
}
.body-content-container h3 {
	color: #EE7203;
}
.body-content-container h4 {
	color: #EE7203;
	margin-bottom: 6px;
}
.body-content-container h5 {
	color: #EE7203;
}
.body-content-container h6 {
	color: #EE7203;
}
.body-content-container p {
	color: #fff;
	margin-bottom: 12px;
}

.body-content {
	margin-top: 94px;
}



.section-title {
	text-align: center;
	position: relative;
	top: 80px;
	margin-top: -76px;
}
.section-title h1 {
	display: inline-block;
	color: #fff;
	
	padding: 18px;
	margin-bottom: 8px;

	background-color: rgba(47,39,34,0.5);
	background-color: rgba(238,114,3,1);
	
	border-radius: 12px 36px;
	border-radius: 24px 48px;
	
	max-width: 70%;
}
.section-title p {
	display: inline-block;
	text-align: center;
	
}

.elf-phone .section-title h1 {
	font-size: 170%;
}


/* 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";
}

}