/* ==========================================================================
	Global Settings
========================================================================== */

/*
* Boxsizing set to border box http://css-tricks.com/box-sizing/
*/

*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection rule sets have to be separate.
* Customize the background color to match your design.
*/

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
* Body settings, change it as required
*/

body { font-family:'roboto', Arial, Helvetica, sans-serif; font-size: 1em; line-height: 1.4; overflow-x:hidden; background:#ffffff; }


/*
* Headings
*/

h1, h2, h3, h4, h5, h6 { font-family:'roboto', Arial, Helvetica, sans-serif; font-weight:bold; color:#004c90; text-rendering: optimizeLegibility; margin-top:0px; margin-bottom:20px; }
h1 { font-size:24px;}
h2 { font-size:22px;}
h3 { font-size: 20px; font-weight: bold;  margin-bottom: 20px; color: #414042; }
h4 { font-size:18px;}
h5 { font-size:16px; margin-bottom:15px; line-height:21px;}
h6 { font-size:14px; margin-bottom:15px;}
p { font-size:20px; line-height:28px; color:#434343; margin-bottom:25px;}
p a { color:#007dc5;}
p a:hover, p a:focus { color:#007dc5;}

/*
* Links
*/

a { color: #007dc5; text-decoration: none; line-height: inherit; }
a:hover { /*color: #2795b6;*/ color: #007dc5; text-decoration:none; }
a:focus { color: #007dc5; outline: none; }
p a, p a:visited { line-height: inherit; }


/*
* A better looking default horizontal rule
*/

hr { display: block; height: 1px; border: 0; border-top: 1px solid #dadada; margin:20px 0; padding: 0; position:relative; }


/*
* Remove the gap between images and the bottom of their containers: h5bp.com/i/440
*/
img {
    vertical-align: middle; max-width: 100%; height: auto; -ms-interpolation-mode: bicubic;
}


/*
* Remove default fieldset styles.
*/

fieldset { border: 0; margin: 0; padding: 0; }


/*
* Allow only vertical resizing of textareas.
*/

textarea {
    resize: vertical;
}


/* ==========================================================================
	Helper classes
========================================================================== */

/*
* Floats
*/

.left { float: left; }

.right { float: right; }


/*
* Text Alignment
*/

.text-left { text-align: left; }

.text-right { text-align: right; }

.text-center { text-align: center; }


/*
* Image Alignment
*/

img.alignleft { float:left; margin:0 10px 10px 0; display: inline;}

img.alignright { float:right; margin:0 0px 10px 10px; display: inline;}

img.aligncenter { display:block; margin-left:auto; margin-right:auto; margin-bottom:10px;}


/*
* Image replacement
*/

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
* Hide from both screenreaders and browsers: h5bp.com/u
*/

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
* Hide only visually, but have it available for screenreaders: h5bp.com/v
*/

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

/*
* Extends the .visuallyhidden class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
*/

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
* Hide visually and from screenreaders, but maintain layout
*/

.invisible {
    visibility: hidden;
}

/*
* Clearfix: contain floats
*/

/*
* More semantic version as described in http://css-tricks.com/snippets/css/clear-fix/
*/
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/*
* overflow method for clearing floats
*/
.floatbox { overflow:hidden; }

/*
* older method of adding empty tags for clearing
*/
.clear { clear: both; height:1px; line-height:1px; }


/*
* Chromeframe
*/
.chromeframe { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; }

/*
* Other
*/


/*
* Fonts
*/


@font-face {
    font-family: 'roboto';
    src: url('../font/roboto-bold_0-webfont.eot');
    src: url('../font/roboto-bold_0-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/roboto-bold_0-webfont.woff2') format('woff2'),
         url('../font/roboto-bold_0-webfont.woff') format('woff'),
         url('../font/roboto-bold_0-webfont.ttf') format('truetype'),
         url('../font/roboto-bold_0-webfont.svg#robotobold') format('svg');
    font-weight: bold;
    font-style: normal;

}

@font-face {
    font-family: 'roboto';
    src: url('../font/roboto-italic_0-webfont.eot');
    src: url('../font/roboto-italic_0-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/roboto-italic_0-webfont.woff2') format('woff2'),
         url('../font/roboto-italic_0-webfont.woff') format('woff'),
         url('../font/roboto-italic_0-webfont.ttf') format('truetype'),
         url('../font/roboto-italic_0-webfont.svg#robotoitalic') format('svg');
    font-weight: normal;
    font-style: italic;

}

@font-face {
    font-family: 'roboto';
    src: url('../font/roboto-light_0-webfont.eot');
    src: url('../font/roboto-light_0-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/roboto-light_0-webfont.woff2') format('woff2'),
         url('../font/roboto-light_0-webfont.woff') format('woff'),
         url('../font/roboto-light_0-webfont.ttf') format('truetype'),
         url('../font/roboto-light_0-webfont.svg#robotolight') format('svg');
    font-weight: 200;
    font-style: normal;

}

@font-face {
    font-family: 'roboto';
    src: url('../font/roboto-medium_0-webfont.eot');
    src: url('../font/roboto-medium_0-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/roboto-medium_0-webfont.woff2') format('woff2'),
         url('../font/roboto-medium_0-webfont.woff') format('woff'),
         url('../font/roboto-medium_0-webfont.ttf') format('truetype'),
         url('../font/roboto-medium_0-webfont.svg#robotomedium') format('svg');
    font-weight: 500;
    font-style: normal;

}

@font-face {
    font-family: 'roboto';
    src: url('../font/roboto-regular_0-webfont.eot');
    src: url('../font/roboto-regular_0-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/roboto-regular_0-webfont.woff2') format('woff2'),
         url('../font/roboto-regular_0-webfont.woff') format('woff'),
         url('../font/roboto-regular_0-webfont.ttf') format('truetype'),
         url('../font/roboto-regular_0-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* ==========================================================================
	Layout
========================================================================== */

/* Container ---------------------- */
#container { min-width:320px;  position:relative; }
.container { max-width:1190px; width: 100%; }

/* Banner ---------------------- */
#banner img { width:100%; }

/* Content ---------------------- */
#content { padding:30px 0px; }

/* Footer ---------------------- */
#footer { padding:25px 0px; }

/* ==========================================================================
	Common Functionalities & UI Elements
========================================================================== */

/* about-us ---------------------- */
#about-us { text-align:center; }
#about-us p { margin-bottom:45px; }
#about-us a {  transition:all .5s cubic-bezier(0.19, 1, 0.22, 1) 0.2s;-webkit-transition:all .5s cubic-bezier(0.19, 1, 0.22, 1) 0.2s;-moz-transition:all .5s cubic-bezier(0.19, 1, 0.22, 1) 0.2s;-o-transition:all .5s cubic-bezier(0.19, 1, 0.22, 1) 0.2s;-ms-transition:all .5s cubic-bezier(0.19, 1, 0.22, 1) 0.2s; text-decoration:none; }
#about-us figure { width:174px; height:174px; margin:0px auto 45px auto; }
#about-us figure.figure1 { background:url(../../../../../works/web/wallmart/html/images/figure1.png) no-repeat; }
#about-us .detail:hover figure.figure1 { background:url(../../../../../works/web/wallmart/html/images/figure1-hover.png) no-repeat; }
#about-us figure.figure2 { background:url(../../../../../works/web/wallmart/html/images/figure4.png) no-repeat; }
#about-us .detail:hover figure.figure2 { background:url(../../../../../works/web/wallmart/html/images/figure4-hover.png) no-repeat; }
#about-us figure.figure3 { background:url(../../../../../works/web/wallmart/html/images/figure2.png) no-repeat; }
#about-us .detail:hover figure.figure3 { background:url(../../../../../works/web/wallmart/html/images/figure2-hover.png) no-repeat; }
#about-us figure.figure4 { background:url(../../../../../works/web/wallmart/html/images/figure3.png) no-repeat; }
#about-us .detail:hover figure.figure4 { background:url(../../../../../works/web/wallmart/html/images/figure3-hover.png) no-repeat; }
#about-us h3 { font-size:24px; color:#007dc5; margin-bottom:10px; font-weight:200; }
#about-us .detail p  { font-size:13px; line-height:20px; }
#about-us .detail p strong { font-size:16px; }

/* Sociable ---------------------- */
.sociable { text-align:center; padding-top:10px;}
.sociable ul { margin:0px; padding:0px; list-style-type:none; }
.sociable ul li { display:inline-block; margin:0px 20px; }

/* Heading1 ---------------------- */
.heading1 { font-size:32px; font-weight:normal; text-align:center;  margin-bottom:25px; color:#fff; position:relative; }
.heading1:after,.heading1:before { content:""; width:50%; height:3px; position:absolute; z-index:12; display:block; background:#004c91;  }
.heading1:after { right:0px; top:0px; }
.heading1:before { left:0px; bottom:0px; }
.heading1 span { display:inline-block; padding:15px 25px; background:#004c91; position:relative;    }
.heading1 span:after,.heading1 span:before { content:""; width:39px; height:65px; position:absolute;top:0px; z-index:10; }
.heading1 span:after { background:url(../../../../../works/web/wallmart/html/images/heding1-right.jpg) no-repeat;right:-39px; }
.heading1 span:before { background:url(../../../../../works/web/wallmart/html/images/heding1-left.jpg) no-repeat; left:-39px; }

.heading1.orange:after,.heading1.orange:before { background:#f37321; }
.heading1.orange span { background:#f37321; }
.heading1.orange span:after { background:url(../../../../../works/web/wallmart/html/images/heding1-right-orange.jpg) no-repeat;right:-39px; }
.heading1.orange span:before { background:url(../../../../../works/web/wallmart/html/images/heding1-left-orange.jpg) no-repeat; left:-39px; }

.heading1.yellow:after,.heading1.yellow:before { background:#ffc222; }
.heading1.yellow span { background:#ffc222; }
.heading1.yellow span:after { background:url(../../../../../works/web/wallmart/html/images/heding1-right-yellow.jpg) no-repeat;right:-39px; }
.heading1.yellow span:before { background:url(../../../../../works/web/wallmart/html/images/heding1-left-yellow.jpg) no-repeat; left:-39px; }

@media (max-width:479px) {
	/*--- Global Search Form  --- */
	 #global-search-form { right:-480px;}
}