#topNav  { width: 100%; background: #707070; height: 50px; border-bottom: 6px solid #e7e7e7;  }
div.toplinksWrapper { width: 1200px; margin: 0 auto; position: relative; }
div#topNav ul.toplinks    { width:86.66666666666667%; margin:0; padding: 5px 0 0 0; list-style-type: none; float:left; } /*width:1040px*/
div#topNav ul.toplinks li { margin:0; padding:0; float: left; text-align:center; font-size:0.9em; font-weight:bold; }
div#topNav ul.toplinks li a:link, div#topNav ul.toplinks li a:visited   {  
	padding: 10px 0; 
	margin:0; 
	display:block; 
	color:#fff; 
	text-decoration: none;  
}
div#topNav ul.toplinks li:nth-child(1) { width: 18.26923076923077%; }  /* SAC */
div#topNav ul.toplinks li:nth-child(2) { width: 22.69230769230769%; }  /* SCC */
div#topNav ul.toplinks li:nth-child(3) { width: 18.26923076923077%; }  /* Intranet */
div#topNav ul.toplinks li:nth-child(4) { width: 14.42307692307692%; }  /* WebAdvisor */
div#topNav ul.toplinks li:nth-child(5) { width: 14.23076923076923%; }  /* Self-Service */
div#topNav ul.toplinks li:nth-child(6) { width: 12.11538461538462%; }  /* Translate */
div#topNav ul.toplinks li a:hover, div#topNav ul.toplinks li a.active, div#topNav ul.toplinks li a.selected { color: #ccc; }

/* === Search box ===*/

.searchWrapper { float:right; width: 13.33333333333333%; padding:0; z-index:50; background: #ccc; position: relative; } /*width:160px*/

#search:hover { color: #fff; cursor: pointer; }

#search { 
	width:100%; 
	height: 50px; 
	background: #e7e7e7 url(../Images/search.png) no-repeat 73% 15px; 
	padding-top: 15px; 
	box-sizing: border-box; 
	font-size:0.9em; 
	font-weight:bold;
	color: #333; 
	text-align: center; 
	text-indent: -15px; 	}
	
#search:hover { color: #000; cursor: pointer; }

div#searchBox1 {
    height: 30px; 
	position: absolute;
	width:160px;
	top: 60px; 
	right: 40px;	
    padding: 0;
	background: none;
	display: none;
}
div#searchBox1 table { background: #e7e7e7; width:200px;}

div#searchBox1 input#searchBox {
    border: medium none;
	width:160px;
    margin:0;
    /*vertical-align:top !important;*/
    padding:3px 10px;
	min-width: 10px;
	background: none;
	font-size: 85%;
}

input[type="button"], input[type="reset"], input[type="submit"], button { min-width: 30px;}
	
div#searchBox1 input#btnSearch.btnSearch[type="button"] { 
	width: 30x; 
	height: 30px; 
	font-size: 1em; 
	text-transform: uppercase; 
	font-weight: bold; float:right; 
	margin: 4px; 
	padding: 5px; 
	background: #fff url(../Images/gosearch.png) no-repeat 50% 4px; 
	box-sizing:border-box;
	border-radius:50%; }


td.ms-sbcell {
    background-color: transparent;
}
.ms-sbgo a img{
	display:none;
}
.ms-sbgo a{
	display:block;
	background:url("../images/gosearch.png") left top no-repeat;
	height:22px;
	width:22px;
	margin:0 0 6px;
}
.ms-sbLastcell, .ms-rightbodysectionsearchbox {
    background-color: transparent;
    width: 0;
}
.s4-search table{
	width:195px !important;;
}

/* MEDIA QUERIES */
@media screen and (min-width: 750px) and (max-width: 1199px) {
div.toplinksWrapper { width: 100%; }
div#topNav ul.toplinks, .searchWrapper {  font-size:0.85em; font-style: normal; }
#search { background: none; }
}

@media screen and (min-width: 751px) and (max-width: 799px) {

div#topNav ul.toplinks li:nth-child(1) { width: 19.30769230769231%; }  /* SAC - width: 180px; */
div#topNav ul.toplinks li:nth-child(2) { width: 25.46153846153846%; }  /* SCC - width: 244px; */
div#topNav ul.toplinks li:nth-child(3) { width: 20.84615384615385%; }  /* Intranet - width: 196px; */
div#topNav ul.toplinks li:nth-child(4) { width: 9.53846153846154%; }  /* portal - width: 120px; */
div#topNav ul.toplinks li:nth-child(5) { width: 13.38461538461538%; }  /* WebAdvisor - width: 160px; */
div#topNav ul.toplinks li:nth-child(6) { width: 11.46153846153846%; }  /* Translate width: 140px; */

}
@media screen and (max-width: 749px) {
	
div#topNav       { height:auto; }
div.toplinksWrapper { width: 90%; height:auto; }
div#topNav ul.toplinks    { width:90%; } 
div#topNav ul.toplinks li { float: none; margin: 10px; text-align:left; }
div#topNav ul.toplinks li a:link, div#topNav ul.toplinks li a:visited   { display: inline-block; }
div#topNav ul.toplinks li:nth-child(1) { width: auto; }  /* SAC */
div#topNav ul.toplinks li:nth-child(2) { width: auto; }  /* SCC */
div#topNav ul.toplinks li:nth-child(3) { width: auto; }  /* Intranet */
div#topNav ul.toplinks li:nth-child(4) { width: auto; }  /* portal */
div#topNav ul.toplinks li:nth-child(5) { width: auto; }  /* WebAdvisor */
div#topNav ul.toplinks li:nth-child(6) { width: auto; }  /* Translate */

.searchWrapper { width:100%; margin: 25px 0 15px 0; float: none; clear: both; } 


#search { 
	width:100%;	
	height: 50px; 
	background-image: none;
	}

div#searchBox1 {
    height: 50px; 
	position: absolute;
	right:0;
	width:100%;
	top: 0; 
}

/*div.searchBox { display:block !important; position: static; width:100%; height: 50px; }   height: auto; */

div#searchBox1 table , div#searchBox1 table td { width: 100%; height: 50px; }

.searchBox input.searchBox { width: 85%; border: none; padding: 5px 10px; background-color: none; }	
}

@media screen and (max-width: 320px) {
	#search { 

	background: none; 
	}
}


/* ==========================================================
	Top bar Toggle Navigation
============================================================= */

#toggleNavigation { float:right; margin:  1px 10px 0 0; clear: both; display: none; }

.sr-only {
    border: 0 none;
    clip: rect(0px, 0px, 0px, 0px);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

#toggleNavigation button, #toggleNavigation button:hover {
	padding: 9px 10px 4px 10px;
	float: right;
	min-width: 0;
	margin:  3% 3% 0 0;
	border-width: 0;
	background:#222;   /* #efefef; */
}

#toggleNavigation .icon-bar {
    border-radius: 1px;
    display: block;
    height: 2px;
    width: 22px;
	background-color: #fff; /* #5b7f71 */
	margin: 0 0 5px;	
}
.searchWrapper { display: block; }

/* MEDIA QUERIES */


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

#topNav { display: none; }
	
#toggleNavigation {display: block !important;			
    position: absolute;		
    top: 0;		
    right: 0; }
	
#toggleNavigation button
{
   cursor:pointer;
   margin: 0;
}

#toggleNavigation button:hover
{
   background:#000; /* #efefef */
   border:0;
}
#toggleNavigation button:active,#toggleNavigation button:focus,#toggleNavigation button:hover
{
   outline:0;
   background:#222; /* #efefef */
}

}