#view-source {
     position: fixed;
     display: block;
     right: 0;
     bottom: 0;
     margin-right: 40px;
     margin-bottom: 40px;
     z-index: 900;
   }

   .mdl-demo .mdl-layout__header-row {
     padding: 5px 15px;
     display: inline-block;
     height: inherit;
     z-index: 1;
   }

   .mdl-layout__header-row h3 {
     font-size: 26px;
     font-weight: 300;
     display: inline-block;
   }

   .logo {
     width: 100px;
     display: inline-block;
     float: right;
     margin: 18px 12px 0 0;
   }

   img.logo-img {
     width: 100%;
   }

   .logo a {
     display: inline-block;
   }

   .compatible {
     color: #03A9F4;
     padding: 5px 0 6px 0;
   }

   .compatible i.material-icons.desk {
     font-size: 42px;
     display: inline-block;
   }

   i.material-icons.tab {
     font-size: 26px;
     margin-bottom: -4px;
     margin-left: -12px;
     background-color: #E0E0E0;
     padding: 1px 1px 1px 0px;
     border-radius: 4px;
   }

   i.material-icons.iphone {
     font-size: 20px;
     margin-left: -8px;
     background-color: #E0E0E0;
     padding: 0px;
     border-radius: 4px;
     width: 18px;
     display: inline-block;
   }

   .compatible h4 {
     font-size: 16px;
     margin: 0 0 10px 0 !important;
   }

   p.watch {
     color: #9E9E9E;
     display: inline-block;
     font-size: 12px;
     position: absolute;
     right: 30px;
     top: 25px;
   }

   p.watch i {
     vertical-align: sub;
     font-size: 16px;
   }

    p.welcome-watch {
      color: #9E9E9E;
      margin: 0 0 5px 0;
      display: inline-block;
      font-size: 12px;
    }
    p.welcome-watch i {
     vertical-align: sub;
     font-size: 16px;
    }

    .demo-button {
      margin: auto;
      clear: left;
      text-align: center;
    }

   .mdl-demo .mdl-layout__tab-panel:not(#overview) {
     background-color: whitesmoke;
     padding: 0;
     margin: 0;
   }

   .mdl-demo .mdl-layout__content section:not(:last-of-type) {
       position: relative;
       margin: 0;
   }
   .mdl-demo .mdl-grid {
     padding: 0;
   }

   .mdl-demo .mdl-cell {
     padding: 0;
     margin: 0;
   }

   .mdl-cell .config-menu {
     padding: 20px;
   }
   .config-menu input {
     text-align: right;
   }

   .properties-list {
      float: left;
      margin-right: 70px;
      margin-top: 10px;
   }

   .properties-list h1 {
       color: #607D8B;
       margin-top: 0px;
   }

   .properties-list li i {
     vertical-align: middle;
     font-size: 18px;
     margin-right: 6px;
     color: #4caf50;}

   .properties-list li {
       margin-bottom: 8px;
   }

   .mdl-cell--3-col-desktop.mdl-cell--3-col-desktop {
       float: left;
   }
   .mdl-color--primary-dark {
       background-color: rgba(0, 0, 0, 0.7)!important;
   }
   .mdl-color--primary {
       background-color: rgba(0, 0, 0, 0.94)!important;
   }

   .side-menu {
     background-color: #424242;
     color: whitesmoke;
     font-size: 12px;
   }

   header .mask {
       content: "";
       width: 100%;
       height: 150px;
       position: absolute;
       display: block;
       top: 0;
       left: 0;
       background: url(http://c1exchange.com//images/stories/joomla/sample-6.jpg) no-repeat center center;
       background-size: cover;
       opacity: 0.4;
       filter: alpha(opacity=10);
   }

   .mdl-demo .mdl-layout__tab-bar .mdl-layout__tab, .mdl-demo .mdl-layout__tab-bar-container {
       height: 52px;}

   .mdl-demo .mdl-layout__tab-bar .mdl-layout__tab {
     height: 52px;
     line-height: 52px;
   }

   .mdl-demo main > .mdl-layout__tab-panel {
       padding-top: 26px;
   }

   .mdl-cell .welcome-content-heading {
    padding-top: 5px;
    padding-left: 5%;
    padding-bottom: 5%;
    height: 50%;
    background-color: #E0E0E0;
   }

   .mdl-cell .welcome-content {
    padding-top: 5px;
    padding-left: 5%;
    padding-bottom: 5%;
    height: 23vw;
   }

   .preview-img {
     position: absolute;
     top: 10%;
     right: 3%;
     width: 50vw;
     max-width: 580px;
     margin: 0 0 20px;
   }

   .pre-img {
     width: 35vw;
     max-width: 580px;
     display: block;
     margin: auto;
   }

   .mdl-mini-footer {
     padding: 20px 16px 16px;
   }

/* Fade Transition */

.mdl-layout__tab-panel div   {
   -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
      -moz-animation: fadein 2s; /* Firefox < 16 */
       -ms-animation: fadein 2s; /* Internet Explorer */
        -o-animation: fadein 2s; /* Opera < 12.1 */
           animation: fadein 2s;
}

@keyframes fadein {
   from { opacity: 0; }
   to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
   from { opacity: 0; }
   to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
   from { opacity: 0; }
   to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
   from { opacity: 0; }
   to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
   from { opacity: 0; }
   to   { opacity: 1; }
}

/* Fade Transition END */

@media only screen and (max-width: 667px) {
    .mdl-demo main > .mdl-layout__tab-panel {
       padding: 0;
    }

    .mdl-demo .mdl-card__supporting-text h4 {
       font-size: 16px;
    }

    .logo {
       width: 70px;
       margin: 10px 2px 0 0;
    }

    .mdl-demo .mdl-layout.is-small-screen .mdl-layout__header-row h3 {
       margin: 8px 0;
    }

    header .mask {
       height: 100px;
    }

    .mdl-demo .mdl-layout__tab-bar .mdl-layout__tab {
       height: 38px;
       line-height: 38px;
       font-size: 12px;
    }

    .mdl-demo .mdl-layout__tab-bar-container {
       height: 38px;
    }

   .preview-img {
     position: relative;
     width: 60vw;
     max-width: 580px;
     margin: 0 10% 10px;
   }

    .pre-img {
     width: 60vw;
     max-width: 580px;
     display: block;
     margin: auto;
    }
}

.intrinsic-container {
  position: relative;
  height: 0;
  overflow: hidden;
}

/* 16x9 Aspect Ratio */
.intrinsic-container-16x9 {
  padding-bottom: 56.25%;
}

/* 4x3 Aspect Ratio */
.intrinsic-container-4x3 {
  padding-bottom: 75%;
}

.intrinsic-container iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

.mdl-layout__container.has-scrolling-header .mdl-layout__content {
    /* overflow: visible; */
    overflow-y: auto;
    overflow-x: hidden;
}


html, body {
  height: 100%;
}



@media (min-width: 417px) and (max-width: 839px) {
   fieldset.radiogroup {
    float: left;
    padding: inherit;
   }
   section#slider-control {
       width: 100%;
   }
   section#inview-control {
       width: 100%;
   }
   section#billbord-control {
       width: 100%;
   }
}
@media (min-width: 300px) and (max-width: 417px) {
   fieldset.radiogroup {
    padding: inherit;
   }
   section#slider-control {
       width: 100%;
   }
   section#inview-control {
       width: 100%;
   }
   section#billbord-control {
       width: 100%;
   }
}

.mdl-cell .config-menu {
    padding: 5px;
}

fieldset.radiogroup {
    padding-bottom: 13px;
}

.btn-info.active.focus, .btn-info.active:focus, .btn-info.active:hover, .btn-info:active.focus, .btn-info:active:focus, .btn-info:active:hover, .open>.dropdown-toggle.btn-info.focus, .open>.dropdown-toggle.btn-info:focus, .open>.dropdown-toggle.btn-info:hover {
    color: #fff;
    background-color: #1a1a1a;
    border-color: #0a0a0a;
}

.btn-info {
    color: #fff;
    background-color: #0a0a0a;
    border-color: #060606;
}

button.btn.btn-info:hover {
    color: #fff;
    background-color: #5c5c5c;
    border-color: #060606;
}

.btn-info.focus, .btn-info:focus {
    color: #fff;
    background-color: #6a6f71;
    border-color: #35393a;
}

.mdl-demo .mdl-layout__tab-bar {
    padding: 0;
    /* padding-left: 16px; */
    box-sizing: border-box;
    height: 100%;
    width: 100%;
}

legend {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 20px;
    font-size: 21px;
    line-height: inherit;
    color: #f5f5f5;
    border: 0;
    /* border-bottom: 1px solid #e5e5e5; */
}