﻿
ul#colourOptions li {
    display: inline;
    cursor: pointer;
}

    ul#colourOptions li.btn-option {
        padding: 13px 18px 12px 46px;
        margin-right: 20px;
        border-radius: 5px;
        line-height: 32px;
    }

        ul#colourOptions li.btn-option.active {
            background-color: rgba(244,109,0,1.00) !important;
            color: #fff;
        }

        ul#colourOptions li.btn-option:hover {
            sbackground-color: rgba(244,150,70,1.00) !important;
        }

        ul#colourOptions li.btn-option img {
            position: absolute;
            margin-left: -36px;
            padding-top: 0px;
            width: 30px;
        }

/*-----------*/

ul#textOptions li {
    display: inline;
    cursor: pointer;
}

    ul#textOptions li.btn-option {
        padding: 10px 18px 10px 16px;
        margin-right: 20px;
        border-radius: 5px;
        float: left;
        line-height: 18px;
    }

        ul#textOptions li.btn-option.active {
            background-color: rgba(244,109,0,1.00) !important;
            color: #fff;
        }

        ul#textOptions li.btn-option img {
            position: absolute;
            margin-left: -26px;
        }

        ul#textOptions li.btn-option:before {
            width: 10px;
            height: 10px;
            margin: 4px 6px 0 0;
            display: block;
            float: left;
            border-radius: 20px;
            box-shadow: inset 0 0 0 1px #000;
            content: '';
            -webkit-transition: box-shadow 120ms linear;
            transition: box-shadow 120ms linear;
        }

        ul#textOptions li.btn-option:hover:before {
            box-shadow: inset 0 0 0 1px #000,inset 0 0 0 2px #fff,inset 0 0 0 5px rgba(244,109,0,1.00);
        }

.layout-square .image .img.black {
    border: 10px solid black;
}

.layout-square .image .img.black {
    border-bottom: 44px solid black;
}

.layout-square .image .img.white {
    border: 10px solid #EDEFEF;
}

.layout-square .image .img.white {
    border-bottom: 44px solid #EDEFEF;
}

.layout-square .image .img.red {
    border: 10px solid #ff1313;
}

.layout-square .image .img.red {
    border-bottom: 44px solid #ff1313;
}

.layout-square .image .img.vintage1 {
    border: 10px solid #0060ae;
}

.layout-square .image .img.vintage1 {
    border-bottom: 44px solid #0060ae;
}

.layout-square .image .img.vintage2 {
    border: 10px solid #ee292d;
}

.layout-square .image .img.vintage2 {
    border-bottom: 44px solid #ee292d;
}

.layout-square .image .img.vintage3 {
    border: 10px solid #9ccb3b;
}

.layout-square .image .img.vintage3 {
    border-bottom: 44px solid #9ccb3b;
}

.layout-square .image .img.vintage4 {
    border: 10px solid #ede0bd;
}

.layout-square .image .img.vintage4 {
    border-bottom: 44px solid #ede0bd;
}

.layout-square .image .img.vintage5 {
    border: 10px solid #3e2d14;
}

.layout-square .image .img.vintage5 {
    border-bottom: 44px solid #3e2d14;
}

.layout-square .image .img.vintage6 {
    border: 10px solid #b86982;
}

.layout-square .image .img.vintage6 {
    border-bottom: 44px solid #b86982;
}


.layout-square .image .img.spot1 {
    border: 10px solid #ed0a72;
}

.layout-square .image .img.spot1 {
    border-bottom: 44px solid #ed0a72;
}

.layout-square .image .img.spot2 {
    border: 10px solid #00a1e1;
}

.layout-square .image .img.spot2 {
    border-bottom: 44px solid #00a1e1;
}

.layout-square .image .img.spot3 {
    border: 10px solid #ffeb00;
}

.layout-square .image .img.spot3 {
    border-bottom: 44px solid #ffeb00;
}

.layout-square .image .img.spot4 {
    border: 10px solid #ee75a3;
}

.layout-square .image .img.spot4 {
    border-bottom: 44px solid #ee75a3;
}

.layout-square .image .img.spot5 {
    border: 10px solid #6686ff;
}

.layout-square .image .img.spot5 {
    border-bottom: 44px solid #6686ff;
}

.layout-square .image .img.spot6 {
    border: 10px solid #ff3e24;
}

.layout-square .image .img.spot6 {
    border-bottom: 44px solid #ff3e24;
}

.freeUserTextInput {
    font-size: 14px;
    font-weight: 400;
    /* width: 180px; */
    width: 100%;
    margin-left: 0 !important;
    border: none !important;
    background-color: transparent;
    text-align: center;
    font-family: inherit;
}

    .freeUserTextInput:focus::-webkit-input-placeholder {
        opacity: 0;
    }

    .freeUserTextInput.black {
        color: #444;
    }

        .freeUserTextInput.black.AmaticSCRegular {
            font-family: 'Amatic SC', serif;
            font-size: 19px;
            font-weight: 700;
            padding: 0;
        }

        .freeUserTextInput.black.BoogalooRegular {
            font-family: 'Boogaloo';
            font-size: 18px;
        }

        .freeUserTextInput.black.AlluraRegular {
            font-family: 'Allura-Regular', serif;
            font-size: 16px;
        }

        .freeUserTextInput.black.DidactGothic {
            font-family: 'Didact Gothic', serif;
            font-size: 15px;
        }

        .freeUserTextInput.black::-webkit-input-placeholder { /* WebKit, Blink, Edge */
            color: #444;
        }

        .freeUserTextInput.black:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color: #444;
            opacity: 1;
        }

        .freeUserTextInput.black::-moz-placeholder { /* Mozilla Firefox 19+ */
            color: #444;
            opacity: 1;
        }

        .freeUserTextInput.black:-ms-input-placeholder { /* Internet Explorer 10-11 */
            color: #444;
        }

    .freeUserTextInput.white {
        color: #fff;
    }

        .freeUserTextInput.white.AmaticSCRegular {
            font-family: 'Amatic SC', serif;
            font-size: 19px;
            font-weight: 700;
        }

        .freeUserTextInput.white.BoogalooRegular {
            font-family: 'Boogaloo', serif;
            font-size: 18px;
        }

        .freeUserTextInput.white.AlluraRegular {
            font-family: 'Allura-Regular', serif;
            font-size: 16px;
        }

        .freeUserTextInput.white.DidactGothic {
            font-family: 'Didact Gothic', serif;
            font-size: 15px;
        }

        .freeUserTextInput.white::-webkit-input-placeholder { /* WebKit, Blink, Edge */
            color: #fff;
        }

        .freeUserTextInput.white:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color: #fff;
            opacity: 1;
        }

        .freeUserTextInput.white::-moz-placeholder { /* Mozilla Firefox 19+ */
            color: #fff;
            opacity: 1;
        }

        .freeUserTextInput.white:-ms-input-placeholder { /* Internet Explorer 10-11 */
            color: #fff;
        }

ul#textOptions li.btn-option.AmaticSC-Regular {
    font-family: 'Amatic SC', serif;
    font-size: 20px;
    font-weight: 700;
}

ul#textOptions li.btn-option.BoogalooRegular {
    font-family: 'Boogaloo', serif;
    font-size: 20px;
}

ul#textOptions li.btn-option.AlluraRegular {
    font-family: 'Allura-Regular', serif;
    font-size: 19px;
}

ul#textOptions li.btn-option.DidactGothic {
    font-family: 'Didact Gothic', serif;
    font-size: 18px;
}
