.pf-lightblue-bg{
    background: #9fc7cf;
}
.pf-lightblue{
    color: #9fc7cf;
}

.pf-darkblue-bg{
    background: #00355d;
}
.pf-darkblue{
    color: #00355d !important;
}

.pf-lightgrey-bg{
    background: #a3acb1;
}
.pf-lightgrey{
    color: #a3acb1;
}

.faq-question-symbol{
    font-size:27px !important; vertical-align:middle; color: #9fc7cf;
}

.advantages-check{
    font-size:26px !important
}

h4 span{
    color: #00355d
}

header {
    background: #f2f2f2;
    padding: 5px;
}

h2, h3, h4, h5{
    font-family: opensans-semibold, helvetica, sans-serif
}

h2{
    font-family: opensans-bold, helvetica, sans-serif
}

h5{
    line-height: 30px
}

.header_maintitle{
    width: 100%; 
    margin: auto;
    text-align: center
}

.uppercase{
    text-transform: uppercase;
}

.colored_bold_span span{
    font-family: opensans-semibold, helvetica, sans-serif;
    color: #e56e21
}


.logo {
    cursor: pointer
}

/* Main CTA button */
.gen-cta{
    background: #e56e21;
    color: #fff;
    font-size: 20px;
    text-transform: uppercase;
    padding: 10px 40px;
    vertical-align: middle;
    cursor: pointer;
}

.gen-cta i{
    font-size: 25px;vertical-align: middle;
}

.small-arrow i{
    font-size: 22px;
    vertical-align: middle
}

.gen-cta:hover{
    background: #f0823a;
    color: #fff;
}

.go-offer{
    display: table;
    margin: auto
}


body {
    margin: 0;
    font-family: opensans-regular, helvetica, sans-serif;
    font-size: 18px;
    color:black;
}

main{
    margin-top:61px
}

@media(max-width:800px){
    main{
        margin-top: 0
    }
}

b, strong{
    font-family: opensans-bold, helvetica, sans-serif
}


/* Navigation */
.nav-item{
    cursor: pointer;
    margin-right: 20px
}

.nav-item:last-child{
    margin-right: 0
}

.nav-item-active{
    font-family: opensans-bold, helvetica, sans-serif;
    border-bottom: 2px solid #00355d;
    color: #00355d
}

.nav-item:hover{
    color: #00355d;
    border-bottom: 1px solid #00355d;
}

#arrow-up {
    padding: 5px;
    position: fixed !important;
    right: 30px;
    bottom: 30px;
    color: #fff;
    background: rgba(0, 53, 93, 0.8);
    width: 50px;
    height: 45px;
    font-size: 24px;
    text-align: center;
    border-radius: 200px;
    padding-bottom: 44px;
    cursor: pointer;
    display: none
}

.arrow-prev {
    color: #959393;
    text-align: center !important;
    border-radius: 900px; 
    margin: auto;
    display: table;
    cursor: pointer;
    font-size: 30px
}

.pcx-header-box{
    width: 380px; 
    margin-top: -30px
}

.webp .header-container{
    height: 450px; background: url(https://d1fxleuemb5ki8.cloudfront.net/bilder/webseite/petfokus-headline-bg.webp) no-repeat; 
    background-size: 100%
}

.no-webp .header-container{
    height: 450px; background: url(https://d1fxleuemb5ki8.cloudfront.net/bilder/webseite/petfokus-headline-bg.png) no-repeat; 
    background-size: 100%
}

.headline-spacer{
    height:80px
}

@media(max-width:1200px){
    .header-container{
       height: 380px; 
    } 
    .headline-spacer{
        height:0
    }
}

@media(max-width:800px){
    .webp .header-container{
        height: auto; background: url(https://d1fxleuemb5ki8.cloudfront.net/bilder/webseite/petfokus-headline-bg.webp) no-repeat; 
        background-size: 350%; background-position: bottom center
    }
    .no-webp .header-container{
        height: auto; background: url(https://d1fxleuemb5ki8.cloudfront.net/bilder/webseite/petfokus-headline-bg.png) no-repeat; 
        background-size: 350%; background-position: bottom center
    }
}

.ul-check{
    list-style: none;
    padding:0;
    padding-left:30px;
}

.ul-check li{
    list-style: none;
    padding-left: 1.3em;
    margin-bottom: 15px
}

.ul-check li:before {
  content: "\f00c"; /* FontAwesome Unicode */
  font-family: FontAwesome;
    color: #00355d;
  display: inline-block;
  margin-left: -1.3em; /* same as padding-left set on li */
  width: 1.3em; /* same as padding-left set on li */
}



/* Main colors */

.bf_orange_bg{
    color: #fff;
    background: #e56e21 !important;
}

.bf_orange_font{
    color: #e56e21;
}

.bf_green_bg{
    color: #fff;    
    background: #2d6f15;
    
}

.bf_green_font{
    color: #2d6f15 !important;
}

.bf_lightgray_bg{
    background: #f2f2f2;
}

.fixed_spacer{
    padding-top: 40px;
    padding-bottom: 40px;
}

.s_round_corners{
    border-radius: 10px;
}

#container_review h3{
    color: #2d6f15 !important;
}

/* Ratings */

.ratings i {
    color: #fec448;
    font-size: 20px
}

.ratings {
    color: #7c7c7c;
    font-family: opensans-light, helvetica, sans-serif;
    padding-top: 6px;
}

.old-price {
    color: #acacac;
    text-decoration: line-through;
}

.new-price {
    font-family: opensans-semibold, helvetica, sans-serif;
    color: #2d6f15
}

.ribbon-tag {
    width: 75px;
    margin-bottom: 4px
}

.lgvv img {
    width: 45px;
    cursor: pointer
}

.angebot-top {
    border: 1px solid #cfcdcd;
    text-align: center;
    border-radius: 5px;
    padding: 10px;
    cursor: pointer;
    padding-top: 20px;
    margin: 3px
}

.angebot-top:hover {
    background: #eef6ea;
}

.angebot-top p {
    font-size: 12px;
    text-align: center;
    padding: 5px;
    margin-bottom: 5px;
    color: #959393;
}

.btn-primary{
    background: #2d6f15;
    border-radius: 20px;
    border: 1px solid #2d6f15;
    text-transform: uppercase;
    padding: 10px 40px
}

.btn-primary:hover{
    background: #419d1f;
    border: 1px solid #419d1f;
}

/* Tooltip design */

.tooltip-adj{
    border-radius: 150px; box-shadow: 0 0 20px rgba(0,0,0, 0.2);
    border:none !important;
}

.tooltip-adj img{
    width:200px
}

.col-sm-6 p{
    font-size: 14px; 
    margin-top:20px
}

#gallery-placeholder{
    width: 400px; 
    height: 400px;
    overflow: hidden;
}

#gallery-placeholder div{
    position: relative; 
    width: 1200px;
}    

#gallery-placeholder img{
    width:400px; 
    height:400px;
    float: left;
}

#gallery-thumbs{
    text-align: center;
}

#gallery-thumbs img{
    width: 100px; 
    border: 1px solid #e6e6e6; 
    border-radius: 8px; 
    margin: 3px;
    cursor: pointer
}

.gall-thumb-selected{
    border: 2px solid #cfcfcf !important;
}

/* FAQ Menu */

.faq-menu{
    margin-left: -20px;
}

.faq-menu h3{    
    color: #a3acb1;
    cursor: pointer;
}

.faq-menu h3:hover{
    color: #9fc7cf;
}



.faq-item-selected{
    border-bottom: 3px solid #00355d;
}

/* FAQ Section: Kraft der Natur */

.faq-kdn{
    position: relative
}


.faq-kdn img{
    width: 270px
}

/* FAQ Section: Ingredients */

.faq-ingredients{
    position: relative;
}

.faq-ingredients img{
    width: 290px;
    padding: 40px;
    text-align: left
}

.faq-ingredients .col-sm-9 div{
    padding: 60px;    
}

/* FAQ Section: Frequently asked questions */

.faq-qns .col-sm-1 i{
    font-size: 30px;
    color:#ccc
}

.faq-qns .col-sm-1{
    text-align: center
}

.faq-qns .row{
    margin-bottom: 35px
}

.faq-qns .icon{
    width:140px
}

/* FAQ Section: Studies and sources */

.faq-sources li{
    margin-bottom: 30px
}

/* Report section */

#report img{
    width: 250px;
    margin: auto;
}

#report ul{
    list-style: none; 
    margin-left: -20px
}

#report ul i{
    color:#2d6f15
}


#report .col-sm-9{
    margin-top:30px
}

#report .col-sm-3{
    margin-top:10px
}

#report .col-sm{
    text-align: center
}

/* Triptychon offer boxes */

/*Trypticon*/
/*
.products-items {
  margin: auto;
  margin-bottom: 610px;
}

@media (min-width: 880px) {
  .products-items {
    width: 870px;
  }
}

@media (min-width: 1010px) {
  .products-items {
    width: 100%;
  }
}

.offer-boxes{
    padding-top: 80px;
    padding-bottom: 140px;
}

.offer-boxes .col-sm{
    background: #fff; 
    padding: 10px; 
    height: auto;
    box-shadow: 0 0 10px rgba(0,0,0,0.03); 
    text-align: center
}

.offer-boxes .col-sm .highlight{
    position: relative
}

.offer-boxes .inner{
    background: #fff; 
    padding: 10px; 
    margin: auto !important; 
    left: -5%; 
    right: -5%; 
    top: 0; 
    width: 110%; 
    position: absolute; 
    z-index: 9999; 
    height: 110%; 
    top: -5%; 
    box-shadow: 0 0 20px rgba(0,0,0,0.1); 
    text-align: center
}

.offer-boxes table{
    width: 100%;
    text-align: center
}

.offer-boxes table tr:nth-child(1) td{
    position: relative; 
    height: 350px;
}

.offer-boxes table tr:nth-child(2) td{
    color: #323232;
    font-size: 18px;
    padding-top: 20px
}

.offer-boxes table tr:nth-child(3) td{
    font-size: 20px;
}

.offer-boxes table tr:nth-child(4) td{
    color: #a3a3a3;
    font-family: opensans-light, helvetice, sans-serif;
    font-size: 20px;
    font-style: italic;
    text-decoration: line-through
}

.offer-boxes table tr:nth-child(5) td{
    font-size: 20px;
}

.offer-boxes table tr:nth-child(6) td{
    height: 30px;
}

.offer-boxes table tr:nth-child(7) td{
    height:70px;
}   

.offer-boxes table tr:nth-child(8) td{
    color: #e63f12;
    font-size: 18px;
    height:30px;
}   

.offer-boxes table tr:nth-child(9) td{
    padding-top: 20px;
    padding-bottom: 40px !important;
}

.offer-boxes h3{
    display: table;
    margin: auto;
    color: #2d6f15;
    padding-bottom: 80px
}

.offer-boxes img{
    width: 290px; 
    z-index: 99999; 
    position: absolute; 
    top: 80px; 
    left: 0; 
    right: 0; 
    margin: auto
}

.offer-boxes .circle{
    background: #2d6f15; 
    padding: 30px; 
    position:absolute; 
    top:60px; 
    left:0; 
    z-index: 99; 
    right:0; 
    width:280px; 
    margin: auto; 
    border-radius: 300px; 
    height:280px
}

.offer-boxes .cta{
    color: #fff;
    cursor: pointer;
    padding: 10px 40px
}

.offer-boxes .cta:hover{
    background:#f0823a !important;
    color:#fff;
}
*/
/* Seals section */

.icon_img{
    width: 115px
}

#seals .col-sm{
    margin-top: 10px
}

#seals .col-sm-17{
    margin-bottom: 30px; 
    text-align: left; 
    margin-right: 10px
}

#seals h3{
    text-align: center;
    margin-bottom: 50px
}   

a:link, a:hover, a:visited{
    color: #00355d;
    text-decoration: underline
}

/* Footer section */

footer {
    background: #a3acb1; 
    text-align: center; 
    color: #000
}

footer a, footer a:hover{
    color: #fff; 
    text-decoration: none
}

footer ul{
    display: inline;
    list-style: none
}

footer li{
    display: inline;
    margin-right: 50px;
    padding-bottom: 10px;
    cursor: pointer
}


@media(max-width:800px){
    footer li{
        border: 1px solid #00355d;
        width:100%;
        display:block;
        border-radius: 5px;
        padding:20px;
        text-align: left;
        font-family: opensans-bold;
        margin-bottom: 10px
    }
}
.pf-coin-bg {
    background-color: #a3acb1;
}
footer img{
    margin: 30px auto
}

footer a:hover{
    color: #00355d;
    text-decoration: underline
}


.footer_selected{
    border-bottom: 2px solid #fff
}

#header-content{
    margin-bottom: 40px
}
  
#section-benefits .col-sm img{
    margin-top: 30px;
    display: block;
    width: 90%;
}

#section-benefits .col-sm div{
    width: 90%; 
    margin-top: 20px
}

#faqs{
    min-height: 500px
}

#main-content ul{
    list-style: circle
}

html,body {
    height: 100%;
}

main {
    min-height: 80%;
}


.arrow-down {
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 30px solid #00355d;
  margin-left: 145px;
  margin-top: -2px;
}


@media(max-width:1200px){
    .arrow-down{
        display: none
    }
}

.check-list-mobile, .check-list-dot-mobile {
    list-style: none;
    padding: 0;
    text-indent: -3.7vw;
    margin-left: 11vw;
}

.check-list-mobile li:before {
    content: "\f00c";
    font-family: FontAwesome;
    display: inline-block;
    width: 3.5vw;
    font-size: 4.6vw;
    font-weight: bolder;
    color: #00355d !important;
    transform: translateY(0.2vw);
    line-height: 4.7vw;
}

.check-list-dot-mobile li:before {
    content: "\f1b0";
    font-family: FontAwesome;
    display: inline-block;
    width: 3.5vw;
    font-size: 5.5vw;
    font-weight: bolder;
    color: #00355d !important;
    transform: translateY(0.3vw);
    line-height: 4.7vw;
}