/*------------------------------------------------------------------
[Master Stylesheet]

Project:		All Action Wear
Version:		1.0
Created:		2015
-------------------------------------------------------------------*/

@import url('http://fonts.googleapis.com/css?family=Exo:400,500,600,700,800,900,600italic,400italic,900italic,800italic,500italic,700italic|Open+Sans');
@import url('icons.css');
/*------------------------------------------------------------------
[Table of contents]

1. Body and Typography
2. Header and Logo
3. Top Navigation
4. Banner
5. Contact Block
6. Footer
7. Products
8. Category
9. Product Single Page
10. Side Navigation
11. Buttons
12. Form Elements
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
[1. Body and Typography]
-------------------------------------------------------------------*/
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; padding:0; margin:0; }
body { font-family:"Exo", Sans-serif, Arial; font-size:14px; color:#ffffff; line-height:22px; padding:102px 0 0 0; margin:0; background:url(../images/background.jpg) no-repeat top left #000000 fixed; }
html { min-height:100%; }
a img { border:none; outline:none; }
a, a:before, a:after, a *, button, button:before, button:after, button *, input[type='submit'], input[type='submit'] *, input[type='button'], input[type='button'] *, input[type='checkbox'] + label { cursor:pointer; outline:none; border:none; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; }
a { text-decoration:none; }
ul, ul li { margin:0; padding:0; list-style:none; }
section { font-size:13px; line-height:20px; color:#F8E5D2; padding:50px 0 55px 0; }
h2 { font-weight:500; color:#ffffff; font-size:18px; line-height:26px; font-style:italic; margin:0 0 28px 0; }
h2 strong { font-weight:700; color:#4693BE; }
.page, .navigation { width:1024px; margin:0 auto; }
.page:after { content:""; display:block; width:100%; clear:both; height:0; }
section .page { width:985px; }
section h1 { color:#ffffff; font-size:24px; font-weight:700; font-style:italic; margin:0 0 15px 0; padding:12px; text-transform:uppercase; text-shadow:3px 3px 3px #000000; background:url(../images/heading.png) no-repeat top left; }
article h1 { font-size:30px; margin:0 0 15px 0; padding:9px 12px 9px 12px; }
.inner, .outer { width:100%; height:100%; display:table; vertical-align:middle; }
.inner { display:table-cell; }


/*------------------------------------------------------------------
[2. Header and Logo]
-------------------------------------------------------------------*/
header { background:url(../images/pattern-1.jpg) repeat-x top center; position:fixed; z-index:10; left:0; top:0; width:100%; }
header:after { display:block; width:100%; height:15px; background:url(../images/gradient-top.png) repeat-x top left; content:""; position:absolute; left:0; top:100%; }
header .logo img { display:block; }


/*------------------------------------------------------------------
[3. Top Navigation]
-------------------------------------------------------------------*/
.navigation { position:absolute; left:50%; margin-left:-512px; bottom:0; text-align:right; }
.navigation > ul { display:inline-block; }
.navigation a { text-transform:uppercase; color:#ffffff; font-size:13px; padding:10px 15px; font-weight:600; }
.navigation .current-menu-item > a, .navigation a:hover, .navigation li .active { color:#4692BE; }
.navigation li { float:left; }
.navigation ul div { position:fixed; z-index:9; left:0; top:102px; width:100%; padding:35px 0 45px 0; background:url(../images/gradient-top.png) repeat-x top left, url(../images/pattern-2.jpg) repeat top left; }
.navigation ul div:after { display:block; width:100%; height:15px; background:url(../images/gradient-top.png) repeat-x top left; content:""; position:absolute; left:0; top:100%; }
.navigation ul ul li { width:33%; text-align:left; }
.navigation ul ul a { font-size:12px; position:relative; padding:0 0 0 10px; display:inline-block; }
.navigation ul ul a:before { position:absolute; left:0; content:"-"; top:-1px; }
.navigation ul div ul { width:880px; padding:0 34px 0 110px; margin:0 auto; }


/*------------------------------------------------------------------
[4. Banner]
-------------------------------------------------------------------*/
figure { background:url(../images/background2.jpg) no-repeat top center #000000; }
figure .page { height:448px; position:relative; }
figure h1 { margin:0; padding:0 130px 23px 0; position:absolute; bottom:0; right:0; text-transform:uppercase; font-style:italic; font-weight:800; color:#ffffff; font-size:40px; line-height:37px; text-align:right; text-shadow:4px 4px 4px rgba(0,0,0,0.65); }
figure h1 small { font-size:30px; }
figure h1 div { display:inline; }


/*------------------------------------------------------------------
[5. Contact Block]
-------------------------------------------------------------------*/
#contact { background-color:#080403; padding:50px 0 60px 0; font-size:13px; line-height:15px; font-weight:500; color:#8C8C8C; }
#contact .page { width:650px; padding-left:85px; padding-right:250px; }
#contact .column { width:50%; float:left; text-align:right; }
#contact h6 { text-transform:uppercase; font-size:11px; margin:0 0 10px 0; padding:0; font-weight:500; }
#contact h4 { font-size:24px; line-height:26px; font-weight:600; margin:0 0 45px 0; padding:0; }
#contact h5 { font-size:14px; font-weight:600; margin:0 0 55px 0; padding:0; }
#contact a { color:#8C8C8C; font-size:15px; font-weight:600; }
#contact em { font-size:12px; font-weight:500; }
#contact a:hover { color:#4794BE; }
#contact td { vertical-align:top; }
#contact tr td:first-child { padding-right:20px; border-right:solid 1px #393635; }
#contact span { font-size:16px; }
#contact .icon-map-marker, #contact .icon-fax { font-size:18px; }
#contact .icon-telephone { font-size:20px; }


/*------------------------------------------------------------------
[6. Footer]
-------------------------------------------------------------------*/
footer { padding:30px 0 30px 0; color:#8C8C8C; font-size:12px; font-family:"Open Sans"; font-weight:normal; }
.footer-right { float:right; margin-top:-5px; }
.footer-right img { display:block; }
footer span div { display:inline-block; }


/*------------------------------------------------------------------
[7. Products]
-------------------------------------------------------------------*/
#products.featured { background:url(../images/featured.jpg) repeat top left; padding:25px; position:relative; }
#products.featured:before { background:url(../images/shade.png) no-repeat top center, url(../images/shade.png) no-repeat bottom center; z-index:-1; position:absolute; content:""; width:100%; height:100%; padding:9px 0 14px 0; top:-9px; left:0; }
#products:after { content:""; display:block; width:100%; clear:both; height:0; }
.products li { float:left; margin-right:2%; width:32%; margin-top:20px; }
.products li:first-child, .products li:nth-child(999n+2), .products li:nth-child(999n+3) { margin-top:0; }
.products li:nth-child(3n+3) { margin-right:0; }
.products img, .preview img { display:block; width:100%; height:auto; }
.products a, .preview a { display:block; color:#ffffff; font-size:18px; text-transform:uppercase; font-weight:600; padding:18px 18px 16px 18px; position:relative; }
.products a span, .products a, .preview a span, .preview a { background-color:#4794BE; }
.products a span, .preview a span { display:inline-block; padding-right:15px; position:relative; z-index:2; }
.products a:after, .preview a:after { font-family:"all-action-wear"; font-size:24px; line-height:52px; content:"\e001"; text-align:center; display:block; width:60px; height:100%; top:0; right:0; position:absolute; background-color:#386780; }
#products.featured a:before { margin-top:-1px; }
.products a:before, .preview a:before { content:""; display:block; position:absolute; top:50%; width:79%; margin-left:18px; height:1px; background-color:#ffffff; z-index:1; margin-top:-2px; }
.preview a:before { width:76%; margin-top:-2px; }
.products a:hover, .products a:hover span, .preview a:hover, .preview a:hover span { background-color:#512D1F; }
.products a:hover:after, .preview a:hover:after { background-color:#2B190F; }


/*------------------------------------------------------------------
[8. Category]
-------------------------------------------------------------------*/
.category { padding:0; margin:0; }
.category .page { background-color:#212121; padding:50px 25px; width:974px; position:relative; }
.category .page:before { background:url(../images/shade-2.png) no-repeat bottom center; z-index:-1; position:absolute; content:""; width:100%; height:100%; padding:0 0 7px 0; left:0; bottom:-7px; }


/*------------------------------------------------------------------
[9. Product Single Page]
-------------------------------------------------------------------*/
.post { padding:0; margin:0; }
.post .page { background-color:#212121; padding:0 24px 0 0; width:1000px; position:relative; }
.post .page:before { background:url(../images/shade-2.png) no-repeat bottom center; z-index:-1; position:absolute; content:""; width:100%; height:100%; padding:0 0 7px 0; left:0; bottom:-7px; }
.post article { float:right; width:72%; margin-top:35px; padding-bottom:35px; position:relative; }
.post article p { margin:0 0 20px 0; color:#F8E5D2; font-size:13px; line-height:18px; }
.post aside { background:url(../images/aside.jpg) repeat top left; float:left; width:24%; }
.post h4 { color:#4692BE; text-transform:uppercase; font-weight:500; padding:0; margin:0; font-size:14px; }
.post h1 { display:inline-block; min-width:330px; }
.post .preview { float:left; width:35%; margin-right:30px; margin-bottom:25px; }
.post .more { position:absolute; right:20px; bottom:20px; }


/*------------------------------------------------------------------
[10. Side Navigation]
-------------------------------------------------------------------*/
aside { padding-top:15px; padding-bottom:70px; position:relative; }
aside:before { position:absolute; top:0; left:100%; width:11px; content:""; display:block; height:100%; background:url(../images/aside-gradient.png) repeat-y top left; }
aside a { font-size:12px; line-height:14px; color:#ffffff; font-weight:500; padding:4px 10px 4px 30px; text-transform:uppercase; position:relative; display:block; }
aside a:before { content:"-"; position:absolute; left:20px; top:3px; }
aside a:hover, aside a.active { background-color:#4794BE; }
aside ul div { background-color:rgba(70,147,190,0.3); border-bottom:solid 1px #3A7797; padding:12px 20px 12px 45px; margin-bottom:10px; display:none; }
aside ul ul { margin:0; padding:0; }
aside ul ul a { text-transform:none; padding:0; display:inline-block; }
aside ul ul a:before { display:none; }
aside ul ul a:hover { color:#5DC5FF; background-color:transparent; }


/*------------------------------------------------------------------
[11. Buttons]
-------------------------------------------------------------------*/
.button { display:inline-block; border:solid 1px #4D4D4D; padding:12px 20px; font-weight:600; color:#8C8C8C; text-transform:uppercase; font-size:11px; }
.button:after { content:"\e001"; font-family:"all-action-wear"; font-size:17px; color:#212121; text-shadow:-1px -1px 0 #606060, 1px -1px 0 #606060, -1px 1px 0 #606060, 1px 1px 0 #606060; float:right; margin-left:15px; }
.button:hover { color:#ffffff; background-color:#4794BE; border-color:#4794BE; }
.button:hover:after { color:#ffffff; text-shadow:-1px -1px 0 #4794BE, 1px -1px 0 #4794BE, -1px 1px 0 #4794BE, 1px 1px 0 #4794BE; }
.readmore { background-color:#4794BE; padding:15px 25px; text-transform:uppercase; color:#ffffff; font-size:12px; margin-top:10px; }
.readmore:hover { background-color:#512D1F; }


/*------------------------------------------------------------------
[12. Form Elements]
-------------------------------------------------------------------*/
input[type='text'] { border:solid 1px #cccccc; width:94%; padding:10px 3%; margin-bottom:10px; }
.input-left { float:left; width:62%!important; }
.input-right { float:right; width:23%!important; margin-top:-22px; }