/* Bootstrap Overwrite/Extend */

html,
body {
    height: 100%;
}

body {
    /* color: #e8f4ff; */
    color: #006446;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    background-image: url(../img/bg_sky.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

h1,
h2,
h3,
.h1,
.h2,
.h3,
.heading {
    /*font-family: 'Raleway', sans-serif;*/
    font-family: 'TP Hero', sans-serif;
    margin: 0;
    /*color: #e8f4ff;*/
    font-weight: bold;
    color: #00ad21;
}


/*
input, select{
    font-size:20px;
	background-color:#006446;
	color:white;
	width:100%;
}

select{
    font-size:20px;
	background-color:#006446;
	width:100%;
}

button{
    font-size:20px;
	background-color:green;
}
*/

body {
    background-position: center top;
    background-repeat: repeat-x;
    background-size: cover;
    font-family: tpHero, Verdana;
    margin: 0px;
}

a:hover,
a:active,
a:focus,
img {
    border-style: none;
    outline: 0;
}

.shadow {
    box-shadow: 3px 2px 10px #4d4d4d;
}

.signEditor {
    position: absolute;
    left: 40px;
    top: 40px;
    /* width: 580px; */
}


/* https://codepen.io/dhanishgajjar/pen/NgQqVj */

.button {
    display: block;
    width: 320px;
    max-width: 100%;
    margin: 0 auto;
    margin-bottom: 0;
    overflow: hidden;
    position: relative;
    transform: translatez(0);
    text-decoration: none;
    box-sizing: border-box;
    font-size: 24px;
    font-weight: normal;
    box-shadow: 0 9px 18px rgba(0, 0, 0, 0.2);
}

.publishBtn {
    font-family: 'Raleway', sans-serif;
    text-align: center;
    border-radius: 50px;
    padding: 26px;
    animation: glow 800ms ease-out infinite alternate;
    /*background: #222922;*/
    background: #222922;
    background: linear-gradient(#333933, #222922);
    border-color: #393;
    box-shadow: 0 0 5px rgba(0, 255, 0, .2), inset 0 0 5px rgba(0, 255, 0, .1), 0 2px 0 #000;
    color: #efe;
    outline: none;
}


    /*
.publishBtn:hover {
    color: white;
    background: #BD3381;
}
*/

.publishBtn:focus {
    color: white;
    background: #00ae4c;
    transition: all 0.2s ease-out 0s;
}

.publishBtn:active {
    /* background-color: #3e8e41;
    box-shadow: 0 5px #666; */
    color: white;
    transform: translateY(4px);
}

.gradient {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    bottom: auto;
    margin: auto;
    z-index: -1;
    background: radial-gradient(90px circle at top center, rgba(136, 238, 77, 0.4) 20%, rgba(255, 255, 255, 0));
    transition: all 0s ease-out 0s;
    transform: translatex(-140px);
    animation: 18s linear 0s infinite move;
}

@keyframes move {
    0% {
        transform: translatex(-140px);
    }
    25% {
        transform: translatex(140px);
        opacity: 0.3;
    }
    50% {
        transform: translatex(140px);
        opacity: 1;
        background: radial-gradient(90px circle at bottom center, rgba(136, 238, 77, 0.4) 20%, rgba(255, 255, 255, 0));
    }
    75% {
        transform: translatex(-140px);
        opacity: 0.3;
    }
    100% {
        opacity: 1;
        transform: translatex(-140px);
        background: radial-gradient(90px circle at top center, rgba(136, 238, 77, 0.4) 20%, rgba(255, 255, 255, 0));
    }
}


/* Box glow outline */

input,
select {
    /*-webkit-appearance: none;*/
    background: #222;
    /*/background: linear-gradient(#333, #222);    */
    border: 1px solid #444;
    border-radius: 5px 0 0 5px;
    /*/box-shadow: 0 2px 0 #000;    */
    color: #e4e4e4;
    /*/display: block;    */
    float: left;
    /*/font-family: 'Cabin', helvetica, arial, sans-serif;    */
    font-family: 'Raleway', sans-serif;
    font-size: 24px;
    font-weight: 400;
    height: 40px;
    text-shadow: 0 -1px 0 #000;
    width: 100%;
}

input:disabled {
    /*/color: #a1a1a1;    */
    /*font-weight: 200;*/
    background: rgba(34, 34, 34, 0.34);
}

option {
    color: black;
}

.ie input {
    line-height: 40px;
}

input::-webkit-input-placeholder {
    color: #d1d1d1;
}

input:-moz-placeholder {
    color: #d1d1d1;
}

input:focus {
    animation: glow 800ms ease-out infinite alternate;
    background: #222922;
    background: linear-gradient(#333933, #222922);
    border-color: #393;
    box-shadow: 0 0 5px rgba(0, 255, 0, .2), inset 0 0 5px rgba(0, 255, 0, .1), 0 2px 0 #000;
    color: #efe;
    outline: none;
}

select:focus::-webkit-input-placeholder {
    color: #efe;
}

select:focus:-moz-placeholder {
    color: #efe;
}

.ie select {
    line-height: 40px;
}

select::-webkit-input-placeholder {
    color: #d1d1d1;
}

select:-moz-placeholder {
    color: #d1d1d1;
}

select:focus {
    animation: glow 800ms ease-out infinite alternate;
    background: #222922;
    background: linear-gradient(#333933, #222922);
    border-color: #393;
    box-shadow: 0 0 5px rgba(0, 255, 0, .2), inset 0 0 5px rgba(0, 255, 0, .1), 0 2px 0 #000;
    color: #efe;
    outline: none;
}

select:focus::-webkit-input-placeholder {
    color: #efe;
}

select:focus:-moz-placeholder {
    color: #efe;
}

@keyframes glow {
    0% {
        border-color: #393;
        box-shadow: 0 0 5px rgba(0, 255, 0, .2), inset 0 0 5px rgba(0, 255, 0, .1), 0 2px 0 #000;
    }
    100% {
        border-color: #6f6;
        box-shadow: 0 0 20px rgba(0, 255, 0, .6), inset 0 0 10px rgba(0, 255, 0, .4), 0 2px 0 #000;
    }
}


/* Hide input number spinner */


/*/ Chrome, Safari, Edge, Opera     */

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


/*/ Firefox     */

input[type=number] {
    -moz-appearance: textfield;
}

a {
    color: #2ECC71;
    font-weight: 500;
    -webkit-transition: color .15s ease-out;
    transition: color .15s ease-out;
}

    a:hover,
    a:focus {
        color: #00ff6a;
        text-decoration: none;
    }

    a.link-sf {
        position: relative;
    }

        a.link-sf:before {
            position: absolute;
            top: -5px;
            right: -2px;
            bottom: -5px;
            left: -2px;
            content: "";
            background-color: rgba(255, 255, 255, .15);
            visibility: hidden;
            -webkit-transform: scaleY(2);
            -ms-transform: scaleY(2);
            transform: scaleY(2);
            -webkit-transition: -webkit-transform .12s ease-out;
            transition: transform .12s ease-out;
        }

        a.link-sf:hover,
        a.link-sf:focus {
            color: #fff;
        }

            a.link-sf:hover:before,
            a.link-sf:focus:before {
                visibility: visible;
                -webkit-transform: scaleY(1);
                -ms-transform: scaleY(1);
                transform: scaleY(1);
            }

        a.link-sf:active:before {
            -webkit-transform: scaleY(1.2);
            -ms-transform: scaleY(1.2);
            transform: scaleY(1.2);
        }

.text-sf {
    color: #2ecc71;
}

.text-crystal {
    color: rgba(255, 255, 255, .25);
}

.text-white-op {
    color: rgba(255, 255, 255, .75);
}

.text-label {
    /*/color: #2ecc71;    */
    color: #62d0f0;
    padding-top: 8px;
}

.text-success {
    color: #2ecc71;
    /*/color: #62D0F0;    */
}

.text-danger {
    color: #e74c3c;
}

.btn.btn-xl {
    padding: 14px 12px;
}

.btn.btn-sf {
    text-align: left;
    font-weight: 500;
    font-size: 14px;
    color: rgba(255, 255, 255, .75);
    border: 2px solid rgba(255, 255, 255, .25);
    border-left-width: 4px;
    border-right-width: 4px;
    background: transparent;
}

    .btn.btn-sf:hover,
    .btn.btn-sf:focus {
        color: rgba(255, 255, 255, 1);
        border-color: rgba(255, 255, 255, 1);
        outline: 0;
    }

    .btn.btn-sf:active {
        color: #fff;
        border-color: #fff;
        background: rgba(255, 255, 255, .15);
    }

.progress {
    margin-bottom: 10px;
    background: rgba(0, 0, 0, .25);
    height: 10px;
}

.progress-bar-sf {
    background-color: rgba(98, 208, 240, .1);
}


/* Main Layout */

#page-container {
    min-width: 320px;
}

    #page-container:before {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        content: '';
        z-index: -1;
    }

    #page-container.modern-sf:before {
        background-color: rgba(0, 64, 46, .75);
    }

#page-header {
    padding: 10px 10px 5px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

#page-main {
    /* top right bottom left */
    padding: 5px 3% 1px;
}


/* Blocks */

.block {
    background-color: rgba(0, 0, 0, .15);
    border-left: 4px solid rgba(255, 255, 255, .1);
}

.block-header {
    padding: 5px 5px 5px;
}

    .block-header:before,
    .block-header:after {
        content: " ";
        display: table;
    }

    .block-header:after {
        clear: both;
    }

.block-title {
    font-size: 24px;
    font-weight: 500;
    font-family: 'Raleway', sans-serif;
    /*/color: rgba(255, 255, 255, .25);    */
    /*/color: rgba(98, 208, 240, .75);    */
    color: rgba(46, 204, 113, 0.75);
    text-transform: uppercase;
    line-height: 1.2;
    /*/color: #e8f4ff;  - off white    */
    /*/2ecc71 - bright green 46, 204, 113    */
    /*/62d0f0 - light blue 98, 208, 240    */
}

.block-content {
    margin: 0 auto;
    padding: 20px 20px 1px;
    max-width: 100%;
    overflow-x: visible;
}

.block-content-center {
    margin: auto;
    padding: 20px 20px 1px;
    max-width: 100%;
    overflow-x: visible;
    width: 500px;
}

.block-content.block-content-full {
    padding-bottom: 20px;
}

.block-content p,
.block-content .push,
.block-content .block {
    margin-bottom: 15px;
}

.footer {
    text-align: center;
    padding: 10px 10px 10px 10px;
    border-radius: 30px;
    background: rgba(199, 199, 199, 0.5)
}


/* Circles */

.circles {
    position: relative;
    left: 50%;
    margin-left: -280px;
    width: 560px;
    height: 560px;
}

.circle {
    position: absolute;
    display: inline-block;
    border-radius: 50%;
}

.circles-main-content {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    font-weight: 200;
    font-size: 48px;
    line-height: normal;
    color: #fff;
}

.circle-0 {
    width: 52%;
    height: 52%;
    top: 24%;
    left: 24%;
    background: rgba(98, 208, 240, .02) url(../img/bg_circle_0.png) center center no-repeat;
    -webkit-animation: spin 80s infinite linear;
    animation: spin 80s infinite linear;
}

.circle-1 {
    width: 56%;
    height: 56%;
    top: 22%;
    left: 22%;
    border: 20px groove rgba(98, 208, 240, .1);
    -webkit-animation: spin-inverse 40s infinite linear;
    animation: spin-inverse 40s infinite linear;
}

.circle-2 {
    width: 64%;
    height: 64%;
    top: 18%;
    left: 18%;
    border: 6px dotted rgba(255, 255, 255, .05);
    -webkit-animation: spin 100s infinite linear;
    animation: spin 100s infinite linear;
}

.circle-3 {
    width: 72%;
    height: 72%;
    top: 14%;
    left: 14%;
    border: 10px double rgba(255, 255, 255, .5);
    -webkit-animation: spin 30s infinite linear;
    animation: spin 30s infinite linear;
}

.circle-4 {
    width: 76%;
    height: 76%;
    top: 12%;
    left: 12%;
    border: 4px dotted rgba(98, 208, 240, .5);
    -webkit-animation: spin-inverse 60s infinite linear;
    animation: spin-inverse 60s infinite linear;
}

.circle-5 {
    width: 94%;
    height: 94%;
    top: 3%;
    left: 3%;
    border: 2px rgba(98, 208, 240, .2);
    border-style: dashed solid dashed solid;
    -webkit-animation: spin 30s infinite linear;
    animation: spin 30s infinite linear;
}

.circle-6 {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: 36px double rgba(255, 255, 255, .03);
    -webkit-animation: spin-inverse 50s infinite linear;
    animation: spin-inverse 50s infinite linear;
}

.circle-over-1,
.circle-over-2,
.circle-over-3 {
    width: 70px;
    height: 70px;
    line-height: 70px;
    color: #2ecc71;
    text-align: center;
    font-family: 'Raleway', sans-serif;
    font-size: 24px;
    font-weight: 400;
    background-color: rgba(98, 208, 240, 0.15);
    /*/#2ecc71;     */
    /*/#62d0f0;    */
    /*/rgba(231, 76, 60, .15);    */
}

.circle-over-2 {
    border: 1px dashed rgba(98, 208, 240, 0.3);
    background-color: transparent;
    -webkit-animation: spin-inverse 15s infinite linear;
    animation: spin-inverse 15s infinite linear;
}

.circle-over-3 {
    border: 3px dashed rgba(98, 208, 240, 0.6);
    background-color: transparent;
    -webkit-animation: spin-inverse 15s infinite linear;
    animation: spin-inverse 15s infinite linear;
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes spin-inverse {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(-360deg);
    }
}

@keyframes spin-inverse {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}


/* Easy Pie Chart */

.pie-chart {
    position: relative;
    display: inline-block;
}

    .pie-chart:before {
        position: absolute;
        top: -5px;
        right: -2px;
        bottom: -5px;
        left: -2px;
        content: "";
        background-color: rgba(255, 255, 255, .15);
        visibility: hidden;
        -webkit-transform: scaleY(2);
        -ms-transform: scaleY(2);
        transform: scaleY(2);
        -webkit-transition: -webkit-transform .12s ease-out;
        transition: transform .12s ease-out;
    }

    .pie-chart > span {
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        margin-top: -2px;
        right: 0;
        left: 0;
        text-align: center;
    }


/* Helpers */

.font-s12 {
    font-size: 12px !important;
}

.font-s13 {
    font-size: 13px !important;
}

.font-s14 {
    font-size: 14px !important;
}

.font-s16 {
    font-size: 16px !important;
}

.font-s18 {
    font-size: 18px !important;
}

.font-s20 {
    font-size: 20px !important;
}

.font-s24 {
    font-size: 24px !important;
}

.font-s36 {
    font-size: 36px !important;
}

.font-s48 {
    font-size: 48px !important;
}

.font-s64 {
    font-size: 64px !important;
}

.font-w200 {
    font-weight: 200 !important;
}

.font-w300 {
    font-weight: 300 !important;
}

.font-w400 {
    font-weight: 400 !important;
}

.font-w600 {
    font-weight: 600 !important;
}

.font-w700 {
    font-weight: 700 !important;
}

.push-5 {
    margin-bottom: 5px;
}

.push-10 {
    margin-bottom: 10px;
}

.push-20 {
    margin-bottom: 20px;
}

.push-30 {
    margin-bottom: 30px;
}

.push-40 {
    margin-bottom: 40px;
}

.push-50 {
    margin-bottom: 50px;
}

.items-push > div {
    margin-bottom: 30px;
}

.overflow-hidden {
    overflow: hidden;
}

.visibility-hidden {
    visibility: hidden;
}


.image-stack {
    display: grid;
    position: relative;
    grid-template-columns: repeat(100, 1fr);
}

.image-stack__item--bottom {
    grid-row: 1;
    grid-column: 69 / span 29;
    padding-top: 9.5%;
}

.image-stack__item--top {
    grid-row: 1;
    grid-column: 1 / -1;
}

img {
    width: 100%;
    display: block;
}

.blurry {
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    width: 100px;
    height: 100px;
    background-color: #ccc;
}

.gaussianBlur {
    -webkit-filter: blur(20px); /* Chrome, Safari, Opera */
    filter: blur(20px);
}

.card {
    background: #fff;
    box-shadow: 0 4px 20px rgb(82 95 127 / 25%);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}

p {
    font-size: 18px;
}