/*general style*/
body,
.modal-title {
	font-family: 'IM Fell English SC', serif;
	/*font-family: 'Special Elite', regular;*/
}

li {
	margin-right: 1.5em;
}

.clickable {
	cursor: pointer;
}

/*Navbar*/
#navlogo {
	display: none;
}

/*Jumbotron*/
#title-logo {
	font-size: 7.5em;
}

/*Footer*/
footer {
	margin: 5em 0;
}

footer li {
	float: left;
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

footer p {
	clear: left;
	margin-bottom: 0;
}

/*Carousel*/
.carousel-fade .carousel-inner .item {
	opacity: 0;
	-webkit-transition-property: opacity;
	-moz-transition-property: opacity;
	-o-transition-property: opacity;
	transition-property: opacity;
}

.carousel-fade .carousel-inner .active {
	opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
	left: 0;
	opacity: 0;
	z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
	opacity: 1;
}

.carousel-fade .carousel-control {
	z-index: 2;
}

html,
body,
.carousel,
.carousel-inner,
.carousel-inner .item {
	height: 100%;
	max-height: 35vh;
}

/*Modal*/
.modal-title {
	font-weight: bold;
	text-shadow: 4px 4px 4px #aaa;
}

.modal-body figure img {
	position: relative;
	width: 50%;
	margin: auto;
}

.modal-body figure i {
	position: absolute;
	top: 1em;
	text-align: center;
	width: 100%;
	opacity: 0.35;
}

/*###################################################################################*/

/*old/new iPhones/Galaxy*/
.bgimg {
	background-size: cover;
	background-color: black;
	color: whitesmoke;
	height: 100vh;
	background: url(StringX-Background-xs.jpg) no-repeat center center;
}

@media screen and (orientation: portrait) {

	.bgimg {
		background-size: cover;
		background-color: black;
		color: whitesmoke;
	/*	height: 100vh;*/
		background: url(Its-You-pic-xs.jpg) no-repeat top center;
	}
}

/*new iPhones/Notes*/
@media screen and (min-width: 400px) {

	.bgimg {
		background-size: cover;
		background-color: black;
		color: whitesmoke;
		height: 100vh;
		background: url(StringX-Background-sm.jpg) no-repeat center center;
	}

	@media screen and (orientation: portrait) {
		.bgimg {
			background-size: cover;
			height: 100vh;
			background: url(Its-You-pic-sm.jpg) no-repeat top center;
			/*background: url(Twisted-Scenery-pic-sm.jpg) no-repeat top center;*/
		}
	}
}

/*iPad/new iPhones*/
@media screen and (min-width: 700px) {

	#navlogo {
		display: block;
	}

	.bgimg {
		background-size: cover;
		background-color: black;
		color: whitesmoke;
		height: 100vh;
		background: url(StringX-Background-md.jpg) no-repeat center center;
	}

	@media screen and (orientation: portrait) {
		.bgimg {
			background-size: cover;
			background: url(Its-You-pic-md.jpg) no-repeat top center;
		}
	}
}

/*iPad*/
@media screen and (min-width: 1000px) {

	body>.navbar-transparent {
		background-color:transparent;
	}

	body>.navbar-inverse {
		border-color:transparent;
	}

	body>.navbar-transparent .navbar-nav>.open>a {
		background-color:transparent!important;
	}

	.bgimg {
		background-size: cover;
		background-color: black;
		color: whitesmoke;
		height: 100vh;
		background: url(StringX-Background-lg.jpg) no-repeat center center;
	}

	@media screen and (orientation: portrait) {

		.bgimg {
			background-size: cover;
			background: url(Its-You-pic-lg.jpg) no-repeat top center;
			/*background: url(Twisted-Scenery-pic-sm.jpg) no-repeat top center;*/
		}
	}
}

/*laptop/kindle*/
@media screen and (min-width: 1500px) {

	.bgimg {
		background-size: cover;
		background-color: black;
		color: whitesmoke;
		height: 100vh;
		background: url(StringX-Background-xl.jpg) no-repeat top center;
	}

	@media screen and (orientation: portrait) {

		.bgimg {
			background-size: cover;
			height: 100vh;
			background: url(Its-You-pic-xl.jpg) no-repeat top center;
			/*background: url(Twisted-Scenery-pic-sm.jpg) no-repeat top center;*/
		}
	}
}

/*wide screen media*/
@media screen and (min-width: 3000px) {

	.bgimg {
		background-size: cover;
		background-color: black;
		color: whitesmoke;
		height: 100vh;
		background: url(StringX-Background.jpg) no-repeat top center;
	}
}

/* embed youtube video*/

.video-container {
    overflow: hidden;
    position: relative;
    width:100%;
}

.video-container::after {
    padding-top: 56.25%;
    display: block;
    content: '';
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}