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


/** {box-sizing: border-box;}*/

/* Slideshow container */
.slideshow-container {
	max-width: 1500px;/*--to set--*/
	height:500px;
	position: relative;
	margin: 5% auto 0 auto;
	background-image: url(../images/testimonial-bnr.jpg);
	background-repeat: no-repeat;
	background-position: left center;
	
}

/* Caption text */
.label {
	width:87%;
	position:absolute;
	top:10%;
	color:rgba(255, 255, 255, 0.5);
	font-size: 0.8rem;
	font-weight:300;
	text-align: right;
	letter-spacing:0.1em;
}
.ttmyLink {
	position:absolute;
	top:6.2%;
	right:10%;
	z-index:10;
	display:block;
}
a img {outline : none;}
.coyName {
	width:85%;
	padding-left:13%;
	letter-spacing:0.1em;
	color:#fff;
	font-size: 1em;
	font-weight:400;
	position:absolute;
	top: 20%;
	text-align: left;
	opacity:0.6;
}
.quote {
	width: 75%;
	padding-left:13%;
	letter-spacing:0.05em;
  	color:white;
  	font-size: 1.3em;
	font-family:"Red Hat Display", san-serif;
	font-weight:400;
	line-height:1.8em;
  	position: absolute;
  	top: 30%;
	text-align: left;
}
.author {
  	color:white;
	line-height:1.5em;
  	font-size: 1rem;
	letter-spacing:0.05em;
}


/* The dots/bullets/indicators */
.dot {
	height: 10px;/*Set size of the dots*/
	width: 10px;
	margin: 0 2px;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;
}
.indicator {/*Setting the position of the dots*/
	width:100%;
	text-align:center;
	position: absolute;
	bottom: 20px;
	z-index:20;/*Must set so that it will not sink during transition*/
}

.active {
  background-color: #030f3e;
  font-size:0.5px;/*The dot is out of proportion without this*/
}

/* Fading animation -------------------------------------------------*/
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 3s;/*1.5s*/
  animation-name: fade;
  animation-duration: 3s;/*To set*/
}

@-webkit-keyframes fade {
  from {opacity: .7} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .5} 
  to {opacity: 1}
}

@media (max-width:850px) {
	.quote {font-size:1.25rem;
}

}

@media (max-width:668px) {
.slideshow-container {
	height:500px;
	margin-bottom:7%;
}
.coyName {
	font-size:0.8em;
	top: 18%;
}
.quote {
	font-size:1.2rem;
	top: 22%;
}
	.label {
	width:100%;
	text-align: center;
	top:7%;
}
.ttmyLink {
	right:10%;
	top:4%;
}
	
.author {
  	font-size:0.85rem;
	padding-top:5%;
}
}

@media (max-width:430px) {
.slideshow-container {
	height:550px;	
}
.coyName {
	font-size:0.7rem;
	top: 15%;
}
.quote {
  	top: 20%;
	font-weight:500;
	font-size: 1.05rem;
}
}


/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}
</style>