@media (max-width: 767px)
{
    .text-xs-left { text-align: left; }
    .text-xs-right { text-align: right; }
    .text-xs-center { text-align: center; }
    .text-xs-justify { text-align: justify; }
}

@media (min-width: 768px) and (max-width: 991px)
{
    .text-sm-left { text-align: left; }
    .text-sm-right { text-align: right; }
    .text-sm-center { text-align: center; }
    .text-sm-justify { text-align: justify; }
}

@media (min-width: 992px) and (max-width: 1199px)
{
    .text-md-left { text-align: left; }
    .text-md-right { text-align: right; }
    .text-md-center { text-align: center; }
    .text-md-justify { text-align: justify; }
}

@media (min-width: 1200px) {
    .text-lg-left { text-align: left; }
    .text-lg-right { text-align: right; }
    .text-lg-center { text-align: center; }
    .text-lg-justify { text-align: justify; }
}

@font-face
{
    font-family: 'fontello';
    src: url('fontello/fontello.eot?84457572');
    src: url('fontello/fontello.eot?84457572#iefix') format('embedded-opentype'),
       url('fontello/fontello.woff2?84457572') format('woff2'),
       url('fontello/fontello.woff?84457572') format('woff'),
       url('fontello/fontello.ttf?84457572') format('truetype'),
       url('fontello/fontello.svg?84457572#fontello') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('fontello/fontello.svg?84457572#fontello') format('svg');
  }
}
*/

[class^="icon-"]:before, [class*=" icon-"]:before
{
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    speak: none;

    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    /* opacity: .8; */

    /* For safety - reset parent styles, that can break glyph codes*/
    font-variant: normal;
    text-transform: none;

    /* fix buttons height, for twitter bootstrap */
    line-height: 1em;

    /* Animation center compensation - margins should be symmetric */
    /* remove if not needed */
    margin-left: .2em;

    /* you can be more comfortable with increased icons size */
    /* font-size: 120%; */

    /* Font smoothing. That was taken from TWBS */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Uncomment for 3D effect */
    /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-colors:before { content: '\e801'; } /* '' */
.icon-ttf:before { content: '\e802'; } /* '' */
.icon-logo:before { content: '\e803'; } /* '' */

a.collapse-icon:before
{
    font-family: "Glyphicons Halflings";
    padding-right: 3px;
    font-size: 0.7em;
    opacity: 0.7;
    content: "\e114";
}
a.collapsed.collapse-icon:before
{
    content: "\e080";
}

body,
html
{
    height: 100%;
    font-size: 16px;
    background-color: #f4f4f4;
}

a:active,
.btn:active,
a:focus,
.btn:focus
{
    outline: none !important;
}

.navbar .logo
{
    width: 162px;
}

.navbar li.active > a
{
    background-color: #e9e9e9;
}

.pseudo-link
{
    text-decoration: none;
    border-bottom: 1px dashed;
}

.pseudo-link:hover,
.pseudo-link:focus
{
    text-decoration: none;
    border-bottom: none;
}

.btn
{
    border-radius: 15px;
}

.pseudo-btn
{
    border-style: dashed;
    text-decoration: none;
    border-color: #a1a1a1;
}

.pseudo-btn:hover,
.pseudo-btn:focus
{
    text-decoration: none;
}

/* End general styles */

/* Start footer */
.footer
{
    background-color: #f5f5f5;
    height: 50px;
    padding-top: 15px;
    font-size: 0.875rem;
}

.footer .language-switcher
{
    display: inline-block;
}

.footer .language-switcher .language
{
    text-decoration: underline;
}

.footer .language-switcher .language.active
{
    text-decoration: none;
}

.main-page .footer
{
    background: none;
    border-top: 2px dotted rgba(255, 255, 255, 0.5);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.main-page .footer,
.main-page .footer a
{
    color: #fff;
}

@media (max-width: 767px)
{
    .footer .ya-share2
    {
        margin-top: 15px;
        margin-bottom: 15px;
    }
}
/* End footer */

/* Start main page styles */

.main-page
{
    background: url("img/main_bg.jpg") repeat-y;
    min-height: 100%;
    color: #ffffff;
    /* for footer */
    position: relative;
    padding-bottom: 50px;
}

.main-page a
{
    color: #ffffff;
}

.main-page h1
{
    font-size: 4rem;
    margin-top: 20px;
    margin-bottom: 40px;
}

.navbar
{
    margin-bottom: 0;
}

.main-page .navbar
{
    margin-bottom: 65px;
    background: none;
}

@media (min-width: 768px)
{
    .navbar .navbar-brand,
    .navbar .nav > li > a
    {
        padding-top: 30px;
        padding-bottom: 30px;
    }
}

.main-page .navbar .nav > li > a:focus,
.main-page .navbar .nav > li > a:hover
{
    background: none;
    color: #cbcbcb;
}

.main-page .navbar .navbar-toggle .icon-bar
{
    background-color: #ffffff;
}

.main-page .characteristics-container
{
  -webkit-column-count: 3;
     -moz-column-count: 3;
          column-count: 3;
  -webkit-column-width: 100px;
     -moz-column-width: 100px;
          column-width: 100px;
}

.main-page .activity-type-wrapper
{
    margin-top: 30px;
    margin-bottom: 30px;
}

.main-page .start-btn
{
    margin-top: 30px;
    padding-left: 50px;
    padding-right: 50px;
    font-size: 1.4rem;
}

.main-page .start-btn:hover {
    -webkit-animation: pulse 1s;
    animation: pulse 1s;
}

.main-page .feature-icons
{
    margin-top: 40px;
}

.main-page .feature-icons [class^="icon-"]
{
    font-size: 5rem;
}

/* End main page styles */

/* Any content page */
.content-page-wrapper .container
{
    background-color: #ffffff;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 40px;
    padding-right: 40px;
    box-shadow: 1px 3px 7px 0 #eeeeee;
    background-image: url("/static/img/colorful_ribbon.png");
    background-repeat: repeat-x;
    background-position: bottom;
}

/* End any content page */

.logo-help-page h2,
.logo-guidline-page h2

{
    padding-bottom: 20px;
    margin-bottom: 20px;
    margin-top: 40px;
    border-bottom: 1px solid #dddddd;
}

.logo-help-page .paging-links
{
    margin-top: 20px;
}

.logo-help-page .paging-links a
{
    margin-left: 10px;
    margin-right: 10px;
}

.logo-help-page .branding
{
    font-size: 1.2rem;
}

.logo-help-page .branding img
{
    margin-top: 10px;
    margin-bottom: 10px;
}

.logo-help-page .back-to-top
{
    cursor: pointer;
    position: fixed;
    bottom: 20px;
    right: 20px;
    border-radius: 50px;
    width: 70px;
    height: 70px;
    line-height: 53px;
    font-size: 1.7rem;
    display: none;
    z-index: 5;
}

.logo-help-page .generated-notification
{
    background-color: #f3f3f3;
    color: #000000;
    border: none;
    margin-top: 25px;
    box-shadow: 0 2px 14px -1px #dcdcdc;
}

.logo-help-page .generated-notification #activity-data-collapse
{
    margin-top: 20px;
}

.logo-help-page .jump-to-section.nav-pills > li
{
    float: none;
    display: inline-block;
    *display: inline; /* ie7 fix */
    zoom: 1; /* hasLayout ie7 trigger */
}

.logo-help-page .jump-to-section .nav-pills
{
    text-align: center;
}

.logo-help-page .characteristics-container
{
  -webkit-column-count: 3;
     -moz-column-count: 3;
          column-count: 3;
  -webkit-column-width: 100px;
     -moz-column-width: 100px;
          column-width: 100px;

    margin-top: 30px;
    margin-bottom: 30px;
}

.logo-help-page .submit-activity-data
{
    padding-right: 20px;
    padding-left: 20px;
}

.logo-help-page #color-step .color-scheme-category-preview
{
    display: inline-block;
    width: 200px;
    height: 200px;
    border-radius: 100px;
    border: 8px solid #f1f1f1;
}

/* ColorSchemeView ColorSchemeInteractiveVIEW */

.logo-help-page .color-scheme-preview
{
    margin-top: 15px;
    margin-bottom: 15px;
    border: 1px solid #ffffff;
    border-radius: 4px;
}

.logo-help-page #color-step .color-scheme-preview
{
    cursor: pointer;
    padding: 5px;
    border-radius: 5px;
    position: relative;
    transition: all 0.2s ease-in-out;
}

.logo-help-page #color-step .color-scheme-preview:hover
{
    background-color: #f7f7f7;
    border: 1px solid #e2e2e2;
}

.logo-help-page #color-step .color-scheme-preview .action-icon,
.logo-help-page #color-step .font-preview .action-icon,
.logo-help-page #color-step .font-combination-preview .action-icon
{
    display: block;
    color: #b6b6b6;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 13px;
}

.logo-help-page #color-step .color-scheme-preview:hover .action-icon,
.logo-help-page #color-step .color-scheme-preview.selected .action-icon,
.logo-help-page #color-step .font-preview:hover .action-icon,
.logo-help-page #color-step .font-preview.selected .action-icon,
.logo-help-page #color-step .font-combination-preview:hover .action-icon,
.logo-help-page #color-step .font-combination-preview.selected .action-icon
{
    opacity: 1;
}

.logo-help-page #color-step .color-scheme-preview.selected
{
    background-color: #f0f0f0;
    border: 1px solid #d1d1d1;
}

.logo-help-page .color-scheme-preview .color-wrapper
{
    display: inline-block;
    width: 75px;
    height: 75px;
    margin-left: 5px;
}

.logo-help-page .color-scheme-preview .color-wrapper .color
{
    width: 75px;
    height: 75px;
    border-radius: 40px;
    border: 1px solid #eaeaea;
    margin-bottom: 5px;
}

.logo-help-page .color-hex,
.logo-guidline-page .color-hex
{
    color: #a8a8a8;
    font-size: 0.8rem;
    text-transform: uppercase;
}

.logo-help-page .color-scheme-preview .color-wrapper .color-hex
{
    transition: color 0.3s ease-in-out;
}

.logo-help-page .color-scheme-preview .color-wrapper:hover .color-hex
{
    color: #373737;
}

/*  eNDColorSchemeView ColorSchemeInteractiveVIEW */

.logo-help-page #color-step .fonts-view-wrapper .preview-text-input
{
    margin-top: 20px;
    margin-bottom: 30px;
    border: none;
    border-bottom: 1px solid #9d9d9d;
    border-radius: 0;
    box-shadow: none;
    font-size: 1.4rem;
    text-align: center;
}

.logo-help-page #color-step .font-view .fonts-view-wrapper:focus
{
    border-bottom-color: #66afe9;
    -webkit-box-shadow: 0 2px 0 0 rgba(102, 175, 233, .5);
    -moz-box-shadow:    0 2px 0 0 rgba(102, 175, 233, .5);
    box-shadow:         0 2px 0 0 rgba(102, 175, 233, .5);
}

.logo-help-page #color-step .font-preview
{
    height: 170px;
    position: relative;
}

.logo-help-page .font-preview .preview-text
{
    border: 1px solid #e1e1e1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 4em;
    line-height: 2em;
    margin-top: 30px;
    cursor: default;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -khtml-user-select: none; /* Konqueror */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}

.logo-help-page #color-step .font-preview .preview-text
{
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.logo-help-page #color-step .fonts-view-wrapper .badge
{
    margin-left: 4px;
    margin-right: 4px;
}

.logo-help-page #color-step .font-preview:hover .preview-text
{
    background-color: #f7f7f7;
    border: 1px solid #e2e2e2;
}

.logo-help-page #color-step .font-preview.selected .preview-text
{
    background-color: #f0f0f0;
    border: 1px solid #d1d1d1;
}

.logo-help-page .font-combination-preview
{
    cursor: default;
}

.logo-help-page .font-combination-preview.empty
{
    height: 199px;
}

.logo-help-page #color-step .font-combination-preview
{
    position: relative;
    margin-bottom: 30px;
}

.logo-help-page #color-step .font-combination-preview .preview-text,
.logo-guidline-page .font-combination-preview
{
    height: 170px;
    border: 1px solid #e1e1e1;
    text-align: center;
}

.logo-help-page #color-step .font-combination-preview .preview-text,
.logo-guidline-page .font-combination-preview .preview-text.text-1
{
    padding-top: 30px;
}

.logo-help-page .font-combination-preview .preview-text p,
.logo-guidline-page .font-combination-preview .preview-text
{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 64px;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -khtml-user-select: none; /* Konqueror */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}

.logo-help-page .font-combination-preview .preview-text .text-1,
.logo-help-page .font-combination-preview .preview-text .text-2
{
    text-align: center;
}

.logo-help-page .font-combination-preview .preview-text .text-1,
.logo-guidline-page .font-combination-preview .preview-text.text-1
{
    margin-bottom: 0;
}

.logo-help-page .font-combination-preview .preview-text .text-2,
.logo-guidline-page .font-combination-preview .preview-text.text-2
{
    margin-top: -18px;
    font-size: 25px;
}

.logo-help-page #color-step .font-combination-preview .preview-text
{
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.logo-help-page #color-step .font-combination-view .badge
{
    margin-left: 4px;
    margin-right: 4px;
}

.logo-help-page #color-step .font-preview .font-name,
.logo-help-page #color-step .font-combination-preview .font-name
{
    margin-top: 10px;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.logo-help-page #color-step .font-combination-preview .preview-text:hover
{
    background-color: #f7f7f7;
    border: 1px solid #e2e2e2;
}

.logo-help-page #color-step .font-combination-preview.selected .preview-text
{
    background-color: #f0f0f0;
    border: 1px solid #d1d1d1;
}

.logo-help-page #color-step .logo-samples-view .logo-sample-image
{
    width: 150px;
    height: 150px;
    margin-top: 15px;
    margin-bottom: 15px;
}

.logo-help-page #color-step .logo-samples-view .industry-trending-switcher
{
    margin-top: 15px;
}

.logo-help-page #color-step .logos-view canvas
{
    margin-top: 15px;
    margin-bottom: 15px;
    border: 1px solid #c3c3c3;
    border-radius: 5px;
}

.logo-help-page #color-step .logos-view .logo-image-wrapper
{
    position: relative;
}

.logo-help-page #color-step .logos-view .logo-image-wrapper .toolbar
{
    position: absolute;
    top: 200px;
    text-align: right;
    width: 100%;
}

.logo-help-page #color-step .logos-view .logo-image-wrapper a
{
    color: #d6d6d6;
    padding: 0 8px;
}

.logo-help-page #color-step .logos-view .logo-image-wrapper a:hover
{
    color: #777777;
}

.logo-help-page .change-color-scheme-category
{
    border: 1px solid #eee;
    background: #fff;
    border-radius: 4px;
    padding: 15px;
    position: absolute;
    animation-duration: 0.3s;
    z-index: 2;
    -webkit-box-shadow: 3px 3px 13px 4px #eee;
    -moz-box-shadow: 3px 3px 13px 4px #eee;
    box-shadow: 3px 3px 13px 4px #eee;
}

.logo-help-page .change-color-scheme-category .color
{
    cursor: pointer;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    display: block;
    float: left;
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 10px;
    border: 2px solid #eee;
}

.logo-help-page .change-color-scheme-category .color:hover
{
    border: 2px solid #bfbfbf;
}

.logo-help-page .selected-preview
{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    padding-top: 0;
    padding-bottom: 0;
    z-index: 2;
    background: none;

    /*Animation*/
    -webkit-transition: height 0.2s ease-in-out;
    -moz-transition: height 0.2s ease-in-out;
    -o-transition: height 0.2s ease-in-out;
    -ms-transition: height 0.2s ease-in-out;
    transition: height 0.2s ease-in-out;
}

.logo-help-page .selected-preview .preview-window
{
    background-color: #ffffff;
    border-top: 1px solid #333333;
    border-left: 1px solid #333333;
    border-right: 1px solid #333333;
    border-radius: 5px;
    overflow-x: hidden;
}

.logo-help-page .selected-preview.opened
{
    height: 180px;
}

.logo-help-page .selected-preview.minimized
{
    height: 30px;
}

.logo-help-page .selected-preview.closed
{
    height: 0;
}

.logo-help-page .selected-preview .control-ribbon
{
    background-color: #333;
    height: 30px;
    line-height: 30px;
}

.logo-help-page .selected-preview .control-ribbon .title
{
    cursor: pointer;
}

.logo-help-page .selected-preview .control-ribbon .title-text
{
    margin-left: 10px;
    color: #ffffff;
}

.logo-help-page .selected-preview .control-ribbon a
{
    color: #ffffff;
    margin-right: 10px;
}

.logo-help-page .selected-preview .color-scheme-preview
{
    text-align: center;
}

.logo-help-page .selected-preview .color-scheme-preview.empty .color
{
    background-color: #f7f7f7;
}

.logo-help-page .selected-preview .font-preview-container
{
    border-left: 1px dashed #333333;
    border-right: 1px dashed #333333;
    height: 100%;
}

.logo-help-page .selected-preview .color-scheme-preview .color-wrapper,
.logo-help-page .selected-preview .color-scheme-preview .color-wrapper .color
{
    width: 70px;
    height: 70px;
}

.logo-help-page .selected-preview .color-scheme-preview .color-wrapper:hover
{
    cursor: pointer;
}

.logo-help-page .selected-preview .color-scheme-preview .color-wrapper .color
{
    border: 2px solid #ffffff;
}

.logo-help-page .selected-preview .color-scheme-preview .color-wrapper.selected .color
{
    border-color: #9c9c9c;
}

.logo-help-page .selected-preview .font-preview-container .font-preview
{
    height: 160px;
}

.logo-help-page .selected-preview .font-preview-container .font-preview .preview-text
{
    margin-top: 32px;
    font-size: 3rem;
    line-height: 3.5rem;
    border: none;
}

.logo-help-page .selected-preview .result
{
    margin-top: 20px;
}

.logo-help-page .selected-preview .result .save-guidline-btn .glyphicon
{
    margin-right: 5px;
}

.logo-help-page .extra
{
    border-top: 1px solid #eaeaea;
    padding: 20px;
    text-align: center;
}

.logo-help-page .logo-preview-popup
{
    color: #737373;
}

.logo-help-page .logo-preview-popup h2
{
    border-bottom: none;
    color: #449D44;
}


.logo-help-page #color-step .logo-preview-popup canvas
{
    border-radius: 0;
    border: none;
    padding-right: 30px;
    background: #f8f8f8;
}

.logo-help-page #color-step .logo-preview-popup .left-side
{
    padding-left: 30px;
}

.logo-help-page .logo-preview-popup .btn
{
    text-transform: uppercase;
}

.logo-help-page .logo-preview-popup .modal-body
{
    padding-left: 30px;
    padding-right: 30px;
}

.logo-help-page .logo-preview-popup .modal-dialog
{
    width: 1300px;
}

.logo-help-page .logo-preview-popup .logo-preview-canvas
{
    width: 100%;
}

.logo-guidline-page .branding
{
    font-size: 1.2rem;
}

.logo-guidline-page .branding img
{
    margin-top: 10px;
    margin-bottom: 10px;
}

.logo-guidline-page .generated-notification
{
    background-color: #f3f3f3;
    color: #000000;
    border: none;
    margin-top: 25px;
    box-shadow: 0 2px 14px -1px #dcdcdc;
}

.logo-guidline-page .color-scheme-category-preview
{
    display: inline-block;
    width: 200px;
    height: 200px;
    border-radius: 100px;
    border: 8px solid #f1f1f1;
}

.logo-guidline-page .color-scheme-preview
{
    margin-top: 70px;
    margin-bottom: 15px;
    border: 1px solid #ffffff;
    border-radius: 4px;
}

.logo-guidline-page #color-step .color-scheme-preview
{
    cursor: pointer;
}

.logo-guidline-page #color-step .color-scheme-preview:hover
{
    border: 1px solid #d1d1d1;
}

.logo-guidline-page .color-scheme-preview .color-wrapper
{
    display: inline-block;
    width: 75px;
    height: 75px;
    margin-left: 5px;
}

.logo-guidline-page .color-scheme-preview .color-wrapper .color
{
    width: 75px;
    height: 75px;
    border-radius: 40px;
    border: 1px solid #eaeaea;
    margin-bottom: 5px;
}

.logo-guidline-page .color-scheme-preview .color-wrapper:hover .color-hex
{
    color: #373737;
}

.logo-guidline-page .font-preview
{
    height: 170px;
}

.logo-guidline-page .font-preview .preview-text
{
    border: 1px solid #e1e1e1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 4em;
    line-height: 2em;
    margin-top: 30px;
    cursor: default;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -khtml-user-select: none; /* Konqueror */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}

.logo-guidline-page .font-type
{
    font-size: 50px;
    margin-top: 60px;
}

.logo-guidline-page .font-combination-preview
{
    cursor: default;
}

.logo-guidline-page .extra
{
    border-top: 1px solid #eaeaea;
    padding: 20px;
    text-align: center;
}

.how-to-create-logo h1
{
    text-align: center;
    margin-bottom: 30px;
}

.how-to-create-logo h2
{
    margin-top: 25px;
}

.how-to-create-logo img
{
    margin-top: 25px;
    margin-bottom: 25px;
}

.logo-trends-page .page-header
{
    margin-top: 30px;
}

.logo-trends-page h2
{
    margin-top: 30px;
    margin-bottom: 15px;
}


.logo-trends-page .logo-trend-image
{
    margin-bottom: 30px;
}

.logo-trends-page .logo-trends-sample
{
    margin-top: 20px;
    margin-bottom: 20px;
}