/*
Author:         Robby
Author URL:     http://www.robbyalbright.com/
Version:      
Project:
Description:
*/

/*
---------------------------------------------------------------------------------------
TABLE OF CONTENTS

-- GLOBAL STYLING
-STUCTURE
-CONTENT > anchors, text, images, video, & sound
-CONTROLS


-- LOCAL STYLING
-HOME PAGE
-ERROR 404
-SECTIONS
-ARTICLES

---------------------------------------------------------------------------------------
*/


/*---------------------------------------------------------------------------------------
--- GLOBAL STYLING
---------------------------------------------------------------------------------------*/

@font-face {
font-family: Interstate;
src:  url('files/interstate.ttf'),
  url('/files/interstate.otf'),
  url('/files/interstate.eot');
}

@font-face {
font-family: Frys;
src:  url('/files/frys.ttf'),
  url('/files/frys.eot');
}


/* STRUCTURE */
html{ }
body{ overflow:visible; margin:0;
padding:0;
height:100%;
}

#main{  min-height: 100%;/* equal to footer height */margin-bottom: -40px; }
#main:after{ content: ""; display: block; }

#footer, .page-wrap:after { height: 40px; }

#main{ position:absolute; left:300px; width: 740px; height:auto; padding-bottom:40px;}

#main2{ position:absolute; left:300px; width: 740px; height:auto; padding-bottom:40px; margin-top: -100px;}

#main3{ top:117px; width:580px; position:relative;}

#main4{ position:absolute; left:256px; width: 100%; height:auto; padding-bottom:40px;}


#header{ }

#logo { }

#nav{ position: absolute; top: 100px; left:50px; z-index:50; text-align:center; text-transform:uppercase; }
#nav img{ margin-bottom: 20px;}
#nav ul li a{ font:11px Interstate, Helvetica, Sans-serif; line-height:22px; letter-spacing:1px; text-shadow: 0.5px 0.5px 0px #fff; -webkit-text-shadow: 0.5px 0.5px 0px #777; }
#nav ul li a:hover{ color:#5a5968;}
#nav ul li a.select{ font-size:14px; display:block; margin: 10px 0 10px 0;}
#nav li ul li{ }

#nav.dark{ position: absolute; top: 100px; left:50px; z-index:50; text-align:center; text-transform:uppercase;}
#nav.dark ul{ }
#nav.dark ul li a{ color:#fff;}
#nav.dark ul li a:hover{ color:#939695;}

#footer{ bottom: 30px; left: 40px; position:absolute; z-index:49; height:40px;}
#footer a{ letter-spacing: 1px; text-shadow: 0.5px 0.5px #fff;}
#footer a img:hover{ opacity:0.7;}

#footer.dark a{ color:#fff;}
#footer.dark a:hover{ color:#939695;}

/*------------------------------------------------------------------------------------*/


/* CONTENT */
a{ text-decoration:none; text-transform:uppercase; font:7pt Interstate, Helvetica, Sans-serif; color:#000; }
a:hover{ color:#5a5968; }
a:active{ }
a:visited{ }

address { font: 14px normal Georgia, Times New Roman, Times, serif;}

h1{ font:11pt Frys, Baskerville, Times, serif; text-transform: uppercase;}
h2{ font:9pt Frys, Baskerville, Times, serif; text-transform: uppercase;}
h3{ }
h4{ }
h5{ }
h6{ }
h1.center{ text-align: center; } 

ul, ol { list-style:none;}
dl, dt, dd { }

p { font: 14px normal Georgia, Times New Roman, Times, serif; line-height: 1.5em; }
blockquote { font-style: italic;}
blockquote:before { content: open-quote;}
blockquote:after { content: close-quote;}
.dropcap{ font-size:300%; font-weight:bold; float:left; margin:10px; }
abbr{ }
address{ }
em{ }
strong{ }
ins{ }
del{ }

img{ border:none;}

/*------------------------------------------------------------------------------------*/


/* CONTROLS */
.left{  float:left; }
.right{ float:right; }
.clear{ clear:both; }
.padding{ padding:10px; }

.center {text-align:center;}
.abso{ display: block; position: absolute; }
.full{ width: 100%; }

.top{ margin-top:10px;}
.top1{ margin-top:20px;}
.top2{ margin-top:40px;}
.top3{ margin-top:60px;}
.top4{ margin-top:80px;}
.top5{ margin-top:100px;}

.right1{ margin-left:10px;}
.right2{ margin-left:20px;}
.right3{ margin-left:40px;}
.right4{ margin-left:60px;}
.right5{ margin-left:80px;}
.right6{ margin-left:100px;}
.right7{ margin-left:120px;}
.right8{ margin-left:140px;}
.right9{ margin-left:160px;}

.left1{ margin-right:20px;}
.left2{ margin-right:40px;}
.left3{ margin-right:60px;}
.left4{ margin-right:80px;}
.left5{ margin-right:100px;}

.hide{ display:none;}
.test{ display:block; border: solid 1px red;}
/*------------------------------------------------------------------------------------*/

img.left{ margin:0 1em 1em 0; }
img.right{  margin:0 0 1em 1em; }

#content p{ margin:1.1em 0; }


/*---------------------------------------------------------------------------------------
---SECTIONAL STYLING
---------------------------------------------------------------------------------------*/

/* SEGMENT STYLING */

#footer img{ margin-left:10px; margin-top:-4px;}
.dark{ color: #fff;}

.gradient{ background: url('images/8.jpg') repeat-y;}


/* HOME */

body.dark{ background-color:#000;}
.homeLogo{ position:absolute; top:50%; left:50%; margin-left:-25px; margin-top:-27px; z-index:100;}

.bg {
                    /* Set rules to fill background */
                    min-height: 100%;
                    min-width: 1024px;
                    
                    /* Set up proportionate scaling */
                    width: 100%;
                    height: auto;
                    
                    /* Set up positioning */
                    position: fixed;
                    top: 0;
                    left: 0;
            }
            
            @media screen and (max-width: 1024px){
                    img.bg {
                            left: 50%;
                            margin-left: -512px; }
            }



/* ERROR 404 */


/* ARTICLES */

#text {
position: relative;
top: 162px;
width: 580px;
}

/* Footer */
#footer span img{ max-height:30px; width:auto;}

/*about*/

#about{ top:165px; width:580px; position:relative;}
#about p{ line-height: 1.5em;}
#about a{ font: 11px normal Georgia, Times New Roman, Times, serif; color:#585858;}
#about a:hover{ color:#939695;}

/*collections*/

#collection{ top:108px; width:760px; position:relative; }
#collection li{ background: url('images/collectSq.png'); width:235px; height:235px; text-align:center; display: block; overflow: hidden; float: left;}
#collection li:hover{ cursor:pointer; background: url('images/collectSq2.png');}

#collection li a{ font:10pt Frys, Baskerville, Times, serif; text-transform: uppercase; color:#fff; display:block; letter-spacing: .18em; margin-top:110px; }
#collection li a:hover{ color: #6b6b6b;}

#collection2{ top:130px; width:740px; position:relative; }
.collectionPic {height:176px; width:176px; float:left; }
.collectionPic img{ z-index:1; float:left; position:absolute; height:176px; width:176px;}
.collectionPic span img{ z-index:100; float:left; position:absolute;}
.collectionPic > span{ width:176px; height:176px;}
.collectionPic > span:hover{ cursor:pointer;}

/*collection articles*/

#collection .galleryImg { float:left; max-height: 450px;}
.galleryText { float:left; width: 450px; margin-left: 0; text-align: left; clear: both;}
.galleryText a{ color:#585858; }
.galleryText img{ max-width:450px; height: auto;}
#collection p { font: 14px normal Georgia, Times New Roman, Times, serif;}


/*shop*/

#shop{ top:130px; width:740px; position:relative; }
#shop img{}
#ecwid_loading_indicator {
background: url(http://www.hannahwarner.com/site/images/ajax-loader.gif) center center no-repeat !important;
}
.ecwid-productBrowser-auth-signInLink{ font-size: 8pt!important; }



/*press*/

#press{ top:112px; left:240px; width:740px;  height:545px; position:relative; }

.ad-gallery {
width: 650px;
}
.ad-gallery .ad-image-wrapper {
height: 350px;
}
.ad-gallery .ad-back {
left: -20px;
width: 30px;
top: 50px;
background: url('images/ad_prev.png') no-repeat;
}
.ad-gallery .ad-forward {
right: -138px;
width: 34px;
top: 50px;
background: url('images/ad_next.png') no-repeat;
}

.ad-gallery .ad-image-wrapper .ad-prev { visibility: hidden;}
.ad-gallery .ad-image-wrapper .ad-next { visibility: hidden;}



/*stockists*/

.stock h2{ font: 14px normal Georgia,Times New Roman,Times,serif; margin-bottom:16px; text-transform: uppercase;}

.stock h3{ font: 12px normal Georgia,Times New Roman,Times,serif; margin-bottom:16px; text-transform: uppercase;}
.stock h4{ font: 12px normal Georgia,Times New Roman,Times,serif; margin-bottom:16px; text-transform: uppercase;}

.stock p { margin-top: -14px; font-size: 14px; color:#585858;}
#about.stock p a { text-decoration: none; text-transform: none; font-size: 14px;}

.stockLeft { float:left; height:100%; margin-right:100px;}
.stockRight { float:left; height:100%;}

/*lookbook*/

#main3 p {  display:block; float:left; width:100%;}
#main3 a{ color:#585858; margin-top: 10px; display:block; margin-bottom:10px;}
#main3 img{ width:600px; }
#main3 span{ margin-bottom: 20px; }


/*video & collaborations*/
#about2{ top:157px; width:580px; position:relative;}


/*contact*/

#text a { color:#585858; margin-top:-10px; display:block; margin-bottom:10px;}



/*collaborations*/

#collaboration{ top:108px; width:740px; position:relative; }
#collaboration img{ }
#collaboration div span{ width: 190px; height:138px; overflow: hidden;}
#collaboration div { width:650px; margin-right: 22px; }
#collaboration div a, p{ width:650px; }


/*grid gallery lightbox*/

.grid-item { width: 300px; height: 200px; margin:10px; display: flex; justify-content: center; align-items: center; overflow: hidden; }
.grid-item img {
/*    margin: 0 auto;
top: -45%;
position: absolute;
left: -10%;*/
max-width: 80%;
height: auto;
}
.grid-item:hover{ cursor: pointer; }
.grid-item--width2 { width: 400px; }
div#gallery-grid { margin-top:110px; margin-left: 20px; }
div#grid-main{ width:80%; position: absolute; left: 256px; height: auto; padding-bottom: 40px}

.gallery-2 div#grid-main{ width: 64%; max-width: 700px; left: 25%;}

/*swiper gallery*/

.swiper-container {
    width: 100%;
    height: 100%;
    margin: 20px auto;
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: transparent;
    /*width: 250px;*/
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.swiper-button-prev.swiper-button-black,
.swiper-container-rtl .swiper-button-next.swiper-button-black {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-next.swiper-button-black,
.swiper-container-rtl .swiper-button-prev.swiper-button-black {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-next.swiper-button-black.swiper-button-disabled, .swiper-button-prev.swiper-button-black.swiper-button-disabled{ opacity:.15; }


/*featherlight*/

@media all {
html.with-featherlight {
/* disable global scrolling when featherlights are visible */
overflow: hidden;
}

.featherlight {
display: none;

/* dimensions: spanning the background from edge to edge */
position:fixed;
top: 0; right: 0; bottom: 0; left: 0;
z-index: 2147483647; /* z-index needs to be >= elements on the site. */

/* position: centering content */
text-align: center;

/* insures that the ::before pseudo element doesn't force wrap with fixed width content; */
white-space: nowrap;

/* styling */
cursor: pointer;
background: #333;
/* IE8 "hack" for nested featherlights */
background: rgba(0, 0, 0, 0);
}

/* support for nested featherlights. Does not work in IE8 (use JS to fix) */
.featherlight:last-of-type {
background: rgba(0, 0, 0, 0.8);
}

.featherlight:before {
/* position: trick to center content vertically */
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}

.featherlight .featherlight-content {
/* make content container for positioned elements (close button) */
position: relative;

/* position: centering vertical and horizontal */
text-align: left;
vertical-align: middle;
display: inline-block;

/* dimensions: cut off images */
overflow: auto;
padding: 25px 25px 0;
border-bottom: 25px solid transparent;

/* dimensions: handling large content */
margin-left: 5%;
margin-right: 5%;
max-height: 95%;

/* styling */
background: #fff;
cursor: auto;

/* reset white-space wrapping */
white-space: normal;
}

/* contains the content */
.featherlight .featherlight-inner {
/* make sure its visible */
display: block;
}

/* don't show these though */
.featherlight script.featherlight-inner,
.featherlight link.featherlight-inner,
.featherlight style.featherlight-inner {
display: none;
}

.featherlight .featherlight-close-icon {
/* position: centering vertical and horizontal */
position: absolute;
z-index: 9999;
top: 0;
right: 0;

/* dimensions: 25px x 25px */
line-height: 25px;
width: 25px;

/* styling */
cursor: pointer;
text-align: center;
font-family: Arial, sans-serif;
background: #fff; /* Set the background in case it overlaps the content */
background: rgba(255, 255, 255, 0.3);
color: #000;
border: none;
padding: 0;
}

/* See http://stackoverflow.com/questions/16077341/how-to-reset-all-default-styles-of-the-html5-button-element */
.featherlight .featherlight-close-icon::-moz-focus-inner {
border: 0;
padding: 0;
}

.featherlight .featherlight-image {
/* styling */
width: 100%;
}


.featherlight-iframe .featherlight-content {
/* removed the border for image croping since iframe is edge to edge */
border-bottom: 0;
padding: 0;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}

.featherlight iframe {
/* styling */
border: none;
}

.featherlight * { /* See https://github.com/noelboss/featherlight/issues/42 */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
}

/* handling phones and small screens */
@media only screen and (max-width: 1024px) {
.featherlight .featherlight-content {
/* dimensions: maximize lightbox with for small screens */
margin-left: 0;
margin-right: 0;
max-height: 98%;

padding: 10px 10px 0;
border-bottom: 10px solid transparent;
}
}

/* hide non featherlight items when printing */
@media print {
@page {size: landscape}

html.with-featherlight > * > :not(.featherlight) {
display: none;
}
}



/* ------   MOBILE CALLOUTS ----------*/

@media only screen and (max-width: 1000px) { 
#nav, #nav.dark{ top:10px; left:0px; text-align: left; }
#nav li{  display: inline-block; margin-right: 6px; }
#nav li:first-child{ width:100%; }
#nav ul { padding-left:4.5%; }
#main, #main2{ position: relative; margin:0 auto; left:0; }
#collaboration div a, p{ width:100%; }
#main, #main2{ width:90%;}
#about, #collection, #shop{ width: 100%; }
#collection{ top:160px; }
#footer{display:none;}
div#grid-main{ position: relative; left:0px; width:100%;}
div#gallery-grid{ left:0px; margin-top: 182px;}
#shop{ top:200px; }
#collection .galleryImg{ width: inherit; }
div#Minicart-1{ display: none; }
.grid-item{ width: 90%; height:200px; }
.grid-item img{ width:100%; height:auto; }
#main3 { top: 180px; width: 100%;}
#main3 img{ width:100%; }
#collaboration{ top:160px; width:100%;}
#collaboration img {width: 100%;height: auto;}
.collectionPic img, .collectionPic > span, .collectionPic{ width:166px; height: 166px; }
.collab-logo{ display:none;}
}