@charset "UTF-8";
/* CSS Document */
/* Microsoft Edge Browser 12+ (All) - @supports method */

/*Special Rules for Desktops*/


/*Main Document*/

html, body {
	height: 100%;
}

body {
  margin: 0;
  font-size: 62.5%;
  color: black;
  background-color: #F7F8F9;
}

h5 { 
	font-size:2em;
	color: black;
}

h6 { 
	font-size: 1.2em;
	/*padding-bottom: 2em;*/
}

p  {
	line-height: 1.5em;
}

ul {
	margin-left: 0;
}

.toppad {
	padding-top: 5em;
}

/* page & header img */

#wrap  {
	position: relative;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -60px; 
}

	.main-wrap {
	background: linear-gradient(to bottom,  #333742 40%, rgba(55, 95, 93, 0.6) 70%, #333742 100%);
}

  .ws {
  	color: whitesmoke;
  	padding: 2em 2em;
  }
  
  .purpbor {
    border: 2.5px solid blueviolet;
    }

.bar-color {
	border-radius: 23px;
	background: linear-gradient(to bottom,  rgba(109, 103, 115, 0.37) 0%, rgba(255, 255, 255, 1.0) 60%, rgba(84, 103, 115) 100%);
}

.rows-wrap {
	border-radius: 23px;
	background: linear-gradient(to bottom,  rgba(109, 103, 115, 0.37) 0%, rgba(84, 115, 226, 0.64) 60%, rgba(84, 103, 115) 100%);
}

.cen {
	text-align: center;
}

.br { 
	border-radius: 42px;
	}

  /* Main Row/column */

#main-col {
	position: relative;
	min-height: 1000px;    /*NEED?*/
	height: auto;
	margin-top: 5em;
	margin-bottom: 4em;	
}
 
.botpad {   /* for websites block */
	padding-bottom: 2em;
}

.wsbotpad {   /* for websites block */
	padding-bottom: 10em;
}

.toprowmar {
		margin-top: 2em;
	} 

.mars {
	padding-left: 5px;
	padding-right: 5px;
}

 /*services*/

.services {
	padding: 3em 0 2em 9em;
	list-style-type: none;
	color: whitesmoke;
	display: list-item;
	flex-wrap: wrap;
	align-items: top;
	justify-content: center;
	}

	.services li {
	font-size: 2em;
	padding-right: 4em;
	}


/* brand-bar */

.brand-bar {
	background: rgba(213, 255, 144, 0.37);
	border-radius: 25px;
	border-bottom: 1em solid #e8eae8;
	box-shadow:
	inset 0px 11px 8px -10px rgba(255, 255, 255, 0.9),
	inset 0px -11px 8px -10px rgba(209, 239, 186, 0.9);
	padding-top: 2em;
	padding-bottom: 2em;
}

.light-logo {
	margin-top: 3em;
	padding-left: 10%;
}

.flw-media-header { 								 
	padding: .5em 1em 0 .5em;
	color: whitesmoke;
}

.hashtags {
	text-shadow: 0 0 4px rgba(255, 255, 255, 0.9);
	color: rgba(89, 30, 7, 0.9);
	display: inline-block;
	margin-left: .5em;
	margin-top: .3em;
}

.bbar-btm {
	padding-bottom: 4em;
}

  /* Masonry Grid */

.masonry-grid > .masonry-ul {     
	list-style-type: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	grid-template-rows: repeat(6, 133px);  
	grid-gap: 2rem;
	grid-auto-flow: dense;
	padding-left: 0;
	  }
	
.masonry-ul li {   
	display: flex;
	flex-direction: column;
  background-color: rgb(227, 243, 248);
  border-radius: 3px;
	  }

.span1 { grid-row: span 1; } .span2 { grid-row: span 2; } .span3 { grid-row: span 3; } .span4 { grid-row: span 4; }

.masonry-ul > li > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 3px;
  }
 
  /*Websites Flex Box*/

.websites {               /* section, there is no masonry equiv */
	margin: .5em 0 14em 0;
	}

.websites > .websites-ul {   /* ul */
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
  }

.websites-ul li {         
	padding-top: 3em;
	padding-right: 5em;       /*took out flex: 200px;*/
  }                        

.websites-ul > li > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
  }

/*Social Module*/

#social-icons {
	border-radius: 20px;
	margin: 1em 0 1em 0;
	background-color: rgba(64, 63, 82, 0.78);
	text-align: center;
}

.icon-ul {
	list-style: none;
	padding-top: 3em;
	padding-left: 0;
	padding-bottom: 3em;
}

.icon-ul a {             /*def needed this*/
  min-width: 40px;
  min-height: 40px;
  display: inline-block;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}

.instagram {
	background: url('../images/insta-glyph.svg');
	max-width: 100%;
}

/* /Footer */

.push, .footer {
	height: 60px;
}

.foot {
	display: inline-block;
	margin: 0 auto;
	background-color: rgba(168, 170, 187, 0.4);
	border-radius: 12px;
  border: 1px solid rgba(117, 137, 160, 1.0);
}

.credit {
	padding: 1.3em; 
	margin-bottom: 1px;
	color: whitesmoke;
}

/*MEDIA QUERIES*/

/*SMALLER Screens*/ 

@media (max-width: 452px) {
.masonry-ul li {
	padding-top: 2em .5em; 
	}
}

@media (max-width: 452px) {
  .services {
 	padding: 2em 0 4em 1em;
 	list-style-type: none;
 	font-size: 1.7em; 
}
.services li {
 	font-size: 1.7em; 
}
	}

@media (min-width: 452px) { /* Check */
	.hashtags {
	padding-left: 2em; 
			}
	}

/* LARGER Screens */
	
	/*Masonry Grid Gallery Section*/ 

@media (min-width: 1052px)  {
	.masonry-grid > .masonry-ul { 
	margin: 5em 5em .5em 5em;	
	}
}

@media (min-width: 1176px)  { 		
	.masonry-grid > .masonry-ul { 		/*css grid. Targets ul -needs more mar for wider, pushing in.*/ 
	margin: 5em 20em .5em 20em;								                      /*ok if element(masonry grid) stretches wide.*/
	}
}

@media (min-width: 1570px)  { 		
	.masonry-grid > .masonry-ul { 		/*css grid. Targets ul -needs more mar for wider, pushing in.*/ 
	margin: 10em 40em .5em 40em;								                      /*ok if element(masonry grid) stretches wide.*/
	}
}

@media (min-width: 1870px)  { 		
	.masonry-grid > .masonry-ul { 		/*css grid. Targets ul -needs more mar for wider, pushing in.*/ 
	margin: 10em 46em .5em 46em;								                      /*ok if element(masonry grid) stretches wide.*/
	}
}

/*Websites Section*/

@media (max-width: 1400px)  {
	.websites {             
	margin: 12em 0 .5em 0;
	}
}