/* MyPlugin - Custom Login Styles */

/* body.login { background-color: rgba(255, 113, 0, 0.73); } */
body, html {
    overflow-x: hidden;
}
body {
    font-family: 'Source sans pro', sans-serif;
}

body.login .custom-message {
    text-align: center;
}

.login h1 a {
    background-image: url('/wp-content/plugins/dooley-plugin/includes/img/dooleyStamp.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 150px;
    width: 150px;
    background-size: 150px;
    background-repeat: no-repeat;
    margin-top: -25px;
    position: relative;
    z-index: 99;
}


#login .logo-bg {
    width: 100%;
    height: 50px;
    background: rgb(0, 58, 93);
    background: linear-gradient(180deg, rgba(0, 58, 93, 1) 0%, rgba(11, 25, 38, 1) 100%);
    position: relative;
    z-index: 9;
}

.login-inner {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    width: 75%;
    margin: 0 auto;
    box-shadow: 1px 1px 10px 9px #0000001f;
}
.login #nav, .login #backtoblog {
    padding: 0;
    margin: 35px 0 0;
}
#login-left {
    background: rgb(0, 58, 93);
    background: linear-gradient(180deg, rgba(0, 58, 93, 1) 0%, rgba(11, 25, 38, 1) 100%);
    width: 50%;
    padding: 35px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}

#login-left h2,
#login-left h3 {
    color: #fff;
    font-family: 'Source sans pro', sans-serif;
}

#login-left h2 {
    font-size: 2.5em;
}

#login-left h3 {
    font-size: 1.5em;
    margin-bottom: 20px;
}

#login-left a {
    color: #F67400;
    text-decoration: none;
    font-size: 1.5em;
    display: block;
    margin-bottom: 20px;
    font-weight: 800;
}
#login-left a:last-of-type {
    margin-bottom: 75px;
}


#login {
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

.login form {
    width: 50%;
    margin: 0;
    border: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.sep {
    border-bottom: 2px solid #F67400;
    height: 5px;
    display: block;
    max-width: 20%;
    margin: 15px 0;
    width: 20%;
}

.orange {
    width: calc(16px + (2 * (8px)) + 2px + 0px + 0px);
    height: calc(16px + (2 * (8px)) + 2px + 0px + 0px);
    border-radius: 50%;
    background-color: #f67400;
    box-shadow: inset 0.2em -0.2em #f78723 !important;
    position: relative;
    top: 0.9em;
    left: 0.3em;
    margin-bottom: 20px;
}

.orange:before {
    content: "";
    position: absolute;
    top: -0.6em;
    left: 1.9em;
    height: 0;
    width: 0;
    border: 7.5px solid #506B69;
    border-radius: 50% 0 50% 0;
    border-bottom-color: #3D5B58;
    border-right-color: #3D5B58;
}

p#orangePun {
    color: white;
    display: block;
    position: relative;
    font-style: italic;
}
.orange:before {
    animation: bellshake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    backface-visibility: hidden;
    transform-origin: bottom;
    animation-iteration-count: infinite;
    animation-duration: 5s;
}


@media only screen and (max-width: 800px) {
    .login-inner {
        flex-direction: column;
        width: 100%;
    }
    #login-left, .login form {
        width: 94%;
        padding: 20px;
    }
}

@keyframes bellshake {
    0% {
      transform: rotate(0);
    }
    15% {
      transform: rotate(5deg);
    }
    30% {
      transform: rotate(-5deg);
    }
    45% {
      transform: rotate(4deg);
    }
    60% {
      transform: rotate(-4deg);
    }
    75% {
      transform: rotate(2deg);
    }
    85% {
      transform: rotate(-2deg);
    }
    92% {
      transform: rotate(1deg);
    }
    100% {
      transform: rotate(0);
    }
  }