/* SMARTPHONES */
@media only screen 
  and (max-width: 920px) { 

#header #top { border-top: 4px solid #8BAABF; }
#header #top #mission { font-size: 16px; line-height: 22px}
#header #top #menu { right: 60px; }
#header #slideshow {  }
#subheader { height: 32px !important; }
#subheader #text {
	left: 14px !important;
	margin-top: -8px !important;
	font-size: 13px !important;
	line-height: 22px !important;
}

}

/* ALL THE REST */
@media only screen 
  and (min-width: 921px) { 

#header #top { border-top: 3px solid #8BAABF; }
#header #top #mission { font-size: 14px; line-height: 22px;
}
#header #top #menu { right: 10px; }
#header #slideshow {  }
#subheader { height: 20px; }
#subheader #text {
	left: 210px !important;
	margin-top: -6px !important;
	font-size: 12px !important;
	line-height: 22px !important;
}
#language_flag { max-height: 16px; width: auto; }

}

/* Header with logo */
#header {
	position: relative;
	width: 100%;
}

#header #top {
	height: 102px;
/*	background-image: url(/images/bg.gif); */
	background-repeat:repeat;
/*	border-bottom: 4px solid #8BAABF; */
	border-bottom: 0 !important;
/*	margin-bottom: 10px; */
	margin-bottom: 0 !important;
}

#header #top #logo {
	position: absolute;
	left: 0px;
	top: 12px !important;
	width: 130px;
	height: 92px;
	z-index: 3;
	background-image: url(/images/_admin/logo_cyberit_cuore_130.png);
}
#header #top #mission {
	position: absolute;
	left: 130px;
	top: 14px;
	color: #336699;
	font-family: 'Noto Sans', sans-serif;
	font-style:italic;
	font-weight: bold;
	z-index: 3;
}
#header #top #right {
	position: absolute;
	right: 0px;
	top: 6px !important;
	width: 470px !important;
	height: 84px;
	max-width:100%;
	max-height:100%;
	z-index: 1;
	background-image: none !important;
}

#header #top #language {
	position: absolute;
	right: 13px;
	top: 16px;
	z-index: 3;
}

/*
<!-- JAVASCRIPT to clear search text when the field is clicked -->
<script type="text/javascript">
window.onload = function(){ 
	//Get submit button
	var submitbutton = document.getElementById("tfq");
	//Add listener to submit button
	if(submitbutton.addEventListener){
		submitbutton.addEventListener("click", function() {
			if (submitbutton.value == 'Search our website'){//Customize this text string to whatever you want
				submitbutton.value = '';
			}
		});
	}
}
</script>
	<!-- HTML for SEARCH BAR -->
	<div id="tfheader">
		<form id="tfnewsearch" method="get" action="http://www.google.com">
		        <input type="text" id="tfq" class="tftextinput4" name="q" size="21" maxlength="120" value="Search our website"><input type="submit" value=" " class="tfbutton4">
		</form>
		<div class="tfclear"></div>
	</div>

*/





/* New Search */
#header #top #search {
	position: absolute;
	right: 13px;
	top: 16px;
}
.tftextinput4{
	padding: 3px 6px;
	height: 24px;
	font-family: 'Noto Sans', sans-serif;
	font-size: 14px;
	color:#666;
	border:1px solid #0076a3;
	border-right:0px;
	border-top-left-radius: 5px 5px;
	border-bottom-left-radius: 5px 5px;	
}
.tfbutton4 {
	padding:0;
	width:24px;
	height:32px;
	font-family: 'Noto Sans', sans-serif;
	font-size: 14px;
	color:#666;
	border: solid 1px #0076a3;
	border-left:0px;
	border-top-right-radius: 5px 5px;
	border-bottom-right-radius: 5px 5px;
	background: #FFF url(/images/_admin/icon_search_20x30.png);
}
/* Fixes submit button height problem in Firefox */
.tfbutton4::-moz-focus-inner {
	border: 0;
}
.tfclear{
	clear:both;
}

#header #top #menu {
	position: absolute;
	margin: 0;
	padding: 0;
	top: 60px;
    text-align: right;
	z-index: 3;
	font-family: 'Noto Sans', sans-serif;
	font-size: 19px;
	font-weight: bold;
}
#header #top #menu:after {
    content: '';
    display: inline-block;
    width: 100%;
}
#header #top #menu li {
    display: inline-block;
}
#header #top #menu a {
	text-decoration: none;
	color: #336699;
    border-radius: 5px;
    border-left: 1px solid #fff;
    border-top: 1px solid #fff;
    border-bottom: 2px solid #ccc;
    border-right: 2px solid #ccc;
    background: #FF8822;
    padding: 2px 12px;
}
#header #top #menu a:hover, #header #menu li:hover>a {
	color: #FF6600;
    border-radius: 5px;
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
    background: #eeeecc;
    padding: 2px 12px;
}

/* Slideshow */
#header #slideshow {
/* border-top: 1px solid #8BAABF; */	
	border-top: 4px solid #8BAABF;
	padding-top: 10px;
	margin-bottom: 10px;
	width: 100%;
	visibility: visible;
}


/* Subheader line with links */
#subheader {
	position: relative;
	width: 100%;
	z-index: 1;
	background-color: #FFFFFF;
	margin-top: 15px;
	margin-bottom: 10px;
}
#subheader #background {
	position: absolute;
	top: 0px;
	width: 100%;
	height: 7px;
	line-height: 0;
}
#subheader #text {
	position: absolute;
	top: 0px;
	padding-left: 10px;
	padding-right: 10px;
	border: 1px solid;
	background-color: #FFFFFF;
	font-family: 'Noto Sans', sans-serif;
	color: #000000;
}

/* Three lines (sandwich) menu toggle */
.menu-toggle {
	position: absolute;
	top: 62px;
	right: 13px;
 }
.menu-toggle { cursor: pointer; padding: 10px 35px 16px 0px; }
.menu-toggle span, .menu-toggle span:before, .menu-toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 5px;
  width: 35px;
  background: black;
  position: absolute;
  display: block;
  content: '';
}
.menu-toggle span:before {
  top: -10px; 
}
.menu-toggle span:after {
  bottom: -10px;
}
.menu-toggle span, .menu-toggle span:before, .menu-toggle span:after {
  transition: all 500ms ease-in-out;
}
.menu-toggle.active span {
  background-color: transparent;
}
.menu-toggle.active span:before, .menu-toggle.active span:after {
  top: 0;
}
.menu-toggle.active span:before {
  transform: rotate(45deg);
}
.menu-toggle.active span:after {
  transform: rotate(-45deg);
}