﻿.product-content .clearfix:before, .clearfix:after {content: " ";display: table;}
.product-content .clearfix:after {clear: both;}
.product-content .clearfix {*zoom: 1;}

/*new*/
.product-content .row {background: white}
.product-content .inner-x { position: absolute;z-index: 999;padding: 20px;font-size: 1.25em; max-width: 45% }
.product-content .inner-x.right { right: 0; text-align: right}
.product-content .inner-x .title { font-weight: 400;margin-bottom: 10px; font-size: 1.4em}
.product-content .inner-x .title.black { color: #000}
.product-content .inner-x .title.white { color:white}
.product-content .inner-x .desc.white { color:white}
.product-content .inner-x .desc.black { color:#000}
.product-content .image img {width:100%; background-size: 100% auto; background-repeat: no-repeat;height: auto;}

.product-content .mgFeature {padding: 20px;}
.product-content .keynote_row_group { display: block;overflow: hidden;}
.product-content .keynote_row_group h2 { font-size: 1.5em;line-height: 1.6em; text-transform: none;font-weight: 400; margin-bottom: 10px}
.product-content .keynote_row_group .row_left { width: 48%; float: left}
.product-content .keynote_row_group .row_right { width: 48%; float: right}
.product-content .keynote_row_group img { width:100%; background-size: 100% auto; background-repeat: no-repeat;height: auto;}

/*.product-content .keynote_small_wide*/ 

/*new*/


.product-content .propertytitle { padding: 2em 15px;display: block;}
.product-content {padding: 0;display: block;overflow: hidden;clear: both;width: 100%;}
.product-content .column {float: left;position: relative;overflow: hidden;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
.product-content .column.pad0 {padding: 0!important;}
.product-content .column.full { width: 100%; }
.product-content .column.two-thirds { width: 66.7%; }
.product-content .column.two-fourth { width: 75%; }
.product-content .column.two-fifth { width: 80%; }
.product-content .column.two-sixth { width: 85%; }
.product-content .column.half { width: 50%; }
.product-content .column.third { width: 33.3%; }
.product-content .column.fourth { width: 25%; }
.product-content .column.fifth { width: 20%; }
.product-content .column.sixth { width: 15%; }
.product-content .column.flow-opposite { float: right; }  

.product-content h2 { font-size: 2em;text-transform: uppercase;font-weight: 600;margin: 0;padding: 0;}
.product-content li { display: block;overflow: hidden;position: relative;line-height: 0;}

.product-content li img {width:100%; background-size: 100% auto; background-repeat: no-repeat;height: auto;}
.product-content .column.half img {width: 100%; background-size: 100% auto; background-repeat: no-repeat; background-position-x: -48%;}

.product-content figcaption {position: absolute; text-shadow: 1px 1px 2px #333, 1px 1px 2px #333;color: #fff;font-size: 1.55em;text-align: left;padding: 15px;z-index:1;}
.product-content figcaption h2 { font-size: 1.5em;text-transform: none;font-weight: 400;}
.product-content figcaption h3 { font-size: 1.3em;}
.product-content figcaption p { font-size: 1em;}
.product-content figcaption.top {top: 0;}
.product-content figcaption.left{left: 0;}
.product-content figcaption.right{right: 0;text-align: right;}
.product-content figcaption.bottom{bottom: 0;}





.product-content figcaption h2 {padding: 0;margin: 0;line-height: initial;}
.product-content figcaption.dark, .product-content figcaption.dark h2 {text-shadow: none;color: #333;}
/*.product-content figcaption.dark {text-shadow: 1px 1px 1px #fff, 1px 1px 1px #ffffff;}*/
.product-content figcaption, .product-content figcaption h2 {text-shadow: 1px 1px 1px #333, 1px 1px 2px #333;color: white;}
.product-content figcaption p {padding: 0;margin: 0;}

.product-content .column.half figcaption p {padding: 0;margin: 0;font-size: 0.7em;}


.product-content .spec-section .spec-list{border-bottom:1px solid #ccc;padding: 20px;display: block;overflow: hidden;}
.product-content .spec-section .spec-list .tit{color:#0071bf;font-weight:bold;font-size: 1.3em;width: 25%;float: left;}
.product-content .spec-section .spec-list ul{ width: 75%;float: left;}
.product-content .spec-section .spec-list ul li{ width: 33.33%;display: inline-table;padding-right: 15px;}
.product-content .spec-section .spec-list ul li .spec:after{content:" ";clear:both;display:block}
.product-content .spec-section .spec-list ul li .spec .sub-tit{font-weight:bold;color:#000;font-size: 1.1em;line-height: 1em;}
.product-content .spec-section .spec-list ul li .spec .sub-level-tit{font-size:14px}
.product-content .spec-section .spec-list ul li .spec .sub-level-tit+.desc{padding-right:0;border-bottom:1px solid #e2e2e2;padding-bottom:5px;margin-bottom:5px;font-size:14px}
.product-content .spec-section .spec-list ul li .spec .desc{font-size:14px}
   

/*#New htmlcontent Inforow. z.B. Crocfol */
.product-content .inforow { text-align: left;display: block;overflow: hidden;}
.product-content .inforow .column { padding: 2em; }
.product-content .inforow .column.center {text-align: center}
.product-content .inforow img { width: 100% !important;height: auto; max-width: 400px }
.product-content .inforow h1 { font-size: 1.5em;font-weight: 500; color:#666 }
.product-content .inforow h2 { font-size: 1.3em;font-weight: 300;line-height: 1.3em;margin-bottom: 0.3em;; color:#666 }
.product-content .inforow p { font-size: 1.1em;  color:#666 }
.product-content .inforow a.infolink { margin-top: 3em;display: inline-block;font-size: 1.4em;text-transform: uppercase}

/*Otterbox*/
.pdp-features .pdp-feature {margin: 0 auto;width: 90%;}
.pdp-features .pdp-features { clear: both;}
.pdp-features .pdp-feature:before {display: inline-block;vertical-align: middle;content: '';height: 100%;}
.pdp-features .pdp-feature h3 {font-size: 1.6em;text-transform: uppercase; font-weight: 500}
.pdp-features .pdp-feature h4 {font-size: 1.2em;width: 100%;}
.pdp-features .pdp-features-hero-content {left: 4em;width: 500px;position: absolute;top: 4em;color: white;}

/*.pdp-features .pdp-features-hero .img-wrap, .testimonials .img-wrap, .full-video .img-wrap {height: 200%;left: -50%;position: absolute;top: -50%;width: 200%;}*/
.hero-content h1 {margin: 10px 0;color: white;}
.hero-content p { font-size: 1.6em;}
.pdp-features .pdp-features-hero {overflow: hidden;position: relative;z-index: 1;}
.pdp-features .pdp-features-hero img {width: 100%}
.pdp-features .large-product-img {position: absolute;top: -100%;}
.pdp-features .pdp-features-thirds {border-bottom: 1px solid #9e9e9e;padding-bottom: 40px;position: relative;z-index: 3;}
.pdp-features .pdp-features-thirds>* {display: inline-block;vertical-align: middle;width: 33%;}
.pdp-features .pdp-features-thirds img {margin: 0 auto;max-width: 250px;width: 90%;display: block;}
.pdp-features .pdp-features-thirds .closeup h6 {color: #222a2b;padding: 25px 10px 0;text-align: center;font-size: 1em;text-transform: uppercase; font-weight: 500}
.pdp-features .pdp-features-halves {border-top: 1px solid #9e9e9e;clear: both;min-height: 280px;height: auto;}
.pdp-features .pdp-features-halves .feature-content {float: none;}
.pdp-features .pdp-features-halves>* {display: inline-block;vertical-align: middle;padding: 1%;width: 50%;}
.pdp-features .pdp-features-halves>span+.feature-content {display: none;}
.pdp-features .pdp-features-halves>span img {width: 100%;}
.pdp-features .pdp-features-two-one {height: 475px;min-height: 280px;}
.pdp-features .pdp-features-two-one>* {display: inline-block;vertical-align: middle;padding: 1%;width: 50%;}
.pdp-features .pdp-features-two-one img {width: 100%;}
.otterbox .cdp { clear: both;}

.pdp-features .pdp-features-two-one .feature-content {padding-left: 0;}

.otterbox .technology.otter-tab h5 { display: none;}
.otterbox .technology.otter-tab h6 { font-size: 1.2em;margin-bottom: 1em; text-transform: uppercase}
.otterbox .cdp-item,.otterbox .materials, .otterbox .compatibility, .otterbox .features {width: 32%;float: left;margin-right: 0.5%; padding: 2em}
.otterbox .compatibility { float: left;}
.otterbox .features { float: right;}
.otterbox .cdp-logo {text-align: center;}
.otterbox .materials,.otterbox .features { display: block;overflow: hidden;margin-bottom: 30px; float: right}
/*.otterbox .materials ul,.otterbox .features ul {padding: 1.5em; font-size: 1.2em;}*/
.otterbox .materials ul,.otterbox .features ul {padding: 0 1em;}
.otterbox .materials ul li,.otterbox .features ul li { line-height: 1.6em;font-size: 0.90em; list-style: square;display: list-item; overflow: visible}

.otterbox .compatibility span {display: inline-block;vertical-align: top;margin-right: 5%;width: 42%;}
.otterbox .compatibility span h4 { font-size: 1em;}
.otterbox .compatibility a{ color: #666666; cursor:default}

@media all and (max-width: 1680px) {
    .pdp-features .pdp-features-two-one {min-height: 375px; height: auto}
}

@media all and (max-width: 1299px) {
    .pdp-features .pdp-features-two-one {min-height: 0;}
}

@media all and (max-width: 1200px) {
    .product-content figcaption h2 { font-size: 1.5em;}
    .product-content figcaption h3 { font-size: 1.3em;}
    .product-content figcaption p { font-size: 0.95em;}
}
@media all and (max-width: 1024px) {
    
    
    .product-content .inner-x { max-width: 55%}
    /*.product-content .inner-x .title {font-size: 1.2em}*/


}
@media all and (max-width: 1023px) {
    .product-content .inner-x .title.m-white { color: #fff}
    .product-content .inner-x .desc.m-white { color: #fff}
}

@media all and (max-width: 991px) {
 
    .product-content figcaption h2 { font-size: 1.3em; }
    .product-content figcaption h3 { font-size: 1.1em; }
    .product-content figcaption p { font-size: 0.8em;}

    .product-content .spec-section .spec-list ul{ width: 100%;float: none;}
    .product-content .spec-section .spec-list .tit{width: 100%;float: none;padding-bottom: 20px;}
    .product-content .spec-section .spec-list ul li{ width: 50%;}

    .product-content .inner-x { max-width: 75%}

}

@media all and (max-width: 768px) {
    .product-content .keynote_row_group .row_left { width: 100%; float: none }
    .product-content .keynote_row_group .row_right { width: 100%; float: none }
    .product-content .keynote_small_wide {margin-bottom: 20px}
    /*.product-content .inner-x { max-width: 65%}*/
    .pdp-features .large-product-img {position: absolute;top: -30%;}    
}

@media all and (max-width: 650px) {

     /*.product-content .inner-x { max-width: 65%}*/

    .product-content figcaption h2 { font-size: 1.1em;}
    .product-content figcaption h3 { font-size: 0.9em; }
    .product-content figcaption p { font-size: 0.7em;}

    .product-content .spec-section .spec-list ul li{ width: 100%;}

    .product-content .column.third { width: 100%; }
    .product-content .column.two-thirds { width: 100%; }
    .product-content .inforow .column { padding: 0;}


    .otterbox .closeup {display: none}
    .otterbox .large-product-img {display: none}
    .pdp-features .pdp-features-halves>* {width: 100%}
    .pdp-features .pdp-features-two-one>* {width: 100%}
    .pdp-features .pdp-features-thirds>* {width: 100%;}
    .pdp-features .pdp-feature{ text-align: center}
    .pdp-features .feature-content {padding: 5% 0}
}

@media all and (max-width: 520px) {

 
    .product-content figcaption h2 { font-size: 0.9em; }
    .product-content figcaption h3 { font-size: 0.7em; }
    .product-content figcaption p { font-size: 0.6em;}
    .product-content .column.half { width: 100%; }

    .otterbox .cdp-item,.otterbox .materials, .otterbox .compatibility, .otterbox .features {width: 99%;float: left;margin-right: 0.5%; padding: 2em}
}

@media all and (max-width: 420px) {
       .product-content .inner-x { max-width: 100%}
}


