/* General styling */
body {
    overflow-x: hidden;
    margin-bottom: 50px;
}

/*footer {*/
/*    padding: 300px;*/
/*}*/

#topnav .brand>img {
    margin: 0;
}

.neon-fixed {
    position: fixed;
    background: #000000;
    top: 0;
    left: 0;
    width: 100%;
    box-shadow: 0 0 40px #222;
    -webkit-box-shadow: 0 0 40px #222;
    -moz-box-shadow: 0 0 40px #222;
}

.navbar.neon-fixed .btn-navbar {
    background-color: #000000;
}

.navbar.neon-fixed .btn-navbar:hover {
    background-color: #ef6603;
}

.text-white {
    color: white
}

.neon-pink-text {
    color: #ef6603;
}

.neon-pink-text:hover {
    color: #ef6603;
}

.neon-dark-grey-text {
    color: rgb(102, 102, 102)
}

.neon-canvas-light-on {
    /* use this class to get light version of background neon canvas*/
    background-color: rgb(246, 146, 205);
}

.neon-canvas-light-off {
    /* use this class to get dark version of background neon canvas. No need to set linear gradiend for background-image!*/
    background-color: rgb(36, 31, 32);
}
/* General styling End */

/* Neon Canvas */
#neonCanvas {
    position: relative;
    color: white;
    background-image: url(../backgrounds/895.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    height: 380px;
    transition: background-color 0.2s ease-in 0s;
    z-index: 1;
}

#neonCanvas.neon-canvas-light-off:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 100%);
    z-index: -1;
    height: 380px;
}

.neon-canvas-toggle-light {
    padding: 20px;
    font-size: 20px;
}

.neon-canvas-toggle-light>p {
    font-size: 20px;
    cursor: pointer;
}

.neon-flex-row {
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}

.neon-flex-row-reverse {
    flex-direction: row-reverse;
}

.neon-flex-row-centered {
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
}

.neon-canvas-text-input {
    /* flex: 1; */
    align-content: stretch;
    -webkit-box-align: stretch;
    align-items: stretch;
    flex-direction: row;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    justify-content: flex-start;
    box-sizing: border-box;
    flex-basis: 83.3333%;
    -webkit-box-flex: 0;
    flex-grow: 0;
    max-width: 83.3333%;
    margin: 0px;
}

.neon-canvas-text-input>div {
    color: white;
    height: 160px;
    font-weight: normal;
    font-size: 40px;
    text-shadow: rgba(0, 0, 0, 0.3) 1px 2px 7px, rgb(255, 255, 255) 0px 0px 40px, rgb(255, 255, 255) 0px 0px 40px, rgb(255, 255, 255) 0px 0px 40px, rgb(255, 255, 255) 0px 0px 40px;
}

#neonCanvasTextEditable {
    margin: auto;
    overflow-wrap: break-word;
    line-height: normal;
}

.neon-canvas-arrow-action {
    cursor: pointer;
    transition: all 0.2s ease-in-out 0s;
    flex-wrap: wrap;
    /* -webkit-box-pack: start;
    justify-content: flex-start; */
    box-sizing: border-box;
    flex-basis: 8.33333%;
    -webkit-box-flex: 0;
    flex-grow: 0;
    max-width: 8.33333%;
    margin: 0px;
}

.neon-canvas-arrow-action>p {
    margin: 0;
    padding: 10px;
    font-size: 18px;
}

.neon-canvas-arrow-action:hover {
    filter: drop-shadow(white 0px 0px 3px);
}

.neon-canvas-arrow-action.hidden {
    visibility: hidden;
    display: none;
}

.neon-canvas-arrow-r {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 30px solid white;
}

.neon-canvas-arrow-l {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-right: 30px solid white;
}

.neon-canvas-options {
    align-items: flex-end;
    height: 130px;
}

.neon-canvas-info-box {
    overflow: hidden;
    flex-basis: 25%;
}

.neon-canvas-info-box>div {
    border-radius: 15px;
    background-color: white;
    color: #ef6603;
    padding: 18px;
    position: relative;
    box-sizing: border-box;
    max-height: 130px;
}

.neon-canvas-info-box i {
    position: absolute;
    top: 10px;
    left: 10px;
}

#info-box-text {
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
    line-height: 1.6;
}

#neon-canvas-prize {
    flex: 1;
    text-shadow: rgb(0, 0, 0) 0px 0px 10px;
    text-align: center;
}

#neon-canvas-prize>p {
    margin: 0;
}

.neon-btn {
    background-color: #ef6603;
    color: white;
    padding: 15px 30px;
    border: none;
    font-weight: bold;
    transition: background-color 0.2s ease 0s, color 0.2s ease 0s, box-shadow 0.2s ease 0s;
}

.neon-btn:hover:enabled {
    background-color: rgb(239,102,0);
    box-shadow: rgb(200,80,0) 0px 0px 18px;
}

.neon-canvas-btn {
    flex-basis: 25%;
}

.neon-scrollable-container {
    /*height: calc(100vh - 380px);*/
    overflow-y: scroll;
    overflow-x: hidden;
}
/* Neon Canvas End */

/* Neon Font Chooser */
.neon-scrollable-container .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

.neon-list-header {
    padding: 16px 8px;
    text-align: center;
    border-bottom: 1px solid rgb(219, 219, 219);
}

.neon-list-header>p {
    margin: 0;
    line-height: 1.5;
}

.neon-list-item {
    text-align: center;
    cursor: pointer;
    border-bottom: 1px solid rgb(219, 219, 219);
    transition: background-color 0.2s ease 0s;
}

.neon-font-item {
    padding: 12px 0;
    height: 50px;
    font-size: 28px;
}

.neon-list-item:last-child {
    border-bottom: 0;
}

.neon-list-item:hover {
    background-color: rgb(245, 245, 245);
}

.neon-list-item.selected {
    background-color: rgb(245, 245, 245);
}

.neon-font-item.selected>.neon-list-font-item-text {
    color: #ef6603;
}

.neon-list-font-item-text {
    color: rgb(128, 133, 130);
}

.neon-badge {
    border: none;
    color: white;
    padding: 0 8px;
    background-color: rgb(0, 200, 83);
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    height: 24px;
    line-height: 24px;
    margin-left: 15px;
}
/* Neon Font Chooser End */

/* Neon Color Chooser */
.neon-color-container {
    max-width: 400px;
    margin: 0 auto;
}

.neon-color-picker {
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    margin-top: 16px;
    margin-bottom: 30px;
}

.neon-color-box {
    flex-basis: 20%;
    justify-content: center;
}

.neon-color-item {
    position: relative;
    width: 50px;
    height: 100px;
    cursor: pointer;
    transition: transform 100ms ease 0s;
}

.neon-color-item:hover {
    transform: scale(1.2);
}

.neon-color-item.selected {
    transform: scale(1.2);
}

.neon-multiple-colors-container {
    margin-bottom: 30px;
}

.neon-multiple-colors-container label {
    font-weight: 700;
    color: rgb(102, 102, 102);
    margin-bottom: 10px;
    text-transform: capitalize;
}

.neon-multiple-colors-container .help-block {
    color: rgb(102, 102, 102);
    font-size: 12px;
    line-height: 18px;
    margin: 4px 0;
}

.neon-text-area {
    width: 100%;
    border-color: rgba(60, 66, 87, 0.16);
    padding: 8px 12px;
    text-decoration: none;
    transition: box-shadow 240ms ease 0s;
    margin-bottom: 0;
    box-sizing: border-box;
}

.neon-text-area:focus {
    border-color: rgba(60, 66, 87, 0.16);
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(137, 223, 250) 0px 0px 0px 4px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
    ;
}
/* Neon Color Chooser End */

/* Neon Font Size Chooser */
.neon-size-item {
    padding: 16px 0;
    flex-direction: column;
}

.neon-size-item>* {
    color: rgb(102, 102, 102);
}

.neon-size-item.selected>* {
    color: #ef6603;
}

.neon-size-item.disabled {
    cursor: default;
}

.neon-size-item.disabled>* {
    color: rgb(219, 219, 219);
    cursor: auto;
}

.neon-size-item h3 {
    margin: 0;
    font-family: Arial, Tahoma, Verdana, Sans-serif;
    font-weight: bolder;
}

.neon-size-item p {
    margin-bottom: 0;
    line-height: 1.5;
}
/* Neon Font Size Chooser End */

/* Neon Next Button */
#neon-next-btn {
    width: 100%;
    font-size: 18px;
}
/* Neon Next Button End */

/* Neon Form */
.neon-contact-information {
    margin: 16px 0;
    font-size: 16px;
    line-height: 1.5;
}

#neonForm>.container-fluid {
    padding: 0;
}

.neon-form-container {
    max-width: 33.33%;
    margin: 0 auto;
}

#neonContactForm>.controls:not(:last-child) {
    margin-bottom: 20px;
}

#neonContactForm input {
    padding: 8px 12px;
    margin: 0;
    border-color: rgba(60, 66, 87, 0.16);
    width: 100%;
    box-sizing: border-box;
    height: auto;
    color: rgb(51, 51, 51);
    transition: box-shadow 240ms ease 0s;
    transition: background-color 240ms ease 0s
}

#neonContactForm input:focus {
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(137, 223, 250) 0px 0px 0px 4px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}

#neonContactForm input[type="checkbox"] {
    width: 20px;
    height: 20px;
    border-radius: 0;
    margin-right: 10px;
    background-color: rgb(238, 238, 238);
}

#neonContactForm>.controls label {
    font-size: 14px;
    font-weight: 700;
    color: rgb(102, 102, 102);
    margin: 0;
    padding-bottom: 10px;
}

#neonContactForm>.controls label.checkbox {
    padding: 0;
    color: #ef6603;
}

#neonContactForm>.controls .help-inline {
    padding: 0;
    margin: 4px 0;
    color: rgb(102, 102, 102);
    line-height: 18px;
    font-size: 12px;
}

#neonContactForm textarea {
    color: rgb(51, 51, 51);
}

#neonContactForm select {
    width: 100%;
    border-color: rgba(60, 66, 87, 0.16);
    padding: 8px 12px;
    height: auto;
    color: rgb(51, 51, 51);
}

#neonContactForm select:focus {
    outline: none;
}

#neonContactForm button {
    width: 100%;
}

.neon-privacy-policy p {
    margin-bottom: 0;
    margin-top: 8px;
}

.neon-privacy-policy a:hover {
    text-decoration: none;
}
/* Neon Form End*/

/* Responsive Design */

/* Landscape phones and down */
@media (max-width: 480px) {
    .neon-canvas-arrow-action>p {
        display: none
    }

    #neonCanvasTextEditable {
        transform: scale(0.7);
    }

    .neon-canvas-btn {
        flex-basis: 100%;
    }

    .neon-font-item {
        height: 30px;
    }

    .neon-color-item {
        width: 40px;
        height: 90px;
    }

    .neon-size-item {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .neon-size-item>h3 {
        font-size: 19px;
    }
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
    .navbar-fixed-top {
        margin: 0;
    }

    .navbar-inner .container {
        padding: 0;
    }

    .neon-canvas-arrow-r {
        border-top: 30px solid transparent;
        border-bottom: 30px solid transparent;
        border-left: 20px solid white;
    }

    .neon-canvas-arrow-l {
        border-top: 30px solid transparent;
        border-bottom: 30px solid transparent;
        border-right: 20px solid white;
    }

    #neonCanvasTextEditable {
        min-width: 83.3333%;
        transform: scale(0.8);
    }

    .neon-font-item {
        font-size: 22px;
    }

    .neon-color-box {
        flex-basis: 25%;
    }

    .neon-form-container {
        max-width: 100%;
    }

    #neonContactForm>.controls-row [class*="span"]+[class*="span"] {
        margin-left: 0;
        margin-top: 20px;
    }
}

@media screen and (min-width: 768px) {
    .neon-canvas-arrow-action {
        flex-basis: 25%;
        max-width: 25%;
    }

    .neon-canvas-text-input {
        flex-basis: 50%;
        max-width: 50%;
    }

    #neonCanvasTextEditable {
        min-width: 50%;
    }
}

@media (max-width: 979px) and (min-width: 768px) {
    .neon-form-container {
        max-width: 60%;
    }
}

/* Responsive Design End*/