/* =============================================================================
   Site Styles
   ========================================================================== */

body {

	#header {
		
		background-color: #FFFFFF;
		
		
		#logo {
			
			margin: 1.150em 0 0.950em 0;
			
		} // Logo
		
		p {
			
			font-size: 1.300em;
			color: #4E748B;
			text-transform: uppercase;
			margin-top: 2.5em;
			margin-bottom: 0;
			
		} // p
		
		a {
			
			color: #4E748B;
			
		}
		
		#cabinetbuttoncontainer {
			
			#cabinetbutton {
				
				background-color: #2A5067;
				
			}
		
		}
		
 	} // header
	
	#menu {
		
		background-color: #2A5067;
		overflow: visible;
		height: 2.2em;
		z-index: 10;
		border-bottom: 5px solid #E30613;
		
		.container {
			
			overflow: visible;
			
		}
		
		ul {

			margin: 0;
			padding: 0;
			text-align: center;
			list-style-type: none;

			li { // barra blu menu
				
				display: inline;
				float: left;
				position: relative;
				margin: 0;
				padding: 0;
				height: 2.45em;
				width: 6.100em;
			
				a,span {
					
					width: 100%;
					display: block;
					color: #FFF;
					font-size: 0.900em;
					vertical-align: 10%;
					line-height: 2.35em;
					border-bottom: 0.4em solid transparent;
					text-decoration: none;
					text-transform: uppercase;
					cursor: pointer;
					
						&:hover {
							
							border-bottom: 0.4em solid #F2F2F2;
							
						}
						
						&.hovered {
							
							color: #3B4767;
							background-color: #F2F2F2;
							font-weight: 700;
							border-bottom: 0.4em solid #F2F2F2;
						}
						
						ul {
							
							li {
							
								span {
									
									&.hovered {
										
										background: transparent;
										
									}
									
								}	
								
							}
							
						}
					
				} // a,span
				
			}
			
			&.menu {
				
				ul { // submenu a tendina
					
					display: none;
					margin: 0;
					padding: 1.125em 0;
					position: absolute;
					background: #E0E4F0;
					background: linear-gradient(180deg, #E0E4F0 0%, #CACFDE 100%);
					left: 0;
					top: 2.45em;
					border-bottom: 0.2em solid #21283C;
					-webkit-transition: all 0.5s ease-in-out;
					-moz-transition: all 0.5s ease-in-out;
					-ms-transition: all 0.5s ease-in-out;
					-o-transition: all 0.5s ease-in-out;
					transition: all 0.5s ease-in-out;
					z-index: 10;

					li {
						
						width: 15em;

						a,span {
							
							padding: 0 1.650em;
							font-size: 0.900em;
							font-weight: 400;
							text-align: left;
							width: auto;
							color: #384567;
							line-height: 2.350em;
							text-transform: none;
							border-bottom:0;
							
							&:hover {
								
								background-color: #EDEFF7;
								border-bottom:0;
								
							} // a:hover
							
							&.selected {
							
								color: #3B4767;
								background-color: #F2F2F2;
								font-weight: 700;
								border-bottom: 0.4em solid #F2F2F2;
	
							} //.selected

						} // a
												
						
					} // li
										
				} // ul 

			} // .menu 
			
			&#wemake, &.tabs {
				
				li {
					
	
					ul#wemake_tabs {

						left: -6.100em;
						top: 0;
						width: 54em;
						overflow: visible;
						margin: 0;
						padding: 0;
						position: relative;
						//background: linear-gradient(#E0E4F0 0%, #DFE3EF 100%);
						//height: 22.45em;
						//border-bottom: 0.2em solid #3B4767;
						z-index: 2;

						li { //categories

							width: 18em;
							margin-bottom: 0;
							margin-top: 0;
							background: #E0E4F0;
							display: flex;
							align-items: stretch;
							
							&:first-element,&.hovered {
								
								background: #DFE3EF;
									
							}
								
							a,span {
								height: 2.722em;
								line-height: 2.722em;
								margin-bottom: 0;
								margin-top: 0;
								width: auto;
								text-align: center;
								background: linear-gradient(#A8B1CE 0%, #8894B4 100%);
								text-transform: uppercase;
								border: 0;
								color: #FFF;
								flex-grow: 1;

								&:hover,&.hovered {
									
									background: linear-gradient(#c9cee0 0%, #E0E4F0 100%);
									color: #3B4767;
									
									&.ats {
										
										background: linear-gradient(#3E4967 100%, #27304a 0%);
										color: #FFF;
										
									}
								}

							}

							ul.products { // category list
								
								left: 0;
								background: #E0E4F0;
								border: 0;
								position: absolute;
								text-align: left;
								padding: 0;
								display: block;
								height: 20em;
								border-bottom: 0.2em solid #3B4767;
								
								li {
									
									display: block;
									height: 2.50em;
									position: static;
									
									span {
														
										background: transparent;
										font-size: 0.9em;
										text-transform: none;
										background: transparent;
										text-align: left;
										color: #3B4767;
										text-transform: none;

										&:hover {
											
											text-decoration: underline;
											font-weight: 700;
										
										}
										&.hovered {
											
											background-color: #BAC2D9;
											
										}
										
										
									}
									
									ul { //products list
										
										position: absolute;
										top: 0;
										width: 36em;
										left: 18em;
										height: 100%;
										background: #EDEFF7;
										margin: 0;
										padding: 0;
										border: 0;
										height: 20em;
										display: block;
										border-bottom: 0.2em solid #3B4767;

										li {
											
											padding: 0 1.650em;    
											font-size: 0.900em;
											font-weight: 400;
											width: 18em;
											line-height: 2.7em;
											height: 2.7em;
											border-bottom:0;
											clear: left;
											background: #EDEFF7;
											text-align: left;
											color: #3B4767;
											text-transform: none;

											&.selected {
												
												background-color: #BAC2D9;
												
											}

											a {
												
												background: transparent;
												
												&:hover {
													
													background: transparent;
													
												}
												
											}

											span {
												
												font-size: 1em;
												text-transform: none;
												background: transparent;
												text-align: left;
												color: #3B4767;
												text-transform: none;
												border-bottom: 0;
												padding: 0;
												
												
												&.photo {

													text-align: center;
													background-color: #BAC2D9;
													background: url('../images/Waves.png'), linear-gradient(#BAC2D9 10%, #ADB3D4 100%);
													display: flex;
													position: absolute;
													width: 19em;
													top: 0;
													right: 0;
													height: 100%;
													align-items: center;
													display: inline-block;
													
													img {
														
														margin-top: 2em;
														width: auto;
														height: auto;
														max-width: 15em;
														max-height: 15em;														
													}
													
													a {
														
														margin: 1em auto;
														font-weight: 700;
														font-size: 1.2em;
														height: 2em;
														line-height: 2em;
														color: #FFFFFF;
														text-transform: uppercase;
														background: #9BA8CC;
														display: inline-block;
														
														&:hover {
															
															color: #9BA8CC;
															background: #FFF;
															
														}
														
													}
													
													&.hidden {
														
														display: none;

													}

												}
												
											}											
											
										}
										
										
									}
									
									
								}
								
							} //ul.products - category list
							
							#ats_tab {
								
								left: -18em;
								top: 2.47em;
								height: 100%;
								display: inline-table;
								border: 0;
								position: absolute;
								text-align: left;
								padding: 0;
								width: 54em;
								background: linear-gradient(#3E4967 0%, #21283C 100%);
								
								h2 {
									
									color: #FFFFFF;
									font-size: 1.95em;
									line-height: 1em;
									font-weight: 300;
									text-transform: uppercase;

									&::first-line {
										
										font-weight: 700;
										color: #9DA9CD;
										
									}
									
								}
								p {
									
									color: #FFF;
									
								}
								
								div {
									
									display: inline-block;
									vertical-align: top;

									&.text {
										
										width: 28em;
										margin: 3em 2em;
										
										a {
											
											text-transform: uppercase;
											text-decoration: none;
											padding: 0 1.7em;
											display: inline-block;
											border-radius: 0.4em;
											background-color: #FFFFFF;
											font-size: 1em;
											height: 2em;
											line-height: 2em;
											font-weight: 400;
											color: #21283C;
											background: #FFF;

										}
										
									}
									
									&.isocell {
										
										width: 20em;
										margin: 3em 0 3em 2em;
										
									}
									
								}
								
							}
							#custom_tab {
								
								left: -36em;
								top: 2.47em;
								height: 100%;
								display: inline-table;
								border: 0;
								position: absolute;
								text-align: left;
								padding: 3em;
								width: 48em;
								background: linear-gradient(#E0E4F0 0%, #eaeef8 100%);
								border-bottom: 0.2em solid #3B4767;
								
								h2 {
									
									color: #3B4767;
									font-size: 2.95em;
									line-height: 1em;
									font-weight: 300;
									margin-top: 0;
									text-transform: uppercase;

									&::first-line {
										
										font-weight: 700;
										color: #3B4767;
										
									}
									
								}
								p {
									
									color: #3B4767;
									
								}
										
								a {
									
									text-transform: uppercase;
									text-decoration: none;
									padding: 0 1.7em;
									display: inline-block;
									border-radius: 0.4em;
									background-color: #FFFFFF;
									font-size: 1em;
									height: 2em;
									line-height: 2em;
									font-weight: 400;
									background: #3B4767;
									color: #FFF;

								}
										
								}
							
						}
						
					} //ul.wemake

				}

			}
		} // ul

		a {
			
			&.contacts {

				font-size: 0.900em;
				line-height: 1.889em;
				display: inline-block;
				text-decoration: none;
				background-color: #FFF;
				padding: 0 0.900em;
				margin-top: 0.4em;
				float: right;
				border-radius: 0.35em;
				text-transform: uppercase;
				font-weight: 700;
				margin-left: 0.4em;	
				color: #4E748B;			
				
				&:hover {
					
					background-color: #4E748B;
					color: #FFFFFF;
					
				}

			}

		} //a 

	} // menu

	#menumobile {
		
		display: none;
		
	} //#menumobile
	
	#breadcrumbs {
		
		line-height: 2.550em;
		overflow: visible;
		background-color: #E1E3F0;
		color: #384567;
		background: linear-gradient(90deg, #E1E3F0 50%, #CED2E6 50%);
		
		.container {
		
			background-color: #CED2E6;
			
			a {
				
				display: inline-block;
				padding-left:  1.550em;
				background-color: #E1E3F0;
				background-image: url('../images/divisorio-chiaro.png');
				background-position-x: 0%;
				background-repeat: no-repeat;
				background-size: contain;
				font-weight: 400;
				color: #384567;
				
				&:first-of-type {
					
					padding-left: 1.5em;
					padding-right: 0.5em;
					background-image: none;
					
										
				}
				&:last-of-type {
					
					background-color: #CED2E6;
					background-image: url('../images/divisorio-scuro.png');
					font-weight: 700;
										
				}
				
				a {
					
					text-decoration: none;
					font-weight: 400;
					line-height: 2.550em;
					color: #384567;
				
				} // a
			
			} //span
			
		} //container
		
		 		
	} // breadcrumbs
	
} // body


/* =============================================================================
   From 1200 to 970
   ========================================================================== */

@media only screen and (max-width: 1195px) and (min-width: 970px) {

	body {
			
	} // body

}


/* =============================================================================
   From 970 to 736px
   ========================================================================== */
   
@media only screen and (max-width: 969px) and (min-width: 736px) {

	body {

		#header {
			
			p {
				
				font-size: 1em;
				margin-top: 3.15em;
				
			} // p
			
		} // header
			
	} // body

}

/* =============================================================================
   From 736px to 600px
   ========================================================================== */

@media only screen and (max-width: 736px) and (min-width: 600px) {

	body {
			
		#header {

			text-align: center;
			
			p {
				
				font-size: 1em;
				margin-top: 0.15em;
				
			} // p
			
		} // header
		
		#menu {

			ul {

				li {
					
					width: 5.1em;

				} // li

			} // ul 

		} // menu 
	
	} // body

}


/* =============================================================================
   From 600 to 480
   ========================================================================== */

@media only screen and (max-width: 600px) {
	
	body {

		#header {

			text-align: center;
			
			p {
				
				font-size: 1em;
				margin-top: 0.15em;
				
			} // p
			
		} // header

	} // body

}

/* =============================================================================
   Less than 480px
   ========================================================================== */
@media only screen and (max-width: 479px) {

	body {
		
		#header {

			text-align: center;
			
			p {
				
				font-size: 1em;
				margin-top: 0.15em;
				
			} // p
			
		} // header
		
		#menu {

			ul {

				li {
					
					width: auto;
					padding: 0 0.5em;
					height: auto;
					
					span {
						
						font-size: 0.8em;
						
					} //span

				} // li

			} // ul 
			
			a {
				
				&.contacts {
					
					font-size: 0.8em;
					margin: 0 0.1em;
					padding: 0 0.3em;
					
				} // contatcs
				
			} // a
			
		} // menu 
	
	
	} // body

}