@charset "utf-8";

h1, h2, h3 {margin: 0;}
h4, h5 { font-size: 16px !important;}
p { margin: 0; }
a { color: ##077CC5; }
ul { margin-bottom: 20px; }

.clearfix { clear: both; }
.txt-blue { color: ##077CC5; }
.border {
    border:2px solid #DDDDDD;
    border-radius: 6px;
    -webkit-box-shadow:  none;
    -moz-box-shadow:     none;
    box-shadow:          none;
}
.container { min-width: 983px !important; margin-bottom: 50px;}
.wrapper {
    margin: 10px auto 0;
    width: 1000px;
    color: #35495E;
    font-size: 14px;
    font-family:"Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    line-height: 26px;
}
.head-menu {
    margin-bottom: 10px;
    height: 20px;
    color: #BCC3CA;
}
.head-menu ul {
    margin: 0 0 0 auto;
    padding: 0;
    width: 135px;
    list-style: none outside none;
}
.head-menu li {
    display: block;
    float: left;
    margin: 0 10px 0 0;
}

.header-subscribe { float: right; margin: 32px 4px 0 0; }
.header-subscribe ul { list-style: none; }
.header-newsletter, .header-favourite { display: inline-block; margin-bottom: 8px; padding-left: 70px;}
.header-newsletter img, .header-favourite img { margin: 0 6px 6px 0; }
.header-search form { margin: 0; }
.navbar { font-size: 14px; }
.navbar a.brand {
    width: 128px;
    height: 34px;
    background: url(../img/panapro-logo.png) no-repeat center transparent;
    -webkit-transition: background 0.125s linear;
    -moz-transition: background 0.125s linear;
    -o-transition: background 0.125s linear;
    transition: background 0.125s linear;
}
.navbar a.brand:hover { background: url(../img/panapro-logo-hover.png) no-repeat center transparent; }


.sidebar { width: 248px; }
.sidebar a {color: #35495E;}
.sidebar > div { margin-bottom: 10px; }
.sidebar h3 { font-size: 12px; line-height: 18px; }
.sidebar-header {
    padding:10px 0 10px 12px;
    border-radius: 3px 3px 0 0;
    background-color: #DDDDDD;
    color: #ffffff;
    font-weight:bold;
    font-size:15px;
}
.sidebar-section { padding: 12px 6px; }
.sidebar-hb { padding: 16px 12px 12px 12px;}
.sidebar-cs { overflow: hidden; height: 629px; }
.product { margin: 0 0 30px; width: 700px; }
.product > div { padding: 20px 16px; }
.product li { margin-bottom: 6px;}

.product .divider{
    border-bottom: 1px solid #dfe4f2;
    -webkit-box-shadow: 0 1px 0 0 #ffffff;
    -moz-box-shadow:    0 1px 0 0 #ffffff;
    box-shadow:         0 1px 0 0 #ffffff;
}
.product-headline {

}
.product h1 {
    font-size: 23px;
    line-height: 32px;
}
.product h2 {
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 14px;
    line-height: 21px;
}
.product-description p {
    font-size: 14px;
    line-height: 26px;
}
.product-description table { font-size: 14px; }
.product-description th { padding: 2px 20px 14px 0; }
.product-description th span { font-weight: normal !important; }
.product-description td { padding: 2px 20px 2px 0; }

.product-images #product-images-big { margin-bottom: 20px; max-width: 724px; max-height: 524px; border-radius: 4px;}
.product-images ul { margin: 0; padding: 0; list-style: none; }
.product-images li {
    display: inline-block;
    margin: 4px;
    transition-duration:0.2s;
    transition-property:margin-top, box-shadow;
}
.product-images li:hover {
    cursor: pointer;
}

.product-images li:hover img {
    border: 2px solid #0484FB;
}

.product-images li img {
    max-width: 120px;
    max-height: 100px;
    border:2px solid #DDDDDD;
    border-radius: 4px;
}
.product-included { padding: 10px; }

.benefits {margin-top: 20px; border-top: 2px solid #DDDDDD; border-bottom: 2px solid #DDDDDD; }
.benefits .list { margin: 50px auto 40px; width: 900px; color: #6d7c8c; }
.benefits .list li { display: inline-block;  margin: 0 30px 0 0; padding-left: 30px; width: 250px; background: url(../img/checkmark.png) no-repeat top left transparent; vertical-align: top; }
.benefits h3 { margin: 0 0 10px; font-size: 18px; line-height: 21px; }
.benefits p { font-size: 14px; line-height: 22px; }

/* ------------------ */
/* categorie vertical */
/* ------------------ */
.cat-container { display: none; }
.cat-container ul, ol {
    margin: 0;
    padding: 0;
    list-style:none outside none;
    line-height: 12px:;
}
/* .cat-categories { margin-top: 8px; */
.cat-categories > ul > li {
    padding: 6px 0 6px 12px;
    border-bottom: 1px solid #F1F1F1;
}
.cat-categories > ul > li > ul { margin-left: 12px; }
.cat-container ul li > a {
    display:block;
    padding:4px 0;
    text-decoration: none;
    cursor: pointer;
}
.cat-container ul li > a:hover {
    color: #0185D6;
}
.cat-container .level0 { font-weight: bold; }
.cat-container .level1 { font-weight: normal; }


/* ---------------------- */
/* related article slider */
/* ---------------------- */


.carousel-inner { padding-top: 10px; }
.related .loader {margin: 0 auto; padding-top: 60px; text-align: center;}

.related {
    position: relative;
    margin: 50px auto 30px;
    min-height: 300px;
    width: 1000px;
    text-align: center;
}
.related h2 {
    margin-bottom: 30px;
    color: #6d7c8c;
    font-size: 20px;
}
.related a {
    color: #6D7C8C;
    text-decoration: none;
}

.carousel-control {
    z-index: 99;
    position: absolute;
    top: 40%;
    margin-top: -20px;
    width: 40px;
    height: 40px;
    border: 3px solid #FFFFFF;
    border-radius: 23px;
    background: none repeat scroll 0 0 rgba(34, 34, 34, 0.5) !important;
    color: #FFFFFF;
    text-align: center;
    font-weight: 600;
    font-size: 45px;
    line-height: 25px;
    opacity: 0.5;
}

.carousel-control:hover{ background: none repeat scroll 0 0 #0484FB !important; }

a.carousel-control { color: #ffffff; }

.carousel .itemSingle {
    min-width: 140px;
    transition-duration:0.2s;
    transition-property:margin-top, border;
}

.carousel .itemSingle:hover { margin-top: -5px; /*border:2px solid #0484FB;*/ }

.carousel .thumbContainer { display: table-cell; height: 140px; width: 230px; vertical-align: bottom; }

.carousel .thumbnail {
    /*height: 180px;*/
    overflow: hidden; /* contain images within thumbnail boundaries */
    margin: 0 auto 10px;
    padding: 0;
    width: 140px;
    border: 0; /* removes Bootstrap's default border */
    -webkit-box-shadow: 0 17px 22px -20px #c4c4c4;
    -moz-box-shadow: 0 12px 12px -10px #c4c4c4;
    box-shadow: 0 12px 12px -10px #c4c4c4;
}
.carousel .thumbnail img { width:100%; height:auto; } /* to keep proportions */
.carousel .itemSingle p { padding: 5px; font-size: 12px; line-height: 20px;} /* captions can be styled with an inline element */
.carousel .itemSingle p span { font-weight: bold; font-size: 120%;}

.carousel-indicators .active { margin: 0 4px; background-color: #0484FB; }
.carousel-indicators li { margin: 0 4px; border: none; background-color: #DDDDDD;}
.carousel-indicators { bottom: -30px; }


 /* vertical start*/

#carousel-related-vertical { margin-bottom: 30px; height: 602px;}

.vertical .carousel-control { margin-top: 0; left: auto; right: 40%; line-height: 21px;}

.vertical .carousel-control.left {
    top: auto;
    bottom: auto;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.vertical .carousel-control.right{
    top: auto;
    bottom: -40px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

.carousel.vertical .itemSingle {
    width: 218px !important;
    padding: 0 !important;
    text-align: center;
}

.carousel.vertical .thumbContainer {
    width: 218px !important;
}

.carousel.vertical p {
    width: 218px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vertical .carousel-inner {
  height: 600px;
}

.carousel.vertical .item {
  -webkit-transition: 0.6s ease-in-out top;
     -moz-transition: 0.6s ease-in-out top;
      -ms-transition: 0.6s ease-in-out top;
       -o-transition: 0.6s ease-in-out top;
          transition: 0.6s ease-in-out top;
}

.carousel.vertical .active {
  top: 0;
}

.carousel.vertical .next {
  top: 100%;
}

.carousel.vertical .prev {
  top: -100%;
}

.carousel.vertical .next.left,
.carousel.vertical .prev.right {
  top: 0;
}

.carousel.vertical .active.left {
  top: -100%;
}

.carousel.vertical .active.right {
  top: 100%;
}

.carousel.vertical .item {
    left: 0;
}​