/*@font-face {
  font-family: 'Fenton';
  src: url("../fonts/fentonblack.otf") format("opentype"), 
       url("../fonts/fentonblack-webfont.woff2") format('woff2'), 
       url("../fonts/fentonblack-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}*/
@import url('https://fonts.googleapis.com/css?family=Comfortaa:300,400,700');

html {}

body {padding-top: 60px; font-family: 'Comfortaa', cursive;}
h1, h2, h3, h4, h5, h6 {font-family: 'Comfortaa', cursive;}
h2 {font-size: 32px; font-weight: 700; color: #323b43;}


/* Nav */

/*#logo {
    font-family: 'Fenton';
    font-size: 22px;
    text-decoration: none;
    vertical-align: middle;}

#logo-mini {
    /*font-family: 'Fenton';
    font-size: 24px;
    line-height: 44px;
    text-decoration: none;}*/

#logo span.smart, #logo-mini span.smart {color: #4d9cd8;}
#logo span.widget, #logo-mini span.widget {color: #d9415c;}
#logo:hover span.smart, #logo-mini:hover span.smart {color: #5d9ce8;}
#logo:hover span.widget, #logo-mini:hover span.widget {color: #e9516c;}

.sw-navbar-content {
    float: none;
    height: 60px;
    padding: 0 0;
    text-align: center;}

.uk-navbar-brand {
    height: 44px;
    padding: 0 0;
    color: #dddee2;}

.uk-navbar-toggle {
    height: 44px;
    padding: 0 15px;
    color: #dddee2;}

.uk-navbar-toggle:focus, .uk-navbar-toggle:hover {
    color: #fff;}

.sw-nav {
    position: fixed;
    top: 0;
    z-index: 1000;
    background-color: #2d3035;
    /*background-image: url(images/overlay.png);*/
    width: 100%;
    box-shadow: 0 0 1px 1px rgba(0,0,0,0.3);}

.sw-nav-button {
    -moz-transition: background-color .1s ease-in-out, color .075s ease-in-out;
    -webkit-transition: background-color .1s ease-in-out, color .075s ease-in-out;
    -ms-transition: background-color .1s ease-in-out, color .075s ease-in-out;
    transition: background-color .1s ease-in-out, color .075s ease-in-out;
    font-size: 15px;
    color: #c8ccd7;
    padding: 0 10px;
    background: none;
    border-radius: 6px;
    font-weight: 400;}

.sw-nav-button-reg {
    background-image: -webkit-linear-gradient(top, #d9415c, #c9314c);
    background-image: linear-gradient(to bottom, #d9415c, #c9314c);
    color: #fff;}

.sw-nav-button-vxod {
    background-image: -webkit-linear-gradient(top, #4d9cd8, #3d8cc8);
    background-image: linear-gradient(to bottom, #4d9cd8, #3d8cc8);
    color: #fff;}

.sw-nav-button-default:focus, .sw-nav-button-default:hover {
    position: relative;
    top: 1px;
    background-color: #33373e;
    color: #fff;}

.sw-nav-button-reg:focus, .sw-nav-button-reg:hover {
    position: relative;
    top: 1px;
    background-image: -webkit-linear-gradient(top, #d9415c, #b9213c);
    background-image: linear-gradient(to bottom, #d9415c, #b9213c);
    color: #ffff00;}

.sw-nav-button-vxod:focus, .sw-nav-button-vxod:hover {
    position: relative;
    top: 1px;
    background-image: -webkit-linear-gradient(top, #4d9cd8, #2d7cb8);
    background-image: linear-gradient(to bottom, #4d9cd8, #2d7cb8);
    color: #ffff00;}


/* Banner */

#banner {
    background: #fafaff;
    /*padding: 40px 0 50px;*/
    min-height: calc(100vh - 60px);
    color: #323b43;}
#banner .gadgets img {max-height: 320px;}

/* Banner-Text */

#banner h1, #banner-index-partner h1 {
    text-transform: uppercase;
    font-size: 36px;
    font-weight: 500;
    margin: 20px 0;
    line-height: normal;}

		#banner p, #banner-index-partner p {
			font-weight: 500;
                        font-size: 28px;
                        line-height: normal;
                        text-transform: uppercase;
                        margin: 0 0 20px 0;
                        text-transform: none;}

		#banner .button, #banner-index-partner .button {
			-moz-transition: background-color .2s ease-in-out, color .2s ease-in-out;
			-webkit-transition: background-color .2s ease-in-out, color .2s ease-in-out;
			-ms-transition: background-color .2s ease-in-out, color .2s ease-in-out;
			transition: background-color .2s ease-in-out, color .2s ease-in-out;
			color: #fff;
			font-weight: 400;
                        background-image: linear-gradient(to bottom, #d9415c, #c9314c);
			border-radius: 6px;
                        font-size: 20px;
                        padding: 8px 24px;
                        margin: 0 0 30px 0;}

			#banner .button:hover, #banner-index-partner .button:hover {
				color: #fff;
                                background-image: linear-gradient(to bottom, #c9314c, #b9213c);}

			#banner .button:active, #banner-index-partner .button:active {
				color: #ffffaa;
                                background-color: rgba(206, 56, 9, 0.8);}


/* Content */

      /* как это работает */
        #interes {
                padding: 40px 0;
                background: #33373e;
                color: #7c8290;
                box-shadow: 0 0 1px 1px rgba(0,0,0,0.3);}
        #interes .int div {margin: 10px 0 20px;}
	#interes h2 {color: #fff;}
        #interes h3 {margin: 0; color: #6dacf8; font-weight: 700;}
        #interes p {margin-top: 5px; font-size: 16px; color: #fff;}

      /* виджеты */
        #widgets {
             background-color: #fafaff;
             padding: 50px 0;
             color: #323b43;
             border-top: 1px solid rgba(144,147,149,0.2);
             border-bottom: 1px solid rgba(144,147,149,0.2);}
        .bg-widgets {background: url(images/bg_widgets.png) repeat #fafaff;}
        #widgets .wid {
                border-radius: 12px;
                border: 0;
                box-shadow: 1px 1px 12px rgba(0,0,0,0.2);
                margin: 20px 0 10px;
                background: #fff;}
        #widgets .wid img {
                max-height: 90px;
                margin: 0;
                padding: 15px;
                border-radius: 12px 12px 0 0;}
        #widgets .wid .uk-modal-dialog img {
                max-height: 320px;
                padding: 0 0 10px;}
        #widgets h3 {
                color: #fff;
                font-weight: 700;
                line-height: 18px;
                padding: 15px;
                border-radius: 0 0 12px 12px;
                text-shadow: 0px 0px 6px rgba(0,0,0,0.5);}
        #widgets h4 {margin: 0 0 12px;}
        #widgets h3:hover {color: #fff; text-shadow: 0px 0px 6px rgba(0,0,0,0.9);}
        #widgets .crm h3 {background: #3d7cf8;}
        #widgets .callback h3 {background: #c9314c;}
        #widgets .chat h3 {background: #a29fc6;}
        #widgets .gen-cust h3 {background: #00a4a4;}
        #widgets .inv-att h3 {background: #edc46b;}
        #widgets .instinct h3 {background: #95d8b3;}
        #widgets .credit h3 {background: #5dace8;}
        #widgets .multibutton h3 {background: #f74582;}
        #widgets .quizes h3 {background: #edb46b;}
        #widgets a.widget-button:hover {text-decoration: none}
        #widgets p {margin-top: 5px; font-size: 18px;}

      /* тарифы и цены */
        #tarifs {
                color: #fff;
                background: #33373e;
                padding: 50px 0;}
	#tarifs h2 {color: #fff;}
        #tarifs h3 {margin: 0; color: #6dacf8; font-weight: 700;}
        #tarifs p {margin-top: 5px; font-size: 18px;}
        #tarifs #tab-tarifs {
                background: #33373e;
                position: relative;
                clear: both;
                padding: 20px 0;
                box-shadow: 0 0 1px 1px rgba(0,0,0,0.3);}
        #tarifs .uk-tab>li>a {
                padding: 6px 14px;
                border-radius: 6px 6px 0 0;
                border: solid 1px #ddd;
                color: #323b43;
                background: #eee;}
        #tarifs .uk-tab>li>a:hover {border-color: #93979e;}
        #tarifs .uk-tab>li.uk-active>a {
                background: #33373e;
                color: #fff;
                border: solid 1px #33373e;
                box-shadow: 0 0 1px 1px rgba(0,0,0,0.3);}
        #tarifs .uk-tab>li:not(.uk-active)>a:hover {
                margin-bottom: 0;}
        #tarifs .uk-dropdown.uk-dropdown-small.uk-dropdown-bottom {
                border: solid 1px #ddd;
                border-radius: 4px;
                margin-top: 2px;
                background: #f9f9f9;}
        #tarifs .swidcrm, #tarifs .free, #tarifs .zvonok, #tarifs .full {
                padding: 20px;
                margin: 20px auto;
                text-align: center;
                max-width: 420px;
                font-size: 16px;
                border-radius: 6px;
                background: linear-gradient(to bottom,rgba(83,87,94,0.4) 0,rgba(83,87,94,0.3) 8%,rgba(99,103,110,0.3) 60%,rgba(83,87,94,0.3) 92%,rgba(83,87,94,0.4) 100%);}
        #tarifs .name {
                line-height: 1.3;
                padding-top: 2px;
                border: 2px solid #fff;
                border-radius: 6px;
                max-width: 320px;
                box-shadow: 0 0 6px 3px rgba(0,0,0,0.2);}
        #tarifs .name span {font-size: 26px;}
        #tarifs .name .price {
                padding: 0 10px;
                border-radius: 0 0 4px 4px;}
        #tarifs .free .name .price {background: #a9213c;}
        #tarifs .crm-free .name .price {background: #0d5c98;}
        #tarifs .zvonok .name .price {background: #2d7cb8;}
        #tarifs .full .name .price {background: #39b83c;}
        #tarifs .content {margin: 15px 0; text-align: left;}
        #tarifs .content .comment {font-size: 11px; line-height: 1;}
        .uk-form-select select {
                position: absolute;
                top: 0;
                z-index: 1;
                width: 100%;
                height: 100%;
                opacity: 0;
                cursor: pointer;
                left: 0;
                -webkit-appearance: none;}

      /* партнёрка */
        #partners {padding: 50px 0; color: #323b43;}
        #partners .part div {margin: 20px 0 30px;}
        #partners .part span {
            display: inline-block;
            padding: 0 8px;
            background: #a9213c;
            font-weight: 600;
            line-height: 20px;
            color: #fff;
            text-align: center;
            vertical-align: middle;
            text-transform: none;
            box-sizing: border-box;
            font-size: 15px;
            border-radius: 500px;}
        #partners h3 {margin: 0; color: #3d7cf8; font-weight: 700;}
        #partners p {margin-top: 5px; font-size: 18px;}

      /* часто задаваемые вопросы */
        #faq {
                padding: 40px 0;
                background: #33373e;
                color: #7c8290;
                box-shadow: 0 0 1px 1px rgba(0,0,0,0.3);}
        #faq .int div {margin: 10px 0 20px;}
	#faq h2 {font-size: 26px; font-weight: 600; color: #fff;}
        #faq h3 {margin: 0; color: #6dacf8; font-weight: 700;}
        #faq .uk-accordion-content {font-size: 16px; color: #fff;}

      /* интеграция с сервисами */
        #integration {
                padding: 50px 0;
                color: #323b43}
        #integration .int-banner {margin-bottom: 40px;}
        #integration .int-banner a img {
                padding: 10px 14px;
                max-height: 52px;}
        #integration .int-banner .uk-modal-dialog img {
                padding: 0 10px 12px;
                max-height: 44px;}
        #integration p {margin-top: 5px; font-size: 18px;}


/* Modal */

        .uk-modal-dialog {
                background: #fff; 
                color: #1d2035;
                box-shadow: 0 3px 9px rgba(0, 0, 0, 0.2);
                border-radius: 6px;}

        .uk-modal-header {
                margin-bottom: 15px;
                margin: -20px -20px 15px -20px;
                padding: 10px 20px 10px;
                border-bottom: 1px solid #f4f7f9;
                border-radius: 6px 6px 0 0;}

        .uk-modal-footer {
                margin-top: 15px;
                margin: 15px -20px -20px -20px;
                padding: 20px;
                border-top: 1px solid #f4f7f9;
                border-radius: 0 0 6px 6px;
                background: #fafafa;}

        .uk-modal-dialog h4 {
                color: #000;
                font-size: 20px;
                line-height: 24px;
                font-weight: 700;}

        .uk-modal-dialog p {margin: 0 0 10px 0;}


/* Footer */

        #footer {
                padding: 30px 0;
                text-align: center;
                background: #33373e;
                color: #7c8290;
                box-shadow: 0 0 1px 1px rgba(0,0,0,0.3);}

	#footer .icons a, #footer .copyright a {color: #989ca7;}
        #footer .links a {color: #989ca7;}
	#footer .icons a:hover, #footer .copyright a:hover {color: #fff; text-decoration: none;}
        #footer .links a:hover {color: #fff; text-decoration: none;}

        #footer ul.links, #footer ul.icons {
                text-align: center;
                margin: 0;
                padding: 0 0 12px;}

        #footer ul.links li, #footer ul.icons li {
                display: inline-block;
                padding: 0 8px;}

        #footer ul.links li a {font-size: 1em;}

        #footer ul.icons li a {font-size: 24px;}

        .totop-scroller {
                display: block;
                position: absolute;
                top: 20px;
                right: 10px;
                z-index: 1000;
                width: 20px;
                height: 20px;
                line-height: 20px;
                font-size: 14px;
                color: #989ca7;
                text-align: center;
                -webkit-transition: all linear 0.05s;
                transition: all linear 0.05s;}

        .totop-scroller:hover {text-decoration: none;}

        #logo-footer {
                font-family: 'Fenton';
                text-decoration: none;
                text-shadow: 0px 0px 1px rgba(0,0,0,0.5);}

        #logo-footer span.smart {color: #96a5b0;}
        #logo-footer span.widget {color: #967185;}
        #logo-footer:hover span.smart {color: #d6e5f0;}
        #logo-footer:hover span.widget {color: #d6b1c5;}


/* CallBackWidget 

.callbackkiller * {border-radius: 10px;}
.cbk-window, .cbk-window * {border-radius: 10px;} */


@media screen and (min-width: 768px) {

     #tarifs .free {margin-right: 0;}
     #tarifs .full {margin-left: 0;} 

}

@media screen and (max-width: 767px) {

                        body {padding-top: 44px;}

		/* Copyright */

			#copyright {
				width: 100%;
				display: block;
			}

				#copyright .menu li {
					line-height: inherit;
				}

		/* Off-Canvas Navigation */

			.uk-offcanvas-bar {
				background-color: #353c37;
				background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
				background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
				background-image: -ms-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
				background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
				background-repeat: no-repeat;
				background-size: 100% 100%;
                                width: 220px;
				font-weight: 400;
				font-size: 16px;
				box-shadow: inset -3px 0px 10px 0px rgba(0, 0, 0, 0.25);}

				.uk-nav-offcanvas>li>a {
					height: 44px;
					line-height: 44px;
					padding: 0 0 0 1.5em;
					color: #ffffff;
                                        border-top: 1px solid rgba(0,0,0,0.3);
                                        box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
                                        text-shadow: 1px 1px 1px rgba(0,0,0,0.5);}

					.uk-offcanvas-bar .vxod {
                                                    display: inline-block;
                                                    background-color: #4d9cd8;
                                                    margin: 18px 1em 9px;
                                                    border-radius: 6px;
                                                    border-top: 0;
                                                    height: 30px;
                                                    line-height: 30px;
                                                    padding: 0 10px;}

					.uk-offcanvas-bar .reg {
                                                    display: inline-block;
                                                    background-color: #d9415c;
                                                    margin: 9px 1em 18px;
                                                    border-radius: 6px;
                                                    border-top: 0;
                                                    height: 30px;
                                                    line-height: 30px;
                                                    padding: 0 10px;}
                              

}

@media screen and (max-width: 480px) {
    
    h2 {font-size: 24px;}

    #banner {
        /*padding: 20px 0 30px;*/
        min-height: calc(100vh - 44px);}
    #banner .button, #banner-index-partner .button {font-size: 18px;}
    /*#banner .gadgets img {max-height: 150px;}*/
    #banner h1 {font-size: 26px;}
    #banner p, #banner-index-partner p {font-size: 20px;}
    #integration .int-banner a img {
        padding: 10px 10px;
        max-height: 48px;}

}