@font-face {
	    font-family: 'LubDubMedium';
	    src: url('../fonts/LubDubMedium.ttf');   
	}

	@font-face {
	    font-family: LubDubBold;
	    src: url('../fonts/LubDubBold.ttf'); 
	}
   
  @font-face {
      font-family: LubDubHeavy;
      src: url('../fonts/LubDubHeavy.ttf'); 
  }
     	
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
      }

      .ql-editor {
        padding: 28px 15px !important;
      }

      form {
        float: left;
        padding: 10px;
      }

      .ql-container.ql-snow, .ql-toolbar.ql-snow {
        border: 0px !important;
      }

      input[type="submit"]  {
        color: #FFF;
        font-weight: bold;
        background: #c10e21;
        padding: 7px;
        border: 0px;
        border-radius: 5px;
      }  
 

      #editor-container {
        background-image: url(../assets/lt-preview.png);
        background-repeat: no-repeat;
        padding-left: 150px;
        height: 150px;
        color: #FFF;
        margin-top: 15px;
      }

      #container {
        position: relative;
      }

      #container h1, .ql-editor h1 {
        font-family: 'LubDubBold' !important;
        font-size: 34px !important;
        line-height: 1em !important;
      }

      #container h2, .ql-editor h2 {
        font-family: 'LubDubMedium' !important;        
        font-size: 24px !important;
      }

      #container h3, .ql-editor h3 {
        font-family: 'LubDubBold' !important;        
        font-size: 22px !important;
      }

      #container h4, .ql-editor h4 {
        font-family: 'LubDubMedium' !important;        
        font-size: 20px !important;
      }

            #container p, .ql-editor p {
        font-family: 'LubDubMedium' !important;        
        font-size: 12px !important;
      }


      /* ADDED TO MAKE IT EASIER TO SEE PREVIEW OF LOWER THIRD */
      canvas {
        width: 30% !important;
        height: 30% !important;
      }
      
      .ql-snow .ql-editor h1,
      .ql-snow .ql-editor h2,
      .ql-snow .ql-editor h3,
      .ql-snow .ql-editor p {
      }

      .lt-content {
        margin-top: 30px;
      }

      button#save {
        padding: 10px;
        border: 1px solid black;
        border-radius: 5px;
        text-decoration: none;
        position: fixed;
        width: 130px;
        right: 10px;
        bottom: 10px;
      }

      #buttons {
        position: absolute;
        top: -5px;
        right: 10px;
      }

      #buttons > input {
        padding: 10px;
        display: block;
        margin-top: 5px;
      }     

      .preview {
        font-family: 'LubDubMedium' !important;  
        color: #FFF;
        background: #000;
        padding: 10px;
        width: 790px;
      }

      .ql-toolbar.ql-snow, .ql-toolbar.ql-snow span {
        background: #000;
        color:#FFF;
      }

      .ql-snow .ql-stroke {
        stroke: #FFF !important;
      }

      .ql-snow.ql-toolbar button:hover, 
      .ql-snow .ql-toolbar button:hover, 
      .ql-snow.ql-toolbar button:focus, 
      .ql-snow .ql-toolbar button:focus, 
      .ql-snow.ql-toolbar button.ql-active, 
      .ql-snow .ql-toolbar button.ql-active, 
      .ql-snow.ql-toolbar .ql-picker-label:hover, 
      .ql-snow .ql-toolbar .ql-picker-label:hover, 
      .ql-snow.ql-toolbar .ql-picker-label.ql-active, 
      .ql-snow .ql-toolbar .ql-picker-label.ql-active, 
      .ql-snow.ql-toolbar .ql-picker-item:hover, 
      .ql-snow .ql-toolbar .ql-picker-item:hover, 
      .ql-snow.ql-toolbar .ql-picker-item.ql-selected, 
      .ql-snow .ql-toolbar .ql-picker-item.ql-selected {
        color: #FFF !important;
      }