/*  
Theme Name: Elephant Journal
Theme URI: 
Description: 
Version: 1.0
Author: Notepad
Author URI: 
*/

@font-face {
	font-family: 'Bebas';
	src: url('../fonts/BEBAS___.eot');
	src: url('../fonts/BEBAS___.woff') format('woff'), 
	     url('../fonts/BEBAS___.ttf') format('truetype'), 
	     url('../fonts/BEBAS___.svg#Bebas') format('svg');
	font-weight: normal;
	font-style: normal;	
}

.row:after,
.position-stage__breadcrumb:after,
.fields:after,
.step:after,
.cr:after,
.cf:after,
.social:after,
.posts:after,
.group:after {
  content: "";
  display: table;
  clear: both;
  
}

html,
body { height: 100%; }
body { padding-bottom: 150px; }

.clear { width: 100%; height: 1px; font-size: 1px; clear: both; float:left;}

*  
{
    border: 0px;  /* IE and imgs */
    outline: 0;  /* links and stuff when you click you sometimes get an outline */
    
    /* standard pretty */
    color: #343434; 
    webkit-font-smoothing: antialiased; 
    text-rendering: optimizelegibility; 
    font-family:'Open Sans',Arial,sans-serif; 
    
    /* a better reset */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 0; margin: 0;
}

input[type=button], 
input[type=submit],
textarea {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
}

body 
{
    padding:0px; margin:0px;
    width: 100%; 
    position: relative;
    color:#222;
    background:#fff;    
    overflow-y: scroll;
    overflow-x: hidden;
}

.clear { width: 100%; font-size: 1px; height: 1px; float: left; clear: both; }

h1  
{
    color: #343434;    
    font-family: 'Bebas',sans-serif;
    font-size: 40px; line-height: 40px;
    word-spacing: 5px;
}

h3 { font-weight: normal; padding: 0px; margin: 0px; }
.intro { text-align: center; }
.intro p { margin: 0 0 30px 0; padding: 0px; }

a { color : #f30; text-decoration: none; }
a:hover { color : #eba806; text-decoration: underline; } 

li,
p { font-size: 13px; line-height: 21px; }

.error { color : #ff0000; }
label.error { display: inline-block; }
label.error:before { content : " * "; }    
input[type=text].error,
input[type=password].error,
textarea.error
{
    border: solid 1px #ff0000; 
    color: #343434;
}

.wrapper 
{ 
    position: relative; 
    min-height: calc(100% - 218px);
    height: auto !important;
    padding-bottom: 200px;     
}

h2.intro-title { font-size: 24px;  text-align: center; }
p.intro-text { font-size: 16px; line-height: 30px !important; margin-bottom: 5px; text-align: center;  }

@media all and (max-width: 520px)
{
    h2.intro-title { font-size: 21px; }
    p.intro-text { font-size: 13px; line-height: 24px !important; margin-bottom: 10px;   text-align: left; }
}

@media all and (max-width: 736px)
{
    .wrapper 
    {
        min-height: calc(100% - 187px);
    }  
}
@media all and (max-width: 612px)
{
    .wrapper 
    {
        min-height: calc(100% - 251px);
    }  
}
footer { position: absolute; bottom: 0; }
/*-----------------------------------------------------------------
    NAVIGATION
-----------------------------------------------------------------*/

header { background: #fff; width:100%; position: relative; z-index: 100; margin-bottom: 15px; }
.container { width: 100%; max-width: 1030px; margin: 0 auto; }
.row { width: 100%; padding: 0 20px; }

.topnav { z-index: 10; width: 100%; margin: 0 auto; max-width: 1030px; text-align: right; }
.topnav .button {float: right; font-size: 17px; color: #fff; margin: 10px 0 0 0; display: inline-block; width: auto; clear: both; }

.have-account
{
    width: 300px; 
    float: right;
    font-size: 13px; color: #f30; font-weight: bold;
    margin: 10px 0 20px 0;
}

@media all and ( max-width: 360px )
{
    .topnav { text-align: center; font-size: 16px; } 
    .topnav .button { float: none; margin: 10px auto 20px auto; font-size: 25px; font-weight: normal; height: 35px; width: 130px; }
    .have-account
    {
        width: 100%;
        font-size: 18px; font-weight: normal;
    }
}


h1.logos { width: 500px; margin: 10px auto 10px auto; }
h1.logos  a 
{  
    display: block;
}

@media all and (max-width: 820px)
{
    h1.logos { width: calc(100% - 260px); }
}

@media all and (max-width: 600px)
{
   h1.logos {width: 100%; float:none; }   
   h1.logos a img { max-width: 500px; margin: 0 auto; float: none; display: block; }
}

.logged-in { font-weight: bold; color: #f30; }

div.mobile { display: none; }
.primary { background: #EF9713; width:100%; height: 43px; }
.primary ul {
    display:block;
    width: 100%; 
    max-width: 1021px;
    height: 43px;    
    margin: 0 auto;
    padding:0;
    z-index: 10; 
}

.primary ul li {        
    float:left;
    list-style-type:none; 
    position: relative;              
    color:#000; 
    font-family: 'Bebas';              
    font-weight: normal; 
    text-decoration: none; 
    word-spacing: 2px;            
    color:#3b3b3b;
}
.primary ul li a {
    height: 43px;
    line-height: 40px;
    font-size: 20px;    
    color:#3b3b3b;
    display: inline-block;
    width: 100%;
    text-align: center;
    background: #EF9713;
    transition: background-color 0.5s ease 0s;
    font-family: 'Bebas';              
    font-weight: normal; 
    text-decoration: none; 
    word-spacing: 2px;
}

/* 
 #ie10 will only be red in MSIE 10, 
 both in high contrast (display setting) and default mode 
*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   .primary ul li a { word-spacing: 4px; }
}

.primary ul li > ul { display: none; background: none; }
.primary ul li:hover > ul { display: block; position: absolute; top: 43px; }
.primary ul li:hover > ul li { clear: both; }
.primary ul li:hover > ul li a { padding: 0 3px; }

@media all and ( max-width : 736px )
{
    .primary ul li:hover > ul { display: none; }
}


.social-wrapper { width: 200px; margin-bottom: 10px; float: right; }
@media all and ( max-width : 611px )
{
     .social-wrapper { display: none; }  
}



/*-----------------------------------------------------------------
    END NAVIGATION
-----------------------------------------------------------------*/

/* HIDE STUFFS WE DON'T WANT TO SEE! */
img#wpstats {
     display: none;
}

/*-----------------------------------------------------------------
    GLOBALS
-----------------------------------------------------------------*/
.body
{ 
    width: 100%; margin: 0 auto; min-width: 320px; 
    padding: 20px;
    background: #fff;
}

.body img 
{ 
    max-width: 100%; 
}

.only-mobile { display: none; }
@media all and (max-width: 500px)
{
    .only-mobile { display: block; }   
}

a { text-decoration: none; }
a:hover { text-decoration: none; }

h2,
p { margin-bottom: 15px; }

li p { margin: 0; }

article { margin: 0 0 15px 0; } /* 30px bottom */

/*-----------------------------------------------------------------
    FORMS
-----------------------------------------------------------------*/
.step { display: none; }
.step.show { display: block; }

.elephant-form 
{ 
    width: 100%; 
    max-width: 900px; 
    padding: 0; 
    margin: 0 auto;    
}

.elephant-form h2 
{ 
    text-align: center; 
    padding: 0 0 10px 0; 
    margin: 0 0 10px 0; 
    border-bottom: dotted 1px #cdcdcd; 
}

.elephant-form p { text-align: center; margin-top: 0px; }

.elephant-form input[type=checkbox] { top: 5px;  position: relative; margin-right: 10px; }

.elephant-form select,
.elephant-form input[type=text],
.elephant-form input[type=password],
.elephant-form textarea
{
    width: calc(100% - 240px); /* label width */ 
    max-width: 272px;
    border: solid 1px #cdcdcd;
    line-height: 26px;
    height: 26px;
    padding-left: 10px;
}
.elephant-form textarea { height: 200px; }
    
.button 
{                
    line-height: 30px;
    height: 30px;
    padding: 0 10px 3px 10px;
    background: #EF9713; 
    transition: background-color 0.5s ease 0s;
    color: #fff;
    cursor: pointer;
    display: inline-block;
}
    
a:hover .button,
.button:hover
{
    background-color: #ffb911; 
    color: #000;
    text-decoration: none;
}

.button.disabled
{
    transition: width 0.5s ease 0s;
    background: url(../images/ajax-loader.gif) no-repeat 10px center #666;
    padding-left: 25px;
    color: #fff;
}

.button:hover.disabled
{
    
}
    
.elephant-form label { font-size: 14px; }
    
    
    
    .fields { list-style: none; padding: 0; margin: 0 auto 10px auto; width: 100%; max-width: 512px; }
    .fields li { margin-bottom: 10px; width: 100%; float: left; list-style:none; min-height: 26px; }
    .fields li.input { width: 42.5%; max-width: 275px; }
    .fields li.button { width: 13%; max-width: 100px;  text-align: center; }
    .fields li label 
    { 
        width: 240px; 
        display: inline-block; 
        float:left; 
    }
    
    @media all and (max-width: 520px)
    {
        .other-products,
        .select-product { margin: 0; padding: 0; }
        
        .fields li { margin: 0 0 10px 0; }
        .fields li label { width: 100%; padding: 5px 0 10px 0;font-size: 18px; }
        .fields select,
        .fields input[type=text],
        .fields input[type=password],
        .fields textarea
        {
            width: 100%; max-width: 100%;
            line-height: 36px;
            height: 36px;
            font-size: 18px;
            padding-left: 10px;
        }
    }
    
    
/* NEWSLETTER */
.newsletter-form
{ 
    background: #efefef;
    border: solid 1px #cdcdcd;
    padding: 10px; width: 100%; max-width: 670px;
}
.newsletter-form table { width: 670px; }
.newsletter-form h2
{
    background: #EF9713;
    padding: 0 0 4px 0; margin: 0 0 10px 0; line-height: 28px; font-size: 18px; border: 0px;
}
.newsletter-form p { font-size: 13px; font-weight: 600; }


/*-----------------------------------------------------------------
    SUBSCRIPTION FORM
-----------------------------------------------------------------*/
.subscriptions { }
.subscriptions .description { display: none;  border: dashed 1px #cdcdcd; background: #efefef; margin: 20px 0; padding: 10px; }
ul.subscriptions { list-style: none; padding: 0; margin: 0; }
ul.subscriptions li { margin: 10px 0; }

.donation { border: dotted 1px #cdcdcd; background: #efefef; padding: 20px 20px 0 20px; margin: 20px 0; }
.donation,
.subscriptions .description p {  font-size: 13px; text-align: left; font-weight: bold;  }

.donation h4 { margin: 0 0 10px 0; padding: 0 0 10px 0; border-bottom: dotted 1px #cdcdcd; text-align: center; font-size: 14px; }

.forgotten input[type=submit] { width: 129px; }

.validate { width: 100%; max-width: 350px; margin: 0 auto;color: #ff0000; font-size: 13px; }
.validate ul { margin: 10px 20px 20px 20px; list-style: disc; }
.validate ul li { line-height: 17px; color: #ff0000; text-align: left; list-style: disc; }

/*-----------------------------------------------------------------
    Select products on homepage
-----------------------------------------------------------------*/
.other-products,
.select-product 
{ 
    width: 100%;
    padding: 20px 0 0 0;
    max-width: 700px;
    margin: 0 auto;
    list-style: none;
}

.other-products { margin-bottom: 20px; }

.other-products li,
.select-product li
{
    width: 33%;
    max-width: 233.33px;
    height: 0;
    min-height: 360px;
    float: left;
    background: #ecf2f6;
    margin: 0;
    border: 1px solid #d9dee1;    
    padding: 8px;
    
    text-align: center;
    transition: background 0.2s linear, height 0.1s linear;    
    cursor: pointer;
}

.other-products li { width: 50%; max-width: 50%; min-height: 200px; }

.other-products li h2 { margin: 10px 0 15px 0; }
.other-products li h2 span { font-size: 12px; text-transform: uppercase; }
.other-products li span.sub { font-size: 14px; font-weight: bold; line-height: 16px; display: inline-block; margin-bottom: 20px; }
.select-product li:nth-child(2)
{
    position: relative; top: -20px; height: 400px;
    background: #fff;
    border: 1px solid #d9dee1;
}
.select-product li:nth-child(3)
{
    border-left: 0; 
}

.description p { font-size: 12px; line-height: 14px; }

.other-products li:hover,
.other-products li.selected,
.select-product li.selected,
.select-product li:hover
{
    background: #ef9712;
}

.select-product li:first-child
{
    margin-left: 0;
    border-right: 0;
}

.other-products li
{
    width: 49%; float: left;
    transition: background 0.2s linear, height 0.1s linear;    
    cursor: pointer;
    padding: 10px;
    margin-left: 10px;
    background: #ecf2f6;
    border: 1px solid #d9dee1;
    height: 300px;
}
.other-products li:first-child { margin: 0; }
.other-products.gifts { margin-bottom: 20px; }
.other-products.gifts li { margin: 0 auto; display: inline-block; float: none; }

@media all and (max-width: 520px)
{   
    .other-products { width: 100%; display: block; float: left; }    
    .other-products li,
    .select-product li { width: 100%; max-width: 100%; min-height: 200px; margin: 0;  top: 0 !important; height: auto !important;border: 1px solid #d9dee1 !important; margin-bottom: 20px; }
    
    .other-products { top: 20px; position: relative; float: left; width: 100%; display: block; }
    .other-products:before { padding-top: 20px !important; content : "Other subscription levels";}
    .other-products li { margin-top: 20px !important; margin-bottom: 20px; }
    .other-products li:first-child { margin-bottom: 20px; }
}

    
/*-----------------------------------------------------------------
    END FORMS
-----------------------------------------------------------------*/


/*-----------------------------------------------------------------
    OTHER
-----------------------------------------------------------------*/
.copyright { width: 700px; padding: 0 20px; text-align: right; float: right; font-size: 12px; }
.small { font-size: 11px; }

/* FOOTER */
footer 
{ 
    width: 100%; 
    min-width: 300px; 
    min-height: 100px; 
    
    padding: 30px 20px 0 0; 
    
    height: 150px; 
    background: #242a2a; 
    text-align: right;
}
footer h4 a { color: #f30;font-size: 13px; }

/* MEMBER ACCOUNT PAGE */
.account-steps { width: 100%; border-bottom: dotted 1px #cdcdcd; padding: 0 0 10px 0; 
    margin: 0 0 10px 0; text-align: center;  }
.account-steps li { display: inline; padding: 0 5px; margin: 0; }
.account-steps li a { font-size: 19px; border: 0; padding: 0; margin: 0; width: auto; display: inline; color: #999; font-weight: bold; white-space: nowrap; }
.account-steps li:hover a,
.account-steps li.selected a { color: #000; cursor: pointer; text-decoration: none; }

@media all and (max-width: 450px)
{
    .account-steps { margin: 0; }
    .account-steps li { width: 100%; display: block; padding: 5px 0; }
}

#btnPayPalExpress { display: none; }
#paypalShipping { display: none; margin: 0 auto; width: 300px; }

/* INLINE CMS - don't put anything below this */
.edit-content
{
    border: dotted 1px #cdcdcd;
    position: relative;
}

.edit-content a.inlineedit { position: absolute; right: 0; top: 0; z-index: 9990; }

#cms-controls
{
    height: 40px; width: 100%;
    background: #333;
    color: #fff;
    border: dotted 1px #cdcdcd;
    padding: 7px 20px;
    z-index: 9990;    
}

.expando-link { text-align: center; }
.expando-content { display: none; }

.join-our-community {
    width: 100%;
    float: left;
}
.join-our-community--left
{
    float: left; width: 48%; display:block;
}

.join-our-community--right
{
float: right; width: 48%; display:block;
}

.refundMobile {
        visibility: hidden;
}

.refundDesktop { 
    font-size:0.9em;
}

@media all and (max-width: 600px)
{
    .join-our-community--right,
    .join-our-community--left
    {
        width: 100%;
    }

    .refundDesktop {
        visibility:hidden;
    }

    .refundMobile {
        visibility: visible;
        border-top: 1.5px solid lightgray;
        width:100%;
        text-align:center;
        padding-top:15px;
        font-size:0.9em;
    }
}

.landing__page--right,
.landing__page--left
{
    width: 48.544%; 
    float:left;
    margin-left: 2.913%;
}
.landing__page--left { margin-left: 0; padding-right: 20px; border-right: solid 1px #cdcdcd; }

.fields li .form__text-input,
.fields li .form__label
{
    width: 50%; max-width: 240px;
}
@media all and (max-width:700px)
{
    .landing__page--right,
    .landing__page--left
    {
        width: 100%; 
        float:left;
        margin-left: 0%;
        padding-right: 0; border-right: none; 
    }
    .landing__page--left
    {
        padding-bottom: 20px; border-bottom: solid 1px #cdcdcd;
    }

    .valBLockMsg {
        color: #ef9713 !important;
        font-weight: bold;
        font-size: 1.4em !important;
    }
}

.valBLockMsg {
    color: #ef9713 !important; font-weight:bold; font-size:1.1em !important;
}


@media all and (max-width:500px)
{
    .valBLockMsg {
        color: #ef9713 !important;
        font-weight: bold;
        font-size: 1.4em !important;
    }

    .fields li .form__text-input,
    .fields li .form__label
    {
        width: 100%; max-width: 100%;
    }

}

label.newsLetter {
    display: block;
    padding-left: 15px;
    text-indent: -15px;
}
input.newsLetter {
    width: 13px;
    height: 13px;
    padding: 0;
    margin:0;
    vertical-align: top;
    position: relative;
    top: -1px;
    *overflow: hidden;
}

/***************************************/
/*               SHOP                  */
/***************************************/
.shop-list { list-style: none; padding: 0; margin: 0; float: left; width: 100%; }
.shop-list a:hover h2 { color: #f30; }
.shop-item  
{  
    width: 31.111%; 
    float: left; 
    padding-bottom: 20px;     
    margin-left: 3.334%
}

.shop-memberships .shop-item { display: inline-block; float: none; vertical-align:top; }

.shop-item:nth-child(3n+1),
.shop-item:first-child { margin-left: 0; }


@media all and (max-width: 736px)
{
    .shop-item  { width: 48.333%; }
    .shop-item:nth-child(1n) { margin-left: 3.333%  }
    
    .shop-item:nth-child(2n + 1),
    .shop-item:first-child { margin-left: 0; }
}
@media all and (max-width: 500px)        
{
    .shop-item:nth-child(1n)  { width: 100%; margin: 0; margin-bottom: 20px; border-bottom: dotted 1px #cdcdcd; }
    
}
.shop-item a { display: block; }
.shop-item span.button { margin: 0 auto; display: inline-block; width: auto; }
.shop-item__thumbnail { width: 46.743%; overflow: hidden; margin-bottom: 15px; float: left; padding: 5px; border: solid 1px #cdcdcd; margin-right: 10px; }
.shop-item__thumbnail  img { width: 100%; max-width: 100%; display: block; }
.shop-item__name { width: 46.743%; margin-bottom: 15px; float: left; }
.shop-item__name h2 { font-weight: normal; line-height: normal; font-size: 15px; }
@media all and (max-width: 400px)
{
    .shop-item__name {
        margin: 0;
    }
    .shop-item__name h2 { font-size: 13px; }
}

.shop-checkout { margin: 0; float: left; }

.shop-detail__title h2 { font-size: 27px; margin-bottom: 10px; width:100%; }
.shop-detail__description { width: 100%; }
.shop-detail__description p { margin-bottom: 10px; }

.shop-detail__left
{
    width: 55.556%; float: left;
    margin-right: 2.222%;
}

.shop-detail__right { float: right; width: 42.222%; }

@media all and (max-width: 500px)
{
    .shop-detail__left { width: 100%; top: 100%; position:relative; }
    .shop-detail__right { width: 100%; top: -100%; position:relative; }
    
    .shop-detail__title h2 { font-size: 21px; margin-bottom: 10px; display: inline-block; }
}

/* THE GALLERY */
.shop-detail__gallery 
{ 
    width: 100%; 
    overflow: hidden; 
    min-height:250px; 
    margin-bottom: 20px; 
    text-align: center; 
}
.shop-detail__gallery__main 
{ 
    display: block; 
    min-height: 50px; 
    overflow: hidden; 
    margin-bottom: 10px;      
}

.shop-detail__gallery__main img { width: auto; display: block; max-height: 450px; max-width: 100%;  }
.shop-detail__gallery__items { text-align: center; float: left; width: 100%;    
                               }
.shop-detail__gallery__items a 
{ 
    width: 100px; 
    height: 100px; 
    overflow: hidden; 
    display: block;         
    float:left;
    margin-right: 10px;
}

.shop-detail__gallery__items a img { width: 100px; max-height:100px; display: block; }


/* BUY IT! */
.shop-detail__buy { }
.shop-detail__buy > span { display: block; width: 100%; font-size: 21px; float: left; margin-bottom: 10px; }
span.shop-detail_price { font-size: 21px; }
span.shop-detail_price span.value { font-weight: bold; font-size: 27px; }

span.shop-detail_variant,
span.shop-detail_qty { font-size: 18px; margin-bottom: 16px; }

.shop-detail_qty input[type=number],
.shop-detail_qty select,
.shop-detail_variant select { border: solid 1px #cdcdcd; width: 200px; height: 30px; display: inline; margin-left: 10px; text-align: center; font-size: 18px; top: 2px; position:relative; }
.shop-detail_qty select { width: 50px; text-align: center; }

span.shop-checkout__discount input[type=number],
span.shop-checkout__discount input[type=text],
span.shop-detail_qty input[type=text] 
{ border: solid 1px #cdcdcd; width: 30px; height: 30px; display: inline; margin-left: 10px; text-align: center; font-size: 18px; top: 2px; position:relative; }

span.shop-checkout__discount input[type=text] { width: 100px; }

span.shop-detail_qty.qty_membership input[type=text] { margin: 0 0 0 10px; }

.shop-detail_qty label { cursor: pointer; font-size: 13px; float: right; width: calc(100% - 23px); }
.shop-detail_qty label.paymentperiod {  }
span.shop-detail_add .button { font-size: 13px; font-weight: normal; }

a.bundle_add,
.view,
.shop-detail__buy a.item_add { background-image: url(../images/ecommerce/buy.png); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; }

.utility-buttons { float: left; width: 100%; }
a.back { background-image: url(../images/ecommerce/back.png); background-repeat: no-repeat; background-position: 10px center; float: left; margin: 0 0 20px 0; font-size: 13px; padding: 0 20px 0 38px; }
a.checkout { background-image: url(../images/ecommerce/checkout.png); float: right; background-repeat: no-repeat; background-position: right 10px center; margin: 0 0 20px 0; font-size: 13px; padding: 0 38px 0 13px; }

.shop-checkout { width: 100%; float: left; }
.shop-checkout__items,
.shop-checkout__items ul { list-style: none; width:100%; float: left; padding: 0; margin: 0; }

.header-row,
.item-row { float:left; margin-right: 10px; width: 100%; font-size: 15px; }
.header-row { border-bottom: solid 1px #cdcdcd; }

.header-row > span,
.item-row > span { float: left; min-height: 32px; margin-left: 10px; }
.header-row > span:first-child,
.item-row > span:first-child { margin-left: 0px; }

.item-row > span,
.header-row > span { width: 32px; }

.item-row > span.lh-normal { line-height: normal !important; }

.item-increment a,
.item-decrement a,
.item-remove a
{
    display: block; width: 32px; height: 32px;
    text-indent: -3000px;
    overflow: hidden;
    background-image: url(../images/ecommerce/remove.png); 
    cursor: pointer;
}

.item-increment a
{
    background-image: url(../images/ecommerce/increment.png); 
}

.item-decrement a
{
    background-image: url(../images/ecommerce/decrement.png); 
}

.thumbSummary {
    width: 40px;
    height: 40px;
    display: inline;
    margin-right: 10px;
}

.item-thumb {
    max-height: 40px;   
}

span.item-name { width: 285px; margin-left: 20px; }
span.discount_label { color: #f00; font-size: 11px; }
#confirm-totals span.discount_label { font-size: inherit; }
span.item-price { width: 75px;}
span.item-total { width: 17.951%; text-align: right; float: right; }
span.item-quantity { width: 30px; text-align:center; }

.item-row { width: 100%; float: left; min-height: 42px; line-height: 40px; border-bottom: dotted 1px #cdcdcd; padding-bottom: 0px; margin-top: 0px; }

@media all and (max-width: 650px)
{
    .item-row { min-height: 42px; height: auto;  }
    .header-row > span,
    .item-row > span { min-height: 32px; height: auto;  }
    
    span.item-name { width: 49%; }   
    span.item-total { width: 90px; }
    
    .item-increment,
    .item-decrement,
    .item-quantity { display: none; }
}



.review-container { width: 300px; float: right; margin-top: 20px; }
.review-row { width: 300px; display: block; text-align: right; height: 32px; }
.review-row_discount { margin-bottom: 10px; }
.review-row span { width: 120px; float: left;  font-size: 15px; line-height: 32px; font-size: 13px; }

.review-row span.discount_label,
span.shop-checkout__total,
.review-row_discount .shop-checkout__discount { width: 180px; }
.review-row_discount .shop-checkout__discount input[type=submit] { margin-left: 10px; }
 
.new-card,
.new-address { display: none !important; }

.new-card.show,
.new-address.show,
.step.show { display: block !important; }

.position-stage__breadcrumb,
.position-stage_steps { width: 100%; height: 46px; position: relative; }

form .position-stage_steps ul { width: 100%; height: 44px; line-height: 44px; text-align: center; display: block;}
form .position-stage_steps ul li { display: inline-block; width: 32px; height: 32px; line-height: 22px; margin: 0 5px; padding: 5px; border: solid 1px #cdcdcd; font-size: 15px; float:none; }
form .position-stage_steps ul li.selected { background: #EF9713; }

form .position-stage__breadcrumb { font-size: 13px; width: 100%; max-width: 512px; margin: 0 auto; line-height: 44px; }
form .position-stage__breadcrumb span { display: inline-block; padding: 0 10px 0 0; }

form select.date
{
    width: 100px; float: left; margin-right: 10px;
}

.elephant-form input[type=text].issueNumber { width: 100px; float: left; }
input[type=radio] { float: left; position: relative; top: 4px; margin-right: 10px; }

.step .column { width: calc(33.333% - 20px); float: left; margin: 0 10px; }

@media all and (max-width: 800px)
{
    .step .column { width: calc(50% - 20px); }
    .step .column.items { width: 100%; margin: 0; }   
}

@media all and (max-width: 500px)
{
    .elephant-form .position li { padding: 5px;width: 22px; height: 22px; line-height: 12px; margin: 0; font-size: 12px; }
    
    .step .column { width: 100%; margin: 0; }
}

.step .column > span { margin: 0 0 20px 0; display: inline-block; width: 100%; }
.elephant-form ul { list-style: none; }
.elephant-form .step .column li,
.elephant-form .step .column ul { padding: 0; margin: 0; }
.step .column h3 { border-bottom: dotted 1px #cdcdcd; margin: 0 0 10px 0; padding: 0 0 10px 0; }
.column.full-width { width: 100%; }
.column.mtb30 { margin: 30px 0; }

/* CONFIRM TOTALS */
#confirm-totals li,
#confirm-totals ul { width: 100%; float:left; font-size: 17px; line-height: 28px; }
#confirm-totals span.value { display: inline-block; float: right; }
#confirm-totals li.grand-total { font-weight: bold; border-top: dotted 1px #cdcdcd; margin-top: 10px; padding: 5px 10px 0 10px; font-size: 21px; }

.floatleft { float: left; }
.padding20bottom { margin-bottom: 20px; }


/* SHOP ORDERS IN MEMBER ACCOUNT */
.shop-ordered ul { float: left; width: 100%; }
.shop-ordered ul li 
{ 
    margin-bottom: 10px; padding-bottom: 10px; border-top: dotted 1px #cdcdcd; 
    width: 25%; 
    padding: 10px;
    margin-bottom: 10px;
    min-height: 100px;
    display: inline-block; float: none;
    vertical-align: top;
    cursor: pointer;
}

.shop-ordered ul li .order-summary
{
    display: none;
    border-top: solid 1px #cdcdcd;
}

.shop-ordered ul li:hover .order-summary { display: block; }
/* Mini Cart */
.mini-cart
{
    width: 480px;    
    margin: 0 auto 10px auto;
    text-align: center;
    height: 80px;
}

.mini-cart__cart
{
    width: 100%; 
    float: left; 
    text-align: center;    
}
.cart-icon
{ 
    width: 131px; height: 42px; line-height: 42px;
    background: url(../images/ecommerce/cart.svg) no-repeat;  
    position: relative;   
    display: block;
    margin: 0 auto 10px auto;
    padding-left: 60px;
    
}

.cart-icon__count 
{ 
    width: 25px; height: 25px; 
    float: left;

    border-radius: 50%; 
    background: #f00; 
    border: solid 2px #fff; display: block; 
    position: absolute; left: 30px; top: -5px; 
    text-align: center; line-height: 22px; font-weight: bold; color: #fff; font-size: 14px; 
}

.cart-detail-price { display: none; float: left; font-size: 28px; color: #f30;  }

.mini-cart ul { width: 100%; float: left; height: 27px; text-align: center; }
.mini-cart ul li { list-style: none; font-size: 18px; line-height: 25px; display: inline-block; margin: 0 5px; }
.mini-cart ul li a { background-repeat: no-repeat; }
.your_cart { padding-left: 30px; }
.mini-cart ul li a.your_cart { background-image: url(../images/ecommerce/cart-empty.svg); background-position: left;}
.mini-cart ul li a.your-account { }
.mini-cart ul li a.your_checkout { }

html[data-useragent*='MSIE 10.0'] .mini-cart_right ul li a.your_cart { background-image: url(../images/ecommerce/cart-empty.svg); background-position: -40px 0px;}
html[data-useragent*='MSIE 10.0'] .mini-cart_right ul li a.your-account { background-image: url(../images/ecommerce/house.svg); background-position: -55px 0px; }
html[data-useragent*='MSIE 10.0'] .mini-cart_right ul li a.your_checkout { background-image: url(../images/ecommerce/tick.svg);  background-position: -40px 0px;}

@media all and (max-width: 537px)
{
    .mini-cart
    {
        width: 100%;    
    }
    .mini-cart ul li { font-size: 13px; margin: 0; }
    .mini-cart ul li a { padding-left: 20px;  }
}


select.input-error,
input.input-error
{  
    border: solid 1px #f00 !important;   
}
.fields li span.input-error { color: #f00; display: block; text-align: right; width: 100%; }

.fields li label.payment_creditcard,
.fields li label.payment_paypal { display: inline-block; width: 153px; height: 33px; text-indent: -3000px; cursor: pointer; }
.fields li label.payment_creditcard { background-image: url(/elephant/images/ecommerce/checkout-creditcard.png); background-repeat: no-repeat; background-position: top left;  }
.fields li label.payment_paypal { background-image: url(/elephant/images/ecommerce/checkout-paypal.png); background-repeat: no-repeat;  background-position: top left; }

#payment_paypal,
#payment_creditcard { height: 33px; line-height: 33px;}



/* MODAL WINDOW */
.md-overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	visibility: hidden;
	top: 0;
	left: 0;
	z-index: 1000;
	opacity: 0;
	background: #ff7f46;
	background: rgba(255,127,55,0.8);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.md-overlay.md-show {
	opacity: 1;
	visibility: visible;
}

/* 3D flip vertical - http://tympanus.net/codrops/2013/06/25/nifty-modal-window-effects/     */
.md-modal {
	-webkit-perspective: 1300px;
	-moz-perspective: 1300px;
	perspective: 1300px;
	
	position: fixed;
	top: 50%;
	left: 50%;
	width: 60%;
	max-width: 630px;
	min-width: 320px;
	height: auto;
	z-index: 2000;
	visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

@media all and (max-width: 570px)
{
    .md-modal 
    {
	    width: 70%;
    }
}

@media all and (max-width: 500px)
{
    .md-modal 
    {
	    width: 95%;
    }
}


.md-modal .md-content {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: rotateX(-70deg);
	-moz-transform: rotateX(-70deg);
	-ms-transform: rotateX(-70deg);
	transform: rotateX(-70deg);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	opacity: 0;
}

.md-modal.md-show .md-content {
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	-ms-transform: rotateX(0deg);
	transform: rotateX(0deg);
	opacity: 1;
	
	visibility: visible;
	-webkit-backface-visibility: visible;
	-moz-backface-visibility: visible;
	backface-visibility: visible;
}

/* Content styles */
.md-content {
	color: #fff;
	background: #fff;
	position: relative;
	border-radius: 3px;
	margin: 0 auto;
}

.md-content h3 {
	margin: 0;
	padding: 0.4em;
	text-align: center;
	font-size: 2.4em;
	font-weight: 300;
	opacity: 1;
	background: #EF9713;
	background: rgba(239,151,19,0.8);
	border-radius: 3px 3px 0 0;
}

.md-content > div {
	padding: 20px 30px;
	margin: 0;
	font-weight: 300;
	font-size: 1.15em;
}

.md-content > div a { margin: 0;  }

@media all and (max-width: 620px)
{
    .md-content > div a
    {
        width: 75%; text-align: center; margin-bottom: 10px; float: none; margin: 0 auto 10px auto; display: block;
    }
}

.md-content > div p {
	margin: 0;
	padding: 10px 0;
}

.md-content > div ul {
	margin: 0;
	padding: 0 0 30px 20px;
}

.md-content > div ul li {
	padding: 5px 0;
}

.md-content button {
	display: block;
	margin: 0 auto;
	font-size: 0.8em;
}

.processing { display: none; }


/* ORDER DETAILS */
.order-table { width: 100%; border: solid 1px #cdcdcd; border-collapse: collapse; }
.order-table__row td { border-bottom: solid 1px #cdcdcd; padding: 20px; }
.order-table__row-detail { display: none; }
.order-table__row-detail td { padding: 20px; }

.order-detail-table { width: 100%; border: solid 1px #cdcdcd; border-bottom: 0; border-collapse: collapse; margin-bottom: 20px; }
.order-detail-table__row td { border-bottom: solid 1px #cdcdcd; padding: 20px; }

.order-detail-table__row--header td,
.order-table__row--header td
{
    border-bottom: 1px solid #c8c8c8;
    padding: 20px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 15px;
    font-family: 'Open Sans',Arial,sans-serif;
}

.button.back {
    background-color:gray;
}