/* Created by/for Zemptech.com and it's owned/designed sites
* Authors: Zane Durkin, Preston Pace
* Feel free to use this style sheet for your own sites, just send us a thanks if you like it
* The use of this code is under your own risk and is provided AS IS
*/

/* Normalize (normalize.css v3.0.2 | MIT License | git.io/normalize) */

/* Containers */

.ZEMPContainer-small {
    width: 70%;
    margin: 0 auto;
}


/* text colors  */

.text-white {
    color: white !important;
}

.text-blue {
    color: blue;
}

.text-blue.text-lighten-1 {
    color: #42a5f5 !important;
}

.text-black {
    color: #000000 !important;
}

.text-gray,
.text-grey {
    color: #9e9e9e !important;
}

.text-grey.text-lighten-1,
.text-gray.text-lighten-1 {
    color: #bdbdbd !important;
}

.text-grey.text-lighten-2,
.text-gray.text-lighten-2 {
    color: #e0e0e0 !important;
}

.text-grey.text-lighten-3,
.text-gray.text-lighten-3 {
    color: #eeeeee !important;
}

.text-grey.text-lighten-4,
.text-gray.text-lighten-4 {
    color: #f5f5f5 !important;
}

.text-grey.text-lighten-5,
.text-gray.text-lighten-5 {
    color: #fafafa !important;
}

.text-grey.text-darken-1,
.text-gray.text-darken-1 {
    color: #757575 !important;
}

.text-grey.text-darken-2,
.text-gray.text-darken-2 {
    color: #616161 !important;
}

.text-grey.text-darken-3,
.text-gray.text-darken-3 {
    color: #424242 !important;
}

.text-grey.text-darken-4,
.text-gray.text-darken-4 {
    color: #212121 !important;
}

.text-orange {
    color: #ff9800 !important;
}

.text-orange.text-lighten-1 {
    color: #ffa726 !important;
}

.text-orange.text-lighten-2 {
    color: #ffb74d !important;
}

.text-orange.text-lighten-3 {
    color: #ffcc80 !important;
}

.text-orange.text-lighten-4 {
    color: #ffe0b2!important;
}

.text-orange.text-lighten-5 {
    color: #fff3e0 !important;
}

.text-orange.text-darken-1 {
    color: #fb8c00 !important;
}

.text-orange.text-darken-2 {
    color: #f57c00 !important;
}

.text-orange.text-darken-3 {
    color: #ef6c00 !important;
}

.text-orange.text-darken-4 {
    color: #e65100 !important;
}

.text-orange.text-accent-1 {
    color: #ffd180 !important;
}

.text-orange.text-accent-2 {
    color: #ffd180 !important;
}

.text-orange.text-accent-3 {
    color: #ff9100 !important;
}

.text-orange.text-accent-4 {
    color: #ff6d00 !important;
}

.text-red {
    color: #f44336 !important;
}

.text-red.text-lighten-1 {
    color: #ef5350 !important;
}

.text-red.text-lighten-2 {
    color: #e57373 !important;
}

.text-red.text-lighten-3 {
    color: #ef9a9a !important;
}

.text-red.text-lighten-4 {
    color: #ffcdd2 !important;
}

.text-red.text-lighten-5 {
    color: #ffebee !important;
}

.text-red.text-darken-1 {
    color: #e53935 !important;
}

.text-red.text-darken-2 {
    color: #d32f2f !important;
}

.text-red.text-darken-3 {
    color: #c62828 !important;
}

.text-red.text-darken-4 {
    color: #b71c1c !important;
}

.text-red.text-accent-1 {
    color: #ff8a80 !important;
}

.text-red.text-accent-2 {
    color: #ff5252 !important;
}

.text-red.text-accent-3 {
    color: #ff1744 !important;
}

.text-red.text-accent-4 {
    color: #d50000 !important;
}

.text-pink {
    color: #e91e63 !important;
}

.text-pink.text-lighten-1 {
    color: #ec407a !important;
}

.text-pink.text-lighten-2 {
    color: #f06292 !important;
}

.text-pink.text-lighten-3 {
    color: #f48fb1 !important;
}

.text-pink.text-lighten-4 {
    color: #f8bbd0 !important;
}

.text-pink.text-lighten-5 {
    color: #fce4ec !important;
}

.text-pink.text-darken-1 {
    color: #d81b60 !important;
}

.text-pink.text-darken-2 {
    color: #c2185b !important;
}

.text-pink.text-darken-3 {
    color: #ad1457 !important;
}

.text-pink.text-darken-4 {
    color: #880e4f !important;
}

.text-pink.text-accent-1 {
    color: #ff80ab !important;
}

.text-pink.text-accent-2 {
    color: #ff4081 !important;
}

.text-pink.text-accent-3 {
    color: #f50057 !important;
}

.text-pink.text-accent-4 {
    color: #c51162 !important;
}

.text-purple {
    color: #9c27b0 !important;
}

.text-purple.text-lighten-1 {
    color: #ab47bc !important;
}

.text-purple.text-lighten-2 {
    color: #ba68c8 !important;
}

.text-purple.text-lighten-3 {
    color: #ce93d8 !important;
}

.text-purple.text-lighten-4 {
    color: #e1bee7 !important;
}

.text-purple.text-lighten-5 {
    color: #f3e5f5 !important;
}

.text-purple.text-darken-1 {
    color: #8e24aa !important;
}

.text-purple.text-darken-2 {
    color: #7b1fa2 !important;
}

.text-purple.text-darken-3 {
    color: #6a1b9a !important;
}

.text-purple.text-darken-4 {
    color: #4a148c !important;
}

.text-purple.text-accent-1 {
    color: #ea80fc !important;
}

.text-purple.text-accent-2 {
    color: #e040fb !important;
}

.text-purple.text-accent-3 {
    color: #d500f9 !important;
}

.text-purple.text-accent-4 {
    color: #aa00ff !important;
}

.text-deep-purple {
    color: #673ab7 !important;
}

.text-deep-purple.text-lighten-1 {
    color: #7e57c2 !important;
}

.text-deep-purple.text-lighten-2 {
    color: #9575cd !important;
}

.text-deep-purple.text-lighten-3 {
    color: #b39ddb !important;
}

.text-deep-purple.text-lighten-4 {
    color: #d1c4e9 !important;
}

.text-deep-purple.text-lighten-5 {
    color: #ede7f6 !important;
}

.text-deep-purple.text-darken-1 {
    color: #5e35b1 !important;
}

.text-deep-purple.text-darken-2 {
    color: #512da8 !important;
}

.text-deep-purple.text-darken-3 {
    color: #4527a0 !important;
}

.text-deep-purple.text-darken-4 {
    color: #311b92 !important;
}

.text-deep-purple.text-accent-1 {
    color: #b388ff !important;
}

.text-deep-purple.text-accent-2 {
    color: #7c4dff !important;
}

.text-deep-purple.text-accent-3 {
    color: #651fff!important;
}

.text-deep-purple.text-accent-4 {
    color: #6200ea !important;
}

.text-indigo {
    color: #3f51b5 !important;
}

.text-indigo.text-lighten-1 {
    color: #5c6bc0 !important;
}

.text-indigo.text-lighten-2 {
    color: #7986cb !important;
}

.text-indigo.text-lighten-3 {
    color: #9fa8da !important;
}

.text-indigo.text-lighten-4 {
    color: #c5cae9 !important;
}

.text-indigo.text-lighten-5 {
    color: #e8eaf6 !important;
}

.text-indigo.text-darken-1 {
    color: #3949ab !important;
}

.text-indigo.text-darken-2 {
    color: #303f9f !important;
}

.text-indigo.text-darken-3 {
    color: #283593 !important;
}

.text-indigo.text-darken-4 {
    color: #1a237e !important;
}

.text-indigo.text-accent-1 {
    color: #8c9eff !important;
}

.text-indigo.text-accent-2 {
    color: #536dfe !important;
}

.text-indigo.text-accent-3 {
    color: #3d5afe !important;
}

.text-indigo.text-accent-4 {
    color: #304ffe !important;
}


/* box/card color */

.white {
    color: white !important;
}

.blue {
    color: blue;
}

.blue.lighten-1 {
    color: #42a5f5 !important;
}

.black {
    color: #000000 !important;
}

.gray,
.grey {
    color: #9e9e9e !important;
}

.grey.lighten-1,
.gray.lighten-1 {
    color: #bdbdbd !important;
}

.grey.lighten-2,
.gray.lighten-2 {
    color: #e0e0e0 !important;
}

.grey.lighten-3,
.gray.lighten-3 {
    color: #eeeeee !important;
}

.grey.lighten-4,
.gray.lighten-4 {
    color: #f5f5f5 !important;
}

.grey.lighten-5,
.gray.lighten-5 {
    color: #fafafa !important;
}

.grey.darken-1,
.gray.darken-1 {
    color: #757575 !important;
}

.grey.darken-2,
.gray.darken-2 {
    color: #616161 !important;
}

.grey.darken-3,
.gray.darken-3 {
    color: #424242 !important;
}

.grey.darken-4,
.gray.darken-4 {
    color: #212121 !important;
}

.orange {
    color: #ff9800 !important;
}

.orange.lighten-1 {
    color: #ffa726 !important;
}

.orange.lighten-2 {
    color: #ffb74d !important;
}

.orange.lighten-3 {
    color: #ffcc80 !important;
}

.orange.lighten-4 {
    color: #ffe0b2!important;
}

.orange.lighten-5 {
    color: #fff3e0 !important;
}

.orange.darken-1 {
    color: #fb8c00 !important;
}

.orange.darken-2 {
    color: #f57c00 !important;
}

.orange.darken-3 {
    color: #ef6c00 !important;
}

.orange.darken-4 {
    color: #e65100 !important;
}

.orange.accent-1 {
    color: #ffd180 !important;
}

.orange.accent-2 {
    color: #ffd180 !important;
}

.orange.accent-3 {
    color: #ff9100 !important;
}

.orange.accent-4 {
    color: #ff6d00 !important;
}

.red {
    color: #f44336 !important;
}

.red.lighten-1 {
    color: #ef5350 !important;
}

.red.lighten-2 {
    color: #e57373 !important;
}

.red.lighten-3 {
    color: #ef9a9a !important;
}

.red.lighten-4 {
    color: #ffcdd2 !important;
}

.red.lighten-5 {
    color: #ffebee !important;
}

.red.darken-1 {
    color: #e53935 !important;
}

.red.darken-2 {
    color: #d32f2f !important;
}

.red.darken-3 {
    color: #c62828 !important;
}

.red.darken-4 {
    color: #b71c1c !important;
}

.red.accent-1 {
    color: #ff8a80 !important;
}

.red.accent-2 {
    color: #ff5252 !important;
}

.red.accent-3 {
    color: #ff1744 !important;
}

.red.accent-4 {
    color: #d50000 !important;
}

.pink {
    color: #e91e63 !important;
}

.pink.lighten-1 {
    color: #ec407a !important;
}

.pink.lighten-2 {
    color: #f06292 !important;
}

.pink.lighten-3 {
    color: #f48fb1 !important;
}

.pink.lighten-4 {
    color: #f8bbd0 !important;
}

.pink.lighten-5 {
    color: #fce4ec !important;
}

.pink.darken-1 {
    color: #d81b60 !important;
}

.pink.darken-2 {
    color: #c2185b !important;
}

.pink.darken-3 {
    color: #ad1457 !important;
}

.pink.darken-4 {
    color: #880e4f !important;
}

.pink.accent-1 {
    color: #ff80ab !important;
}

.pink.accent-2 {
    color: #ff4081 !important;
}

.pink.accent-3 {
    color: #f50057 !important;
}

.pink.accent-4 {
    color: #c51162 !important;
}

.purple {
    color: #9c27b0 !important;
}

.purple.lighten-1 {
    color: #ab47bc !important;
}

.purple.lighten-2 {
    color: #ba68c8 !important;
}

.purple.lighten-3 {
    color: #ce93d8 !important;
}

.purple.lighten-4 {
    color: #e1bee7 !important;
}

.purple.lighten-5 {
    color: #f3e5f5 !important;
}

.purple.darken-1 {
    color: #8e24aa !important;
}

.purple.darken-2 {
    color: #7b1fa2 !important;
}

.purple.darken-3 {
    color: #6a1b9a !important;
}

.purple.darken-4 {
    color: #4a148c !important;
}

.purple.accent-1 {
    color: #ea80fc !important;
}

.purple.accent-2 {
    color: #e040fb !important;
}

.purple.accent-3 {
    color: #d500f9 !important;
}

.purple.accent-4 {
    color: #aa00ff !important;
}

.deep-purple {
    color: #673ab7 !important;
}

.deep-purple.lighten-1 {
    color: #7e57c2 !important;
}

.deep-purple.lighten-2 {
    color: #9575cd !important;
}

.deep-purple.lighten-3 {
    color: #b39ddb !important;
}

.deep-purple.lighten-4 {
    color: #d1c4e9 !important;
}

.deep-purple.lighten-5 {
    color: #ede7f6 !important;
}

.deep-purple.darken-1 {
    color: #5e35b1 !important;
}

.deep-purple.darken-2 {
    color: #512da8 !important;
}

.deep-purple.darken-3 {
    color: #4527a0 !important;
}

.deep-purple.darken-4 {
    color: #311b92 !important;
}

.deep-purple.accent-1 {
    color: #b388ff !important;
}

.deep-purple.accent-2 {
    color: #7c4dff !important;
}

.deep-purple.accent-3 {
    color: #651fff!important;
}

.deep-purple.accent-4 {
    color: #6200ea !important;
}

.indigo {
    color: #3f51b5 !important;
}

.indigo.lighten-1 {
    color: #5c6bc0 !important;
}

.indigo.lighten-2 {
    color: #7986cb !important;
}

.indigo.lighten-3 {
    color: #9fa8da !important;
}

.indigo.lighten-4 {
    color: #c5cae9 !important;
}

.indigo.lighten-5 {
    color: #e8eaf6 !important;
}

.indigo.darken-1 {
    color: #3949ab !important;
}

.indigo.darken-2 {
    color: #303f9f !important;
}

.indigo.darken-3 {
    color: #283593 !important;
}

.indigo.darken-4 {
    color: #1a237e !important;
}

.indigo.accent-1 {
    color: #8c9eff !important;
}

.indigo.accent-2 {
    color: #536dfe !important;
}

.indigo.accent-3 {
    color: #3d5afe !important;
}

.indigo.accent-4 {
    color: #304ffe !important;
}


/* box shadow */

.box-shadow {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}


/* buttons */

.btn,
.btn-large {
    text-decoration: none;
    color: #fff;
    background-color: #26a69a;
    text-align: center;
    letter-spacing: .5px;
    transition: .2s ease-out;
    cursor: pointer;
}

.btn,
.btn-large,
.btn-flat {
    border: none;
    border-radius: 2px;
    display: inline-block;
    height: 36px;
    line-height: 36px;
    outline: 0;
    padding: 0 2rem;
    text-transform: uppercase;
    vertical-align: middle;
    -webkit-tap-highlight-color: transparent;
}


/*  Form Styles */

input[type="email"]:focus,
input[type="phone"]:focus,
input[type="time"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    border: 2px solid #aaa !important;
    outline: 0;
}

input[type="email"]:hover,
input[type="phone"]:hover,
input[type="time"]:hover,
input[type="date"]:hover,
input[type="month"]:hover,
input[type="number"]:hover,
input[type="search"]:hover,
input[type="text"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="password"]:hover,
textarea:hover,
select:hover {
    border: 2px solid #ccc !important;
    outline: 0;
}

input[type="email"]:active,
input[type="phone"]:active,
input[type="time"]:active,
input[type="date"]:active,
input[type="month"]:active,
input[type="number"]:active,
input[type="search"]:active,
input[type="text"]:active,
input[type="tel"]:active,
input[type="url"]:active,
input[type="password"]:active,
textarea:active,
select:active {
    border: 2px solid #aaa !important;
    outline: 0;
}


/* effects */

.waves-effect {
    position: relative;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    vertical-align: middle;
    z-index: 1;
    will-change: opacity, transform;
    transition: all .3s ease-out;
}


/* cards */

.card-panel {
    transition: box-shadow .25s;
    padding: 20px;
    margin: 0.5rem 0 1rem 0;
    border-radius: 2px;
    background-color: #fff;
}


/* Webkit Scrollbar */

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9);
    background-color: #CCCCCC;
}

::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb {
    background-color: #D62929;
    background-image: -webkit-linear-gradient(90deg,
    transparent,
    rgba(0, 0, 0, 0.4) 50%,
    transparent,
    transparent)
}



/*
* The side navigation menu
*/

#mobile-nav {
    display: none;
}

.sidenav {
    height: 100%;
    /* 100% Full-height */
    width: 0;
    /* 0 width - change this with JavaScript */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Stay on top */
    top: 0;
    left: 0;
    border-right: solid black 1px;
    background-color: #393433;
    /* Black*/
    overflow-x: hidden;
    /* Disable horizontal scroll */
    padding-top: 60px;
    /* Place content 60px from the top */
    transition: 0.5s;
    /* 0.5 second transition effect to slide in the sidenav */
}


/* The navigation menu links */

.sidenav a {
    padding: 8px 8px 8px 8px;
    text-decoration: none;
    font-size: 1.85rem;
    /*25px;*/
    color: #aaa;
    display: block;
    transition: 0.3s
}


/* When you mouse over the navigation links, change their color */

.sidenav a:hover,
.offcanvas a:focus {
    color: #eee;
}


/* Position and style the close button (top right corner) */

.closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px !important;
    margin-left: 50px;
}


/* Style page content - use this if you want to push the page content to the right when you open the side navigation */

/*#main, #topnav {
    transition: margin-left .5s;
    width:100%;
}
#main{
    /* to keep footer on bottom
    min-height:95vh;
}
#topnav{
    height:5rem;
    color:#aaa;
}
#topnav > span{
    padding-left:1em;
}
    #topnav > span:first-child{
        /* this targets the menu toggle button 
        padding-left:.5em;
        margin-left: 0;
    }
#navSlideDetector{
    display:none;
    width:50px;
    height:100%;
    position:fixed;
    top:0;
    left:0 ;
    z-index:1000;
}
#bodySlideDetector{
    display:none;
    width:100%;
    height:100%;
    z-index:1000;
    position: fixed;
}
*/

/*input[type='text'], 
input[type='password'],
input[type='submit'],
input[type='tel'],
input[type='email'],
select{
  min-width: 25rem;
}
select{
	width:25rem;
}*/

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */

@media screen and (max-width: 700px) {
    .sidenav {
        padding-top: 15px;
    }
    .sidenav a {
        font-size: 18px;
    }
    /* #main{padding-top:5rem;} */
    #mobile-nav {
        display: block;
    }
    #desktop-nav {
        display: none;
    }
    #navSlideDetector {
        display: block;
    }
    .siteMap {
        padding-left: 25px;
    }
    input[type='text'],
    input[type='password'],
    input[type='submit'],
    select,
    input[type='tel'],
    input[type='email'] {
        /*width:90%;*/
    }
    .parallax>div.container {
        width: 100%;
        height: 26rem;
    }
    .parallax-slider>img {
        height: 26rem;
        width: 100vw;
    }
    .noDisplayMobile {
        display: none;
        visibility: hidden;
    }
    .vr {
        border-right: solid 0px white;
    }
}

@media screen and (max-width: 600px) {
    .noDisplayMobile {
        display: none;
        visibility: hidden;
    }
    .vr {
        border-right: solid 0px white;
    }
}


/*
*  alert boxes
*/

.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    top: 1em;
    width: 100%;
    z-index: 1001;
    margin-top: 10px;
}

.alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

.alert-warning {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}

.alert-info {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}

.alert-success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

.close {
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2;
}

#alert-box {
    z-index: 1001;
    width: 100%;
    position: absolute;
}

@media screen and (max-width: 700px) {
    .alert {
        top: 5rem;
        width: 80%;
    }
}


/*
*    ZEMPTech cards
*/

/* Image Cards */

.borderRadius {
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}

.radius {
    border-radius: 2px;
}

.shadowDepth1 {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.imageCard {
    background-color: #fff;
    margin-bottom: 1.6rem;
    min-height: 38rem;
    max-height: 3rem;
}

.cardPadding {
    padding: 1.6rem;
}

.cardImage {
    min-height: 100px;
    background-color: #eee;
}

.cardImage img {
    width: 100%;
    max-width: 100%;
    display: block;
}

.cardContent {
    position: relative;
}


/* card meta */

.cardMeta time {
    font-size: 1.5rem;
    color: #bbb;
    margin-left: 0.8rem;
}


/* card article */

.cardArticle a {
    text-decoration: none;
    color: #444;
    transition: all 0.5s ease;
}

.cardArticle a:hover {
    color: #2980b9;
}


/* card action */

.cardAction {
    overflow: hidden;
    padding-right: 1.6rem;
    padding-left: 1.6rem;
    padding-bottom: 1.6rem;
}

.cardAuthor img,
.cardAuthor-content {
    display: inline-block;
    vertical-align: middle;
}

.cardAuthor img {
    border-radius: 100em;
    margin-right: 0.6em;
    width: 4rem;
    height: 4rem;
}

.authorImage {
    padding: 1rem 0;
    width: 25%;
    text-align: left;
}


/* Price Cards */

.card {
    transition: 0.1s;
    height: 5em;
    margin: 0;
    cursor: pointer;
    background-color: white;
}

.lastCard {
    border-right: 1px solid #eee;
}

.card:hover {
    border-bottom: 2px solid rgb(255, 0, 0);
    color: rgb(255, 0, 0);
}

.cardInfo {
    height: 1em;
    padding: 0 0 1em 0;
}

.cardInfo2 {
    transition: .6s;
}

.hide {
    display: none;
}

.show {
    height: 40rem;
}


/*
.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
*/

.container {
    padding: 2px 16px;
}

.cardTitle {
    background-color: #444;
    font-size: 1.6em;
    color: white;
    background-image: url("../img/bg.png");
}


/* Product Cards */

.make-card {
    position: relative;
    perspective: 800px;
    width: 100%;
    /*340px;*/
    height: 55rem;
    transform-style: preserve-3d;
    transition: transform 5s;
}

.product-front,
.product-back {
    width: 100%;
    /*335px;*/
    height: 500px;
    background: #fff;
    position: absolute;
    left: -5px;
    top: -5px;
    -webkit-transition: all 100ms ease-out;
    -moz-transition: all 100ms ease-out;
    -o-transition: all 100ms ease-out;
    transition: all 100ms ease-out;
}

.product-back {
    display: none;
    transform: rotateY( 180deg);
}

.product-card.animate .product-back,
.product-card.animate .product-front {
    top: 0px;
    left: 0px;
    -webkit-transition: all 100ms ease-out;
    -moz-transition: all 100ms ease-out;
    -o-transition: all 100ms ease-out;
    transition: all 100ms ease-out;
}

.product-card {
    width: 100%;
    /*325px;*/
    height: 490px;
    position: absolute;
    top: 10px;
    left: 10px;
    overflow: hidden;
    transform-style: preserve-3d;
    -webkit-transition: 100ms ease-out;
    -moz-transition: 100ms ease-out;
    -o-transition: 100ms ease-out;
    transition: 100ms ease-out;
}

div.product-card.flip-10 {
    -webkit-transform: rotateY( -10deg);
    -moz-transform: rotateY( -10deg);
    -o-transform: rotateY( -10deg);
    transform: rotateY( -10deg);
    transition: 50ms ease-out;
}

div.product-card.flip90 {
    -webkit-transform: rotateY( 90deg);
    -moz-transform: rotateY( 90deg);
    -o-transform: rotateY( 90deg);
    transform: rotateY( 90deg);
    transition: 100ms ease-in;
}

div.product-card.flip190 {
    -webkit-transform: rotateY( 190deg);
    -moz-transform: rotateY( 190deg);
    -o-transform: rotateY( 190deg);
    transform: rotateY( 190deg);
    transition: 100ms ease-out;
}

div.product-card.flip180 {
    -webkit-transform: rotateY( 180deg);
    -moz-transform: rotateY( 180deg);
    -o-transform: rotateY( 180deg);
    transform: rotateY( 180deg);
    transition: 150ms ease-out;
}

.product-card.animate {
    top: 0;
    left: 0;
    width: 100%;
    /*335px;*/
    height: 35em;
    box-shadow: 0px 13px 21px -5px rgba(0, 0, 0, 0.3);
    -webkit-transition: 100ms ease-out;
    -moz-transition: 100ms ease-out;
    -o-transition: 100ms ease-out;
    transition: 100ms ease-out;
}

.stats-container {
    background: #fff;
    position: absolute;
    top: 386px;
    left: 0;
    width: 100%;
    /*265px;*/
    height: 300px;
    padding: 27px 35px 35px;
    -webkit-transition: all 200ms ease-out;
    -moz-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}

.product-card.animate .stats-container {
    top: 272px;
    -webkit-transition: all 200ms ease-out;
    -moz-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}

.stats-container .product_name {
    font-size: 22px;
    color: #393c45;
}

.stats-container p {
    font-size: 16px;
    color: #b1b1b3;
    padding: 2px 0 20px 0;
}

.stats-container .product_price {
    float: right;
    color: #48cfad;
    font-size: 22px;
    font-weight: 600;
}

.image_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0, 178, 178);
    opacity: 0;
}

.product-card.animate .image_overlay {
    opacity: 0.7;
    -webkit-transition: all 200ms ease-out;
    -moz-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}

.card-input {
    text-align: center;
}

.product-options {
    padding: 2px 0 0;
}

.product-options strong {
    font-weight: 700;
    color: #393c45;
    font-size: 14px;
}

.product-options span {
    color: #969699;
    font-size: 14px;
    display: block;
    margin-bottom: 8px;
}

.view_details {
    position: absolute;
    top: 112px;
    left: 50%;
    margin-left: -85px;
    border: 2px solid #fff;
    color: #fff;
    font-size: 19px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
    padding: 10px 0;
    width: 172px;
    opacity: 0;
    -webkit-transition: all 200ms ease-out;
    -moz-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}

.view_details:hover {
    background: #fff;
    color: rgb(0, 178, 178);
    cursor: pointer;
}

.product-card.animate .view_details {
    opacity: 1;
    width: 152px;
    font-size: 15px;
    margin-left: -75px;
    top: 115px;
    -webkit-transition: all 200ms ease-out;
    -moz-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}

div.colors div {
    margin-top: 3px;
    width: 15px;
    height: 15px;
    margin-right: 5px;
    float: left;
}

div.colors div span {
    width: 15px;
    height: 15px;
    display: block;
    border-radius: 50%;
}

div.colors div span:hover {
    width: 17px;
    height: 17px;
    margin: -1px 0 0 -1px;
}

div.c-blue span {
    background: #6e8cd5;
}

div.c-red span {
    background: #f56060;
}

div.c-green span {
    background: #44c28d;
}

div.c-white span {
    background: #fff;
    width: 14px;
    height: 14px;
    border: 1px solid #e8e9eb;
}

div.shadow {
    width: 335px;
    height: 520px;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    display: none;
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));
    background: -o-linear-gradient(right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));
    background: -moz-linear-gradient(right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));
    background: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));
}

.product-back div.shadow {
    z-index: 10;
    opacity: 1;
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1));
    background: -o-linear-gradient(right, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1));
    background: -moz-linear-gradient(right, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1));
    background: linear-gradient(to right, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1));
}

.flip-back {
    position: absolute;
    top: 5rem;
    right: 20px;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

.cx,
.cy {
    background: #d2d5dc;
    position: absolute;
    width: 0px;
    top: 15px;
    right: 15px;
    height: 3px;
    -webkit-transition: all 250ms ease-in-out;
    -moz-transition: all 250ms ease-in-out;
    -ms-transition: all 250ms ease-in-out;
    -o-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
}

.flip-back:hover .cx,
.flip-back:hover .cy {
    background: #979ca7;
    -webkit-transition: all 250ms ease-in-out;
    -moz-transition: all 250ms ease-in-out;
    -ms-transition: all 250ms ease-in-out;
    -o-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
}

.cx.s1,
.cy.s1 {
    right: 0;
    width: 30px;
    -webkit-transition: all 100ms ease-out;
    -moz-transition: all 100ms ease-out;
    -ms-transition: all 100ms ease-out;
    -o-transition: all 100ms ease-out;
    transition: all 100ms ease-out;
}

.cy.s2 {
    -ms-transform: rotate(50deg);
    -webkit-transform: rotate(50deg);
    transform: rotate(50deg);
    -webkit-transition: all 100ms ease-out;
    -moz-transition: all 100ms ease-out;
    -ms-transition: all 100ms ease-out;
    -o-transition: all 100ms ease-out;
    transition: all 100ms ease-out;
}

.cy.s3 {
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 100ms ease-out;
    -moz-transition: all 100ms ease-out;
    -ms-transition: all 100ms ease-out;
    -o-transition: all 100ms ease-out;
    transition: all 100ms ease-out;
}

.cx.s1 {
    right: 0;
    width: 30px;
    -webkit-transition: all 100ms ease-out;
    -moz-transition: all 100ms ease-out;
    -ms-transition: all 100ms ease-out;
    -o-transition: all 100ms ease-out;
    transition: all 100ms ease-out;
}

.cx.s2 {
    -ms-transform: rotate(140deg);
    -webkit-transform: rotate(140deg);
    transform: rotate(140deg);
    -webkit-transition: all 100ms ease-out;
    -moz-transition: all 100ms ease-out;
    -ms-transition: all 100ease-out;
    -o-transition: all 100ms ease-out;
    transition: all 100ms ease-out;
}

.cx.s3 {
    -ms-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    -webkit-transition: all 100ease-out;
    -moz-transition: all 100ms ease-out;
    -ms-transition: all 100ms ease-out;
    -o-transition: all 100ms ease-out;
    transition: all 100ms ease-out;
}

.carousel {
    width: 100%;
    /*335px;*/
    height: 500px;
    overflow: auto;
    position: relative;
    z-index: -1;
}

.carousel ul {
    position: absolute;
    top: 0;
    left: 0;
}

.carousel li {
    width: 335px;
    height: 500px;
    float: left;
    overflow: hidden;
}

.arrows-perspective {
    width: 335px;
    height: 55px;
    position: absolute;
    top: 218px;
    transform-style: preserve-3d;
    transition: transform 5s;
    perspective: 335px;
}

.carouselPrev,
.carouselNext {
    width: 50px;
    height: 55px;
    background: #ccc;
    position: absolute;
    top: 0;
    transition: all 200ms ease-out;
    opacity: 0.9;
    cursor: pointer;
}

.carouselNext {
    top: 0;
    right: -26px;
    -webkit-transform: rotateY( -117deg);
    -moz-transform: rotateY( -117deg);
    -o-transform: rotateY( -117deg);
    transform: rotateY( -117deg);
    transition: all 200ms ease-out;
}

.carouselNext.visible {
    right: 0;
    opacity: 0.8;
    background: #efefef;
    -webkit-transform: rotateY( 0deg);
    -moz-transform: rotateY( 0deg);
    -o-transform: rotateY( 0deg);
    transform: rotateY( 0deg);
    transition: all 200ms ease-out;
}

.carouselPrev {
    left: -26px;
    top: 0;
    -webkit-transform: rotateY( 117deg);
    -moz-transform: rotateY( 117deg);
    -o-transform: rotateY( 117deg);
    transform: rotateY( 117deg);
    transition: all 200ms ease-out;
}

.carouselPrev.visible {
    left: 0;
    opacity: 0.8;
    background: #eee;
    -webkit-transform: rotateY( 0deg);
    -moz-transform: rotateY( 0deg);
    -o-transform: rotateY( 0deg);
    transform: rotateY( 0deg);
    transition: all 200ms ease-out;
}

.carousel .x,
.carousel .y {
    height: 2px;
    width: 15px;
    background: #48cfad;
    position: absolute;
    top: 31px;
    left: 17px;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.carousel .x {
    -ms-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    top: 21px;
}

.carousel .carouselNext .x {
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.carousel .carouselNext .y {
    -ms-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}


/*
*    ZEMPTech tool tips
*/

/* Tooltip container */

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
    font-size: 2rem;
}


/* Tooltip text */

.tooltip .tooltiptext {
    visibility: hidden;
    width: 16rem;
    background-color: rgba(66, 66, 66, 0.7);
    color: #fff;
    text-align: center;
    padding: 5px 5px;
    border-radius: 6px;
    top: 100%;
    left: 50%;
    position: absolute;
    z-index: 1;
    margin-left: -6em;
    font-size: 1.5rem;
    line-height: 3rem;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

.respTable {
    overflow-x: auto;
}