/*
Used Bootstrap version doesn't support .mt-X classes. We define only used
classes with respect to later Bootstrap versions:

$spacer: 1rem !default;

    1: ($spacer * .25),
    2: ($spacer * .5),
    3: $spacer,
    4: ($spacer * 1.5),
    5: ($spacer * 3)
*/

.my-5 {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.my-0 {
    margin-top: 0;
    margin-bottom: 0;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mt-5 {
    margin-top: 3rem;
}


h1, h2, h3, h4, p {
    clear: both;
}

.main {
    min-height: 51vh;
}

img:not(src$=".svg") {
    height: auto;
}

/* aligns input addons in form */
.input-group[class*="col-"] {
    padding-left: 15px;
    padding-right: 15px;
}

.blue_circle a {
    background-color: #428bca;
    color: #ffffff;
    text-align: center;
    display: inline-block;
    margin: 0 8px;
    border-radius: 50%;
    font-size: 30px;
    width: 66px;
    height: 66px;
    line-height: 30px;
    padding: 18px;
    -webkit-transition: all 100ms linear;
    transition: all 100ms linear;
}

.blue_circle a:hover,
.blue_circle a:active {
    -moz-transform: scale(1.1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -webkit-transform: scale(1.1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -o-transform: scale(1.1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -ms-transform: scale(1.1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    transform: scale(1.1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
}

.large-bottom-offset {
    margin-bottom: 20px;
}

.large-top-offset {
    margin-top: 20px;
}

.howitworks footer {
    margin-top: 0;
    border-top: 0;
}

/* Obchody */

.portfolio_strict .portfolio_item.small {
    height: 155px;
    position: relative;
}

.portfolio_strict .portfolio_item.small figure {
    height: 65px;
}

.portfolio_strict .portfolio_item {
    overflow: visible;
}

.portfolio_strict .portfolio_item .portfolio_description h3,
.portfolio_strict .portfolio_item .portfolio_description h2 {
    white-space: nowrap;
    overflow-x: visible;
}

.portfolio_strict .portfolio_item .portfolio_description h2 {
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    margin: 0;
    padding: 0 0 6px;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

.portfolio_strict .portfolio_item.small .portfolio_description a h3 {
    color: black;
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    margin: 0;
    padding: 0 0 6px;
}

.portfolio_strict .portfolio_item.small .portfolio_description a:hover h3 {
    color: #2a6496
}

.portfolio_strict .portfolio_item .portfolio_description {
    bottom: 20px;
    margin-bottom: 0;
    position: absolute;
    width: 100%;
}

/*upload button*/
.btn-file {
    position: relative;
    overflow: hidden;
}

.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    width: 85px;
    min-width: 100%;
    height: 30px;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;

}

.signup form .btn-file.btn {
    margin-top: 0;
}

.signup {
    text-align: left;
}

.small-right-margin {
    margin-right: 15px;
}

section.organizations {
    margin-top: -20px;
}

section.organizations img {
    height: auto;
    border: 1px solid #ccc;
    max-width: 265px;
}


section.organizations.portfolio_strict .portfolio_item .portfolio_description {
    width: 90.5%;
}


/*  BORDERED ORGANIZATION ICONS */
.portfolio_strict .portfolio_item.bordered {
    overflow: visible;
}

.portfolio_strict .portfolio_item.bordered figure {
    border: 1px solid #ccc;
}

.portfolio_item p.bordered {
    border: 1px solid #ccc;
    width: 358px;
}

.portfolio_strict .portfolio_item.organizations {
    height: 325px;
    margin-top: 20px;
}


.portfolio_strict .portfolio_item .portfolio_description p.description {
    text-align: left;
    text-transform: none;
    height: 80px;
}

.portfolio_strict .portfolio_item .portfolio_description .psActions {
    margin-top: 0.5em;
}

ul.psActions {
    padding-left: 0;
    text-transform: uppercase;
}

ul.psActions li {
    float: right;
    list-style-type: none;
}

ul.psActions li:first-child {
    float: left;
}


#retailers div.portfolio_item img {
    width: auto;
    height: auto;
    max-width: 165px;
}


h3 a, h2 a {
    color: inherit;
}


#retailers div.portfolio_item figure {
    width: auto;
    height: auto;
    max-width: 165px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    postion: relative;
    padding: 0;
}

#retailers div.portfolio_item img {
    postion: absolute;
    bottom: 0;
}

#retailers div.portfolio_item div.portfolio_description {
    padding-top: 5px;
}

body > svg {
    display: none;
}

#popUpEmailLabel {
    padding: 8px 0 0 0;
}

.in ul.nav li.active a,
.in ul.nav li.active a:hover {
    color: #333333;
    border-bottom: 1px solid #428bca;
}

.in ul.nav li a:hover,
.in ul.nav li a:active {
    color: #333333;
    border-bottom: solid 1px #428bca;
}

.signin form .forgot {
    padding: 0px;
}

.alignR {
    text-align: right;
}

.alignC {
    text-align: center !important;
}

.alignL {
    text-align: left;
}

section.filter {
    padding: 0 0 2em 0;
}

#list-organizations {
    margin-top: 4em;
}

#regButtons {
    visibility: hidden;
}

.cursor-pointer {
    cursor: pointer;
}

ul.portfolio_filters {
    margin: 0em 0 0 0;
}

ul.portfolio_filters.retailers {
    margin: 0em 0 0 0;
    text-align: right;
}

a.logo {

}

@media only screen and (max-width: 480px) {
    .navbar .btn-navbar {
        margin: 24px 15px 0 0;
    }
}

@media (min-width: 992px) {
    .navbar .nav li:last-of-type a {
        padding-right: 0;
    }
}

span.logo_subtitle {
    white-space: nowrap;
}

/* oprava zmizeni linku "Prihlasit" na mobilech */
#sign span {
    display: inline;
}

#sign a:link, #sign a:visited {
    color: #428BCA;
}

#sign a:hover,
#sign a:active {
    color: #2A6496;
}

#sign a i {
    color: #777;
}

.navbar .nav {
    margin-top: 20px;
}

/* oprava zarovnani polozek v menu pri zmenseni */
.navbar .nav li a {
    padding-right: 15px;
    padding-left: 15px;
}

/* posunuti loga na mobilech */
header .container {
    padding-left: 15px;
}

.navbar {
    margin-top: 5px;
    margin-bottom: 15px;
}

/* Top Menu */
.nav.navbar-top {
    list-style: none;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

@media screen and (min-width: 470px) {
    .nav.navbar-top {
        display: inline-flex;
    }
}

.navbar-top a {
    color: #777;
}

.navbar-top a:hover {
    color: #333333;
}

.nav.nav-top.navbar-top > li > a:hover {
    text-decoration: none;
    background-color: transparent;
}

.not-logged-user {
    margin-top: 10px;
}

.navbar-top a:hover {
    background-color: #fff;
}

.dropdown-menu.user-menu {
    float: left;
    right: 0;
    max-width: 200px;
    min-width: 190px;
    margin-top: 10px;
}

.dropdown-menu.user-menu > li > a {
    padding: 10px 5px;
}

.dropdown-menu.user-menu > li > a:hover, .dropdown-menu.user-menu > li > a:focus {
    background-color: #fff;
    color: #508AC5;
    font-weight: 700;
}

a.dropdown-toggle.user_dropdown_menu {
    font-weight: 700;
    font-size: 1.2em;
    margin-top: 10px;
}

hr.menu {
    margin-top: 5px;
    margin-bottom: 5px;
}

.fa.fa-heart-o {
    color: #EC5A53ed;
}

a.btn.btn-success.nav-item.cta-org {
    color: #ffffff;
    background-color: #5DB75D;
    box-shadow: 0px 2px #23A33D;
    padding-top: 5px;
    padding-bottom: 5px;
    border: none;
    margin-top: 15px;
}

a.btn.cta-org.btn-success.nav-item:hover {
    background-color: #47a447;
    box-shadow: 0px 3px #23A33D;
    border: none;
}

.nav-item {
    margin-left: 15px;
}

#social-and-umenu {
    height: 100px;
    margin-top: 1em;
    float: right;
}

#social_media_wrapper {
    border-radius: 4px;
    right: 15px;
    min-width: 112px;
}

#popUpCoupon {
    /*    min-width: 300px;
         max-width: 700px;
        width: 80%; */
    margin-top: 10%;
    font-size: 90%;
}


#popUpCouponHeader img {
    max-height: 85px;
    max-width: 165px;
}


div.retailerCoupon {
    border-bottom: 1px solid #DFDFDF;
    padding-top: 1em;
    padding-bottom: 0.5em;
}

p.couponContinue {
    margin-top: 1em;
}

span.couponCopied {
    display: none;
    color: #5cb85c;
    font-size: 150%;
    margin: 0 34px;
}


#popUpCoupon #popUpCouponHeader p {
    text-align: center;
}

#popUpCoupon .btn, #popUpCoupon .couponCode span {
    text-transform: uppercase;
}

#popUpCoupon .couponCode {
    color: #4895D9;
    font-weight: bold;
}

#popUpCoupon .couponCode span {
    color: #000;
}

#popUpCoupon span.couponEndDate {
    color: #C0254C;
}

#popUpCoupon p.couponText {
    font-weight: bold;
    margin-bottom: 0;
    white-space: nowrap;
}

#popUpCoupon P.couponPlatnost {
    color: #767676;
    font-size: 90%;
    margin-top: 0;
}

/* slide efect */
#popUpCoupon {
    transition: all 0.3s 0.3s;
}

#popUpCoupon {
    transition: all 0.3s ease-out;
}

#popUpCoupon {
    transform: translateX(0) translateY(-40%);
}

.popup_visible #popUpCoupon {
    transform: translateX(0) translateY(0);
}

/* slide efect end */


@media (min-width: 550px) {
    .navbar {
        margin-top: 1px;
    }

    #sign {
        position: absolute;
        right: 230px;
        text-align: right;
        top: 7px;
        width: 350px;
        padding-right: 10px;
    }

    a.logo {
        position: relative;
    }

    #social-and-umenu {
        height: 50px;
    }
}

@media (min-width: 992px) {
    #social_media_wrapper {
        border-radius: 0 0 4px 4px;
        right: 50px;
    }

    #sign {
        text-align: left;
        position: absolute;
        right: 230px;
        width: 250px;
        top: 7px;
    }

    #sign.org {
        line-height: 20px;
    }

    #social-and-umenu {
        margin-top: 0em;
    }

}


#buy {
    width: 10em;
    display: inline-block;
}

ul.breadcrumb {
    clear: both;
}

dt {
    width: 7em;
    clear: both;
}

dt, dd {
    float: left;
    margin-top: 1em;
}

.fbJoined, .fbNotJoin {
    background-color: #3B5998;
    border-radius: 50%;
    color: #ffffff;
    display: inline-block;
    font-size: 2em;
    line-height: 2em;
    margin: 0 0 0.5em 0;
    padding: 0.2em;
    text-align: center;
    transition: all 100ms linear 0s;
    width: 2.4em;
    height: 2.4em;
}

.fbJoined:hover, .fbNotJoin:hover {
    transform: scale(1.1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    color: #fff;
}

.fbNotJoin {
    background-color: #ccc;
}

p.fbJoin {
    cursor: pointer;
}

a.favSwitch {
    float: right;
    width: 180px;
    overflow: hidden;
}

a.favSwitch:hover {

}


a.favSwitch, a.favSwitch a {

    margin-left: 0.5em;
}

a.favSwitch.on, a.favSwitch.off {
    font-size: 12px;
    line-height: 12px;
}

a.favSwitch i {
    border-right: 1px solid;
    font-size: 19.5px;
    height: 19.5px;
    padding-right: 10px;
    margin-right: 5px;
    position: relative;
    bottom: -3.25px;
}


#myFavoriteOrgTab {
    width: 100%;
}

#myFavoriteOrgTab td.actions, #myFavoriteOrgTab th.actions {
    width: 6em;
}

#myFavoriteOrgTab i {
    color: #D9534F;
}

a.fbLogin {
    background: #3b5998;
    background: #428BCA;
    display: inline-block;
    padding: 0.7em 1em;
    color: #fff !important;
    border-radius: 3px;
}

a:hover.fbLogin {
    background: #2E53A1;
}

#sign a.fbLogin {
    padding: 0.2em 0.3em;
    margin: 0.5em 0 0 0;
}

a.fbLogin span {
    display: inline-block;
}

span.fbLoginIco {
    border-right: 1px solid #323E5E;
    border-right: 1px solid #397090;
    color: #192D57;
    color: #fff;
    padding: 0 1em 0 0;
}

#sign span.fbLoginIco {
    padding: 0 0.5em 0 0;
}

#sign span.fbLoginArrow {

}

#sign a.fbLogin i {
    color: #fff;
    font-size: 14px;
}

span.fbLoginTxt {
    padding: 0 3em 0 1em;
}

#sign span.fbLoginTxt {
    padding: 0 0.5em;
}

h3.activate-title {
    font-weight: 700;
    text-align: center;
}

p.activate-sub-title {
    text-align: center;
}

/* Facebook Button */
.btn-social {
    position: relative;
    padding-left: 44px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.btn-social > :first-child {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 32px;
    line-height: 34px;
    font-size: 1.6em;
    text-align: center;
    border-right: 1px solid rgba(0, 0, 0, 0.2)
}

.btn-social.btn-lg {
    padding-left: 61px
}

.btn-social.btn-lg > :first-child {
    line-height: 45px;
    width: 45px;
    font-size: 1.8em
}

.btn-facebook {
    color: #fff;
    background-color: #3b5998;
    border-color: rgba(0, 0, 0, 0.2)
}

.btn-facebook:focus, .btn-facebook.focus {
    color: #fff;
    background-color: #2d4373;
    border-color: rgba(0, 0, 0, 0.2)
}

.btn-facebook:hover {
    color: #fff;
    background-color: #2d4373;
    border-color: rgba(0, 0, 0, 0.2)
}

.btn-facebook:active, .btn-facebook.active, .open > .dropdown-toggle.btn-facebook {
    color: #fff;
    background-color: #2d4373;
    border-color: rgba(0, 0, 0, 0.2)
}

.btn-facebook:active:hover, .btn-facebook.active:hover, .open > .dropdown-toggle.btn-facebook:hover, .btn-facebook:active:focus, .btn-facebook.active:focus, .open > .dropdown-toggle.btn-facebook:focus, .btn-facebook:active.focus, .btn-facebook.active.focus, .open > .dropdown-toggle.btn-facebook.focus {
    color: #fff;
    background-color: #23345a;
    border-color: rgba(0, 0, 0, 0.2)
}

.btn-facebook:active, .btn-facebook.active, .open > .dropdown-toggle.btn-facebook {
    background-image: none
}

.btn-facebook.disabled:hover, .btn-facebook[disabled]:hover, fieldset[disabled] .btn-facebook:hover, .btn-facebook.disabled:focus, .btn-facebook[disabled]:focus, fieldset[disabled] .btn-facebook:focus, .btn-facebook.disabled.focus, .btn-facebook[disabled].focus, fieldset[disabled] .btn-facebook.focus {
    background-color: #3b5998;
    border-color: rgba(0, 0, 0, 0.2)
}

.btn-facebook .badge {
    color: #3b5998;
    background-color: #fff
}

#signup-info, #signup-org {
    padding-left: 60px;
}

#register_organization, #register_user, #login_form {
    margin-top: 30px;
}

.title-signup {
    color: #fff;
    font-size: 22px;
}

.signup-bg, .login-bg, .signup-organization {
    background-color: #408aca;
    background-image: url(/css/background-page.png);
    background-repeat: repeat-x;
    background-size: cover;
    margin-bottom: -40px;
}

ul.signup-why {
    list-style: none;
}

.signup-info-why {
    margin-top: 2em;
    color: #fff;
    font-size: 18px;
}

li#create_account, .get-extension-why1 {
    animation-duration: 1s;
    animation-delay: 0.5s;
}

li#dont_forget_givt, .get-extension-why2 {
    animation-duration: 1s;
    animation-delay: 1s;
    margin-top: 30px;
}

li#view_your_donate, .get-extension-why3 {
    animation-duration: 1s;
    animation-delay: 1.5s;
    margin-top: 30px;
}

#extension-i-want-help .get-extension-why2,
#extension-i-want-help .get-extension-why3 {
    margin-top: 13px;
}

#extension-i-want-help .cta-want-extension {
    margin-top: 20px;
    margin-bottom: 40px;
}
@media screen and (min-width: 1200px) {
    #extension-i-want-help .cta-want-extension {
        margin-top: 40px;
    }
}

div#get-extension-give-50 {
    animation-duration: 1s;
    animation-delay: 2s;
    margin-left: 10px;
}

.sign-icon {
    margin-right: 25px;
}

ul.portfolio_filters li {
    margin-bottom: 4px;
}

ul.portfolio_filters li.myFavorites a {
    background: #5CB85C;
}

ul.portfolio_filters li.myFavorites a.active::after,
ul.portfolio_filters li.myFavorites a:hover::after {
    border-color: #5CB85C rgba(66, 139, 202, 0) rgba(66, 139, 202, 0);
}

table {
    border-collapse: separate;
    border-spacing: 3px;
}

td, th {
    padding: 0.5em 1em;
    border-radius: 5px;
}

tr:nth-child(odd) td {
    background: #EBF2FA;
}

th {
    background-color: #428BCA;
    color: #fff;
}

td.actions, th.actions {
    text-align: center;
}

#RAOSelection {
    background-color: #4895D9;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
    text-align: center;
    margin-bottom: 16px;
}

#RAOSelectionIn {
    display: flex;
    justify-content: center;
/*    align-items: center; */
    flex-direction: column;
}

#RAOSelection:hover {
    box-shadow: 0px 10px 24px rgba(0, 0, 0, 0.25), 0px 10px 10px rgba(0, 0, 0, 0.22);
}

#RAOSelection span.RAOSLabel {
    font-size: 1.3em;
    color: #fff;
    font-weight: 700;
}

#RAOSelection span.custom-combobox {
    height: 100%;
    display: flex;
    position: relative;
    white-space: nowrap;
    width: 100%;
    font-size: 120%;
    flex-grow: 1;
}

#RAOSRetailerContainer, #RAOSOrganizationContainer {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    padding-right: 11px;
}

#RAOSelection .fa-check {
    color: #5DB75D;
}

div.RAOS-in {
    flex-grow: 1;
    display: flex;
    padding: 15px 0 14px;
    flex-direction: column;
    width: 100%;
}

#RAObuy.btn {
    padding: 4px 16px;
    border-radius: 0;
    border: none;
}

#RAOSelection select {
    margin: 0 10px;
    height: 38px;
    max-width: 250px;
}


@media screen and (min-width: 600px) {
    #RAOSelection select {
        max-width: 150px;
    }

    #RAOSelectionIn {
        flex-direction: row;
    }

    #RAOSelection {
        text-align: left;
    }

    #RAOSelection span.custom-combobox {
        margin-right: 50px;
    }

    div.RAOS-in:last-of-type {
        justify-content: flex-end;
    }
}

@media screen and (min-width: 1100px) {
    #RAOSelection span.RAOSLabel {
        font-size: 1.1em;
    }

    #RAOSelection span.RAOSLabel {
        justify-content: flex-start;
        flex-grow: 1;
    }
    div.RAOS-in {
        flex-direction: row;
        width: auto;
    }

    #RAOSelectionIn {
        flex-direction: row;
    }

    #RAOSelectionIn {
    }

    div.RAOS-in:last-of-type {
        justify-content: flex-end;
        flex-grow: 0;
    }
}

@media screen and (min-width: 1200px) {
    #RAOSelection span.RAOSLabel {
        font-size: 1.3em;
    }
}

ul.ui-widget, .custom-combobox-input, #toTop100 {
    width: 100%;
}

.custom-combobox::after {
    content: "";
    width: 0;
    height: 0;
    border-width: 15px medium 15px 11px;
    border-style: solid;
    border-top-color: transparent;
    border-left-color: white;
    border-bottom-color: transparent;
    border-right: none;
    position: absolute;
    right: -11px;
    top: 0;
    display: inline-block;
}

.ui-button-icon-primary {

}

.custom-combobox-input, #toTop100 {
    width: 100%;
    background-color: #fff;
    margin: 0;
    padding: 4px 1rem;
    height: 30px;
    border: none;
    display: inline-block;
    color: #aaa;
}

.custom-combobox-input:focus {
    outline: none;
}

span.custom-combobox a.ui-button:hover {
    cursor: pointer;
}

a.custom-combobox-toggle span.ui-button-icon-primary {
}

a.custom-combobox-toggle span.ui-icon {
    float: right;
    background: #fff;
    color: #aaa;
    padding: 5.5px;
    font-size: 110%;
}


.custom-combobox-input.selected {
    color: #888888;
    font-weight: bold;
}

a.custom-combobox-toggle {
    position: absolute;
    left: 0; /* due to the IE11 bug */
    width: 100%;
    background: none;
    padding: 0;
    display: inline-block;
}

/*
a.custom-combobox-toggle.selected {
    position: relative;
    left: -22px;
    width: 22px;
}
*/

select#extension-installation-organization-select-sQx5T {
    max-width: 380px;
    color: #000;
}

span.ui-button-text {
}

ul.ui-autocomplete {
    z-index: 1000;
    background-color: #fff;
    font-size: 1em;
    color: #333;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 40vh;
    width: 100%;

    border: 1px solid #cccccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;

}

ul.ui-autocomplete li {
    list-style-type: none;
    padding: 0.75rem 1rem;
    font-size: 16px;
    margin: 0;
}

ul.ui-autocomplete li:hover {
    color: #000;
    font-weight: 700;
    cursor: pointer;
}

.ui-state-hover, .ui-state-active, .ui-state-focus {
    color: #ffffff;
    text-decoration: none;
    background-color: #0088cc;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    background-image: none;
}

li.ui-menu-item {

}

li.ui-state-focus {
}

div.RAOSCombo {
    width: 400px;
    float: left;
}

#social_media_wrapper a {
    font-size: 24px;
    height: 40px;
    padding: 9px;
    width: 40px;
}

.ui-helper-hidden-accessible, .ui-helper-hidden-accessible * {
    display: none !important;
}


a.displayAllRetailers {
    float: right;
}

div.fb-page {
    width: 310px;
}

@media (min-width: 767px) {
    div.fb-page {
        float: right;
    }

    #RAObuy.btn {
        margin-top: 0;
    }

}

/* how it works */
#whyB {
    margin: 40px auto 0px;
}

#why {
    border-top: 1px solid #ccc;
    padding-top: 1em;
    margin-top: 0em;
    text-align: center;
    font-size: 115%;
    overflow: hidden;
}

#why.noborder {
    border-top: none;
}

#why h2, #why p {
    text-align: left;
}

#why ul {
    margin: 1em 0 0 0;
    padding: 1em 0;
}

#why li {
    list-style-type: none;
    background: url(/images/sipka-dolu.png) center top no-repeat;
    margin: 2em 0 0 0;
    padding: 2em 0 0 0;
}

#why li:first-child {
    background-image: none;
    margin: 0 0 0 0;
    padding: 1em 0 0 0;
}

#why img {
    margin: 1em;
}

#why #klasickyNakup:before {
    content: "\f00d";
    color: #DF3840;
}

#why #nakupSGivtem:before {
    content: "\f00c";
}

#why ul:before {
    content: "\f00d";
    display: inline-block;
    height: 40px;
    width: 40px;
    font-size: 40px;
    line-height: 40px;
    font-family: FontAwesome;
    text-align: left;
    color: #5DB75D;
}

li.prispela {
}

#petrPrispela {
    background-color: #F8F8F8;
    border: 1px solid #CCCCCC;
    margin-left: 10px;
    padding: 0.5em;
}


#nakupSGivtem, #klasickyNakup {

}


@media (min-width: 500px) {
    #nakupSGivtem, #klasickyNakup {
        width: 48%;
        margin: 0 1% 0 0;
        float: left;
    }

    #nakupSGivtem {
        margin: 0 0 0 1%;
        float: right;
    }

    #why #petra {
        background: url(/images/sipka-big-nahoru.png) center bottom no-repeat;
        padding: 0 0 50px 0;
        margin: 0 0 20px 0;
    }
}


@media (min-width: 1220px) {
    #why li {
        display: inline-block;
        width: 22%;
        background: url(/images/sipka.png) left 75px no-repeat;
        margin: 0 0 0 1%;
        vertical-align: top;
        padding: 12px 0 0 1%;
        text-align: center;
    }

    #why li.prispela {
        padding-top: 0;
    }

    #why img {
        margin: 16px 16px 28px 16px;
    }

    #why li.prispela img {
        margin: 16px auto;
    }

    #why #petra {
        width: 260px;
        float: left;

        background: url(/images/sipka-big-doleva.png) right 180px no-repeat;
        padding: 130px 50px 0 0;
        margin: 0 20px 0 0;

    }

    #why #petra img {
        margin-left: 0;
    }

    #why ul {
        width: auto;
        margin: 0;
        float: none;
        margin-left: 260px;
        text-align: left;
    }

    #why ul:before {
        position: relative;
        top: 70px;
    }

}

p.topLine {
    clear: both;
    margin-top: 2.5em;
    padding: 2em 0;
    border-top: 1px solid #ccc;
    text-align: center;
    font-size: 130%;
}

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

div.howItWorksLastRow {
    padding-bottom: 2em;
    padding-top: 2em;
}

div.howItWorksLastRow .video-container iframe {
    margin-top: 4px;
}


#myProfileStats h1 {
    font-size: 24px;
}

#myProfileStats span.big {
    font-size: 250%;
    font-weight: bold;
    white-space: nowrap;
}

#myProfileStats div.tile {
    text-align: center;
    -webkit-transition: all 1s;
    transition: all 1s;
    padding: 1em;
}

@media (min-width: 770px) {
    #myProfileStats div.tile {
        border-left: 1px solid #e7e7e7;
    }

}

#myProfileStats div:first-child.tile {
    border-left: none;
}

#myProfileStats div.red {
    color: #990000;
}

#myProfileStats div.red2 {
    color: #cc0000;
}

#myProfileStats div.green {
    color: #009900;
}

#myProfileStats div.blue {
    color: #000099;
}

#myProfileStats div.tile:hover {
    background-color: #f0f0f0;
    color: #000;
}

.signin {
    overflow: hidden;
    border-radius: 10px;
}

#myProfileStats .signin {
    display: flex;
}

section.call_to_action h2 {
    font-size: 50px;
    font-weight: 300;
    line-height: 55px;
}

section.call_to_action h3 {
    font-size: 26px;
    font-weight: 300;
    line-height: 30px;
    margin: 0 0 20px;
}

.social_sign h2 {
    font-size: 20px;
    font-weight: 300;
    line-height: 22px;
    margin-bottom: 30px;
}

ul.napsali {
    padding-left: 0;
}

ul.napsali li {
    list-style-type: none;
}

ul.napsali li.penize {
    margin-left: 4%;
    padding: 15px 5px;
    width: 48%;
}

ul.napsali li.finmag {
    padding: 0;
    height: auto;
    width: 48%;
    background-color: transparent;
    text-align: left;
}

ul.napsali li.msm {
    margin-top: 0px;
}

ul.napsali li.hn {
    margin-bottom: 50px;
}

ul.napsali li a {
    max-width: 100%;
    height: auto;
}

ul.napsali li img {
    max-width: 100%;
    height: auto;
}

/* Menu Footer */

ul.menu-footer {
    list-style-type: none;
}

ul.menu-footer li {
    margin-top: 5px;
}

i.fa.fa-heart.fa-fw.red {
    color: #EE4E66;
    margin-left: 5px;
    font-size: 16px;
    margin-top: 0px;
}

ul.socials-icons {
    list-style-type: none;
}

ul.socials-icons li {
    display: inline-block;
    margin-top: 10px;
    padding-left: 10px;
}

.newsletter {
    margin-top: 20px;
}


@media (min-width: 1200px) {
    #footerTeaserH3Facebook {
        padding-left: 50px !important;
    }
}

.topMargin {
    margin-top: 1em;
}

.topMargin2x {
    margin-top: 2em;
}

dl {
    overflow: hidden;
}

.dl-horizontal dd {
    clear: both;
}

.dl-horizontal dt {
    width: 100%;
    text-align: left;
}


p.grey {
    color: #ccc;
    font-size: 90%;
}

.screenshot {
    padding: 1em;
    clear: both;
}

.screenshot img {
    max-width: 95%;
    height: auto;
}

.blue {
    color: #428BCA;
    font-weight: bold;
}

ul {
    padding-left: 0;
    list-style-position: inside;
}

p.cc_message {
    clear: none;
}

.cc_container .cc_btn, .cc_container .cc_btn:visited {
    background-color: #4895D9 !important;
    color: #fff !important;
}

.cc_container .cc_btn {
    max-width: 150px !important;
    margin-left: 0 !important;
    margin-right: 10px !important;
    margin-top: 10px !important;
    float: left !important;
}

.cc_container {
    margin-left: 30% !important;
    margin-right: 30% !important;
    font-size: 14px !important;
}


@media (min-width: 720px) {
    .cc_container .cc_btn {
        margin-left: 10px !important;
        margin-right: 0px !important;
        float: right !important;
    }
}

/* .cc_container .cc_btn {
    background-color: #f1d600;
    cursor: pointer;
    display: block;
    float: left;
    font-size: 0.6em;
    margin-right: 10px;
    max-width: 120px;
    padding: 8px 10px;
    text-align: center;
    transition: font-size 200ms ease 0s;
    width: 33%;
} */
section.features_teasers_wrapper {
    background-color: #4895D9;
    color: #fff;
}

section.features_teasers_wrapper div.arrow img {
    margin-top: 62px;
}

section.features_teasers_wrapper img {
    height: auto;
}

#footer_teasers_wrapper p, #footer_teasers_wrapper li {
    font-size: 110% !important;
}

#footer_teasers_wrapper .footer_teaser h3 {
    font-size: 140% !important;
    border-bottom: 1px solid #777;

}

#footer_teasers_wrapper .footer_teaser i {
    color: #4895D9;
    margin-right: 0.75em;
}

#footer_teasers_wrapper .footer_teaser a {
    color: #fff;
}

#jumbo {
    text-align: center;
}

#bannerToolbar {
    width: 80%;
    text-align: center;
    margin: 0 auto;
}

@media (min-width: 1210px) {
    #bannerToolbar {
        width: 450px;
        position: absolute;
        left: 64px;
        bottom: 75px;
    }

    #jumboFb {
        position: absolute;
        right: 64px;
        bottom: 75px;
    }

    #jumboFb div.fb-page {
        float: right;
    }

    #jumbo div.container, #jumbo {
        min-height: 480px;
    }

}

@media (min-width: 1300px) {
    #bannerToolbar::before {
        display: block;
        content: '';
        width: 64px;
        height: 64px;
        background: url(/images/icon64.png) center center no-repeat;
        position: relative;
        top: 70px;
        right: 50px;
        border: 1px solid #999;
    }
}


#bannerToolbar p {
    background: #fff;
    margin-bottom: 0;
    padding: 0.5em;
    text-align: center;
    color: #777;
}


a.bannerToolbarDownloadButton {
    display: block;
    margin-top: 0;

    width: 100%;
    height: 45px;
    line-height: 45px;

    font-size: 90%;

    color: #fff;
    background-color: #5DB75D;

    text-align: center;

    -moz-box-shadow: 5px 5px 2px #777;
    -webkit-box-shadow: 5px 5px 2px #777;
    box-shadow: 5px 5px 2px #777;
}

a.bannerToolbarDownloadButton span::after {
    content: ' \003e';
}

@media (min-width: 670px) {
    #jumbo {
        width: 100%;
        height: 100%;
        background: url(/css/frontpage/slider/slider1.jpg) center center no-repeat;
        background-size: cover;
        color: #fff;
    }

    #jumbo div.container {
        position: relative;
        padding-bottom: 1em;

    }
}

.intro-main {
    font-weight: 700;
    margin-top: 1.5em;
    font-size: 2.6em;
}

.intro-sub {
    font-size: 1.7em;
    font-weight: 400;
}

.intro-the-price {
    font-size: 3em;
    margin-top: 0.5em;
}

.cta-want-help, .cta-want-extension {
    margin-top: 40px;
    box-shadow: 0 3px #23A33D;
    background-color: #5DB75D;
    padding-left: 40px;
    padding-right: 40px;
    border: none;
    text-transform: uppercase;
}

.cta-want-help {
    min-width: 270px;
}

.cta-want-get-extension {
    margin-top: 10px;
    background: #60b45f;
    background: -moz-linear-gradient(top, #60b45f 0%, #377630 100%);
    background: -webkit-linear-gradient(top, #60b45f 0%,#377630 100%);
    background: linear-gradient(to bottom, #60b45f 0%,#377630 100%);
    border: none;
    text-transform: uppercase;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    white-space: normal;
}

.campaign .cta-want-get-extension {
    text-transform: initial;
    font-size: 24px;
}

.flexslider .item {
    background-position: right center;
}

#bannerToolbarRight li, #ib li {
    display: inline-block;
    list-style-type: none;
    margin-right: 1.5em;
}

#ib li {
    width: 40%;
}

.pricing_plan .the_price {
    width: 90%;
    margin: 0 auto 10px auto;
    font-size: 40px;
    padding: 15px 5px;
}

.pricing_plan .the_offerings {
    padding: 0 20px 0px 20px;
}

@media (min-width: 768px) {
    .pricing_plan .the_offerings {
        min-height: 3.5em;
    }

    a.bannerToolbarDownloadButton {
        font-size: 120%;
    }
}

@media (min-width: 992px) {
    .pricing_plan .the_offerings {
        min-height: auto;
    }
}

#regUser, .signin div.or {
    padding-bottom: 30px;
}

#hpStats {
    margin-top: 4em;
}

@media (min-width: 1920px) {
    #jumbo {
        background-position: center center;
    }

}

@media (min-width: 768px) {
    .navbar .nav li a {
        padding-left: 6px;
        padding-right: 6px;
        font-size: 13px;
    }
}

@media (min-width: 992px) {
    .navbar .nav li a {
        padding-left: 15px;
        padding-right: 15px;
        font-size: 14px;
    }
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
    border-top: 0;
}

.table > thead > tr > th {
    border-bottom: 0;
}

table.text-center th {
    text-align: center;
}


#myGivt2Top {
    background-color: #fff;
    padding: 3em 0;
    height: auto;


    font-size: 150%;
}

#myGivt2Top * {
    background-color: #fff;
    color: #000;
}

#myGivt2How li p#myGivt2Bold {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    padding-bottom: 10px;
    color: #000;
}

#myGivt2How {
    margin-top: 20px;
    text-align: center;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#myGivt2How * {
    text-align: center;
}

#myGivt2How li {
    list-style-type: none;
    padding-bottom: 40px;
    margin-bottom: 30px;
    width: 100%;
}

#myGivt2How li:last-child {
    background-image: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

#myGivt2How li p {
    margin-top: 10px;
    color: #777;
    font-size: 80%;
}

@media (min-width: 700px) {
    #myGivt2How li {
        padding: 0;
        margin: 0;

        width: 50%;
        display: inline-block;
        vertical-align: top;
    }

    #myGivt2How li:last-of-type {
        padding: 0;
        margin: 0;
    }

    #myGivt2How li img {
        max-width: 100%;
        height: auto;
    }
}

@media (min-width: 1000px) {
    #myGivt2How li {
        width: 25%;
    }
}

/* popup common start */

div.popUp {
    display: none;
    background-color: #fff;
    color: #666;
    border-radius: 5px;
    padding: 1em 2em 2em 2em;
    position: relative;
    width: 80%;
    margin: 2em auto 1em;
    max-width: 750px;
}

div.popUpHeader {
    margin: 0;
}

div.popUpBody, div.popUp hr {
    border-top: 1px solid #DFDFDF;
    padding-top: 1em;
}

div.popUp p {
    font-size: 0.95em;
}

div.popUp h2 {
    font-size: 1.2em;
    font-weight: bold;
    margin-top: 0;
}

div.popUp h2, div.popUp strong {
    color: #4E9FD6;
}

div.popUp h2 strong {
    color: #333;
}

.icon-remove-sign:before {
    content: "\f057";
    font-size: 2.5em;
    color: rgba(0, 0, 0, .3);
    cursor: pointer;
    background-color: #fff;
    border-radius: 3em;
    padding: 0.20em 0.25em;
}

div.popUpClose {
    position: absolute;
    right: -1em;
    top: -1em;
}

div.popUp i {
    color: #8AC87D;
    vertical-align: middle;
    margin-right: 0.3em;
}

div.popUp h1 {
    font-size: 1.428571em; /* 20/ 14 */
    color: #333;
    font-weight: bold;
}

div.popUp p.bold {
    font-weight: bold;
}

/* popup common end */

.text-center .img-responsive {
    margin: 0 auto;
}

#klikni-a-prispej-pre #jumbo {
    background-image: none;
}

#klikni-a-prispej-pre div.fb-page {
    float: none;
    width: auto;
    margin-top: 1em;
}

#klikni-a-prispej-pre div.fb-like {
    margin-top: 2em;
}

#klikni-a-prispej-pre #jumbo div.hpTextBanner h1 {
    color: #428bca;
}


#klikni-a-prispej-pre #jumbo div.hpTextBanner p.normal {
    font-size: 1em;
    margin: 1em 0 0 0;
    line-height: 170%;
}

#klikni-a-prispej-pre #orgVote {
    margin-top: 2em;
}

#klikni-a-prispej-pre h2 strong {
    font-weight: normal;
    color: #428bca;
}

#klikni-a-prispej-pre #weAre {
    margin-top: 4em;
}

#klikni-a-prispej-pre #weAre div.fb-page {
    margin: 1em 0 2em;
}


/**/

#klikni-a-prispej-pre #orgInfo {
    margin: 3em auto;
    text-align: left;
}

#klikni-a-prispej-pre #fundState {
    border: 2px solid #5092CC;
    border-radius: 5px;
    background-color: #FCFCFC;
    padding: 1em 2em;
    margin-top: 2em;
}

#klikni-a-prispej-pre #fundState #amount {
    position: relative;
}


#klikni-a-prispej-pre #fundState #currentAmount {
    color: #418BCA;
    font-size: 20px;
}

#klikni-a-prispej-pre #fundState #finalAmount {
    color: #E4E4E4;
    font-size: 14px;
    font-weight: bold;

    position: absolute;
    right: 0;
    bottom: 3px;
}

#klikni-a-prispej-pre #fundState #thermometer {
    width: 100%;
    height: 16px;
    background-color: #E4E4E4;
}

#klikni-a-prispej-pre #fundState #thermometer span {
    display: block;
    height: 16px;
    background-color: #418BCA;
}

#klikni-a-prispej-pre #fundInfo {
    border-top: 1px solid #ccc;
    margin-top: 3em;
    padding-top: 3em;
}

#klikni-a-prispej-pre #fundTerm {
    font-size: 80%;
    text-align: center;
}

#klikni-a-prispej-pre p.lead {
    font-weight: normal;
}

#klikni-a-prispej-pre div.popUp {
    font-size: 150%;
}

#klikni-a-prispej-pre div.popUp h1 {
    color: #418bca;
}

#klikni-a-prispej-pre div.popUp div.fb-like {
    margin: 0 0 1em 0;
}

@media (min-width: 480px) {
    #klikni-a-prispej-pre #fundState #currentAmount {
        font-size: 30px;
    }

    #klikni-a-prispej-pre #fundState #finalAmount {
        font-size: 20px;
    }
}


@media (min-width: 800px) {
    #klikni-a-prispej-pre #fundState #currentAmount {
        font-size: 60px;
    }

    #klikni-a-prispej-pre #fundState #finalAmount {
        font-size: 40px;
    }
}

@media (min-width: 992px) {
    #klikni-a-prispej-pre #fundState {
        margin-top: 0;
    }
}


@media (min-width: 1140px) {
    #klikni-a-prispej-pre #jumbo {
        position: relative;
    }

    #klikni-a-prispej-pre #jumbo div.container {
        background: url(/images/Klikni-a-prispej.jpg) center top no-repeat;
        height: 540px;
    }

    #klikni-a-prispej-pre #jumbo div.hpTextBanner {
        position: absolute;
        left: 600px;
        bottom: 0;
        text-align: left;
        width: 530px;
    }

    #klikni-a-prispej-pre #jumbo div.fb-page {
        position: absolute;
        left: 15px;
        bottom: 0;
        text-align: left;
    }

    .intro-the-price {
        margin-top: 40px;
        font-size: 5em;
    }

}


/* tablesorter */
table.tablesorter thead tr .header {
    background-image: url(bg.png);
    background-repeat: no-repeat;
    background-position: center right 5px;
    cursor: pointer;
    padding-right: 15px;
}

table.tablesorter thead tr .headerSortUp {
    background-image: url(asc.png);
}

table.tablesorter thead tr .headerSortDown {
    background-image: url(desc.png);
}

table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
    background-color: #8dbdd8;
}

#transaction-table span.nowrap-container {
    white-space: nowrap;
    position: relative;
}

#transaction-table span.bonus {
    color: #006600;
    font-size: 80%;
    vertical-align: super;
    font-weight: bold;
}

.counter_stats {
    padding-top: 30px;
    font-size: 1.5em;
}

#organizations_logos {
    padding-top: 6em;
    padding-bottom: 6em;
}

.partners_logo div {
    padding-top: 2rem;
}

#clients {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
    background-color: #FFFFFF;
    border-bottom: 2px solid #e0e2e2;
}

.client_logo {
    margin-top: 16px;
}

.partners_logo {
    padding-top: 3em;
}

.we-help {
    padding-top: 1em;
}

#writeAboutUs {
    padding-top: 70px;
    padding-bottom: 100px;
    margin-bottom: 3em;
    background-color: #f0f8ff;
}

.reference {
    padding-top: 3em;
}

.quote {
    color: rgba(0, 0, 0, .1);
    text-align: center;
    margin-bottom: 30px;
}

.reference_box {
    position: relative;
    background: #f2f2f2f2;
    color: #333;
    min-height: 250px;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
    background-color: #f5f5f5;
}

.icon-reference {
    color: #333;
}

.reference_text {
    padding: 10px;
    font-style: italic;
    min-height: 200px;
    text-align: justify;
}

.reference_autor {
    font-weight: 700;
    padding: 20px;
}

/*-------------------------------*/
/*    Carousel Fade Transition   */
/*-------------------------------*/


#fade-quote-carousel.carousel {
    padding-bottom: 60px;
}

#fade-quote-carousel.carousel .carousel-inner .item {
    opacity: 0.1;
    -webkit-transition-property: opacity;
    -ms-transition-property: opacity;
    transition-property: opacity;
}

#fade-quote-carousel.carousel .carousel-inner .active {
    opacity: 1;
    -webkit-transition-property: opacity;
    -ms-transition-property: opacity;
    transition-property: opacity;
}

#fade-quote-carousel.carousel .carousel-indicators {
    bottom: 10px;
}

#fade-quote-carousel.carousel .carousel-indicators > li {
    background-color: #5994D3;
    border: none;
}

#fade-quote-carousel blockquote {
    text-align: center;
    border: none;
}


/* Materials For Organization */
#materials-header {
    color: #ffffff;
    background-color: #428bca;
    padding-top: 40px;
    padding-bottom: 60px;
}

#materials-header p a {
    color: #ffffff;
}

.materials__content {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.materials__tile {
    text-align: center;
    margin-bottom: 3rem;
}

.materials__tile h3 {
    text-align: center;
}



.materials__content .img-thumbnail {
    box-sizing: content-box;
}

.download-btn {
    margin-top: 30px;
    margin-bottom: 30px;
}

.materials__icon-tile {
    margin-bottom: 30px;
    text-align: center;
}

.materials__icon-tile img {
    max-width: 60%;
    height: auto;
}

@media (min-width: 768px) {
    .materials__icon-tile img {
        max-width: 128px;
        height: auto;
    }
}


.materials__icon-tile span {
    display: block;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    margin: 1rem auto;
}

.materials__icon-tile a {
    display: block;
    border-radius: 3px;
    padding: 2rem;
    color: #333;
}

.materials__icon-tile a:hover,
.materials__tile a:hover img {
    -webkit-transition: -webkit-box-shadow 0.25s;
    transition: -webkit-box-shadow 0.25s;
    transition: box-shadow 0.25s;
    transition: box-shadow 0.25s, -webkit-box-shadow 0.25s;
    -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.materials__tile a:hover .btn {
    color: #ffffff;
    background-color: #47a447;
    border-color: #398439;
}

/* Extension */
section#extension {
    padding-top: 2em;
    padding-bottom: 100px;
    background-color: #428bca;
    margin-bottom: -40px;
    background-image: url(/css/background-page.png);
    background-repeat: repeat-x;
    background-size: cover;
}

#get-extension {
    color: #585858;
    background-color: #428bca;
    background-image: url(/css/background-page.png);
    background-repeat: repeat-x;
    background-size: cover;
    padding-top: 60px;
    padding-bottom: 100px;
    margin-bottom: -40px;
}

#get-extension label, #get-extension .like-label {
    font-size: 24px;
    font-weight: normal;
}

#get-extension h3 {
    font-weight: bold;
}

#get-extension.general .row:first-of-type {
    border-bottom: 1px solid #fff;
    margin-bottom: 4rem;
}

#get-extension .well {
    margin-bottom: 6rem;
    background-color: #fff;
}

#get-extension .organization-logo {
    max-height: 195px;
    width: auto;
}

#get-extension .form-group {
    width: calc(100% - 9rem);
}

#get-extension #coupon {
    width: 100%;
}

#get-extension .get-extension-coupon-label {
    font-size: 2.2rem;
}

#get-extension.coupon iframe {
    margin-top: 24px;
}

#get-extension.coupon {
    background: #d4eef2 url(/css/background-coupon.jpg) center top;
}

#get-extension.coupon h1 {
    background-color: #80b2db;
    color: #fff;
    border-radius: 20px;
    padding: 35px 20px;
    font-weight: bold;
}

#get-extension.coupon h2 {
    font-size: 2.8rem;
    font-weight: bold;
}

#get-extension.coupon .form-inline {
    margin-top: 1rem;
}

#get-extension.coupon .intro-extension {
    color: #585858;
}

.no-active-step {
    display: none;
}

#step-wrapper {
    margin-top: 50px;
    border-bottom: solid #666 3px;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

#step-wrapper h2 {
    margin: 0;
}

#step-wrapper .cta-want-get-extension {
    border-radius: 20px;
    text-transform: uppercase;
    font-size: 30px;
}

#step2 {
    background-color: #fff;
    opacity: 0.9;
    border-radius: 32px;
    padding: 27px 24px 36px;

}
#step2-in {
    display: flex;
}

#step2::after {
    content: "";
    clear: both;
    display: table;
}

#step2 .organization-logo {
    width: 120px;
}

#step2 .description {
    flex-grow: 1;
    text-align: left;
}

#step2 .description p {
    margin: 1rem 0 0 0;
    font-size: 16px;
}
#step2 .description b {
    font-size: 18px;
}

#step2 img {
    max-width: 100%;
    height: auto;
    float: left;
}


#get-extension.general {
    color: #fff;
}

#get-extension-select-organization {
    margin: -0.5rem 0 5rem;
}

.after-instalation-extension {
    margin-top: 2rem;
    font-size: 20px;
}

.general .after-instalation-extension {
    color: #fff;
}

.well-dark {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #2c3e50;
    border: 1px solid #28394a;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}

.well-transparent {
    background-color: #ffffff66;
    color: #fff;
}

.get-extension {
    font-size: 27px;
    line-height: 125%;
    margin-top: 2rem;
}

.get-extension p {
    margin-top: 3rem;
}

.get-extension-combobox .custom-combobox-input {
    width: 100%;
    border: 2px solid #0d2035;
    border-radius: 7px;
    padding: 0.5rem 1rem;
    height: auto;
}

h1.title-extension {
    font-weight: 700;
    color: #fff;
    padding-bottom: 15px;
}

h1.title-extension a {
    color: #fff;
}
h1.title-extension a:hover {
    text-decoration: underline;
}

h1.get-title-extension {
    font-size: 30px;
    font-weight: bold;
    margin-top: 0;
}

.sub-title-extension {
    margin-top: 25px;
    font-size: 16px;
}

.checked-extension {
    margin-right: 10px;
}

.get-checked-extension {
    margin-right: 10px;
    position: absolute;
}

.intro-extension {
    color: #ffffff;
}

ul.why-get-extension {
    margin-top: 30px;
    margin-left: 10px;
    list-style: none;
}

ul.why-get-extension > li {
    margin-top: 10px;
    font-size: 16px;
}

ul.why-get-extension-popup {
    margin-top: 5px;
    margin-left: 10px;
    list-style: none;
}

ul.why-get-extension-popup > li {
    margin-top: 10px;
}

.why-get-extension-text-popup {
    font-size: 14px;
    margin-left: 30px;
}

p.why-get-extension-popup-title {
    font-size: 1.5em !important;
    font-weight: 700;
}

.why-get-extension-text {
    font-size: 16px;
    margin-left: 30px;
}

#get-extension-give-50 {
    margin-top: 60px;
    font-size: 16px;
}

.extension-preview {
    margin-top: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}

.extension-preview:hover {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.extension-logos {
    padding-top: 0.5rem;
}

.extension-logo {
    margin-left: 10px;
}

.extension-for-broswer {
    margin-top: 1rem !important;
}

.general .extension-for-broswer {
    color: #fff;
}

/* FAQ */
section.faqUsers, .faqGroups {
    padding-top: 3em;
}

/* CTA TOOLBAR PAGE*/
section#how-to-use-toolbar {
    padding-top: 60px;
    padding-bottom: 70px;
    background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
}

.cta-section-icons {
    margin-top: 100px;
}

h1.title-help {
    font-size: 22px;
    text-align: center;
    margin-bottom: 15px;
}

.cta-firts-step-text, .cta-second-step-text, .cta-third-step-text {
    margin-top: 20px;
    font-size: 18px;
}

.mouse-action-left {
    position: absolute;
    top: -50px;
    right: 70px;
}

.mouse-action-middle {
    position: absolute;
    top: -50px;
    right: 65px;
}

.mouse-action-right {
    position: absolute;
    top: -130px;
    right: 25px;
}

#tap-1 {
    animation-duration: 0.5s;
    animation-delay: 1s;
}

#tap-2 {
    animation-duration: 0.5s;
    animation-delay: 1.5s;
}

#tap-3 {
    animation-duration: 0.5s;
    animation-delay: 2s;
}

#extension-i-want-help {
    background-color: #fff;
    margin-top: 60px;
    margin-bottom: 100px;
}

ul.why-get-extension-help {
    margin-top: 30px;
    margin-left: 10px;
    list-style: none;
    color: #000;
}

.title-extension-help, .sub-title-extension-help {
    color: #000;
}

section#i-want-help-select {
    padding-top: 70px;
    background-image: url(/css/background-page.png);
    background-size: contain;
    padding-top: 100px;
    padding-bottom: 200px;
}

.i-want-help-now {
    background-color: #6DB777;
    padding-top: 50px;
    padding-bottom: 60px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}

a .i-want-help-now h2, a .i-dont-help-now h2 {
    color: #fff;
    font-weight: 700;
    text-shadow: 1px 1px #000;
}

a .i-want-help-now:hover {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.i-dont-help-now {
    background-color: #5994D3;
    padding-top: 50px;
    padding-bottom: 60px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}

.i-dont-help-now:hover {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

input[type=checkbox].css-checkbox {
    position: absolute;
    z-index: -1000;
    left: -1000px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}

input[type=checkbox].css-checkbox + label.css-label {
    padding-left: 40px;
    height: 30px;
    display: inline-block;
    line-height: 30px;
    background-repeat: no-repeat;
    background-position: 0 0;
    font-weight: normal;
    vertical-align: middle;
    cursor: pointer;

}

input[type=checkbox].css-checkbox:checked + label.css-label {
    background-position: 0 -30px;
}

label.css-label {
    background-image: url(csscheckbox.png);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#selectCategory {
    display: none;
}

.underline {
    text-decoration: underline;
}

.catalog-badge {
    position: relative;
}

.catalog-badge::after {
    position: absolute;
    right: 0;
    top: 2px;
    display: block;
    background: url("catalog-badge.png") no-repeat;
    background-size: 100%;
    width: 69px;
    height: 59px;
    content: ' ';
}

.top100 {
    position: absolute;
    right: 0;
    bottom: 0;
}

.caption {
    margin-top: 1rem;
    background-color: #eff8ff;
    color: #3483c6;
    text-align: center;
    padding: 4rem;
    font-size: 20px;
}

.caption a {
    text-decoration: underline;
}

.or.at-login {
    padding: 15px 0 0 0;
}

.not-signed {
    padding-top: 2rem;
    margin-top: 2rem;
    border-top: 1px solid #000;
}

.not-signed .btn {
    margin-top: 4rem;
}

@media (min-width: 992px) {
    .not-signed {
        padding-top: 0;
        margin-top: 0;
        border-top: none;
    }
}

.organization-news {
    padding: 0;
    list-style-type: none;
}

.organization-news li {
    padding-left: 1rem;
}

.organization-news li::before {
    color: #428bca;
    content: '•';
}

.organization-news li h3 {
    display: inline-block;
}

.organization-news li span {
    font-weight: bold;
}

legend {
    margin: 4rem 0 1rem 0;
}

.stripe {
    padding-top: 1.75rem;
}

.stripe:nth-child(odd) {
    background-color: #eff8ff;
}

.organization-detail {
    margin-top: 3rem;
}

.organization-detail header h1 {
    margin-top: 14px;
    margin-bottom: 21px;
}

.organization-detail header .heading {
    border-bottom: 2px solid #1e1e1e;
}

.no-gutters-all [class^="col-"],
.no-gutters-all [class*=" col-"] {
    padding-right: 0;
    padding-left: 0;
}

nav.org-detail {
    margin-top: 3rem;
}

nav.org-detail li {
    list-style-type: none;
    display: inline-block;

}

nav.org-detail li a {
    text-transform: uppercase;
    color: #1e1e1e;
    display: block;
    padding-left: 3rem;
    padding-right: 3rem;
    line-height: 100%;
    border-right: 1px solid #1e1e1e;
    font-size: 16px;
}

nav.org-detail li a:hover {
    color: #333333;
}

nav.org-detail li:first-child a {
    padding-left: 0;
}

nav.org-detail li:last-child a {
    border-right: none;
}

.organization-detail .main {
    margin: 3rem 0;
}

ul.stripped li:nth-child(even) {
    background-color: #c7dcef;
}

.organization-detail .main .review li,
.organization-detail .main .contacts li {
    padding: 1rem;
    list-style-type: none;
}

.organization-detail .main .review li span,
.organization-detail .main .contacts li span {
    display: inline-block;
}

.organization-detail .main .review li span:first-of-type {
    width: 75%;
}

.organization-detail .main .review li span:last-of-type {
    width: 25%;
}

.organization-detail .main .contacts li span:first-of-type {
    width: 45%;
}

.organization-detail .main .contacts li span:last-of-type {
    width: 55%;
}

.organization-detail .main .contacts span {
    width: 50%;
    vertical-align: top;
}

.organization-detail h2 {
    text-transform: uppercase;
    color: #428bca;
    font-size: 20px;
    margin-top: 5rem;
    border-bottom: 3px solid;
    padding-bottom: 1.5rem;
}

.organization-detail #pomozte {
    background-color: #e4eef7;
    -moz-box-shadow: inset 0 0 30px 20px #fff;
    -webkit-box-shadow: inset 0 0 30px 20px #fff;
    box-shadow: inset 0 0 30px 20px #fff;
    border-radius: 20%;
    padding: 50px;
    margin: 0 -50px;
}

.organization-detail #pomozte h2 {
    text-transform: none;
    color: #1e1e1e;
    font-weight: normal;
    border-bottom: none;
    margin-top: 0;
}

.organization-detail #pomozte p {
    margin-top: 2rem;
}

.organization-detail .image-thumbnails {
    margin: 0 -0.5rem;
    display: flex;
    position: relative;
}

.organization-detail .image-thumbnails img {
    margin: 1rem 0.5rem;
    max-width: calc(25% - 1rem);
    height: auto;
    align-self: center;
}

.organization-detail header {
    border-bottom: none;
}

.organization-detail #map {
    height: 200px;
    width: auto;
    margin-top: 4rem;
}

.organization-detail #fg-preview-wrapper {
    width: 100%;
    padding-top: 75%;
    position: relative;
    overflow: hidden;
}

.organization-detail #fg-preview {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.app-not-supported {
    margin-top: 6rem;
}

.app-not-supported h1 {
    margin-top: 0;
    font-size: 2.4rem;
}

.app-not-supported .browser-logos {
    font-size: 1.6rem;
    text-align: center;
}

.companions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 2rem 10%;
}

.companions img {
    margin: 0 1vw;
    /* treat Chrome bug https://github.com/philipwalton/flexbugs/issues/225 */
    width: 100%;
    height: 100%;
    min-width: 0;
}

.no-top {
    margin-top: 0 !important;
}

.uppercase {
    text-transform: uppercase;
}

#app-video {
    margin-top: 3rem;
}

#extension .only-has-extension {
    display: none;
}

#extension .only-has-not-extension {
    display: block;
}

@media screen and (min-width: 640px) {
    #extension:not(.no-extension) .only-has-extension {
        display: block;
    }

    #extension:not(.no-extension) .only-has-not-extension {
        display: none;
    }
}

.intro-extension .alert {
    margin-top: 3rem;
}

#g-signup-wrapper {
    margin: 2rem auto;
    width: 222px;
}

#signinButton {
    background: #4285F4;
    color: #fff;
    width: 330px;
    height: 50px;
    border: none;
    border-radius: 5px;
    white-space: nowrap;
    display: flex;
    padding: 0;
}
#signinButton:hover {
    cursor: pointer;
}

#signinButton .icon {
    width: 50px;
    height: 50px;
}
span.buttonText {
    font-size: 20px;
    font-weight: bold;
    /* Use the Roboto font that is loaded in the <head> */
    font-family: 'Roboto', sans-serif;
    margin: auto;
}

.toTop100Inner {
    width: 100%;
}

#xmas {
    padding-top: 2em;
    padding-bottom: 100px;
    margin-bottom: -40px;
    background-image: url(/css/background-xmas.png);
}

#xmas {
    background: #f8f7f2;
}

#xmas .well-dark {
    color: #fff;
}

#xmas .row {
    margin-bottom: 4rem;
}

#xmas .like-label {
    display: inline-block;
    margin-bottom: 5px;
    font-weight: bold;
}

.xmas-first-col {
    padding-bottom: 2rem;
}

@media only screen and (min-width: 992px) {
    #xmas .like-label {
        display: block;
    }

    #xmas .container-in {
        background: #f8f7f2 url(bg-xmas2020-lt.png) no-repeat left top;
        min-height: 300px;

    }

    #xmas > .container {
        background: #f8f7f2 url(bg-xmas2020-rb.png) no-repeat right bottom;
    }

    .xmas-row {
        display: flex;
        align-items: center;
    }

    .xmas-row .xmas-first-col > h3 {
        margin-top: 0;
    }

    .xmas-row .well-dark {
        min-height: 29rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .xmas-row .well-dark *:first-child {
        margin-top: 0;
    }

    .xmas-row .well-dark *:last-child {
        margin-bottom: 0;
    }
}

@media only screen and (max-width: 992px) {
    .xmas-first-col {
        padding-left: 0;
        padding-right: 0;
    }
}

.xmas-form-control {
    min-width: 225px;
}

.mb-3 {
    margin-bottom: 2rem;
}

.notification {
    background-color: #428bca;
    color: #ffffff;
    text-align: center;
}

.notification a {
    color: #ffffff;
    text-decoration: underline;
}

.notification .closer {
    padding: 0 1rem;
    position: relative;
    top: 0.3rem;
    font-size: 170%;
}

.notification .closer:hover {
    text-decoration: underline;
    cursor: pointer;
}

.reclamation-call {
    font-weight: bold;
    margin: 1rem 0 3rem;
}

.reclamation-form-inner {
    position: relative;
}

.reclamation-required-note {
    position: absolute;
    bottom: 0;
    right: 42px;
}

.reclamation__add-order {
    text-align: right;
    margin-top: 0;
}

.reclamation__add-order span {

}

.disabled {
    color: #ccc8b6;
}

#newsletter_subscription {
    background-color: #4895d9;
    padding-bottom: 2rem;
}

#newsletter_subscription .help-block {
    color: #fff;
}

#newsletter_subscription label {
    font-weight: bold;
    font-size: 16px;
    padding-right: 1rem;
    line-height: 100%;

    position: relative;
    top: 5px;
}

@media only screen and (min-width: 720px) {
    #newsletter_subscription label {
        font-size: 22px;
    }
}

@media only screen and (min-width: 1000px) {
    #newsletter_subscription label {
        font-size: 24px;
    }
}


#newsletter-input-wrapper {
    margin-top: 1rem;
}

@media only screen and (min-width: 1200px) {
    #newsletter-input-wrapper {
        margin-top: 0;
    }
}

#newsletter-input-wrapper button {
    margin-top: 1rem;
    width: 100%;
}

@media only screen and (min-width: 768px) {
    #newsletter-input-wrapper button {
        margin-top: 0;
        width: auto;
    }
}

.test-untested .success,
.test-untested .failure {
    display: none;
}

.test-untested h3 {
    color: #ccc;
    position: relative;
}

.test-untested h3::before {
    content: '? ';
}

.test-untested h3::after {
    content: ' ... netestováno';
    font-size: 60%;
    position: absolute;
    right: 0;
    bottom: 3px;
}

.test-result .test-success .success,
.test-result .test-failure .failure {
    display: block;
}

.test-result .test-failure .success,
.test-result .test-success .failure {
    display: none;
}

.test-success h3::before {
    content: "\f00c";
    display: inline-block;
    margin-right: 1rem;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 100%;
    color: rgb(60, 118, 61);
}

.test-failure h3::before {
    content: "\f05e";
    display: inline-block;
    margin-right: 1rem;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 100%;
    color: rgb(169, 68, 66);
}

#extensionCookiePresent {
    display: none;
}

.mobile-app-qr-code > div {
    margin-top: 5rem;
}

ol.highlighted {
    list-style: none;
    counter-reset: item;
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    margin-left: 0;
    padding-left: 0;
}

ol.highlighted li {
    counter-increment: item;
    margin-bottom: 1rem;
}

ol.highlighted li:before {
    margin-right: 10px;
    content: counter(item);
    background: #47a447;
    border-radius: 100%;
    width: 34px;
    height: 34px;
    text-align: center;
    display: inline-block;
}


fieldset {
    position: relative;
    padding: 15px;
    border: 1px solid #ccc;
    margin: 3rem auto;
}

legend {
    display: inline-block;
    width: initial;
    background-color: #fff;
    padding: 0 2rem;
    border: none;
}