* {
  scrollbar-width: thin;
  scrollbar-color: #FF0000 #1E1E1E;
}

*::-webkit-scrollbar {
  width: 6px;
  width: 6px;
}
*::-webkit-scrollbar-track {
  border-radius: 4px;
  background-color: #1E1E1E;
}

*::-webkit-scrollbar-track:hover {
  background-color: #494949;
}

*::-webkit-scrollbar-track:active {
  background-color: #1E1E1E;
}

*::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: #FF0000;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: #E80000;
}

*::-webkit-scrollbar-thumb:active {
  background-color: #FF0000;
}



@font-face {
    font-family: "Proxima Nova"; /* Гарнитура шрифта */
    src: url(../fonts/ProximaNova-Bold.ttf); /* Путь к файлу со шрифтом */
}
@font-face {
    font-family: "Gabriola"; /* Гарнитура шрифта */
    src: url(../fonts/Gabriola.ttf); /* Путь к файлу со шрифтом */
}
@font-face {
    font-family: "Andada"; /* Гарнитура шрифта */
    src: url(../fonts/andada.ttf); /* Путь к файлу со шрифтом */
}
body { background-image: url(../img/bg.jpg); background-color: #1c1c1c;}
.arr {
    width: 20px;
    float: right;
}
body,p,span,a {color: #ffffff;}
.test-portfolio{background: #fff; height: 300px; border: solid 1px #000; margin-bottom: 10px}
a{text-decoration: none;}
.content{margin-left: 115px;     overflow: hidden;}
.textarea-input{
        background: none;
    color: #ffffff;
    border: none;
    border-bottom: solid 2px #787d81;

}
.close {display: none !important;}
.textarea-input::-webkit-input-placeholder {color:#ffffff;}
.textarea-input::-moz-placeholder          {color:#ffffff;}/* Firefox 19+ */
.textarea-input::-moz-placeholder           {color:#ffffff;}/* Firefox 18- */
.textarea-input::-ms-input-placeholder      {color:#ffffff;}
.textarea-input:focus-visible {border-bottom: solid 2px  #787d81;
    outline: none;}


.menu {background-color: #1e1e1e;
    height: 100vh;
    width: 115px;
    -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.44);
    -moz-box-shadow:    0px 0px 30px 0px rgba(0, 0, 0, 0.4 4);
    box-shadow:         0px 0px 30px 0px rgba(0, 0, 0, 0.44);
    position: fixed;
    z-index: 10;
}

.back-btn{
     position: fixed !important;
    top: 65px !important;
    left: 145px !important;
    min-width: 40px !important;
    max-width: 50px !important;
    padding: 2px 0px !important;
    font-size: 30px !important;
    margin: 0 !important;
     }

.footerend{
  padding-top: 50px;
    display: block;
    align-items: center;
    justify-content: space-between;
}
.social-btn-1s {
  display: flex;
    align-items: center;
    grid-gap: 10.9px;
}
.footer_text{
  display: block;
}
.menufooter{
  list-style-type: none;
    margin: 0;
    padding: 0;
    grid-gap: 20px;
    display: flex;
    justify-content: center;
    border-bottom: solid 1px red;
    margin-bottom: 40px;
margin-top: 40px;
padding-bottom: 20px;
}
.menufooter li {float:left;padding: 20px;}
.footer-menu:hover{
  background: #323232;
      border-radius: 4px;
      box-shadow: 1px 0px 3px 2px #000;
}
ul li div p {
    margin: 0;
}
.menu ul li{list-style: none; margin-bottom: 30px;     position: relative;}
.menu ul li img {width: 40px;}
section{padding: 1em}
.hed{height: 100vh; background-image: url(../img/hed.jpg); background-size: cover;}
.hed .title {font-size: 4em !important;}
.btn{
    background-color: #e43131;
    padding: 10px;
    border: solid #dc0000;
}
.pad-70 {padding-top: 70px; padding-bottom: 70px}


.border-title {
    margin: 3em;
    overflow: hidden;
    text-align: center;

}
.border-title h3 {
    display: inline-block;
    vertical-align: middle;
    font-family: "Proxima Nova";
    text-transform: uppercase;
    letter-spacing: 5px;
}
.border-title:before,
.border-title:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    height: 4px;
    background-color: #dc0000;
    position: relative;
}
.border-title:before {
    margin-left: -100%;
    left: -14px;
}
.border-title:after {
    margin-right: -100%;
    right: -14px;
}
.god{ /*background-image: url(../img/god.jpg);*/ height: 900px; background-size: cover;}
.god h3{color: #dc0000; font-size: 3em}

.services {/*background-image: url(../img/services.jpg)*/;background-size: cover;}
.services .container {padding-bottom: 2em;}
.tab {
    background: #2c2c2c;;
    -webkit-box-shadow: -1px -1px 22px 0px rgba(0, 0, 0, 0.69);
    -moz-box-shadow:    -1px -1px 22px 0px rgba(0, 0, 0, 0.69);
    box-shadow:         -1px -1px 22px 0px rgba(0, 0, 0, 0.69);
}
.tab-bg{
    background-image: url(../img/tab.jpg);
    height: 260px;
    background-size: cover;
    transition: all 0.5s ease 0s;
}
.pad-20{padding-top: 20px; padding-bottom: 20px }
.z-20{    z-index: 20;}
.no-pad{padding: 0 !important;}
.no-pad-l-r{padding-left: 0 !important;padding-right: 0 !important;}
.pad-top-50{padding-top: 50px}
.tab-bot{background: #181818; padding-bottom: 30px;}
.tab-bot ul{    margin: 0; padding-top: 20px;     padding-left: 0;}
.tab-bot ul li{
    font-size: 20px;
    list-style: none;
    padding-bottom: 15px;
    font-weight: bold;
	border-bottom: solid 1px black;
    padding-top: 10px;

}
.btn-tab{
    font-size: 18px;
    border-radius: 20px;
    border: solid 2px #d45353;
    padding: 10px 40px;
    display: block;
    width: 50%;
    margin: 0 auto;
    margin-top: 30px;
    color: #d45353;
    transition: all 0.5s ease 0s;
    background: none;
}
.btn-tab:focus{    outline: none !important;}
.btn-tab:hover{width: 48%; background: #752c2c; color: #fff;}
.btn-tab-s{ color: #67d2f5; border: solid 2px #67d2f5;}
.btn-tab-s:hover{background: #337084}
.tab-title{
    color: #ffffff;
    display: table;
    font-size: 2.4em;
    margin: 0;
    text-align: center;
    width: 100%;
}
.tab-title-s{
    margin-top: -3em;
    background: linear-gradient(45deg, #b392be 33%, #60d8ff 66%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.tab-title-d-p{
    background: linear-gradient(45deg, #c05588 33%, #d45353 66%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.tab:hover > .tab-bg{      background-position-x: -10px;}
.otz{; font-size: 3.5em;    font-weight: 100;}
.otz-text{font-size: 35px; font-family: "Аndada"}
.otz-name{font-size: 35px; font-family: "Аndada"}
.otz-name span{font-family: "Proxima Nova";     font-size: 20px;}
.comp{    font-size: 2em;     font-weight: 100;}
.hed-title-div{
    position: absolute;
    top: 20%;
    z-index: 2;
}



.center-do-not-use {
    display: block;
    margin: 0 auto;
    width: 24px;
    height: 100px;
    margin-top: 25vh;
}

.arrow {
    display: block;
    -ms-transform: rotate(45deg);  /* IE 9 */
    -webkit-transform: rotate(45deg);  /* Chrome, Safari, Opera */
    transform: rotate(45deg);
    border-right: 1px solid #ff0000;
    border-bottom: 1px solid #ff0000;
    margin: 5px 0 8px 8px;
    width: 10px;
    height: 10px;
    -webkit-animation: mouse-scroll .5s infinite;
    -moz-animation: mouse-scroll .5s infinite;
    -webkit-animation-direction: alternate;
}

.mouse {
    height: 42px;
    width: 24px;
    border-radius: 14px;
    transform: none;
    border: 2px solid #ff0000;
    margin-bottom: 6px;
}

.wheel {
    height: 5px;
    width: 2px;
    display: block;
    margin: 5px auto;
    background: #ffffff;
    position: relative;
    height: 4px;
    width: 4px;
    border: 2px solid #ffffff;
    border-radius: 8px;
}

.wheel {
    -webkit-animation: mouse-wheel 1s linear infinite;
    -moz-animation: mouse-wheel 1s linear infinite;
}

@-webkit-keyframes mouse-wheel {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        -ms-transform: translateY(20px);
        transform: translateY(20px);
    }
}

@-moz-keyframes mouse-wheel {
    0% {
        top: 1px;
    }
    25% {
        top: 2px;
    }
    50% {
        top: 6px;
    }
    75% {
        top: 2px;
    }
    100% {
        top: 1px;
    }
}

@-webkit-keyframes mouse-scroll {
    0% {
        opacity: 0;
    }
    25% {
        opacity: .25;
    }
    50% {
        opacity: .5;
    }
    75% {
        opacity: .75;
    }
    100% {
        opacity: 1;
    }
}

@-moz-keyframes mouse-scroll {
    0% {
        opacity: 0;
    }
    50% {
        opacity: .5;
    }
    100% {
        opacity: 1;
    }
}

@-o-keyframes mouse-scroll {
    0% {
        opacity: 0;
    }
    25% {
        opacity: .25;
    }
    50% {
        opacity: .5;
    }
    75% {
        opacity: .75;
    }
    100% {
        opacity: 1;
    }
}

@keyframes mouse-scroll {
    0% {
        opacity: 0;
    }
    25% {
        opacity: .25;
    }
    50% {
        opacity: .5;
    }
    75% {
        opacity: .75;
    }
    100% {
        opacity: 1;
    }
}



.animation-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    overflow: hidden;

}

#portfolio{position: relative}
.animation-container span {
    color: whitesmoke;
    display: block;
    font-size: 18px;
    font-family: 'Helvetica';
    text-shadow: 0 0 1px white;
    position: absolute;
    user-select: none;
    pointer-events: none;
    cursor: default;
    z-index: 1;
    opacity: 0;
    will-change: transform, opacity;
    animation-timing-function: ease-out;
    animation-name: move;
}

@keyframes move {
    0% {
        opacity: 0;
        transform: translateY(100vh);
    }
    25% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    75% {
        opacity: 0;
    }
    100% {
        opacity: 0;
        transform: none;
    }
}




.snip1543 {
    background-color: #fff;
    color: #ffffff;
    display: inline-block;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 16px;
    margin: 10px 5px;
    /*max-width: 315px;
    min-width: 230px;*/
    overflow: hidden;
    position: relative;
    text-align: left;
    width: 100%;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.snip1543 *,
.snip1543 *:before,
.snip1543 *:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.45s ease;
    transition: all 0.45s ease;
}

.snip1543 img {
    backface-visibility: hidden;
    max-width: 100%;
    width: 100%;
    vertical-align: top;
}

.snip1543:before,
.snip1543:after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    content: '';
    background-color: #251212;
    opacity: 0.5;
    -webkit-transition: all 0.45s ease;
    transition: all 0.45s ease;
}

.snip1543:before {
    -webkit-transform: skew(30deg) translateX(-80%);
    transform: skew(30deg) translateX(-80%);
}

.snip1543:after {
    -webkit-transform: skew(-30deg) translateX(-70%);
    transform: skew(-30deg) translateX(-70%);
}

.snip1543 figcaption {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 1;
    bottom: 0;
    padding: 25px 40% 25px 20px;
}

.snip1543 figcaption:before,
.snip1543 figcaption:after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #211d1d;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
    content: '';
    opacity: 0.5;
    z-index: -1;
}

.snip1543 figcaption:before {
    -webkit-transform: skew(30deg) translateX(-100%);
    transform: skew(30deg) translateX(-100%);
}

.snip1543 figcaption:after {
    -webkit-transform: skew(-30deg) translateX(-90%);
    transform: skew(-30deg) translateX(-90%);
}

.snip1543 h3,
.snip1543 p {
    margin: 0;
    opacity: 0;
    letter-spacing: 1px;
}

.snip1543 h3 {
    font-family: 'Teko', sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 1em;
    text-transform: uppercase;
}

.snip1543 p {
    font-size: 0.9em;
}

.snip1543 a {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

.snip1543:hover h3,
.snip1543.hover h3,
.snip1543:hover p,
.snip1543.hover p {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 0.9;
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

.snip1543:hover:before,
.snip1543.hover:before {
    -webkit-transform: skew(30deg) translateX(-20%);
    transform: skew(30deg) translateX(-20%);
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
}

.snip1543:hover:after,
.snip1543.hover:after {
    -webkit-transform: skew(-30deg) translateX(-10%);
    transform: skew(-30deg) translateX(-10%);
}

.snip1543:hover figcaption:before,
.snip1543.hover figcaption:before {
    -webkit-transform: skew(30deg) translateX(-40%);
    transform: skew(30deg) translateX(-40%);
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s;
}

.snip1543:hover figcaption:after,
.snip1543.hover figcaption:after {
    -webkit-transform: skew(-30deg) translateX(-30%);
    transform: skew(-30deg) translateX(-30%);
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}

.button {
    /*float: left;*/
    min-width: 150px;
    max-width: 250px;
    /*display: block;*/
    margin: 1em;
    padding: 1em 2em;
    border: none;
    background: none;
    color: inherit;
    vertical-align: middle;
    position: relative;
    z-index: 1;
    -webkit-backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
}
.button:focus {
    outline: none;
}
.button > span {
    vertical-align: middle;
}

.button--btn {
    margin: 1em 2em;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
    -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.button--btn::before,
.button--btn::after {
    content: '';
    position: absolute;
    border-radius: inherit;
    background: #e43131;
    z-index: -1;
}
.button--btn::before {
    top: -4px;
    bottom: -4px;
    left: -4px;
    right: -4px;
    opacity: 0.4;
    -webkit-transform: scale3d(0.7, 1, 1);
    transform: scale3d(0.7, 1, 1);
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
}
.button--btn::after {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transform: scale3d(1.1, 1, 1);
    transform: scale3d(1.1, 1, 1);
    -webkit-transition: -webkit-transform 0.3s, background-color 0.3s;
    transition: transform 0.3s, background-color 0.3s;
}
.button--btn::before,
.button--btn::after {
    -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.button--btn.button--inverted::before,
.button--btn.button--inverted::after {
    background: #fff;
}
.button--btn:hover {
    color: #fff;
}
.button--btn:hover::before {
    opacity: 1;
}
.button--btn:hover::after {
    background-color: #1c1c1c;
}
.button--btn1:hover::after {
    background-color: #233550;
}

.button--btn.button--inverted:hover::after {
    background-color: #7986cb;
}
.button--btn:hover::after,
.button--btn:hover::before {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
}
#slidr-div-breadcrumbs{width: 100%}

@media only screen and (min-width: 48em) {
    .tab{    margin-bottom: 40px;}
}
.modal-title {    font-size: 2em;
    font-weight: 100;}
.logo {text-align:center;     margin-top: 60px;}
.logo img {width: 60%;}
.tab-p{font-size: 20px;
    margin: 10px;
    background: linear-gradient(45deg, #ffffff 33%, #ffffff 66%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;}
.formbox{padding: 10px;}
.formbox h3 {font-size: 1.7em;}


[class^='tooltip']:hover .inner {
  opacity: 1;
  visibility: visible;
}
[class^='tooltip']:hover .inner:before {
  visibility: visible;
  transition: .25s linear;
}

.inner {
  padding: 8px;
  border-radius: 4px;
  overflow: hidden;
  color: #E6E6E6;
  font-size: 14px;
  white-space: nowrap;
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transition: .3s linear;
  pointer-events: none;
  z-index: 5;
}
.inner:before {
  content: '';
  background-color: #323232;
  height: 500px;
  width: 500px;
  border-radius: 50%;
  position: absolute;
  visibility: hidden;
  z-index: -1;
  transition: .3s linear, transform 0s .3s linear;
}


.tooltip-right:hover .inner {
  left: 120%;
}
.tooltip-right:hover .inner:before {
  transform: translateY(-50%) scale(1);
}
.tooltip-right .inner {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
}
.tooltip-right .inner:before {
  top: 50%;
  right: 0;
  transform: translateY(-50%) scale(0.1);
}

	.social-icons {
  display: flex;
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 50px;
  height: 50px;
  margin: 0 0.5rem;
  border-radius: 50%;
  cursor: pointer;
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-size: 1.2em;
  text-decoration: none;
  transition: all 0.15s ease;
}
.social-icon:hover {
  color: #fff;
}
.social-icon:hover .tooltip {
  visibility: visible;
  opacity: 1;
  -webkit-transform: translate(-50%, -150%);
          transform: translate(-50%, -150%);
}
.social-icon:active {
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5) inset;
}
.social-icon--linkedin {
  background: #006599;
  color: #fff;
}
.social-icon--linkedin .tooltip {
  background: #006599;
  color: currentColor;
}
.social-icon--linkedin .tooltip:after {
  border-top-color: #006599;
}
.social-icon--twitter {
  background: #2b97f1;
  color: #fff;
}
.social-icon--twitter .tooltip {
  background: #2b97f1;
  color: currentColor;
}
.social-icon--twitter .tooltip:after {
  border-top-color: #2b97f1;
}
.social-icon--codepen {
  background: #000;
  color: #fff;
}
.social-icon--codepen .tooltip {
  background: #000;
  color: currentColor;
}
.social-icon--codepen .tooltip:after {
  border-top-color: #000;
}
.social-icon--facebook {
  background: #3b5a9b;
  color: #fff;
}
.social-icon--facebook .tooltip {
  background: #3b5a9b;
  color: currentColor;
}
.social-icon--facebook .tooltip:after {
  border-top-color: #3b5a9b;
}
.social-icon--instagram {
  background: #527fa6;
  color: #fff;
}
.social-icon--instagram .tooltip {
  background: #527fa6;
  color: currentColor;
}
.social-icon--instagram .tooltip:after {
  border-top-color: #527fa6;
}
.social-icon--dribbble {
  background: #ef5a92;
  color: #fff;
}
.social-icon--dribbble .tooltip {
  background: #ef5a92;
  color: currentColor;
}
.social-icon--dribbble .tooltip:after {
  border-top-color: #ef5a92;
}
.social-icon--vk {
  background: #4284c0;
  color: #fff;
}
.social-icon--vk .tooltip {
  background: #4284c0;
  color: currentColor;
}
.social-icon--vk .tooltip:after {
  border-top-color: #4284c0;
}
.social-icon i {
  position: relative;

}

/* Tooltips */
.tooltip {
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  padding: 0.8rem 1rem;
  border-radius: 40px;
  font-size: 0.8rem;
  font-weight: bold;
  opacity: 0;
  pointer-events: none;
  text-transform: uppercase;
  -webkit-transform: translate(-50%, -100%);
          transform: translate(-50%, -100%);
  transition: all 0.3s ease;
  z-index: 1;
}
.tooltip:after {
  display: block;
  position: absolute;
  bottom: 1px;
  left: 50%;
  width: 0;
  height: 0;
  content: "";
  border: solid;
  border-width: 10px 10px 0 10px;
  border-color: transparent;
  -webkit-transform: translate(-50%, 100%);
          transform: translate(-50%, 100%);
}

.accordion{width: 100%;}

.accordion li {
  list-style: none;
  margin: 0;
  box-shadow: 1px 2px 3px 0px #000;
}

.accordion-trigger {
      margin: 10px 0 0;
    padding: 20px 15px;
    background: #2b2a2a;
    transition: .2s ease-in;
        text-align: left;
}

.accordion-trigger:hover {
  cursor: pointer;
  background: #252323;
}

.accordion-content {
  background: #151414;
  padding: 5px 15px;
  margin: 0;
}
#formres{    margin-bottom: 30px;}

.footer-links p{margin: 0}

@media only screen and (min-width: 48em){
	.hed, .segmenter {    height: 50vh !important}
}
@media only screen and (min-width: 75em){
	.hed, .segmenter {    height: 100vh !important}
}

.bifh1 {font-size: 4em !important;     text-align: center}
#hamburger{display:none}
@media (max-width: 700px){
        #hamburger{display:block}
        .menu{display:none;}
        .content{margin-left:0}
        .hed .title{font-size: 2em !important; margin-bottom: 100px}
        .iconpok{margin:0 !important}
        .card{width:100% !important}
        .otz{font-size: 2em !important;}
        .social-btn-1s .btn-1 {    display: inline !important;}
		.work{    margin-bottom: 50px;}
		.back-btn {    left: 15px !important;     top: 40px !important;}
		h1 {    font-size: 1.5em;}
		.border-title:before, .border-title:after {display:none;}
			.border-title{border-top: solid 4px #dc0000;    border-bottom: solid 4px #dc0000;}
			.bifh1 {font-size: 2em !important;     text-align: center}
    }