﻿/* Style the buttons that are used to open and close the accordion panel */
.button{
    background-color:#F5F5F5;
    color: #444;
    cursor: pointer;
    padding: 18px;
    vertical-align:text-bottom;
    border: none;
    outline: none;
    transition: 0.4s;
    margin-left:5px;
    margin-right:5px;
    margin-top:10px;
    position:inherit;
    
    
    }


.img-responsive {
   border-radius: 50%;
   width: 75px;
   height: 75px;
   vertical-align:top;
   top:auto;
   margin-left:20px;
   
   
            
}
/* Add a background color to the button if it is clicked on (add the .active class with JS) */
button.accordion.active{
    background-color: #17A589;
    color:white;
  
   
   }

button.accordion.hide{
	background-color:#FAFAFA;
    color:#444;

}

/* Style the accordion panel. Note: hidden by default */
div.panel {
   
    background-color: white;
    display:none;
    position: relative;
    text-align:left;
    margin-right: 200px;   
    margin-left: 20px;
    margin-top: 10px;
    margin-bottom:10px;
    position:static;
    }

/* The "show" class is added to the accordion panel when the user clicks on one of the buttons. This will show the panel content */
div.panel.show {
    display: block !important;
    multiopen: false;
    
  
}
div.panel.hide{
	display:none;
}

button.accordion:after {
    content: '\02795'; /* Unicode character for "plus" sign (+) */
    font-size: 15px;
    color: #777;
    vertical-align:bottom;
    margin-bottom:0px;
    margin-top:30px;
    position:static;
    text-align:center;

    
}

button.accordion.active:after{
   content:'X'; 
    color:white;
    font-size:15px;
    vertical-align:bottom;
  
    
    }
    
/*.glyphicon-triangle-top  {
	content:"\e253";
	color:white;
	font-size:15px;
	float:left;
}
