/*
Theme Name: Frey + Aichele
Author: Markus Köhler
*/


.show {
    display: block;
}
/* Flash of unstyled content */
  

/* animation */   

    #anim{
        width: 100vw;
        height: 80vh;
        background-color: white;
      }

/* bootstrap */   
    .container {
        max-width: 695px;
    }
    .col-12 {
        padding-left: 5px;
        padding-right: 5px;
    }
    .col-md-9 {
        padding-left: 5px;
        padding-right: 5px;
        height: 204px;
    }
    .col-md-3 {
        padding-left: 5px;
        padding-right: 5px;
    }

/* slider */   
    .slide > img {
        max-width: 695px;
        width: 100%;
        height: auto;
    }
    #slide {
        max-width: 695px;
        width: 100%;
        height: auto;
        padding: 0px 5px;
    }

/* HTML */
    body {
        font-family: 'Source Sans Pro', sans-serif;
        font-size: 1em;
        color: #ffffff;
        font-weight: 300;
        margin: 0 0.5rem;
    }
    hr {
        border-bottom: 1px solid gray;
        margin: 8px 0px;
        width: 100%;
    }
    h1 {
        margin-top: 0.8em;
        margin-bottom: 1em;
        font-weight: 300;
        font-size: 2em;
    }
    p {
        margin: 16px 0px;
    }

    .vorschau > a > p {
        margin: 0px 0px 16px 0px;
        
    }
    .beschreibung {
        margin-bottom: 32px;
    }
/* Header */
    .topline {
        height: 0.2em;
        position: relative;
        background-color: #64666B;
        width: 100%;
        margin: 2em 0 0 0;
    }
    #logo {
        height: 114px;
        margin: 0;
        margin-left: auto;
    }

/* Navigation */
    
    .navbar {
        padding: 50px 0px 0px 0px;
    }
    ul {
        list-style: none;
        padding-left: 0px;
        margin: 0px;
    }
    li {
        display: inline-block;
    }
    a {
        text-decoration: none;
        color: #64666B;
        outline: 0;
    }
    a:hover {
        text-decoration: none;
        color: #88acd8;
        opacity: .6;
    }

    div.navbar ul {
        list-style-type: none;
        list-style: none;
        list-style-image: none;
        padding: 0;
    }
    
    .menu-item {
        position: relative;
        display: inline-block;
    }
    .sub-menu {
        position: absolute;
        display: none;
    }
    .menu-item:hover .sub-menu {display: block;}

    .sub-menu a {
        color: black;
        text-decoration: none;
        display: block;
        font-size: .8em;
    }
    .sub-menu a:hover {
        color: #88acd8;
    }
    .menu-item-has-children {
        color: #64666B;
    }
    .menu-item-has-children>a:hover {
        opacity: 1;
        cursor: default;
        color: #64666B;
    }

/* main */
/* projekt */
#no-padding {
    padding: 0px;
}
.bx-pager.bx-default-pager {
    text-align: right;
    position: relative;
    top: -1em;
}

.middle-line {
    height: 0.2em;
    position: relative;
    overflow: hidden;
    width: 100%;
    background-color: #D6D7D8;
}
.container a {
    color: #C3D6ED;
}
.container a:hover {
    color: #88acd8;
    opacity: 1;
}
.page-content {
    width: 100%;
}
td {
    width: 300px;;
}
/* Project Übersicht */
.vorschau {
    padding: 0px 4px;
    margin-bottom: 5px;
}
.vorschau > a > p {
    color: white;
    font-size: .94em;
}
.vorschau img {
    min-width: 100%;
    max-width: 100%;
    height: auto;
}

/* Project Nav */
    .project-nav{
        display: flex;
        justify-content: space-between;
        vertical-align: middle;
    }
    .next > a{
        padding-top: 14px; 
    }

/* Filmstreifen */
.filmstreifen > img {
    margin-bottom: 1em;
}

/*slider*/
#filmstreifen {
    width: 100%;
}

#filmstreifen > .slide > img{
    padding: 0px;
}

#pager {
    display: flex;
    justify-content: right;
    float: right;
}
.bx-pager.bx-default-pager {
    text-align: center;
    position: relative;
    top: -1em;
    background-color: #808080;
    width: 50px;
}
a.bx-prev{
    left: 0;
    z-index: 1000;
    position: absolute;
    width: 50%;
    top: 0px;
    bottom: 0;
    cursor: url('https://www.frey-aichele.de/wp-content/themes/FA/media/prev.png'), pointer;
}
a.bx-next{
    right: 0;
    z-index: 1000;
    position: absolute;
    width: 50%;
    top: 0px;
    bottom: 0;
    cursor: url('https://www.frey-aichele.de/wp-content/themes/FA/media/next.png'), pointer;
}
img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: auto;
}
#slider {
    width: 100%
}

/* Video */
    video {
        width: 100%;
    }
   
    .btn-wrapper {
        z-index: -1;
        position: relative;
        bottom: 30px;
    }
    button {
        background-color: #C3D6ED;
        border: none;
    }
    button:active {
        outline: none;
        border: none;
    }
    button:focus {outline:0;}

    #video-wrapper:hover~.btn-wrapper {
        z-index: 2;
    }
    .btn-wrapper:hover {
        z-index: 2;
    }
/* Footer */
#menu-footer-menu {
    justify-content: right;
    display: flex;
    margin-bottom: 1em;
    float: right;
}
.gray {
    background-color: #64666B;
    padding-top: 1em;
    min-height: 35vh;
}
.footer-bar a {
    padding-left: 30px;
    color: #C3D6ED;
}

.mobile-vis {
    display: none;
}
.mobile-inv {
    display: block;
}
/* TopNav */
    .navbar a {
        color: #64666B;
        padding-right: 30px;
    }
/* Responsive design */
@media only screen
and (max-width: 720px) {
    body {
        margin:0px;
    }
    .col-md-9 {
        height: 228px;
    }
    #no-padding {
        padding: 0px;
    }
    .navbar {
        width: 200px;
        padding-top: 20px;
    }
    #half {
        width: 50vw;
    }
    .menu-item {
        position: relative;
        display: block;
    }
    .sub-menu {
        position: relative;
        left: 40px;
    }
    #slide {
        padding: 0px;
    }
    #anim {
        display: none;
    }
    .mobile-vis {
        display: block;
    }
    .mobile-inv {
        display: none;
    }
    
}