/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
  color: #0366d6;
}

.btn-primary {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.border-top {
  border-top: 1px solid #e5e5e5;
}
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}

body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px; /* Vertically center the text there */
}

.bg {
    background-image: url('../images/main1.png');
    height: 100%;
    background-position: center;
    background-repeat: repeat;
    background-size: cover;
}

.mainImage {
    width: 100%;
    border-style: solid;
    border-color: darkgoldenrod;
}

.zdcontainer {
    display: flex;
    width: 100%;
    padding: 4% 2%;
    box-sizing: border-box;
    height: 100vh;
}

.zdbox {
    flex: 1;
    overflow: hidden;
    transition: .5s;
    margin: 0 2%;
    box-shadow: 0 20px 30px rgba(0,0,0,.1);
    line-height: 0;
}

    .zdbox > img {
        width: 200%;
        height: calc(100% - 10vh);
        object-fit: cover;
        transition: .5s;
    }

    .zdbox > span {
        font-size: 3.8vh;
        display: block;
        text-align: center;
        height: 10vh;
        line-height: 2.6;
    }

    .zdbox:hover {
        flex: 1 1 50%;
    }

    .zdbox:hover > img {
        width: 100%;
        height: 100%;
    }

    
.hello {
    opacity: 1 !important;
}

.full {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

    .full .content {
        background-color: rgba(0,0,0,0.75) !important;
        height: 100%;
        width: 100%;
        display: grid;
    }

        .full .content img {
            left: 50%;
            transform: translate3d(0, 0, 0);
            animation: zoomin 1s ease;
            max-width: 100%;
            max-height: 100%;
            margin: auto;
        }

.byebye {
    opacity: 0;
}

    .byebye:hover {
        transform: scale(0.2) !important;
    }

.gallery {
    /*display: grid;*/
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    /*grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));*/
    grid-auto-rows: 8px;
    column-count: 2;
}

    .gallery img {
        max-width: 100%;
        border-radius: 8px;
        box-shadow: 0 0 16px #333;
        transition: all 1.5s ease;
    }

        .gallery img:hover {
            box-shadow: 0 0 32px #333;
        }

    .gallery .content {
        padding: 10px;
    }

    .gallery .gallery-item {
        transition: grid-row-start 300ms linear;
        transition: transform 300ms ease;
        transition: all 0.5s ease;
        cursor: pointer;
    }

        .gallery .gallery-item:hover {
            transform: scale(1.025);
        }

.bioImg {
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 0 16px #333;
    transition: all 1.5s ease;
    padding: 1px;
    /*border: 1px solid;*/
    background-color: gray;
    margin-right: 40px;
}
.bioText {
    font-size: 24px;
    margin-top: 30px;
}


.tabs {
    display: block;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0;
    overflow: hidden;
    margin-bottom: 34px;
}

    .tabs [class^="tab"] label,
    .tabs [class*=" tab"] label {
        /*color: #efedef;*/
        cursor: pointer;
        display: block;
        font-size: 24px;
        font-weight: 300;
        line-height: 1em;
        padding: 1rem 0;
        text-align: center;
        font-family: 'Cormorant';
    }

    .tabs [class^="tab"] [type="radio"],
    .tabs [class*=" tab"] [type="radio"] {
        border-bottom: 1px solid rgba(239, 237, 239, 0.5);
        cursor: pointer;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        display: block;
        width: 100%;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

        /*.tabs [class^="tab"] [type="radio"]:hover, */
        .tabs [class^="tab"] [type="radio"]:focus,
        /* .tabs [class*=" tab"] [type="radio"]:hover,*/
        .tabs [class*=" tab"] [type="radio"]:focus {
            border-bottom: 1px solid #fd264f;
        }

        .tabs [class^="tab"] [type="radio"]:checked,
        .tabs [class*=" tab"] [type="radio"]:checked {
            border-bottom: 5px groove #ffc107;
        }

            .tabs [class^="tab"] [type="radio"]:checked + div,
            .tabs [class*=" tab"] [type="radio"]:checked + div {
                opacity: 1;
            }

        .tabs [class^="tab"] [type="radio"] + div,
        .tabs [class*=" tab"] [type="radio"] + div {
            display: block;
            opacity: 0;
            padding: 2rem 0;
            width: 90%;
            -webkit-transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }

    .tabs .tab-3 {
        width: 33%;
    }

        .tabs .tab-3 [type="radio"] + div {
            width: 200%;
            margin-left: 200%;
        }

        .tabs .tab-3 [type="radio"]:checked + div {
            margin-left: 0;
        }

        .tabs .tab-3:last-child [type="radio"] + div {
            margin-left: 100%;
        }

        .tabs .tab-3:last-child [type="radio"]:checked + div {
            margin-left: -100%;
        }



@media (max-width: 600px) {
    .gallery {
        grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
    }

    .bioImg {
        max-width: 50%;
    }

    .bioText {
        font-size: 16px;
    }

    .tabs [class^="tab"] label,
    .tabs [class*=" tab"] label {
        font-size: 16px;
    }
}

@media (max-width: 400px) {
    .gallery {
        grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
    }

    .bioImg {
        max-width: 50%;
    }

    .bioText {
        font-size: 16px;
    }

    .tabs [class^="tab"] label,
    .tabs [class*=" tab"] label {
        font-size: 16px;
    }
}

@-moz-keyframes zoomin {
    0% {
        max-width: 50%;
        transform: rotate(-30deg);
        filter: blur(4px);
    }

    30% {
        filter: blur(4px);
        transform: rotate(-80deg);
    }

    70% {
        max-width: 50%;
        transform: rotate(45deg);
    }

    100% {
        max-width: 100%;
        transform: rotate(0deg);
    }
}

@-webkit-keyframes zoomin {
    0% {
        max-width: 50%;
        transform: rotate(-30deg);
        filter: blur(4px);
    }

    30% {
        filter: blur(4px);
        transform: rotate(-80deg);
    }

    70% {
        max-width: 50%;
        transform: rotate(45deg);
    }

    100% {
        max-width: 100%;
        transform: rotate(0deg);
    }
}

@-o-keyframes zoomin {
    0% {
        max-width: 50%;
        transform: rotate(-30deg);
        filter: blur(4px);
    }

    30% {
        filter: blur(4px);
        transform: rotate(-80deg);
    }

    70% {
        max-width: 50%;
        transform: rotate(45deg);
    }

    100% {
        max-width: 100%;
        transform: rotate(0deg);
    }
}

@keyframes zoomin {
    0% {
        max-width: 50%;
        transform: rotate(-30deg);
        filter: blur(4px);
    }

    30% {
        filter: blur(4px);
        transform: rotate(-80deg);
    }

    70% {
        max-width: 50%;
        transform: rotate(45deg);
    }

    100% {
        max-width: 100%;
        transform: rotate(0deg);
    }
}