@import url('https://use.typekit.net/vjb4chl.css');

*,
*::after,
*::before {
	box-sizing: border-box;
}

:root {
	font-size: 14px;
}

body {
  margin: 0;
  color: #ffffff !important;
  background-color: #000000;
	font-family: neue-haas-grotesk-display, sans-serif;
	font-weight: 600;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
}

.background__about {
  background: url(images/Ramos-Chapman-Naima_Headshot.jpeg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;  
}

.background {
  color: white;
}

.background a {
  color: rgba(173, 13, 13, 1);  
}

.background a:hover,
.background a:focus {
  color: rgba(59, 115, 0, 0.75); 
}

.header, .menu {
  color: rgba(173, 13, 13, 1);
}

.header h1 {
	font-size: 10em;
  font-family: neue-haas-grotesk-display, sans-serif;
  font-weight: 900;
  letter-spacing: 0.5em;
	text-transform: uppercase;
  text-align: left;
  line-height: 1em;
  margin: 0.5em 0em;
}

.header h1 span.first {
  color: rgba(59, 115, 0, 1);
}

.header h1 span.last {
  letter-spacing: 0.05em;
  line-height: 0.5em;
}

.header h1 hr {
  margin: 0;
  width: 93%;
/*  background-color: rgba(173, 13, 13, 0.75);*/
  background-color: rgba(0, 0, 0, 0.9);
  border: none;
  height: 3px;
}

.header__short h1 {
  font-size: 4em;
  letter-spacing: 0.35em;
}

@media only screen and (max-width: 480px) {
  .header h1 {
    font-size: 3.8em;
  }

  .header__short h1 {
    font-size: 2.5em;
    letter-spacing: 0.2em;
  }
}

@media only screen and (min-width: 481px) and (max-width: 600px) {
  .header h1 {
    font-size: 6em;
    padding-left: 0.5em;
  }

  .header__short h1 {
    font-size: 3.5em;
    letter-spacing: 0.2em;
  }
}

@media only screen and (min-width: 601px) and (max-width: 768px) {
  .header h1 {
    font-size: 8.5em;
    padding-left: 0.5em;
  }

  .header__short h1 {
    font-size: 5em;
    letter-spacing: 0.2em;
  }
}

.header, .content {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.content {
  justify-content: center;
  align-items: stretch;
}

.menu {
  display: flex;
  flex-direction: column;

}

.menu__item-link {
	margin: 0em 1em;

}

#optimize {
  display: none;
}

a {
  color: rgba(173, 13, 13, 1);
  text-decoration: none;
  outline: none;
  cursor: pointer;
  transition: all 0.3 ease;
}

a:hover,
a:focus {
  color: rgba(59, 115, 0, 1);
  text-decoration: line-through;
  text-decoration-color: black;
  outline: none;
}

a.menu__item-link {
	font-size: 2em;
}

#bgvid {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  transform: translateX(-50%) translateY(-50%);
  transition: 1s opacity;
}

video::-webkit-media-controls {
    display:none !important;
}


.about {
  display: flex;
  justify-content: flex-end;
}

.about > div {
  width: 30%;
  margin: 0em 2em;
  text-align: left;
}

.about .portrait {
  display: none;
}

@media only screen and (max-width: 768px) {
  .background__about {
    background: black;
  }
  .about .portrait {
    display: block;
  }
  .about .portrait img {
    max-width: 100%;
    margin-top: 1em;
  }
  .about {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }  
  .about > div {
    width: 100%;
    padding: 0em 2em;
  }
}

.logo {
  width: auto;
  max-width: 200px;
  height: auto;
  max-height: 130px;
}

.press_coverage{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.press {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin: 8em;
}

.press_logo a {
  margin: 0em 4em 0em 0em;
}

.press h2 {
  margin: 0em;
  text-align: left;
  max-width: 75%;
}

.press_content {
  display: flex;
  flex-direction: column;
  max-width: 50%;
  justify-content: flex-start; 
  align-items: flex-start;
}

.press_content img { 
  margin: 2em 0em;
}

.press_thecut .press_content img {
  max-width: 100%;
  height: auto;
  margin-bottom: 2em;
}

blockquote {
  margin: 2em 12em 0em 0em;
  text-align: left;
  font-style: italic;
}

@media only screen and (max-width: 768px) {
  .press_coverage {
    padding: 0em 1em;
  }
  .press {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 1em;
  }
  .press_logo a {
    margin: 1em;
  }
  .press h2 {
    max-width: 80%;
    width: 100%;
    text-align: center
  }  
  .press_content {
    max-width: 100%;
    width: 100%;
    align-items: center;
  }
  blockquote {
    margin: 1em;
  }
  .press_content img { 
    height: auto;
    max-width: 100%;
  }
}

.contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
}

.agent, .inquiries {
  display: flex;
  justify-content: center;
  width: 35%;
  margin-bottom: 4em;
  flex-direction: column;
  text-align: center;
}

.agent img {
  margin: 0 auto;
}

@media only screen and (max-width: 480px) {
  .agent, .inquiries {
    width: 80%;
  }
}

@media only screen and (min-width: 481px) and (max-width: 768px)  {
  .agent, .inquiries {
    width: 90%;
  }
  .agent p:first-child, .inquiries p:first-child {
    margin-right: 2em;
  }
}

.work {
  display: flex;
  align-content: center;
  position: relative;
  overflow: hidden;
  width: 90%;
  margin: 0 auto;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.work iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.cv {
  text-transform: none;
  width: 75%;
  margin: 0 auto;
  text-align: left;
}

.cv h2 {
  font-size: 2em;
}

.cv h3 {
  font-size: 1.5em;
}

.cv .section {
  margin-bottom: 3em;
}

@media only screen and (max-width: 480px) {
  .cv {
    width: 90%;
  }
}

@media only screen and (min-width: 481px) and (max-width: 768px)  {
  .cv {
    width: 85%;
  }
}