@charset "UTF-8";
/* CSS Document */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
p{
	margin: 10px;
}
body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}
.card-content ul, .card-article ul{
	list-style: disc;
	margin-left: 6px;
}
blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

.Purple{
    position: absolute;
    top: .5em;
    left: .5em;
    font-size: 90%;
    -webkit-text-stroke: 1px #520048;
	text-decoration: 
}
body{
    background-color: #520048;

/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
}
html{
    width: 100%;

	color: #F1FFE7;
	font-size: 150%;
font-family: lato, sans-serif;
font-weight: 400;
font-style: normal;
}
#bgvid{
    display:inherit;
}
#bgvidport{
    display: none;
}
a{
	color: #baff29;
}
#creativevid{
    position: relative;
    top:0%;
    left: 0%;
    z-index: 10;
    max-width: 100%;
    height:auto;
}
.btn{
	position: absolute;
	right: 2%;
	top: 1%;
	cursor:pointer;
	font-size: 1.5em;
}
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background: rgba(82,0,72,0.85) ;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 1.75em;
  color: #F1FFE7;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #520048;
	background-color: #ff3864;
}
article{
	

	width: 100%;
	padding-top: -2em;
}

video {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
	z-index: -1;
}
.viewport-header {
  position: relative;
  height: 100vh;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.title{
	position: absolute;
	top: 12.5%;
	font-size: 36px;
	color:#520048;
	margin-bottom: 1em;
	
}
.subtitle{
	font-size: 1.2em;

	
}
.creativeheadertext{
    position: absolute;
    top: 50%;
    -webkit-text-stroke: 3px #520048;
	font-size: 200%;
}
header{
	height: 3em;
	color: #520048;
	
}
video{
	border-radius: 15px;
}
footer{
	text-align: center;
	font-family: good-times, sans-serif;
font-weight: 400;
font-style: italic;
}
.card-container{
	 display: flex; 
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-evenly;

	margin: 1em;
}
.card{
	width: 95%;
background: rgba( 0, 0, 0, 0.25 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 4px );
-webkit-backdrop-filter: blur( 4px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );

z-index: 0;

      overflow: hidden;
	margin-bottom: 2em;
	
}
.card-content{
    z-index: 1;
	text-align: left;
	margin: 1em;
	color:#eee5e9;
	font-size: 100%;
	text-shadow: 1px 1px 1px #0D1821;
}
.card-article{

	text-align: left;
	margin: .1em 1em 1.75em .75em;
	color:#eee5e9;
	font-size: 100%;
	text-shadow: 1px 1px 1px #0D1821;
}
.strategy{
	background-image: url("Megaphone.gif");
		background-size: contain;
	background-position: right;
	background-repeat: no-repeat;
	
}
.advocacy{
		background-image: url("advocacy.png");
		background-size: contain;
	background-position: right;
	background-repeat: no-repeat;
	
}
.creative{
position:absolute;
    width: 30%;
    z-index:-1;
    
}
.ethics{
			background-image: url("compass.png");
		background-size: contain;
	background-position: right;
	background-repeat: no-repeat;
}
h1{
	font-family: good-times,sans-serif;
font-weight: 700;
font-style: normal;
	
	color: #f1ffe7;
}
h2{
font-family: good-times,sans-serif;

font-style: italic;
	color: #d30c7b;

	font-weight: 400;
}
h3{
font-family: lato, sans-serif;
font-weight: 700;
font-style: normal;
	color:#BAFF29;
}
.domenic{
	width: 30%;
	max-width: 300px;
	clip-path: ellipse(45% 50% at 50% 50%);
	float: left;
	
}
.about{
border-radius: 50px;
box-shadow:  -18px 18px 68px #32002c,
             18px -18px 68px #720064;
	width: 80%;
	padding: 1em;
	margin: 1em 2em 1em 5%;

}
h4{
font-family: lato, sans-serif;
font-weight: 700;
font-style: italic;
	color:#FBAF00;
}

h5{
font-family: good-times,sans-serif;
font-weight: 500;
font-style: normal;
color:#D7263D;

	padding: 0;
	margin: 0;
}

@media (min-width: 1000px){
	.card{
		width: 45%;
	}
	.title{
		font-size: 2em;
	}
	
}
@media (max-width: 475px){
	.domenicg{
		font-size: .75em;
	}
}