
.betaFeaturesSpan {
    font-size: 0.7em !important;
    color: orange;
    border: 2px solid orange;
    border-radius: 6px;
    padding: 2px;
    font-weight: 700;
}

    .betaFeaturesSpan.apostrofe {
        font-size: 0.5em !important;
        top: -1px;
        left:15px;
        position: absolute;
    }

button.symbolicIcon, a.symbolicIcon {
    border: none;
    color: #888;
    background-color: transparent;
    padding: 1px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    cursor:pointer;
}

button.disableState {
    color: #d4d4d4;
    cursor:not-allowed;
}

button.topPosition {
    /*position:absolute;*/
    top:0px;
    vertical-align:top;
}



button.ButtonGreen {
    border: 1px solid #6EBF5D;
    color: white !important;
    background: #6EBF5D;
    -moz-border-radius: 6px;
    border-radius: 6px;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    -o-transition: .2s ease-in;
    -ms-transition: .2s ease-in;
    -moz-transition: .2s ease-in;
    -webkit-transition: .2s ease-in;
    transition: .2s ease-in;
    line-height: 2.5em;
    padding: 0 30px;
    cursor: pointer;
    /*margin:5px;*/
}

    button.ButtonGreen.white {
        background: white;
        border: 1px solid #595959;
        transition: .2s ease-in;
        color: #595959;
    }

button.ButtonGreen.red{
background: #e53c42;
border: 1px solid #e53c42;
transition: .2s ease-in;
color: white;
}

    button.ButtonGreen.cancel {
        color: #FFFFFF;
        background: #888888;
        border: 1px solid #888888;
    }

        button.ButtonGreen.cancel:hover {
            color: #FFFFFF;
            background: #595959;
            border: 1px solid #595959;
        }

    button.ButtonGreen.grey {
        background-color: #888;
        border: 1px solid #888;
        transition: .2s ease-in;
        color: white;
    }

button:hover.ButtonGreen.grey{
background-color: rgb(138, 138, 138);
border: 1px solid rgb(138, 138, 138);
transition: .2s ease-in;
color: white;
}


button:hover.ButtonGreen.red{
background: #e53c42;
border: 1px solid #e53c42;
transition: .2s ease-in;
color: white;
}

button:hover.ButtonGreen {
    border: 1px solid #6EBF5D;
    /* IE10 Consumer Preview */
    background-image: -ms-linear-gradient(top, #74c640 0%, #6EBF5D 100%);
    /* Mozilla Firefox */
    background-image: -moz-linear-gradient(top, #74c640 0%, #6EBF5D 100%);
    /* Opera */
    background-image: -o-linear-gradient(top, #74c640 0%, #6EBF5D 100%);
    /* Webkit (Safari/Chrome 10) */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #74c640), color-stop(1, #6EBF5D));
    /* Webkit (Chrome 11+) */
    background-image: -webkit-linear-gradient(top, #74c640 0%, #6EBF5D 100%);
    /* W3C Markup, IE10 Release Preview */
    background-image: linear-gradient(to bottom, #74c640 0%, #6EBF5D 100%);
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    box-shadow: 0 2px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 2px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 2px 0px rgba(0, 0, 0, 0.1);
    text-shadow: 0 1px rgba(0,0,0,0.1);
}

button:active.ButtonGreen {
    border: 1px solid #6EBF5D;
    box-shadow: inset 0 2px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset 0 2px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: inset 0 2px 0px rgba(0, 0, 0, 0.1);
    text-shadow: none;
    color: #caeab5;
}


button.ButtonGreen i.pizza {
    background-color: transparent;
    background-image: url("Images/pizza16_white.png");
    background-repeat: no-repeat;
    background-size: 16px auto;
    display: inline-block;
    height: 16px;
    margin-left: auto;
    margin-right: 7px;
    margin-top: 4px;
    width: 16px;
}

button.ButtonGreen i.pizza {
    background-color: transparent;
    background-image: url("Images/pizza16_white.png");
    background-repeat: no-repeat;
    background-size: 16px 16px;
    display: block;
    float: left;
    height: 16px;
    margin-left: auto;
    margin-right: 7px;
    margin-top: 12px;
    position: relative;
    width: 16px;
}
/*button.ButtonGreen i.rotatingObject {
    animation: 1s linear 0s normal none infinite running spin;
}*/

button.ButtonGreen i.rotatingObject {
    -webkit-animation: spin 1s infinite linear; 
       -moz-animation: spin 1s infinite linear;
         -o-animation: spin 1s infinite linear;
            animation: spin 1s infinite linear;
}

button.ButtonGreen.disabledbutton {
 border: 1px solid #DEDEDE !important;
 background: none repeat scroll 0 0 #DEDEDE;
 color: #595959 !important;
 box-shadow:none;
 cursor: not-allowed;
}

button.ButtonGreen.disabledbutton:hover {
 border: 1px solid #DEDEDE;
 background: none repeat scroll 0 0 #DEDEDE;
 color: #595959 !important;
}

button.ButtonGreen i {
margin-right: 5px;
}

.square {
    height: 112px;
    width: 8vw;
    min-width: 100px; /*RESP*/
    border: none;
    display: inline-block;
    -o-transition: .2s ease-in;
    -ms-transition: .2s ease-in;
    -moz-transition: .2s ease-in;
    -webkit-transition: .2s ease-in;
    transition: .2s ease-in;
    background: #6EBF5D;
    cursor: pointer;
    color: #fff;
    font-size: 1em;
    font-weight: bold;
    position: relative;
}

/* mobile devices */
@media handheld, only screen and (max-width: 620px) {
.square {
    height: 56px;
    width: 4vw;
    min-width: 56px; /*RESP*/
    border: none;
    display: inline-block;
    -o-transition: .2s ease-in;
    -ms-transition: .2s ease-in;
    -moz-transition: .2s ease-in;
    -webkit-transition: .2s ease-in;
    transition: .2s ease-in;
    background: #6EBF5D;
    cursor: pointer;
    color: #fff;
    font-size: 1em;
    font-weight: bold;
    position: relative;
}
}

    .square-fixed {
        height: 112px;
        width: 8vw;
    }

    @media handheld, only screen and (max-width: 620px) {
        .square-fixed {
            height: 56px;
            width: 35vw;
        }
    }



    .square i {
        font-size: 2.8em;
        padding: 10px;
    }

    .square-small {
        width: 4vw;
        -o-transition: .2s ease-in;
        -ms-transition: .2s ease-in;
        -moz-transition: .2s ease-in;
        -webkit-transition: .2s ease-in;
        transition: .2s ease-in;
        background-color: white;
        color: #888;
        font-size: 1.3em;
        font-weight: bold;
        position: relative;
        text-align: center;
        float: right;
        cursor: pointer;
    }

    @media handheld, only screen and (max-width: 620px) {
        .square-small {
            width: 8vw;
        }
    }

    .square-small button {
        width: 4vw;
        height: 56px;
    }

@media handheld, only screen and (max-width: 620px) {
    .square-small button {
        width: 10vw;
        height: 56px;
    }
}

    .square-small i {
        font-size: 1.4em;
        padding: 7px;
    }

    .square.active {
        background: #6EBF5D;
        color: #fff;
    }

    .square.not-active {
        background: #fff;
        color: #888;
    }

    .square-hover:hover {
        background: #6EBF5D !important;
        color: #fff !important;
    }

    .add_new button.add_new_btn {
        float: right;
        width: 10%;
        max-width: 120px;
        height: 40px;
        border: none;
        display: block;
        -o-transition: .2s ease-in;
        -ms-transition: .2s ease-in;
        -moz-transition: .2s ease-in;
        -webkit-transition: .2s ease-in;
        transition: .2s ease-in;
        background: #6EBF5D;
        cursor: pointer;
        color: #fff;
        font-size: 1em;
        font-weight: bold;
        position: relative;
        -moz-border-radius: 6px;
        border-radius: 6px;
        margin-top: 10px;
    }

        .add_new button.add_new_btn:hover {
            background-color: #74c640;
        }

    .add_new {
        background: url(img/add_new_arrow.png) no-repeat 30px 100px;
        height: 200px;
    }

        .add_new button.add_new_btn span {
            display: block;
        }

        .add_new button.add_new_btn i {
            display: block;
            font-size: 2.1em;
            line-height: 1.5em;
        }


        .add_new h5 {
            float: right;
            width: 90%;
            font-family: 'helvetica_thin';
            color: #fff;
            font-size: 22px;
            color: #6EBF5D;
            margin-top: 5%;
            line-height: 1.6em;
            font-weight: normal;
        }

    .add_new_phone, .add_new_camera {
        float: left;
        width: 44%;
        margin: 0 3%;
        text-align: center;
    }

        .add_new_phone span {
            display: block;
            background: url(img/phone.jpg) no-repeat center center;
            background-size: contain;
            width: 90%;
            height: 250px;
            margin: 30px auto;
        }

        .add_new_camera span {
            display: block;
            background: url(img/cam.jpg) no-repeat center center;
            background-size: contain;
            width: 90%;
            height: 250px;
            margin: 30px auto;
        }

        .add_new_phone .greenbutt, .add_new_camera .greenbutt {
            width: 40%;
            margin: 0 auto;
            margin-bottom: 10px;
        }



    /* tablet */
    @media handheld, only screen and (min-device-width : 621px) and (max-device-width : 1024px) and (orientation:portrait) {

        button.ButtonGreen {
            line-height: 3em;
            font-size: 1.2em;
            padding: 0 40px;
        }
    }

    /* mobile devices */
    @media handheld, only screen and (max-width: 620px) {

        button.ButtonGreen {
            padding: 0 15px;
            line-height: 2em;
            border: none;
        }

        button:hover.ButtonGreen {
            border: 0px solid #6EBF5D;
            /* IE10 Consumer Preview */
            background-image: -ms-linear-gradient(top, #74c640 0%, #6EBF5D 100%);
            /* Mozilla Firefox */
            background-image: -moz-linear-gradient(top, #74c640 0%, #6EBF5D 100%);
            /* Opera */
            background-image: -o-linear-gradient(top, #74c640 0%, #6EBF5D 100%);
            /* Webkit (Safari/Chrome 10) */
            background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #74c640), color-stop(1, #6EBF5D));
            /* Webkit (Chrome 11+) */
            background-image: -webkit-linear-gradient(top, #74c640 0%, #6EBF5D 100%);
            /* W3C Markup, IE10 Release Preview */
            background-image: linear-gradient(to bottom, #74c640 0%, #6EBF5D 100%);
            border-image-source: initial;
            border-image-slice: initial;
            border-image-width: initial;
            border-image-outset: initial;
            border-image-repeat: initial;
            box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1);
            -webkit-box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1);
            -moz-box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1);
            text-shadow: 0 0px rgba(0,0,0,0.1);
        }
    }

@media handheld, only screen and ( max-width: 1500px) {
    .hiddenInMobile {
        font-size:0.9em;
    }
}

@media handheld, only screen and ( max-width: 1280px) {
    .hiddenInMobile {
        font-size: 0.82em;
    }
}

@media handheld, only screen and (max-width: 800px) {
    .hiddenInMobile {
        display: none !important;
    }
}

@media handheld, only screen and (max-width: 800px) {
    .LogoInMobile {
        width:66% !important;
    }
}
