/* styles */
/* called by your view template */

@font-face {
  font-family: "Helvetica Condensed";
  src: url("../fonts/HelveticaNeueLTStd-BlkCn.otf");
}

@font-face {
  font-family: "Helvetica Roman";
  src: url("../fonts/HelveticaNeueLTStd-Roman.otf");
}

@font-face {
  font-family: "Helvetica Medium";
  src: url("../fonts/HelveticaNeueLTStd-Md.otf");
}

@font-face {
  font-family: "Helvetica Bold";
  src: url("../fonts/HelveticaNeueLTStd-Bd.otf");
}

@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans-Regular.ttf");
}

html{ overflow-y: scroll;}

html * {
  font-family: "Helvetica Roman" !important;
}

h1 {
  font-family: "Helvetica Condensed" !important;
  font-size: 13rem !important;
  line-height: .87em !important;

  color: #F04933 !important;
}

h2 {
  font-family: "Helvetica Bold" !important;
  font-size: 1.15rem !important;
  line-height: 1.2em !important;

  color: #231f20 !important;
}

h2 span {
  font-size: .95rem !important;
}

h3 {
  font-family: "Helvetica Condensed" !important;
  font-size: 1.3rem !important;
  line-height: 1.5em !important;

  color: #231f20 !important;
}

p {
  font-size: 1.0rem !important;
}

small {
  font-size: .67rem !important;
}

.btn {
  background-color: #2e9f48 !important;
  border: 0;
  font-size: 1.3rem !important;
  width: 50vw;
  max-width: 200px;
  padding: 10px 0px 7px 0px;
}

.dlbtn button div {
  background-image: url("../images/icons/download.svg");
}

#redo {
  background-color: #c23030 !important;
}

.ctoa {
  font-size: 1rem !important;
}

#content-holder {
  position: relative;
  height: calc(100% * (720/1280));
  overflow: hidden;
}

#replay {
  width: 30vw;
  height: 30vw;

  max-width: 149px;
  max-height: 149px;

  -webkit-transition: opacity .33s ease;
    -o-transition: opacity .33s ease;
    transition: opacity .33s ease;
}

.socialicon {
  width: 32px;
  height: 32px;
}

.footer {
  height: 150px;
  background-color: #4B4E4D;
}

.footer #footercopy {
  color: white !important;
  line-height: .87rem !important;
}

.footer #footerlinks a {
  font-size: .67rem !important;

  color: white !important;
  line-height: .87rem !important;
}

button {
  font-family: "Helvetica Medium" !important;
}

/* Portrait mobile*/
@media (max-width: 575.98px) { 
    #header { width: 100% !important; }
    #bodytext { width: 100% !important; }
    #submission { width: 100% !important; }
    #namefield { width: 100% !important; }
  
    #canvas-holder {
      display: npne
    }

    #submission {
      max-width: 400px !important;
    }
    
    .has-border {
      border-bottom: 1px solid #dee2e6!important;
    }

    #dlVideoIOSNote {
      padding: 0 10vw !important;
    }
    /*
    #shareurl {
      max-width: 150px;
    }
    */
}
@media (min-width: 576px) and (max-width: 767.98px) {
  #redo {
    width: 18vw;
  }
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .btn {
    width: 24vw;
    max-width: 200px;
  }

  #redo {
    max-width: 250px;
  }
  
  #dlVideoIOSNote {
    padding: 0 1vw !important;
  }
}

@media (min-width: 992px) {
  .btn {
    width: 15vw;
    max-width: 142px;
  }

  #generate {
    max-width: 200px;
  }
  #redo {
   
  }
}

@media (min-width: 576px) {
  .has-border {
    border-right: 1px solid #dee2e6!important;
  }
}

#submission {
  max-width: 400px;
}

#exports {
  max-width: 985px;
}

#submission {
  -webkit-transition: opacity .5s ease;
    -o-transition: opacity .5s ease;
    transition: opacity .5s ease;
}

#exports.shown {
  -webkit-transition: opacity .67s ease 1s;
    -o-transition: opacity .67s ease 1s;
    transition: opacity .67s ease 1s;
}

#exports.hidden {
  -webkit-transition: opacity .67s ease;
    -o-transition: opacity .67s ease;
    transition: opacity .67s ease;
}

.hidden {
  pointer-events: none !important;
  opacity: 0 !important;
  /*display: none !important;*/
}

.shown {
  pointer-events: all !important;
  opacity: 1 !important;
}

#bodytext {
  max-width: 950px;
}

#progress {
  opacity: 0.85 !important;
}

#video-preview {
  z-index: 9999 !important;
}

#defaultCanvas0 {
  transform: scale(1.1);
  filter: blur(12px);
  opacity: 0.8;
}

#titlecard {
  transform: scale(1.1);
}

#canvas-holder {
  overflow: hidden;
}