@charset "utf-8";
/* CSS Document */

.pt-50{
	padding-top:50px;
}

a:hover, a:focus {
    color: inherit;
    text-decoration: none;
	outline:none;
}


.book-container {
  perspective: 1500px;
  width: 160px;
  height: 227px;
  position: relative;
  cursor: pointer;
  outline:none;
}

/* Stationary bottom page */
.bottom-page {
  position: absolute;
  top: 0; left: 4px;
  width: 100%; height: 100%;
  background: #fcfcfc; border: 2px solid #ddd;
  z-index: 1;
}

/* Middle page: hinges from the same point but at a different angle */
.middle-page {
  position: absolute;
  top: 0; left: 2px;
  width: 100%; height: 100%;
  background: #fff; border: 2px solid #ddd;
  z-index: 3;
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.middle-page-1 {
  position: absolute;
  top: 0; left: 5px;
  width: 100%; height: 100%;
  background: #fff; border: 2px solid #ddd;
  z-index: 2;
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hardcover: wider rotation reveals the pages inside */
.hardcover {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #a00; /* Darker red */
  border-left: 0px solid #600; /* Spine detail */
  z-index: 4;
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover: Hardcover opens wider than the middle page for a fanning effect */
.book-container:hover .hardcover { transform: rotateY(-40deg); outline:none;}
.book-container:hover .middle-page { transform: rotateY(-32deg); }
.book-container:hover .middle-page-1 { transform: rotateY(-26deg); }



.sus-reports-sec{
	display:flex;
	width:100%;
	gap:30px;
}
.sus-reports-sec .sus-item-block{
	display:flex;
	/*flex-grow:1;*/
}

.sus-rp-item{
	display:flex;
	width:100%;
	align-items:left;
	flex-direction:column;
}


.sr-year{
	margin: 6px 0px;
    color: #000000;
	font-size:18px;
    font-weight: 500;
    display: block;
    vertical-align: middle;
    text-align: center;
    width: 160px;
}

.button-sec{
	 
	width:200px;
	display:flex;
	flex-direction:column;
}

.button-sec a:hover{
	text-decoration:none;
	
}



.sr-download, .sr-view, .sr-iar{
	font-size:18px;
	line-height:1.5;
	font-weight:400;
	color: #282562;
	margin-right:15px;
	display:flex;
	text-decoration:none;
	width:100%;
}

.sr-download span, .sr-view span{
	display:flex;
	width:60%;
}


.sr-download:after{
	content:'';
	display:flex;
	background:url(../images/iconDownload.png) no-repeat;
	background-size:cover;
	width:28px;
	height:28px;
}
.sr-download:hover:after{
	background:url(../images/iconDownloadHover.png) no-repeat;
}


.sr-view:after{
	content:'';
	display:flex;
	background:url(../images/iconView.png) no-repeat;
	background-size:cover;
	width:28px;
	height:28px;
}

.sr-view:hover:after{
	background:url(../images/iconViewHover.png) no-repeat;
}

.sr-iar:after{
	content:'';
	display:flex;
	background:url(../images/iconInteractive.png) no-repeat;
	background-size:cover;
	width:28px;
	height:28px;
}

.sr-iar:hover:after{
	background:url(../images/iconInteractiveHover.png) no-repeat;
}


/* important */
.hardcover {
  position: relative;
  overflow: hidden;
}

/* caption hidden initially */
.cover-caption {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;

  padding: 18px 16px;

  color: #fff;
  font-size: 18px;
  font-weight: 600;

  background: linear-gradient(
    to top,
    rgba(0,0,0,0.82),
    rgba(0,0,0,0)
  );

  opacity: 0;
  transform: translateY(100%);

  transition:
    transform 0.4s ease,
    opacity 0.35s ease;

  z-index: 10;
}

/* ONLY text animation */
.hardcover:hover .cover-caption {
  opacity: 1;
  transform: translateY(0);
}

 
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}



@media(max-width:767px){
	.sus-reports-sec {
    display: flex;
    width: 100%;
    gap: 30px;
    flex-wrap: wrap;
}
}
@media(max-width:600px){
	.sus-reports-sec {
    display: flex;
    width: 100%;
    gap: 30px;
    flex-wrap: wrap;
}
}