html {
    background-color: #dadada;
}

body {
    width: 85%;
    margin 0 auto;
    background-color: white;
}

.logo {
    max-height: 100px;
}

.footer {
    background-color: #4d4d4d;
}

.navbar {
    background-color: #fb9b00 !important;
}

.nav-item:hover {
    text-decoration: underline;
}

.navbar-toggler {
    border: 2px solid black !important;
}

.navbar-toggler:focus {
    border: 2px solid black !important;
}


.navbar-toggler-icon {
    weight: 1.5em !important;
    height: 1.5em !important;
}

#image-line {
    height: auto;
    weight: auto;
    margin-top: 5px;
}

.max-height {
    height: auto;
    weight: auto;
    max-height: inherit;
}

#line-img-middle {
    min-width: 100%;
    margin: 0;
    display: block;
    padding: 0;
}

#line-img-left {
    min-width: 100%;
    display: block;
    padding: 0;
}

#line-img-right {
    min-width: 101%;
    display: block;
    padding: 0;
}

#div-left {
    margin-bottom: 10px;
}

#div-middle {
    margin-bottom: 10px;
}

#div-right {
    margin-bottom: 10px;
}

@media screen and (min-width: 576px) {
    #image-line {
        width: 116%;
        margin-left: -8%;
    }

    #line-img-middle2 {
        width: calc(100% - 3.2px) !important;
        min-width: calc(100% - 3.3px);
        float: right;
        -webkit-clip-path: polygon(0 0, 20% 100%, 100% 100%, 80% 0);
        clip-path: polygon(0 0, 20% 100%, 100% 100%, 80% 0);
    }

    #line-img-left {
        width: calc(100% - 3.3px) !important;
        /*min-width: calc(100% - 3.2px);*/
        float: left;
        -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 80% 0);
        clip-path: polygon(0 0, 0 100%, 100% 100%, 80% 0);
    }

    #line-img-right {
        width: calc(100% - 3.2px) !important;
        /*min-width: calc(100% - 3.3px);*/
        float: right;
        -webkit-clip-path: polygon(0 0, 20% 100%, 100% 100%, 100% 0);
        clip-path: polygon(0 0, 20% 100%, 100% 100%, 100% 0);
    }

    #div-left {
        right: calc(-7.2% + 2.5px);
        margin-bottom: 0;
        -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 80% 0);
        clip-path: polygon(0 0, 0 100%, 100% 100%, 80% 0);
        background-color: black;
    }

    #div-middle {
        margin-bottom: 0;
        -webkit-clip-path: polygon(0 0, 20% 100%, 100% 100%, 80% 0);
        clip-path: polygon(0 0, 20% 100%, 100% 100%, 80% 0);
        background-color: black;
    }

    #div-right {
        left: calc(-7.2% + 2.5px);
        margin-bottom: 0;
        -webkit-clip-path: polygon(0 0, 20% 100%, 100% 100%, 100% 0);
        clip-path: polygon(0 0, 20% 100%, 100% 100%, 100% 0);
        background-color: black;
    }
}

@media screen and (min-width: 768px) {
    .navbar {
        font-weight: 700;
        font-size: 1.5rem;
    }
    .navbar-collapse {
        border-style: solid;
        border-width: 2px;
    }
    #div-left {
        right: calc(-7% + 2.5px);
    }

    #div-right {
        left: calc(-7% + 2.5px);
    }
}

.frame-type-textmedia .embed {
  background-color: 222222;
  opacity: 0;
  transition: all .65s ease-in-out;
}

.frame-type-textmedia .gallery-item .video {
  background-color: #CCCCCC; 
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0,0,0,0.5);
  transition: all .25s ease-in-out;
}


.frame-type-textmedia h2 {
  color: transparent;
  text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.frame-type-textmedia2:nth-of-type(odd) {
  transform: translateX(-90%);
}

.frame-type-textmedia2:nth-of-type(even) {
  transform: translateX(90%);
}

.frame-type-textmedia.visible .gallery-item .video {
  text-shadow: 0 0 0 rgba(0,0,0,0);
  background-color: #ffffff; 
}

.frame-type-textmedia.visible .embed {
  transform:translateX(0);
  opacity: 1;
}

.frame-type-textmedia.visible h2 {
  color: #212529;
  text-shadow: 0 0 0 rgba(0,0,0,0);
  transition: all .35s ease-in-out;
}

.viewer-top-bl {
  visibility: hidden;
}