

.navbar{
  height:80px !important;
  font-family: "Open Sans" !important;
  font-weight: bold;
  font-size: 16px;
  line-height: 16px !important;
}

/* Background-color - 2 versions  */
.navbar-default {
  background-color: transparent !important;
  border: none !important;
}

.navbar.yamm.solid-navbar{
  background-color: #FFF !important;
  border: none !important;
}

.e-gerdau:before{
  background-image: url('../../images/menu/e-gerdau.png');
  background-size: 30px 30px;
  display: inline-block;
  width: 30px;
  height: 30px;
  content:"";
  transform: translate(-10%, 20%);
}
.e-beneficios:before{
  background-image: url('../../images/menu/e-beneficios.png');
  background-size: 30px 30px;
  display: inline-block;
  width: 30px;
  height: 30px;
  content:"";
  transform: translate(-10%, 20%);
}
.gerdau-procurement:before{
  background-image: url('../../images/menu/gerdau-procurement.png');
  background-size: 30px 30px;
  display: inline-block;
  width: 30px;
  height: 30px;
  content:"";
  transform: translate(-10%, 20%);
}
.corte-dobra:before{
  background-image: url('../../images/menu/corte-dobra.png');
  background-size: 30px 30px;
  display: inline-block;
  width: 30px;
  height: 30px;
  content:"";
  transform: translate(-10%, 20%);
}
.intranet:before{
  background-image: url('../../images/menu/intranet.png');
  background-size: 30px 30px;
  display: inline-block;
  width: 30px;
  height: 30px;
  content:"";
  transform: translate(-10%, 20%);
}
.webmail:before{
  background-image: url('../../images/menu/webmail.png');
  background-size: 30px 30px;
  display: inline-block;
  width: 30px;
  height: 30px;
  content:"";
  transform: translate(-10%, 20%);
}

.canada-flag:before,
.spanish-flag:before {
  background-image: url('../../images/menu/canada_flag.png');
  background-size: 30px 30px;
  display: inline-block;
  width: 30px;
  height: 30px;
  content:"";
  transform: translate(-10%, 20%);
}
.spanish-flag:before{
  background-image: url('../../images/menu/spanish_flag.png');
}

.us-flag:before{
  background-image: url('../../images/menu/us_flag.png');
  background-size: 30px 30px;
  display: inline-block;
  width: 30px;
  height: 30px;
  content:"";
  transform: translate(-10%, 20%);
}

.navbar-toggle {
  margin-right: 35px !important;
}
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
  background-color: transparent !important;
}

.navbar-default .navbar-toggle {
  border: none;
  position: absolute;
  right: 0;
  z-index: 1000;
}

.navbar-default .navbar-toggle .icon-bar,
.navbar-toggle .icon-bar {
  display: block;
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background-color: #495961 !important;
}
.navbar-default .navbar-toggle.collapsed .icon-bar {
  background-color: #fff !important;
}

.navbar-toggle .icon-bar + .icon-bar {
  margin-top: 5px !important;
}

.navbar-default .navbar-toggle .icon-bar,
.navbar-toggle span.icon-bar {
  transition: all 0.15s;
}






.solid-navbar .navbar-toggle:focus,
.solid-navbar .navbar-toggle:hover {
  background-color: transparent !important;
}

.solid-navbar .navbar-toggle {
  border: none;
  position: absolute;
  right: 0;
  z-index: 1000;
}

.solid-navbar .navbar-toggle .icon-bar,
.navbar-toggle .icon-bar {
  display: block;
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background-color: #495961 !important;
}
.solid-navbar .navbar-toggle.collapsed .icon-bar {
  background-color: #fff !important;
}

.navbar-toggle .icon-bar + .icon-bar {
  margin-top: 5px !important;
}

.solid-navbar .navbar-toggle .icon-bar,
.navbar-toggle span.icon-bar {
  transition: all 0.15s;
}









.navbar-toggle span:nth-child(2) {
  transform: rotate(45deg);
  transform-origin: 20% 10%;
}

.navbar-toggle span:nth-child(3) {
  opacity: 0;
}

.navbar-toggle span:nth-child(4) {
  transform: rotate(-45deg);
  transform-origin: 10% 90%;
}

.navbar-toggle.collapsed span:nth-child(2),
.navbar-toggle.collapsed span:nth-child(4) {
  transform: rotate(0);
}

.navbar-toggle.collapsed span:nth-child(3) {
  opacity: 1;
}

/* Links - 2 versions */
.navbar.yamm.navbar-default a {
  color: #FFF;
  position: relative;
  display: block;
  transition: color 0.1s,background-color 0.1s,padding 0.2s ease-in;
}
.solid-navbar a{
  color: #495961 !important;
  position: relative;
  display: block;
  transition: color 0.1s,background-color 0.1s,padding 0.2s ease-in;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus,
.navbar.yamm.navbar-default a:hover,
.navbar.yamm.navbar-default a:focus,
.navbar.yamm.navbar-default a:active,
.navbar.yamm.navbar-default a:visited,
.navbar.yamm.navbar-default a:visited:active{
  color: #FFF;
  background-color: transparent!important;
}

.navbar.yamm.solid-navbar .navbar-nav > .open > a,
.navbar.yamm.solid-navbar .navbar-nav > .open > a:hover,
.navbar.yamm.solid-navbar a:focus,
.navbar.yamm.solid-navbar a:hover,
.navbar.yamm.solid-navbar a:active{
  color: #0578be !important;
  background-color: transparent!important;
}

/* Hover line color */
.navbar.yamm.navbar-default a.main::before {
  content: '';
  display: block;
  position: absolute;
  bottom: 3px;
  left: 5%;
  height: 3px;
  width: 90%;
  background-color: #FFF;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: color 0.1s,transform 0.2s ease-out;
}

.navbar.yamm.solid-navbar a.main::before {
  content: '';
  display: block;
  position: absolute;
  bottom: 3px;
  left: 5%;
  height: 3px;
  width: 90%;
  background-color: #0578be;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: color 0.1s,transform 0.2s ease-out;
}

.navbar.yamm.navbar-default a:hover::before,
.navbar.yamm.navbar-default a:focus::before {
  color: #FFF;
  transform-origin: left top;
  transform: scale(1, 1);
}

.navbar.yamm.solid-navbar a:hover::before,
.navbar.yamm.solid-navbar a:focus::before {
  color: #0578be;
  transform-origin: left top;
  transform: scale(1, 1);
}


/* Dropdown font */
.dropdown-menu > li > a{
  font-size:14px;
  font-weight: bold;
  color: #495961 !important;
}

.dropdown-menu > li > a:hover,
.submenu-accordion a:hover,
.accordion-body a:hover,
.accordion-title > a.collapsed:hover:after,
.menu-right-side > a:hover,
.display-toggle-menu li.dropdown a.dropdown-toggle:hover,
.display-toggle-menu li.dropdown a.dropdown-toggle:hover:after,
.display-toggle-menu li.dropdown.open .dropdown-menu li.dropdown.dropdown-submenu a.dropdown-toggle:hover,
.display-toggle-menu li.dropdown.open .dropdown-menu li.dropdown.dropdown-submenu a.dropdown-toggle:hover:after,
.display-toggle-menu li.dropdown.open .dropdown-menu li.dropdown.dropdown-submenu.open .dropdown-menu li.dropdown.dropdown-submenu a.dropdown-toggle:hover,
.display-toggle-menu li.dropdown.open .dropdown-menu li.dropdown.dropdown-submenu.open .dropdown-menu li.dropdown.dropdown-submenu a.dropdown-toggle:hover:after
{
  color: #0578be !important;
}
/* Accordion font */

.submenu-accordion a {
  font-size:14px;
  font-weight: bold;
  color: #495961 !important;
  text-decoration: none;
}

.accordion-body a
{
  font-size:12px;
  font-weight: bold;
  color: #495961 !important;
  text-decoration: none;
}


.display-toggle-menu li.dropdown a.dropdown-toggle,
.display-toggle-menu li.dropdown.open .dropdown-menu li.dropdown.dropdown-submenu a.dropdown-toggle,
.display-toggle-menu li.dropdown.open .dropdown-menu li.dropdown.dropdown-submenu.open .dropdown-menu li.dropdown.dropdown-submenu a.dropdown-toggle
{
  color: #495961!important ;
}

/* Accordion links opened */
.accordion-title > a[aria-expanded="true"],
.display-toggle-menu li.dropdown.open a.dropdown-toggle[aria-expanded="true"],
.display-toggle-menu li.dropdown.open .dropdown-menu li.dropdown.dropdown-submenu.open a.dropdown-toggle,
.display-toggle-menu li.dropdown.open .dropdown-menu li.dropdown.dropdown-submenu.open .dropdown-menu li.dropdown.dropdown-submenu.open a.dropdown-toggle
{
  color: #0578be !important;
}

.accordion-title > a::after,
.display-toggle-menu li.dropdown.open a.dropdown-toggle::after,
.display-toggle-menu li.dropdown.open .dropdown-menu li.dropdown.dropdown-submenu.open a.dropdown-toggle::after,
.display-toggle-menu li.dropdown.open .dropdown-menu li.dropdown.dropdown-submenu.open .dropdown-menu li.dropdown.dropdown-submenu.open a.dropdown-toggle::after {
  content:"-" ;
  color: #0578be ;
}
.accordion-title > a.collapsed::after,
.display-toggle-menu li.dropdown a.dropdown-toggle::after,
.display-toggle-menu li.dropdown.open .dropdown-menu li.dropdown.dropdown-submenu a.dropdown-toggle::after,
.display-toggle-menu li.dropdown.open .dropdown-menu li.dropdown.dropdown-submenu.open .dropdown-menu li.dropdown.dropdown-submenu a.dropdown-toggle::after
{
  content:"+" ;
  color: #495961 ;
}


/* Dropdown divider */
.dropdown-menu .divider{
  height: 1px !important;
  background-color: #bfc9d0 !important;
  width: 95%;
  margin: 5px auto !important;
}

/* Dropdown US */
.dropdown-2 .dropdown-menu .divider {
  background-color: #fff !important;
}

.submenu-accordion .divider{
  margin:5px 0 !important;
}


/* Divided menu */
.dropdown-menu.divided{
  padding: 10px 50px!important;
}


/* Title  */
.dropdown-menu.divided p {
  font-size:20px;
  font-weight:600;
  color: #192d38;
}
.dropdown-menu.divided p:after {
  margin-top:10px;
  content:' ';
  display: block;
  width:60%;
  border: 1px solid #192d38;
  box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
  -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
  -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
}

.icon{
  display:block;
  top: 12.5px;
  bottom:auto;
  right: auto;
  margin:0;
  width: 30px;
  height: 55px;
  position:absolute;
  z-index:1001;
  padding-right:10px;
  transform:rotate(0deg);
  -moz-transform:rotate(0deg);
  -webkit-transform:rotate(0deg);
  -o-transform:rotate(0deg);
  -ms-transform:rotate(0deg);
}

.search-icon{
  font-size: 0px;
}

.block-searchglnblock-modal .js-form-type-textfield,
.block-exposedform-searchblock-modal .js-form-type-textfield{
  width:100% !important;
}

.block-searchglnblock-modal .spb-popup-main-wrapper,
.block-exposedform-searchblock-modal .spb-popup-main-wrapper{
  border:none !important;
  background-color: transparent !important;
  position: fixed;
  width: auto !important;
  left: 20%;
  right: 20%;
}

.block-searchglnblock-modal .spb_close,
.block-exposedform-searchblock-modal .spb_close {
  margin: 1px 0;
}

.block-searchglnblock-modal .form-text,
.block-exposedform-searchblock-modal .form-text{
  background-color: #ecf2f6 !important;
  border: solid 1px #bfc9d0;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font-size: 22px;
  font-family: 'Barlow',sans-serif;
  text-align: left;
  padding: 10px 40px;
  background: url(/themes/custom/gerdautema/images/menu/search_blue.png);
  background-repeat: no-repeat;
  background-position: 1%;
  width:100%;
}
.block-searchglnblock-modal input[type="text"]:focus,
.block-searchglnblock-modal input[type="search"]:focus,
.block-searchglnblock-modal .form-search #searchbox #search_query_top:focus,
.block-searchglnblock-modal .input-group input#search:focus,
.block-exposedform-searchblock-modal input[type="text"]:focus,
.block-exposedform-searchblock-modal input[type="search"]:focus,
.block-exposedform-searchblock-modal .form-search #searchbox #search_query_top:focus,
.block-exposedform-searchblock-modal .input-group input#search:focus{
    background-color: #ecf2f6 !important;
    border: solid 1px #bfc9d0;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    font-size: 22px;
    font-family: 'Barlow',sans-serif;
    text-align: left;
    padding: 10px 40px;
    background: url(/themes/custom/gerdautema/images/menu/search_blue.png);
    background-repeat: no-repeat;
    background-position: 1%;
}


/* Buy here button */
.navbar .btn-ghost {
  margin: 26px 16px 0 0;
  padding: 5px 0 !important;
  border-style:solid !important;
  font-family: "Open Sans","Arial";
  font-weight: bold;
  background: none;
  border-width: 2px;
  border-radius: 4px;
  font-size: 14px;
  width: 160px;
  height: 35px;
  text-decoration: none;
  text-align: center;
  background-color: transparent !important;
}

.navbar.navbar-default .btn-ghost {
  color: #FFFFFF;
  border-color: #FFFFFF;
}

.navbar.navbar-default .btn-ghost:hover{
  border-color: #0578be !important;
  color: #0578be !important;
  text-decoration: none !important;
}

.navbar.navbar-default a.btn-ghost:before{
  background-color: transparent !important;
}

.navbar.solid-navbar .btn-ghost {
  color: #00b0db !important;
  border-color: #00b0db !important;
}

.navbar.solid-navbar .btn-ghost-org {
  color: #fff !important;
  border-color: #ffaf37 !important;
  background-color: #ffaf37 !important;
}

#block-gerdautema-mainnavigation > ul > li > a.btn-ghost-org:hover{
  color: #fff !important;
  border-color: #ff9900 !important;
  background-color: #ff9900 !important;
}

.navbar.yamm.solid-navbar .btn-ghost a {
  color: #00b0db !important;
}


/* Accordion content padding */
.accordion-body{
  padding:0 0 0 10px;
}
.accordion-body a{
  padding: 8px 0;
}

.submenu-accordion .panel {
  margin: initial !important;
  border: none;
}

.divided{
  background:linear-gradient(to right, #FFF 50%, #ECF2F6 50%);
}
.menu-right-side > a{
  color: #192d38 !important;
  text-decoration: none;
  font-weight: 400;
  margin: 20px 0;
}

.dropdown-submenu > a:after{
  display: initial !important;
  border: initial!important;
  margin-top: 0 !important;
  margin-right: 0 !important;
  float: unset !important;
}

.menu--main li.dropdown-submenu,
.menu--main li.dropdown-submenu a{
  width: 100%;
}

.menu--main li.dropdown a span.caret {
  display: none;
}

.menu--main li.dropdown-submenu a span.caret {
  display: initial;
  border: initial;
  float: right;
}

.menu--main li.dropdown ul.dropdown-menu {
  min-width: 250px!important;
}

.menu--main li.dropdown ul.dropdown-menu-item {
  display: none;
  margin-top: 5px!important;
}

.dropdown-menu > li > a {
  font-weight: bold!important;
}

.dropdown-menu > li.dropdown-fixed > a {
  background-color: transparent !important;
}
.dropdown-menu-item > li > a {
  font-weight: normal!important;
  color: #495961 !important;
}

.img.img-responsive.inline {
  display: inline;
}

.logo-gerdau {
  display: inline !important;
}

.logo-sider-header-white, .logo-sider-header {
  height: 62px;
  margin-left: 30px;
  margin-top: 5px;
}

@media only screen and (min-width : 1023px)
{
  .navbar-toggle{
    display: none !important;
  }
  .display-toggle-menu{
    display: none;
  }
  .display-desktop-menu{
    display:block;
  }
  /* men triangle and dropdown position */
  .navbar-nav>li>.dropdown-menu {
    margin-top: -5px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    left: 50%;
    right: auto;
    text-align: left;
    transform: translate(-50%, 0);
    padding: 5px;
  }
  .navbar-nav>li>.dropdown-menu.last-menu {
    transform: translate(-80%, 0);
  }


  .dropdown-menu.divided{
    min-width:600px!important;
  }

  .dropdown-menu:before {
    position: absolute;
    top: -7px;
    left: 50%;
    right: auto;
    display: inline-block;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #ccc;
    border-left: 7px solid transparent;
    border-bottom-color: rgba(0, 0, 0, 0.2);
    content: '';
  }

  .dropdown-menu:after {
    position: absolute;
    top: -6px;
    left: 50%;
    right: auto;
    display: inline-block;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #ffffff;
    border-left: 6px solid transparent;
    content: '';
  }

  .dropdown-menu.last-menu:before {
    left: 78%;
  }
  .dropdown-menu.last-menu:after {
    left: 78%;
  }
  .navbar-default .login{
    background: url(../../images/menu/login_white.png);
    background-repeat: no-repeat;
    margin: 15px 0px 0 5px !important;
    width: 95px;
    padding-top: 10px !important;
    padding-left: 40px !important;
    background-size: auto !important

  }
  .navbar.yamm.solid-navbar .login{
    background: url(../../images/menu/login_blue.png);
    background-repeat: no-repeat;
    margin: 15px 0px 0 5px !important;
    width: 95px;
    padding-top: 10px;
    padding-left: 40px;
    background-size: auto !important;
  }

  .navbar-default .search-icon{
    background: url(../../images/menu/search_white.png);
    background-repeat: no-repeat;
    margin: 28px 0px 0 15px !important;
    background-size: auto !important;

  }
  .navbar.yamm.solid-navbar .search-icon{
    background: url(../../images/menu/search_blue.png);
    background-repeat: no-repeat;
    margin: 26px 0px 0 15px !important;
    background-size: auto !important;
  }
}

/* Tablet dropdown menu */
@media only screen and (max-width:1022px) {
  .display-toggle-menu {
    display: block;
    background-color: #fff;
    top: 0 !important;
    position: fixed;
    z-index: 1030;
    padding-top: 60px;
    right: 0px;
    height: 100vh;
    /*
    position: fixed;

    right:-250px;
    height:100vh;
    z-index:1030;
    background-color:#FFF;
    transition: all 0.3s;
    overflow-y:scroll;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2); */
  }
  .display-toggle-menu ul {
    text-align: right;
  }
  .navbar-fixed-top{
    top: 0px !important;
  }
  .navbar.yamm.navbar-default .display-toggle-menu a {
    color: #495961 !important;
  }
  .navbar.yamm.navbar-default .display-toggle-menu a:hover {
    color: #0578be !important;
  }
  .display-desktop-menu {
    display: none;
  }

  .navbar-default .navbar-collapse {
    background: #fff;
    width: 45%;
    float: right;
  }
  .navbar.yamm.navbar-default a {
    color: #495961 !important;
  }




  .navbar.yamm.solid-navbar .display-toggle-menu a {
    color: #495961 !important;
  }
  .navbar.yamm.solid-navbar .display-toggle-menu a:hover {
    color: #0578be !important;
  }
  .solid-navbar .navbar-collapse {
    background: #fff;
    width: 45%;
    float: right;
  }
  .navbar.yamm.solid-navbar a {
    color: #495961 !important;
  }
  .solid-navbar .navbar-toggle .icon-bar,
  .navbar-toggle .icon-bar {
    background-color: #495961 !important
  }
  .solid-navbar .navbar-toggle.collapsed .icon-bar {
    background-color: #495961 !important;
  }




  ul.menu--main {
    padding-top: 50px;
  }

  ul.menu--main li {
    width: 100%;
    display: block !important;
    margin: 5px 0;
  }

  ul.menu--main li.divider {
    background: #495961;
    height: 1px;
  }

  .nav-container .navbar-collapse {
    right: 0px;
    position: absolute;
    top: 0;
    border-color: #495961;
  }
  .navbar-default .navbar-toggle .icon-bar,
  .navbar-toggle .icon-bar {
    background-color: #495961 !important
  }

  .navbar .btn-ghost {
    color: #00b0db !important;
    border-color: #00b0db !important;
  }

  .navbar.yamm .login {
    background: url(../../images/menu/login_blue.png);
    background-repeat: no-repeat;
    margin: 15px 0px 0 0px !important;
  }

  .navbar.yamm .search-icon {
    background: url(../../images/menu/search_blue.png);
    background-repeat: no-repeat;
    margin: 15px 0px 0 0px !important;
  }

  .navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse {
    max-height: 600px !important;
  }

  .navbar-default.solid-navbar .navbar-toggle.collapsed .icon-bar {
    background-color: #495961 !important;
  }

  .navbar-collapse {
    padding-right: 25px !important;
    padding-left: 25px !important;
  }

}

@media only screen and (max-width:760px) {
  .navbar-default .navbar-collapse {
    width: 80%;
  }



  .solid-navbar .navbar-collapse {
    width: 80%;
  }


  .dropdown-menu-item li {
    margin: 12px 0 !important;
  }

  .dropdown-menu .divider {
    width: 100%;
  }

  .block-exposedform-searchblock-modal .form-text,
  .block-exposedform-searchblock-modal .form-text{
    font-size: 16px;
  }

  .logo-sider-header-white, .logo-sider-header,
  .logo-sider-header-white.img-responsive, .logo-sider-header.img-responsive {
    height: 30px;
    position: absolute;
    margin-top: 6px;
    margin-left: -2px;
  }

  .logo-sider-header-white.img-responsive, .logo-sider-header.img-responsive {
    max-width: inherit;
  }

  .logo-gerdau{
    display: block !important;
    width: 100px;
    height: 30px;
  }
}

@media only screen and (max-width:544px){
  .logo-sider{
      width: 210px;
      height: 44px;
      margin-left: 0px !important;
  }

  .logo-gerdau{
      width: 100px;
      height: 30px;
  }
}

.logo-corsa{
  width: 240px;
  margin-left: 0px !important;
}
