@font-face {
  font-family: 'Akzidenz-Grotesk Roman';
  src: url("https://americanmary.com/assets/fonts/AkzidenzGrotesk-Roman.eot");
  src: url("https://americanmary.com/assets/fonts/AkzidenzGrotesk-Roman.eot?#iefix") format("embedded-opentype"), url("https://americanmary.com/assets/fonts/AkzidenzGrotesk-Roman.woff2") format("woff2"), url("https://americanmary.com/assets/fonts/AkzidenzGrotesk-Roman.woff") format("woff"), url("https://americanmary.com/assets/fonts/AkzidenzGrotesk-Roman.ttf") format("truetype"), url("https://americanmary.com/assets/fonts/AkzidenzGrotesk-Roman.svg#AkzidenzGrotesk-Roman") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'Akzidenz-Grotesk Medium';
  src: url("https://americanmary.com/assets/fonts/AkzidenzGrotesk-Medium.eot");
  src: url("https://americanmary.com/assets/fonts/AkzidenzGrotesk-Medium.eot?#iefix") format("embedded-opentype"), url("https://americanmary.com/assets/fonts/AkzidenzGrotesk-Medium.woff2") format("woff2"), url("https://americanmary.com/assets/fonts/AkzidenzGrotesk-Medium.woff") format("woff"), url("https://americanmary.com/assets/fonts/AkzidenzGrotesk-Medium.ttf") format("truetype"), url("https://americanmary.com/assets/fonts/AkzidenzGrotesk-Medium.svg#AkzidenzGrotesk-Medium") format("svg");
  font-weight: normal;
  font-style: normal; }
body{
	padding:0;
	margin:0;
	background: #dfdfdf;
	color:white;
	min-height: 100vh;
	font-size: 16px;
	line-height: 1;
	font-family: 'Akzidenz-Grotesk Medium', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: 100;
}
a{
	text-decoration:none;
	transition: 0.4s ease-out;
}
.border{
  background:white;
	z-index:1000;
}
#border-top{
  height:15px;
  position:fixed;
  width:100vw;
  left:0;
  top:0;
}
#border-btm{
  height:15px;
  position:fixed;
  width:100vw;
  left:0;
  bottom:0;
}
#border-right{
  width:15px;
  position:fixed;
  height:100vh;
  right:0;
  top:0;
}
#border-left{
  width:15px;
  position:fixed;
  height:100vh;
  left:0;
  top:0;
}
#bgvidholder {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
   pointer-events: none;
   overflow: hidden;
   display:block;
}
#bgvidholderport{
  display:none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
#bgvidholderport iframe{
  height:100vh;
  width:100vw;
  position:absolute;
  top:0;
  left:0;
}
#bgvidholder iframe {
   width: 100vw;
   height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
   min-height: 100vh;
   min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}
#navigation{
	margin:0;
	text-align:center;
	padding:30px 30px 0 30px;
	list-style:none;
	font-size:1em;
	letter-spacing: .05em;
	text-transform: uppercase;
}
#navigation li{
	display:inline-block;
	padding:0 10px;
}
#navigation li a, h1 a{
	color:white;
}
#home a:hover{
	color:#3c86ab;
}
#watch a:hover{
	color:#f4e969 !important;
}
#sf a:hover{
	color:#d33d24;
}
#music a:hover{
	color:#a7a79f;
}
#info a:hover{
	color:#cf7789;
}
#homepg h1{
	margin:0;
	padding:0;
	text-transform: uppercase;
	position: absolute;
	width:100vw;
	top:50%;
	transform: translate(0,-50%);
	text-align:center;
	letter-spacing: .05em;
	font-size: 5em;
}
#homepg h2{
	margin:0;
	padding:0;
	text-transform: uppercase;
	position:fixed;
	bottom:35px;
	left:15px;
	text-align:center;
	width:100vw;
	width:calc(100vw - 30px);
	font-weight: 100;
	font-size:1.2em;
	letter-spacing: .05em;
}
#watchpg{
	background:#000;
}
#watchpg #watch a{
	color: #f4e969 !important;
}
#watchpg iframe{
	margin:15px;
	width:100%;
	width:calc(100vw - 30px);
	height:100%;
	height:calc(100vh - 77px);
}
@keyframes fader {
	0% {opacity:0;}
	100% {opacity:1;}
}
h1 span{
	opacity:0;
}
.char1, .char6, .char15{animation: 0.5s forwards 0.5s fader;}
.char4, .char8, .char16{animation: 0.5s forwards 0.75s fader;}
.char3, .char7, .char12, .char17{animation: 0.5s forwards 1s fader;}
.char9, .char11, .char14{animation: 0.5s forwards 1.25s fader;}
h2 a{
	color:white;
  display:inline-block;
}
h2 a:hover{
	opacity:0.5;
}
#musicpg{
	background:#a7a79f;
}
#musicpg #music a, #musicpg #music a:hover{
	color:#000;
}
#textcontent{
	width:90%;
	max-width:800px;
	margin:77px auto;
	line-height: 1.5em;
}
#textcontent h2, h3, h4, h5{
	font-weight:100;
	text-transform: uppercase;
	letter-spacing: .05em;
}
#textcontent h2 {
	xpadding-bottom: 20px;
	xborder-bottom:1px solid white;
}
#textcontent h4{
	line-height: 2.5em;
	width:45%;
	display:inline-block;
	padding-top:30px;
}
#textcontent h4 a{
	border-bottom: 1px solid white;
	color:white;
	margin: 0 30px 10px 0;
	display:block;
	padding:0 30px 5px 0;
}
#textcontent h4 a:hover{
	border-bottom: 1px solid #fd6e83;
}
#productshots{
	width:54%;
	vertical-align: top;
	display:inline-block;
	text-align: left;
}
#textcontent p{
	font-family: Helvetica, Arial, sans-serif;
}
#textcontent a{
	color:black;
}
#textcontent a:hover{
	color:#fd6e83;
}
#textcontent a img{
	width:90%;
	border:3px solid white;
	height: auto;
	transition: 0.4s ease-out;
	vertical-align: top;
	margin-bottom: 10px;
}
#textcontent a:hover img{
	border:3px solid #fd6e83;
}
#specialpg{
	background:#d33d24;
}
.fluid-width-video-wrapper{
  margin:30px 0 60px;
}
#specialpg iframe{
	max-width:100%;
	margin-bottom:30px;
}
#specialpg #sf a{
	color:black !important;
}
#infopg{
	background:#c45d72;
  text-align: center;
  text-transform: uppercase;
}
#infopg h5{
	margin:0;
	padding: 0;
}
#infopg p{
  font-family: 'Akzidenz-Grotesk Medium', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 0.8em;
}
#infopg table{
  font-family: 'Akzidenz-Grotesk Medium', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	width:100%;
	max-width:500px;
	margin:60px auto;
  font-size: 0.8em;
}
#infopg table tr td:first-child, #infopg table tr td:last-child{
	width:40%;
}
#infopg table tr td:first-child{
  text-align:right;
}
#infopg table tr td:last-child{
  text-align:left;
}
#infopg table tr td:nth-child(2){
	width:10%;
}
#infopg #info a{
	color:black !important;
}
@media (orientation:portrait) and (max-width:500px){
  #bgvidholder{
    display: none;
  }
  #bgvidholderport{
    display:block;
  }
  #textcontent h4{
  	width:100%;
  	padding-top:0px;
  }
  #productshots{
  	width:100%;
  }
  #textcontent a img{
  	width:100%;
    width:calc(100% - 6px);
  }
  #navigation li{
  	padding:0 5px;
  }
}