/*Reset*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

body {
    line-height: 1;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

    nav ul, ul {
        list-style: none;
    }

blockquote, q {
    quotes: none;
}

    blockquote:before, blockquote:after, q:before, q:after {
        content: '';
        content: none;
    }

a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none;
}

mark {
    background-color: #ff9;
    color: #000;
    font-style: italic;
    font-weight: bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

input, select {
    vertical-align: middle;
}


/* Main Site CSS */
html {z-index: 0; overflow-y: scroll; overflow: -moz-scrollbars-vertical;}
body {background: #fff; font-size: 115%; }
body.list {background:#333; }

#wipe{ position:fixed;  width:0px;padding-top:0px;  height:0; top:50%; left:50%;  background:#21B9AA; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; z-index:9999; opacity:0.7; pointer-events:none; }

#wait, #alert { position:fixed; top:0; left:0; bottom:0; right:0; background-color:#fff; background-color: rgba(255,255,255,0.4); z-index:8000; display:none; }
#wait div.spin { margin: 100px auto; width: 61px; height: 80px; text-align: center; font-size: 10px; position: fixed;  top:50%; left:50%; margin-left:-30px; margin-top: -40px;}
#wait div.spin div {background-color: #555; height: 100%; width: 7px; display: inline-block; -webkit-animation: waitanim 1.2s infinite ease-in-out; -moz-animation: waitanim 1.2s infinite ease-in-out;  animation: waitanim 1.2s infinite ease-in-out;  }
#wait div.spin div.r2 {-webkit-animation-delay: -1.1s; -moz-animation-delay: -1.1s; animation-delay: -1.1s; }
#wait div.spin div.r3 {-webkit-animation-delay: -1.0s; -moz-animation-delay: -1.0s; animation-delay: -1.0s;}
#wait div.spin div.r4 {-webkit-animation-delay: -0.9s; -moz-animation-delay: -0.9s; animation-delay: -0.9s;}
#wait div.spin div.r5 {-webkit-animation-delay: -0.8s; -moz-animation-delay: -0.8s; animation-delay: -0.8s;}

@-webkit-keyframes waitanim { 0%, 40%, 100% { -webkit-transform: scaleY(0.4); background-color: #555; }   20% { -webkit-transform: scaleY(1.0); background-color: #333; }}
@-moz-keyframes waitanim { 0%, 40%, 100% { -moz-transform: scaleY(0.4); background-color: #555; }   20% { -moz-transform: scaleY(1.0); background-color: #333; }}
@keyframes waitanim {
  0%, 40%, 100% { 
    -webkit-transform: scaleY(0.4);
    -moz-transform: scaleY(0.4);
    transform: scaleY(0.4);
    background-color: #666;
  }  20% { 
    -webkit-transform: scaleY(1.0);
    -moz-transform: scaleY(1.0);
    transform: scaleY(1.0);
    background-color: #333;
  }
}


#alert #msg {width: 35%; border: 10px solid #000;  -webkit-border-radius:30px; -moz-border-radius:30px; border-radius:30px; padding: 30px; position:relative; margin:100px auto 0px auto; background-color:#fff; font-family:'Questrial',Arial,sans-serif; text-align:center;   }
#alert #msg div h2 { margin-bottom:20px; font-size: 140%;}
#alert #msg div  p {margin-bottom: 40px;}
#alert #msg #close { text-align:right; font-weight:bold; background-color:#000; color:#fff; padding: 10px 20px;  -webkit-border-radius:500px; -moz-border-radius:500px; border-radius:500px; cursor:pointer;}


#details {width:46%; padding-left:52%; margin-right:2%; height:100vh; overflow:hidden; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display:flex; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column;  } /**/
#inner { overflow-y:auto; overflow-x:hidden;   flex:1;  margin-bottom: 25px; display: flex;  flex-direction: row;  justify-content: center;} /*height:calc(100% - 80px);*/

h1 { margin-bottom: 40px; margin-top:25px; font-weight:normal;  padding: 8px;  -webkit-border-radius:1000px; -moz-border-radius:1000px; border-radius: 1000px; border: 6px solid #000; background-color:#eee; background: linear-gradient(135deg, #FFF, #aae, #FFF, #bbf, #FFF, #aad, #FFF);  }
h1 span {display:block; text-align:center;   background-color:#92ae1b; color:#000; padding: 13px; font-family: 'Questrial', Arial, sans-serif; font-size:160%; -webkit-border-radius:1000px; -moz-border-radius:1000px; border-radius: 1000px; border: 1px solid #fff; }
h1 span sub {display:block; font-size: 65%; font-family: 'Questrial', Arial, sans-serif;}
#details.light h1 span {color:#fff;}
#details h2 {font-family:'Righteous',Arial,sans-serif; font-weight:normal; font-size:130%; text-align:center; border-bottom: 1px solid #666; color:#444; padding:0px 20px 7px 20px; margin-bottom:20px;}

#container {min-height:100vh; overflow:hidden; width:100%;}

#cardback {width:50%; position:absolute; top:0; z-index:0; height:100vh; overflow:hidden; z-index:55; }
#cardback div.card {width:90%; background-color:#92ae1b; height:100vh;   position:relative; text-align:center;}
#cardback div.curve {z-index:-1; height:120vh; width:20%; background-color:#92ae1b; display:block; position:absolute; top:0; right:0; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; margin-top:-10vh; margin-right:-10%;}
#cardback div.card img { height:88vh; width:auto; margin: 6vh auto;}
#cardback.light * {color:#fff;}

#fig { border-right: 50px solid #fff;  margin-bottom:30px;}
#fig.noacc { width:100%; border:none; text-align:center;}

#accessories {text-align:center;  margin-right: 20px; margin-bottom:30px; }
#accessories.noacc {display:none; width:0px;}
#accessories figure {margin: 0px auto 10px auto; text-align:center;}
#accessories figcaption {font-family:'Questrial',Arial,sans-serif; font-weight:normal; margin:10px 0px 30px 0px;  }
#accessories figcaption b {color:#333; -webkit-border-radius:500px; -moz-border-radius:500px; border-radius:500px; padding: 1px 5px; margin-right:7px; text-align:center; font-weight:normal; border:2px solid #444; }
#accessories  img  {  }
#details.light #accessories h3 b {color:#fff;}


#bottomnav{position:fixed; bottom: 5px; right:12px; z-index:49; width:49%;  text-align:right;}
#bottomnav a {margin-left:7px; margin-bottom:7px; border: 5px solid #555; padding:12px; font-size:130%; font-family: 'Questrial', Arial, sans-serif; color:#555; -webkit-border-radius:500px; -moz-border-radius:500px; border-radius:500px; display:block; display:inline-block;  background-color:#fff; opacity:0.7;  text-decoration:none; text-align:center;  transition: all 0.3s; z-index:9999; position:relative; outline:none;}
#bottomnav a:after {position: absolute; top:-4px; left:-4px; padding: 4px; width: 100%; height:100%; -webkit-border-radius:500px; -moz-border-radius:500px; border-radius: 500px; content:""; box-shadow: 0 0 0 5px #555; display:block;  transform:scale(0.95, 0.8); opacity: 0;  transition: all 0.3s;}
#bottomnav a:hover {background-color:#444; border-color:#fff; color:#fff; opacity: 1; }
#bottomnav a:hover:after { transform:scale(1); opacity: 1;}
#bottomnav #next {padding-right:22px; }
#bottomnav #prev {padding-left:22px;  }
#bottomnav #next:before {content:""; position:absolute; right:8px; width: 0; height:0; border-style: solid; border-width: 10px 0 10px 8px; border-color: transparent transparent transparent #555; margin-top:1px;  -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
#bottomnav #prev:before {content:"";  position:absolute; left:8px; width: 0; height:0; border-style: solid; border-width: 10px 8px 10px 0; border-color: transparent #555 transparent transparent; margin-top:1px;  -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}

#bottomnav #next:hover:before {border-color: transparent transparent transparent #fff; }
#bottomnav #prev:hover:before {border-color: transparent #fff transparent transparent; }



#figurelist {padding:20px 10px 20px 10px; text-align:center; position:relative; }
#figurelist div.figure {width: 13.6%; position:relative; padding:0.22%;  display:inline-block; vertical-align:top; padding-bottom:8px;}
#figurelist div.figure a {display:block; text-decoration:none;   padding: 10px; background: linear-gradient(135deg, #FFF, #aae, #FFF, #bbf, #FFF, #aad, #FFF); -webkit-border-radius:25px; -moz-border-radius:25px; border-radius: 25px; border: 5px solid #000; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
#figurelist div.figure a div.panel {padding: 15px 20px; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius: 15px; position:relative; overflow:hidden; border:1px solid #fff; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition:all 0.3s;}
#figurelist div.figure a div.panel:after {padding-bottom:45%; content: ""; display:block;}
#figurelist div.figure a div.panel:before {position:absolute;  background: #000 url(../img/sw/stars.gif) 100% 100% repeat; background-size:200%; opacity:0;  top:50%; left:50%; width:0px; height:0px; content:""; -webkit-border-radius:50%; -moz-border-radius:50%;  border-radius: 50%; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;  }

#figurelist div.figure a div.panel div.text {font-family:'Questrial', Arial, sans-serif; text-align:center; color:#000; font-size:140%; position:absolute; left:0px; width:80%; padding:0px 10%;  top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%);   -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s;  transition:all 0.3s; }
#figurelist div.figure a div.panel div.text span {display:block; font-size: 60%; padding-top: 2px;}
#figurelist div.light a div.panel div.text, #figurelist div.light div.text span {color:#fff;}

#figurelist div.figure a:hover { }
#figurelist div.figure a:hover  div.panel div.text {transform: scale(1.1) translateY(-50%); color:#fff;}
#figurelist div.figure a:hover div.panel:before {margin-bottom:0px; width:140%; height:140%; top: -20%; left:-20%; opacity:1; }

#figurelist div.disabled  {opacity:0.25; pointer-events:none;}
#figurelist div.disabled div.panel {opacity:0.3;}
    

#figurelist div.figure.disabled a:hover  div.panel div.text {transform: translateY(-50%);}
#figurelist div.figure.disabled a:hover  div.panel {filter: unset;}


#mainnav {text-align:center; margin-top: 15px; background:#000 url(../img/sw/stars.gif)  70% 65% repeat;  position:relative; overflow:hidden; line-height: 1;}
#mainnav a {display:inline-block; margin: 20px 15px;  z-index:10; position:relative; outline:none; vertical-align:top; }
#mainnav a span {display:block;  width:275px; background: url(../img/sw/logos3.png) top left no-repeat; height: 164px; transition: transform 0.3s, opacity 0.3s; opacity:1; }
#mainnav a.esb span {background-position: 0px -164px;}
#mainnav a.rotj span {background-position: 0px -328px;}
#mainnav a.tri span {background-position: 0px -492px;}
#mainnav a:hover span {transform: scale(1.05); }
#mainnav a:before {content:""; position:absolute; top: -20px; left:50%; margin-left:-30px; width:0; height:0;  border-style: solid;  border-width: 15px 30px 0 30px; border-color: #333 transparent transparent; -webkit-transition: top 0.3s, opacity 0.3s; -moz-transition: top 0.3s, opacity 0.3s; -o-transition: top 0.3s, opacity 0.3s;  transition: top 0.3s, opacity 0.3s; opacity:0; }
#mainnav a:after {content:""; position:absolute; bottom: -20px; left:50%; margin-left:-30px; width:0; height:0;  border-style: solid;  border-width: 0px 30px 15px 30px; border-color:  transparent transparent #333; -webkit-transition: top 0.3s, opacity 0.3s; -moz-transition: top 0.3s, opacity 0.3s; -o-transition: top 0.3s, opacity 0.3s; transition: bottom 0.3s, opacity 0.3s; opacity:0; }

#mainnav a.active:before {opacity:1; }
#mainnav a.active:after {opacity:1; }


#mainnav a.disabled span {opacity:0.5;}
#mainnav::before{content:""; display:block; position:absolute; top:0; left:50%; margin-left:-50%;  background: url(../img/sw/stars.gif) 25% 25% repeat; width: 110%; height: 3000px; animation: moveslowstars 500s linear infinite; z-index:8;}
#mainnav::after{content:""; display:block; position:absolute; top:0; left:50%; margin-left:-50%;  background: url(../img/sw/stars.gif) 50% 50% repeat; width: 110%; height: 5000px; animation: movefaststars 500s linear infinite; z-index:8;}

@keyframes moveslowstars { 0% {top:0px;} 50% {top:-2000px;} 100% {top:0px;}}
@keyframes movefaststars { 0% {top:0px;} 50% {top:-4000px;} 100% {top:0px;}}


/* Adjustments for fancy page load*/

body.nojs #container #cardback {margin-left:0; -webkit-transition:none; -moz-transition:none; -o-transition:none;  transition:none;}
body.nojs #container #cardback img {opacity:1; -webkit-transition:none; -moz-transition:none; -o-transition:none; transition:none; }
body.nojs #container #figblank {opacity:0; visibility: hidden; -webkit-transition:none; -moz-transition:none; -o-transition:none; transition:none;}


#figblank {width:100vw; height:100vh; position:fixed; top:0; left:0; opacity:1;  z-index:50; visibility: visible; pointer-events:none; }
#cardback  {margin-left:-50%; }
#cardback img {opacity:0; }


#container.active #cardback {margin-left:0; -webkit-transition: margin-left 1s ease; -moz-transition: margin-left 1s ease; -o-transition: margin-left 1s ease;  transition: margin-left 1s ease;}
#container.active #cardback img {opacity: 1; -webkit-transition: opacity 1s ease; -moz-transition: opacity 1s ease; -o-transition: opacity 1s ease; transition: opacity 1s ease;}
#container.active #figblank {opacity:0; visibility: hidden; -webkit-transition: all 2s ease 0.8s; -moz-transition: all 2s ease 0.8s; -o-transition: all 2s ease 0.8s; transition: all 2s ease 0.8s;}

#container.reset #cardback {-webkit-transition:none; -moz-transition:none; -o-transition:none; transition:none;}
#container.reset #cardback img {-webkit-transition:none; -moz-transition:none; -o-transition:none; transition:none;} 
#container.reset #figblank {-webkit-transition:none; -moz-transition:none; -o-transition:none; transition:none;}

footer div {max-width: 1170px; margin: 0px auto 30px auto; text-align:center; padding: 0px 15px;}
footer div p { font-family: "Questrial",Arial,sans-serif; color:#666; line-height:130%;}
footer div a { font-family: "Questrial",Arial,sans-serif; color:#ccc; line-height:130%; margin: 0px 8px 5px 8px; text-decoration:none;}
footer div a:before {content:"a";margin-right: 4px;  font-family:FontAwesome; content:"\f111"; font-size: 80%; vertical-align:top;  }
footer div a:hover {color:#fff;}

/* Below 1700 */
@media only screen  and (max-width: 1700px)  {

    #figurelist div.figure {width: 15.7%;  padding:0.29%; }



}

/* Below 1500 */
@media only screen  and (max-width: 1500px)  {

    #figurelist div.figure {width: 19%;  padding:0.34%; }



}

/* Below 1200 */
@media only screen  and (max-width: 1200px)  {

 #figurelist div.figure {width: 23%;  padding:0.31%; }

 #inner {display:block; text-align:center; }
 #accessories {width: 80%; padding: 10px 10% 30px 10%; display: flex; flex-direction:row; justify-content:center; flex-wrap: wrap;}
  #accessories h2 {width: 90%; padding:0px 5% 7px 5%;}
#fig {border-right:0px}
   #cardback div.card { vertical-align:middle; text-align:right;  line-height:100vh;}
  #cardback div.card img { height:auto; width:95%; margin:auto 0px auto auto; vertical-align:middle;}


   #bottomnav {text-align:center;}
  #bottomnav a { border: 4px solid #555; padding:9px; font-size:110%;}
#bottomnav a:after { top:-4px; left:-4px; padding: 4px; -webkit-box-shadow: 0 0 0 4px #555; -moz-box-shadow: 0 0 0 4px #555; box-shadow: 0 0 0 4px #555; display:block;  transform:scale(0.95, 0.8); }



}


/* Below 980 */
@media only screen and (max-width:980px) {

    #figurelist div.figure {width: 31.5%;  padding:0.31%; }

    #mainnav a {margin: 20px 15px;  }
    #mainnav a span { width:200px;  height: 119px;  -webkit-background-size: cover;  -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
    #mainnav a.esb span {background-position: 0px -119px;}
    #mainnav a.rotj span {background-position: 0px -239px;}
    #mainnav a.tri span {background-position: 0px -358px;}
}


/* Below 800 */
@media only screen and (max-width:800px) {

#cardback {width:100%; position:relative; top:auto;  height:auto; overflow:visible;  margin-bottom:20px; margin-left:0px;}
#cardback div.card {height:auto;  line-height:normal; width:100%; padding:30px 0px 0px 0px; padding-bottom:15px; }
#cardback div.card img {width:70%; margin:0px auto 30px auto; display:block;}
#cardback div.curve {  height:40px; width:110%;  position: absolute;  bottom:-20px; left:0; margin-left:-5%; margin-right:0px;   margin-top:0px; top:auto;}

 
#details {width:100%; padding:0px; margin:0px; height:auto; } 
#details h1 {margin:30px;}

#bottomnav {width:100%; right:0px;}
#inner { overflow-y:hidden;}

}




/* Below 680 */
@media only screen  and (max-width:680px)  {
    #figurelist div.figure {width: 47%; padding: 0.5%; }
    #cardback div.card img {width:80%; margin-bottom:10px;}
}

/* Below 500 */
@media only screen  and (max-width:500px)  {
    #figurelist div.figure {width:100%; width: calc(100% - 20px);  padding:0; margin-bottom:7px; margin-right:10px; }
    #figurelist div.figure a div.panel {padding:15px;}
    #figurelist div.figure a div.panel:after {display:none; }
    #figurelist div.figure a div.panel div.text { position:relative; left:auto;  padding:0px; width:100%;  top: auto; -webkit-transform: none; -moz-transform: none; -ms-transform: none;   -o-transform: none; transform:none;  }
    #figurelist div.figure a:hover div.panel div.text {transform: scale(1.1);}

    #cardback div.card img {width:90%; }
    #details h1 {margin:30px 10px 30px 10px;}
}


/* Below 480 */
@media only screen  and (max-width:480px)  {





}