/* Main CSS
-------------------------------------------------- */
/* Main formatting things */


body {
  padding-bottom: 40px;
  color: #eaeaea;
  background-color: #000015;
}

.carousel-link
{
	display:block; 
	height:600px; 
	width:76%; 
	position:absolute; 
	margin-top:-50%; 
	margin-left:12%;  
	z-index:4;
}

.responsive-spacer
{
 margin-top: 5px;
 margin-bottom: 5px;
}

.spytarget

{
	position: relative;
}

/* fonts */

@font-face {
	font-family : "PT";
	font-style : normal;
	font-weight : normal;
	src : url('https://malakh.com/internal/publicdomainfonts/PTF55F.ttf');
}
@font-face {
	font-family : "Gabrielle";
	font-style : normal;
	font-weight : normal;
	src : url('https://malakh.com/internal/publicdomainfonts/Gabrielle.ttf');
}
@font-face {
	font-family : "Arizonia";
	font-style : normal;
	font-weight : normal;
	src : url('../fonts/Arizonia-Regular-OTF.otf');
}
@font-face {
	font-family : "Dynalight";
	font-style : normal;
	font-weight : normal;
	src : url('../fonts/Dynalight-Regular.otf');
}
@font-face {
	font-family : "head3";
	font-style : normal;
	font-weight : normal;
	src : url('../fonts/DancingScript-Regular.otf');
}

@font-face {
	font-family : "Garamond";
	font-style : normal;
	font-weight : normal;
	src : url('https://malakh.com/internal/openfonts/EBGaramond.ttf');
}

.smalltext p, .smalltext a, .smalltext{
	
	font-family:"head3",Georgia,Serif; font-size: 16px;
}

.invisible { display:none; }

/* The most basic consistency for headers */

h1
	{ font-family:"Arizonia"; font-size: 3em;}

h2
	{ font-family:"head3","Arizonia",Serif; font-size: 280%; font-weight: normal;}

h3
	{ font-family:"head3",Georgia,Serif; font-size: 200%;}

h4
	{ font-family:"head3",Georgia,Serif; font-style: italic;font-size: 150%;}

p { font-family:"Tahoma",Arial,Times;font-size:120%; }

/* Nice big jumbotron to standardize headers */

.jumbotron
{
	background-color: #000000;
	padding-top: 95px;
	
}

/* MODAL FORMATTING
-------------------------------------------------- */
/* Consistent look to the modal */

.modal-body-art
	{	
			float:left;
			margin-left: -10px;
			margin-right: 25px;
			background-color: #000000;
			padding: 25px;
	}

.modal-cover-art-wrapper
	{
			text-align: center;
	}	
	
.modal-content
	{
					background-color: #000000;

	}
	
.modal-body-quote p
	{

		font-family:"PT",Georgia,Serif;
		font-style: italic;
		font-size:110%;
	}


/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */

/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
  position: absolute;
  top: 25px;
  right: 0;
  left: 0;
  z-index: 20;
}

/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper > .container {
  padding-right: 0;
  padding-left: 0;
  
}

.navbar-wrapper .navbar {
  padding-right: 15px;
  padding-left: 15px;
  background-color: #000000; 
}
}
.navbar-wrapper .navbar .container {
  width: auto;

}

.navbar-brand 
{
	 font-family:"head3","Arizonia",Serif;
	 font-size: 280%; 
	 font-weight: normal;
}
.navbar-nav
{
	 font-family:"PT","Georgia",Serif;
	 font-size: 120%; 
	 font-weight: normal;
}


/* Carousel controls etc */
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  min-height: 265px;
  margin-bottom: 30px;
  margin-top: 80px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}

/*.carousel-indicators
{
	margin-top:15%;
}
*/
/* Declare heights because of positioning of img element */
.carousel .item {
  min-height: 265px;
  background-color: #000000;
}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  min-height: 265px;
}

.carousel-caption
{
 
 width: 115px;
 margin-left: 68%;
 padding: 10px;
 display: none;
}

.carousel-control
{
	display:none;
}

/* RESPONSIVE CSS
-------------------------------------------------- */

.responsive-spacer
{
 margin-top: 10px;
 margin-bottom: 10px;
}

@media (min-width: 550px) {

.carousel {
  min-height: 375px;
  margin-bottom: 20px;
}

	/* Declare heights because of positioning of img element */
	.carousel .item {
  min-height: 375px;
	}
	.carousel-inner > .item > img {

	min-height: 375px;
	}

  /* Bump up size of carousel content */
	.carousel-caption p {
    margin-bottom: 10px;
    font-size: 11px;
    line-height: 1.1;
	}
}


@media (min-width: 650px) {

.carousel {
  min-height: 475px;
  margin-bottom: 30px;
}

	/* Declare heights because of positioning of img element */
	.carousel .item {
  min-height: 475px;
	}
	.carousel-inner > .item > img {

	min-height: 475px;
	}

  /* Bump up size of carousel content */
	.carousel-caption p {
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.4;
	}
}

@media (min-width: 768px) 
{

	h3
	{
		font-size: 400%;
	}

	.container-bloglist
	{
		margin-right: 35px;
		margin-bottom: -5px;
	}


	.container-mainbody p
	{
		font-size: 190%;
		padding: 13px;
	}


	.gallery-entries 
	{
		width: 92%;
		margin-left: auto;
		margin-right: auto;
	}

}

@media (min-width: 900px) 
{

	.responsive-pagemargin
	{
		width: 88%;
		margin-left: auto;
		margin-right: auto;
	}
}

@media (min-width: 992px) {

	.carousel-caption
	{
		display:inherit;
	}
	.carousel-control
	{
		display:inherit;
	}
.carousel {
  min-height: 575px;
  margin-bottom: 30px;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  min-height: 575px;
}
.carousel-inner > .item > img {

  min-height: 575px;
}

  /* give the boxes a consistent size */

 .responsive-padding
  {
  margin-top: 135px;
  }
  
 .responsive-spacer
  {
  margin-top: 25px;
  }
}

@media (min-width: 980px) 
{

	
	.modal-cover-art
		{	
			float:left;
			margin-left: -10px;
			margin-right: 25px;
			background-color: #000000;
			padding: 25px;
		}

}
@media (min-width: 1200px) 
{

	.modal-cover-art
		{	

			margin-left: -10px;
			margin-right: -25px;
			background-color: #000000;
			padding: 25px;
		}
		
	.small-element
	{
		display: none;
	}

	.large-element
	{
		display: inherit;
	}

}

/* RESPONSIVE CSS
-------------------------------------------------- */


.large-element
{
	display: none;
}

.small-element
{
	display: inherit;
}



@media (min-width: 768px) {

  .jumbotron { min-height: 300px; }

  .navspacer
  {

	padding-right: 210px;
 }
  
  .navbar-wrapper .navbar {
	opacity: .83;
}

  /* Navbar positioning foo */
  .navbar-wrapper {
    margin-top: 20px;
  }
  .navbar-wrapper .container {
    padding-right: 15px;
    padding-left: 15px;
  }
  .navbar-wrapper .navbar {
    padding-right: 0;
    padding-left: 0;
  }

  /* The navbar becomes detached from the top, so we round the corners */
  .navbar-wrapper .navbar {
    border-radius: 4px;
  }

}



@media (min-width: 992px) {

  .jumbotron { min-height: 400px; }
    

}

@media (min-width: 1000px) {

    .navspacer
  {

	padding-right: 420px;
 }
}



@media (min-width: 1200px) {

    .navspacer
  {

	padding-right: 650px;
 }
  
.small-element
{
	display: none;
}

.large-element
{
	display: inherit;
}
}