#content {
    padding-bottom:0;
}
div.product-details {
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding:2% 0;
    padding-bottom:50px;
}
div.product-details > div.photos {
    width:40%;
}
div.product-details > div.texts {
    width:55%;
}
div.product-details h2 {
    font-size: 3.333em;
    line-height: 1.1em;
    text-transform: uppercase;
}
div.product-details h3 {
    font-size: 2em;
    text-transform: uppercase;
    color:#8b8b8b;
}
div.product-details div.text {
    margin-top: 4%;
}
div.text * {
    font-size: 1.333em;
}

div.product-details div.expected-arrival {
    margin-top: 2%;
    display:flex;
}
div.product-details div.expected-arrival svg {
    height:36px;
    width:auto;
    align-self: center;
}
div.product-details div.expected-arrival span {
    font-size:1.333em;
    align-self: center;
    margin-left: 15px;
}

div.product-details > div.photos div.holder {
    text-align: center;
    background-size: 90% auto;
    perspective: 1000px;
}
div.product-details div.photos > div.holder > a {
    display: block;
    width:100%;
    margin:0 auto;
}

div.product-details > div.photos div.holder img {
    width:100%;
    user-select: none;
}
div.product-details > div.photos div.holder a:first-child {
    transition: transform 0.8s;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 2;
}
div.product-details > div.photos div.holder a + a {
    position: absolute;
    top:0px;
    left:50%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateX(-50%) rotateY(-180deg);
    z-index: 1;
}
div.product-details > div.photos div.holder.flipped a:first-child {
    transform: rotateY(180deg);
}
div.product-details > div.photos div.holder.flipped a + a {
    transform: translateX(-50%) rotateY(0deg);
}

div.product-details > div.photos div.nav.flip {
    text-align: center;
}
div.product-details > div.photos div.nav.flip a {
    display: inline-block;
}
div.product-details > div.photos div.nav.flip img {
    width:50px;
    opacity:.25;
    transition: opacity .3s;
}
div.product-details > div.photos div.nav.flip a:hover img {
    opacity:.75;
}

div.product-details > div.photos div.nav.thumbs {
    overflow-x: auto;
    width:80%;
    margin: 0 auto;
    padding-bottom:10px;
    margin-top: 2%;
}

div.product-details > div.photos div.nav-holder > a {
    position: absolute;
    height:100%;
    top:0px;
}
div.product-details > div.photos div.nav-holder > a:hover svg {
    transform:translateY(-50%) scale(1.1);
}
div.product-details > div.photos div.nav-holder > a svg {
    width:20px;
}
div.product-details > div.photos div.nav-holder > a.left {
    left:5%;
}
div.product-details > div.photos div.nav-holder > a.right {
    right:5%;
}
div.product-details > div.photos div.nav-holder > a svg {
    top:calc(50% - 10px);
    transform:translateY(-50%);
}

div.product-details > div.photos div.nav.thumbs > div {
    white-space: nowrap;
}
div.product-details > div.photos div.nav.thumbs a {
    display: inline-block;
    border: 1px dotted #bfbfbf;
    padding:5px;
    user-select: none;
}
div.product-details > div.photos div.nav.thumbs a.sel {
    border:1px solid #585858;
    pointer-events: none;
    cursor: default;
}
div.product-details > div.photos div.nav.thumbs a + a {
    margin-left: 1px;
}
div.product-details >div.photos div.nav.thumbs img {
    width:100px;
    transition:opacity .3s;
    opacity:.6;
    user-select: none;
}
div.product-details > div.photos div.nav.thumbs a:hover img {
    opacity:1;
}
div.product-details > div.photos div.nav.thumbs a.sel img {
    opacity:1;
}

div.product-details > div.photos div.holder div.zoom {
    position: absolute;
    top:50%;
    left:50%;
    width:20%;
    height:auto;
    padding:20% 0 0 0;
    background-color: rgba(255,255,255,.95);
    border-radius:50%;
    transition:all .3s ease 0s;
    transform:translate(-50%,-50%) scale(0);
    opacity:0;
    z-index: 3;
}
div.product-details > div.photos div.holder div.zoom svg {
    position: absolute;
    top:50%;
    left:50%;
    width:60%;
    transform:translate(-50%,-50%);
}
div.product-details > div.photos div.holder a:hover div.zoom {
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
}

div.product-details > div.photos div.holder::after {
    z-index: 5;
    position: absolute;
    content:'';
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background-image: url(../images/preloader.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #fff;
    opacity:0;
    visibility: hidden;
    transition:all .3s;
}
div.product-details> div.photos div.holder.pre::after {
    visibility: visible;
    opacity: 1;
}

div.product-details div.hl-info {
    display: flex;
    justify-content: left;
    margin-top: 4%;
}

div.product-details div.hl-info > div {
    display:flex;
    margin-right:8%;
}
div.product-details div.hl-info > div img,
div.product-details div.hl-info > div svg {
    height:36px;
    width:auto;
    align-self: center;
}
div.product-details div.hl-info > div h6 {
    text-transform: uppercase;
    font-size:2em;
    margin-left: 15px;
    align-self: center;
}
div.product-details div.hl-info > div.where-to-buy h6 {
    font-size: 1.666em;
} 
div.product-details div.hl-info a {
    font-size: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color:inherit;
}

div.product-details div.splatter,
div.product-details div.splatter2 {
    top:0px;
    right:0px;
    transform:translate(50%,-50%);
    position: absolute;
    width:300px !important;
    opacity:.5;
}
div.product-details div.splatter img,
div.product-details div.splatter svg,
div.product-details div.splatter2 img,
div.product-details div.splatter2 svg {
    width:100%;
    height:auto;
}
div.product-details div.splatter2 {
    top:auto;
    right:auto;
    left:0px;
    bottom:0px;
    transform:translate(-50%,50%);

}

/* downloads*/
div.downloads-head {
    display:flex;
    margin-top: 4%;
}
div.downloads-head svg {
    height:20px;
    width:auto;
    align-self: center;
}
div.downloads-head h6 {
    text-transform: uppercase;
    font-size:1.5em;
    margin-left: 15px;
    align-self: center;
}
ul.downloads {
    list-style: none;
    margin-top: 20px;
    padding-left: 30px;
}
ul.downloads li+li {
    margin-top: 5px;
}

/* related */
div.related {
    margin-top: 4%;
    border-top:1px dotted #d3d3d3;
    width:100%;
}
div.product-holder {
    overflow-x: auto;
}
div.related div.list {
    flex-wrap: nowrap;
}
div.related div.list > div {
    width:20%;
    margin-top: 0;
}

div.arrow-nav > a {
    position: absolute;
    height:100%;
    top:0px;
}
div.arrow-nav > a:hover svg {
    transform:translateY(-50%) scale(1.1);
}
div.arrow-nav > a svg {
    width:40px;
}
div.arrow-nav > a.left {
    left:-40px;
}
div.arrow-nav > a.right {
    right:-40px;
    text-align: right;
}
div.arrow-nav > a svg {
    top:calc(50%);
    transform:translateY(-50%);
}


div.string-theory {
    background-color: #000;
}
div.string-theory a {
    display: block;
    text-align: center;
}
div.string-theory img {
    opacity:.75;
    max-width:2560px;
    width:100%;
}
div.string-theory-texts {
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    margin-top: -10px;
}
div.string-theory-texts * {
    color: #fff;
    font-weight: 700;
    display: inline-block;
    text-transform: uppercase;
    cursor:pointer
}
div.string-theory-texts h4 {
    font-size: 4em;
}
div.string-theory-texts h5 {
    font-size: 1.666em;
    margin-top: 2%;
}

div.styles {
    margin:2% 0;
}
div.styles h6 {
    text-transform: uppercase;
    font-size:2em;
    margin-bottom: 2%;
}
div.styles ul {
    list-style-type: none;
    display: flex;
}
div.styles a {
    padding:.5em 1em;
    border:2px solid #000;
    color:#000;
    opacity:.4;
}
div.styles li + li {
    margin-left: 3px;
}
div.styles li.sel {
    color:#ee3188;
}
div.styles li.sel a {
    color:inherit;
    border:2px solid #ee3188;
    border-color: inherit;
    opacity:1;
}
div.styles li a:Hover {
    opacity:1;
}

/* RESELLERTS */
div.resellers {
    min-width:500px;
}
div.resellers * {
    text-align: left !important;
}
div.resellers h3 {
	font-size: 1.5em;
	width:100%;
	text-transform: uppercase;
	background:url(../images/pattern-gray-inv.png);
    margin-top: 2%;
}
div.resellers h3 > span {
    background-color: #fff;
    padding:1% 2% 1% 0%;
    display: inline-block;
    font-size:inherit;
    text-transform: inherit;
    font-family: inherit;
    font-weight: inherit;
    color:inherit;
}
div.resellers h4 {
	font-size: 1em;
	width:100%;
	text-transform: uppercase;
	margin-bottom: 1%;
    color:#5db988;
}
div.resellers p {
    margin-top: 0px !important;
}
div.resellers a {
	font-size:1em;
    color:#696969;
}
div.resellers a:hover {
    color:#181818;
}
div.resellers ul {
	list-style-type: none;
}
div.resellers > div {
	margin-top: 2%;
}

/* SLIDES */
div.slides {
    overflow: hidden;
}
div.slides div.h {
    display:flex;
    flex-wrap: nowrap;
    transition:left .5s ease;
}
div.slides div.h > div {
    flex-shrink: 0;
    width:100%;
}
div.slides > div img {
    width:100%;
}
div.slides div.texts {
    color:#fff;
    position: absolute;
    bottom:10%;
    left:50%;
    text-align: center;
    transform:translate(-50%, 0%);
}
div.slides div.active div.texts span {
    opacity:1;
    top: 0px;
}
div.slides div.img {
    filter: brightness(50%);
}
div.slides div.texts span {
    display: block;
    color:inherit;
    text-align: inherit;
    user-select: none;
    cursor: default;
    opacity:0;
    transition: all .3s ease .4s;
    top: 15%;
}
div.slides div.texts span + span {
    margin-top: 3%;
    transition: all .4s ease .5s;
}
div.slides div.texts span.heading,
div.slides div.texts span.heading2 {
    font-family: 'AvenirNext', Arial, Helvetica, sans-serif;
    text-transform: uppercase;
}
div.slides div.texts span.heading {
    font-weight: 700;
    font-size: 3em;
}
div.slides div.texts span.heading2 {
    font-size:1.5em;
}
div.slides div.progress {
    position: absolute;
    width:100%;
    background-color: rgba(255,255,255,.5);
    height:3px;
    bottom:0px;
    left:0px;
}
div.slides div.progress div.bar {
    height:3px;
    transition:width .5s ease;
}
div.slides.arrow-nav a {
    width:40%;
}
div.slides.arrow-nav a.left {
    left:1%;
}
div.slides.arrow-nav a.right {
    right:1%;
}
div.slides.arrow-nav > a:hover svg {
    transform:translateY(-50%) scale(1.5);
}