/* CSS */
@import url("https://fonts.googleapis.com/css?family=Oswald");
body{
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    padding-top: 70px;
}
h2{
  margin-top: 2%;
}
h3{
  font-size: 1.5em;
}
p{
  font-size: 1em;
  font-family: 'helvetica', sans-serif;
}
a{
  color: #6ed3cf !important;
}
a:hover{
  color: #9068BE !important;
}
.pink-text{
  color: #9068BE;
}
.mint-text{
  color: #6ed3cf;
}
.purple-back{
  background-color: #9068BE;
  color: #FFF;
  margin-top: 5%;
}
.center-img{
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.mint-box{
  background-color: #6ed3cf;
  padding: 2%;
}
.active-menu {
  color: #9068be!important;
}
.navbar-brand{
  font-size: 2em;
  color: #6ed3cf;
}
.nav-link{
  font-size: 1.5em;
}
.intro-box {
  /*background: url('../images/homepage2023.jpg') no-repeat top center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;*/
  max-height: 600px;
  overflow: hidden;
}
/*--banner-starts--*/
.banner{
	background: url('../images/homepage2023.jpg') no-repeat top center;
	background-size:cover;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	-o-background-size:cover;
	-ms-background-size:cover;


}

.banner-top p, .banner-top h3 {
	line-height:1.6em;
	padding: 2%;
  margin: 0;
	width: 78%;
  background-color: rgba(110, 211, 207, 0.8)!important;

}
.banner-top {
	text-align: left;
	padding: 5% 5% 10% 60%;
}

.div-deskop{
  display: block;
}

.div-mobile{
  display: none;
}
/*  VIDEO PLAYER CONTAINER
 		############################### */
  		.vid-container {
		    position: relative;
		    padding-bottom: 52%;
		    padding-top: 30px;
		    height: 0;
		}

		.vid-container iframe,
		.vid-container object,
		.vid-container embed {
		    position: absolute;
		    top: 0;
		    left: 0;
		    width: 100%;
		    height: 100%;
		}


		/*  VIDEOS PLAYLIST
 		############################### */
		.vid-list-container {
			width: 92%;
			overflow: hidden;
			margin-top: 20px;
			margin-left:4%;
			padding-bottom: 20px;
		}

		.vid-list {
			width: 1176px;
			position: relative;
			top:0;
			left: 0;
		}

		.vid-item {
			display: block;
			width: 148px;
			height: 148px;
			float: left;
			margin: 0;
			padding: 10px;
		}

		.thumb {
			/*position: relative;*/
			overflow:hidden;
			height: 84px;
		}

		.thumb img {
			width: 100%;
			position: relative;
			top: -13px;
		}

		.vid-item .desc {
			color: #21A1D2;
			font-size: 15px;
			margin-top:5px;
		}

		.vid-item:hover {
			background: #eee;
			cursor: pointer;
		}

		.arrows {
			position:relative;
			width: 100%;
		}

		.arrow-left {
			color: #fff;
			position: absolute;
			background: #777;
			padding: 15px;
			left: -25px;
			top: -130px;
			z-index: 99;
			cursor: pointer;
		}

		.arrow-right {
			color: #fff;
			position: absolute;
			background: #777;
			padding: 15px;
			right: -25px;
			top: -130px;
			z-index:100;
			cursor: pointer;
		}

		.arrow-left:hover {
			background: #6ed3cf;
		}

		.arrow-right:hover {
			background: #6ed3cf;
		}
    .blockquote-bg{
	background-color: #6ed3cf;
  min-height: 420px;
}
.blockquote-bg-skinny{
background-color: #6ed3cf;
}
.blockquote-bg-purple{
background-color: #9068BE;
min-height: 420px;
}
.blockquote-bg p, .blockquote-bg-purple p,   .blockquote-bg-skinny p{
  font-family: 'Oswald', sans-serif;
  font-size: 1.1em;
}
.jumbotron i,.jumbotron-purple i,  .blockquote-bg-skinny i{
	font-size:40px;
}
.user-img-block img{
	width:80px;
}
.user-img-block h6{
	margin:0px;
	padding-top:15px;
}
.jumbotron:before{
  content: " ";
  position:absolute;
  bottom:4px;
  left:30px;
  border:15px solid transparent;

}


/* Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap*/
@media only screen
and (min-width : 100px)
and (max-width : 667px) {

  .img-responsive{
     height: auto;
     width: 100%;
  }

  .div-deskop{
    display: none;
  }

  .div-mobile{
    display: block;
  }
  .vid-list-container {
    padding-bottom: 20px;
  }

  /* reposition left/right arrows */
  .arrows {
    position:relative;
    margin: 0 auto;
    width:96px;
  }
  .arrow-left {
    left: 0;
    top: -17px;
  }

  .arrow-right {
    right: 0;
    top: -17px;
  }

  .soundcloud{
    margin-top: 55px;
  }

}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {

}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) { ... }

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
  .image-thumb{
    width:100%;
    height:200px;
  }
  .blockquote-bg-skinny{
background-color: #6ed3cf;
min-height: 120px;
}
}