/* Minification failed. Returning unminified contents.
(2525,40): run-time error CSS1046: Expect comma, found '0'
(2525,44): run-time error CSS1046: Expect comma, found '/'
(3257,1): run-time error CSS1036: Expected expression, found '}'
 */

/*==========================================================*/
/*================= BOOTSTRAP OVERIDE ======================*/
/*==========================================================*/
.navbar {
    padding: 0;
    background-color: transparent;
    margin-bottom: 8px;
}

    .navbar .nav > li > a {
        font-size: 14px;                
        text-transform: uppercase;
        border-bottom: 1px solid white;
        margin: 0 8px;
        padding:4px 0
    }
    


    .navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus {
        background: none !important;
    }

    .navbar .nav > li > a:focus,
    .navbar .nav > li > a:hover {
        color: #555;
        background-color: transparent;
    }

        .navbar .nav > li > a:hover,
        .navbar .nav  a.active {
            color: #000;
            border-bottom: 1px solid #aaa;
        }



.icon-bar
{
	display:none;
}

.form-control {
    color:#000;
}
.font-weight-medium {
    font-weight:600 !important;
}

/*.row input.form-control {
    margin-left: 1rem;
}*/
.label-uppercase {
    font-size: 0.8em;
    text-transform: uppercase;
    color: #888;
}

.clickable:hover {
    cursor: pointer;
}
.display-inline{
    display:inline-block;
}


.arrow-none:after {
    border: none;
    margin: 0;
    display: none;
}

.dropdown.dropdown-sm {
    border: 1px solid #dee2e6 !important;
    padding: 0 .5rem !important;
}

  

    .dropdown-item.active, .dropdown-item:active {
        background-color: #eeeeee;
        color: #222;
    }

/* ==============
  Helper Classes
===================*/
.p-0 {
    padding: 0;
}

.p-t-10 {
    padding-top: 10px;
}

.p-b-10 {
    padding-bottom: 10px;
}

.m-0 {
    margin: 0;
}

.m-r-5 {
    margin-right: 5px;
}

.m-r-10 {
    margin-right: 10px;
}

.m-r-15 {
    margin-right: 15px;
}

.m-l-10 {
    margin-left: 10px;
}

.m-l-15 {
    margin-left: 15px;
}

.m-t-5 {
    margin-top: 5px;
}

.m-t-10 {
    margin-top: 10px;
}

.m-t-15 {
    margin-top: 15px;
}

.m-t-20 {
    margin-top: 20px;
}

.m-t-30 {
    margin-top: 30px;
}

.m-t-40 {
    margin-top: 40px;
}

.m-b-5 {
    margin-bottom: 5px;
}

.m-b-10 {
    margin-bottom: 10px;
}

.m-b-15 {
    margin-bottom: 15px;
}

.m-b-20 {
    margin-bottom: 20px;
}

.m-b-30 {
    margin-bottom: 30px;
}

.w-xs {
    min-width: 80px;
}

.w-sm {
    min-width: 95px;
}

.w-md {
    min-width: 110px;
}

.w-lg {
    min-width: 140px;
}

.m-h-50 {
    min-height: 50px;
}

.l-h-34 {
    line-height: 34px;
}

.font-10 {
    font-size: 10px;
}

.font-12 {
    font-size: 12px;
}

.font-13 {
    font-size: 13px;
}

.font-14 {
    font-size: 14px;
}

.font-16 {
    font-size: 16px;
}

.font-18 {
    font-size: 18px;
}

.font-20 {
    font-size: 20px;
}
.font-24 {
    font-size: 24px;
}
.font-28 {
    font-size: 28px;
}

.font-32 {
    font-size: 32px;
}

.font-40 {
    font-size: 40px;
}

.no-border {
    border: none;
}

.no-outline:focus {
    outline: none;    
    -webkit-box-shadow: none;
    box-shadow: none;
}

.bg-lightgray{
    background-color:#eee;
}
.bx-shadow {
    -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
}

.thumb-sm {
    height: 32px;
    width: 32px;
}

.thumb-md {
    height: 48px;
    width: 48px;
}

.thumb-lg {
    height: 88px;
    width: 88px;
}

.grid-structure .grid-container {
    background-color: #bcc1c2;
    margin-bottom: 10px;
    padding: 10px 20px;
}

.b-round {
    border-radius: 30px;
}

.fw-400 {
    font-weight: 400;
}

.header-title {
    font-size: 16px;
}

.text-g-light {
    color: #ebeff8 !important;
}


.display-block{
    display:block;
}

.bold-500 {
    font-weight: 500;
}


.border-grey {
    border-color: #ccc !important;
}



/*==========================================================*/
/*===================== GENERAL LAYOUT =====================*/
/*==========================================================*/
.logo {
    float: left;
}

h1, h2, h3 {
    
}

h1
{
	text-align:left;
	font-weight:bold;
	margin-bottom:45px;
	font-size:48px;
	
}

h2,h3
{
	font-weight:normal;	
}

h2 {
    font-size: 1.7em;    
}

h3 {
    font-size: 1.3em;
}

p {
    color: #222;
    margin: 0 auto 16px auto;
    padding: 0;
}

img
{
	display:block;
	margin:0;
}

a {
    color: #d82828;
    text-decoration: none;
}

    a:hover, a:active  {
        text-decoration: none;
        color: #222;
    }

    a.no-deco {
        text-decoration: none;
        border-bottom: none !important;
    }

    a.no-style {
        text-decoration: none;
        border-bottom: none !important;
        color: inherit !important;
    }


.text-ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;    
    white-space: nowrap;
}

section {
    position: relative;
    padding: 36px 0 16px;
}

    section.section-compact {
        padding: 16px;
    }

.width-100 {
    width: 100%;
}

.height-100{
    height:100%;
}

.form-large input[type=email],
.form-large input[type=text],
.form-large input[type=password] {
    border: none;
    border: 1px solid #ccc;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    padding: 0 12px;
    height: 50px;
    color: #000;
}

    .form-large input[type=email]:focus,
    .form-large input[type=text]:focus,
    .form-large input[type=password]:focus {
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        border: 1px solid #000;
    }

textarea {
    border: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    padding: 12px;
    color: #000;
    border: 1px solid #ccc;
}

textarea:focus
{
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
	box-shadow:none;
	border:1px solid #d82828;
}

.ng-hide {display:none;}

.has-error,
.form-group.has-error input.ng-invalid {
    border-color: #fa755a;
}

.textarea[disabled],
.form-control[disabled] {
    /*color:#aaa  !important;*/
    background-color: #e1e1e1 !important;
}

.button[disabled]:hover,
.button[disabled]:focus:hover,
.button[disabled] {
    color: #555;
    border: 1px solid #555;
    background-color: #e1e1e1;
}

.button .material-icons {
    vertical-align: middle;
    font-size: 16px;
    margin-right: 4px;
}

.button.btn-lg .material-icons {
    margin-right: 8px;
    font-size: 20px;    
}


.button, .button.button-default {
    -moz-border-radius: 5px / 4px;
    -webkit-border-radius: 5px / 4px;
    border-radius: 5px / 4px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;    
    text-transform: uppercase;
    text-align: center;
    display: inline-block;
    font-size: 12px;
    padding: 8px 16px;
    color: #d82828;
    border: 1px solid #d82828;
    background-color: transparent;
    font-weight: 600;
}

    .section-darkest .button.button-default{
        border:1px solid #fff;
        color:#fff;
    }
        .section-darkest .button.button-default:hover {
            border: 1px solid #d82828;
        }

.btn.map-button {
    position:absolute;
    top:8px;
    right:8px;
}

.section-darkest h3 {
    color: #d82828 !important;
}
.section-darkest h2 {
    color: #aaa !important;
}

.button.button-primary {
    color: white;
    background-color: #d82828;
}
    .button.button-primary:hover {
        color: white;
        background-color: #b92222;
    }


.button.button-small, .button.button-small-noborder {
    font-size: 12px;
    padding: 8px;
}
.button.button-small-noborder {
    border:0;
    border-radius:0;
}
.button.btn-lg {
    font-size: 16px;
    padding: 16px 24px;
    font-weight: 500;
}
.button.button-wide {
    width:100%
}


.button:hover {
    color: #f5f5f5;
    background-color: #d82828;
}

.button:focus
{
	outline:none;
}

.button-light {
    color: #d82828;
    border: 1px solid #d82828;
    background-color: transparent;
}


.phone-zoom {
    font-size: 20px;
    background-color: #444;
    color: #fff;
    padding: 8px 16px;
    transition: all 0.2s ease;
}




button
{
    border:none;
}
.btn-default {

}
.btn-wide {
    padding-left: 35px;
    padding-right: 35px;
}
.btn-xs,
.btn-group-xs > .btn {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}
.no-wrap {
    white-space:nowrap;
}

.no-padding {
    padding: 0 !important;
}


.description {
    margin-bottom: 24px;
}

.other-lang {
    color: #d82828 !important;
    text-transform: lowercase;
}

.social-left
{
    padding: 0 5px 0 0;    
    text-align:right
}
.social-right
{
    padding: 0;
    text-align:left
}

.social-icon:first-child
{
}

.social-icon
{
    width: 20%;
    display:inline-block;
    text-align:center;
}
    .social-icon img
    {
        width:100%;
        max-width:65px;
        padding:0 5px;
    }

    

.section-white
{
    background-color:#fff;
    color:#222;
}


/*==========================================================*/
/*========================= BODY ===========================*/
/*==========================================================*/
body
{
	color:#222;
	font-size:16px;
	line-height:1.5;
	height:580px;
	width:auto;

    /*background: url(../img/background.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;*/	
    padding: 0;
}

img.bg {

  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;
	
  /* Set up proportionate scaling */
  width: 100%;
  height: auto;
	
  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}


.profile-picture
{
    text-align:left;
    margin-bottom:5px;
}
.profile-picture img
{
    width:100%;max-width:350px;border-radius:10px;
}



.info {
    margin-bottom: 28px;
}

    .info p {
    }

    .info .title {
        text-transform: uppercase;
        font-size: 12px;
        margin-bottom: 4px;
        color: #888;
    }
    .info .description {
        color:#000;
    }


.list-group.list-group-flat {
    border-top: 1px solid #eee;
}
    .list-group.list-group-flat .list-group-item {
        border: 0;
        margin: 0;
        border-bottom: 1px solid #eee;
        border-radius: 0;
        padding: 16px;
    }

.list-group-item.clickable > div {
    float:left;
}

.list-group-item.clickable > a, .list-group-item.clickable > button {
    float: right;
}
/*==========================================================*/
/*====================== HEADER ============================*/
/*==========================================================*/
header {
    position: relative;
    width: 100%;
}

    

    header .content
    {
	    padding-bottom:3em;
	    margin:0;
	    max-width:100%;
    }

    header .main-text
    {
	    padding-top:0;     
    }

.action-button a {
    margin-bottom:8px;
}

.pre {
    white-space: pre-wrap;
}
    .pre ul {
        white-space: nowrap;
    }
        .pre ul li{
            white-space: normal;
        }

.margin-bottom {
    margin-bottom:16px;
}
.margin-bottom-32 {
    margin-bottom: 32px;
}

/*==========================================================*/
/*======================== TEMPLATES ===========================*/
/*==========================================================*/
/*Common template values*/
.template {
}
    .section-dark {
        background-color: #f1f1f1;
    }

    .section-darkest {
        background-color: #222;
        color: #fff;
    }


    .section-light {
        padding: 36px 0;
    }



.landing-template section {
    border-bottom: 1px solid #e1e1e1;
}
.landing-template .header {
    padding: 0 0 146px;
}
    .landing-template .header h1 {
        margin-top: 128px;
        font-weight: 400;
        font-size: 40px;
        color: #222;
        text-transform: uppercase;
    }

    
/*detailed template overrides */
.details-template .header {
    padding: 24px 0 48px;
    border-top: 1px solid #e1e1e1;
}
    .details-template .header h1 {
        font-size: 36px;
        margin-bottom: 0;        
    } 
    .details-template .header h2 {
        font-size: 24px;
        margin-top: 8px;
        margin-bottom: 0;
        color: #888;
        text-transform: none;
    }
    .details-template .header.header-with-button h2 {
        margin-bottom: 32px;
    }

    .details-template .header h3 {
        font-size: 14px;
        font-weight: 600;
        margin: 0 0 24px;
        color: #888;
        text-transform: uppercase;
    }
    .details-template section {
            padding: 8px 0 16px;
    }


/*==========================================================*/
/*===================== SERVICES ===========================*/
/*==========================================================*/
.learn-more {
    margin-top: 10px;
    display: inline-block;
}

/*#services .icon-container:hover
{
	transform:translate(0px,-24px);
	-ms-transform:translate(0px,-24px);
	-webkit-transform:translate(0px,-24px);
}*/


/*==========================================================*/
/*======================== CONTACT =========================*/
/*==========================================================*/
#contact
{
	/*background-color:#363b48;*/
}

#contact textarea
{
	width:100%;
	height:100px;
	margin-bottom:30px;
    
}
    #contact h2 {
        margin-bottom:60px
    }


    #contact form
    {
        
        
    }

        #contact form label
        {
            color:#333;
            font-weight:normal;
        }

    #contact .error
    {
        color:#cc364f; 
        margin: 0px 0px 5px 0px;
        border-radius:5px;
        font-size:9pt;
    }

    #contact input
    {
        width: 100%;margin-bottom:20px;
    }



footer {
    line-height: 1.8em;
    font-size: 0.9em;
}

footer a {
    display:block;
    
}


/*===============================================*/
/*================   MODAL   =================*/
/*===============================================*/


.x-modal-open {
    overflow:hidden;
}
.x-modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 1040;
    background-color: #fff;
    opacity: 0.9;
}

.x-modal {
    display: block;
    position: fixed;
    background-color: #fff;
    padding: 32px 0;
    box-shadow: 0px 0px 20px 8px rgba(0,0,0,0.1);
    /*border: 1px solid #ccc;*/
    border-radius: 4px;
    top: 5%;
    bottom: 5%;
    left: 33%;
    right: 5%;
    margin-left:-200px;
    z-index: 1050;
    max-width: 1024px;
}


    .x-modal .x-modal-close-button {
        position: absolute;
        right: 0;
        top: 0;
        padding: 16px;
        color: #222;
        z-index: 200;
    }

    .x-modal .x-modal-title {
        position: absolute;
        right: 0;
        top: 0;
        left: 0;
        height: 92px;
        font-size: 22px;
        z-index: 10;
        /*margin: 0 22px 32px 0;*/
        font-weight: 500;
        padding: 24px 32px 18px 32px;
        /*border-bottom: 1px solid #ccc;*/
        box-shadow: 0 3px 8px rgba(0,0,0,0.2);
        background-color: #f1f1f1;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }


        .x-modal .x-modal-title .small {
            font-size: 14px;
            color: #888;
            text-transform: uppercase;
            font-weight: 400;
        }

    .x-modal .x-modal-actions {
        /*position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: right;*/
        background-color:#fff;
        border-top:1px solid #f1f1f1;
        padding:16px;
    }

    .x-modal .x-modal-body-container {
        position: absolute;
        top: 0;
        bottom: 92px;
        left: 0;
        right: 0;
    }
        .x-modal .x-modal-body-container .x-modal-body {
            overflow-y: scroll;
            height: 100%;
            margin-top: 92px;
            position: relative;
        }
            .x-modal .x-modal-body-container .x-modal-body form {

            }

    
    /* MODAL NARROW*/
    .x-modal.x-modal-narrow {
        top: 5%;
        bottom: 5%;
        left: 50%;
        z-index: 1050;
        width: 440px;
        margin-left: -200px;
    }


        .x-modal.x-modal-narrow .x-modal-body-container {
            bottom: 128px;
        }

            .x-modal.x-modal-narrow .x-modal-body-container .x-modal-body {
                margin-top: 128px;
            }

        .x-modal.x-modal-narrow .x-modal-title {
            height: 128px;
        }


    /* MODAL simple*/
    .x-modal.x-modal-simple {
        top: 5%;
        bottom: 5%;
        left: 50%;
        z-index: 1050;
        width: 640px;
        margin-left: -300px;
        text-align: center;
        height: 450px;
    }

        .x-modal.x-modal-simple .x-modal-body-container {
            bottom: 0;
        }

            .x-modal.x-modal-simple .x-modal-body-container .x-modal-body {
                margin-top: 0;
                overflow-y: hidden;
                padding:8px 32px;
            }

        .x-modal.x-modal-simple .x-modal-title {
            position:relative;
            border:0;
            box-shadow:none;
            background-color:#fff;
            
            text-transform:none;
        }
            .x-modal.x-modal-simple .x-modal-title h2 {
                text-align: center;
                text-transform: none !important;
                margin-bottom:16px;
            }



    .modal-show {
        display: block;
    }
    .modal-dialog.modal-fullscreen {
        max-width: none ;
        margin: 0 ;
    }
        .modal-dialog.modal-fullscreen .modal-content {
            border-radius: 0;
            border:0;
        }


    .modal-dialog.modal-fit-height,
    .modal-dialog.modal-fit-height .modal-content,
    .modal-dialog.modal-fullscreen ,
    .modal-dialog.modal-fullscreen .modal-content {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
    }

        .modal-dialog.modal-fit-height .modal-content .modal-body,
        .modal-dialog.modal-fullscreen .modal-content .modal-body {
            overflow-y: auto;
        }


    .modal-dialog,
    .modal-dialog.modal-default {
        max-width: 700px;
    }

        .modal-dialog.modal-large {
            max-width: 900px;
        }

        .modal-dialog.modal-xxl {
            max-width: 1200px;
            right: 16px;
            left: 16px;
            margin: 8px auto;
        }



/*===============================================*/
/*================   MAIN_MENU   =================*/
/*===============================================*/

.popup-menu-open {
    position: fixed;
    overflow-y: scroll;
    width: 100%;
}

.popup-menu-backdrop {
    position: fixed;
    top: 100px;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 1040;
    background-color: #000;
    opacity: 0.7;
}

.popup-menu {
    position: fixed;
    top: 100px;
    left: 0;
    right: 0;
    z-index: 1050;
    background-color: #fff;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #ccc;
}

    .popup-menu .popup-menu-close-button {
        position: absolute;
        right: 0;
        top: 0;
        padding: 16px;
        color: #222;
        z-index: 200;
    }

    .popup-menu .popup-menu-title {
        position: absolute;
        right: 0;
        top: 0;
        left: 0;
        height: 128px;
        font-size: 22px;
        /*margin: 0 22px 32px 0;*/
        font-weight: 500;
        padding: 24px 32px 18px 32px;
        /*border-bottom: 1px solid #ccc;*/
        box-shadow: 0 3px 8px rgba(0,0,0,0.2);
        background-color: #f1f1f1;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }

        .popup-menu .popup-menu-title .small {
            font-size: 14px;
            color: #888;
            text-transform: uppercase;
            font-weight: 400;
        }


    .popup-menu .popup-menu-body-container {
        text-align: center;
    }
        .popup-menu .popup-menu-body-container .popup-menu-sub-item a:hover .overlay {
            opacity: 1 !important;
        }
        .popup-menu .popup-menu-body-container .popup-menu-sub-item a:hover .overlay {
            content: '';
            opacity: 0;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(0,0,0,0.05);
            transition: all 0.25s ease-in-out;
        }

        .popup-menu .popup-menu-body-container .popup-menu-sub-item {
            position: relative;
            background-position-x: center;
            display: inline-block;
        }
            .popup-menu .popup-menu-body-container .popup-menu-sub-item a {
                display: block;
                width: 100%;
                height: 100%;
                padding-bottom: 24px;
                /*font-size: 1.2em;*/
                text-align: center
            }
            .popup-menu .popup-menu-body-container .popup-menu-sub-item img {
                border-radius: 8px;
            }





    form.form-size-medium label {
        font-weight: normal;
        font-size: 14px;        
    }

    form.padding-bottom-24 {
        padding-bottom: 24px;
    }

    form.form-size-medium input[type=text],
    form.form-size-medium input[type=email] {
        height:auto;
        padding:8px;
    }


.padding-16 {
    padding:16px;
}

.bcrumb {
    font-size: 10pt;
    margin: 16px 0;
    color: #777;
}
    .bcrumb a {
        font-size: 10pt;
        color:#000;
    }



.slick-carousel {
    margin: 0 auto;
    max-width: 1000px;
}

.slick-slide {
    text-align: center;
    outline: none;
}

    .slick-slide img {
        display: inline-block !important;
        width: 100%;
        max-width: 800px;
        /*padding: 16px;*/
    }


.square {
    position:relative;
    width:100%;
    height:100%;
    border-radius:4px;
    border:1px solid #ccc;    
    padding:8px;
}
    .square.square-selected {
        border-color: #4f8024;
        background-color:#f1f1f1;
    }
    .square.square-add {
        border-style: dashed;
    }

    .square.square-selected::before,
    .square.square-selected::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        border-color: transparent;
        border-style: solid;
    }


    .square.square-selected::before {
        border-width: 0em;
        border-right-color: #ccc;
        border-top-color: #ccc;
    }

    .square.square-selected::after {
        border-radius: 0px;
        border-width: 0.8em;
        border-right-color: #4f8024;
        border-top-color: #4f8024;
    }

    .form-with-steps {
    }

        .form-with-steps .step {
            padding: 24px 0 24px;
            border-bottom: 1px solid #ccc;
            margin-bottom: 0px;
        }
        .form-with-steps .step:first-child {
            border-top: 0;
        }

        .form-with-steps .step:last-child {
            margin-bottom: 0;
        }

            .form-with-steps .step:last-child .step-body {
                padding-bottom: 0;
            }

            .form-with-steps .step .step-header,
            .form-with-steps .step .step-body-row {
                margin-bottom: 20px;
            }

        .form-with-steps .step .step-body {
            padding: 8px 0 0 0px;
            /* border-left: 1px solid #ccc; */
            /* margin-left: 13px; */
            padding-bottom: 24px;
        }




            .form-with-steps .step .step-number,
            .step-number {                
                padding: 4px;
                text-align: center;
                font-weight: bold;
                background-color: transparent;
                color: #555;
                border: 1px solid #ccc;
                border-radius: 14px;
                margin-right: 8px;
                font-size: 16px;
                height: 28px;
                width: 28px;
                line-height: 20px;
            }

            .form-with-steps .step .step-number {
                display: inline-block;
            }

        .form-with-steps .step .step-title, .step-title {
            margin: 0;
            font-weight: 500;
            color: #555;
        }
            .form-with-steps .step .step-title {
                display: inline-block;
            }


.rating {
    color: #a9a9a9;
    margin: 0;
    padding: 0;
}


.icon-with-value {
    position:relative;
}
    .icon-with-value i {

    }
    .icon-with-value .icon-value {
        position: absolute;        
        width: 36px;
        left: 0;
        text-align: center;
        line-height: 51px;
    }

@media(max-width:480px) {

    .rating {
        width: 100%;
        text-align: center;
    }
        .rating i {
            font-size: 36px
        }

            .rating i,
            .rating i::before {
                font-size: 34px !important;
            }

        .rating-score {
            display: block;
            text-align: center;
            margin: 0;
        }
}


.rating-score {
    font-size:32px;
}

ul.rating {
    display: inline-block;
}

.rating li {
    list-style-type: none;
    display: inline-block;
    padding: 1px;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    font-size: 20px;
}
.rating i {
    font-size: 36px
}

.rating .filled {
    color: orangered;
}


/* survey ============================================ */
.template.survey-template {
    padding-top: 0;
}

.template .survey-template-content {
    margin: 0 auto;
    max-width: 800px;
}

    .template .survey-template-content h1 {
        margin: 24px 0 48px;
    }


    .template .survey-template-content .questions {
    }

        .template .survey-template-content .questions .question {
            margin-bottom: 96px;
        }

            .template .survey-template-content .questions .question .question-title {
                margin-bottom: 8px;
            }

            .template .survey-template-content .questions .question .question-description {
                margin-bottom: 24px;
            }


        .template .survey-template-content .questions .choice {
            border-radius: 4px;
        }

            .template .survey-template-content .questions .choice:hover {
                background-color: #eee;
            }

            .template .survey-template-content .questions .choice label {
                padding: 6px 6px 6px 12px;
                display: block;
            }

            .template .survey-template-content .questions .choice .custom-radio .custom-control-input:checked ~ .custom-control-label::before,
            .template .survey-template-content .questions .choice .custom-radio .custom-control-input:checked ~ .custom-control-label::after,
            .template .survey-template-content .questions .choice .custom-radio .custom-control-label::before {
                margin: 6px 0 6px 10px;
            }

            .template .survey-template-content .questions .choice.choice-selected {
                background-color: #e1e1e1;
            }



/* my-profile ============================================ */
.template.my-profile-template {
    
}
    .template.my-profile-template .left-panel-item {
        display: block;
        padding: 4px 16px;
        color: #6c757d !important;
        margin-bottom: 4px;
    }
        .template.my-profile-template .left-panel-item.selected {
            color: #212529 !important; /*text-body*/
            background-color: #eee;
            border-radius: 16px;
        }

    .template.my-profile-template h4 {
        font-size: 22px;
    }

    .template.my-profile-template h6 {
        color: #777;
        font-size: 12px;
        text-transform: uppercase;
        margin: 32px 0 8px 0;
        font-family: 'Open Sans', sans-serif !important;
    }


/* animations ============================================ */


.animate-slide.alert {
    overflow: hidden;
    max-height: 100px;    
}
    .animate-slide.alert.ng-hide {
        max-height: 0;
        display: block;
        padding: 0 1.25rem;
    }


.animate-slide {
    overflow: hidden;
    max-height: 100px;    
}

    .animate-slide.ng-hide {
        max-height: 0;
        display: block;        
    }

.animate-slide.ng-hide-remove,
.animate-slide.ng-hide-add {    
    display: block !important; /* or inline-block, as appropriate */
}

.animate-slide.ng-hide-remove {
    transition: all linear 250ms;
}

.animate-slide.ng-hide-add {
    transition: all linear 250ms;
}



.animate-fade.ng-hide {
    opacity: 0;
}

.animate-fade.ng-hide-remove,
.animate-fade.ng-hide-add {
    display: inline-block !important; /* or inline-block, as appropriate */
}

.animate-fade.ng-hide-remove {
    transition: all linear 250ms;
}

.animate-fade.ng-hide-add {
    transition: all linear 0;
}


/*==========================================================*/
/*========================= MEDIA ==========================*/
/*==========================================================*/
@media screen and (max-width: 400px) {

    .popup-menu .popup-menu-displayname {
        font-size: 24px !important;
    }
    .popup-menu .popup-menu-body-container {
        margin-top: 42px;
    }
        .popup-menu .popup-menu-body-container img {
            display:none;
        }

        .popup-menu .popup-menu-body-container .popup-menu-sub-item {
            display: block;
        }
            .popup-menu .popup-menu-body-container .popup-menu-sub-item a {
                padding-bottom: 12px;
            }



}

/*==========================================================*/
/*========================= MEDIA ==========================*/
/*==========================================================*/
@media screen and (max-width: 767px) {

    .form-with-steps .step .step-body {
        padding: 8px 0 0 0;
        border-left: 0;
        margin-left: 0;
        padding-bottom: 16px;
    }

    
}

@media screen and (max-width: 991px) { /* Specific to this particular image */



    /* popup-menu */
    .popup-menu-backdrop,
    .popup-menu {
    }

        .popup-menu .popup-menu-displayname {
            font-size: 22px;
        }

        .popup-menu .popup-menu-body-container {
            padding-top: 24px;
        }

            .popup-menu .popup-menu-body-container .popup-menu-sub-item {
                display: block;
            }

                .popup-menu .popup-menu-body-container .popup-menu-sub-item a {
                    display: flex !important;
                    align-items: center;
                }

                    .popup-menu .popup-menu-body-container .popup-menu-sub-item a img {
                        max-width: 64px;
                    }

                    .popup-menu .popup-menu-body-container .popup-menu-sub-item a h5 {
                        flex-grow: 1;
                        text-align: left;
                        margin: 0 0 0 16px;
                    }

                    .popup-menu .popup-menu-body-container .popup-menu-sub-item a div {
                        margin: 0 !important;
                    }



    /* navbar */

    .navbar .nav > li > a {
        font-size: 20px !important;
        display: block;
        padding: 8px 0;
    }
}


.text-muted-soft {
    color:#aaa;
}

a.anchor {
    display: block;
    position: relative;
    top: -60px;
    visibility: hidden;
}

.modal-backdrop
{
    z-index:1029 !important;
}

.border-top-dark-grey {
    border-top: 1px solid #aaa !important;
}

.border-bottom-dark-grey {
    border-bottom: 1px solid #aaa !important;
}

.dropdown-item {
    color: #000;
}
    .dropdown-item.dropdown-item-selected {
        background-color:#ccc;
    }

    .dropdown-item.active, .dropdown-item:active {
        color:#000;
        background-color: #888;
    }

    .dropdown-item:hover {
        background-color: #eee;
    }

    .border-grey {
        border-color: #ccc !important;
    }

.border-top-grey {
    border-top: 1px solid #ccc !important;
}

.border-bottom-grey {
    border-bottom: 1px solid #ccc !important;
}

.border-left-grey {
    border-left: 2px solid #ddd !important;
}

.border-right-grey {
    border-right: 2px solid #ddd !important;
}


.rounded-sm {
    border-radius: 0.25rem !important;
}

.rounded {
    border-radius: 0.5rem !important;
}
.rounded-top {
    border-top-left-radius: 0.5rem !important;
    border-top-right-radius: 0.5rem !important;
}

.rounded-md {
    border-radius: 0.75rem !important;
}

.rounded-lg {
    border-radius: 0.9rem !important;
}

.rounded-xl {
    border-radius: 1.2rem !important;
}
.rounded-xxl {
    border-radius: 1.8rem !important;
}

.card {
    border:1px solid #ccc;
}


.text-shadow {
    text-shadow: 0px 0px 4px #000;
}


.text-underline {
   text-decoration:underline;
}

.text-strike {
    text-decoration:line-through;
}

.clickable:hover {
    cursor: pointer;
}

.activity-message p {
    margin-bottom: 0.6em;
}

.bg-secondary {
    color: #000;
    background-color: #cbcbcb !important;
}

.pre {
    white-space: pre-wrap;
}

    .pre ul {
        white-space: nowrap;
    }

        .pre ul li {
            white-space: normal;
        }

img.opacity-50 {
    opacity:0.5;
}

img.grayscale, i.grayscale {
    filter: grayscale(1);
}

.w-md-100 {
    width:auto;
}

@media (min-width: 769px) {
    .w-md-100 {
        width: 100%;
    }
}

.custom-control-label {
    position: relative;
    margin-bottom: 0;
    vertical-align: top;
}


.btn-xs {
    font-size: .775em;
    padding: 0 4px;
}

.btn-upload {
    position: relative;
    overflow: hidden;
}

    .btn-upload input {
        position: absolute;
        top: 0;
        right: 0;
        margin: 0;
        opacity: 0;
        filter: alpha(opacity=0);
        transform: translate(-300px, 0) scale(4);
        -webkit-transform: translate(-300px, 0) scale(4);
        -ms-transform: translate(-300px, 0) scale(4);
        -o-transform: translate(-300px, 0) scale(4);
        font-size: 23px;
        direction: ltr;
        cursor: pointer;
    }

* html .btn-upload {
    line-height: 24px;
    margin: 1px -3px 0 0;
}

* + html .btn-upload {
    padding: 2px 15px;
    margin: 1px 0 0 0;
}


.arrow-none:after {
    border: none;
    margin: 0;
    display: none;
}


/* NAV TABS */

.nav-tabs {
    border-bottom-width: 0;
}

    .nav-tabs .nav-link.active {
        color: #222;
        font-weight: 600;
        border-bottom: 3px solid #408a57 !important;
    }

    .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
        color: #000;
        background-color: transparent;
        border-color: #dee2e6 #dee2e6 #fff;
    }

    .nav-tabs .nav-link {
        margin-right: 16px;
        color: #555;
        padding: 0.3rem 0.5rem;
        border: 0 !important;
        border-bottom: 2px solid transparent;
    }

    .nav-tabs .nav-item {
        margin-bottom: 0;
    }

    .nav-tabs.nav-tabs-scrollable {
        display: inline-flex;
        flex-wrap: inherit;
        width: 100%;
        overflow-x: auto;
        -ms-overflow-style: none; /*// IE 10+*/
        overflow: -moz-scrollbars-none; /*// Firefox*/
    }

        .nav-tabs.nav-tabs-scrollable::-webkit-scrollbar {
            display: none; /*Safari and Chrome*/
        }

        .nav-tabs.nav-tabs-scrollable > li > a {
            position: relative;
            display: block;
            padding: 10px 0;
        }
    



body.my-popup-open {    
    overflow: hidden;
    left: 0;
    right: 0;
}

.my-popup {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 1050;
}

    .my-popup .popup-700 {
        max-width: 700px;
    }

    .my-popup .popup-400 {
        max-width: 400px;
        margin:0 auto;
    }

    .my-popup > div {
    }


    .my-popup .my-popup-overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1050;
        text-align: center;
        overflow-y: scroll;
    }
/*
    .my-popup-bottom-mobile .my-popup .my-popup-overlay {
        top:auto !important;
        border-radius: 12px 12px 0 0;
    }
*/

    .my-popup .my-popup-content.centered,
    .my-popup .my-popup-content .centered {
        text-align: center;
    }

    .my-popup .my-popup-content,
    .login-page-content {
        position: relative;
        display: inline-block;
        margin: 48px auto;
        padding: 24px 36px;
        background-color: #fff;
        z-index: 1051;
        border-radius: 8px;
        text-align: left;
        box-shadow: 3px 3px 8px 0px rgba(0,0,0,0.2);
    }

.my-popup-footer {
}

.my-popup .close {
    /*display:none;*/
    position: absolute;
    top: 0;
    right: 0;
}

    .my-popup .close > * {
        padding: 16px;
    }

.my-popup img,
.login-page-content img {
    margin-bottom: 24px;
}

.my-popup h2,
.login-page-content h2 {
    color: #000;
    font-size: 24px;
    margin-top: 0;
    margin-bottom: 24px;
}

.my-popup h3,
.login-page-content h3 {
    color: #aaa;
    margin-bottom: 32px;
    margin-top: 4px;
}

.login-page-content h4 {
    margin: 32px 0 24px 0;
}

.my-popup h4 {
    margin-top: 0;
}

.my-popup li,
.login-page-content li {
    margin-bottom: 12px;
}

.my-popup .close {
    /*display:none;*/
    position: absolute;
    top: 0;
    right: 0;
}

    .my-popup .close > * {
        padding: 16px;
    }

.my-popup .login-form,
.login-page-content .login-form {
    margin-top: 16px;
}

    .my-popup .login-form input[type=text],
    .login-page-content .login-form input[type=text],
    .my-popup .login-form input[type=password],
    .login-page-content .login-form input[type=password],
    .my-popup .login-form button,
    .login-page-content .login-form button {
        width: 100%
    }


.my-popup .conditions,
.login-page-content .conditions {
    color: #888;
    margin-top: 16px;
    font-size: 12px;
}

    .my-popup .conditions a,
    .login-page-content .conditions a {
        font-weight: 600;
    }


.my-popup .separator,
.login-page-content .separator {
    background: transparent url('/Plugins/Misc.Optimum/Content/img/dot-eee.png') repeat-x left 10px;
}

.grecaptcha-badge {
    visibility: hidden;
}

.login-page-content .separator {
    text-align: center;
}

    .my-popup .separator span,
    .login-page-content .separator span {
        display: inline-block;
        margin: 0 auto;
        padding: 0 8px;
        background-color: #fff;
    }


    .my-popup .my-popup-content .my-popup-content-absolute {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 64px;
    }


.my-popup .footer {
    margin-top: 24px
}

.my-popup .my-popup-content .my-popup-content-420 {
    min-width: 420px;
}


@media (max-width: 768px)  {

    .dropdown-item {
        padding: 0.75rem 1.5rem;
    }

    .my-popup .my-popup-content .my-popup-content-420 {
        min-width: unset;
    }

    .my-popup .my-popup-content {
        margin: 0;
        border-radius: 0;
        box-shadow: none;
        /* height: 100%; */
        /*position: absolute;
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;*/
        min-width:inherit;
        width: 100%;
        padding: 12px 20px;
    }
    .my-popup .my-popup-overlay {
        background-color: #fff;
    }
}



/* 
    POPUP right panel
    ==========================
*/

.my-popup-right-panel .my-popup-content {
    margin: 0;
    /* height: 100%; */
    /* width: 100%; */
    position: absolute;
    left: 128px;
    top: 0;
    bottom: 0;
    right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.my-popup-right-panel .my-popup-overlay {
    overflow: hidden;
}

.my-popup-right-panel .my-popup-content .my-popup-content-header {
    padding: 12px 36px;
}

.my-popup-right-panel .my-popup-content .my-popup-content-footer {
    padding: 24px 36px;
}

.my-popup-right-panel .my-popup-content .my-popup-content-body {
    position: relative;
    overflow-y: auto;
}

.my-popup-right-panel .my-popup-content .my-popup-content-body {
    position: relative;
    overflow-y: auto;
}

.my-popup-right-panel .my-popup-content .my-popup-content-body-content {
    height: 100%;
    padding: 12px 0px;
}


@media (max-width: 768px) {
    .my-popup-right-panel .my-popup-content {
        left: 0;
    }
}

@media (min-width: 769px) and (max-width: 991px) {
    .my-popup-right-panel .my-popup-content {
        left: 32px;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .my-popup-right-panel .my-popup-content {
        left: 64px;
    }
}

/* 
    POPUP medium
    ==========================
*/
.my-popup-medium .my-popup-content {
    min-width:700px;
}


/* 
    POPUP centered header
    ==========================
*/
.my-popup-content-header-centered {
    display: none;
}
.my-popup-centered-header .my-popup-content-header-centered {
    display: block;
}



/* 
    POPUP almost fullscreen
    ==========================
*/
.my-popup-fullscreen .my-popup-content {
    margin: 0;
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    border-radius: 0;
    z-index: 1000;
}

.my-popup-fullscreen .my-popup-overlay {
    overflow: hidden;
}

.my-popup-fullscreen .my-popup-content .my-popup-content-header {
    padding: 12px 36px;
}

.my-popup-fullscreen .my-popup-content .my-popup-content-footer {
    padding: 24px 36px;
}

.my-popup-fullscreen .my-popup-content .my-popup-content-body {
    position: relative;
    overflow-y: auto;
}

.my-popup-fullscreen .my-popup-content .my-popup-content-body-scroll {
    position: absolute;
    overflow: auto;
    top: 60px;
    bottom: 0;
    right: 0;
    left: 0;
}

.my-popup-fullscreen .my-popup-content .my-popup-content-body-content {
    height: 100%;
    padding: 12px 0px;
}

.my-popup-fullscreen.my-popup-fullscreen-left-overlay-visible .my-popup-content {
    left: 80px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}


@media (min-width: 769px) and (max-width: 991px) {
    .my-popup-fullscreen.my-popup-fullscreen-left-overlay-visible .my-popup-content {
        left: 32px;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .my-popup-fullscreen.my-popup-fullscreen-left-overlay-visible .my-popup-content {
        left: 64px;
    }
}





/* 
    POPUP almost fullscreen
    ==========================
*/
.my-popup-almost-fullscreen .my-popup-content {
    margin: 0;
    position: absolute;
    left: 16px;
    top: 16px;
    bottom: 16px;
    right: 16px;
}

.my-popup-almost-fullscreen .my-popup-overlay {
    overflow: hidden;
}

.my-popup-almost-fullscreen .my-popup-content .my-popup-content-header {
    padding: 12px 36px;
}

.my-popup-almost-fullscreen .my-popup-content .my-popup-content-footer {
    padding: 24px 36px;
}

.my-popup-almost-fullscreen .my-popup-content .my-popup-content-body {
    position: relative;
    overflow-y: auto;
}

.my-popup-almost-fullscreen .my-popup-content .my-popup-content-body-content {
    height: 100%;
    padding: 12px 0px;
}



/* ====================
    external-logins  
    ======================
*/
.external-logins {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

    .external-logins li {
        margin-left: 0;
    }

.external-login {
    display: inline-block;
    color: #fff;
    font-weight: 500;
    font-size: 16px;
    line-height: 30px;
    border-radius: 4px;
    padding: 4px;
    width: 275px;
    height: 40px;
    text-align: center;
    margin-bottom: 16px;
}

    .external-login:hover, .external-login:focus, .external-login:active {
        color: #fff;
    }

    .external-login.google {
        background-color: #4285f4;
    }

    .external-login.facebook {
        background-color: #4267b2;
    }

    .external-login.microsoft {
        background-color: #888;
    }

    .external-login .logo {
        display: inline-block;
        background-color: #fff;
        border-radius: 2px;
        padding: 4px;
        width: 26px;
        height: 26px;
        float: left;
        margin: 3px;
    }

        .external-login .logo img {
            display: block;
            margin: 0;
        }

    .external-login img {
        width: 100%;
    }

    .external-login.facebook .logo {
        padding: 0 !important;
    }

        .external-login.facebook .logo img {
            border-radius: 2px;
        }




/*.search-field */
.search-field {
    position: relative;
}

    .search-field .has-keywords {
        background-color: #f5edb6;
    }

    .search-field i {
        /*font-size: 16px;*/
    }

    .search-field .clear {
        position: absolute;
        margin-left: -31px;
        top: 0;
        right: 0;
        z-index: 10;
        padding: 8px;
    }

        .search-field .clear.clear-sm {
            padding: 4px 8px !important;
        }



/* LIVE SAVING CONTROL */

.live-saving {
    position:relative
}

    .live-saving.live-saving-inprogress {
    }
    .live-saving.live-saving-completed {
    }

    .live-saving .live-saving-inprogress-icon,
    .live-saving .live-saving-completed-icon {
        display: none;
        position: absolute;
        right: 6px;
        top: 4px;
    }

    .live-saving.checkbox .live-saving-inprogress-icon,
    .live-saving.checkbox .live-saving-completed-icon {
        position: relative;
    }
    .live-saving.checkbox label {
        margin-right: .5rem !important;
    }

    /*inprogress*/
    .live-saving .live-saving-inprogress-icon {
    }
    .live-saving.live-saving-inprogress .live-saving-inprogress-icon {
        display: inline-block;
    }

    /*completed*/
    .live-saving .live-saving-completed-icon {
    }
    .live-saving.live-saving-completed .live-saving-completed-icon {
        display: inline-block;
    }


/* profile-popup =======================*/

.profile-popup-overlay {
    position: fixed;
    right: 0;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 9;
}


.profile {
    position: relative;
    text-align: left;
}

    .profile .profile-popup-content {
        position: absolute;
        white-space: nowrap;
        right: 0;
        top: 0;
        background-color: #fff;
        border-radius: 3px;
        border: 1px solid #ddd;
        z-index: 10;
    }

/* Datepicker ==============================*/
.datepicker {
    border: 1px solid #ebeff8;
    padding: 8px;
    box-shadow: 2px 2px 20px 4px rgb(0 0 0 / 20%);
}

    .datepicker > div {
        display: block;
    }

    .datepicker table tr td.active, .datepicker table tr td.active:hover, .datepicker table tr td.active.disabled,
    .datepicker table tr td.active.disabled:hover, .datepicker table tr td.selected,
    .datepicker table tr td.selected.disabled, .datepicker table tr td.selected.disabled:hover,
    .datepicker table tr td.selected:hover {
        background-color: #75af42 !important;
        background-image: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        color: #ffffff;
    }

    .datepicker table tr td.today, .datepicker table tr td.today.disabled,
    .datepicker table tr td.today.disabled:hover, .datepicker table tr td.today:hover {
        background-color: #eee !important;
        background-image: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        color: #000;
    }

.table-condensed > thead > tr > th, .table-condensed > tbody > tr > td {
    padding: 5px;
}

.input-group-text {
    font-size: 14px;
}


/* APP LEFT MENU =======================*/

.left-menu-fixed {
    padding-top: 56px;
    margin-right:16px;
}

    .left-menu-fixed i.mdi {
        font-size:24px;
    }
    .left-menu-fixed.active {
        margin-left: 0;
        transform: none;
    }

    /*.left-menu-fixed .toggle-button {
        position: absolute;
        top: 0;
        left: 210px;
    }*/

    .left-menu-fixed .sidebar-header {
        padding: 24px 16px 12px;
        border-bottom: 1px solid #eee;
    }

    .left-menu-fixed .sidebar-content {
        height: 100%;
        padding-bottom: 120px;
    }

    .left-menu-fixed ul.components {
        padding: 20px 0;
    }

    .left-menu-fixed ul p {
        color: #222;
        padding: 10px;
    }

    .left-menu-fixed ul li a {
        padding: 0 24px 0 20px;
        font-size: 0.9em;
        display: block;
        color: #000;
        font-weight: 600;
        margin-bottom: 8px;
    }

        .left-menu-fixed ul li a:hover {
            color: #000;
            background: #d3e5e7;
            text-decoration: none;
            border-top-right-radius: 24px;
            border-bottom-right-radius: 24px
        }        

        .left-menu-fixed ul li.active > a {
            color: #000;
            background: #d3e5e7;
            font-weight: 600;
            border-top-right-radius: 24px;
            border-bottom-right-radius: 24px
        }

            .left-menu-fixed ul li a.prevent-click:hover,
            .left-menu-fixed ul li.active > a.prevent-click {
                background: #eee !important;
            }

    /* SPINNER =======================*/
    .spinner {
        position: absolute;
        width: 78px;
        height: 78px;
        left: 50%;
        margin-left: -39px;
        margin-top: -39px;
    }

.spinner:before {
  content: '';
  position: absolute;
  width: 45px;
  height: 45px;
  top: 50%;
  margin-top: -23px;
  left: 50%;
  margin-left: -23px;
  border-width: 2px 1px;
  border-style: solid;
  border-color: #33cdff rgba(51, 205, 255, 0.3);
  border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  animation: spin 3.45s infinite;
  -o-animation: spin 3.45s infinite;
  -ms-animation: spin 3.45s infinite;
  -webkit-animation: spin 3.45s infinite;
  -moz-animation: spin 3.45s infinite;
}

.spinner:after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  top: 50%;
  margin-top: -6px;
  left: 50%;
  margin-left: -6px;
  background-color: #33cdff;
  border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  animation: pulse 6.9s infinite, borderPulse 6.9s infinite;
  -o-animation: pulse 6.9s infinite, borderPulse 6.9s infinite;
  -ms-animation: pulse 6.9s infinite, borderPulse 6.9s infinite;
  -webkit-animation: pulse 6.9s infinite, borderPulse 6.9s infinite;
  -moz-animation: pulse 6.9s infinite, borderPulse 6.9s infinite;
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(1080deg);
            transform: rotate(1080deg);
  }
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(1080deg);
  }
}

@keyframes pulse {
  0% {
    background-color: rgba(51, 205, 255, 0.2);
  }
  13% {
    background-color: rgba(51, 205, 255, 0.2);
  }
  15% {
    background-color: rgba(51, 205, 255, 0.9);
  }
  28% {
    background-color: rgba(51, 205, 255, 0.9);
  }
  30% {
    background-color: rgba(51, 205, 255, 0.2);
  }
  43% {
    background-color: rgba(51, 205, 255, 0.2);
  }
  45% {
    background-color: rgba(51, 205, 255, 0.9);
  }
  70% {
    background-color: rgba(51, 205, 255, 0.9);
  }
  74% {
    background-color: rgba(51, 205, 255, 0.2);
  }
  100% {
    background-color: rgba(51, 205, 255, 0.9);
  }
}

@-webkit-keyframes pulse {
  0% {
    background-color: rgba(51, 205, 255, 0.2);
  }
  13% {
    background-color: rgba(51, 205, 255, 0.2);
  }
  15% {
    background-color: rgba(51, 205, 255, 0.9);
  }
  28% {
    background-color: rgba(51, 205, 255, 0.9);
  }
  30% {
    background-color: rgba(51, 205, 255, 0.2);
  }
  43% {
    background-color: rgba(51, 205, 255, 0.2);
  }
  45% {
    background-color: rgba(51, 205, 255, 0.9);
  }
  70% {
    background-color: rgba(51, 205, 255, 0.9);
  }
  74% {
    background-color: rgba(51, 205, 255, 0.2);
  }
  100% {
    background-color: rgba(51, 205, 255, 0.9);
  }
}

@keyframes borderPulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 white, 0 0 0 1px rgba(51, 205, 255, 0.8);
            box-shadow: 0 0 0 0 white, 0 0 0 1px rgba(51, 205, 255, 0.8);
  }
  40% {
    -webkit-box-shadow: 0 0 0 1px white, 0 0 0 2px rgba(51, 205, 255, 0.8);
            box-shadow: 0 0 0 1px white, 0 0 0 2px rgba(51, 205, 255, 0.8);
  }
  80% {
    -webkit-box-shadow: 0 0 0 3px #ffffff, 0 0 1px 3px rgba(51, 205, 255, 0.8);
            box-shadow: 0 0 0 3px #ffffff, 0 0 1px 3px rgba(51, 205, 255, 0.8);
  }
}

@-webkit-keyframes borderPulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 white, 0 0 0 1px rgba(51, 205, 255, 0.8);
            box-shadow: 0 0 0 0 white, 0 0 0 1px rgba(51, 205, 255, 0.8);
  }
  40% {
    -webkit-box-shadow: 0 0 0 1px white, 0 0 0 2px rgba(51, 205, 255, 0.8);
            box-shadow: 0 0 0 1px white, 0 0 0 2px rgba(51, 205, 255, 0.8);
  }
  80% {
    -webkit-box-shadow: 0 0 0 3px #ffffff, 0 0 1px 3px rgba(51, 205, 255, 0.8);
            box-shadow: 0 0 0 3px #ffffff, 0 0 1px 3px rgba(51, 205, 255, 0.8);
  }
}

@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}



.auto-resize {
    width: 100%;
    overflow: hidden;
    resize: none;    
}


/* CONTROLS OVERRIDES */

body {
    letter-spacing: 0.2px;
}
h1 {
    font-weight: 400;
    font-size: 32px;
    margin-bottom: 16px;
}

img {
    display: inline;
}

a {
    color: #222;
    text-decoration: none;
}

.navbar .nav > li > a {
    font-size: 16px;
    font-weight: 600;
    color:#555;
}

.font-serif {
    font-family: 'Poly', sans-serif !important;
}

.other-lang {
    color: #75af42 !important;
}

.selected {
    background-color: #aaa;
    color: #fff;
    font-weight:600;
}

.badge-success {
    background-color: #75af42 !important;
}

.text-primary {
    color: #75af42 !important;
}

.btn {
    font-weight: 500;
}

    .btn.btn-primary {
        color: white;
        background-color: #75af42;
        border: 1px solid #75af42;        
    }
        .btn.btn-primary:hover {
            color: white;
            background-color: #4a7525;
            border: 1px solid #4a7525;
        }

    .btn.btn-outline-primary {
        color: #75af42;
        /*background-color: #75af42;*/
        border: 1px solid #75af42;
    }

        .btn.btn-outline-primary:hover {
            color: white;
            background-color: #4a7525;
            border: 1px solid #4a7525;
        }
    /*.btn, .btn.btn-default {
        color: #222;
        border: 1px solid #222;
        border-radius: 2px;
    }
        .btn:hover {
            color: #f5f5f5;
            background-color: #222;
        }*/

    .btn.btn-dark {
        background-color: #1c1c1c;
        border-color: #1c1c1c;
    }
        .btn.btn-dark:hover {
            background-color: #000;
            border-color: #000;
        }



.btn-link {
    color: #4f8024;
    border-color: transparent;
}
    .btn-link:hover, .btn-link:active, .btn-link:focus {
        text-decoration: none;
        background-color: transparent;
        color: #222;
    }

.btn-outline-primary:hover {
    border: 1px solid #222;
}

.btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .show > .btn-outline-primary.dropdown-toggle,
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle {
    color: white;
    background-color: #75af42;
    border: 1px solid #75af42;
}

    .btn.focus, .btn:focus,
    .btn-outline-primary.focus, .btn-outline-primary:focus,
    .btn-primary.focus, .btn-primary:focus,
    .btn-outline-primary:not(:disabled):not(.disabled).active:focus, .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-primary.dropdown-toggle:focus,
    .btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-primary.dropdown-toggle:focus {
        box-shadow: none;
    }


    .popup-menu-backdrop {
        top: 84px;
    }

.popup-menu {
    top: 84px;
}

.popup-menu-displayname {
    color: #231f20;
    font-weight: 500;
    font-size: 24px;    

}


.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
    background-color: #999;
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #75af42;
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #75af42;
}

.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
    background-color: rgba(150, 150, 150, 0.5);
}


textarea.form-control,
select.form-control,
input[type=text].form-control,
input[type=password].form-control,
input[type=email].form-control,
input[type=tel].form-control {
    background-color: #eee;
    border-color: #ddd;
}

    textarea.form-control:focus,
    input[type=text].form-control:focus,
    input[type=password].form-control:focus,
    input[type=email].form-control:focus,
    input[type=tel].form-control:focus {
        background-color: #fff;        
    }


/* ======================== STRUCTURE ========================  */
.main-text p {
    margin: 0 0 24px;
}
.header {
    background: transparent url('/Apps/Optimum/Content/img/palm.jpg') center -93px no-repeat;
}

.navbar {
    margin: 12px 0;
}
    .navbar .navbar-brand {
    }
        .navbar .navbar-brand > img {
            height: 60px;
        }


    .special-container-glasses {
        margin-bottom:32px;
    }
        .special-container-glasses img {            
            max-width: 480px;
        }




.slick-carousel.product-detail-carousel {
}


    .slick-carousel.product-detail-carousel .slick-prev,
    .slick-carousel.product-detail-carousel .slick-next {
        width: 10%;
        height: 100%;
    }
    .slick-carousel.product-detail-carousel .slick-prev {
        text-align: left;
        /*left: -53px;*/
    }
    .slick-carousel.product-detail-carousel .slick-next {
        text-align: right;
        /*right: -25px;*/
    }



/* ======================== PAGE TEMPLATES ========================  */
.template .header {
    color: #fff;
}


.template.list-template .header,
.template.details-template .header {
    padding: 16px 0 16px;
}

.template.details-template .header {
}

    .template.list-template .header h1,
    .template.details-template .header h1 {
        font-size: 2em;
        line-height: 1;
        font-weight: 600;
        margin: 32px 0;
    }        
        .template.details-template .header h2,
        .template.details-template .header h3 {
            color: #ddd;
        }

        .template.details-template .header p{
        }

        .template.landing-template .header {
            padding: 0 0 123px;
        }
    .template.landing-template .header h1,
    .template.landing-template .header p {
        /*color: #fff !important;*/
    }

    .template.landing-template .header h1 {
        font-weight: 600 !important;
        font-size: 58px;
        line-height: 1;
        margin-top: 100px;
    }

            .template.landing-template .services h3 {
                font-weight: 600 !important;
                color:#333;
                margin-bottom:0;
            }



.template.store-template .header {
    color: #fff;
    padding: 0;
}
    .template.store-template .header .container-fluid {
        padding: 24px 0 24px 0;
        background-color: rgba(0,0,0,0.4);
    }

    .template.store-template .header h1 {
        font-size: 3em;
        line-height: 1;
        font-weight: 600;
        margin-bottom:0;
        text-shadow: 1px 1px 5px rgba(0,0,0,0.5)
    }

    .template.store-template .header h5 {
        text-shadow: 1px 1px 5px rgba(0,0,0,0.5)
    }

        .template.store-template h7 {
            color: #888;
        }

    .template.store-template h2 {
        margin-bottom:16px;
    }



@media (min-width: 769px) {

    .template.store-template .header h1 {
        font-size: 5em;
   
    }

}






/* ======================== WEPAGES ========================  */


.webpage-detail {

}

    .webpage-detail .webpage-content a:not(.btn),
    .webpage-detail .webpage-content a:focus:not(.btn),
    .template.store-template a:not(.btn),
    .template.store-template a:focus:not(.btn) {
        border-bottom: 1px solid #ccc;
        color: #4f8024;
    }


/* ======================== PROMOS ========================  */
.season-promo {
    max-width: 1200px;
    margin: 0 auto 100px auto;
}

    .season-promo .promo-content {
        background: transparent url('/img/promo/je-vois-sans-compromis-2018-480.jpg') no-repeat center bottom;
        padding: 24px;
        position: relative;
    }


    .season-promo .promo-style-1 {
        font-size: 1.3em;
        text-transform: uppercase;
        margin: 16px;
        color: #555;
    }

    .season-promo .promo-style-2 {
        font-size: 1.5em;
        font-weight: 300;
        line-height: 1.3em;
    }

    .season-promo .promo-style-3 {
        font-size: 3em;
        line-height: 1em;
        font-weight: 400;
        color: #07a50d;
        margin: 8px 0;
    }

    .season-promo .promo-style-4 {
        font-size: 1em;
        margin: 18px 0 24px;
    }

    .season-promo .logo-nikon {
        margin-right: 16px;
    }

    .season-promo .logo-lenses {
        width: 100px;
    }



@media (min-width: 481px) {
    .season-promo .promo-content {
        background: transparent url(/img/promo/je-vois-sans-compromis-2018-768.jpg) no-repeat right top;
        padding: 60px 0 0 60px;        
    }
}

@media (min-width: 769px)  {
    .season-promo .promo-content {
        background: transparent url(/img/promo/je-vois-sans-compromis-2018-1200.jpg) no-repeat right top;
        padding: 60px 0 0 108px;
    }
}


/* ======================== EXAMS ========================  */
.home-exam {
    
    margin: 0 auto;
    padding:
}

    .home-exam .home-exam-content {
        background: transparent url('/Apps/Optimum/Content/img/exams/examen-de-la-vue-1200.jpg') no-repeat center bottom;
        padding: 64px 0 160px 96px;
        position: relative;
    }


    .home-exam .home-exam-style-1 {
        font-size: 1.3em;
        text-transform: uppercase;
        margin: 16px;
        color: #555;
    }

    .home-exam .home-exam-style-2 {
        font-size: 1.5em;
        font-weight: 500;
        line-height: 1.3em;
        font-family: 'Poly', sans-serif !important;
    }

    .home-exam .home-exam-style-3 {
        font-size: 3em;
        line-height: 1em;
        font-weight: 600;
        color: #07a50d;
        margin: 8px 0;
        font-family: 'Poly', sans-serif !important;
    }

    .home-exam .home-exam-style-4 {
        font-size: 1em;
        margin: 18px 0 24px;
    }

    .home-exam .logo-nikon {
        margin-right: 16px;
    }

    .home-exam .logo-lenses {
        width: 100px;
    }



@media (max-width: 480px) {
    .home-exam .home-exam-content {
        background-image: none;
        padding: 24px 16px 64px;        
    }

    .home-exam .home-exam-style-3 {
        max-width: 300px;
        font-size: 2.5em;
    }

}

@media (max-width: 768px) and (min-width:481px)  {
    .home-exam .home-exam-content {
        background: transparent url(/Apps/Optimum/Content/img/exams/examen-de-la-vue-768.jpg) no-repeat center center;
        padding: 48px 0 72px;
    }

    .home-exam .home-exam-style-3 {
        max-width: 200px;
    }

}


@media (max-width: 991px) and (min-width:769px) {
    .home-exam .home-exam-content {      
        padding: 48px 0;
    }
}



/**
 * The CSS shown here will not be introduced in the Quickstart guide, but shows
 * how you can use CSS to style your Element's container.
 */
.StripeElement {
    background-color: #eeeeee;
    border-radius: 4px;
    padding: 2px 6px;
    border: 1px solid #ddd;
}

    .StripeElement.is-focused {
        background-color: #fff !important;        
        color: #495057;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
        
    }

.StripeElement--invalid {
    border-color: #fa755a;
}

.StripeElement input {    
    border-color: #eeeeee;
}

#cardName {
    line-height: 36px;
    font-weight: 300;
    font-size: 16px;
}
#cardName::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #8898AA;
}