/* 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;
}

.nav-img-responsive {
    height: auto;
    width: auto;
    max-height: 50px;
    max-width: 165px;
}

/* Provide sufficient contrast against white background */
a {
    color: black;
}

.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 {
    position: fixed;
    min-height: 100%;
    min-width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        max-width: 100%;
        overflow-x: hidden;
        font-size: 14px;
    }
}

.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
-------------------------------------------------- */
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 */
}

/* Background Photo
-------------------------------------------------- */
.bg-photo {
    z-index: -9;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url(../assets/img/bg.jpg);
    opacity: 35%;
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

@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;
    }
}

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

    to {
        opacity: 1;
    }
}

/* Index Page
-------------------------------------------------- */

.welcome_wrapper {
    padding: 10px;
    text-align: center;
    position: fixed;
    top: 20%;
}

.welcome-img-responsive {
    height: auto;
    width: auto;
    max-height: 72px;
    max-width: 185px;
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 2s; /* Firefox < 16 */
    -o-animation: fadein 2s; /* Opera < 12.1 */
    animation: fadein 2s;
}

.welcome_item {
    visibility: hidden;
    display: none;
}

h2 {
    font-size: 50px;
    margin: 0;
    color: #000000;
    text-align: left;
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 2s; /* Firefox < 16 */
    -o-animation: fadein 2s; /* Opera < 12.1 */
    animation: fadein 2s;
}

@media (max-width: 767px)
{
    .about {
        padding-top: 40% !important;
        width: 300px;
        height: auto;
        max-height: 90vh;
        overflow: auto;
     }
}

@media (min-width: 768px) and (max-width: 1024px) 
{
    .about {
        padding-top: 20% !important;
        width: 500px;
        height: auto;
        max-height: 90vh;
        overflow: auto;
     }
}

.about {
    padding-top: 10%; 
    padding-left: 4%;
 }

welcome_div {
    padding-top: 25px;
    font-size: 16px;
    height: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: flex-end;
    font-weight: bold;
    color: #444444;
    -webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 3s; /* Firefox < 16 */
    -o-animation: fadein 3s; /* Opera < 12.1 */
    animation: fadein 3s;
}

    welcome_div:after {
        content: "";
        width: 10px;
        height: 4px;
        display: block;
        background: darkred;
        color: #1b6ec2;
        margin-bottom: 4px;
        margin-left: 2px;
        animation-duration: 350ms;
        animation-name: fade;
        animation-direction: alternate;
        animation-iteration-count: infinite;
    }


@keyframes fade {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}



/* Socials
-------------------------------------------------- */
.social-icons {
    display: block;
    text-align: center;
  }
  .icon-link {
    position: relative;
    width: 20px;
    height: 20px;
    margin: 0 6px;
    display: inline-block;
  }
  .icon {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height: 100%;
    fill: #000;
    -webkit-animation: fadein 6s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 6s; /* Firefox < 16 */
    -o-animation: fadein 6s; /* Opera < 12.1 */
    animation: fadein 6s;
  }
  .icon-hover {
    position: relative;
    display: block;
    width:100%;
    height: 100%;
  }

svg.icon.icon-twitter:hover {
    fill: deepskyblue;
  }

svg.icon.icon-linkedin:hover {
fill: #1b6ec2;
}

svg.icon.icon-facebook:hover {
fill: blue;
}

svg.icon.icon-instagram:hover {
    fill: #1b6ec2;
}

svg.icon.icon-whatsapp:hover {
    fill: green;
}

svg.icon.icon-github:hover {
    fill: grey;
  }


/* Badges
-------------------------------------------------- */

@keyframes fadeinbadge {
    from {
        opacity: 0;
    }

    to {
        opacity: 0.7;
    }
}

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

    to {
        opacity: 0.7;
    }
}

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

    to {
        opacity: 0.7;
    }
}

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

    to {
        opacity: 0.7;
    }
}

.badges {
    margin-top: 25%;
}

.badge-img-responsive {
    height: auto;
    width: auto;
    max-height: 120px;
    max-width: 185px;
    -webkit-animation: fadeinbadge 4s;
    -moz-animation: fadeinbadge 4s;
    -o-animation: fadeinbadge 4s;
    margin-top: 10%;
    opacity: 70%;
    animation: fadeinbadge 4s;
}

/* Nav
-------------------------------------------------- */

#menuToggle {
    display: block;
    position: relative;
    top: 50px;
    left: 50px;
    z-index: 1;
    -webkit-user-select: none;
    user-select: none;
}

    #menuToggle a {
        text-decoration: none;
        color: #232323;
        transition: color 0.3s ease;
    }

        #menuToggle a:hover {
            color: deepskyblue;
        }


    #menuToggle input {
        display: block;
        width: 40px;
        height: 32px;
        position: absolute;
        top: -7px;
        left: -5px;
        cursor: pointer;
        opacity: 0; /* hide this */
        z-index: 2; /* and place it over the hamburger */
        -webkit-touch-callout: none;
    }

    /*
 * Just a quick hamburger
 */
    #menuToggle span {
        display: block;
        width: 33px;
        height: 4px;
        margin-bottom: 5px;
        position: relative;
        background: #222222;
        border-radius: 3px;
        z-index: 1;
        transform-origin: 4px 0px;
        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease;
    }

        #menuToggle span:first-child {
            transform-origin: 0% 0%;
        }

        #menuToggle span:nth-last-child(2) {
            transform-origin: 0% 100%;
        }

    /* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
    #menuToggle input:checked ~ span {
        opacity: 1;
        transform: rotate(45deg) translate(-2px, -1px);
        background: #232323;
    }

        /*
 * But let's hide the middle one.
 */
        #menuToggle input:checked ~ span:nth-last-child(3) {
            opacity: 0;
            transform: rotate(0deg) scale(0.2, 0.2);
        }

        /*
 * Ohyeah and the last one should go the other direction
 */
        #menuToggle input:checked ~ span:nth-last-child(2) {
            transform: rotate(-45deg) translate(0, -1px);
        }

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu {
    position: absolute;
    width: 300px;
    height: 103vh;
    margin: -100px 0 0 -50px;
    padding: 50px;
    padding-top: 125px;
    background: #ededed;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    /* to stop flickering of text in safari */
    transform-origin: 0% 0%;
    transform: translate(-100%, 0);
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

    #menu li {
        padding: 10px 0;
        font-size: 22px;
    }

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul {
    transform: none;
}
 


/* Contact Me Page Styling
-------------------------------------------------- */

.contact_wrapper {
    padding: 10px;
    text-align: center;
    position: fixed;
    top: 20%;
}

.contact {
    top: 20%;
    margin-top: 15%;
    margin-right: 20%;
    margin-left: 5%;
}

label {
    display: inline-block;
    margin-bottom: .5rem;
    min-width: 80%;
}

.form-control {
    background-color: rgba(255, 255, 255, 0.5)
}

button {
    min-width: 40%;
}

label {
    text-align: left;
}

@media (max-width: 767px)
{
    label {
        display: inline-block;
        margin-bottom: .5rem;
        min-width: 100%;
    }

    .contact {
        top: 20%;
        margin-top: 20%;
        margin-right: 5%;
        margin-left: 5%;
    }
}

@media (min-width: 768px) and (max-width: 1024px) 
{
    label {
        display: inline-block;
        margin-bottom: .5rem;
        min-width: 80%;
    }

    .contact {
        top: 20%;
        margin-top: 20%;
        margin-right: 10%;
        margin-left: 5%;
    }
}



/* Calendar Page Styling
-------------------------------------------------- */

.calendar {
    margin-top: 10%;
}

.calendar html {
    max-width: 100%;
    overflow-x: scroll;
    font-size: 14px;
}

#calendar {
    max-width: 900px;
    margin: 60px auto;
  }

@media (max-width: 767px)
{
    label {
        display: inline-block;
        margin-bottom: .5rem;
        min-width: 100%;
    }

    .calendar {
        margin-top: 20%;
        margin-left: 3%;
        margin-right: 3%;
    }
}


@media (min-width: 768px) and (max-width: 1024px) 
{
    label {
        display: inline-block;
        margin-bottom: .5rem;
        min-width: 80%;
    }

    .calendar {
        margin-top: 10%;
    }
}

@media (min-width: 576px)
{
    label {
        display: inline-block;
        margin-bottom: .5rem;
        min-width: 80%;
    }

    .calendar {
        margin-top: 10%;
    }
}

/* UnderConstruction Page Styling
-------------------------------------------------- */
@-webkit-keyframes swinging{
    0%{-webkit-transform: rotate(10deg);}
    50%{-webkit-transform: rotate(-5deg)}
    100%{-webkit-transform: rotate(10deg);}
}
 
@keyframes swinging{
    0%{transform: rotate(10deg);}
    50%{transform: rotate(-5deg)}
    100%{transform: rotate(10deg);}
}
 

@-webkit-keyframes sleeping {
    0%{ opacity:0;}
    50%{ opacity:1;}
    100%{ opacity:0;}
}
 
@keyframes sleeping {
    0%{ opacity:0;}
    50%{ opacity:1;}
    100%{ opacity:0;}
}
 
#swinger {
    -webkit-transform-origin: top center;
    transform-origin: top center;
    transform-box: fill-box;
    -webkit-animation: swinging 3.5s ease-in-out forwards infinite;
    animation: swinging 3.5s ease-in-out forwards infinite;
}

#zone {
    opacity:0;
    -webkit-animation: sleeping 3.5s ease-in-out forwards infinite;
    animation: sleeping 3.5s ease-in-out forwards infinite;
}

#ztwo {
    opacity:0;
    -webkit-animation: sleeping 3.5s ease-in-out forwards infinite;
    animation: sleeping 3.5s ease-in-out forwards infinite;
    animation-delay:0.4s;
    -website-animation-delay:0.4s;
}

#zthree {
    opacity:0;
    -webkit-animation: sleeping 3.5s ease-in-out forwards infinite;
    animation: sleeping 3.5s ease-in-out forwards infinite;
    animation-delay:0.7s;
    -website-animation-delay:0.7s;
}

#zfour {
    opacity:0;
    -webkit-animation: sleeping 3.5s ease-in-out forwards infinite;
    animation: sleeping 3.5s ease-in-out forwards infinite;
    animation-delay:1s;
    -website-animation-delay:1s;
}

#zfive {
    opacity:0;
    -webkit-animation: sleeping 3.5s ease-in-out forwards infinite;
    animation: sleeping 3.5s ease-in-out forwards infinite;
    animation-delay:1.3s;
    -website-animation-delay:1.3s;
}

.container {
  -webkit-animation: fadein 4s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 4s; /* Firefox < 16 */
  -o-animation: fadein 4s; /* Opera < 12.1 */
  animation: fadein 4s;
}

svg {
  max-width:1000px;
}