body {
  font-family: "Open Sans";
  font-weight: 300;
  color: #504F4D;
  margin: 0;
  padding: 0;
  z-index: 1;
  background: #065472 url(images/dotsrepeat.png) repeat center 20px fixed;
  min-height: 125%;
}

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
}

.center {
  text-align: center;
}

.clear {
  clear: both;
}

.shadow {
  -moz-box-shadow: 1px 1px 5px #ccc;
  -webkit-box-shadow: 1px 1px 5px #ccc;
  box-shadow: 1px 1px 5px #ccc;
}

p.emphasis {
  text-align: center;
  margin-top: 40px;
  font-style: italic;
}

p.dots {
  width: 320px;
  margin: 0 auto;
}

p.dots span {
  display: none;
}

p.special {
  font-family: "Cinzel Decorative", serif;
  font-size: 32px;
}

#illustration-links {
  position: relative;
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
}

#illustration-links p {
  position: relative;
  display: inline-block;
  float: left;
  margin: 0 0 10px 0;
  padding-left: 16px;
}

#illustration-links p:last-child {
  float: right;
}

#illustration-links a:before {
  position: absolute;
  left: 0;
  top: 8px;
  display: block;
  content: " ";
  width: 0;
  height: 0;
  border: 12px solid transparent;
  border-left: 12px solid #43A8DD;
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
}

#illustration-links a:hover:before {
  border: 12px solid transparent;
  border-left: 12px solid #1778B4;
}

.hometext p.review {
  font-size: 14px;
  margin: 10px;
}

.hometext p.review span {
  color: #504F4D;
}

a img {
  border: none;
}

a, p.videolink {
  color: #43A8DD;
  text-decoration: none;
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
  font-weight: 400;
}

a:hover, p.videolink:hover {
  color: #1778B4;
}

h2 {
  color: #6DC0EB;
  font-size: 32px;
  margin: 20px auto;
}

h2 a {
  color: #6DC0EB;
}

h2 a:hover {
  color: #1778B4;
}

h3 {
  color: #84817B;
  font-size: 18px;
  font-weight: 300;
}

p {
  text-align: left;
  font-size: 16px;
  font-weight: 300;
}

.facebook {
  position: absolute;
  display: none;
  right: 8px;
  top: 8px;
  width: 5vw;
  max-width: 34px;
  min-width: 24px;
  z-index: 120;
}

.facebook img {
  width: 100%;
}

#footer .facebook {
  position: relative;
  right: auto;
  top: -20px;
  margin: 0 auto;
  display: block;
}

.facebook-link {
  padding: 10px 40px 10px 0;
  background-image: url(images/facebook.png);
  background-repeat: no-repeat;
  background-position: right 8px;
  background-size: 30px;
}

#wrapper {
  position: relative;
  width: 100%;
  min-width: 320px;
  margin: 0 auto;
  text-align: center;
  padding: 0;
  z-index: 10;
  background: #FFFFFF;
}

#header {
  position: relative;
  width: 100%;
  min-width: 320px;
  height: auto;
  text-align: center;
  padding: 4px 0;
  margin: 0 auto;
  background: #6DC0EB;
  z-index: 50;
}

#headtext {
  position: relative;
  width: 100%;
  max-width: 700px;
  min-width: 320px; 
  margin: 0 auto;
  text-align: center;
}

#headtext h1 {
  color: #FFF;
  margin: 4px 0 1% 0;
  padding: 0;
  text-align: center;
  font-weight: 400;
  line-height: 100%;
  font-size: 18px;
  letter-spacing: 12px;
  -webkit-transition: color 0.8s;
  -moz-transition: color 0.8s;
  -ms-transition: color 0.8s;
  -o-transition: color 0.8s;
  transition: color 0.8s;
}

.blue {
  color: #1778B4;
}

#headtext span.blue {
  -webkit-transition: color 0.8s;
  -moz-transition: color 0.8s;
  -ms-transition: color 0.8s;
  -o-transition: color 0.8s;
  transition: color 0.8s;
}

#headtext:hover h1  {
  color: #1778B4;
}

#headtext:hover h1 span.blue {
  color: #FFF;
}

.italic {
  font-style: italic;
}

span.lastchar {
  letter-spacing: 0;
}

#wideback, #outerwideback {
  position: relative;
  width: 100%;
  height: auto;
  background: #086588;
  padding: 0;
}

#homemain, #homeback {
  position: relative;
  text-align: center;
  margin: 0 auto;
  padding: 0;
  width: 100%;
  max-width: 700px;
  min-width: 320px;
  max-height: 488px;
  overflow: hidden;
  background: #5EA9D1 url(images/fullbackb.jpg) no-repeat center top;
  background-size: contain;
  z-index: 10;
}

#homemain {
  border-left: 1px solid #0A759D;
  border-right: 1px solid #0A759D;
}

#innermain {
  position: relative;
  width: 100%;
  height: 100%;
  background: url(images/dotsrepeat.png) repeat center top fixed;
}

#bluefadetop, #bluefadebottom, #goosecontainer #bluefadebottom2 {
  position: absolute;
  left: 0;
  z-index: 90;
  width: 100%;
  height: 60%;
  background: url(images/bluefadetop.png) repeat-x center top;
  background-size: contain;
   -o-transition:1.5s;
  -ms-transition:1.5s;
  -moz-transition:1.5s;
  -webkit-transition:1.5s;
  transition:1.5s;
} 

#bluefadetop {
 top: -50%;
}

#bluefadebottom {
  bottom: -40%;
  height: 50%;
  background: url(images/bluefadebottom.png) repeat-x center bottom;
  background-size: contain;
}

#goosecontainer #bluefadebottom2 {
  bottom: -40%;
  height: 50%;
  background: url(images/bluefadebottom2.png) repeat-x center bottom;
  background-size: contain;
}   

#webdesign {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 200;
  background-image: url(images/bluearrow.png);
  background-repeat: no-repeat;
  background-size: 5%;
  background-position: -10% 55%;
  -o-transition:.8s;
  -ms-transition:.8s;
  -moz-transition:.8s;
  -webkit-transition:.8s;
  transition:.8s;
}

#webdesign:hover {
  background-position: 6% 55%;
}

#webdesign img {
  position: relative;
  z-index: 200;
  width: 66.71%;
  margin: 1.5% auto 0 auto;
  z-index: 1000;
}

#designgroup {
  position: relative;
  margin: -3% auto 0 auto;
  width: 100%;
  z-index: 200;
  overflow: hidden;
}

#designgroup img {
  width: 37.57%;
  margin: 0 auto;
  text-align: center;
  z-index: 200;
}

.spotlight {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 300;
}

.spotlight div {
  position: absolute;
  background: url(images/designgroupwhite.png) no-repeat 0 0;
}

#goosecontainer {
  position: relative;
  width: 100%;
  padding-bottom: 39.5%;
  max-width: 700px;
  margin: -5% auto 0 auto;
  text-align: center;
  z-index: 30;
}

#gooseback {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  background: url(images/treerepeat.png) repeat-x center 96%;
}

#goosescene {
  position: relative;
  top: 0;
  left: 0;
  width: 120%;
  max-width: 840px;
  margin: 0 0 0 -6%;
  z-index: 40;
}

#scene {
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#scene img {
  width: 100%;
  display: block;
  margin-top: 0;
  margin-left: -20px;
}

#illustration {
  position: absolute;
  bottom: 4.5%;
  left: 0;
  z-index: 400;
  width: 100%;
  background-image: url(images/bluearrow.png);
  background-repeat: no-repeat;
  background-size: 5%;
  background-position: -10% 70%;
  -o-transition:.8s;
  -ms-transition:.8s;
  -moz-transition:.8s;
  -webkit-transition:.8s;
  transition:.8s;
}

#illustration:hover {
  background-position: 6% 70%;
}

#illustration img {
  z-index: 400;
  margin: 0 auto;
  text-align: center;
  width: 69%;
}

#webdesign:hover ~ #bluefadetop {
  top: 0%;
  -o-transition:1.5s;
  -ms-transition:1.5s;
  -moz-transition:1.5s;
  -webkit-transition:1.5s;
  transition:1.5s;
}

#illustration:hover ~ #bluefadebottom, #illustration:hover ~ #goosecontainer #bluefadebottom2 {
  bottom: 0%;
  -o-transition:1.5s;
  -ms-transition:1.5s;
  -moz-transition:1.5s;
  -webkit-transition:1.5s;
  transition:1.5s;
}

#infobar {
  position: relative;
  float: left;
  width: 100%;
  min-width: 320px;
  height: auto;
  min-height: 30px;
  margin: 0;
  padding: 0;
  background: #6DC0EB;
  z-index: 50;
}

#infobar ul {
  width: 100%;
  padding: 10px 0;
  margin: 0;
}

#infobar ul li {
  display: inline;
  list-style: none;
  padding: 0;
  margin: 0;
}

#infobar a, #extrasdiv a {
  color: #FFF;
  text-align: center;
  padding: 2px;
  font-size: 16px;
  line-height: 16px;
  margin: 0;
}


#infobar a:hover, #extrasdiv a:hover {
   color: #1778B4;
}

#infobar ul li a {
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 2px;
  padding: 0;
  margin: 0 4px;
}

div.scrolldown {
  position: relative;
  margin: 4px auto;
  width: 50px;
  height: 50px;
  background: #6DC0EB;
  border-radius: 25px;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  cursor: pointer;
  z-index: 100;
  -moz-box-shadow: 1px 1px 6px -1px #000;
  -webkit-box-shadow: 1px 1px 6px -1px #000;
  box-shadow: 1px 1px 6px -1px #000;
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
}

div.scrolldown:hover {
  background: #086588; 
}

div.scrolldown div {
  position: absolute;
  top: 18px;
  left: 11px;
  height: 0;
  width: 0;
  border: 14px solid transparent;
  border-top: 18px solid white;
}

#navbar {
  background: #086588 url(images/dotsrepeat.png) repeat center top fixed;
  position: relative;
  width: 100%;
  float: left;
}

#innernavbar {
  background: none;
  position: relative;
  width: 100%;
  float: left;
}

#navback {
  background: url(images/treerepeatd.png) no-repeat right 90%;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding-bottom: 10px;
  border-left: 1px solid #0A759D;
  border-right: 1px solid #0A759D;
}

.toggleMenu {
    display:  none;
    position: relative;
    padding-top: 10px;
    width: 100%;
}

.toggle {
  float: left;
  clear: both;
  width: 38px;
  height: 4px;
  margin: 3px 0 3px 10px;
  background: #FFFFFF;
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  overflow: hidden;
  
}

#navcenter {
  position: relative;
  width: auto;
  float: right;
  right: 50%;
}

#navmenu {
  position: relative;
  width: auto;
  float: right;
  right: -50%;
}
.nav {
    list-style: none;
     *zoom: 1;
     padding-left: 0;
     margin: 0;
}
.nav:before,
.nav:after {
    content: " "; 
    display: table; 
}
.nav:after {
    clear: both;
}
.nav ul {
    list-style: none;
    width: auto;
    padding: 0;
    -moz-box-shadow: 1px 8px 8px -3px #000;
    -webkit-box-shadow: 1px 8px 8px -3px #000;
    box-shadow: 1px 8px 8px -3px #000;
    z-index: 100;
}
.nav a {
    padding: 10px 15px;
    color:#fff;
}
.nav li {
    position: relative;
}
.nav > li {
    float: left;
    background: url(images/sidearrow.png) no-repeat left 14px;
    padding-left: 8px;
    margin: 0 10px;
}

.nav >li.hover {    
        background: url(images/downarrow.png) no-repeat left 14px;
}

.nav > li > a {
    display: block;
    color: #6DC0EB;
}

.nav > li:hover > a {
  color: #FFFFFF;
}

.nav > li > ul {
    position: absolute;
    left: -9999px;
    margin-left: 44px;
}
.nav > li.hover > ul {
    left: -40px;
}
.nav li li.hover ul {
    left: 100%;
    top: 0;
}

.nav > li > ul li {
  height: 0;
  -webkit-transition: height 0.8s;
  -moz-transition: height 0.8s;
  -ms-transition: height 0.8s;
  -o-transition: height 0.8s;
  transition: height 0.8s;
}

.nav > li.hover > ul li {
  height: 40px;
  -webkit-transition: height 0.8s;
  -moz-transition: height 0.8s;
  -ms-transition: height 0.8s;
  -o-transition: height 0.8s;
  transition: height 0.8s;
  z-index: 500;
    }
    
.nav li li a {
    display: block;
    background: url(images/fullback.jpg) no-repeat left -80px;
    position: relative;
    z-index:100;
    border-top: 2px solid #086588;
    text-align: left;
    width: 170px;
}

.nav li li a.last {
  border-bottom: 2px solid #086588;
}

.nav li li a:hover {
  background: url(images/fullback.jpg) no-repeat left -260px;
}


#navbar h2 {
  font-size: 30px;
  font-weight: 400;
  line-height: 40px;
  letter-spacing: 6px;
  text-align: center;
  color: #FFFFFF;
  padding: 0;
  margin: 10px 0 0 0;
  clear: both;
}

#textmain {
  position: relative;
  margin: 0;
  float: left;
  width: 100%;
  height: auto;
  padding-bottom: 20px;
  background: #FFFFFF;
}

#hometext01, #hometext02, #hometext03 {
  position: relative;
  clear: both;
  float: none;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  min-width: 320px;
}

div.homecircle {
  position: relative;
  float: left;
  width: 30%;
  padding: 0;
  margin: 40px 0 0 2%;
}

div.circle {
  -moz-border-radius: 999px;
  -webkit-border-radius: 999px;
  border-top-left-radius: 999px;
  border-top-right-radius: 999px;
  border-bottom-left-radius: 999px;
  border-bottom-right-radius: 999px;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}

div.circle img {
  position: relative;
  float: left;
  width: 100%;
  padding: 0;
  margin: 0;
}

div.hometext {
  position: relative;
  float: left;
  text-align: left;
  width: 60%;
  margin: 10px auto 20px 5%;
}

div.hometext h2, div.hometext p {
  text-align: left;
  letter-spacing: 0.5px;
}

div.hometext h2 {
  padding: 0;
  margin: 20px 0 0 0;
}

div.hometext h3 {
  padding: 0;
  margin: 10px 0 0 0;
}

span.cited {
  margin-left: 30px;
  font-weight: 300;
}

div.homelinks {
  clear: both;
  width: 63.5%;
  padding: 0;
  margin-left: 36.5%;
  margin-right: 0;
}

#hometext03 div.homelinks {
  margin-bottom: 20px;
}

div.homelinks div {
  position: relative;
  float: left;
  width: 100%;
  margin: 2px 0;
  padding: 0;
}

div.buttons {
  position: relative;
  clear: both;
  width: auto;
  margin: 0 auto;
  text-align: center;
}

div.respdemo {
  padding-top: 10px;
  width: 220px;
  margin: 0 auto;
  background-image: url(images/downarrowb.png);
  background-repeat: no-repeat;
  background-position: 28px top;
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
}

div.homelinks div a, div.buttons span {
  position: relative;
  clear: both;
  color: #FFFFFF;
  font-size: 16px;
  margin: 0 5px 0 0;
  padding: 3px 5px 5px 5px;
  text-align: left;
  width: auto;
  background: #6DC0EB;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  overflow: hidden;
}

div.buttons p {
  text-align: center;
}

div.buttons span {
  clear: none;
  margin: 0 10px;
  cursor: pointer;
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
}

div.respdemo.buttons span {
  margin: 0 8px;
}

div.homelinks div a {
  position: relative;
  float: left;
  width: 90%;
  padding: 3px 8px 5px 24px;
  background: #6DC0EB url(images/sidearroww.png) no-repeat 4px 8px;
}

div.buttons span:hover {
  background: #086588;
}

div.homelinks div a:hover {
  background: #086588 url(images/sidearroww.png) no-repeat 4px 8px;
}

#respcont {
  position: relative;
  width: 90%;
  height: auto;
  margin: 0 auto 30px auto;
}

div.hometext #respcont {
  float: left;
  width: 100%;
  margin: 0;
}

#respsize {
  position: relative;
  width: 100%;
  height: auto;
}

div.shadow {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  overflow: hidden;
}

div.shadow.tablet {
  background: #D8F0FD;
  border: 2px solid #C0E8FD;
}

div.shadow.desktop {
  background: #F0F9FE;
  border: 2px solid #D8F0FD;
}

#respon {
  position: absolute;
  top: 0;
  left: 0;
  background: #000000;
  border: 2px solid #6DC0EB;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  overflow: hidden;
  -o-transition:1.8s;
  -ms-transition:1.8s;
  -moz-transition:1.8s;
  -webkit-transition:1.8s;
  transition:1.8s;
}

#resinner {
  width: 100%;
  height: 100%;
  background: #6DC0EB;
}

#res1 {
  background: #0195D0;
}

#res2 {
  background: #BCEAFC;
  overflow: hidden;
}

#res3 {
  background: #0D506A;
}

#res4 {
  background: #91CDE5;
}

#res4 div {
  position: relative;
  float: left;
  width: 80%;
  height: 40%;
  margin: 10% 10% 0 10%;
  background: #D7F2FD;
}

.phone {
  width: 18%;
  height: 60%;
  padding: 2% 0.5%;
}

.tablet {
  width: 35%;
  height: 85%;
  padding: 2.5% 1%;
}

.desktop {
  width: 100%;
  height: 100%;
  padding: 1.5%;
}

.respph #res1 {
  width: 100%;
  height: 25%;
}

.respph #res2 {
  width: 100%;
  height: 35%;
}

.respph #res3 {
  width: 100%;
  height: 40%;
}

.respph #res4 {
  width: 100%;
  height: 50%;
}

.resptab #res1 {
  width: 100%;
  height: 30%;
}

.resptab #res2 {
  float: left;
  width: 60%;
  height: 70%;
}

.resptab #res3 {
  float: left;
  width: 40%;
  height: 70%;
}

.resptab #res4 {
  width: 100%;
  height: 50%;
}

.respdesk #res1 {
  width: 100%;
  height: 30%;
}

.respdesk #res2 {
  float: left;
  width: 50%;
  height: 70%;
}

.respdesk #res3 {
  float: left;
  width: 50%;
  height: 70%;
}

.respdesk #res4 {
  width: 50%;
  height: 100%;
}

#respon p {
  position: relative;
  width: 100%;
  padding: 0;
  text-align: center;
  margin: 0 auto;
  color: #FFFFFF;
}

#respon.phone p {
  font-size: 10px;
}

#respon.tablet p {
  font-size: 14px;
}

#respon.desk p {
  font-size: 18px;
}

#respon #res2 p {
  text-align: left;
  color: #1778B4;
  margin: 1% 0 0 5%;
  width: 95%;
  font-size: 10px;
  line-height: 11px;
}

#responinfo #respon #res2 p {
  font-size: 12px;
  line-height: 14px;
}

#respon.tablet #res2 p, #respon.phone #res2 p {
  display: none;
}

p.ph {
  display: block;
}

p.tab, p.desk {
  display: none;
}

.opaque {
opacity: 1.0;
  filter: alpha(opacity=100);
  -ms-filter: "alpha(opacity=100)";
  -webkit-transition: opacity 3.5s ease;
  -moz-transition: opacity 3.5s ease;
  -ms-transition: opacity 3.5s ease;
  -o-transition: opacity 3.5s ease;
  transition: opacity 3.5s ease;
}

.transparent {
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "alpha(opacity=0)";
  -webkit-transition: opacity 3.5s ease;
  -moz-transition: opacity 3.5s ease;
  -ms-transition: opacity 3.5s ease;
  -o-transition: opacity 3.5s ease;
  transition: opacity 3.5s ease;
}
  
#trigmark1 {
  width: 30px;
  height: 1px;
  position: absolute;
  bottom: 40%;
}

#trigmark2 {
  width: 30px;
  height: 1px;
  position: absolute;
  bottom: 0%;
}

#resptrigger {
  position: fixed;
  top: 70%;
  right: 0;
  width: 150px;
  height: 1px;
  z-index: 1000;
}

.videolink {
  cursor: pointer;
}

div.hometext p.videolink {
  margin: 0 auto;
  padding: 0;
  text-align: center; 
  font-size: 12px;
}

#trailers {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

#trailers > div {
  position: relative;
  float: left;
  width: 100%;
}

#trailers > div:last-child {
  padding-bottom: 20px;
}

#trailers p {
  text-align: center;
  margin: 4px auto 12px auto;
  padding: 0;
}

#trailers p.videolink {
  margin: 20px auto 0px auto;
}

#trailerspot, #responinfo {
  position: relative;
  float: left;
  width: 100%;
  min-width: 320px;
  height: auto;
  margin: 30px auto 0 auto;
  padding: 0;
  text-align: center;
}

#outicecent, #responcent {
  position: relative;
  width: 300px;
  min-width: 300px;
  height: auto;
  margin: 0 auto;
  padding: 20px 0;
  text-align: center;
  border: 1px solid #C8EBFD;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px; 
}

#outicecent {
  padding: 0 20px 10px 20px;
}

div.trailercent {
  position: relative;
  width: 200px;
  margin: 0 auto;
  text-align: center;
  height: auto;
  padding-bottom: 4px;
}

#trailer, .ww-link {
  position: relative;
  float: left;
  width: 200px;
  height: auto;
  padding-bottom: 4px;
}

.ww-link {
  float: none;
  width: 100%;
  max-width: 390px;
}

.ww-link.full {  
  margin: 40px auto 20px auto;
}

#outicecent .ww-link {
  margin-top: 0;
}

.ww-link > div {
  position: relative;
}

.ww-link img {
  max-width: 100%;
}

div.trailerbutton {
  position: absolute;
  left: 64px;
  top: 17px;
  width: 80px;
  height: 80px;
  background: #6DC0EB;
  opacity: 0.7;
  filter: alpha(opacity=0.7);
  -ms-filter: "alpha(opacity=0.7)";
  -webkit-transition: opacity 0.8s ease;
  -moz-transition: opacity 0.8s ease;
  -ms-transition: opacity 0.8s ease;
  -o-transition: opacity 0.8s ease;
  transition: opacity 0.8s ease;
  cursor: pointer;
  border: 2px solid white;
}

.ww-link .trailerbutton {
  top: 50%;
  left: 50%;
  margin-top: -40px;
  margin-left: -40px;
}

.ww-link p {
  margin-top: 6px;
}

.ww-link p i {
  font-size: 14px;
}

div.tbsmall {
  left: 34px;
  top: 8px;
  width: 40px;
  height: 40px;
}

div.trailerbutton:hover {
  opacity: 1;
  filter: alpha(opacity=1);
  -ms-filter: "alpha(opacity=1)";
  -webkit-transition: opacity 0.8s ease;
  -moz-transition: opacity 0.8s ease;
  -ms-transition: opacity 0.8s ease;
  -o-transition: opacity 0.8s ease;
  transition: opacity 0.8s ease;
}

div.trailerbutton div {
  position: absolute;
  top: 20px;
  left: 30px;
  width: 0;
  height: 0;
  border: 20px solid transparent;
  border-left: 30px solid white;
}

div.tbsmall div {
  top: 6px;
  left: 14px;
  border: 14px solid transparent;
  border-left: 20px solid white;
}

#video1 {
  display: none;
  z-index: 130;
}

div.playerwrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 800;
  background: #001922;
}

div.table {
  position: relative;
  display: table;
  width: 100%;
  height: 100%;
}

div.table-cell {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  height: 100%;
}

div.center-block {
  position: relative;
  margin: 0 auto;
  text-align: center;
  width: 100%;
}

div.player {
  position: relative;
  padding-bottom: 56.25%;
  width: 100%; 
  max-width: 930px;
  margin: 0 auto;
  height: 0; 
  overflow: hidden;
}

div.player iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 930px;
  max-height: 523px;
}

img.vidclose {
  position: absolute;
  top: -32px;
  right: 10px;
  width: 24px;
  height: 24px;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "alpha(opacity=0)";
  -webkit-transition: opacity 0.4s ease;
  -moz-transition: opacity 0.4s ease;
  -ms-transition: opacity 0.4s ease;
  -o-transition: opacity 0.4s ease;
  transition: opacity 0.4s ease;
  z-index: 2000; 
}

#video1:hover img.vidclose {
  opacity: 0.5;
  filter: alpha(opacity=50);
  -ms-filter: "alpha(opacity=50)";
  -webkit-transition: opacity 0.4s ease;
  -moz-transition: opacity 0.4s ease;
  -ms-transition: opacity 0.4s ease;
  -o-transition: opacity 0.4s ease;
  transition: opacity 0.4s ease;
}

#video1:hover img.vidclose:hover {
  opacity: 1.0;
  filter: alpha(opacity=100);
  -ms-filter: "alpha(opacity=100)";
  -webkit-transition: opacity 0.4s ease;
  -moz-transition: opacity 0.4s ease;
  -ms-transition: opacity 0.4s ease;
  -o-transition: opacity 0.4s ease;
  transition: opacity 0.4s ease;
  cursor: pointer;
}

#text {
  width: 800px;
  max-width: 94%;
  min-width: 300px;
  margin: 0px auto;
  text-align: center;
}

div.question {
  position: relative;
  clear: both;
  width: 100%;
}

div.question p {
  position: relative;
  clear: both;
  min-height: 165px;
  padding: 10px 20px;
  margin: 0;
  background-image: url(images/aback.png);
  background-repeat: no-repeat;
  background-position: 10px 10px;
  -o-transition:2.5s;
  -ms-transition:2.5s;
  -moz-transition:2.5s;
  -webkit-transition:2.5s;
  transition:2.5s;
  border-radius: 14px;
  -moz-border-radius: 14px;
  -webkit-border-radius: 14px; 
}

.qback {
  position: relative;
  float: left;
  width: 200px;
  height: 165px;
  background: url(images/qback.png) no-repeat center top;
  opacity: 0.4;
  filter: alpha(opacity=0.4);
  -ms-filter: "alpha(opacity=40)";
  -webkit-transition: opacity 0.4s ease;
  -moz-transition: opacity 0.4s ease;
  -ms-transition: opacity 0.4s ease;
  -o-transition: opacity 0.4s ease;
  transition: opacity 0.4s ease;
}

.fadeup {
  opacity: 1.0;
  filter: alpha(opacity=100);
  -ms-filter: "alpha(opacity=100)";
  -webkit-transition: opacity 0.5s ease;
  -moz-transition: opacity 0.5s ease;
  -ms-transition: opacity 0.5s ease;
  -o-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
}

div.question h2 {
  position: absolute;
  top: 5%;
  left: 10%;
  text-align: left;
  font-size: 24px;
  -o-transition:0.5s;
  -ms-transition:0.5s;
  -moz-transition:0.5s;
  -webkit-transition:01.5s;
  transition:0.5s;
}

.textfade h2 {
  color: #1778B4;
}

p.textback {
  background-color: #C8EBFD;
  background-image: url(images/aback.png);
  background-repeat: no-repeat;
  background-position: left top;
  color: #4F4D4A;
  -o-transition:background-image 0.5s ease-in-out;
  -ms-transition:background-image 0.5s ease-in-out;
  -moz-transition:background-image 0.5s ease-in-out;
  -webkit-transition:background-image 0.5s ease-in-out;
  transition:background-image 0.5s ease-in-out;
}

#leftbar, #leftbarslider {
  display: none;
}

.jumpto {
  cursor: pointer;
}

#mainslider {
  width: 100%;
  min-width: 320px;
}


#booksslider, #designslider, #galleryslider {
  width: 100%;
  max-width: 900px;
  overflow: hidden;
  margin: 20px auto 8px auto;
  padding-bottom: 10px;
}

#designslider {
  margin: 0 auto 20px auto;
}

#designslider .flex-control-nav {
  margin-top: 20px;
}

#designslider .flex-control-nav li {
  margin: 2.5px;
}

#galleryslider {
  position: relative;
  margin: 0 auto;
  padding: 0;
}

#galleryslider ul.slides {
  position: relative;
  height: 100%;
}

#booksslider ul.slides > li, #designslider ul.slides > li, #galleryslider ul.slides > li {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 900px;
  min-width: 320px;
  padding: 4px 0;
}

#galleryslider ul.slides > li {
  height: 105%;
}

#galleryslider ul.slides li > div {
  position: relative;
  width: 100%;
  height: 100%;
}

#galleryslider ul.slides li > div > div {
  position: absolute;
  bottom: 0;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

#galleryslider p {
  text-align: center;
  font-size: 12px;
  margin: 4px auto 0 auto;
  line-height: 14px;
  padding: 0;
}

#galleryslider p span {
  font-weight: 600;
  font-style: italic;
}

#galleryslider img {
  width: 90%;
  max-width: 600px;
  margin: 0 auto;
}

#galleryslider li.square img {
  width: 60%;
  max-width: 480px;
}

#galleryslider li.tall img {
  width: 57%;
  max-width: 440px;
  float: left;
  margin-left: 5%;
}

#galleryslider li.mid img {
  width: 78%;
  max-width: 540px;
}

#galleryslider li.wide img {
  width: 100%;
  max-width: 760px;
}

#galleryslider li.thin img {
  width: 48%;
  max-width: 330px;
  float: left;
  margin-left: 8%;
}

#galleryslider ul.slides li.thin > div > div, #galleryslider ul.slides li.tall > div > div {
  top: 0%;
  right: 0px;
  width: 32%;
  padding: 10% 0;
  right: 5%;
}

#galleryslider .flex-control-nav {
  display: none;
}

.hide {
  visibility: hidden;
}

.display {
  visibility: visible;
}

div.bookcover {
  position: relative;
  float: none;
  width: auto;
  max-width: 252px;
  margin: 0 auto;
}

.flexslider .slides div.bookcover img {
  width: auto;
  max-width: 100%;
	height: 252px;
  margin: 0 auto;
  text-align: center;
  -moz-box-shadow: 1px 1px 5px #ccc;
  -webkit-box-shadow: 1px 1px 5px #ccc;
  box-shadow: 1px 1px 5px #ccc;
}

div.bookcover img.tall {
  max-width: 198px;
} 

div.screenshot {
  position: relative; 
  margin: 24px auto;
  text-align: center; 
  width: 80%;
  min-width: 280px;
  max-width: 400px;
} 

div.screenshot img {
  position: relative;
  width: 100%;
  left: 0;
  top: 0;
  -moz-box-shadow: 1px 1px 4px -1px #000;
  -webkit-box-shadow: 1px 1px 4px -1px #000;
  box-shadow: 1px 1px 4px -1px #000;
}

div.screenshot:hover img {
  top: 1px;
  -moz-box-shadow: 1px 1px 4px -2px #000;
  -webkit-box-shadow: 1px 1px 4px -2px #000;
  box-shadow: 1px 1px 4px -2px #000;
}

#empress p, #empress p a {
  max-width: 56%;
  font-size: 13px;
  line-height: 18px;
  font-weight: bold;
  letter-spacing: 0.5px;
  font-style: italic;
}

#subscribe-empress {
  position: absolute;
  bottom: 5px;
  right: 0;
  border-radius: 999px; 
  border: 1px solid #bbb;
  background: url(images/design/subscribe-empress.gif) no-repeat 69.3% 115.5%; 
  background-size: 90%; 
  overflow: hidden; 
  margin: 10px auto 0 auto; 
  width: 120px; 
  height: 120px;
}

#empressgenerator {
  background: url(images/design/generator-bottom-right.jpg) no-repeat right bottom;
  background-size: 150px;
}

#empresscalculator {
  background: url(images/design/calculator-pot.jpg) no-repeat right bottom;
  background-size: 100px;
}

#watts {
  background: url(images/design/wattsback.jpg) no-repeat right bottom;
}

#jimenez {
  background: url(images/design/jimenezback.png) repeat-x right 86%;
}

#kearns {
  background: url(images/design/kearnsback.jpg) no-repeat 102% 100%;
}

#rcynu {
  background-image: url(images/design/rcynuback.jpg);
  background-repeat: no-repeat;
  background-position: center 138px;
  background-size: 240px;
}

#tao div.circle {
  position: absolute;
  width: 200px;
  max-width: 40%;
  bottom: 8%;
  right: 0;
}

#tao div.circle img {
  width: 100%;
}

#lategig {
  width: 104px; 
  height: 104px; 
  position: absolute; 
  bottom: 1%; 
  right: 1%;
}

.mobileview > div {
  position: absolute;
  bottom: 4%;
  right: 1%;
  width: 108px;
  max-width: 25%;
  border: 2px solid #6DC0EB;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  margin: 0;
  padding: 0;
}

.mobileview > div > img {
  width: 100%;
}

.designinfo ul li {
  font-size: 14px;
  padding-left: 20px;
  text-indent: -20px;
}

ul.limited {
  width: 70%;
}

#ladybird, #ladybird_clone {
  position: absolute; 
  top: -24px; 
  left: -22px; 
  width: 100px; 
  height: 100px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

div.screenshot:hover #ladybird {
  top: -23px;
}

img.butterfly {
  position: absolute;
  z-index: 10;
}

#bluefly {
  width: 150px;
  height: 200px;
  bottom: 116px;
  right: 0px;
}

#pinkfly {
  width: 150px;
  height: 100px;
  bottom: 120px;
  right: 80px;
}

#orangefly {
  width: 180px;
  height: 140px;
  bottom: 110px;
  right: 84px;
}

.stars {
  position: relative;
  width: 100%;
  max-width: 500px;
  height: 30px;
  text-align: center;
  margin: 40px auto;
}

.flex-active-slide .stars .star {
  height: 100%;
  width: 30px;
  display: inline-block;
  margin: 0 10px;
  background: url(images/design/star.png) no-repeat center top;
  background-size: 100%;
  opacity: 1;
  -webkit-animation: spin2 6s ease infinite;
  -moz-animation: spin2 6s ease infinite;
  animation: spin2 6s ease infinite;
}

.flex-active-slide .stars .star1 {
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  animation-delay: 2s;
}

.flex-active-slide .stars .star3 {
  -webkit-animation-delay: 4s;
  -moz-animation-delay: 4s;
  animation-delay: 4s;
}

@-moz-keyframes spin2 {
    0% { -moz-transform: rotate(0deg); }
    100% { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin2 {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin2 {
    0%  { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#bookscarousel, #gallerycarousel {
  display: block;
  width: 98%;
  max-width: 700px;
  overflow: hidden;
  margin: 0 auto 1% auto;
}

#bookscarousel li {
  margin: 0 5px 0 0;
}

#gallerycarousel li {
  max-width: 52px;
  margin: 0 5px 0 0;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  overflow: hidden;
}

div.bookinfo, div.designinfo {
  position: relative;
  float: none;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: 0 10px;
}

div.designinfo {
  width: 80%;
  min-width: 280px;
  height: 220px;
  max-width: 400px;
  padding: 0;
}

.slider h3 {
  font-weight: 400;
  font-size: 20px;
  line-height: 22px;
  margin: 8px auto 0 auto;
  padding: 0 30px;
}

#booksslider p {
  text-align: center;
}

p.by {
  margin: 2px auto;
  font-size: 12px;
  line-height: 14px;
  padding: 0 30px;
}

p.sum {
  margin: 4px auto;
  font-size: 14px;
  line-height: 16px;
  font-style: italic;
  font-weight: 300;
}

p.review {
  margin: 8px auto;
  font-size: 14px;
  line-height: 16px;
  font-style: italic;
  color: #43A8DD;
  font-weight: 400;
}

p.review span {
  font-weight: 300;
  font-style: normal;
}

p.noted {
  margin: 0 auto;
  font-size: 11px;
  line-height: 13px;
  font-weight: 600;
}

div.designinfo h3, div.designinfo h4, div.designinfo ul {
  position: relative;
  z-index: 30;
  text-align: left;
  padding: 0;
  margin: 6px 0;
}

div.designinfo h3 {
  margin-top: 20px;
}

div.designinfo ul {
  list-style: none;
}

#bookscarousel img, #gallerycarousel img {
  display: block; 
  opacity: 0.9;
  -moz-opacity: 0.9; 
  filter: alpha(opacity=90); /* internet explorer */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=70)"; /*IE8*/ 
    cursor: pointer;
}
#bookscarousel img:hover, #gallerycarousel img:hover {
  opacity: 1;
  -moz-opacity: 1; 
  filter: alpha(opacity=100); /* internet explorer */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=100)"; /*IE8*/
}
#bookscarousel .flex-active-slide img, #gallerycarousel .flex-active-slide img {
  opacity: 1;
  -moz-opacity: 1; 
  filter: alpha(opacity=100); /* internet explorer */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=100)"; /*IE8*/ 
  cursor: default;
}

#fadetrigger1 {
  position: fixed;
  top: 20%;
  right: 0;
  width: 150px;
  height: 1px;
}

#fadetrigger2 {
  position: fixed;
  top: 40%;
  right: 0;
  width: 150px;
  height: 1px;
}

#copyright p {
  font-size: 13px;
  line-height: 14px;
  text-align: center;
}

#excont {
  position: relative;
  float: left;
  width: 100%;
  min-width: 320px;
  overflow: hidden;
  background: #6DC0EB;
  margin: 0;
  padding: 0;
  z-index: 5;
}

#extras {
  position: relative;
  float: none;
  text-align: center;
  width: 886px; 
  max-width: 100%; 
  overflow: hidden;
  height: 80px;
  margin: 0 auto;
  z-index: 10;
}

#svglines {
  position: absolute;
  width: 560px;
  top: 4px;
  left: 50%;
  margin-left: -280px;
  height: 44px;
  z-index: 300;
}

#extras h2 {
  position: relative;
  margin: 12px auto 0 auto;
  text-align: center;
  font-family: "Cinzel Decorative";
  font-weight: 400;
  font-size: 24px;
  line-height: 28px;
  color: #91CFFA;
  letter-spacing: 0px;
  width: 180px;
  padding-left: 6px;
  z-index: 20;
  -o-transition:2.5s;
  -ms-transition:2.5s;
  -moz-transition:2.5s;
  -webkit-transition:2.5s;
  transition:2.5s;
}

#extras h2.white {
  color: #FFFFFF;
  letter-spacing: 6px;
}

#extras h2.pale {
  color: #91CFFA;
  letter-spacing: 0px;
}

#extrasdiv {
  position: relative;
  float: left;
  width: 100%;
  margin: 0 0 10px 0;
  padding: 0;
  z-index: 10;
}

#extrasdiv h4 {
  color: #FFFFFF;
  margin: 0 0 20px 0;
  font-weight: 300;
  font-size: 18px;
  line-height: 18px;
}

#extrasdiv h4 a {
  font-weight: 400;
  font-size: 18px;
}

#svgtrigger {
  position: fixed;
  bottom: 160px;
  right: 0;
  width: 150px;
  height: 1px;
  z-index: 900;
}

#footer {
  position: relative;
  float: left;
  width: 100%;
  min-width: 320px;
  margin: 0;
  padding-bottom: 30px;
  z-index: 100;
}

#foldpush {
  position: absolute;
  top: 100%;
  height: 160px;
  width: 100%;
  z-index: 1;
}

#sitemap {
  width: 96%;
  max-width: 900px;
  margin: 20px auto;
  text-align: center;
}

div.sitegroup {
  position: relative;
  float: left;
  width: 49%;
  min-width: 140px;
  height: 90px;
  padding: 0;
  margin: 0.5%;
  background: url(images/transpblue.png) repeat;
  border: 1px solid #086588;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  overflow: hidden;
}

#footer h4 {
  color: #6DC0EB;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 1px;
  text-align: left;
  padding: 0;
  margin: 4px 0 0 10px;
}

#footer p {
  color: #6DC0EB;
  font-size: 12px;
  text-align: center;
  position: relative;
  clear: both;
  line-height: 80px;
  font-weight: 300;
  letter-spacing: 1px;
}

#footer a {
  color: #6DC0EB;
  font-size: 13px;
  font-weight: 300;
  text-align: left;
  padding-left: 6px;
  letter-spacing: 1px;
  line-height: 13px;
}

#footer a:hover {
  color: #FFFFFF;
}

#footer h4 a {
  font-size: 14px;
  padding: 0;
}

#footer h4 a:hover {
  color: #FFFFFF;
}


#footer li {
  list-style: none;
  font-size: 13px;
  font-weight: 300;
  text-align: left;
  text-indent: -10px;
}

#footer li a::before {
    content: "•";
    color: #FFFFFF;
    font-size: 13px;
    position: relative;
    top: 0px;
    margin-right: 5px;
    line-height: 13px;
}

#footer li a:hover::before {
    content: "•";
    color: #FFFFFF;
    font-size: 25px;
    margin-left: -2.5px;
    margin-right: 4px;
    letter-spacing: 0;
    top: -2px;
    vertical-align: middle;
    line-height: 13px;
}

#footer ul {
  margin: 0;
  padding-left: 20px;
}

.cb-slideshow {
  position: relative;
  height: 94px;
  overflow: hidden;
  width: 800px;
  max-width: 100%;
  padding: 0;
  margin: 0;
}

.cb-slideshow li {
  list-style: none;
  width: 700px;
  max-width: 100%;
  margin: 0;
  padding: 0;
  text-indent: 0;
  overflow: hidden;
}

.cb-slideshow li span { 
  position: absolute;
  float: left;
  left: 0;
  width: 100%;
  max-width: 100%;
  height: 100px;
  text-align: left;
  overflow: hidden;
    color: transparent;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 84s linear infinite 0s;
    -moz-animation: imageAnimation 84s linear infinite 0s;
    -o-animation: imageAnimation 84s linear infinite 0s;
    -ms-animation: imageAnimation 84s linear infinite 0s;
    animation: imageAnimation 84s linear infinite 0s;     
}

.cb-slideshow li:nth-child(1) span { 
    background-image: url(images/newlong01.jpg);
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    -o-animation-delay: 0s;
    -ms-animation-delay: 0s;
    animation-delay: 0s; 
}

.cb-slideshow li:nth-child(2) span { 
    background-image: url(images/newlong02.jpg);
    -webkit-animation-delay: 14s;
    -moz-animation-delay: 14s;
    -o-animation-delay: 14s;
    -ms-animation-delay: 14s;
    animation-delay: 14s; 
}
.cb-slideshow li:nth-child(3) span { 
    background-image: url(images/newlong01.jpg);
    -webkit-animation-delay: 28s;
    -moz-animation-delay: 28s;
    -o-animation-delay: 28s;
    -ms-animation-delay: 28s;
    animation-delay: 28s; 
}
.cb-slideshow li:nth-child(4) span { 
    background-image: url(images/newlong02.jpg);
    -webkit-animation-delay: 42s;
    -moz-animation-delay: 42s;
    -o-animation-delay: 42s;
    -ms-animation-delay: 42s;
    animation-delay: 42s; 
}
.cb-slideshow li:nth-child(5) span { 
    background-image: url(images/newlong01.jpg);
    -webkit-animation-delay: 56s;
    -moz-animation-delay: 56s;
    -o-animation-delay: 56s;
    -ms-animation-delay: 56s;
    animation-delay: 56s;
} 
.cb-slideshow li:nth-child(6) span { 
    background-image: url(images/newlong02.jpg);
    -webkit-animation-delay: 70s;
    -moz-animation-delay: 70s;
    -o-animation-delay: 70s;
    -ms-animation-delay: 70s;
    animation-delay: 70s; 
}

@-webkit-keyframes imageAnimation { 
    0% { opacity: 0;
    background-position: 0 top;
    -webkit-animation-timing-function: ease-in; }
    5% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    22% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0;
    background-position: -3248px top; }
}
@-moz-keyframes imageAnimation { 
    0% { opacity: 0;
    background-position: 0 top;
    -webkit-animation-timing-function: ease-in; }
    5% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    22% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0;
    background-position: -3248px top; }
}
@-o-keyframes imageAnimation { 
    0% { opacity: 0;
    background-position: 0 top;
    -webkit-animation-timing-function: ease-in; }
    5% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    22% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0;
    background-position: -3248px top; }
}
@-ms-keyframes imageAnimation { 
    0% { opacity: 0;
    background-position: 0 top;
    -webkit-animation-timing-function: ease-in; }
    5% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    22% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0;
    background-position: -3248px top; }
}
@keyframes imageAnimation { 
    0% { opacity: 0;
    background-position: 0 top;
    -webkit-animation-timing-function: ease-in; }
    5% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    22% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0;
    background-position: -3248px top; }
}
.no-cssanimations .cb-slideshow li span {
    opacity: 1;
}


@media screen and (min-width: 400px) {

#infobar ul li {
  margin: 0 4px;
}

#respon #res2 p {
  font-size: 12px;
  line-height: 14px;
}

#galleryslider ul.slides li > div > div {
  bottom: 8px;
}

.designinfo ul li {
  font-size: 16px;
}

#rcynuillus .designinfo div {
  width: 75%;
  right: 1%; 
}

}

@media screen and (min-width: 460px) {

.facebook {
  display: block;
}

#subscribe-empress {
  width: 130px; 
  height: 130px;
} 

#empress p, #empress p a {
  max-width: 58%;
}

}

@media screen and (min-width: 530px) {

h2 {
  font-size: 32px;
}

h3 {
  font-size: 26px;
}

.facebook-link {
  padding: 10px 50px 10px 0;
  background-size: 40px;
}

#infobar {
  min-height: 40px;
}

#infobar ul li a {
  margin: 0 10px;
}

div.scrolldown {
  margin: 10px auto;
}

div.homelinks div {
  width: auto;
}

div.homelinks div a {
  width: auto;
  margin: 0 8px 0 0;
}

#respon.phone p {
  font-size: 12px;
}

#respon #res2 p {
  font-size: 14px;
  line-height: 16px;
  margin-top: 5%;
}

#galleryslider ul.slides li > div > div {
  bottom: 14px;
}

#galleryslider p {
  font-size: 14px;
  margin: 10px auto 0 auto;
  line-height: 16px;
}

#designslider .flex-control-nav li {
  margin: 3.5px;
}

.mobileview > div {
  right: 14px;
}

#rcynu {
  background-position: center 134px;
  background-size: 256px;
}

#trailers > div {
  width: 50%;
  margin: 2px auto;
}

#outicecent {
  width: 360px;
}

#svglines {
  width: 886px;
  top: 12px;
  left: 50%;
  margin-left: -443px;
}

#extras h2 {
  font-size: 40px;
  line-height: 40px;
  margin-top: 18px;
}

#subscribe-empress {
  width: 140px; 
  height: 140px;
} 

}

@media screen and (min-width: 680px) {

h2 {
  font-size: 40px;
}

#extras h2 {
  width: 210px;
}

h3 {
  font-size: 30px;
}

.facebook-link {
  background-position: right 12px;
}

div.bookcover {
  float: left;
  width: 40%;
  max-width: 252px;
  height: auto;
  max-height: none;
  margin-left: 8%;
}

div.bookinfo {
  float: left;
  width: 45%;
  padding: 0 20px;  
}

#booksslider h3 {
  font-size: 30px;
  line-height: 32px;
  margin: 0px auto 4px auto;
  padding: 0;
}

p.by {
  margin: 6px auto;
  font-size: 14px;
  line-height: 16px;
  padding: 0;
}

p.sum {
  margin: 16px auto;
  font-size: 16px;
  line-height: 18px;
}

p.review {
  margin: 18px auto;
  font-size: 16px;
  line-height: 18px;
}

p.noted {
  margin: 6px auto;
  font-size: 13px;
  line-height: 15px;
}

div.sitegroup {
  width: 24%;
}

#galleryslider li.square img {
  float: left;
  margin-left: 6%;
}

#galleryslider li.square.square2 img {
  margin-left: 8%;
}

#galleryslider ul.slides li.square > div > div {
  top: 0%;
  right: 0px;
  width: 32%;
  padding: 16% 0 0 3%;
  right: 5%;
}

#galleryslider ul.slides li.square.square2 > div > div {
  width: 28%;
}

}


@media screen and (max-width: 700px) {

#navcenter {
  width: 100%;
  float: left;
  right: 0;
  padding: 0;
}

#navmenu {
  position: relative;
  width: 100%;
  float: left;
  right: 0;
}

.active {
        display: block;
    }
    
    .nav a {
    padding: 10px 0;
}
        
    .nav > li {
        float: none;
        background: url(images/sidearrow.png) no-repeat 25% 12px;
        padding-left: 0;
    }

    .nav ul {
        display: block;
        left: 0;
        padding: 0;
        width: 100%;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    
    .nav li ul {
      margin-left: 0;
    }
    
    .nav > li ul li {
      height: 40px;
    }
   
   .nav > li.hover > ul {
        position: static;
        left: 0;
    }
    .nav > li.hover {    
        background: url(images/downarrow.png) no-repeat 25% 12px;
    }
    
    .nav li li a {
    text-align: center;
    width: 100%;
    padding-left: 0;
}

}

@media screen and (min-width: 700px) {

#innernavbar {
  background: url(images/navback.png) no-repeat center top;
}

#headtext h1 {
  font-size: 33px;
}

#outerwideback {
  background: #065472 url(images/dotsrepeat.png) repeat center top fixed;
}

#wideback {
  background: url(images/treerepeat.png) repeat-x center 98%;
}

div.playerwrap {
  background: rgba(0, 25, 34, 0.85);
}

div.table {
  width: 90%;
  max-width: 930px;
  height: 90%;
  margin: 0 auto;
}

div.player {
  margin-top: 40px;
}

img.vidclose {
  right: 0;
}

#resptrigger {
  top: 70%;
}

}
@media screen and (min-width: 740px) {

p.dots {
  width: auto;
}

p.dots span {
  display: inline;
  font-size: 36px;
  line-height: 10px;
  position: relative;
  top: 8px;
  color: #43A8DD;
}

}

@media screen and (min-width: 1000px) {

#galleryslider ul.slides li.square > div > div {
  right: 10%;
}

#galleryslider ul.slides li.thin > div > div, #galleryslider ul.slides li.tall > div > div {
  right: 10%;
}

}

@media screen and (min-width: 1400px) {

#headtext {
  height: 40px;
}

#textmain {
  position: relative;
  float: none;
  width: 100%;
  max-width: 1900px;
  height: auto;
  margin: 0 auto;
  padding-bottom: 20px;
  display: table;
}

#textmain.maxwidth {
  max-width: 1800px;
}

#homegroup {
  position: absolute;
  width: 66%;
  height: 100%;
  right: 0;
  top: 0;
}

#hometext01, #hometext02, #hometext03 {
  position: relative;
  display: table-cell;
  vertical-align: top;
  clear: none;
  float: left;
  width: 50%;
  margin: 0;
  height: 100%;
}

#hometext01 {
  width: 33%;
  float: left;
  padding-bottom: 40px;
}

#leftbar h3, #responinfo h3, #trailerspot h3 {
  font-size: 22px;
}

div.homecircle {
  position: relative;
  top: 0;
}

div.hometext {
  position: relative;
  top: 0;
  width: 60%;
  height: auto;
  padding-bottom: 20px;
}

div.homelinks {
  position: absolute;
  bottom: 20px;
}

#hometext01 div.homelinks {
  bottom: 0%;
}

div.homelinks div a {
  margin-right: 3px;
}

#hometext03 div.homelinks {
  margin-bottom: 0;
}

#trailer {
  padding-bottom: 0px;
}

.hometext .ww-link {
  width: auto;
}

#leftbar {
  display: block;
  float: left;
  width: 23%;
  margin: 0;
}

#leftbar ul, #leftbar p, #leftbar h3 {
  width: 84%;
  margin: 0 auto;
}

#leftbar h3 {
  height: auto;
}

#leftbar ul {
  list-style: none;
  padding: 10px 5px 30px;
  text-align: center;
  border: 1px solid #C8EBFD;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
}

#leftbar p {
  margin: 20px auto;
}

#leftbar ul li {
  text-align: center;
  cursor: pointer;
  padding: 0;
  margin: 8px auto;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 1px;
  line-height: 17px;
  color: #43A8DD;
  -o-transition:0.6s;
  -ms-transition:0.6s;
  -moz-transition:0.6s;
  -webkit-transition:0.67s;
  transition:0.6s;
}

#leftbar ul li:hover {
  color: #1778B4;
}

#galleryslider li.square img {
  margin-top: -20px;
}

#galleryslider li.square.square2 img {
  margin-top: 0;
}

#galleryslider ul.slides li.square > div > div {
  right: 2%;
}

#leftbarslider {
  float: left;
  display: block;
  width: 23%;
  margin-top: 0px;
}

#leftbarthumbs {
  width: 260px;
  margin: 0 auto;
}

#leftbarthumbs .flex-control-nav {
  margin-top: 30px;
}

#leftbarthumbs > ul {
  width: 260px;
}

#leftbarthumbs div {
  width: 260px;
  margin: 12px auto 0 auto;
}

#leftbarthumbs ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#leftbarthumbs > ul > li {
  width: 260px;
}

#leftbarthumbs ul > li div > ul > li {
  position: relative;
  width: 22%;
  margin: 1.5% 1.5%;
  float: left;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  overflow: hidden;
}

#leftbarthumbs ul img {
  position: relative;
  width: 100%;
  opacity: 1.0;
  filter: alpha(opacity=100);
  -ms-filter: "alpha(opacity=100)";
  -webkit-transition: opacity 0.4s ease;
  -moz-transition: opacity 0.4s ease;
  -ms-transition: opacity 0.4s ease;
  -o-transition: opacity 0.4s ease;
  transition: opacity 0.4s ease;
}

#leftbarthumbs ul img:hover {
  position: relative;
  width: 100%;
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
  -webkit-transition: opacity 0.4s ease;
  -moz-transition: opacity 0.4s ease;
  -ms-transition: opacity 0.4s ease;
  -o-transition: opacity 0.4s ease;
  transition: opacity 0.4s ease;
}

#leftbarthumbs p {
  display: inline;
  color: #FFFFFF;
  margin: 0 1px;
  padding: 2px 14px 18px 14px;
  cursor: pointer;
  font-weight: 400;
  background: #6DC0EB url(images/sidearroww.png) no-repeat center 90%;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  overflow: hidden;
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
}

#leftbarthumbs p.left {
  background: #6DC0EB url(images/backarroww.png) no-repeat center 90%;
}

#leftbarthumbs p:hover {
  background-color: #429ED7;
}

#leftbarthumbs p.onslide {
  color: #FFFFFF;
  cursor: auto;
  background: #1778B4 url(images/downarrow.png) no-repeat center 90%;
}

#mainslider {
  width: 54%;
  max-width: 54%;
  float: left;
}

#booksslider, #booksslider li, #designslider, #designslider li {
  max-width: 840px;
}

#galleryslider li.thin img {
  margin-left: 14%;
}

#galleryslider .flex-control-nav {
  margin-top: 0px;
  display: inline;
}

#galleryslider .flex-control-nav li {
  margin: 10px 3.5px 0 3.5px;
}

#designslider .flex-control-nav {
  margin-top: 10px;
}

#galleryslider p {
  font-size: 14px;
  margin: 10px auto 0 auto;
  line-height: 16px;
  padding: 0;
}

#gallerycarousel {
  visibility: hidden;
  height: 0;
  display: none;
}


div.bookcover {
  float: left;
  width: 40%;
  margin-left: 8%;
}

div.bookinfo {
  float: left;
  width: 50%;  
}

div.screenshot { 
  float: left; 
  width: calc(100% - 420px);
  max-width: 400px;
  margin-left: 8%;
}

div.designinfo {
  width: 280px;
  margin-right: 8%;
  height: 306px;
}

ul.limited {
  width: 100%;
}

#tao div.circle {
  max-width: 50%;
}

#lategig { 
  bottom: 20%; 
  right: 60%;
}

#kearns {
  background: url(images/design/kearnsback.jpg) no-repeat 94% 102%;
}

#tao div.circle {
  right: 10%;
}

#rcynu {
  background-position: bottom right;
}

.mobileview > div {
  right: 10%;
}

#trailerspot, #responinfo {
  position: relative;
  float: left;
  width: 23%;
  min-width: auto;
  border: none;
  margin-top: 0px;
}

#responinfo {
  margin-top: -40px;
  max-width: 360px;
}

#respcont {
  width: 94%;
  margin: 0 auto 16px auto;
}

#outicecent, #responcent {
  position: relative;
  width: 78%;
  min-width: auto;
  height: auto;
  margin: 0 auto;
  text-align: center; 
}

div.trailercent {
  position: relative;
  margin: 0 auto;
  text-align: center;
  padding-bottom: 4px;
}

#trigspot {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2px;
}

#resptrigger {
  top: 670px;
}

#svgtrigger {
  bottom: 120px;
}

#empress p {
  max-width: calc(100% - 190px);
}

#subscribe-empress {
  width: 180px; 
  height: 180px;
  bottom: 0;
  right: 0;
} 

}

@media screen and (min-width: 1500px) {

div.homelinks div a {
  margin-right: 8px;
}

#galleryslider ul.slides li.thin > div > div, #galleryslider ul.slides li.tall > div > div {
  right: 10%;
}

}

@media screen and (min-width: 1700px) {

#galleryslider ul.slides li.square > div > div {
  right: 10%;
}

}