.accordionplus * {box-sizing: border-box}

.accordionplus iframe { 
 max-height: 80vh!important; overflow-y: scroll!important;
}
.accordionplus { 	
	margin: 0 auto;
	display: flex;
	background: #000;
	width: 100%;
}
.ap-itemwrap {
	position: relative;
	width: 100%;height: 100%;		
	display: inline-flex;
	flex-grow: 1;
	text-align: center; 
    background-size: cover !important;
	}
	.ap-itemwrap:after {
		position: absolute; top: 0; left: 0;
		width: 100%; height: 100%; content: '';
		background: rgba(0,0,0,0.65); z-index: 0;
	}
	.ap-itemwrap.active:after { 
		background: rgba(0,0,0,0.75);
		transition: 0.75s ease all;
	}
	.ap-itemwrap.hide {  
		overflow: hidden;
		/*transition: 0.5s ease all;*/
	}
.ap-item { 
	cursor: pointer;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	flex-grow: 1;
	transition: 0.25s ease background;
	flex-basis: 15%;
	z-index: 1;
	}
	.ap-item:hover {
		background: rgba(148,117,80,0.5);
	}
	.ap-itemwrap.active .ap-item {
		background: none;
		color: #333;
	} 
.ap-info {
	opacity: 0;
	padding: 0;
	overflow: hidden;
	transition: 0.75s ease all;
	display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: left;
    vertical-align: top;
    z-index: 1;
    align-content: space-around;
    justify-content: flex-start;
	}
	.ap-info a.button { min-width: 100px; }
	.ap-info a.close.button {  
		cursor: pointer;
		transition: 0.25s ease background;
	} 
	.ap-itemwrap.active .ap-info {
		transition: 0.75s ease all;
		opacity: 1;
	}
	.ap-itemwrap.hide { 
		overflow: hidden;
		transition: 0.5s ease all;
	}
	.ap-info h1, .ap-info h2, .ap-info h3, .ap-info h4, .ap-info h5 { text-transform: none !important; }
	 
.ap-colwrap {
	display: flex;
    width: 100%;
    clear: both;
    align-items: center;
	}
	.ap-col {
    display: inline-block;
	}
	.ap-col1 { }
	.ap-col2 { text-align: center; }
	.ap-itemwrap a.closemobile { display: none; }
		
@media screen and (max-width: 950px)
{
	/* mobile display - vertical/regular accordion layout */
	
	.accordionplus 					{ height: auto; flex-direction: column; flex-wrap: wrap; }
	
	.ap-itemwrap 					{ flex-wrap: wrap; flex-direction: column; transition: 0.75s ease height; }
	
	.ap-item 						{ width: 100%; height: auto; }
	.ap-item .tabtitle 				{ padding: 15%; font-size: 1.5rem !important; }
	
	.ap-info 						{ height: 0; }
	.ap-info a.button 				{ margin: 8px 0; }
	
	.ap-itemwrap.active .ap-info 	{ height: 100%; padding: 0 8% 10% 8%; }
	.ap-itemwrap.hide 				{ height: auto; opacity: 1; }
	.ap-itemwrap a.close 			{ display: none; } /* hide close button on mobile */
	.ap-itemwrap a.closemobile 		{ display: block; }

	.ap-colwrap 					{ flex-direction: column; }
	.ap-colwrap.ap-colrev			{ flex-direction: column-reverse; }
	.ap-col 						{ flex-basis: 100%; min-width: 100%; }
	.ap-col1 						{ padding: 0; }
	.ap-col2 						{ padding: 0; }
	.ap-col2.ap-image				{ padding: 0 0 15% 0; }
	.ap-col2.ap-stack				{ padding: 5% 0 0 0; }
	
	.nano 							{ height: auto; }
	.nano > .nano-content 			{ max-height: none; }


.accordionplus .swiper-wrapper {
    position: relative;
    width: 325px !important;
    /* height: 100%; */
    z-index: 1;
    display: flex;
    transition-property: transform;
    box-sizing: content-box;
    align-content: stretch;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
}
.accordionplus .swiper-autoheight, 
.accordionplus .swiper-autoheight .swiper-slide {
    height: auto;
    width: 100% !important;
}
.accordionplus .swiper {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
    display: block;
}
.accordionplus .swiper-autoheight .swiper-wrapper {
    align-items: flex-start;
    /* transition-property: transform,height; */
}
.accordionplus .featureswiper .swiper-wrapper {
    padding: 0 0 30px 0;
}
.accordionplus .swiper-slide {
    flex-shrink: revert;
    width: max-content;
    height: 100%;
    position: relative;
    transition-property: transform;
}

	

}
@media screen and (min-width: 950px) 
{
	/* desktop display - horizontal accordion layout */
	
	.accordionplus 					{ height: 95vh; min-height: 650px; }
	.ap-itemwrap 					{ transition: 0.75s ease width; }
	
	
	.ap-item 						{ width: 100%; height: 100%; }
	.ap-item .tabtitle 				{ transform: rotate(-180deg); writing-mode: vertical-rl; text-orientation: mixed; }
	
	.ap-info 						{ width: 0; }
	.ap-info a.button 				{ margin: 8px 0 8px 20px; }
	.ap-info a.close.button 		{ margin: 8px ; }
	
	.ap-itemwrap.active .ap-info 	{ width: 100%; padding: 2vw; }
	.ap-itemwrap.hide 				{ width: 0; opacity: 0;	}
	
	.ap-colwrap 					{ flex-direction: row; }
	.ap-col 						{ flex-grow: 1; display: inline-block; }
	.ap-col1 						{ flex-basis: 40%; min-width: 40%; /*padding-right: 2%; max-height: 550px; */}
	.ap-col2 						{ flex-basis: 60%; min-width: 60%; padding-left: 2%; }
	
	/*.nano 							{ height: 100%; margin-bottom: 25px; }
	.nano > .nano-content 			{ max-height: 45vh; }*/
 
}

 
/*.nano {
	  position : relative;
	  width    : 100%; 
	  overflow : hidden;
	}
	
.nano > .nano-content {
  position      : relative;
  overflow      : scroll;
  overflow-x    : hidden;
  top           : 0;
  right         : 0;
  bottom        : 0;
  left          : 0;
   
  
}

.nano.has-scrollbar > .nano-content  {
    border-bottom: 1px #888 dotted; 
	  margin-bottom: 25px;
	padding-bottom: 25px;
}
.nano > .nano-content:focus {
  outline: thin dotted;
}
 
.nano > .nano-content::-webkit-scrollbar {
  display: none;
}
.has-scrollbar > .nano-content::-webkit-scrollbar {
  display: block;
}
.nano.has-scrollbar { padding-right: 45px; }

.nano > .nano-pane {
  background : rgba(0,0,0,.25);
  position   : absolute;
  width      : 10px;
  right      : 0;
  top        : 0;
  bottom     : 0;
  visibility : hidden\9;  
  opacity    : .01;
  -webkit-transition    : .2s;
  -moz-transition       : .2s;
  -o-transition         : .2s;
  transition            : .2s;
  -moz-border-radius    : 5px;
  -webkit-border-radius : 5px;
  border-radius         : 5px;
}
.nano > .nano-pane > .nano-slider {
  background: #444;
  background: rgba(255,255,255,.5);
  position              : relative;
  margin                : 0 1px;
  -moz-border-radius    : 3px;
  -webkit-border-radius : 3px;
  border-radius         : 3px;
}
.nano:hover > .nano-pane, .nano.has-scrollbar > .nano-pane, .nano-pane.active, .nano-pane.flashed {
  visibility : visible\9;  
  opacity    : 0.99;
}*/