/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 30/dez/2016, 13:15:20
    Author     : Bruno
*/

.wrap-products{
    padding: 25px 50px 50px 50px;
}

.bg-chocolate{
    background-color: #3E2C22 !important;
}
.head-text{
   color: white;
   text-align: center;
   font-weight: bold;
   padding: 5px;
}
.panel-body{
    border:0px !important;
}
.panel-body > h1{
    color:white;
    text-align:center;
    border: 0px !important ;
}
.panel-default > .panel-heading {
    color: white;
    background-color: #3E2C22;
    border: 0px;
}
.panel-group .panel {
    margin-bottom: 0;  
    border: 0px!important;
}
.panel-default>.panel-heading+.panel-collapse>.panel-body {
    background-color:  #3E2C22 ;

}
.panel-body >.media{   
    text-align: justify ;
    text-justify: inter-cluster;
    color: white;
    margin: 0px;
}

.panel-body >.wrapper-image-left > img{
    float:left;
    height: 304px;
    width: 540px;
    margin: 20px;
    margin-top: 0px;
}

.wrapper-image-right > img{
    float:right;
    height: 304px;
    width: 540px;
    margin: 20px;
    }

#accordion .panel-heading { padding: 0;}

#accordion .panel-title{
}

#accordion .panel-title > a {
    text-align:left;
    font-size: 28px;
    display: block;
    padding: 0.4em 0.6em 0em 1em;
    outline: none;
    font-weight:bold;
    text-decoration: none;
    border: 0px;
}


#accordion .panel-title > a.accordion-toggle::before, #accordion a[data-toggle="collapse"]::before  {
     content:"\f13a \00a0";
    /*content:"\e113";*/
    float:left;
    /*font-family: 'Glyphicons Halflings';*/
    font-family: 'FontAwesome';
	
        margin-left :0.4em;
}
#accordion .panel-title > a.accordion-toggle.collapsed::before, #accordion a.collapsed[data-toggle="collapse"]::before  {
    
    content:"\f138 \00a0";
    /*content:"\e114";*/
}

/*------------------------------------------------------*/
/* RESPONSIVE
/*------------------------------------------------------*/
@media (max-width: 1440px) {

    .panel-body >.wrap-products{   
        padding: 45px 45px 45px 45px;
    }   

    .panel-body >.wrapper-image-left>img{
        border-radius: 5px;
        width:375px;
        height:211px;  
   }
   
   #accordion .panel-title > a {
    font-size: 28px;    
    padding: 0.4em 0.6em 0em 1em;
  
}

    #accordion .panel-title > a.accordion-toggle::before, #accordion a[data-toggle="collapse"]::before  {
	
        margin-left :0.4em;
}

}
@media (max-width: 1024px) {

    .panel-body >.wrap-products{   
        padding: 45px 45px 45px 45px;
    }   

    .panel-body >.wrapper-image-left>img{
        
        width:650px;
        height:366px;
        margin: 20px;
      
   }
   
    #accordion .panel-title > a {
        font-size: 24px;    
        padding: 0.4em 0.6em 0em 1em;
  
}

    #accordion .panel-title > a.accordion-toggle::before, #accordion a[data-toggle="collapse"]::before  {
	
        margin-left :8em;
}
   .media{
       float: left;
   }
}


/*---------- MEDIA 768px ----------*/
@media  (max-width: 768px) {
    .panel-body >.wrap-products{ 
        padding: 25px 25px 25px 25px;
    }
     .panel-body >.wrapper-image-left>img{
        float: none;
        margin:auto;
        margin-left: -5px;
        width:650px;
        height:366px;
   }
   
   .media{
      padding-top: 20px;
   }
   
      #accordion .panel-title > a {
    font-size: 22px;    
    padding: 0.4em 0.6em 0em 1em;
  
}

    #accordion .panel-title > a.accordion-toggle::before, #accordion a[data-toggle="collapse"]::before  {
	
        margin-left :-0.5em;
}
   

}
/*---------- MEDIA 425px ----------*/
@media  (max-width: 425px) {
    .panel-body >.wrap-products{
        padding: 10px 10px 25px 25px;
    }
    .panel-body >.wrapper-image-left>img{
        float: none;
        margin:auto;
        margin-left: -5px;
        width:300px;
        height:169px
   }
    #accordion .panel-title > a {
        text-align: left;
        font-size: 16px;
        display: block;
        padding: 0.4em 0.6em;
        outline: none;
        font-weight:bold;
        text-decoration: none;
        border: 0px;
    }
    
       #accordion .panel-title > a {
    font-size: 16px;    
    padding: 0.4em 0.6em 0em 1em;
  
}

    #accordion .panel-title > a.accordion-toggle::before, #accordion a[data-toggle="collapse"]::before  {
	
        margin-left :-0.5em;
}
 }
/*---------- MEDIA 375px ----------*/
@media  (max-width: 375px) {
    .panel-body >.wrap-products{
        padding: 10px 10px 25px 25px;
    }
    .panel-body >.wrapper-image-left>img{
        float:none;
        margin:auto;
        margin-left: -5px;
        width:255px;
        height:143px;
       
   }
    #accordion .panel-title > a {
        text-align: left;
        font-size: 14px;
        display: block;
        padding: 0.4em 0.6em;
        outline: none;
        font-weight:bold;
        text-decoration: none;
        border: 0px;
    }
  
    #accordion .panel-title > a {
        font-size: 14px;    
        padding: 0.4em 0.6em 0em 1em;
  
    }

    #accordion .panel-title > a.accordion-toggle::before, #accordion a[data-toggle="collapse"]::before  {
	
        margin-left :-0.4em;
}
}

/*---------- MEDIA 320px ----------*/
@media  (max-width: 320px) {
    .panel-body >.wrap-products{
        padding: 10px 10px 10px 10px;
    }
    .panel-body >.wrapper-image-left>img{
        
        float:none;
        margin:auto;
        width:190px;
        height:107px;
   }
   
}