/* Table of Contents
==================================================
# Global Style
# Header
# Slider
# Body Row Wrapper
# Customize The Navbar
# Services
# Portfolio
# Team
# Clients
# Blog
# Contact
# Popup Modal
*/

/* Global Styles
================================================== */
@import url('https://fonts.googleapis.com/css?family=Rubik:300,300i,400,400i,500,500i,700,700i,900,900i&display=swap&subset=cyrillic,hebrew,latin-ext');


.bel { border: 1px #FFF solid; text-align:center;}
    .bel tr { border: 1px #FFF solid; text-align:center;}
	.bel tr td { border: 1px #FFF solid; text-align:center; padding:5px;}
/*
.hiddens{
opacity:0;
}*/
.visible{
opacity:1;
}


html {
    -webkit-font-smoothing : antialiased;
    text-rendering         : optimizeLegibility;
    -ms-overflow-x         : hidden;
    overflow-x             : hidden;
}

body {
    color       : #fff;
    font-family: 'Rubik', sans-serif;
	font-weight: 500 !important;
    font-size   : 16px;
    line-height : 24px;
    font-weight : 400;
	
}

h1, h2, h3, h4, h5 {
    font-family: 'Rubik', sans-serif;
	font-weight: 500 !important;
    color          : #fff;©
    text-transform : uppercase;
    margin         : 0;
    padding        : 0;
}

.right-top-fold h2 {
    text-align :  center;
    display    : block;
}

.left-top-fold h2 {
   /* text-align : right;*/
    display    : block;
}

h2 {
    font-size   : 37px;
    padding     : 50px 0;
    font-weight : 300;
	text-shadow: 2px 2px 1px rgba(0, 0, 0, 1);
	
}

h2 span {
    font-weight : 500;
	text-shadow: 2px 2px 1px rgba(0, 0, 0, 1);
}

h3 {
    font-size   : 24px;
    font-weight : bold;
}

.body-inner-wrapper {
    overflow : hidden;
}

a {
    color : #000;
}

a, a:hover {
    text-decoration : none; color : #000;
}

.rounded {
    border        : 5px solid #ffffff;
    border-radius : 50%;
    display       : inline-block;
    text-align    : center;
    margin        : 0 10px;
    cursor        : pointer;
}

.rounded:hover {
    border : 5px dashed #ffffff;
}

.rounded i {
    font-size              : 3em;
    font-weight            : bold;
    color                  : #ffffff;
    padding                : 10px;
    width                  : 70px;
    height                 : 70px;
    -webkit-font-smoothing : antialiased;
}

.modal-direction .close-window i {
    font-weight : normal;
}

.media .pull-left {
    margin-right : 30px;
}

/* Header
================================================== */
.navbar-wrapper {
    margin-top : 65px;
}

.navbar-wrapper .inner-container {
    left     : 242px;
    position : relative;
}

.navbar-wrapper .container {
    left     : -190px;
    position : relative;
}

#navigation-bar {
    border           : none;
    background-color : rgba(34, 34, 34, 0.80);
    margin           : 0;
}

#logo {
    position         : absolute;
    width            : 126px;
    height           : 122px;
    padding          : 0;
    top              : -26px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f58b01+0,f4bf7f+100 */
background: #f58b01; /* Old browsers */
background: -moz-linear-gradient(left, #f58b01 0%, #f4bf7f 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #f58b01 0%,#f4bf7f 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #f58b01 0%,#f4bf7f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f58b01', endColorstr='#f4bf7f',GradientType=1 ); /* IE6-9 */

}

#logo:before {
    content       : " ";
    position      : absolute;
    top           : 0%;
    right         : -26px;
    width         : 0px;
    height        : 0px;
    border-bottom : 26px solid rgba(0, 0, 0, 0.5);
    border-right  : 26px solid transparent;
}

#logo:after {
    content      : " ";
    position     : absolute;
    bottom       : 0;
    right        : -26px;
    width        : 0px;
    height       : 0px;
    border-top   : 26px solid rgba(0, 0, 0, 0.5);
    border-right : 26px solid transparent;
}

#menu {
    margin-left : 170px;
    overflow    : hidden;
}

#menu > ul > li {
    /*margin             : 0 6px;*/
    display            : inline-block;
    float              : none;
    -webkit-transition : 0.5s;
    -moz-transition    : 0.5s;
    -o-transition      : 0.5s;
    -ms-transition     : 0.5s;
    transition         : 0.5s;
}

#menu > ul > li > a {
    text-align     : center;
    color          : rgba(255, 204, 255, 0);
    padding        : 25px 16px;
    position       : relative;
    z-index        : 0;
    font-size      : 16px;
    text-transform : uppercase;
    font-weight    : 400;
}

#menu > ul > li > a:before, #menu > ul > li > a:after {
    padding                 : 25px 16px;
    display                 : block;
    width                   : 100%;
    height                  : 100%;
    position                : absolute;
    text-align              : center;
    color                   : #fff;
    left                    : 0;
    top                     : 0;
    -webkit-transform-style : preserve-3d;
    -moz-transform-style    : preserve-3d;
    -ms-transform-style     : preserve-3d;
    transform-style         : preserve-3d;
    -webkit-transition      : 0.5s;
    -moz-transition         : 0.5s;
    -o-transition           : 0.5s;
    -ms-transition          : 0.5s;
    transition              : 0.5s;
    -webkit-perspective     : 800;
}

#menu > ul > li.active {
    -webkit-transform : scale(1.2);
    -moz-transform    : scale(1.2);
    -o-transform      : scale(1.2);
    -ms-transform     : scale(1.2);
    transform         : scale(1.2);
}

#menu > ul > li:hover {
    -webkit-transform : scale(1.2);
    -moz-transform    : scale(1.2);
    -o-transform      : scale(1.2);
    -ms-transform     : scale(1.2);
    transform         : scale(1.2);
}

#menu > ul > li.active.home > a, #menu > ul > li.home:hover, #menu > ul > li.home > a:hover:after {
    background-color : #F58B01;
}

#menu > ul > li.active.service > a, #menu > ul > li.service:hover, #menu > ul > li.service > a:hover:after {
    background-color : #e8432a;
}

#menu > ul > li.active.portfolio > a, #menu > ul > li.portfolio:hover, #menu > ul > li.portfolio > a:hover:after {
    background-color : #F58B01;
}

#menu > ul > li.active.about > a, #menu > ul > li.about:hover, #menu > ul > li.about > a:hover:after {
    background-color : #2e3947;
}

#menu > ul > li.active.team > a, #menu > ul > li.team:hover, #menu > ul > li.team > a:hover:after {
    background-color : #00bf73;
}

#menu > ul > li.active.client > a, #menu > ul > li.client:hover, #menu > ul > li.client > a:hover:after {
    background-color : #face2f;
}

#menu > ul > li.active.blog > a, #menu > ul > li.blog:hover, #menu > ul > li.blog > a:hover:after {
    background-color : #232829;
}

#menu > ul > li.active.contact > a, #menu > ul > li.contact:hover, #menu > ul > li.contact > a:hover:after {
    background-color : #d6d6d6;
}

#menu > ul > li > a:before {
    content                     : attr(data-title);
    -webkit-backface-visibility : hidden;
    -webkit-transform           : rotateX(0deg) translateZ(-25px);
    -moz-transform              : rotateX(0deg) translateZ(-25px);
    -o-transform                : rotateX(0deg) translateZ(-25px);
    -ms-transform               : rotateX(0deg) translateZ(-25px);
    transform                   : rotateX(0deg) translateZ(-25px);
}

#menu > ul > li > a:after {
    content           : attr(data-title);
    -webkit-transform : rotateX(90deg) translateZ(25px);
    -moz-transform    : rotateX(90deg) translateZ(25px);
    -o-transform      : rotateX(90deg) translateZ(25px);
    -ms-transform     : rotateX(90deg) translateZ(25px);
    transform         : rotateX(90deg) translateZ(25px);
    color             : #fff;
}

#menu > ul > li > a:hover:before {
    -webkit-transform : rotateX(90deg) translateZ(-25px);
    -moz-transform    : rotateX(90deg) translateZ(-25px);
    -o-transform      : rotateX(90deg) translateZ(-25px);
    -ms-transform     : rotateX(90deg) translateZ(-25px);
    transform         : rotateX(90deg) translateZ(-25px);
}

#menu > ul > li > a:hover:after {
    -webkit-transform : rotateX(0deg) translateZ(25px);
    -moz-transform    : rotateX(0deg) translateZ(25px);
    -o-transform      : rotateX(0deg) translateZ(25px);
    -ms-transform     : rotateX(0deg) translateZ(25px);
    transform         : rotateX(0deg) translateZ(25px);
    background-color  : #eb1c23;
}

.centered {
    text-align : center;
}

.sticky-menu {
    position          : fixed !important;
    z-index           : 9999 !important;
    margin-top        : 25px !important;
	margin-left: 242px;

    -webkit-animation : fadeInDown 500ms;
    -moz-animation    : fadeInDown 500ms;
    -ms-animation     : fadeInDown 500ms;
    -o-animation      : fadeInDown 500ms;
    animation         : fadeInDown 500ms;
}

.navbar-wrapper.sticky-menu .container {
    left : -190px;
}

.sticky-menu #logo {
    display : none;
}

.sticky-menu .inner-container {
    left  : 0 !important;
    right : 0 !important;
}

/* Slider
================================================== */
#main-slider {
    position : relative;
    z-index  : -1;
}

#main-slider .carousel h2 {
    font-size : 48px;
    color     : #fff;
    padding   : 0;
	text-shadow: 2px 2px 1px rgba(0, 0, 0, 1);
}

#main-slider .carousel h2 span {
    font-weight : 400;
    color: #FFF ;
	border-bottom:dotted 2px #FFF;
	text-shadow: 2px 2px 1px rgba(0, 0, 0, 1);
}

#main-slider .carousel .item {
    background-position     : 50%;
    background-repeat       : no-repeat;

    -webkit-background-size : cover;
    -moz-background-size    : cover;
    background-size         : cover;
    left                    : 0 !important;
    -ms-filter              : "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter                  : alpha(opacity=0);
    opacity                 : 0;
    top                     : 0;
    position                : absolute;
    width                   : 100%;
    display                 : block !important;
    height                  : 1040px;

    -webkit-transition      : opacity ease-in-out 500ms;
    -moz-transition         : opacity ease-in-out 500ms;
    -o-transition           : opacity ease-in-out 500ms;
    -ms-transition          : opacity ease-in-out 500ms;
    transition              : opacity ease-in-out 500ms;
}

#main-slider .carousel .item:first-child {
    top      : auto;
    position : relative;
}

#main-slider .carousel .item.active {
    -ms-filter         : "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter             : alpha(opacity=100);
    opacity            : 1;

    -webkit-transition : opacity ease-in-out 500ms;
    -moz-transition    : opacity ease-in-out 500ms;
    -o-transition      : opacity ease-in-out 500ms;
    -ms-transition     : opacity ease-in-out 500ms;
    transition         : opacity ease-in-out 500ms;
    z-index            : 1;
}

#main-slider .prev, #main-slider .next {
    position   : absolute;
    top        : 50%;
    display    : inline-block;
    margin-top : -25px;
    z-index    : 5;
}

#main-slider .prev {
    left : 10px;
}

#main-slider .next {
    right : 10px;
}

#main-slider .rounded {
    border : 5px solid rgba(0, 0, 0, .3);
}

#main-slider .rounded i {
    color : rgba(0, 0, 0, .3);
}

#main-slider .carousel-content {
    margin-top : 33%;
    padding    : 0 50px;
}

#main-slider .content-nav a {
    background  : url(../images/slider/down-arrow.png) 0 0 no-repeat;
    text-indent : -9999em;
    width       : 75px;
    height      : 34px;
    display     : inline-block;
    margin-top  : 10px;
}

#main-slider .content-nav a:hover {
    -ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter     : alpha(opacity=70);
    opacity    : .7;
}

#video_background {
    position   : absolute;
    bottom     : 0px;
    right      : 0px;
    min-width  : 100%;
    min-height : 100%;
    max-height : 4000%;
    max-width  : 1000%;
    width      : auto;
    height     : auto;
    z-index    : -1000;
    overflow   : hidden;
}

#video_pattern {
    background-image : url(../images/pattern.png);
    position         : fixed;
    -ms-filter       : "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter           : alpha(opacity=80);
    opacity          : 0.8;
    left             : 0px;
    top              : 0px;
    width            : 100%;
    height           : 100%;
    z-index          : -1;
}

#main-slider .active .animation.animated-item-1 {
    -webkit-animation : fadeInUp 300ms linear;
    -moz-animation    : fadeInUp 300ms linear;
    -ms-animation     : fadeInUp 300ms linear;
    -o-animation      : fadeInUp 300ms linear;
    animation         : fadeInUp 300ms linear;
}

#main-slider .active .animation.animated-item-2 {
    -webkit-animation : fadeInUp 500ms linear 300ms;
    -moz-animation    : fadeInUp 500ms linear 300ms;
    -ms-animation     : fadeInUp 500ms linear 300ms;
    -o-animation      : fadeInUp 500ms linear 300ms;
    animation         : fadeInUp 500ms linear 300ms;
}

#main-slider .active .animation.animated-item-3 {
    -webkit-animation : fadeInUp 500ms linear 300ms;
    -moz-animation    : fadeInUp 500ms linear 300ms;
    -ms-animation     : fadeInUp 500ms linear 300ms;
    -o-animation      : fadeInUp 500ms linear 300ms;
    animation         : fadeInUp 500ms linear 300ms;
}

@keyframes "fadeInUp" {
    0% {
        -ms-filter        : "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter            : alpha(opacity=0);
        opacity           : 0;
        -webkit-transform : translateY(-20px);
        -moz-transform    : translateY(-20px);
        -o-transform      : translateY(-20px);
        -ms-transform     : translateY(-20px);
        transform         : translateY(-20px);
    }
    100% {
        -ms-filter        : "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter            : alpha(opacity=100);
        opacity           : 1;
        -webkit-transform : translateY(0);
        -moz-transform    : translateY(0);
        -o-transform      : translateY(0);
        -ms-transform     : translateY(0);
        transform         : translateY(0);
    }

}

@-moz-keyframes fadeInUp {
    0% {
        filter         : alpha(opacity=0);
        opacity        : 0;
        -moz-transform : translateY(-20px);
        transform      : translateY(-20px);
    }
    100% {
        filter         : alpha(opacity=100);
        opacity        : 1;
        -moz-transform : translateY(0);
        transform      : translateY(0);
    }

}

@-webkit-keyframes "fadeInUp" {
    0% {
        filter            : alpha(opacity=0);
        opacity           : 0;
        -webkit-transform : translateY(-20px);
        transform         : translateY(-20px);
    }
    100% {
        filter            : alpha(opacity=100);
        opacity           : 1;
        -webkit-transform : translateY(0);
        transform         : translateY(0);
    }

}

@-ms-keyframes "fadeInUp" {
    0% {
        -ms-filter    : "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter        : alpha(opacity=0);
        opacity       : 0;
        -ms-transform : translateY(-20px);
        transform     : translateY(-20px);
    }
    100% {
        -ms-filter    : "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter        : alpha(opacity=100);
        opacity       : 1;
        -ms-transform : translateY(0);
        transform     : translateY(0);
    }

}

@-o-keyframes "fadeInUp" {
    0% {
        filter       : alpha(opacity=0);
        opacity      : 0;
        -o-transform : translateY(-20px);
        transform    : translateY(-20px);
    }
    100% {
        filter       : alpha(opacity=100);
        opacity      : 1;
        -o-transform : translateY(0);
        transform    : translateY(0);
    }

}


/* Body Row Wrapper
---------------------------------------------------*/
#body-wrapper {
    position : relative;
}

#body-wrapper > div:nth-child(odd), #body-wrapper > div.odd {
    position : relative;
    left     : -70px;
}

#body-wrapper > div:nth-child(odd) .inner-wrapper > div, #body-wrapper > div.odd .inner-wrapper > div {
    position : relative;
    left     : 70px;
    z-index  : 1;
}

#body-wrapper > div:nth-child(even), #body-wrapper > div.even {
    position : relative;
    left     : 70px;
}

#body-wrapper > div:nth-child(even) .inner-wrapper > div, #body-wrapper > div.even .inner-wrapper > div {
    position : relative;
    left     : -70px;
    z-index  : 1;
}

/*Div Corner Fold*/
/*  Flod in right */
.right-top-fold:before {
    content           : "";
    position          : absolute;
    top               : 0;
    right             : 0;
    width             : 0px;
    height            : 0px;
    border-top        : 100px solid transparent;
    border-left-width : 100px;
    border-left-style : solid;
}

/** Fold shadow */
.right-top-fold:after {
    content     : "";
    position    : absolute;
    top         : 0;
    right       : 100px;
    width       : 0px;
    height      : 0px;
    border-top  : 100px solid rgba(0, 0, 0, 0.15);
    border-left : 100px solid transparent;
}

/*  Flod in left */
.left-top-fold:before {
    content            : "";
    position           : absolute;
    top                : 0;
    left               : 0;
    width              : 0px;
    height             : 0px;
    border-top         : 100px solid transparent;
    border-right-width : 100px;
    border-right-style : solid;
}

/** Fold Shadow */
.left-top-fold:after {
    content      : "";
    position     : absolute;
    top          : 0;
    left         : 100px;
    width        : 0px;
    height       : 0px;
    border-top   : 100px solid rgba(0, 0, 0, 0.15);
    border-right : 100px solid transparent;
}

.top-indent {
    margin-top : -100px;
}

.top-indent > div {
    padding-bottom : 140px;
}

.wraper-shadow-left:before {
    pointer-events           : none;
    position                 : absolute;
    z-index                  : -1;
    content                  : ' ';
    height                   : 100px;
    width                    : 100%;
    background               : rgba(0, 0, 0, 0.15);
    top                      : 0;
    right                    : 100px;

    -webkit-transform-origin : 100% 0%;
    -moz-transform-origin    : 100% 0%;
    -o-transform-origin      : 100% 0%;
    -ms-transform-origin     : 100% 0%;
    transform-origin         : 100% 0%;

    -webkit-transform        : rotate(1deg);
    -moz-transform           : rotate(1deg);
    -o-transform             : rotate(1deg);
    -ms-transform            : rotate(1deg);
    transform                : rotate(1deg);
}

.wraper-shadow-right:before {
    pointer-events           : none;
    position                 : absolute;
    z-index                  : -1;
    content                  : "";
    height                   : 100px;
    width                    : 100%;
    background               : rgba(0, 0, 0, 0.15);
    top                      : 0;
    left                     : 100px;

    -webkit-transform-origin : 0% 0%;
    -moz-transform-origin    : 0% 0%;
    -o-transform-origin      : 0% 0%;
    -ms-transform-origin     : 0% 0%;
    transform-origin         : 0% 0%;

    -webkit-transform        : rotate(-1deg);
    -moz-transform           : rotate(-1deg);
    -o-transform             : rotate(-1deg);
    -ms-transform            : rotate(-1deg);
    transform                : rotate(-1deg);
}

.inner-wrapper {
    min-height : 300px;
}

.inner-wrapper > div {
    padding : 0px;
}

/** Basic styling */
#services-wrapper:before {
    border-left-color: #999  ;
}

#services {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f2dcc4+0,f58b01+100 */
background: #f2dcc4; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YyZGNjNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNThiMDEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left,  #f2dcc4 0%, #f58b01 100%); /* FF3.6-15 */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f2dcc4), color-stop(100%,#f58b01)); /* Chrome4-9,Safari4-5 */
background: -webkit-linear-gradient(left,  #f2dcc4 0%,#f58b01 100%); /* Chrome10-25,Safari5.1-6 */
background: -o-linear-gradient(left,  #f2dcc4 0%,#f58b01 100%); /* Opera 11.10-11.50 */
background: -ms-linear-gradient(left,  #f2dcc4 0%,#f58b01 100%); /* IE10 preview */
background: linear-gradient(to right,  #f2dcc4 0%,#f58b01 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2dcc4', endColorstr='#f58b01',GradientType=1 ); /* IE6-8 */

    background-position : -100px 100%, 100% 100px;
    background-repeat   : no-repeat;
}

#portfolio-wrapper:before {
    border-right-color : #9fcc5c;
}

#portfolio {
    background          : -webkit-linear-gradient(right, #F58B01 0%, #F58B01 100%), -webkit-linear-gradient(right, #F58B01 0%, #F58B01 100%);
    background          : -moz-linear-gradient(right, #F58B01 0%, #F58B01 100%), -moz-linear-gradient(right, #F58B01 0%, #F58B01 100%);
    background          : -o-linear-gradient(right, #F58B01 0%, #F58B01 100%), -o-linear-gradient(right, #F58B01 0%, #F58B01 100%);
    background          : -ms-linear-gradient(right, #F58B01 0%, #F58B01 100%), -ms-linear-gradient(right, #F58B01 0%, #F58B01 100%);
    background          : linear-gradient(right, #F58B01 0%, #F58B01 100%), linear-gradient(right, #F58B01 0%, #80b536 100%); /* Chrome10+,Safari5.1+ */
    background-position : 100px 100%, 100% 100px;
    background-repeat   : no-repeat;
}

#aboutus-wrapper:before {
    border-left-color : #5f7285;
}

#aboutus {
    background          : -webkit-linear-gradient(left, #2e3947 0%, #2e3947 100%), -webkit-linear-gradient(left, #2e3947 0%, #2e3947 100%);
    background          : -moz-linear-gradient(left, #2e3947 0%, #2e3947 100%), -moz-linear-gradient(left, #2e3947 0%, #2e3947 100%);
    background          : -o-linear-gradient(left, #2e3947 0%, #2e3947 100%), -o-linear-gradient(left, #2e3947 0%, #2e3947 100%);
    background          : -ms-linear-gradient(left, #2e3947 0%, #2e3947 100%), -ms-linear-gradient(left, #2e3947 0%, #2e3947 100%);
    background          : linear-gradient(left, #2e3947 0%, #2e3947 100%), linear-gradient(left, #2e3947 0%, #2e3947 100%); /* Chrome10+,Safari5.1+ */
    background-position : -100px 100%, 100% 100px;
    background-repeat   : no-repeat;
}

#team-wrapper:before {
    border-right-color : #32d996;
}

#team {
    background          : -webkit-linear-gradient(left, #00bf73 0%, #00bf73 100%), -webkit-linear-gradient(left, #00bf73 0%, #00bf73 100%);
    background          : -moz-linear-gradient(left, #00bf73 0%, #00bf73 100%), -moz-linear-gradient(left, #00bf73 0%, #00bf73 100%);
    background          : -o-linear-gradient(left, #00bf73 0%, #00bf73 100%), -o-linear-gradient(left, #00bf73 0%, #00bf73 100%);
    background          : -ms-linear-gradient(left, #00bf73 0%, #00bf73 100%), -ms-linear-gradient(left, #00bf73 0%, #00bf73 100%);
    background          : linear-gradient(left, #00bf73 0%, #00bf73 100%), linear-gradient(left, #00bf73 0%, #00bf73 100%); /* Chrome10+,Safari5.1+ */
    background-position : 100px 100%, 100% 100px;
    background-repeat   : no-repeat;
}

#client-wrapper:before {
    border-left-color : #ffe175;
}

#client {
    background          : -webkit-linear-gradient(left, #face2f 0%, #face2f 100%), -webkit-linear-gradient(left, #face2f 0%, #face2f 100%);
    background          : -moz-linear-gradient(left, #face2f 0%, #face2f 100%), -moz-linear-gradient(left, #face2f 0%, #face2f 100%);
    background          : -o-linear-gradient(left, #face2f 0%, #face2f 100%), -o-linear-gradient(left, #face2f 0%, #face2f 100%);
    background          : -ms-linear-gradient(left, #face2f 0%, #face2f 100%), -ms-linear-gradient(left, #face2f 0%, #face2f 100%);
    background          : linear-gradient(left, #face2f 0%, #face2f 100%), linear-gradient(left, #face2f 0%, #face2f 100%); /* Chrome10+,Safari5.1+ */
    background-position : -100px 100%, 100% 100px;
    background-repeat   : no-repeat;
}

#blog-wrapper:before {
    border-right-color : #576166;
}

#blog {
    background          : -webkit-linear-gradient(left, #232829 0%, #232829 100%), -webkit-linear-gradient(left, #232829 0%, #232829 100%);
    background          : -moz-linear-gradient(left, #232829 0%, #232829 100%), -moz-linear-gradient(left, #232829 0%, #232829 100%);
    background          : -o-linear-gradient(left, #232829 0%, #232829 100%), -o-linear-gradient(left, #232829 0%, #232829 100%);
    background          : -ms-linear-gradient(left, #232829 0%, #232829 100%), -ms-linear-gradient(left, #232829 0%, #232829 100%);
    background          : linear-gradient(left, #232829 0%, #232829 100%), linear-gradient(left, #232829 0%, #232829 100%); /* Chrome10+,Safari5.1+ */
    background-position : 100px 100%, 100% 100px;
    background-repeat   : no-repeat;
}

#contact-wrapper:before {
    border-left-color : #ededed;
}

#contact {
    background          : -webkit-linear-gradient(left, #d6d6d6 0%, #d6d6d6 100%), -webkit-linear-gradient(left, #d6d6d6 0%, #d6d6d6 100%);
    background          : -moz-linear-gradient(left, #d6d6d6 0%, #d6d6d6 100%), -moz-linear-gradient(left, #d6d6d6 0%, #d6d6d6 100%);
    background          : -o-linear-gradient(left, #d6d6d6 0%, #d6d6d6 100%), -o-linear-gradient(left, #d6d6d6 0%, #d6d6d6 100%);
    background          : -ms-linear-gradient(left, #d6d6d6 0%, #d6d6d6 100%), -ms-linear-gradient(left, #d6d6d6 0%, #d6d6d6 100%);
    background          : linear-gradient(left, #d6d6d6 0%, #d6d6d6 100%), linear-gradient(left, #d6d6d6 0%, #d6d6d6 100%); /* Chrome10+,Safari5.1+ */
    background-position : -100px 100%, 100% 100px;
    background-repeat   : no-repeat;
}

#contact .container > h2 {
    color : #FFF;
}

#bottom {
    background : #232829;
    display    : block;
    min-height : 200px;
    margin-top : -30px;
    padding    : 30px 0;
    position   : relative;
}

#bottom .social-shares ul {
    margin : 0;
}

.copyright {
    float       : right;
    font-size   : 18px;
    margin-top  : 18px;
    font-weight : 400;
    position    : relative;
}

a#to-top {
    background  : url(../images/to-top.png) 0 0 no-repeat;
    width       : 50px;
    height      : 50px;
    position    : absolute;
    right       : 10px;
    top         : 10px;
    text-indent : -9999em;
}

/* Customize The Navbar
--------------------------------------------------*/
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
    position : absolute;
    top      : 0;
    left     : 0;
 right    : 0;
 /*  width:300px;*/
    z-index  : 9;
	/*overflow-x:  hidden;*/
}

/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper .container {
    padding-left  : 0;
    padding-right : 0;
}

.navbar-wrapper .navbar {
    padding-left  : 15px;
    padding-right : 15px;
}


/* Services
--------------------------------------------------*/
.service-fold {
    position : relative;
}

.service-fold:before {
    content     : "";
    position    : absolute;
    bottom      : 0;
    left        : 0px;
    width       : 0px;
    height      : 0px;
    border-top  : 20px solid rgba(255, 255, 255, 0.5);
    border-left : 20px solid transparent;
}

.service-fold:hover:before {
    border-top : 20px solid rgba(130, 130, 130, 1);
}

.service-fold:after {
    content       : "";
    position      : absolute;
    bottom        : 0;
    left          : 20px;
    width         : 0px;
    height        : 0px;
    border-bottom : 20px solid rgba(0, 0, 0, 0.15);
    border-right  : 20px solid transparent;
}

.service-box {
    height              : 300px;
    padding             : 20px;
    margin              : 0px;

    background          : -webkit-linear-gradient(right, #FFFFFF 0%, #FFFFFF 100%), -webkit-linear-gradient(right, #FFFFFF 0%, #FFFFFF 100%);
    background          : -moz-linear-gradient(right, #FFFFFF 0%, #FFFFFF 100%), -moz-linear-gradient(right, #FFFFFF 0%, #FFFFFF 100%);
    background          : -o-linear-gradient(right, #FFFFFF 0%, #FFFFFF 100%), -o-linear-gradient(right, #FFFFFF 0%, #FFFFFF 100%);
    background          : -ms-linear-gradient(right, #FFFFFF 0%, #FFFFFF 100%), -ms-linear-gradient(right, #FFFFFF 0%, #FFFFFF 100%);
    background          : linear-gradient(right, #FFFFFF 0%, #FFFFFF 100%), linear-gradient(right, #FFFFFF 0%, #FFFFFF 100%);
    background-position : 100% -20px, 20px 100%;
    background-repeat   : no-repeat;
    margin-bottom       : 30px;
    color               : #fff;
    text-align          : center;
    display             : block;
	-webkit-box-shadow: 4px -2px 3px -1px rgba(0, 0, 0, 0.75);
-moz-box-shadow:    4px -2px 3px -1px rgba(0, 0, 0, 0.75);
box-shadow:         4px -2px 3px -1px rgba(0, 0, 0, 0.75);
}

.service-box h3 {
    text-transform : none;
    font-size      : 18px;
    padding        : 20px;
}

.service-box:hover {
 /*   background          : -webkit-linear-gradient(right, #35362c 0%, #35362c 100%), -webkit-linear-gradient(right, #35362c 0%, #35362c 100%);
    background          : -moz-linear-gradient(right, #35362c 0%, #35362c 100%), -moz-linear-gradient(right, #35362c 0%, #35362c 100%);
    background          : -o-linear-gradient(right, #35362c 0%, #35362c 100%), -o-linear-gradient(right, #35362c 0%, #35362c 100%);
    background          : -ms-linear-gradient(right, #35362c 0%, #35362c 100%), -ms-linear-gradient(right, #35362c 0%, #35362c 100%);
    background          : linear-gradient(right, #35362c 0%, #35362c 100%), linear-gradient(right, #35362c 0%, #35362c 100%);
    background-position : 100% -20px, 20px 100%;
    background-repeat   : no-repeat;*/
}

.service-box > i {
    font-size   : 3em;
    line-height : 100px;
}








.service-box2 {
    height              : 300px;
    padding             : 20px;
    margin              : 0px;

    background          : -webkit-linear-gradient(right, #D93921 0%, #D93921 100%), -webkit-linear-gradient(right, #D93921 0%, #D93921 100%);
    background          : -moz-linear-gradient(right, #D93921 0%, #D93921 100%), -moz-linear-gradient(right, #D93921 0%, #D93921 100%);
    background          : -o-linear-gradient(right, #D93921 0%, #D93921 100%), -o-linear-gradient(right, #D93921 0%, #D93921 100%);
    background          : -ms-linear-gradient(right, #D93921 0%, #D93921 100%), -ms-linear-gradient(right, #D93921 0%, #D93921 100%);
    background          : linear-gradient(right, #D93921 0%, #D93921 100%), linear-gradient(right, #D93921 0%, #D93921 100%);
    background-position : 100% -20px, 20px 100%;
    background-repeat   : no-repeat;
    margin-bottom       : 30px;
    color               : #fff;
    text-align          : center;
    display             : block;
}

.service-box2 h3 {
    text-transform : none;
    font-size      : 18px;
    padding        : 5px;
	height: 63px;
	
}

.service-box2:hover {
    background          : -webkit-linear-gradient(right, #35362c 0%, #35362c 100%), -webkit-linear-gradient(right, #35362c 0%, #35362c 100%);
    background          : -moz-linear-gradient(right, #35362c 0%, #35362c 100%), -moz-linear-gradient(right, #35362c 0%, #35362c 100%);
    background          : -o-linear-gradient(right, #35362c 0%, #35362c 100%), -o-linear-gradient(right, #35362c 0%, #35362c 100%);
    background          : -ms-linear-gradient(right, #35362c 0%, #35362c 100%), -ms-linear-gradient(right, #35362c 0%, #35362c 100%);
    background          : linear-gradient(right, #35362c 0%, #35362c 100%), linear-gradient(right, #35362c 0%, #35362c 100%);
    background-position : 100% -20px, 20px 100%;
    background-repeat   : no-repeat;
}

.service-box2 > i {
    font-size   : 3em;
    line-height : 80px;
}







.service-box3 {
    height              : 350px;
    padding             : 20px;
    margin              : 0px;

   background          : -webkit-linear-gradient(right, #35362c 0%, #35362c 100%), -webkit-linear-gradient(right, #35362c 0%, #35362c 100%);
    background          : -moz-linear-gradient(right, #35362c 0%, #35362c 100%), -moz-linear-gradient(right, #35362c 0%, #35362c 100%);
    background          : -o-linear-gradient(right, #35362c 0%, #35362c 100%), -o-linear-gradient(right, #35362c 0%, #35362c 100%);
    background          : -ms-linear-gradient(right, #35362c 0%, #35362c 100%), -ms-linear-gradient(right, #35362c 0%, #35362c 100%);
    background          : linear-gradient(right, #35362c 0%, #35362c 100%), linear-gradient(right, #35362c 0%, #35362c 100%);
    background-position : 100% -20px, 20px 100%;
    background-repeat   : no-repeat;
    margin-bottom       : 30px;
    color               : #fff;
    text-align          : center;
    display             : block;
}

.service-box3 h3 {
    text-transform : none;
    font-size      : 18px;
    padding        : 5px;
	height: 63px;
	
}



.service-box3 > i {
    font-size   : 3em;
    line-height : 80px;
}






/* Portfolio
--------------------------------------------------*/
#portfolio-container {
    width    : 100%;
    position : relative;
    margin   : 50px 0;
}

#portfolio-items {
    list-style         : none;
    position           : relative;
    overflow           : hidden;
    margin             : 0;
    padding            : 0;

    -webkit-box-sizing : border-box;
    -moz-box-sizing    : border-box;
    -ms-box-sizing     : border-box;
    box-sizing         : border-box;
    height             : 280px;
}

#portfolio-items > li {
    float    : left;
    height   : 250px;
    width: 380px !important;
    overflow : hidden;
}

.portfolio-item > div {
    display    : block;
    text-align : center;
    color      : #fff;
    position   : relative;
}

.portfolio-item img {
    z-index : 0;
}

.portfolio-item-description {
    z-index            : 1;
    position           : absolute;
    top                : 0;
    height             : 100%;
    width              : 100%;
    border             : 0px solid rgba(255, 255, 255, 0);
    background-color   : rgba(0, 0, 0, 0);

    -webkit-transition : all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
    -moz-transition    : all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
    -o-transition      : all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
    -ms-transition     : all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
    transition         : all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000); /* ease-in-out */
}

.portfolio-item:hover .portfolio-item-description {
    border           : 15px solid rgba(255, 255, 255, 0.3);
    background-color : rgba(0, 0, 0, 0.5);
}

.portfolio-item-description > div {
    position           : relative;
    top                : 105%;

    -webkit-transition : all 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -moz-transition    : all 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -o-transition      : all 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -ms-transition     : all 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    transition         : all 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */
}

.portfolio-item:hover .portfolio-item-description > div {
    top : 40%;
}

.portfolio-item-description a, .portfolio-item-description i {
    font-size   : 42px;
    color       : #fff;
    font-weight : normal;
}

.portfolio-item:nth-child(even) {
    margin-top : 45px;
}

.portfolio-item-description h3 {
    font-size  : 14px;
    margin-top : 15px;
}

.portfolio-item-description .rounded {
    width       : 70px;
    height      : 70px;
    font-weight : normal;
    line-height : 66px !important;
}

/* Portfolio
--------------------------------------------------*/
#team-container {
    width    : 100%;
    position : relative;
    margin   : 50px 0;
}

#team-items {
    list-style         : none;
    position           : relative;
    overflow           : hidden;
    margin             : 0;
    padding            : 0;

    -webkit-box-sizing : border-box;
    -moz-box-sizing    : border-box;
    -ms-box-sizing     : border-box;
    box-sizing         : border-box;
    height             : 500px;
}

#team-items > li {
    float    : left;
    height   : 100%;
    width    : 280px;
    overflow : hidden;
}

.team-item-description .social {
    -ms-filter                  : "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter                      : alpha(opacity=0);

    opacity                     : 0;
    position                    : relative;
    display                     : block;
    margin                      : 0 auto;
    margin-top                  : -15px;

    -webkit-transition          : all 300ms ease-out;
    -moz-transition             : all 300ms ease-out;
    -o-transition               : all 300ms ease-out;
    -ms-transition              : all 300ms ease-out;
    transition                  : all 300ms ease-out;

    -webkit-transition-property : top, opacity;
    -moz-transition-property    : top, opacity;
    -o-transition-property      : top, opacity;
    -ms-transition-property     : top, opacity;
    transition-property         : top, opacity;
}

.team-item-description .social-shares li i {
    width  : 62px;
    height : 62px;
}

.team-item-description {
    display          : block;
    text-align       : left;
    color            : #fff;
    position         : relative;
    background-color : #008a5c;
    padding          : 5px 10px;
    height           : 70px;
    border           : 4px solid transparent;
}

#team-items > li:hover .team-item-description {
    background-color : transparent;
    border           : 4px solid #008a5c;
    z-index          : 10;
}

#team-items > li:hover img {
    -ms-filter         : "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter             : alpha(opacity=100);
    opacity            : 1;

    -webkit-transition : all 300ms ease-out;
    -moz-transition    : all 300ms ease-out;
    -o-transition      : all 300ms ease-out;
    -ms-transition     : all 300ms ease-out;
    transition         : all 300ms ease-out;
}

#team-items > li:hover img {
    -ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    filter     : alpha(opacity=60);
    opacity    : 0.6;
}

#team-items > li:hover .social {
    -ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter     : alpha(opacity=100);
    opacity    : 1;
    top        : -130px;
}

.team-item-description .description {
    position : relative;
    z-index  : 1;
}

.team-item-description h3 {
    font-size : 18px;
    padding   : 5px 0;
}

.team-item-description h4 {
    font-size : 14px;
}

.contents {
    font-size   : 18px;
    line-height : 30px;
}

.contents p {
    margin-bottom : 20px;
}

.progress-bars {
    margin : 50px 0;
}

.progress-bars > * {
    display : inline-block;
    width   : auto;
}

/* Social */
.social-shares ul {
    padding    : 0;
    list-style : none;
	
	

   margin     : 20px 0;
}

.social-shares li {
    float : left;
}

.social-shares li a {
    color : #fff;
}

.social-shares li:last-child {
    clear : right;
}

.social-shares li i {
    font-size          : 30px;
    height             : 64px;
    width              : 64px;
    line-height        : 64px;
    text-align         : center;

    -webkit-transition : all 400ms ease-out;
    -moz-transition    : all 400ms ease-out;
    -o-transition      : all 400ms ease-out;
    -ms-transition     : all 400ms ease-out;
    transition         : all 400ms ease-out;
}

.social-shares li i:hover {
    background : #fff !important;
}

.social-shares li i.fa-twitter {
    background : #62CDF1;
}

.social-shares li i.fa-twitter:hover {
    color : #62CDF1;
}

.social-shares li i.fa-facebook {
    background : #507CBD;
}

.social-shares li i.fa-facebook:hover {
    color : #507CBD;
}

.social-shares li i.fa-dribbble {
    background : #D97AA6;
}

.social-shares li i.fa-dribbble:hover {
    color : #D97AA6;
}

.social-shares li i.fa-pinterest {
    background : #F26261;
}

.social-shares li i.fa-pinterest:hover {
    color : #F26261;
}

.social-shares li i.fa-google-plus {
    background : #4E4F54;
}

.social-shares li i.fa-google-plus:hover {
    color : #4E4F54;
}

.social-shares li i.fa-tumblr {
    background : #4E7EA4;
}

.social-shares li i.fa-tumblr:hover {
    color : #4E7EA4;
}

.social-shares li i.fa-skype {
    background : #36C4F4;
}

.social-shares li i.fa-skype:hover {
    color : #36C4F4;
}


/* Clients
--------------------------------------------------*/
#clients a {
    display            : block;
    padding            : 40px 0;
    -ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter     : alpha(opacity=100);
    opacity    : 1;
    text-align         : center;

    -webkit-transition : opacity 300ms ease-out;
    -moz-transition    : opacity 300ms ease-out;
    -o-transition      : opacity 300ms ease-out;
    -ms-transition     : opacity 300ms ease-out;
    transition         : opacity 300ms ease-out;
}

#clients a:hover {
    -ms-filter         : "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    filter             : alpha(opacity=60);
    opacity            : 0.6;
}

/* Blog
--------------------------------------------------*/
.blog-directions {
    margin : 50px 0;
}

.blog-posts-list {
    margin     : 0;
    padding    : 0;
    list-style : none;
    max-height : 690px;
}

.blog-posts-list > li {
    display        : block;
    text-transform : uppercase;
    padding        : 10px 0;
    width          : auto !important;
}

.blog-posts-list > li:first-child {
    padding-top : 0;
}

.blog-posts-list > li span {
    display        : block;
    color          : #76828b;
    text-transform : uppercase;
    font-size      : 14px;
    font-style     : normal;
    padding        : 10px 0;
}

.blog-posts-list > li a {
    display         : block;
    color           : #ffffff;
    text-decoration : none;
    font-weight     : 500;
    font-size       : 18px;
    line-height     : 24px;
}

.blog-posts-list > li.active a, .blog-posts-list > li a:hover {
    color : #cd3031;
}

.blog-header-wrapper {
    background-color : rgba(205, 48, 48, 0.8);
}

.has-thumbnail .blog-header-wrapper {
    background-color : rgba(205, 48, 48, 0.8);
    position         : absolute;
    width            : 90%;
    top              : 65px;
    z-index          : 1;
}

.blog-header-wrapper > div {
    display : inline-block;
}

.blog-date {
    background-color   : #5B656E;
    text-align         : center;
    padding            : 18px;
    margin-left        : 20px;

    -webkit-box-sizing : border-box;
    -moz-box-sizing    : border-box;
    -ms-box-sizing     : border-box;
    box-sizing         : border-box;

    -webkit-transform  : scale(1.15);
    -moz-transform     : scale(1.15);
    -o-transform       : scale(1.15);
    -ms-transform      : scale(1.15);
    transform          : scale(1.15); /* IE 9 */
    /* Safari and Chrome */
}

.blog-date-day {
    display     : block;
    font-size   : 72px;
    font-weight : bold;
    text-align  : center;
    padding     : 10px;
}

.blog-date-other {
    font-size  : 16px;
    font-style : normal;
}

.blog-title {
    width          : 65%;
    margin-left    : 20px;
    text-transform : uppercase;
    line-height    : 22px;
    padding        : 12px 0;
    position       : absolute;
}

.blog-entry-thumb {
    position : relative;
}

#blog .entry-content {
    margin-top : 10px;
}

.readmore {
    border                 : 0;
    padding                : 10px 30px;
    background-color       : #cc3031;
    color                  : #ffffff;
    text-transform         : uppercase;
    font-size              : 18px;
   /* margin                 : 30px 0;*/
    display                : inline-block;
    -webkit-font-smoothing : antialiased;
}

.readmore:hover {
    color            : #ffffff;
    text-decoration  : none;
    background-color : #8c2727;
}

.readmore i {
    margin-left : 5px;
}

.blog-post-descriptions {
    font-size   : 18px;
    font-style  : normal;
    line-height : 36px;
    color       : #EBECEC;
}

/* Blog Modal */
.blog-contents .tags {
    text-transform : uppercase;
    font-weight    : bold;
    margin         : 30px 0;
}

.blog-contents .tags a.tag {
    text-transform : uppercase;
    font-weight    : normal;
    color          : #AFAFAF;
}

.blog-contents .author .media-heading {
    text-transform : uppercase;
    font-weight    : bold;
}

.blog-contents #comments {
    margin : 70px 0;
}

.blog-contents #comments h3 {
    font-size     : 30px;
    margin-bottom : 50px;
}

.blog-contents #comments .comment-content {
    margin-bottom  : 40px;
    padding-bottom : 40px;
    border-bottom  : 1px solid #424649;
}

.blog-contents #comments .comment-content small {
    display : block;
}

.blog-contents #comments .comment-content a.reply {
    background     : #393E42;
    font-weight    : bold;
    text-transform : uppercase;
    color          : #73787C;
    padding        : 5px 20px;
    font-size      : 18px;
}

.blog-contents #comment-form {
    margin-top : 50px;
}

.blog-contents #comment-form input, .blog-contents #comment-form textarea {
    border : 2px solid #333A40 !important;
}

.blog-contents #comment-form .readmore {
    padding     : 20px 30px;
    font-weight : 900;
    font-size   : 20px;
}


/* Contact
--------------------------------------------------*/
#map-canvas {
    height  : 300px;
    width   : 100%;
    margin  : 0px;
    padding : 0px;
}

.contact-info {
    background-color : #24282B;
    padding          : 30px;
    font-size        : 18px;
    line-height      : 30px;
    color            : #ffffff;
    display          : block;
}

.contact-info li {
    float : left;
    width : 33%;
	text-align:center;
	
}

.contact-info li.first {
    width : 34%;
	text-align: left;
	
}

.contact-info li p > i {
    padding     : 0 15px;
    margin-left : -40px;
    color       : #808080;
    font-size   : 22px;
}

.contact-info li p {
    padding     : 0 20px;
    font-size   : 18px;
    font-weight : 500;
    margin      : 0;
	
	
}

.message-box {
    margin : 25px 0;
}

.message-box h3 {
    padding : 25px 0;
    color   : #24282B;
}

input, textarea {
    padding          : 10px ;
    border           : 2px solid #AFAFAF;
    border-radius    : 0 ;
    font-size        : 24px ;
    margin           : 10px 0;
    background-color : transparent ;
    height           : 65px ;
}

textarea {
    height : 260px !important;
}

.message-box input, .message-box textarea {
    border : 2px solid #AFAFAF;
    color: #FFF ;
}

.message-box textarea {
    height : 260px;
}

input[type="submit"] {
    border           : 0 !important;
    background-color : #cc3031 !important;
    padding          : 0 30px !important;
    color            : #fff;
    font-size        : 18px !important;
    text-transform   : uppercase;
}

input[type="submit"]:hover {
    background-color : #d9534f !important;
    color            : #fff;
}

input[type="submit"]:focus {
    border-color : #d9534f;
}

.form-control:focus {
    border-color       : #AFAFAF;
    outline            : 0;

    -webkit-box-shadow : none;
    box-shadow         : none;
}

.form-control:-moz-placeholder {
    color : #FFF;
	text-shadow: 2px 2px 1px rgba(0, 0, 0, 1);
}

.form-control::-moz-placeholder {
    color : #FFF;
	text-shadow: 2px 2px 1px rgba(0, 0, 0, 1);
}

.form-control:-ms-input-placeholder {
   color : #FFF;
	text-shadow: 2px 2px 1px rgba(0, 0, 0, 1);
}

.form-control::-webkit-input-placeholder {
  color : #FFF;
	text-shadow: 2px 2px 1px rgba(0, 0, 0, 1);
}





/* Popup Modal
--------------------------------------------------*/

.portfolio-style #modal-window:before {
    border-right-color : #9DCC5A;
}

.portfolio-style #modal-window-box {
    background          : -webkit-linear-gradient(left, #81B536 0%, #81B536 100%), -webkit-linear-gradient(left, #81B536 0%, #81B536 100%);
    background          : -moz-linear-gradient(left, #81B536 0%, #81B536 100%), -moz-linear-gradient(left, #81B536 0%, #81B536 100%);
    background          : -o-linear-gradient(left, #81B536 0%, #81B536 100%), -o-linear-gradient(left, #81B536 0%, #81B536 100%);
    background          : -ms-linear-gradient(left, #81B536 0%, #81B536 100%), -ms-linear-gradient(left, #81B536 0%, #81B536 100%);
    background          : linear-gradient(left, #81B536 0%, #81B536 100%), linear-gradient(left, #81B536 0%, #81B536 100%);
    background-position : 100px 100%, 100% 100px;
    background-repeat   : no-repeat;
}

/* Modal Blog Style*/



.blog-style #modal-window:before {
    border-right-color : #576166;
}

.blog-style #modal-window-box {
    background          : -webkit-linear-gradient(left, #232829 0%, #232829 100%), -webkit-linear-gradient(left, #232829 0%, #232829 100%);
    background          : -moz-linear-gradient(left, #232829 0%, #232829 100%), -moz-linear-gradient(left, #232829 0%, #232829 100%);
    background          : -o-linear-gradient(left, #232829 0%, #232829 100%), -o-linear-gradient(left, #232829 0%, #232829 100%);
    background          : -ms-linear-gradient(left, #232829 0%, #232829 100%), -ms-linear-gradient(left, #232829 0%, #232829 100%);
    background          : linear-gradient(left, #232829 0%, #232829 100%), linear-gradient(left, #232829 0%, #232829 100%); /* Chrome10+,Safari5.1+ */
    background-position : 100px 100%, 100% 100px;
    background-repeat   : no-repeat;
}

#modal-window {
    position                    : absolute;
    top                         : 50px;
    left                        : 0%;
    width                       : 100%;
    height                      : auto;
    z-index                     : 9999;
    -webkit-backface-visibility : hidden;
    -moz-backface-visibility    : hidden;
    backface-visibility         : hidden;

    -webkit-transform           : scale(0.7);
    -moz-transform              : scale(0.7);
    -o-transform                : scale(0.7);
    -ms-transform               : scale(0.7);
    transform                   : scale(0.7);
    -ms-filter                  : "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter                      : alpha(opacity=0);
    opacity                     : 0;
    visibility                  : hidden;

    -webkit-transition          : all 0.3s;
    -moz-transition             : all 0.3s;
    -o-transition               : all 0.3s;
    -ms-transition              : all 0.3s;
    transition                  : all 0.3s;
}

#modal-window-content {
    min-height : 100px;
    display    : block;
}

#modal-window-content > div {
    padding : 20px 0;
}

.modal-direction {
    margin : 20px 0;
}

.modal-direction.direction-bottom {
    margin : 40px 0;
}

.modal-loading {
    text-align : center;
    position   : absolute;
    left       : 50%;
    top        : 45%;
}

.modal-overlay {
    position           : fixed;
    width              : 100%;
    height             : 100%;
    visibility         : hidden;
    -ms-filter         : "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter             : alpha(opacity=0);
    opacity            : 0;
    top                : 0;
    left               : 0;
    z-index            : 8000;
    background         : rgba(0, 0, 0, 0.9);

    -webkit-transition : all 0.3s;
    -moz-transition    : all 0.3s;
    -o-transition      : all 0.3s;
    -ms-transition     : all 0.3s;
    transition         : all 0.3s;
}

#modal-window.show-modal {
    -webkit-transform : scale(1);
    -moz-transform    : scale(1);
    -o-transform      : scale(1);
    -ms-transform     : scale(1);
    transform         : scale(1);
    -ms-filter        : "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter            : alpha(opacity=100);
    opacity           : 1;
    visibility        : visible;
}

#modal-window.show-modal ~ .modal-overlay {
    visibility : visible;
    -ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter     : alpha(opacity=100);
    opacity    : 1;
}

.map-popover-content {
    background-color : #ffffff;
    color            : #000000;
}

@keyframes "fadeInDown" {
    0% {
        -ms-filter        : "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter            : alpha(opacity=0);
        opacity           : 0;
        -webkit-transform : translateY(-20px);
        -moz-transform    : translateY(-20px);
        -o-transform      : translateY(-20px);
        -ms-transform     : translateY(-20px);
        transform         : translateY(-20px);
    }
    100% {
        -ms-filter        : "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter            : alpha(opacity=100);
        opacity           : 1;
        -webkit-transform : translateY(0);
        -moz-transform    : translateY(0);
        -o-transform      : translateY(0);
        -ms-transform     : translateY(0);
        transform         : translateY(0);
    }

}

@-moz-keyframes fadeInDown {
    0% {
        filter         : alpha(opacity=0);
        opacity        : 0;
        -moz-transform : translateY(-20px);
        transform      : translateY(-20px);
    }
    100% {
        filter         : alpha(opacity=100);
        opacity        : 1;
        -moz-transform : translateY(0);
        transform      : translateY(0);
    }

}

@-webkit-keyframes "fadeInDown" {
    0% {
        filter            : alpha(opacity=0);
        opacity           : 0;
        -webkit-transform : translateY(-20px);
        transform         : translateY(-20px);
    }
    100% {
        filter            : alpha(opacity=100);
        opacity           : 1;
        -webkit-transform : translateY(0);
        transform         : translateY(0);
    }

}

@-ms-keyframes "fadeInDown" {
    0% {
        -ms-filter    : "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter        : alpha(opacity=0);
        opacity       : 0;
        -ms-transform : translateY(-20px);
        transform     : translateY(-20px);
    }
    100% {
        -ms-filter    : "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter        : alpha(opacity=100);
        opacity       : 1;
        -ms-transform : translateY(0);
        transform     : translateY(0);
    }

}

@-o-keyframes "fadeInDown" {
    0% {
        filter       : alpha(opacity=0);
        opacity      : 0;
        -o-transform : translateY(-20px);
        transform    : translateY(-20px);
    }
    100% {
        filter       : alpha(opacity=100);
        opacity      : 1;
        -o-transform : translateY(0);
        transform    : translateY(0);
    }

}

.fadeInDown {
    -webkit-animation-name : fadeInDown;
    -moz-animation-name    : fadeInDown;
    -ms-animation-name     : fadeInDown;
    -o-animation-name      : fadeInDown;
    animation-name         : fadeInDown;
}



/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
	
	.ii{margin-right: 85px;}
    .animated {
        /*CSS transitions*/
        -o-transition-property: none !important;
        -moz-transition-property: none !important;
        -ms-transition-property: none !important;
        -webkit-transition-property: none !important;
        transition-property: none !important;
        /*CSS transforms*/
        -o-transform: none !important;
        -moz-transform: none !important;
        -ms-transform: none !important;
        -webkit-transform: none !important;
        transform: none !important;
        /*CSS animations*/
        -webkit-animation: none !important;
        -moz-animation: none !important;
        -o-animation: none !important;
        -ms-animation: none !important;
        animation: none !important;
    }
	
	
	#loading{ display:none !important;}
	
	
	
	h1,
.h1 {
    font-size : 22px !important;
    }

h2,
.h2 {
 font-size : 22px !important;
    }

h3,
.h3 {
   font-size : 22px !important;
    }
}


.exitblock {    
    display:none;    
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    z-index:100000;
}    
.exitblock .fon {
    background: #F6FCFF;
    opacity:.8;
    position:fixed;
    width:100%;
    height:100%;
}
.exitblock .modaltext {
    box-sizing: border-box;  
    padding:20px 40px;
    border: 2px solid #AEAEAE;
    background: #F6FCFF;
    position:fixed;
    top:80px;
    left:50%;
    margin-left:-30%;
    width:60%;
    box-shadow: 0 4px 10px 2px rgba(0,0,0,0.5);
	color:#000 !important;
}        
.closeblock {
    cursor:pointer;
    position: fixed;
    line-height:60px;
    font-size:82px;
    transform: rotate(45deg);
    text-align:center;
    top:20px;
    right:30px;
    color: #337AB7;    
}
.closeblock:hover {
    color: #000;    
}


a.knopka {
  color: #fff; /* öâåò òåêñòà */
  text-decoration: none; /* óáèðàòü ïîä÷¸ðêèâàíèå ó ññûëîê */
  user-select: none; /* óáèðàòü âûäåëåíèå òåêñòà */
  background: rgb(212,75,56); /* ôîí êíîïêè */
  padding: .7em 1.5em; /* îòñòóï îò òåêñòà */
  outline: none; /* óáèðàòü êîíòóð â Mozilla */
  border:3px #FFF dotted;
  border-radius:5px;
  
} 
a.knopka:hover { background: rgb(232,95,76); } /* ïðè íàâåäåíèè êóðñîðà ìûøêè */
a.knopka:active { background: rgb(152,15,0); } /* ïðè íàæàòèè */



@keyframes rotate {
	100% {
		transform: rotate(1turn);
	}
}

.rainbow {
	position: relative;
	z-index: 0;
	width: 400px;
	height: 300px;
	border-radius: 10px;
	overflow: hidden;
	padding: 2rem;
	
	&::before {
		content: '';
		position: absolute;
		z-index: -2;
		left: -50%;
		top: -50%;
		width: 200%;
		height: 200%;
		background-color: #399953;
		background-repeat: no-repeat;
		background-size: 50% 50%, 50% 50%;
		background-position: 0 0, 100% 0, 100% 100%, 0 100%;
		background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5);
		animation: rotate 4s linear infinite;
	}
	
	&::after {
		content: '';
		position: absolute;
		z-index: -1;
		left: 6px;
		top: 6px;
		width: calc(100% - 12px);
		height: calc(100% - 12px);
		background: white;
		border-radius: 5px;
	}
}

  #box2 {
    position: absolute;
    left: 120px;
    ...
    background: blue;
    ...
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;
  }
  #box1:hover + #box2 {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
    left: calc(100% - 102px);
    background: yellow;
  }



#box1 {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 2px solid #000;
background: #D93921;
color: #fff;
	border-radius: 50px;
	text-align: center;
	vertical-align: middle; 
}

#box2 {
    position: absolute;
    left: 120px;
    width: 100px;
    height: 100px;
    border: 2px solid #000;
background: #00f;
-webkit-transition: 1s all ease-in-out;
-moz-transition: 1s all ease-in-out;
-o-transition: 1s all ease-in-out;
transition: 1s all ease-in-out;
color: #fff;
	border-radius: 50px;
	
}


#stage2 {
    position: relative;
    height: 120px;
    background: rgb(255,255,255,0.2);
    text-align: right;
	border-radius: 50px;
	
}


 #outerspace {
    position: relative;
    height: 400px;
	 width: 400px;
	 margin-top: -600px;
	 z-index: 11111111111;
	 margin-left: 250px;
  
    color: #fff;
  }
  div.rocket {
    position: absolute;
    bottom: 10px;
    left: 20px;
    -webkit-transition: 3s ease-in;
    -moz-transition: 3s ease-in;
    -o-transition: 3s ease-in;
    transition: 3s ease-in;
  }
  div.rocket div {
    width: 100px;
    height: 220px;
	  
	  
    background: url(https://sites4u.info/rocket.png) no-repeat;
    -webkit-transition: 2s ease-in-out;
    -moz-transition: 2s ease-in-out;
    -o-transition: 2s ease-in-out;
    transition: 2s ease-in-out;
  }

  /* hover final state */
  #outerspace:hover div.rocket {
    -webkit-transform: translate(1980px,-1800px);
    -moz-transform: translate(1980px,-1800px);
    -o-transform: translate(1980px,-1800px);
    -ms-transform: translate(1980px,-1800px);
    transform: translate(1980px,-1800px);
  }
  #outerspace:hover div.rocket div {
    -webkit-transform: rotate(50deg);
    -moz-transform: rotate(50deg);
    -o-transform: rotate(50deg);
    -ms-transform: rotate(50deg);
    transform: rotate(50deg);
  }