.tabpanel__tab {
    position: absolute; 
    left: -10000px; 
    top: auto; 
    width: 1px; 
    height: 1px; 
    overflow: hidden;
    
	&:checked{
		+ .tabpanel__tablabel {
			background: #e3e0cf;
            color: black;
		}
	}
}
    
.tabpanel__tablabel {
    flex: 0 1 auto;
    padding: 12px;
    background: #9fa8a3;
    color: white;
    font-weight: 700;
    
    &:hover {
        cursor: pointer;
    }
}

.tabpanel__panel {
    display: none;
    background: #e3e0cf;    
    
    > * {
        &:first-child {
            margin-top: 0;    
        }
        
        &:last-child {
            margin-bottom: 0;    
        }
    }
    
    > * + * {
        margin-top: 24px;
    }
}

#tabpanel__tab-1:checked ~ .tabpanel__panels #tabpanel__panel-1,
#tabpanel__tab-2:checked ~ .tabpanel__panels #tabpanel__panel-2,
#tabpanel__tab-3:checked ~ .tabpanel__panels #tabpanel__panel-3,
#tabpanel__tab-4:checked ~ .tabpanel__panels #tabpanel__panel-4,
#tabpanel__tab-5:checked ~ .tabpanel__panels #tabpanel__panel-5 {
    display: block;
    position: relative;
	top: 0px;
}

.media__body {
    > * {
        margin: 0;    
    }
    
    > p + p,
    > p + h2 {
        margin-top: 24px;
    }
}

.media {
    display: flex;
    
    @include breakpoint(small) {
        flex-direction: column;
        align-items: flex-start;
        
        .media__img {
            margin: 0 auto;
            
            + .media__body {
                margin: 12px 24px 24px 24px;
            }
        }
    }
    
    @include breakpoint(big) {
        align-items: flex-start;
        
        .media__img {
            flex: 0 1 auto;
            height: auto;
            
            + .media__body {
                margin: 24px 105px 24px 18px;
            }
        }
    }
}

.tabpanel {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    
    @include breakpoint(small) {
        flex-direction: column;
        
        .tabpanel__tablabel {
            padding: 24px 36px;
            
            + .tabpanel__tab {
                + .tabpanel__tablabel {
                    margin-top: 6px;
                }
            }
        }
        
        .tabpanel__tab {            
            &:checked {
                ~ .tabpanel__panels {
                    order: 1;
                }
            }
            
            &:not(:checked) {
                + .tabpanel__tablabel {
                    order: initial;
                }
            }
        }
        
        #tabpanel__tab-1 {
            + .tabpanel__tablabel {
                order: 1;
            }
            
            &:checked {
                ~ .tabpanel__panels {
                    order: 1;
                }
            }
        }
        
        #tabpanel__tab-2 {
            + .tabpanel__tablabel {
                order: 2;
            }
            
            &:checked {
                ~ .tabpanel__panels {
                    order: 2;
                }
            }
        }
        
        #tabpanel__tab-3 {
            + .tabpanel__tablabel {
                order: 3;
            }
            
            &:checked {
                ~ .tabpanel__panels {
                    order: 3;
                }
            }
        }
        
        #tabpanel__tab-4 {
            + .tabpanel__tablabel {
                order: 4;
            }
            
            &:checked {
                ~ .tabpanel__panels {
                    order: 4;
                }
            }
        }
        
        #tabpanel__tab-5 {
            + .tabpanel__tablabel {
                order: 5;
            }
            
            &:checked {
                ~ .tabpanel__panels {
                    order: 5;
                }
            }
        }
        
        .tabpanel__panel {
            padding: 0 12px 12px 12px;
        }
    }
    
    @include breakpoint(big) {
        flex-direction: row;
        
        .tabpanel__tablabel {
            flex: 0 1 auto;
            padding-left: 24px;
            padding-right: 24px;
            
            + .tabpanel__tab {
                + .tabpanel__tablabel {
                    margin-left: 6px;
                }
            }
        }
        
        .tabpanel__panel {
            padding: 12px;
        }
        
        .tabpanel__panels {
            flex: 1 1 100%;
        }
    }
}


.wizard {
    margin: 20px auto;
    background: #fff;
}

    .wizard .nav-tabs {
        position: relative;
        margin: 40px auto;
        margin-bottom: 0;
        border-bottom-color: #e0e0e0;
    }

    .wizard > div.wizard-inner {
        position: relative;
    }

.connecting-line {
    height: 2px;
    background: #e0e0e0;
    position: absolute;
    width: 80%;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 50%;
    z-index: 1;
}

.wizard .nav-tabs > li.active > a, .wizard .nav-tabs > li.active > a:hover, .wizard .nav-tabs > li.active > a:focus {
    color: #555555;
    cursor: default;
    border: 0;
    border-bottom-color: transparent;
}

span.round-tab {
        width: 112%;
    height: 47px;
    line-height: 42px;
    display: inline-block;
    border-radius: 23px;
    background: #fff;
    border: 2px solid #e0e0e0;
    z-index: 2;
    position: absolute;
    left: 0;
    text-align: center;
    font-size: 17px;
}
span.round-tab i{
    color:#555555;
}
.wizard li.active span.round-tab {
       background: #312f47;
    border: 2px solid #49455a;
    color: white;
    
}
.wizard li.active span.round-tab i{
    color: #fdfeff;
}

span.round-tab:hover {
    color: #333;
    border: 2px solid #333;
}

.wizard .nav-tabs > li {
    width: 20%;
}

.wizard li:after {
    content: " ";
    position: absolute;
    left: 46%;
    opacity: 0;
    margin: 0 auto;
    bottom: 0px;
    border: 5px solid transparent;
    border-bottom-color: #5bc0de;
    transition: 0.1s ease-in-out;
}

.wizard li.active:after {
    content: " ";
    position: absolute;
    left: 37%;
    opacity: 1;
    margin: 0 auto;
    bottom: 0px;
    border: 10px solid transparent;
    border-bottom-color: #312f47;
}

.wizard .nav-tabs > li a {
  width: 79%;
    height: 62px;
    margin: 10px auto;
    border-radius: 86%;
    padding: 0;
}

    .wizard .nav-tabs > li a:hover {
        background: transparent;
    }

.wizard .tab-pane {
    position: relative;
    padding-top: 50px;
	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
    padding: 20px 30px;
}

.wizard h3 {
    margin-top: 0;
}

@media( max-width : 585px ) {

.wizard .nav-tabs > li {
    width: 100%;
}
    .wizard {
        width: 95%;
        height: auto !important;
    }

    span.round-tab {
       font-size: 16px;
    width: 100%;
    height: 100%;
    line-height: 50px;
   
    }
	.wizard li.active:after {
    content: " ";
    position: absolute;
    left: 37%;
    opacity: 1;
    margin: 0 auto;
    bottom: 0px;
    border: 10px solid transparent;
    border-bottom-color: #312f47;
	display:none;
}

    .wizard .nav-tabs > li a {
           width: 100%;
    height: 44px;
    line-height: 50px;
    }

    .wizard li.active:after {
        content: " ";
        position: absolute;
        left: 35%;
    }
}

.our-team-main
{
	width:100%;
	height:auto;
	border-bottom:5px #323233 solid;
	background:#fff;
	text-align:center;
	border-radius:10px;
	overflow:hidden;
	position:relative;
	transition:0.5s;
	margin-bottom:28px;
}


.our-team-main img
{
	border-radius:50%;
	margin-bottom:20px;
	width: 90px;
}

.our-team-main h3
{
	font-size:20px;
	font-weight:700;
}

.our-team-main p
{
	margin-bottom:0;
}

.team-back
{
	width:100%;
	height:auto;
	position:absolute;
	top:0;
	left:0;
	padding:5px 15px 0 15px;
	text-align:left;
	background:#fff;
	
}

.team-front
{
	width:100%;
	height:auto;
	position:relative;
	z-index:10;
	background:#fff;
	padding:15px;
	bottom:0px;
	transition: all 0.5s ease;
}

.our-team-main:hover .team-front
{
	bottom:-200px;
	transition: all 0.5s ease;
}

.our-team-main:hover
{
	border-color:#777;
	transition:0.5s;
}
.nav-tabs { border-bottom: 2px solid #DDD; }
    .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { border-width: 0; }
    .nav-tabs > li > a { border: none; color: #666;font-size: 18px; }
        .nav-tabs > li.active > a, .nav-tabs > li > a:hover { 
           border: none;
   color: #392d48 !important;
    background: transparent;
    font-weight: 600;
}
        .nav-tabs > li > a::after { content: ""; background: #392d48d9; height: 3px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s; transform: scale(0); }
    .nav-tabs > li.active > a::after, .nav-tabs > li:hover > a::after { transform: scale(1); }
.tab-nav > li > a::after { background: #21527d none repeat scroll 0% 0%; color: #fff; }
.tab-pane { padding: 15px 0; }
.tab-content{padding:20px}

.card {background: #FFF none repeat scroll 0% 0%;/* box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);*/ margin-bottom: 10px; margin-top:15px; }
.panel-group .panel {
        border-radius: 0;
        box-shadow: none;
        border-color: #EEEEEE;
    }

    .panel-default > .panel-heading {
        padding: 0;
        border-radius: 0;
        color: #212121;
        background-color: #FAFAFA;
        border-color: #EEEEEE;
    }

    .panel-title {
           font-size: 21px;
    font-weight: 600;
    color: #FFFFFF;
    }

    .panel-title > a {
	    margin-left: 0px;
        display: block;
           padding: 7px;
    text-decoration: none;
    background: #26415c;
    }
   
/*   
   .panel-title >a:hover, a:focus{
   background: #9c0505;
    color: #fdfdfc;
   }*/
    .more-less {
        float: right;
        color: #fcfbfb;
    }

    .panel-default > .panel-heading + .panel-collapse > .panel-body {
        border-top-color: #EEEEEE;
    }

.demo {
    padding-top: 60px;
    padding-bottom: 60px;
}

.shadow{box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);}

.list li h6{margin-bottom: 15px;
    font-size: 17px;}
.square, .btn {
    border-radius: 0px!important;
}

/* -- color classes -- */
/*memberprofile page css*/

.coralbg {
    background-color: #26415c;
} 

.coral {
    color: #FA396f;
}

.turqbg {
    background-color: #46D8D2;
}

.turq {
    color: #46D8D2;
}

.white {
    color: #fff!important;
	line-height: 30px;
}

/* -- The "User's Menu Container" specific elements. Custom container for the snippet -- */
div.user-menu-container {
  z-index: 10;
  background-color: #fff;
  margin-top: 20px;
  background-clip: padding-box;
  opacity: 0.97;
  filter: alpha(opacity=97);
  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}

div.user-menu-container .btn-lg {
    padding: 0px 12px;
}

div.user-menu-container h4 {
   
    color: #656464;
	font-size: 15px;
}

div.user-menu-container a, div.user-menu-container .btn  {
    transition: 1s ease;
}

div.user-menu-container .thumbnail {
   width:100%;
   min-height:357px;
   border: 0px!important;
   padding: 0px;
   border-radius: 0;
   border: 0px!important;
}

/* -- Vertical Button Group -- */
div.user-menu-container .btn-group-vertical {
    display: block;
}

div.user-menu-container .btn-group-vertical>a {
    padding: 30px 25px;
    background-color:#1c354f;
    color: white;
    border-color: #fff;
	margin: 0;
}

div.btn-group-vertical>a:hover {
    color: white;
    border-color: white;
}

div.btn-group-vertical>a.active {
    background: #c10a3d;
    box-shadow: none;
    color: white;
	margin-left: 0;
}
/* -- Individual button styles of vertical btn group -- */
div.user-menu-btns {
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 0;
}

div.user-menu-btns div.btn-group-vertical>a.active:after{
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  margin-top: -13px;
  border-left: 0;
  border-bottom: 13px solid transparent;
  border-top: 13px solid transparent;
  border-left: 10px solid #46D8D2;
}
/* -- The main tab & content styling of the vertical buttons info-- */
div.user-menu-content {
    color: #323232;
}

ul.user-menu-list {
    list-style: none;
    margin-top: 20px;
    margin-bottom: 0;
    padding: 10px;
    border: 1px solid #eee;
}
ul.user-menu-list>li {
    padding-bottom: 8px;
    text-align: center;
}

div.user-menu div.user-menu-content:not(.active){
  display: none;
}

/* -- The btn stylings for the btn icons -- */
.btn-label {position: relative;left: -12px;display: inline-block;padding: 6px 12px;background: rgba(0,0,0,0.15);border-radius: 3px 0 0 3px;}
.btn-labeled {padding-top: 0;padding-bottom: 0;}

/* -- Custom classes for the snippet, won't effect any existing bootstrap classes of your site, but can be reused. -- */

.user-pad {
    padding: 20px 25px;
}

.no-pad {
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 0;
}

.user-details {
    background: #eee;
    min-height: 333px;
}

.user-image {
  max-height:357px;
  overflow:hidden;
}

.overview h3 {
  font-weight: 300;
    margin-top: 15px;
    margin: 5px 0 4px 0;
    font-size: 19px;

}

.overview h4 {
    font-weight: bold!important;
    font-size: 40px;
    margin-top: 0;
}

.view {
    position:relative;
    overflow:hidden;
    margin-top: 10px;
}

.view p {
    margin-top: 20px;
    margin-bottom: 0;
}
 
.caption {
    position:absolute;
    top:0;
    right:0;
    background: rgba(70, 216, 210, 0.44);
    width:100%;
    height:100%;
    padding:2%;
    display: none;
    text-align:center;
    color:#fff !important;
    z-index:2;
}

.caption a {
    padding-right: 10px;
    color: #fff;
}

.info {
    display: block;
    padding: 10px;
    background: #eee;
    text-transform: uppercase;
    font-weight: 300;
    text-align: right;
}

.info p, .stats p {
    margin-bottom: 0;
}

.stats {
    display: block;
    padding: 10px;
    color: white;
}

.share-links {
    border: 1px solid #eee;
    padding: 15px;
    margin-top: 15px;
}

.square, .btn {
    border-radius: 0px!important;
}

/* -- media query for user profile image -- */
@media (max-width: 767px) {
    .user-image {
        max-height: 400px;
    }
}
.back{border: 2px solid;
    height: 357px;}
	
	.product-sidebox div.topbar {
      background: #2e2745;
    width: 100%;
    font-size: 20px;
    width: 100%;
    padding: 12px 0px 2px 15px;
}
.cwhite {
    color: #fff !important;
}
.sidebox-btns a {
    margin: 9px 0px;
    width:100%;
    text-align: center;
  font-size:15px;
}
	
/*	end css of member profile page*/