:root{

	--col-variable: something;

}

* {
	margin: 0;
	padding: 0;
	text-decoration: none;
}

:focus {
  outline:0 !important;
}

#header-container {
  width: 80%;
  margin: 0px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
}

#title {
  margin: 20px 0px 10px 0px;
  font-size: 30px;
  /*width: 80%;*/
  text-align: center;
  /*flex-grow: 1;*/
  width: 100%;
  /*transition-property: font-size;*/
  /*transition-duration: 0.2s;*/
}

#title.small {
  /*top: 0;*/
  /*margin: 20px;*/
  font-size: 20px;
  width: auto;
  /*position: absolute;*/
}

#title a {
  color: black;
}

#title a:hover {
  color: #00b3ff;
}

#guides {
  width: 100%;
  text-align: center;
  margin: 5px;
  /*display: inline-block;*/
}

#guides.small {
  width: auto;
}

#guides > .key {
  font-size: 0.8em;
  padding: 0.2em 0.4em;
  display: inline-block;
  border: 1px solid black;
}

#video-container {
  width: 80%;
  margin: auto;
  /*text-align: center;*/
}

#main-video {
  /*width: auto;*/
  max-height: 60vh;

  -webkit-box-shadow: 0px 4px 14px -5px rgba(0,0,0,0.72);
  -moz-box-shadow: 0px 4px 14px -5px rgba(0,0,0,0.72);
  box-shadow: 0px 4px 14px -5px rgba(0,0,0,0.72);
}

#main-video.none {
  display: none;
}

#main-audio.none {
  display: none;
}

#video-container.none {
  display: none;
}

#waveform {
  /*width: 50%;*/
  margin-top: -50px;
}

#waveform-container {
  height: 50px;
  overflow: hidden;
}

#sub-title {
  /*font-size: 16px;*/
  height: 40px;
  padding: 5px 0px;

  /*font-style: italic;*/

  line-height: 40px;
  vertical-align: middle;
}

/*.small {
  font-size: 16px;
}*/

.large {
  font-size: 28px;
}

.sub {
  color: grey;
  /*transition: font-size 0.1s;*/
}

#sub-title-pre, #sub-title-next {
  font-size: 16px;
  height: 24px;
  padding: 3px 0px;
}

.lg {
  font-size: 28px;

  /*font-style: italic;*/
  /*background-color: palegreen;*/
}

.dg {
  color: black;
  /*background-color: limegreen;*/
}


#upload-subtitle {
  cursor: pointer;

  padding: 50px 0px;
}

#upload-video {
  cursor: pointer;
}

.dropzone {
  border: 2px dashed #ccc;
  border-radius: 20px;
  width: 80%;
  
  padding: 25vh 0px;
  margin: 20px auto;

  text-align: center;
  font-family: sans-serif;
}

.dropzone.highlight {
  border-color: purple;
}

.input-file {
  display: none;
}

.dropzone.none {
  display: none; 
}

#sub-container {
  text-align: center;
  margin: 20px auto;
  width: 60%;
}

#sub-container.none {
  display: none;
}

#sub-container.left-align {
  text-align: left;
  margin-left: 400px;

  /*TODO: Better align with the video*/
}

/*---- Media Queries ----*/

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

/* iPhone 5 (portrait & landscape)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
/* STYLES GO HERE */
}
 
/* iPhone 5 (landscape)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
/* STYLES GO HERE */
}
 
/* iPhone 5 (portrait)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
/* STYLES GO HERE */
}

/* iPhone 6 landscape */
@media only screen and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 2)
{ }

/* iPhone 6 portrait */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 2)
{ }

/* iPhone 6 Plus landscape */
@media only screen
  and (min-device-width: 414px)
  and (max-device-width: 736px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 3)
{ }

/* iPhone 6 Plus portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 3)
{ }

/* iPhone 6 and 6 Plus */
@media only screen
  and (max-device-width: 640px),
  only screen and (max-device-width: 667px),
  only screen and (max-width: 480px)
{ }

/* Apple Watch */
@media
  (max-device-width: 42mm)
  and (min-device-width: 38mm)
{ }