/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- General Content
- Typography
- Header & Nav
- Images & Media
- Footer
- Media Queries
*/

/* General Content
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.main{padding-top: 2.5%;}
.row{padding: 2% 0;}
.row-portfolio{padding: 1%;}

.BlackBG{background-color: #000000;
	padding: 5%;
	text-align: center;}

.back {
	float: left;
}

.random {
  float: right;
}


.masonry { /* Masonry container */
  column-count: 4;
  column-gap: 2em;
}

.item { /* Masonry bricks or child elements */
  background-color: #fff;
  display: inline-block;
  margin: 0 0 2em;
  width: 80%;
}



.masonry-nine { /* Masonry container */
  column-count: 6;
  column-gap: 3em;
}

.item { /* Masonry bricks or child elements */
  background-color: #fff;
  display: inline-block;
  margin: 0 0 2em;
  width: 100%;
}

button {
	margin-top: 15px;
	margin-bottom: 45px;
	font-size: .7em;
	font-weight: 400;
}

hr {
	height: 10px
	
}

	

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
body{
	font-family:'Gill Sans', Calibri, sans-serif;
	font-size: 1.5em;
	font-style: normal;
	font-weight: 400;
	color: #200147;
}

h1{
	font-family:'Gill sans', Calibri, sans-serif;
	font-size: 1.8em;
	font-style: normal;
	letter-spacing: .02em;
	font-weight: 100;
	color: #200147;
	margin-top: 30px;
	
}

h2{
	font-family:'Gill Sans', Calibri, sans-serif;
	font-size: 1.2em;
	color: #200147;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-weight: 200;
	line-height: 1.3;
}

h3{
	font-family:'Gill Sans', Calibri, sans-serif;
	font-size: 1.2em;
	color: #200147;
	letter-spacing: .02em;
	font-weight: 400;
	line-height: 1.4;
	
}

h4{
	font-family:'Gill Sans', Calibri, sans-serif;
	font-size: .9em;
	color: #200147;
	text-decoration: none;
	letter-spacing: .1em;
	font-weight: 300;
	
}

h5{
	
}

h6 {
	font-family:'Gill Sans', Calibri, sans-serif;
	font-size: .8em;
	text-transform: uppercase; 
	letter-spacing: .08em;
}


a{
	font-family:'Gill sans', Calibri, sans-serif;
	font-size: 1em;
	color: #200147;
	text-decoration: none;
	font-weight: ;
	
}

a:hover { 
  color: #981934;
}




/* Header & Nav
–––––––––––––––––––––––––––––––––––––––––––––––––– */
header.main_nav{
	padding: 2% 0;
	display: block;
}
.logo{
	margin: 0% auto;
}

.logo img{
	width: 220px;
	float: left;
}

.topnav {
  float: right;
  padding: 24px 0;
}

.topnav a{
	font-size: .85em;
	text-transform: uppercase; 
	letter-spacing: .08em;
	text-decoration: none;
	padding-left: 15px;
}



/* Images & Media
–––––––––––––––––––––––––––––––––––––––––––––––––– */
img{max-width: 100%;}

/* Footer
–––––––––––––––––––––––––––––––––––––––––––––––––– */

footer {
	padding-top: 5%;
	padding-bottom: 5%;
}


h6.footerleft {
	text-align: left;
	color: #;
	font-size: .9em;
}

h6.footercenter {
	text-align: center;
	color: #;
	font-size: .9em;
}

h6.footerright {
	text-align: right;
	color: #;
	font-size: .9em;
}

.footer a {
	font-size: .9em;
	text-transform: lowercase; 
	color: #;
}

.footercenter {
	text-align: center;
}

.footerright {
	text-align: right;
}


/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Logo for mobile */
@media (max-width: 550px) {
	.logo img{
		max-width: 25%;}
}

/* Row padding for mobile */
@media (max-width: 550px) {
	.row{padding: 0 0;}
}

@media (max-width: 550px) {
	.row img {padding: 1% 0;}
}


/* Nav for mobile */
@media (max-width: 550px) {
	.topnav a{
		font-size: 1em;
		text-transform: uppercase;
		letter-spacing: .13em;
		text-decoration: none;
		padding-left: 2.5px;}
}


@media (max-width: 550px) {
.footerleft {
	text-align: left;
	margin-bottom: 0;
}

.footercenter {
	text-align: left;
}

.footerright {
	text-align: left;
}
}

/* Video for mobile */
@media (max-width: 770px) {
	iframe {
		width:360px;
	}
	
	
@media (max-width: 550px) {
	.BlackBG {
		padding: 0%;
		margin-bottom: 8%;
		}
		
/* Masonry on medium-sized screens */
@media only screen and (max-width: 1023px) {
	.masonry {
		column-count: 3;
		}
	}

/* Masonry on small screens */
@media only screen and (max-width: 767px) {
	.masonry {
		column-count: 2;
		}
	}	
	
	
	
/* 99 Masonry on small screens */
	@media only screen and (max-width: 767px) {
		.masonry-nine {
			column-count: 6;
			}
		}