/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *


 */


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

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

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

html{
    font-size: 16px;
}
*/
input, textarea {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
}

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}



/**
 * mimikicase app
 */
#carousel.container:after, #carousel.container:before {
    display: table;
    content: " ";
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#carousel.container {
    position: relative;
    height: 640px;;
    width: 100%;
    margin: 0 auto;
    margin-top: 50px;
    margin-bottom: 0;
    padding-top: 40px;

}
#carousel.container,
#carousel.container * {
    webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#carousel.container h2 {
    font-family: "Chewy";
    font-size: 1.875em;
    color: #333;
    padding-left: 7%;
}
#carousel.container .carousel-3d-container {
    
}
#carousel.container .phonecase {
    width: 236px;
    height: 437px;
    margin: 0 auto;
    margin-top: -387px;
    position: relative;
    display: none;
}
#carousel.container .blackbg {
    position: absolute;
    width: 200px;
    height: 21px;
    top: 33px;
    left: 15px;
    background-color: black;
}
#carousel.container figure {
    margin: 0;
}
#carousel.container img {
    vertical-align: middle;
    outline: 1px solid transparent;
}
#carousel.container img.phonecase-noscreen {
    position: relative;
    left:8px;
}
#carousel.container img.phonecase-shadow {
    position: absolute;
    left: 34px;
    top: 35px;
}
#carousel.container .carousel-3d .slide-3d {
    cursor: pointer;
}
#carousel.container .carousel-3d .slide-3d figure figcaption {
    display: none;
}
#carousel.container .figcaptions {
    padding-top: 30px;
}
#carousel.container .figcaptions > div {
    display: none;
}
#carousel.container .figcaptions .title {
    font-family: "Montserrat-Bold";
    color: #333;
    font-size: 1em;
    line-height: 1.4;
    text-align: center;
    margin: 0;
}
#carousel.container .figcaptions .summary {
    font-family: "Montserrat-Light";
    color: #6b6b6b;
    font-size: 1em;
    line-height: 1.4;
    text-align: center;
    margin: 0;
}

/**
 * mimikicase size
 */
.mimikicase-size {
    background: url('/assets/home/mimikicase-size-v2.png') 70px center no-repeat;
    margin: 20px 0;
    margin-left: 7%;
    height: 596px;
    position: relative;
    background-size: 50%;
}
.mimikicase-size .mimikicase-size-desc div{
    float: left;
    font-family: "Montserrat-Bold";
    font-size: 0.9em;
    line-height: 1.4;
    text-align: left;
    margin: 0;
    position: absolute;
    bottom: 75px;
    left: 120px;
    color: #2e2e2e;
}
.mimikicase-size .mimikicase-size-desc div:last-child{
    left: 335px;
}
.mimikicase-size .bill-with-mimikicase {
    background: url('/assets/home/bill-with-mimikicase.png') right center no-repeat;
    height: 596px;
    background-size: 50%;
}
.mimikicase-size h2 {
    font-family: "Chewy";
    font-size: 1.875em;
    color: #333;
    position: absolute;
    top: 20px;
}
.mimikicase-size .desc {
    font-family: "Montserrat-Light";
    color: #828282;
    font-size: 1em;
    line-height: 1.4;
    text-align: left;
    margin: 0;
    position: absolute;
    bottom: 25px;
    left: 50px;
}

@media (min-width: 1282px){
    .mimikicase-size {
        background-size: initial;
    }
    .mimikicase-size .bill-with-mimikicase {
        background-size: initial;
    }
}