body {
    font-family: 'Roboto', sans-serif;
}

#header {
    background-color: rgba(0, 0, 0, 0.7);
    padding: 0 15px;
    z-index: 9999;
}

#header .mobile-nav-open{
    display: none;
}

#header .nav {
    color:#fff;
}

.logo {
    color:#fff;
}

.logo h1{
    margin:0;
}

.logo span:first-child {
    font-size:.4em;
    display: block;
    line-height: 1;
}

.logo span:last-child {
    font-size:.7em;
    display: block;
    line-height: 1;
}

.help-btn {
    display: flex;
    justify-content: center;
}

.help-btn a {
    color: #fff;
    text-transform: uppercase;
    font-size: .9em;
    background-color: #6C7E5B;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
}

.help-btn a {
    color: #fff;
    text-transform: uppercase;
    font-size: .9em;
    background-color: #6C7E5B;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.phone-btn a {
    color: #D0A334;
    font-weight: bold;
}

.lang-btn a {
    color: #fff;
    font-weight: bold;
}

#top-block{
    background-image: url("https://www.kalush-volunteers.com.ua/img/bg2.jpg");
    height: 300px;
    color:#fff;
    padding-top:100px;
    background-position: center;
}

#top-block h2 {
    display: block;
    text-align: center;
    text-transform: uppercase;
    text-shadow: -1px 2px 3px black;
}

#top-block p {
    display: block;
    text-transform: uppercase;
    text-shadow: -1px 2px 3px black;
    font-weight: 500;
    font-size: 1.2em;
    font-style:italic;
    text-align: right;
    padding-right: 20px;
    margin-top:-25px;
}

#top-block .help-btn {
    left:0;
    right:0;
    bottom:-35px;
    font-size:1.7em;
    font-weight: bold;
}

#products-block {
    margin-top:25px;
    font-weight: 100;
}

#products-block .title {
    width:85%;
    margin:0 auto;
    text-transform: uppercase;
    padding-top:15px;
}

#products-block .title h3 {
    font-size:1em;
}

.products-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding-bottom: 100px;
}

.product-description {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
    margin:15px;
    flex-grow: 1;
    min-width:300px;
    max-width:30%;
}

.product-description .img{
    height:240px;
    position:relative;
    overflow: hidden;
}

.product-description .img img{
    height:100%;
    width:auto;
    position:absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
}

.product-description .description {
    display: -webkit-box;
    -webkit-line-clamp: 15;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width:85%;
    margin:25px auto;
    line-height: 1.2;
    font-size:.8em;
    height:150px;
}

.product-description .text {
    margin-bottom:10px;
    font-weight: bold;
    font-size: .8em;
}

.product-description .text span {
    margin-bottom:10px;
    font-weight: lighter;
    font-size: .8em;
}

.product-description .collected {
    width:85%;
    margin:25px auto;
}

.product-description .collected .total {
    height:10px;
    background-color: #989898;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    overflow: hidden;
}

.product-description .collected .progress {
    height:10px;
    background-color: #E9B63A;
    width:0;
}

.product-description .bottom {
    width:85%;
    margin:25px auto;
    line-height: 1.1;
}

.product-description .bottom .total-price p{
    font-weight: bold;
    font-size: .9em;
}

.product-description .bottom .total-price p span{
    font-weight: lighter;
    font-size: .8em;
}

.product-description .bottom .help-btn a{
    padding:10px 20px;
    font-weight: bold;
}

#about-us {
    overflow: hidden;
    display: flex;
    align-items: stretch;
    justify-content: center;
    background-color: #6C7E5B;
    color:#fff;
}

#about-us .text{
    max-width: 800px;
    float: left;
}

#about-us .text h3 {
    padding:10px 22px;
    font-size: 2em;
    text-transform: uppercase;
}

#about-us .text p {
    font-size: 1em;
    line-height: 1.4;
    margin:15px 0;
}


#about-us .images {
    overflow: hidden;
    height: 1300px;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

#slogan {
    padding:10px;
    color:#fff;
    background-color: #6C7E5B;
    text-align: center;
    font-weight: bold;
}

#props{
    padding:100px 0;
}

#props h2{
    text-align: center;
    margin-bottom: 50px;
    text-transform: uppercase;
}

#props .ui.tabular.menu .active.item{
    background-color: #6C7E5B;
    color: #fff2f2;
}

#props .props-description{
    text-align: center;
}

#props .props-description h4{
    font-size: 1.5em;
    margin-bottom: 50px;
}

#props .props-description .prop-element{
    margin-bottom: 25px;
    line-height: 1.2;
}

#props .props-description b{
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
}

#props .props-description .ui.pointing.label{
    position:absolute;
    top:-40px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 130px;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
    display: none;
}

#props .props-description .ui.pointing.label:before {
    box-shadow: 1px 2px 2px 0 rgba(0, 0, 0, .5);
}

#props .props-description i{
    margin-left:15px;
}

#props .props-description span{
    font-weight: 500;
    font-size:1em;
}

#footer {
    background-color: #000000;
    height:500px;
    color:#fff;
    padding-top:50px
}

#footer .left .logo{
    width:200px;
    margin-top:-55px;
}

#footer .right .links li{
    margin-bottom:25px;
}

#footer .middle a {
    margin-bottom: 25px;
    margin-top: 5px;
}

#footer .middle p a {
    display: block;
}

@media only screen and (max-width: 1050px)
{
    #header .logo .mobile-nav-open{
        display: block;
        font-size:2.1em
    }

    #header .logo .mobile-nav-open i{
        margin-left:-12px;
        margin-right:18px;
    }

    #header .logo h1{
        margin:0;
    }

    #header .nav {
        display: none;
    }

    #about-us {
        display: block;
    }

    #about-us .images {
        width:100%;
        height:auto;
    }

    #about-us .text {
        width:100%;
    }
}

@media only screen and (max-width: 850px)
{
    #footer{
        height:auto;
    }
    #footer > div{
        display: block;
    }
    #footer .left{
        width:100%;
        height: auto;
        padding: 0;
    }
    #footer .left .logo{
        margin: 0 auto;
    }
    #footer .middle{
        width:100%;
        height: auto;
        text-align: center;
    }
    #footer .right{
        width:100%;
        height: auto;
    }
    #footer .right .list .item{
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;
    }
    #footer .right .list .content{
       width:auto;
    }
}

@media only screen and (max-width: 620px)
{
    #header .phone-btn {
        display: none;
    }
    #top-block .c h2, #top-block .c p {
        font-size:1.1em;
    }
}

@media only screen and (max-width: 500px)
{
    .ui.tabular.menu .item {
        font-size:.8em;
        padding:10px;
    }
}

@media only screen and (max-width: 450px)
{
    #header .logo {
        font-size:.8em;
    }
    #header .logo h1{
        font-size:2em;
    }
    #header .help-btn{
        font-size:.8em;
    }
}