/*
 * Theme Name: Basic
 * Description: Basic is fully responsive, clean and minimal WordPress theme. It has various options in WordPress Customizer to change look of the theme - primary design color, background and header, page layout (left or right sidebar, full or centered content). Clean valid code, semantic markup, markup by Schema.org, full adaptation to mobile devices. Basic is ready to use with child themes and gives for developers simple design change with custom hooks and action. Translation Ready (English, Russian, Ukrainian, French, German, Polish, Turkish). Fully compatible with WPML, WooCommerce, bbPress.
 * Theme URI: http://wp-puzzle.com/basic/
 * Tested up to: 5.5
 * Requires PHP: 7.0
 * Author: WP Puzzle
 * Author URI: http://wp-puzzle.com/
 * Version: 1.3.12
 * License: GNU General Public License v2 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 * Tags: two-columns, one-column, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, sticky-post, threaded-comments, translation-ready, microformats
 * Text Domain: basic
 */


body {
    background: #0d0d17 url(..img/body.png) top center repeat;
    color: #fff;
    font-family: 'Yantramanav';
    font-size: 18px;
}

a {
    color: #b0f045;
}

.button {
    font-size: 20px;
    font-weight: bold;
    background: #b0f045;
    color: #000;
    display: inline-block;
    height: 38px;
    line-height: 38px;
    text-decoration: none;
    padding: 0 20px 0 15px;
    position: relative;
    text-transform: uppercase;
}

.button:before {
    content: "";
    top: 0;
    right: -10px;
    background: #b0f045;
    display: block;
    position: absolute;
    height: 38px;
    width: 20px;
    transform: skew(-20deg, 0deg);
}

.button:after {
    content: "";
    top: 0;
    right: -5px;
    background: #b0f045;
    display: block;
    position: absolute;
    height: 38px;
    width: 10px;
    transform: skew(-20deg, 0deg);
    border-left: solid 3px #000;
    border-right: solid 3px #000;
}


.center-box {
    margin: 0 auto;
    width: 1200px;
    overflow: hidden;
}

header {
    padding: 15px 0;
    background: -moz-linear-gradient(top, rgba(13, 13, 23, 1) 0%, rgba(13, 13, 23, 0) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(13, 13, 23, 1) 0%, rgba(13, 13, 23, 0) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(13, 13, 23, 1) 0%, rgba(13, 13, 23, 0) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0d0d17', endColorstr='#000d0d17', GradientType=0);
    /* IE6-9 */

}

#logo {
    float: left;
}

#logo a {
    width: 225px;
    height: 40px;
    display: block;
    background: url(img/gorilla.svg) top left no-repeat;
    background-size: 100% auto;
    margin-bottom: 20px;
}

#navigation {
    float: right;
    margin-top: 27px;
}

.inner-page {
    margin-bottom: 60px;
    background: #0d0d17;
}

a {
    color: #b0f045;
}

nav ul {
    float: right;
}

nav ul li {
    float: left;
    text-align: left;
}

nav ul li a {
    display: inline-block;
    color: #fff;
    font-size: 16px;
    padding-right: 30px;
    text-decoration: none;
    text-transform: uppercase;
    position: relative;
}

nav ul li a:before {
    content: "/";
    position: absolute;
    top: 0;
    right: 12px;
    color: #b0f045;
    font-weight: bold;
}

nav ul li a:hover {
    color: #b0f045;
}

nav ul li:last-of-type a:before {
    content: "";
}

nav ul li:last-of-type a {
    padding: 0;
}

#top {
    background: url(img/welcome.jpg) top center no-repeat;
}

#intro {
    width: 45%;
    margin: 150px 0;
}

#intro p,
#services p,
#offer p,
#team p {
    margin: 0 0 15px 0;
}

#services {
    padding: 70px 0;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.9);
}

.service {
    margin-bottom: 40px;
    margin-left: 20px;
    margin-right: 20px;
    position: relative;
}

.service:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: block;
    height: 35%;
    background: rgba(0, 0, 0, 0);
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.71) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.71)));
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.71) 100%);
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.71) 100%);
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.71) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.71) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000', GradientType=0);
}

.service img {
    width: 100%;
}

.service .button {
    position: absolute;
    bottom: 15px;
    left: 0;
}

#offer {
    background: #0e0e18 url(img/offer.jpg) top center repeat;
    padding: 70px 0;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.9);
}

#offer-text {
    float: right;
    width: 50%;
}

#offer h3 {
    color: #b0f045;
    margin: 0 0 15px 0;
}

#offer ul {
    margin: 0 0 15px 0;
    overflow: hidden;
}

#offer ul li {
    margin-bottom: 8px;
    line-height: 1.4;
    position: relative;
    padding-left: 30px;
}

#offer ul li:before {
    content: "";
    width: 20px;
    height: 20px;
    display: block;
    border-radius: 50%;
    background: #b0f045;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -10px;
}

#offer ul li:after {
    content: "";
    width: 8px;
    height: 12px;
    display: block;
    position: absolute;
    left: 6px;
    top: 50%;
    margin-top: -8px;
    border-bottom: solid 2px #000;
    border-right: solid 2px #000;
    transform: rotate(45deg);
}

#team {
    padding: 70px;
}

.team-member {
    background: #0e0e18;
    margin-bottom: 40px;
}

.team-member img {
    width: 100%;
}

.team-text {
    padding: 20px;
}

.team-text p {
    margin: 0 0 15px 0;
}

#testimonials {
    background: url(img/testi-bg.jpg) top center repeat;
    padding: 70px 50% 55px 40px;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.9);
}

#testimonials h3 {
    color: #b0f045;
    margin: 0 0 15px 0;
}

#testimonials p {
    margin: 0 0 15px 0;
}

footer {
    background: #0e0e18;
    padding: 70px 0;
    font-size: 16px;
}

footer h3 {
    margin: 0 0 10px 0;
    color: #b0f045;
}

footer p,
footer time {
    margin: 0 0 10px 0;
}

#footer {
    margin: 0 20px;
}

#copyright {
    padding: 15px 0;
    color: #666;
    font-size: 14px;
    text-align: center;
    background: #07070c;
}

.social ul {
    margin: 30px 0 0 0;
    overflow: hidden;
}

.social li a {
    float: left;
    margin-right: 10px;
}


.social li a {
    width: 40px;
    height: 40px;
    border: solid 2px #fff;
    border-radius: 50%;
    display: inline-block;
    background-size: auto 16px;
}

.social li a:hover {
    border-color: #b0f045;
}

.facebook a {
    background: url(img/facebook.svg) center center no-repeat;
}

.twitter a {
    background: url(img/twitter.svg) center center no-repeat;
}

.gplus a {
    background: url(img/gplus.svg) center center no-repeat;
}

.linkedin a {
    background: url(img/linkedin.svg) center center no-repeat;
}

.youtube a {
    background: url(img/youtube.svg) center center no-repeat;
}

@media only screen and (max-width: 768px) {
    #logo {
        float: none;
        margin: 0 0 15px 0;
    }

    #logo a {
        margin: 0 auto;
        display: block;
    }

    #navigation,
    mav ul,
    nav ul li {
        float: none;
        text-align: left;
    }

    nav ul li a:before {
        content: "";
    }

    nav ul li a {
        padding: 10px 0 !important;
        border-bottom: solid 1px #fff;
        display: block;
    }

    #intro {
        width: 100%;
        margin: 50px 0 200px 0;
    }

    #top {
        background-position: bottom right 27%;
        background-size: 300% auto;
    }

    #offer-text {
        float: left;
        width: 100%;
    }

    #offer {
        background-color: #0e0e18;
        background-position: bottom left 20%;
        background-size: 220% auto;
        padding: 40px 0 300px 0;
    }

    #testimonials {
        background-position: bottom right;
        background-size: cover;
        padding: 30px 20px 20px 20px;
        position: relative;
    }

    #testimonials:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        z-index: 0;
    }

    #testimonials h3,
    #testimonials p {
        position: relative;
        z-index: 1;
    }

    footer {
        padding: 30px 0;
    }

    footer .one-third {
        margin-bottom: 50px;
    }



}