@charset "UTF-8";
/**
 * 
 * Copyright: Future Works s.r.o.
 * Version: 1.4
 * 
 */
/*
----------------------------------------------------------------------------- */
html {
    height: 100%;
}

body {
    font-family: 'Montserrat', sans-serif;
    color: #424242;
    background-color: #ffffff;
    display: block;
    margin: 0px;
    height: 100%;
    overflow-x: hidden;
}


h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0px;
    font-size: 26pt;
}

p {
    margin: 4pt 0;
    font-size: 11pt;
}

.wrapper {
    position: absolute;
    display: table;
    width: 100%;
    height: 100%;
    
}

.wrapper:before {
    animation: key-slide-up 1s .4s cubic-bezier(.5,.02,.93,.45) forwards;
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background-color: #ffffff;
    background-image:url('../images/bg.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom left;
    opacity: 0;

}

.darken {
    animation: invert-colors 1s cubic-bezier(.5,0,0,1) forwards;
}

.lighten {
    animation: invert-colors-back 1s cubic-bezier(.5,0,0,1) forwards;
}

@keyframes key-slide-up {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes invert-colors {
    0% {
    }
    100% {
        filter: invert(100%);
    }
}

@keyframes invert-colors-back {
    0% {
        filter: invert(100%);
    }
    100% {
        filter: invert(0%);
    }
}

@keyframes move-earth {
    0% {
        transform: translateX(140px);
        opacity: 0;
    }
    50% {
        opacity: .3;
    }
    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}



.img-responsive {
    max-width: 100%;
    height: auto;
}

.logo img {
    max-width: 370px;
}

.container {
    margin: 28pt;
}

.content {
    display: table;
    width: 100%;
    height: 50vh;
}


.middle {
    display: table-cell;
    vertical-align: bottom;
}

.product-row {
    display: table;
    margin: auto;
}

.product-item {
    display: inline-block;
    margin: 64pt;
}

.earth {
    position: absolute;
    bottom: 51vh;
    right: 14pt;
    width: 240px;
    height: 240px;
    background: #000 url('../images/earth.jpg') top center no-repeat;
    z-index: 1;
    opacity: 0;
}

.hidden {
    opacity: 0;
}

.visible {

    animation: move-earth 6s .4s cubic-bezier(.29,.29,.77,1.03) forwards;
}

.product-icon {
    display: inline-block;
    width: 64px;
    height: 64px;
    margin-right: 10pt;
    position: relative;
}

.product-icon img {
    position: absolute;
    top: 4pt;
    left: 0;
}

.product-header {
    display: inline-block;
}

.product-body-item-icon {
    display: inline-block;
    width: 47px;
    height: 47px;
    margin-right: 10pt;
    position: relative;
}

.product-body-item-icon {

}

.product-body-item-header {
    display: inline-block;

}

.product-body {
    margin-top: 36pt;
    margin-left: 14pt;
}

.product-body-item {
    margin-top: 14pt;
}

.contact {
    display: block;
    text-align: right;
    padding: 36pt;
    background: none;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.7));
    position: absolute;
    bottom: 0;
    right: 0;
}


.mail {
    display: block;
    font-size: 17pt;
    color: #424242;
    text-decoration: none;
    margin-bottom: 8pt;
    font-weight: bold;
}

.phone {
    display: block;
    font-size: 17pt;
    color: #424242;
    text-decoration: none;
    margin-bottom: 90pt;
}

.company {
    margin-bottom: 14pt;
}

@media (max-width: 1910px) {

    .earth {
        display: none;
    }
}


@media (max-width: 1700px) {

    .product-item {
        margin: 48pt 21pt;
    }
}

@media (max-width: 1400px) {


    .product-item {
        display: block;
    }


    .logo {
        padding: 21pt 14pt;
    }

    .contact {
        padding: 28pt;
    }


    .phone {

        margin-bottom: 64pt;
    }
    
    .last {
        margin-bottom: 240pt;
    }

}

@media (max-width: 900px) {

    .container {
        margin: 28pt 14pt;
    }

    .product-item {
        margin: 48pt 14pt;
    }

    .last {
        margin-bottom: 240pt;
    }

}

@media (max-width: 510px) {

    h1,h2 {
        font-size: 18pt;
    }

    .product-icon {
        display: block;
        margin-bottom: 8pt;
    }

    .product-body-item-icon {
        display: none;
    }

    .product-item {
        margin: 36pt 14pt;
    }

    .last {
        margin-bottom: 250pt;
    }

}