﻿
/** BEGINNING OF MAIN PAGE STYLING **/


@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600&family=Roboto:wght@300;400;500;900&display=swap");

body {
	WIDTH: 100VW;
	HEIGHT: 100VH; OVERFLOW: HIDDEN;  
	background: #E8E8E8; 
	background-image: url("Picture_Center/background-center/concrete-wall.png");
	}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Verdana, Geneva, sans-serif;
	box-sizing: border-box;  
	clear: both;   
}

main {
  position: relative;
  width: calc(min(90rem, 90%));
  margin: 0 auto;
  7878min-height: 100vh; height: 100vh;
  column-gap: 3rem;
  padding-block: min(20vh, 3rem); 
}

777777777777777777.bg {
  position: fixed;
  top: -4rem;
  left: -12rem;
  z-index: -1;
  opacity: 0;
}

7777777777777777.bg2 {
  position: fixed;
  bottom: -2rem;
  right: -3rem;
  z-index: -1;
  width: 9.375rem;
  opacity: 0;
}

main > div span {
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 1rem;
  color: #717171;  
}

main > div h1 {
  text-transform: capitalize;
  letter-spacing: 0.8px;
  font-family: Verdana, Geneva, sans-serif;
  font-weight: 900;
  font-size: clamp( 1.2rem, 1.4vw, 4vh);  
  background-color: #005baa;
  background-image: linear-gradient(45deg, #005baa, #000000);
  background-size: 100%;
  background-repeat: repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent; 
}

main > div hr {
  display: block;
  background: #005baa;
  height: 0.25rem;
  width: 6.25rem;
  border: none;
  margin: 1.125rem 0 1.875rem 0; 

	/**FANCY BORDER LINE**/
  		background: #30ff90;
  		/* Old browsers */
  		background: -moz-linear-gradient(left, #30ff90 0%, #ed2ded 25%, #c99826 50%, #30ffe6 75%, #30ff90 100%);
  		/* FF3.6+ */
 		background: -webkit-gradient(linear, left top, right top, color-stop(0%, #30ff90), color-stop(25%, #ed2ded), color-stop(50%, #c99826), color-stop(75%, #30ffe6), color-stop(100%, #30ff90));
  		/* Chrome,Safari4+ */
  		background: -webkit-linear-gradient(left, #30ff90 0%, #ed2ded 25%, #c99826 50%, #30ffe6 75%, #30ff90 100%);
  		/* Chrome10+,Safari5.1+ */
  		background: -o-linear-gradient(left, #30ff90 0%, #ed2ded 25%, #c99826 50%, #30ffe6 75%, #30ff90 100%);
  		/* Opera 11.10+ */
  		background: -ms-linear-gradient(left, #30ff90 0%, #ed2ded 25%, #c99826 50%, #30ffe6 75%, #30ff90 100%);
  		/* IE10+ */
  		background: linear-gradient(to right, #30ff90 0%, #ed2ded 25%, #c99826 50%, #30ffe6 75%, #30ff90 100%);
  		/* W3C */
  		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#30ff90', endColorstr='#30ff90',GradientType=1 );
  		/* IE6-9 */


  		animation: rotate 90s infinite linear;
  		-webkit-animation: rotate 90s infinite linear;
	}

	@-webkit-keyframes rotate {
  		from {
    			background-position: -3000px;
  			}
  		to {
    			background-position: 0px;
  			}
		}
	@keyframes rotate {
  		from {
   			 background-position: -3000px;
  		}
  		to {
    			background-position: 0px;
  		}
	}
	/**EBD OF FANCY BORDER LINE**/





main > div p {
  line-height: 1.6;  
}

main a {
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
  color: #717171;
  font-weight: 500;
  background: #fff;   
  border-radius: 3.125rem; 
  transition: 0.3s ease-in-out;  
}





2222222222222222.btn-shine {
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
  1111color: #717171;
  font-weight: 500;
  11111background: #fff; 
  1111border-radius: 3.125rem;  
  transition: 0.3s ease-in-out; 
	padding: 4px !important;  
	}
222222222222222222.btn-shine:hover {
	color: #E8E8E8 !important;
	}




main > div > a {
  border: 2px solid #c2c2c2;
  margin-top: 2.188rem;
  padding: 0.625rem 1.875rem; 
}

main > div > a:hover {
  border: 0.125rem solid #005baa;
  color: #005baa;    
}

.swiper {
  width: 100%;
  padding-top: 3.125rem; 
}

.swiper-pagination-bullet,
.swiper-pagination-bullet-active {
  background: #fff !important;
}

.swiper-pagination {
  bottom: 1.25rem !important; 
}

.swiper-slide {
  width: 18.75rem;
  height: 28.125rem;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: self-start;
}

.swiper-slide h2 {
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.4;
  margin-bottom: 0.625rem;
  padding: 0 0 0 1.563rem;
  text-transform: uppercase;
}

.swiper-slide p {
  color: #dadada;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  padding: 0 1.563rem;
  line-height: 1.6;
  font-size: 0.75rem;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.swiper-slide a {
  margin: 1.25rem 1.563rem 3.438rem 1.563rem;
  padding: 0.438em 1.875rem;
  font-size: 0.9rem;
}

.swiper-slide a:hover {
  color: #005baa;
}

.swiper-slide div {
  display: none;
  opacity: 0;
  padding-bottom: 0.625rem;
}

.swiper-slide-active div {
  display: block;
  opacity: 1;
}

7878.swiper-slide--one {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400), url("../../../watch-music/Soul-Winners-Apostolic/no-Jesus-no-life/pointer-thumb.png") no-repeat 50% 50%/cover;
}

7878.swiper-slide--two {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400), url("../../../watch-movies/Author-Unknown/don-t-give-up/pointer-thumb.png") no-repeat 50% 50%/cover;
}

7878.swiper-slide--three {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400), url("../../../watch-movies/Author-Unknown/exorbitant-control/pointer-thumb.png") no-repeat 50% 50%/cover;
}

7878.swiper-slide--four {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400), url("../../../watch-movies/Author-Unknown/le-pardon/pointer-thumb.png") no-repeat 50% 50%/cover;
}

7878.swiper-slide--five {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400), url("../../../watch-movies/Author-Unknown/l-amour-de-largent/pointer-thumb.png") no-repeat 50% 50%/cover;
}

.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right {
  background-image: none;
}

@media screen and (min-width: 48rem) {
  main {
    display: flex;
    align-items: center;
  }

  7777777777777.bg,
7777777777777777777.bg2 {
    opacity: 0.1;
  }
}
@media screen and (min-width: 93.75rem) {
  .swiper {
    width: 85%;
  }
}



#play-button-tag {
	width: 35px; 
	height: 35px; 
	border-radius: 50%; 
	background: #000000;
	padding: 0 !important;
	}

#play-svg-button:hover {
	opacity: 0.8;
	}
/** END OF MAIN PAGE STYLING **/














/** BEGINNING OF QUOTATION MARK **/
  

@font-face {
  font-family: 'Special Elite'; 11font-family: Verdana, Geneva, sans-serif;
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/specialelite/v19/XLYgIZbkc4JPUL5CVArUVL0ntnAOTQ.ttf) format('truetype');
}
111html,
111body {
  height: 100%;
  margin: 0;
}
777777body {
  font-family: 'Special Elite', cursive;
  background: #fffdf5;
  color: #3f3f5a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
blockquote {111font-family: Verdana, Geneva, sans-serif; color: #FFFFFF;
  font-weight: 100;
  font-size: 1rem; font-size: 0.8rem;
  111max-width: 600px; max-width: 80%; 
  line-height: 1.4;
  position: relative;
  111margin: 0;
  padding: 0.5rem;  
	/**ALIGN HORIZONTALLY**/
		margin: auto;  
  		left:0;
  		right: 0;
	/**END OF ALIGN HORIZONTALLY**/



}
blockquote:before,
blockquote:after {font-family: 'Special Elite', cursive;
  position: absolute;
  color: #f1efe6; color: rgba(241,239,230, 0.5);
  font-size: 8rem; font-size: 4rem;
  width: 2rem;
  height: 2rem;  
}
blockquote:before {
  content: '“';
  left: -5rem; left: -2.5rem;  left: -2rem; 
  top: -2rem; top: -1rem; 
}
blockquote:after {
  content: '”';
  right: -5rem; right: -2.5rem; right: -2rem;
  bottom: 1rem;  
}
cite {
	color: #FFFFFF;   
  line-height: 3;
  text-align: left;
	font-size: 0.8rem;  
	/**ALIGN HORIZONTALLY**/ 
    		position: absolute;
    		777top: 50%;
    		left: 50%;
    		transform: translateX(-50%) translateY(-35%);
	/**END OF ALIGN HORIZONTALLY**/
}
/** END OF QUOTATION MARK **/






