@charset "UTF-8";
/* CSS Document */

/*REGOLE GENERICHE*/

body,td,th {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 11pt;
	font-weight:400;
	color: #3A2821;
	-webkit-font-smoothing: antialiased;
}
body {
	background-color: #FFF;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	font-family: Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}
a:link {
	color: #352C28;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #352C28;
}
a:hover {
	text-decoration: none;
	color: #352C28;
}
a:active {
	text-decoration: none;
	color: #352C28;
}

/*REGOLE TESTO-DIV*/

#clickable {
	display:block;
	width:100%;
	height:100%;
}

/*STRUTTURA PAGINE*/

#header {
	position:relative;
	width: 100%;
	height:140px;
   
	top:0px;
	left:0px;
    background:#20B2AB; 
}

#header2 {

top: 0;
	    width: 100%;
	    height: auto;
	   
    background:#20B2AB; 
}

#header_content {
	position:relative;
	width:960px;
	height:140px;
	margin-left:auto;
	margin-right:auto;
    background:#20B2AB; 
}

#logo {
	float:left;
	width:150px;
	height:140px;
	z-index:1003;
	background:url(../img/_generic/logoFOB2international.jpg);
}

#menu {
	float:left;
	width:350px;
	height:15px;
	margin-left:400px;
	margin-top:101px;
	font-size:9.5pt;
}

#menu a {
	color:#FFF;
}

.menu_item {
	float:left;
    position:relative;
	padding-left:8px;
	padding-right:8px;
	border-right:#94867E 1px solid;
}

.menu_item_last {
	float:left;
	padding-left:10px;
	padding-right:10px;
}

#menu_selected a {
	color:#94867E;
}

#lang {
	position:absolute;
	width:300px;
	height:20px;
	top:20px;
	right:0px;
	text-align:right;
	font-size:10pt;
	color:#94867E;
}

#lang a {
	color:#FFF;
}

#img_container {
	position:relative;
	clear:both;
	width:960px;
	height:400px;
	margin-top:10px;
	margin-left:auto;
	margin-right:auto;
}

#footer-container {
   width: 100%; /* Imposta la larghezza del contenitore del footer al 100% della larghezza della pagina */
   
   margin: 0 auto; /* Centra il contenitore del footer orizzontalmente */
}

#footer { 
	    bottom: 0;
	    width: auto;
	    height: auto;
	    padding: 20px;
	    font-size: 14pt;
	    background: #20B2AB;
	    text-align: center;
	    color: #FFF;
	    z-index: 1;
	}
	
	.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }

#slides {
	display:none;
}

#img_shadow {
	position:relative;
	clear:both;
	width:960px;
	height:40px;
	margin:0 auto;
	background:url(../img/_generic/img_shadow.jpg) no-repeat;
}

#thumbs_container {
	position:relative;
	clear:both;
	width:960px;
	height:150px;
	margin:0 auto;
}

.thumb {
	float:left;
	width:300px;
	height:150px;
	margin-right:30px;
	background:url(../img/_generic/thumb_shadow.jpg) no-repeat bottom;
}

#main_text_box {
	position:relative;
	clear:both;
	width:960px;
	height:auto;
	margin-top:5px;
	margin-bottom:20px;
	margin-left:auto;
	margin-right:auto;
	text-align:justify;
	line-height:20px;
	font-size:11pt;
	-webkit-font-smoothing: antialiased;
}

/* colonne della stessa altezza */

#contenitore
{display:table; width:100%; height:100%;
min-width:100%; min-height:100%;
} 

#colrow
{display:table-row; height:100%;
} 

#colsx
{display:table-cell; float:left; width:50%; height:100%;
}

#coldx
{display:table-cell; float:right; width:50%; height:100%;
}


/*STILI PERSONALIZZATI SU CONTENUTO SINGOLO*/

#button_products {
	position:absolute;
	width:285px;
	height:55px;
	bottom:30px;
	left:-15px;
	background:url(../img/_generic/button_products.png) no-repeat;
	padding-left:30px;
	padding-top:10px;
	font-size:18pt;
	color:#FFF
}

#button_products a {
	color:#FFF;
}

.contatti_titolo {
	font-size:18pt;
}

.contatti_linea {
	clear:both;
	width:100%;
	height:1px;
	border-bottom:1px dotted #999;
	margin-bottom:10px;
}

/* Stile per le immagini che scorrono in alto */
.rslides img {
	            width: 100%;
	            height: auto;
	        }

.carousel-item {
	            /* Imposta le dimensioni del contenitore */
	            width: 150px; /* Adatta questa dimensione alle tue esigenze */
	            height: 400px; /* Adatta questa dimensione alle tue esigenze */
	            overflow: hidden; /* Nasconde parti dell'immagine che potrebbero eccedere il contenitore */
	            margin: 10px; /* Aggiunto margine tra gli elementi */
	        }

.carousel-item .carousel-image {
	            /* Imposta le dimensioni dell'immagine */
	            width: 100%; /* Larghezza al 100% del contenitore */
	            height: 100%; /* Altezza al 100% del contenitore */
	            object-fit: cover; /* Scala l'immagine per coprire il contenitore senza distorsione */
	        }
	
/* Stile per i cerchi */
.circle-container {
	           display: flex;
	           justify-content: center;
	           align-items: center;
	           flex-wrap: wrap;
	           margin-top: 20px; /* Opzionale: aggiunge un margine superiore */
	           width: 100%;
	           height: auto; /* Imposta l'altezza al 100% della viewport */
	}
	
.circle {
	            border: 3px solid transparent;
	            border-radius: 50%;
	            width: 468px; /* Ampiezza specifica */
	            height: 468px; /* Altezza specifica */
	            background-color: rgba(70, 70, 70, 0.3);
	            color: #fff;
	            text-align: center;
	            font-size: 16px;
	            cursor: pointer;
	            margin: 10px;
	            transition: border-color 0.3s ease;
	            overflow: hidden;
	            position: relative;
	            display: flex;
	            justify-content: center;
	            align-items: center;
	        }
	
.circle:hover {
	            border-color: #00FFFF;
	        }
	
.circle-img {
	            width: 100%;
	            height: 100%;
	            object-fit: cover; /* Imposta l'immagine per coprire l'intero contenitore senza distorsioni */
	            position: absolute;
	            top: 0;
	            left: 0;
	        }
	
.circle-text {
	            position: absolute;
	            bottom: 10px;
	            width: 100%;
	            text-align: center;
	            color: white;
	            font-size: 14px;
	            opacity: 1; /* Testo sempre visibile */
	        }

#main_text_box {
	            text-align: center; /* Allinea il testo al centro */
	            margin-top: 20px; /* Aggiunto margine superiore */
	              text-align: justify; /* Rimuove la giustificazione */
	        }
	

.whatsapp-icon {
	            position: fixed;
	            bottom: 30px;
	            right: 30px;
	        }
	
.whatsapp-icon img {
	            border-radius: 50%; /* Rende l'immagine tonda */
	            width: 120px; /* Dimensioni desiderate */
	            height: 120px; /* Dimensioni desiderate */
	        }
	
.language-container {
	            position: fixed;
	            top: 20px;
	            right: 20px;
	            display: flex;
	            flex-direction: row; /* Allineamento orizzontale */
	            align-items: flex-end;
	        }
	
.language-icon {
	            margin-right: 10px; /* Aggiungiamo del margine tra le bandierine */
	        }
	
.language-icon img {
	            width: 30px; /* Riduci la larghezza */
	            height: auto; /* Imposta l'altezza automatica per mantenere le proporzioni */
	            border-radius: 0; /* Rimuovi il bordo circolare */
	        }	        

.language-menu {
    position: absolute;
    top: 100%; /* Posiziona il menu al di sotto delle bandierine */
    right: 0;
    background-color: #20B2AB;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: flex; /* Utilizza Flexbox per l'allineamento orizzontale */
    flex-direction: column; /* Allinea gli elementi in una riga */
    align-items: center; /* Allinea gli elementi verticalmente al centro */
}

.menu-line {
    width: 30px; /* Larghezza delle lineette */
    height: 2px; /* Spessore delle lineette */
    background-color: #333; /* Colore delle lineette */
      margin-bottom: 8px; /* Aggiungi margine inferiore per separare le lineette */
}