#left-content {
    position: absolute;
    top: 0px;
    bottom: 10%; 
    left: 0;
    width: 15%;
    background-color: #FFF;
}

#center-content {
    position: absolute;
    top: 0%;
    bottom: 6%;
    width: 70%;
    height: 94%;
    left:15%;
    background-color: #FFF;
}


#right-content {
    position: absolute;
    top: 0px;
    bottom: 6%;
    width: 15%;
    height: 94%;
    right: 0;
    background-color: #FFF;
}


#bottom-content {
    position: absolute;
    top: 94%;
    bottom: 6%;
    width: 100%;
    height: 8%;
    background-color: #FFF;

}



/* Computer */
@media only screen and (min-width:1025px){ 
  #left-content  {
    top:10vh;
    height: 82vh;
  }
  #right-content  {
    top:10vh;
    height: 82vh;
  }

  #center-content  {
    top:10vh;
    height: 82vh;
  }
}

/* iPad Retina, landscape*/
@media only screen and (min-width:768px) and (max-width:1024px) and (orientation:landscape){ 

  #left-content{
     top:10vh;
    height: 82vh;
  }

  #right-content  {
    top:10vh;
    height: 82vh;
  }

  #center-content  {
    top:10vh;
    height: 82vh;
  }
}

/* iPad Retina, portrait*/
@media only screen and (min-width:768px) and (max-width:1024px)  and (orientation:portrait){ 
  #left-content{
     top:8vh;
    height: 84vh;
  }

  #right-content  {
    top:8vh;
    height: 84vh;
  }

  #center-content  {
    top:8vh;
    height: 84vh;
  }
}


/* Phone, landscape*/
@media only screen and (min-width: 0px) and (max-width:767px) and (orientation:landscape){

  #left-content{
    height: 78vh;
    top: 14vh;
  }

  #right-content  {
    height:78vh;
    top: 14vh;
  }

  #center-content  {
    height: 78vh;
    top:14vh;
    
  }
}

/* Phone, portrait*/
@media only screen and (min-width:0px) and (max-width:767px) and (orientation:portrait){ 

  #left-content{
    height: 82vh;
    top: 10vh;
  }

  #right-content  {
    height: 82vh;
    top:10vh;
    
  }

  #center-content  {
    height: 82vh;
    top:10vh;
    
  }
}








/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%     Holder button img    %%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

/* Holder image < > */

.holder {   
    position: absolute;
    top: 0;
    bottom: 0; 
    left: 0;
    width: 100%;
    border: 0;
    background-color: #FFF ;
    outline:0;
}


.holder > img {
  display: inline;
  vertical-align: middle;
  width: 100%; 
  height: auto;  
  background-color: #FFF;
  outline:0;
}


.holder:hover >img  {
   background: #FFF; 
   outline:0;
}


.holder:active> img  {
   background: #FFF ;
   outline:0;
}

.holder:focus >img  {
   outline:0;
}






/* Holder center image vocabulary */

.centerholder {   
  position: absolute;
  border: 0;
  background-color: #CCC ;
  outline:0;
}


.centerholder > img  {
  position: absolute;
  width: 100% !important; 
  background-color: #FFF;
  outline:0;

  top: 0 !important; 
  left: 50%;
  transform: translate(-50%, 0%);
}