* {
  box-sizing: border-box;
}

.story {
  display: flex;
  flex-direction: row;
  text-align: center;
  padding: 20px 80px 20px 80px;
  background-color: #bfbbbb;
}

.doc {
  background-color: #FFFFFf;
  font-size: 17px;
  flex: 50%;
  text-align: left;
  font-family: Helvetica;
  padding: 40px 30px 5px 80px; 
}

.buldimg {
  flex: 50%;
    }


.img_fading {
  height: 100%;
  animation: fadeIn 5s;
  -webkit-animation: fadeIn 5s;
  -moz-animation: fadeIn 5s;
  -o-animation: fadeIn 5s;
  -ms-animation: fadeIn 5s;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-moz-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-o-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-ms-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 800px) {
  .story {
    flex-direction: column;
  }
}


/* Extra small devices (phones, 250px and down) */
@media only screen and (max-width: 280px) {
.story {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 5px 2px 5px 2px;
  background-color: #bfbbbb;
}

.doc {
  background-color: #FFFFFf;
  font-size: 12px;
  flex: 50%;
  text-align: left;
  font-family: Helvetica;
  padding: 5px 2px 5px 2px; 
}

.buldimg {
  flex: 50%;
  }
   }


/* Extra small devices (phones, 450px and down) */
@media only screen and (min-width: 281px) and (max-width: 450px) {
.story {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 5px 2px 5px 2px;
  background-color: #bfbbbb;
}

.doc {
  background-color: #FFFFFf;
  font-size: 15px;
  flex: 50%;
  text-align: left;
  font-family: Helvetica;
  padding: 5px 2px 5px 2px; 
}

.buldimg {
  flex: 50%;
  }
   }
   
/* Extra small devices (phones, 650px and down) */
@media only screen and (min-width: 451px) and (max-width: 650px) {
story {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 5px 2px 5px 2px;
  background-color: #bfbbbb;
}

.doc {
  background-color: #FFFFFf;
  font-size: 15px;
  flex: 50%;
  text-align: left;
  font-family: Helvetica;
  padding: 5px 2px 5px 2px; 
}

.buldimg {
  flex: 50%;
  }
   }

/* Extra small devices ( 850px and down) */
@media only screen and (min-width: 651px) and (max-width: 850px) {
story {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 5px 2px 5px 2px;
  background-color: #bfbbbb;
}

.doc {
  background-color: #FFFFFf;
  font-size: 11px;
  flex: 50%;
  text-align: left;
  font-family: Helvetica;
  padding: 5px 2px 5px 2px; 
}

.buldimg {
  flex: 50%;
  }
   } 
   
/* For devices ( 1024px and down) */
@media only screen and (min-width: 851px) and (max-width: 1024px) {

story {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 5px 2px 5px 2px;
  background-color: #bfbbbb;
}

.doc {
  background-color: #FFFFFf;
  font-size: 11px;
  flex: 50%;
  text-align: left;
  font-family: Helvetica;
  padding: 5px 2px 5px 2px; 
}

.buldimg {
  flex: 50%;
  }
   } 
   
/* For devices ( 1280x and down) */
@media only screen and (min-width: 1025px) and (max-width: 1280px) {
story {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 5px 2px 5px 2px;
  background-color: #bfbbbb;
}

.doc {
  background-color: #FFFFFf;
  font-size: 15px;
  flex: 50%;
  text-align: left;
  font-family: Helvetica;
  padding: 5px 2px 5px 2px; 
}

.buldimg {
  flex: 50%;
  }
   } 
   
/* For devices ( 1600x and up) */
@media only screen and (min-width: 1600px) {

story {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 5px 2px 5px 2px;
  background-color: #bfbbbb;
}

.doc {
  background-color: #FFFFFf;
  font-size: 22px;
  flex: 50%;
  text-align: left;
  font-family: Helvetica;
  padding: 5px 2px 5px 2px; 
}

.buldimg {
  flex: 50%;
  }
   }