.row-header{float: left;display: block;position: relative;width: 100%;background: #464646;border-bottom: 5px solid #ffee00;}
.row-header:after{line-height: 0;
                             left: 100% ;
                             position: absolute;
                             content: "";
                             height: 100%;
                             width: 100%;
                             top: 0px;
                             display: block;
                             background: #464646;border-bottom: 5px solid #ffee00;}
.row-header:before{position: absolute;
    content: "";
    border-bottom: 5px solid #ffee00;
    height: 100%;
    width: 100%;
    right: 100%;
    top: 0px;
    background: white;
    display: block;
    background: #464646;}
.row-header-logo{min-height: 100px;}
.header .nav__primary{margin:0 }
.header .nav__primary .sf-menu > li{float: left;border-right: 1px solid #000;}
.header .nav__primary .sf-menu > li > a{padding: 10px 35px !important;text-decoration: none;}
#topnav li > a:hover{text-decoration: none;}
/*this adds an arrow to every link*/
   #topnav li > a:after { content: '';display: inline-block;
       width: 0;
       height: 0;
       margin-left: 2px;
       vertical-align: middle;
       border-top: 4px solid;
       border-right: 4px solid transparent;
       border-left: 4px solid transparent;
       color: #FDF200; }

/*// this removes the arrow when the link is the only child*/
   #topnav li > a:only-child:after { content: ''; display: none;}
.span12 .row .span4 a,.span12 .row .span3 a{text-decoration: none;color:#fff;text-align: center;}
.span12 .row .span4 .banner-wrap:hover a,.span12 .row .span3 .banner-wrap:hover a{color: #000000;}
.span12 .row .span4 .banner-wrap{text-align: center;}
.span12 .row .span3 .banner-wrap {
    text-align: center;
}
/*.motopress-wrapper .container{overflow: hidden;}*/
/*.header{overflow: hidden;}*/
/*Responsive CSS starts from TWC*/
/* For Laptops    */
@media screen and (min-width:1025px) and (max-width:1366px){
    .row-header-logo{min-height: 100px;}
}
@media screen and (min-width:1025px) and (max-width:1200px){
    .row-header-logo{min-height: 100px;}
    .header .nav__primary .sf-menu > li > a{padding: 10px 15px !important;}
}
/* For iPad Landscape & Desktop      */
@media screen and (min-width:769px) and (max-width:1024px){
    .row-header-logo{min-height: 100px;}
    .header .nav__primary .sf-menu > li > a{padding: 10px 15px !important;}
    .span12 {
        width: 100%;
    }
    .row-header:after{line-height: 0;
        left: 100% ;
        position: absolute;
        content: "";
        height: 100%;
        width: 100%;
        top: 0px;
        display: block;
        background: #464646;border-bottom: 5px solid #ffee00;}

}
/* For iPad Portrait Only */
@media screen and (width:768px){
    .row-header-logo{min-height: 100px;}
    .header .nav__primary .sf-menu > li > a{padding: 10px 15px !important;}
    /*.span12 {*/
        /*width: 100%;*/
    /*}*/
    .container{width:768px;}

    .header .nav__primary .sf-menu > li{padding:0 !important;}
    /*Its a weired fix for fixing teh enu overflow otherwise menu is going above the boundary of page */
    .row-header:after{line-height: 0;
        left: 100% ;
        position: absolute;
        content: "";
        height: 100%;
        width: 100%;
        top: 0px;
        display: block;
        background: #464646;border-bottom: 5px solid #ffee00;}
}
/* For Android Landscape Only */
@media screen and (min-width:541px) and (max-width:767px){
    .row-header-logo{min-height: 50px;}
    .header .nav__primary .sf-menu > li > a{padding: 10px 15px !important;}
    .row-header:after{line-height: 0;
        left: 100% ;
        position: absolute;
        content: "";
        height: 100%;
        width: 100%;
        top: 0px;
        display: block;
        background: #464646;border-bottom: 5px solid #ffee00;}

}
/* For Android Portrait & iPhone Landscape    */
@media screen and (min-width:480px) and (max-width:540px){
    .row-header-logo{min-height: 50px;}
    .row-header:before{display: none !important;}
    .row-header:after{display: none !important;}
    .row-header{border-bottom: none;background: none;}
    .header .nav__primary{margin: 0 0 16px 0;}
}
/* For iPhone Portrait Only   */
@media screen and (min-width:320px) and (max-width:479px){
    .row-header-logo{min-height: 50px;}
    .row-header:before{
        display: none !important;
       }
    .row-header:after{display: none !important;}
    .row-header{border-bottom: none;background: none;}
    .header .nav__primary{margin: 0 0 16px 0;}

}