@text-color: #777;
@main-blue: #4a8ef4;
@light-blue: #e5ebf5;
@dark-blue: #184993;
@main-orange: #e66131;

@-ms-keyframes wiggle{0%{-ms-transform:rotate(3deg);}50%{-ms-transform:rotate(-3deg);}100%{-ms-transform:rotate(3deg);}}
@-moz-keyframes wiggle{0%{-moz-transform:rotate(3deg);}50%{-moz-transform:rotate(-3deg);}100%{-moz-transform:rotate(3deg);}}
@-webkit-keyframes wiggle{0%{-webkit-transform:rotate(3deg);}50%{-webkit-transform:rotate(-3deg);}100%{-webkit-transform:rotate(3deg);}}
@keyframes wiggle{0%{transform:rotate(3deg);}50%{transform:rotate(-3deg);}100%{transform:rotate(3deg);}}

.transitions(@time,@ease){
    -webkit-transition: all @time ease-out @ease;
    -moz-transition: all @time ease-out @ease;
    -o-transition: all @time ease-out @ease;
    transition: all @time ease-out @ease;
}

.shadow(@h,@v,@b,@s,@c){
    -webkit-box-shadow: @h @v @b @s @c;
    -moz-box-shadow: @h @v @b @s @c;
    box-shadow: @h @v @b @s @c;
}

html,body{
    padding: 0;
    margin: 0;
    height: 100%;
    color: @text-color !important;
    font-family: "proxima-nova",sans-serif;
    counter-reset: item;
}

.greydiv{
    background: #ededed;
}

.wrapper{
    position: relative;
    min-height: 100%;
    width: 100%;
    background: #fff;
}
.website-content{
    padding-bottom: 75px;
}

.header-bg{
    height: 80px;
    background: @main-blue;
}

.sep05{
    height: 5px;
    clear: both;
}
.sep10{
    height: 10px;
    clear: both;
}
.sep20{
    height: 20px;
    clear: both;
}
.sep30{
    height: 30px;
    clear: both;
}

h1,h2,h3{
    font-family: "proxima-nova-condensed";
    color: @main-blue;
    font-size: 28pt;
    font-weight: 100;
    margin-bottom: 20px;
    i{
        color: @main-orange;
        padding-right: 10px;
    }
}

h4{
    font-family: "proxima-nova-condensed";
    color: @main-blue;
    font-size: 26pt;
    font-weight: 100;
    margin-bottom: 20px;
    i{
        color: @main-orange;
        padding-right: 10x;
    }
}

p{
    font-size: 14pt;
    line-height: 32px;
    font-weight: 300;
    color: #555;
    margin-bottom: 30px;
}

header{
    z-index: 1000;
    height: 80px;
    width: 100%;
    position:fixed;
    top: 0;
    background-color: @main-blue;
    color: #fefefe;
    .transitions(100ms,100ms);
    .head-logo{
        padding-top: 16px;
        width: 150px;
        .transitions(100ms,100ms);
        img{
            width: 105px;
            .transitions(100ms,100ms);
        }
    }
    #main-navigation{
        list-style-type: none;
        position: absolute;
        right: 0;
        padding: 0;
        margin: 0;
        padding-top: 27px;
        li{
            float: left;
            padding: 0 3px;
            a{
                display: block;
                color: #fff;
                text-transform: uppercase;
                font-size: 12pt;
                font-weight: 600;
                padding: 0 12px;
                .transitions(100ms,100ms)
            }
            a:hover{
                text-decoration: none;
                background: #5c9af5;
            }
        }
        li.active{
            a{
                background: #5c9af5;
                cursor: default;
            }
        }
        .transitions(100ms,100ms);
    }
    .languages-desktop{
        .transitions(100ms,100ms);
    }
}

header.tiny{
    height: 50px;
    position:fixed;
    top:0;
    .transitions(100ms,100ms);
    .head-logo{
        padding-top: 10px;
        width: 150px;
        .transitions(100ms,100ms);
        img{
            width: 70px;
            .transitions(100ms,100ms);
        }
    }
    #main-navigation{
        padding-top: 13px;
    }
    .languages-desktop{
        top: 14px;
        right: 25px;
        .transitions(100ms,100ms);
    }
}

#main-navigation-mobile{
    list-style-type: none;
    padding: 0;
    margin: 0;
    background: @dark-blue;
    li{
        height: 50px;
        border-top: 1px solid @main-blue;
        a{
            color:  @light-blue;
            font-size: 14pt;
            line-height: 50px;
            padding-left: 15px;
        }
    }
}

.languages-desktop{
    position: absolute;
    top:28px;
    right:25px;
    ul#languages-holder{
        padding: 0;
        margin: 0;
        list-style-type: none;
        display: block;
        li{
            position: relative;
            > a{
                display: block;
                color: #fff;
                text-transform: uppercase;
                text-decoration: none;
                padding: 0 8px;
            }
            .sel-language{
                list-style-type: none;
                display: block;
                background: #387de5;
                padding: 3px 8px;
                margin: 0;
                opacity: 0;
                visibility: hidden;
                position: absolute;
                top:23px;
                left:0;
                .transitions(100ms,100ms);
                .shadow(0px,0px,2px,0,rgba(0,0,0,0.2));
                li{
                    > a{
                        font-weight: bold;
                        padding: 0;
                    }
                    a:hover{
                        text-decoration: underline;
                    }
                }
            }
        }
        li.hovered{
            .sel-language{
                opacity: 1;
                visibility: visible;
                height: auto;
                .transitions(100ms,100ms);
            }
        }
    }
}

.languages-desktop::before {
    content: "\f0ac";
    font-family: FontAwesome;
    position: absolute;
    left: -12px;
    top: 0;
    color: #91b6ed;
}
.languages-desktop::after {
    content: "\f107";
    font-size: 10px;
    font-family: FontAwesome;
    position: absolute;
    right: -3px;
    top: 1px;
}

.mobile-navigation{
    overflow:hidden;
    .transitions(300ms,100ms);
    .mnav-control{
        height: 50px;
        background: @main-orange;
        a{
            color: #fff;
            font-weight: bold;
            font-size: 18pt;
            line-height: 50px;
            i{
                padding-right: 10px;
            }
        }
        a:hover{
            text-decoration: none;
        }
    }
}
.mobile-navigation.collapsed{
    height: 50px !important;
    .transitions(300ms,100ms);
}

.home-splash-holder{
    width: 100%;
    height: 560px;
    background-color: #000;
    background: url('../images/hpbg_01.jpg') 50% 0 no-repeat;
    overflow: hidden;
    .transitions(100ms,100ms);
    .shadow{
        width: 100%;
        height: 100%;
        position: relative;
        background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 74%, rgba(0,0,0,0.5) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 74%,rgba(0,0,0,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 74%,rgba(0,0,0,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#80000000',GradientType=0 ); /* IE6-9 */

        .container{
            height: inherit;
            position: relative;
            .home-login-holder{
                position:relative;
            }
            .login-line{
                height: 55px;
                position: absolute;
                top: 0;
                right:0;
                .phone-holder{
                    height: 55px;
                    background: @main-orange;
                    padding: 0 30px;
                    float: left;
                    line-height: 54px;
                    transform: skewX(45deg);
                    .phone{
                        color: #fff;
                        transform: skewX(-45deg);
                        font-size: 13pt;
                        font-family: "proxima-nova-condensed";
                        font-weight: 400;
                        i{
                            padding-right: 10px;
                        }
                    }
                }
                .login-form-holder{
                    height: 55px;
                    z-index: 700;
                    background: #fff;
                    float: left;
                    position: relative;
                    transform: skewX(45deg);
                    .login-form{
                        transform: skewX(-45deg);
                        font-size: 12pt;
                        color: @main-blue;
                        .intro{
                            float: left;
                            padding-left: 40px;
                            margin-top: 13px;
                            height: 28px;
                            line-height: 28px;
                            i{
                                padding-right: 3px;
                            }
                        }
                        form{
                            float: left;
                            display: block;
                            height: 28px;
                            padding-left: 10px;
                            margin-top: 13px;
                            .form-group{
                                display: inline-block;
                                input{
                                    border: none;
                                    background: none !important;
                                    -webkit-border-radius: 0;
                                    -moz-border-radius: 0;
                                    border-radius: 0;
                                    border-bottom: 2px solid @main-blue;
                                    height: 30px;
                                    padding: 0;
                                    color: #777;
                                    font-size: 12pt;
                                    width: 100px;
                                    margin-right: 10px;
                                    -webkit-box-shadow: 0 0 0px 1000px white inset;
                                    -moz-box-shadow: 0 0 0px 1000px white inset;
                                    box-shadow: none;
                                    outline: none;
                                }
                                input:-webkit-autofill {
                                    -webkit-box-shadow: 0 0 0px 1000px white inset;
                                    -webkit-text-fill-color: #777 !important;
                                }
                                input:-moz-autofill {
                                    -moz-box-shadow: 0 0 0px 1000px white inset;
                                    -moz-text-fill-color: #777 !important;
                                }
                            }
                            button{
                                display: inline-block;
                                color: #fff !important;;
                                height: 28px;
                                line-height: 10px;
                                color: @main-blue;
                                -webkit-border-radius: 0;
                                -moz-border-radius: 0;
                                border-radius: 0;
                                border: none;
                                vertical-align:top;
                            }
                        }
                        .form-additional{
                            float: left;
                            padding-left: 20px;
                            margin-top: 13px;
                            height: 28px;
                            span{
                                display: block;
                                height: 14px;
                                font-size: 10pt;
                                line-height: 12px;
                            }
                        }
                    }
                }
            }
            .login-line::after {
                z-index: 500;
                content: "";
                height: 55px;
                width: 3000px;
                background: #fff;
                position: absolute;
                right: -2997px;
                top: 0px;
                transform: skewX(45deg);
            }
            .slogan{
                text-align: center;
                position: absolute;
                width: inherit;
                bottom: 0;
                color: #fff;
                text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
                padding-bottom: 15px;
                h2{
                    font-size: 30pt;
                    color: #fff;
                    font-family: "proxima-nova",sans-serif;
                }
                p{
                    font-size: 18pt;
                    color: #fff;
                    font-weight: 100;
                }
            }
        }
    }
}

.home-splash-holder.tiny{
    height: 55px;
    background: url('../images/tiny_head_bg.jpg') 50% 0 no-repeat;
    .shadow(0px, 0px, 8px, 0px, rgba(0,0,0,0.3));
    .shadow{
        background: none;
    }
}

.mobile-login{
    padding: 15px;
    .intro{
        font-size: 12pt;
        padding-bottom: 15px;
    }
    form{
        padding-bottom: 15px;
    }
    span.block{
        display: block;
        font-size: 12pt;
    }
}

.home-register-text{
    width: 100%;
    min-height: 70px;
    background: @light-blue;
    text-align: center;
    span{
        color: @main-blue;
        font-size: 22pt;
        text-align: center;
        font-weight: 300;
        line-height: 65px;
    }
}
.home-register-button{
    width: 100%;
    min-height: 70px;
    background: @main-blue;
    text-align: center;
    a{
        color: @light-blue;
        text-transform: uppercase;
        font-weight: bold;
        font-size: 23pt;
        line-height: 70px;
        height: 70px;
        display: inline-block;
        position: relative;
        padding: 0 5px;
        .transitions(100ms,100ms);
        i{
            padding-right: 10px;
        }
    }
    a:hover{
        text-decoration: none;
        padding: 0 50px;
        line-height: 75px;
        .transitions(100ms,100ms);
    }
    a::after{
        content: "";
        height: 5px;
        width: 100%;
        background: @dark-blue;
        position: absolute;
        bottom: -5px;
        left: 0;
    }
}

.contact-map-holder{
    padding-top: 25px;
    .map{
        width: 100%;
    }
}

#contact-form{
    .form-group{
        input,textarea{
            border: none;
            background: none !important;
            -webkit-border-radius: 0;
            -moz-border-radius: 0;
            border-radius: 0;
            border-bottom: 2px solid @main-blue;
            height: 30px;
            padding: 0;
            color: #777;
            font-size: 12pt;
            width: 100%;
            -webkit-box-shadow: 0 0 0px 1000px white inset;
            -moz-box-shadow: 0 0 0px 1000px white inset;
            box-shadow: none;
            outline: none;
        }
        textarea{
            height: 95px;
        }
        input:-webkit-autofill {
            -webkit-box-shadow: 0 0 0px 1000px white inset;
            -webkit-text-fill-color: #777 !important;
        }
        input:-moz-autofill {
            -moz-box-shadow: 0 0 0px 1000px white inset;
            -moz-text-fill-color: #777 !important;
        }
    }
    button{
        color: #fff !important;;
        height: 28px;
        line-height: 10px;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        border: none;
        vertical-align:top;
    }
}
.error{
    color: #f00;
}

.success{
    background: #c3ec73;
    height: 50px;
    color: #4e7504;
    font-weight: bold;
    line-height: 50px;
    text-align: center;
    font-size: 14pt;
    text-transform: uppercase;
    display: none;
}


footer{
    display: block;
    min-height: 75px;
    width: 100%;
    background: @main-orange;
    position: absolute;
    bottom: 0;
    .footer-nav{
        list-style-type: none;
        padding: 0;
        margin: 0;
        li{
            display: inline-block;
            float: left;
            a{
                color: #fff;
                font-size: 12pt;
                line-height: 73px;
            }
        }
        li::after{
            content: "\a0\b7\a0";
            color: #fff;
        }
        li:last-child::after{
            content: "";
        }
    }
    .copy{
        color: #fff;
        font-size: 12pt;
        line-height: 73px;
    }
    .designer{
        span{
            color: rgba(255,255,255,0.7);
            font-size: 11pt;
        }
        a{
            color: rgba(255,255,255,0.7);
        }
    }
}

@media all and (max-width: 991px){
    footer{
        .footer-nav{
            text-align: center !important;
            display: inline-block;
        }
        .fcol{
            text-align: center !important;
        }
    }
}


.partner{
    padding: 0;
    margin: 0;
    list-style-type: none;
    li{
        border-bottom: 1px solid #ddd;
        padding: 15px 0;
        line-height: 27px;
        font-size: 12pt;
    }
}

.downloads{
    padding: 0;
    margin: 0;
    list-style-type: none;
    li{
        line-height: 27px;
        font-size: 12pt;
        a{
            i{
                padding-right: 5px;
            }
        }
    }
}

.faq{
    padding: 0;
    margin: 0;
    list-style-type: none;
    li.quest-holder{
        border-bottom: 1px solid #ddd;
        a.question{
            display: block;
            height: 50px;
            line-height: 50px;
            font-size: 13pt;
            font-weight: 600;
            color: #777;
            white-space: nowrap;
            overflow: hidden;
            .transitions(100ms,100ms);
            i{
                padding-right: 7px;
                color: @light-blue;
                .transitions(100ms,100ms);
            }
        }
        a.question:hover{
            text-decoration: none;
            padding-left: 20px;
            .transitions(100ms,100ms);
            i{
                color: @main-blue;
                .transitions(100ms,100ms);
            }
        }
        a.question.pexp{
            i{
                color: @main-blue;
            }
        }
        a.question:active,
        a.question:visited,
        a.question:link{
            text-decoration: none;
        }
        .answer{
            visibility: visible;
            opacity: 1;
            .transitions(100ms,100ms);
            p{
                margin-bottom: 15px;
                font-size: 12pt;
                line-height: 25px;
                font-weight: 400;
                color: #999;
            }
        }
        .answer.ishidden{
            height: 0px !important;
            visibility: hidden;
            opacity: 0;
            overflow: hidden;
            .transitions(100ms,100ms);
        }
    }
    li.quest-holder:last-child{
        border: none;
    }
}

.howto{
    list-style: none;
    position: relative;
    padding: 15px;
    padding-left: 45px;
    padding-bottom: 0px;
    padding-top: 12px;
    li{
        counter-increment: item;
        margin-bottom: 5px;
        position: relative;
        p{
            font-size: 12pt;
            font-weight: 600;
            line-height: 25px;
        }
    }
    li:before {
        position: absolute;
        content: counter(item);
        background: @main-blue;
        left: -37px;
        top: 0;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        font-size: 14pt;
        font-weight: bold;
        color: white;
        width: 25px;
        height: 25px;
        text-align: center;
        display: inline-block;
    }
}

#exampleHeader{
    margin-left: 45px;
    margin-bottom: 10px;
}

.howtoexample{
    margin-left: 5px;
    padding-right: 15px;
    li{
        color: #999;
        p{
            font-size: 11pt;
            font-weight: 600;
            color: #777;
            line-height: 17px;
        }
    }
}
/*angular*/

.alphabet{
    a{
        display: inline-block;
        background: @main-blue;
        color: #fff;
        font-size: 13pt;
        font-weight: bold;
        min-width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        margin-right: 5px;
        margin-bottom: 5px;
        padding: 0 7px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        .transitions(100ms,100ms);
    }
    a:hover{
        text-decoration: none;
        background: @dark-blue;
        .transitions(100ms,100ms);
    }
    a:active,
    a:visited,
    a:link{
        text-decoration: none;
    }
}

.sletter{
    height: 40px;
    line-height: 40px;
    font-size: 24pt;
    font-weight: 100;
    padding-left: 15px;
    color: @dark-blue;
}

.pricelist{
    ul{
        padding: 0;
        margin: 0;
        list-style-type: none;
        li{
            display: block;
            border-bottom: 1px solid #ddd;
            height: 40px;
            line-height: 40px;
            font-size: 12pt;
            div{
                white-space: nowrap;
            }
        }
        li:last-child{
            border-bottom: none;
        }
        .header{
            border-bottom: 3px solid @main-blue;
            font-weight: bold;
        }
    }
}

#side-banner{
    -ms-animation:wiggle .3s 2;-moz-animation:wiggle .3s 2;-webkit-animation:wiggle .3s 2;animation:wiggle .3s 2;
    width: 250px;
    position: fixed;
    top: 0;
    left: -250px;
    background: #fff;
    -webkit-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.55);
    -moz-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.55);
    box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.55);
    .transitions(100ms,100ms);
    .trigger{
        display: block;
        background: @main-blue;
        transform-origin: 100% 0;
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
        height: 35px;
        line-height: 35px;
        padding-right: 15px;
        position: absolute;
        color: #fff;
        font-size: 14pt;
        font-weight: bold;
        text-transform: uppercase;
        white-space: nowrap;
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;
        i{
            padding-right: 10px;
        }
    }
    .trigger:after{
        content: '';
        height: 35px;
        width: 100px;
        background: @main-blue;
        position: absolute;
        bottom: 0;
        left: -20px;
        z-index: -1;
        -moz-transform:skewX(40deg);
        -webkit-transform:skewX(40deg);
        -o-transform:skewX(40deg);
        -ms-transform:skewX(40deg);
        transform:skewX(40deg);
    }
    h3{
        display:block;
        width: 250px;
        background: @main-orange;
        margin: 0;
        padding: 10px 15px;
        color: #fff;
        font-size: 16pt;
        text-transform: uppercase;
    }
    p{
        background: #fff;
        padding: 15px;
        padding-bottom: 5px;
        display: block;
        width: 250px;
        margin: 0;
        line-height: 25px;
        font-weight: 500;
        font-size: 12pt;
    }
    .contact{
        background: #fff;
        width: 250px;
        padding: 10px 15px;
        padding-bottom: 15px;
        span{
            display: block;
            font-size: 13pt;
            i{
                padding-right: 7px;
            }
        }
    }
    .link{
        display: block;
	position: absolute;
	bottom: 0;
        font-size: 14pt;
        font-weight: bold;
        text-transform: uppercase;
        color: #fff;
        background: @main-blue;
        width: 250px;
        padding: 15px;
        i{
            padding-right: 10px;
        }
    }
}
#side-banner:hover{
    left:0;
    .transitions(100ms,100ms);
}