html, body{
	height:100%;
}
body>*{
	height:100%;
}



.content_container_16_9{
	background-color: #ebe4cc;
    border-radius: 10px;
    border: 10px solid #756219;
    overflow: hidden;
}
.content_container_16_9.withheader{
	/*border-top-width:3px;*/
	overflow: visible;
}


.content_breadcrumb{
	line-height: 22px;
	padding-left:50px;
	padding-right:50px;
  height: 30px;
  padding: 5px 2.5%;
  line-height: 22px;
}
.content_breadcrumb *{
    font-size: 18px;
    color: #756219;
    font-weight: bold;
}



.content_container_16_9{
	display: flex;
	flex-direction: column;
}
.fillRemainingHeight{
	flex-grow: 1;
	width:100%;
	height: 100%;
}


.content_container_16_9.withstory{
	overflow: visible;
	border:none;
} 
.content_container_16_9.withstory .content_breadcrumb {
	padding-left:12px;
} 
.content_container_16_9.withstory>div.fillRemainingHeight{
	overflow: visible;
	background-color:#f0fdfd;
    border-radius: 16px;
	
} 


.content_container_16_9.withstory .story_content{
	padding: 0px;
    border: 12px solid #756219;
	border-top:none;
    border-bottom-left-radius:  16px;
    border-bottom-right-radius: 16px;
	
} 




/*

.withstory>div.frame_top::before {
  top:0px;
  left:0px;
}
.withstory>div.frame_top::after {
  top:0px;
  right:0px;
}
.withstory>div.frame_bottom::before {
  bottom:0px;
  left:0px;
}
.withstory>div.frame_bottom::after {
  bottom:0px;
  right:0px;
}

*/


  
  .content_container_16_9{
    transform: translateY(0px);
    border-width: 6px;
  }

  .frame_top::before {
    background-image: url('/images/frame_topleft.png');
    position: absolute;
    background-size: cover;
    width: 30px;
    padding-bottom: 30px;
    top: -6px;
    left: -6px;
    z-index: 1000;
  
  }
  .frame_top::after {
    background-image: url('/images/frame_topright.png');
    position: absolute;
    background-size: cover;
    padding-bottom: 30px;
    width: 30px;
    top:-6px;
    right:-6px;
    z-index: 1000;
  }
  .frame_bottom::before {
    background-image: url('/images/frame_bottomleft.png');
    position: absolute;
    background-size: cover;
    padding-bottom: 30px;
    width: 30px;
    bottom:-6px;
    left:-6px;
    z-index: 1000;
  }
  .frame_bottom::after {
    background-image: url('/images/frame_bottomright.png');
    position: absolute;
    background-size: cover;
    padding-bottom: 30px;
    width: 30px;
    bottom:-6px;
    right:-6px;
    z-index: 1000;
  }

@media(max-width:1299px){    
    .content_breadcrumb {
        line-height: 22px;
        padding-left: 50px;
        padding-right: 50px;
        height: 20px;
        padding: 0px 25px;

    }
}

.image_container {
    background-image: url(/images/chi_edb_breadcrumb.png);
    background-size: 100%;
    background-repeat: no-repeat;
    padding-bottom: calc(100% * 80 / 180);
}

/* .text_container {
    position: absolute;
    top: 19%;
    left: 13%;
    width: 70%;
    height: 63%;
    text-align: center;
    line-height: 36px;
    font-size:18px;
    color:#756219;
    font-weight: bold;
} previous setting*/

.text_container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: auto;
  text-align: center;
  line-height: 36px;
  font-size: 18px;
  color: #756219;
  font-weight: bold;
  transform: translate(-50%, -50%);
}

.outer_container{
    position: absolute;
    bottom: 95%;
    right: 25px;
    width: 12%;
    z-index: 10;
}

@media(max-width:768px){
  .outer_container {
    bottom: 93%;
    width: 19%;
  }

  .text_container {
    font-size:15px;
    line-height: 30px;
  }

  .content_breadcrumb * {
    font-size:15px;
  }
}

@media(max-height:600px){
  .text_container {
    font-size:10px;
   /*  line-height: 20px; */
  }
}