body {
  
  display:flex;
  justify-content:center;
  align-items:center;
align-content: flex-start;
  height:96vh;  
}

.accordion {
  
  display:flex;
  flex-direction:row;
  width:1200px; 
  height:100%;
  
}

/*Device below 1024px, tablet/mobile*/
/*@media(max-width : 1028px ){*/
  @media(max-width : 640px ){
  .accordion {
  
  display:flex;
  flex-direction:column;
  /*width:100%;*/   
	  width:80%;
  /*height:auto;*/
	  height:100vh;
  cursor: pointer;
} 
}

.column {
  
  width:10%;
	
  transition: width 0.5s;
  overflow: hidden;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  cursor:pointer;
}

.column:nth-child(1) {
  
  background-color: #408BEF;
  background-size:cover;
  background-position:center center;
  border-radius: 10px 0px 0px 10px;
  
}

.column:nth-child(2) {
  
  background-color: #408BEF;
  background-size:cover;
  background-position:center center;
  
}

/*.column:nth-child(3) {
  
  background-image: url('http://dmmotionarts.com/wp-content/uploads/2024/03/nathan-dumlao-ciO5L8pin8A-unsplash-1.jpg');
  background-size:cover;
  background-position:center center;
  
}*/

.column:nth-child(3) {
  
  background-color:  #408BEF;
  background-size:cover;
  background-position:center center;
  border-radius: 0px 10px 10px 0px;
}

/*Border Styling for device width below 1024px, Tablet/Mobile*/
/*@media(max-width:1024px){*/
 @media(max-width:640px){ 
  .column:nth-child(1) {
  
   border-radius: 10px 10px 0px 0px;
  
}
  
  .column:nth-child(3) {
  
   border-radius: 0px 0px 10px 10px;
}
}

/*Desktop Styling*/
/*@media screen and (min-width: 1025px) {*/
@media screen and (min-width: 640px) {
            
    /*Clicked column styling*/
    .expanded {
        
   /* width: 150% !important; */
		width: 100% !important;
    
    }
    }
    
    .expanded:after {
        
        content: '';
        background: rgba(0,0,0,0.5);
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        z-index: 0;
        pointer-events:none;
}
      
/*Tablet and mobile, below 1025px*/  
/*@media (max-width: 1024px) {*/
@media (max-width: 640px) {
        
.column {
        
        width:100%;
        transition: height 0.5s;
        /*height: 120px;*/
        height: 12vh;
		  font-size:1.5em;
	}
/*Clicked column styling*/
.expanded{
        
  /*  height: 450px !important;*/
	  height: 100vh !important;

    }
 }
    
/*Inner elements inside column container styling*/
.inner-element {
        
  opacity: 0;
  transition: opacity 0s;
  z-index: 2;
  padding:20px;
  background:transparent;
  position:absolute;
  left:12%;
  bottom:10%;
      
}

.inner-element h2{
  
  color:white;
  font-family: rubik;
  font-size:1.75em;
  
}

.inner-element p{
  
  color:white;
  font-family: rubik;
  font-size:1.125em;
  font-weight:100;
  
}

@media (max-width: 640px) {
	.inner-element h2{
	  font-size:1.4em;
	}

	.inner-element p{
  font-size:.8em;
  font-weight:100;
}

	
}

/*Inner elements made visible on clicked column*/
.inner-element.active {            
 opacity: 1; 
 transition: opacity 0.5s 0.4s;        
     
}

.icons {
  
  position:absolute;
  bottom:20px;
  left:35px;
  font-size:40px;
  padding:20px;
  background:white;
  /* background-image:url(images/b1.png); */
  z-index:2;
  border-radius:50%;
  height:20px;
  width:20px;
  display:flex;
  /*justify-content:center;
  align-items:center;
   */
}



.orientation {
	display: flex;
	position:absolute;
	text-align:center;
	/*justify-content: center;
	align-content: center;
	align-items: center;*/
 	font-size:1.2em;
	top:28%;
	bottom:28%;
	writing-mode:vertical-lr;
	text-orientation:auto;
	color: #FFFFFF;
}
@media (max-width: 640px) {

	.orientation 
	{
	left:28%;
	right:28%;	
		top: 3%;
		boittom: 5%;
			font-size:.5em;
	writing-mode:horizontal-tb;
	text-orientation:auto;
}
}

.DMmotionarts{
  
  position:absolute;
  width:200px;
  left:0;
  bottom:0;
  
}