@font-face {
  font-family: 'Josefin Sans';
  src: url('/assets/fonts/JosefinSans-Regular.ttf') format("truetype");
  font-weight: normal;
}


:root{
  --primary: blue;
  --black : #000;
  --white : #fff;
  --dark-red: #5a0000;
  --light-red: #960000;
  --default-font-famly: 'Josefin Sans', Arial;
}

body{
  background: url(/assets/img/background.jpg) no-repeat bottom center fixed;;
  -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: white;
    color: #000000;
    font-family: var(--default-font-famly);
    background-color: #d3d5c7;
    text-transform: uppercase !important;
}

html,body {
  height: 100%;
}

.app-container{
  background-color: #821cff;
  border: 0px solid #821cff;
  margin-top: 25px;
  padding: 15px;
  width: min-content;
  margin:25px auto 0px auto;
}

.media-container{
  background-color: white;
  padding: 12px;
  box-shadow: 1px 1px 10px 0px black;
  margin-bottom: 15px;
}
.media{
  width: 50vh;
  position: relative;
  padding-top: 50vh;
  background-color: black;
  margin-bottom: 10px;
}

.assets-media{
  width: 50vh;
}

.media-body{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.media-body #canvas{
  width: 100%;
}
.media-body #video-player{
  width: 100%;
  height: 100%;
}

.app-container .actions{
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pre-record-count-down{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  color: white;
}

.btn{

}
.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:visited{
  color: #000000;
  background-color: #fedd00 !important;
  border: 0px solid #fff !important;
  outline: none !important;
  box-shadow: none !important;
  font-size: 34px;
  font-weight: 400;
  outline: none !important;
  box-shadow: none;
  border-radius: 0px !important;
  text-transform: uppercase !important;
}
.no-asset-link, .no-asset-link:hover, .no-asset-link:focus, .no-asset-link:active, .no-asset-link:visited{
  color: #ba965c;
}

.btn-asset, .btn-asset:hover, .btn-asset:focus, .btn-asset:active, .btn-asset:visited{
  border: 1px solid #fff !important;
  outline: none !important;
  box-shadow: none !important;
  background-color: #fff !important;
  width: 60px !important;
  height: 60px !important;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0px !important;
}
.btn-asset div, .btn-asset img{
  color: #ba965c;
  font-size: 8px;
}
.font-21, .font-21:hover, .font-21:focus, .font-21:active, .font-21:visited{
  font-size: 14px;
}

.head1{
  font-size: 43px;
  font-weight: 400;
  color: #ba965c;
}

.head2{
  font-size: 28px;
  font-weight: 400;
  color: white;
}
.btn-icon, .btn-icon:hover, .btn-icon:focus, .btn-icon:active, .btn-icon:visited{
  width: 60px;
  height: 60px;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-share, .btn-share:hover, .btn-share:focus, .btn-share:active, .btn-share:visited{
  width: 50px;
  height: 50px;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
}
.asset-container{
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  min-width: 48vh;
}
.asset{
  width: 31%;
  border: 5px solid #4285F4;
  border-radius: 6px;
  margin-right: 2%;
  margin-bottom: 15px;
  cursor: pointer;
  min-width: 110px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.img-icon{
  width: 50px;
}

@media (min-width: 320px) {  
    
}
@media (min-width: 576px) {  
  .font-21, .font-21:hover, .font-21:focus, .font-21:active, .font-21:visited{
    font-size: 21px;
  }
  .btn-icon, .btn-icon:hover, .btn-icon:focus, .btn-icon:active, .btn-icon:visited{
    width: 85px;
    height: 85px;
    font-size: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .btn-share, .btn-share:hover, .btn-share:focus, .btn-share:active, .btn-share:visited{
    width: 70px;
    height: 70px;
    font-size: 42px;
    border-radius: 10px;
  }
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {  


}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
  
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}

@media (min-height: 300px) {
  .btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:visited{
    font-size: 12px;
  }

  .btn-icon, .btn-icon:hover, .btn-icon:focus, .btn-icon:active, .btn-icon:visited{
    width: 48px;
    height: 48px;
    font-size: 24px;
  }

  .btn-asset, .btn-asset:hover, .btn-asset:focus, .btn-asset:active, .btn-asset:visited{
    font-size: 12px;
    margin: 0px 2px;
    width: 50px !important;
    height: 50px !important;
  }
  .btn-share, .btn-share:hover, .btn-share:focus, .btn-share:active, .btn-share:visited {
    width: 44px;
    height: 44px;
  }

  .img-icon{
    width: 30px;
  }
  .btn-asset div{
    font-size: 5px;
  }

  .head1{
    font-size: 24px;
  }

  .media{
    width: 40vh;
    padding-top: 40vh;
  }
  .assets-media{
    width: 40vh;
  }

  .asset-container{
    min-width: 40vh;
  }

  .asset{
    min-width: 48%;
  }
}

@media (min-height: 550px) {
  .btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:visited{
    font-size: 12px;
  }

  .btn-icon, .btn-icon:hover, .btn-icon:focus, .btn-icon:active, .btn-icon:visited{
    width: 48px;
    height: 48px;
    font-size: 24px;
  }

  .btn-asset, .btn-asset:hover, .btn-asset:focus, .btn-asset:active, .btn-asset:visited{
    font-size: 12px;
    padding: 6px;
    margin: 0px 5px;
    width: 50px !important;
    height: 50px !important;
  }

  .img-icon{
    width: 30px;
  }
  .btn-asset div{
    font-size: 6px;
  }

  .btn-share, .btn-share:hover, .btn-share:focus, .btn-share:active, .btn-share:visited {
    width: 44px;
    height: 44px;
  }

  .head1{
    font-size: 28px;
  }

  /*.asset-container{
    min-width: 48vh;
  }

  .asset{
    min-width: 135px;
  }*/
}

@media (min-height: 750px) {
  .btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:visited{
    font-size: 34px;
  }

  .btn-icon, .btn-icon:hover, .btn-icon:focus, .btn-icon:active, .btn-icon:visited{
    width: 85px;
    height: 85px;
    font-size: 30px;
  }

  .btn-asset, .btn-asset:hover, .btn-asset:focus, .btn-asset:active, .btn-asset:visited{
    font-size: 10px;
    margin: 0px 8px;
    width: 80px !important;
    height: 80px !important;
  }

  .img-icon{
    width: 50px;
  }
  .btn-asset div{
    font-size: 10px;
  }
  .btn-share, .btn-share:hover, .btn-share:focus, .btn-share:active, .btn-share:visited {
    width: 70px;
    height: 70px;
    font-size: 42px;
  }

  .head1{
    font-size: 43px;
  }

  .media{
    width: 50vh;
    padding-top: 50vh;
  }
  .assets-media{
    width: 50vh;
  }

  .asset-container{
    min-width: 48vh;
  }

  .asset{
    min-width: 115px;
  }
}