/*************** TOP SECTION*********************/
.top1{

border-bottom: 0px solid #9E2872;

-webkit-box-shadow: 0px 1px 3px 0px rgba(112,111,112,0.87);

-moz-box-shadow: 0px 1px 3px 0px rgba(112,111,112,0.87);

box-shadow: 0px 1px 3px 0px rgba(112,111,112,0.87);

text-align: center;

font-size: 1.0vw;

font-family: 'Open Sans', Arial;

padding: 0;

background: #084d69;

}
.top1 span{

padding-left: 20px;

color: #c1bfbf;

}
.top1 a:hover{

text-decoration:none;

color: #b8bcbf;

}

.top2{
background: #f3f0ec;
border:0px solid red; 

border-bottom: 1px solid #e2e0e0;

padding-top: 5px;

padding-bottom:5px;

 margin-top: 0px;     			  /* IT Sevice Zone: Static top3 : Henry hide to see what happend..*/
/* Henry important note: 
above setting is work for any pages other than home page
for home page, please go to /cms/slideshow_wow/engine1/style.css > search for .top2 (padding:, margin) to see control top2 in home page 
*/


}

	

.top3{
border-bottom: 0px solid #d6d3d3;
/* background: #ffffff; */
/*height:auto;		*/			/* Henry: to fix issue with big gray gap, Icon Menu responsive*//* position:fixed !important; */   		/* henry unhide to make top frozen */
/* width: 100%; */
/* top: 0px;  */   /* henry hide:  this is bad code because it make div become absolute. */
z-index: 999999; /*IT Service Zone: responsive issue menu div fixed*/
padding: 1.5% 60px;
}

.top3.fixed {
    position: fixed;
    z-index:1;
    top: 0px; 
    right:0;
    left:0;
    background: #ffffffcf;
	/* henry code below is for animation effect - start */
  -webkit-animation-name: fixed;
  animation-name: fixed;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }


  @-webkit-keyframes fixed {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes fixed {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
	/* code below is for animation effect - EOF */
}
.top3-3{
float: right;
margin: 0px;
color: #326603;
text-align: center;
font-family: "Open Sans", Arial;
font-weight: bold;
position: relative;
border: 0px solid #c5c5c5;
border-radius: 5px;
padding:10px;
}
.top3-1{

}
.top3-1{

}
/* slider bg */

.top4{
border:0px solid red; 
border-bottom: 0px solid gray;
}

/********* inside  for top 1 *******************/

/* box generated from  http://the-echoplex.net/flexyboxes/ */
.flex-container {

    display: -webkit-box; /*IT Service Zone: adjustment for safari browser*/

    -webkit-box-pack: justify; /*IT Service Zone: adjustment for safari browser*/

    -webkit-box-align: center; /*IT Service Zone: adjustment for safari browser*/

    display: -ms-flexbox;

    display: -webkit-flex;

    display: flex;

    -webkit-flex-direction: row;

    -ms-flex-direction: row;

    flex-direction: row;

    -webkit-flex-wrap: nowrap;

    -ms-flex-wrap: nowrap;

    flex-wrap: nowrap;

    -webkit-justify-content: space-between;

    -ms-flex-pack: justify;

    justify-content: space-between;

    -webkit-align-content: stretch;

    -ms-flex-line-pack: stretch;

    align-content: stretch;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;

    }.nth-child(1) {

    -webkit-order: 0;

    -ms-flex-order: 0;

    order: 0;

    -webkit-flex: 0 1 auto;

    -ms-flex: 0 1 auto;

    flex: 0 1 auto;

    -webkit-align-self: auto;

    -ms-flex-item-align: auto;

    align-self: auto;

    }
.nth-child(2) {

    -webkit-order: 0;

    -ms-flex-order: 0;

    order: 0;

    -webkit-flex: 0 1 auto;

    -ms-flex: 0 1 auto;

    flex: 0 1 auto;

    -webkit-align-self: auto;

    -ms-flex-item-align: auto;

    align-self: auto;

    }
.nth-child(3) {

    -webkit-order: 0;

    -ms-flex-order: 0;

    order: 0;

    -webkit-flex: 0 1 auto;

    -ms-flex: 0 1 auto;

    flex: 0 1 auto;

    -webkit-align-self: auto;

    -ms-flex-item-align: auto;

    align-self: auto;

    }

     

/********* inside  for top 1 - EOF *******************/

#logo_bottom a , #logo_bottom-scroll a{

    background: url(../../../../images/logo_bg.png) no-repeat;
    width: 342px;
    height: 100px;
    text-indent: -1000px;
    overflow: hidden;
    display: block;
}

/************************ search box start ******************/
.search_form
{
}
.adv_search
{
}
.search_box
{
  width:100%;
  display: none;
}
/************************ search box end ******************/
.tel, .tel a, .tel:visited, .tel:visited a  {

            font-weight: bold;

           /* text-shadow: 1px 2px 3px #666; */

            padding: 0px 0px;

            line-height: 150%;

			margin-top:10px;            

}
.mobile-logo{visibility: visible;

             position: relative;

             padding-left: 0px;

}

.mobile-search{display: none}


.mobile-logo-top{display: none}

.category_nav{ padding-left:9px}
span.mycart a:nth-child(3){
    /*display: none*/
}

span.mycart {
    line-height: 18px;
    text-align: right;
}

span.mycart a{
    line-height: 18px;
}

span.mycart .fontawesome-icon-list{

    display: none;

}

span.mycart span.item-mobile{

    display: none;

}

span.mycart span.item-mobile + a{

    padding-left: 10px !important;

}

span.mycart a.mycart{
    position: relative;
}

span.mycart a.mycart:before{

    /*content: "\f290";*/

    color: #ad048b;

    position: absolute;

    left: -36px;

    display: inline-block;

    font: normal normal normal 28px/1 FontAwesome;

    text-rendering: auto;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    margin-top: -4px;

}

span.mycart span.items{display: inline-block;padding-left: 1px;}

span.mycart span.items + a {text-decoration: underline;display: block;text-align: right}

span.checkout{display: none;}

div.mycart{}

.flex-item.top-nav .name_group{

    padding-right: 30px;

}

.flex-item.top-nav .logout{

    padding-right: 30px;

}
.mobile-logo-scroll{display: none;}
/*ITSZ: menu customization for style3 START*/

/*

div#menu span {

    padding: 5px 15px 6px 15px;

    font: normal 1.0 vw 'Open Sans',Arial,FreeSans,sans-serif;

}

*/

/*ITSZ: menu customization for style3 EOF*/




/************************ Responsive Structure ****************/
/* for new/big desktop from 1200 px and bigger ....*/

@media (min-width: 1200px) and (max-width: 3000px) {
.top2 {font-size: 16px}
}
/* for medium/old desktop screen from 1024 to 1200px */

@media (min-width: 768px) and (max-width: 1200px) {
   .top3{padding: 0px 40px}
   .top2 {font-size: 13px}

}

@media (max-width: 1200px){
.top3-3 { padding-left: 13px;  padding-bottom: 10px;}
}

/* for desktop/ipad screen from 768 to ~ */
@media (min-width: 768px) {    .column_center{
        margin-top: 0 !important; /*ITSZ: override inline margin-top by 0 in desktop*/
	 padding-bottom: 60px; 

   }
}
/* for small view such as iphone, samsung : less than 768 */

@media (min-width: 0px) and (max-width: 767px) {

.flex-container {

    -webkit-flex-direction: column;

    -ms-flex-direction: column;

    flex-direction: column;

    }

.flex-item{width:100%}


    .top3{ position: relative; 

    height: 60px; 
    padding: 0 10px;

    }

    .top2{background: #FFF;}

	.top1{font-size: 12px; padding: 0; line-height: 120%}
	.top1 span {padding-left: 5px; }
/*IT Service Zone: kill white space before slider in homepage only START*/

.top2 {
	padding-top: 0px !important;
	padding-bottom: 0px !important;
    margin-top: 0 !important;

}

/*IT Service Zone: space before slider in homepage only EOF*/    /*IT Service Zone: EOF*/
    /*IT Service Zone: 12/08/2016 header START*/

    div.breadcrumbs, div.category_desc{

        display: none;

    }

    .column_center > .pageHeading{

        font-size: 30px;

        margin-bottom: 10px;

    }

    .mobile-paging{display: none;}

    .mobile-logo-top{

        float: left;

        width: 35px;

        height: 45px;

        display: none;

    }

    .mobile-logo-top img {

        width: 22px;

        /* display: inline-block; */

        vertical-align: middle;

        padding-top: 10px;

        padding-right: 13px;

    }

    .extra{

        color: #7d7878;

        padding: 0 0 0 15px;

    }

    /*IT Service Zone: 10/08/2016 header EOF*/

    /*ITSZ: logo on top when scroll START*/

    .mobile-logo-scroll{

        display: none;

        position: relative;

    }

    .mobile-logo-scroll.scroll{display: block;}

    /*.flex-item.mobile-logo.scroll{display: none;}*/

    .logo-content{

        padding: 0 0 0 0;

        top: 0px;				/* henry move logo down a little bit */

        position: absolute;

        display: none;

        left: 0;

        box-sizing: border-box;

        width: auto;			/* value 50% if you want to make it center */	

        margin-left: 30px;		/* value 30% if you want to make it center */

        z-index: 1;

    }

    /*ITSZ: logo on top when scroll EOF*/

    label.minimal-menu-button:before {

        left: 5px;

        border-bottom: 4px solid #0c9805;

        border-top: 13px double #0c9805;

    }

    label.minimal-menu-button {

        height: auto;

    }
	.tel, .tel a, .tel:visited, .tel:visited a  {font-size: 14px}

}

@media (min-width: 0px) and (max-width: 380px) {

    .cart-mobile{padding-left: 10px;}





}/************************ Responsive Structure EOF ****************/