@font-face {
font-family: 'Intro Thin';
src: url('../Intro-Thin.eot');
src: url('../Intro-Thin.eot?#iefix') format('embedded-opentype'),
url('../Intro-Thin.woff') format('woff'),
url('../Intro-Thin.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Intro Light';
src: url('../Intro-Light.eot');
src: url('../Intro-Light.eot?#iefix') format('embedded-opentype'),
url('../Intro-Light.woff') format('woff'),
url('../Intro-Light.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Intro Regular';
src: url('../Intro-Regular.eot');
src: url('../Intro-Regular.eot?#iefix') format('embedded-opentype'),
url('../Intro-Regular.woff') format('woff'),
url('../Intro-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

@font-face {
	font-family: 'BebasNeue';
	src: url('../BebasNeue.eot');
		src: url('../BebasNeue.svg') format('svg'),
		 url('../BebasNeue.woff') format('woff'),
		 url('../BebasNeue.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
font-family: 'Chickpeas Regular';
src: url('../Chickpeas.eot');
src: url('../Chickpeas.eot?#iefix') format('embedded-opentype'),
url('../Chickpeas.woff') format('woff'),
url('../Chickpeas.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Movus BrushPen C Regular';
src: url('../MovusBrushPenC.eot');
src: url('../MovusBrushPenC.eot?#iefix') format('embedded-opentype'),
url('../MovusBrushPenC.woff') format('woff'),
url('../MovusBrushPenC.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Amatic SC Bold';
src: url('../AmaticSC-Bold.eot');
src: url('../AmaticSC-Bold.eot?#iefix') format('embedded-opentype'),
url('../AmaticSC-Bold.woff') format('woff'),
url('../AmaticSC-Bold.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

/*@font-face {
font-family: 'Rowo Typeface Regular';
src: url('../RowoTypeface.eot');
src: url('../RowoTypeface.eot?#iefix') format('embedded-opentype'),
url('../RowoTypeface.woff') format('woff'),
url('../RowoTypeface.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}*/

@font-face {
font-family: 'The Braggest Regular Alt';
src: url('../TheBraggestAlt-Regular.eot');
src: url('../TheBraggestAlt-Regular.eot?#iefix') format('embedded-opentype'),
url('../TheBraggestAlt-Regular.woff') format('woff'),
url('../TheBraggestAlt-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Dasha Regular';
src: url('../Dasha.eot');
src: url('../Dasha.eot?#iefix') format('embedded-opentype'),
url('../Dasha.woff') format('woff'),
url('../Dasha.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

/*@font-face {
font-family: 'Rachella Script Regular';
src: url('../RachellaScript-Regular.eot');
src: url('../RachellaScript-Regular.eot?#iefix') format('embedded-opentype'),
url('../RachellaScript-Regular.woff') format('woff'),
url('../RachellaScript-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}*/

@font-face {
font-family: 'Jacques  Regular';
src: url('../JacquesGilles.eot');
src: url('../JacquesGilles.eot?#iefix') format('embedded-opentype'),
url('../JacquesGilles.woff') format('woff'),
url('../JacquesGilles.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Bombshell Pro Regular';
src: url('../BombshellPro.eot');
src: url('../BombshellPro.eot?#iefix') format('embedded-opentype'),
url('../BombshellPro.woff') format('woff'),
url('../BombshellPro.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

.autors h3 {
font-family: 'Rowo Typeface Regular' !important;
}
.autors h2 {
font-family: 'Movus BrushPen C Regular' !important;
}
.autors h1 {
font-family: 'Dasha Regular' !important;
text-shadow: rgba(255, 255, 255, 0.95) 0px 1px 0px  !important;
}


html {

    width: 100%;
    overflow-x: hidden;
}

body {
    font-family: 'Intro Light';

        width: 100%;
    overflow-x: hidden;
}

.fattyboomboom {
    font-family: 'Intro Regular';
}

section {
    padding: 50px 0 0px;
    overflow: visible
}


.restserv {
    width:270px;
    padding:16px 0 16px 0;
    position: absolute; 
    bottom: 0; right:0; left:0;
    font-size:30px;
    font-family:'Chickpeas Regular'; 
    text-shadow: rgba(255, 255, 255, 0.95) 0px 1px 0px;
}


.box {
  position: relative;
  width: 130px;
  height: 38px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 15px;
  padding-top: 5px;
  color: #51425e;
}

.itembtn {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 14px;
  z-index: 99;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.4s all ease;
}



.one:before, .one:after {
  position: absolute;
  content: '';
  width: 100%;
  height: 2px;
  background: #51425e;
  transition: 0.4s all ease;
}


.one:before {
  top: 0;
}
.one:after {
  bottom: 0;
}
.one .itembtn:before, .one .itembtn:after {
  position: absolute;
  top: 0;
  content: '';
  height: 100%;
  width: 2px;
  background: #51425e;
  transition: 0.4s all ease;
  z-index: -1;
}
.one .itembtn:before {
  left: 0;
}
.one .itembtn:after {
  right: 0;
}
.one:hover:before, .one:hover:after {
  transition: 0.4s all ease;
}
.one:hover:before {
  transform: translateY(-10px);
}
.one:hover:after {
  transform: translateY(10px);
}
.one:hover .itembtn {
  color: white;
}
.one:hover .itembtn:before, .one:hover .itembtn:after {
  width: 100%;
  transition: 0.4s all ease;
}



.boxserv {
  position: relative;
  width: 130px;
  height: 38px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 15px;
  padding-top: 5px;
  color: #51425e;
  opacity: 0;
              transition: all 0.5s ease 0s;
    -ms-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -webkit-transition: all 0.5s ease 0s
}


.shotab:hover .boxserv {
  opacity: 1;
              transition: all 0.5s ease 0s;
    -ms-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -webkit-transition: all 0.5s ease 0s
}


.itembtnserv {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 14px;
  z-index: 99;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.4s all ease;
}



.oneserv:before, .oneserv:after {
  position: absolute;
  content: '';
  width: 100%;
  height: 2px;
  background: #51425e;
  transition: 0.4s all ease;
}


.oneserv:before {
  top: 0;
}
.oneserv:after {
  bottom: 0;
}
.oneserv .itembtnserv:before, .oneserv .itembtnserv:after {
  position: absolute;
  top: 0;
  content: '';
  height: 100%;
  width: 2px;
  background: #51425e;
  transition: 0.4s all ease;
  z-index: -1;
}
.oneserv .itembtnserv:before {
  left: 0;
}
.oneserv .itembtnserv:after {
  right: 0;
}
.oneserv:hover:before, .one:hover:after {
  transition: 0.4s all ease;
}
.oneserv:hover:before {
  transform: translateY(-10px);
}
.oneserv:hover:after {
  transform: translateY(10px);
}
.oneserv:hover .itembtnserv {
  color: white;
}
.oneserv:hover .itembtnserv:before, .oneserv:hover .itembtnserv:after {
  width: 100%;
  transition: 0.4s all ease;
}



.boxprt {
  position: relative;
  width: 130px;
  height: 38px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 15px;
  padding-top: 5px;
  color: #fff;
}

.itembtnprt {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 14px;
  z-index: 99;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.4s all ease;
}



.oneprt:before, .oneprt:after {
  position: absolute;
  content: '';
  width: 100%;
  height: 1px;
  background: #fff;
  transition: 0.4s all ease;
}


.oneprt:before {
  top: 0;
}
.oneprt:after {
  bottom: 0;
}
.oneprt .itembtnprt:before, .oneprt .itembtnprt:after {
  position: absolute;
  top: 0;
  content: '';
  height: 100%;
  width: 1px;
  background: #fff;
  transition: 0.4s all ease;
  z-index: -1;
}
.oneprt .itembtnprt:before {
  left: 0;
}
.oneprt .itembtnprt:after {
  right: 0;
}
.oneprt:hover:before, .oneprt:hover:after {
  transition: 0.4s all ease;
}
.oneprt:hover:before {
  transform: translateY(-10px);
}
.oneprt:hover:after {
  transform: translateY(10px);
}
.oneprt:hover .itembtnprt {
  color: #51425e;
}
.oneprt:hover .itembtnprt:before, .oneprt:hover .itembtnprt:after {
  width: 100%;
  transition: 0.4s all ease;
}







#main{
  margin-top: -12.5%;
  width= 100%;
  height= 100%;
}

#words2{
  float:right;
  display:inline-block;
  width: -moz-calc(100% - 200px);
  width: -webkit-calc(100% - 200px);
  width: calc(100% - 800px);

  height: 50px;
}

#icon2{
  float: left;
  display:inline-block;
  width: 70px;
  height: 234px;
}

svg {
  width: 100%;
  height: 100%;
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

#rocket {
  -webkit-animation: shakes 1s linear infinite;
          animation: shakes 1s linear infinite;
}
@-webkit-keyframes shakes {
  10% {
    -webkit-transform: translate(5px, 5px);
            transform: translate(5px, 5px);
  }
  20% {
    -webkit-transform: translate(2px, 1px);
            transform: translate(2px, 1px);
  }
  30% {
    -webkit-transform: translate(3px, 2px);
            transform: translate(3px, 2px);
  }
  40% {
    -webkit-transform: translate(4px, 1px);
            transform: translate(4px, 1px);
  }
  50% {
    -webkit-transform: translate(4px, 2px);
            transform: translate(4px, 2px);
  }
  60% {
    -webkit-transform: translate(4px, 1px);
            transform: translate(4px, 1px);
  }
  70% {
    -webkit-transform: translate(1px, 2px);
            transform: translate(1px, 2px);
  }
  80% {
    -webkit-transform: translate(5px, 3px);
            transform: translate(5px, 3px);
  }
  90% {
    -webkit-transform: translate(2px, 5px);
            transform: translate(2px, 5px);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@keyframes shakes {
  10% {
    -webkit-transform: translate(5px, 5px);
            transform: translate(5px, 5px);
  }
  20% {
    -webkit-transform: translate(2px, 1px);
            transform: translate(2px, 1px);
  }
  30% {
    -webkit-transform: translate(3px, 2px);
            transform: translate(3px, 2px);
  }
  40% {
    -webkit-transform: translate(4px, 1px);
            transform: translate(4px, 1px);
  }
  50% {
    -webkit-transform: translate(4px, 2px);
            transform: translate(4px, 2px);
  }
  60% {
    -webkit-transform: translate(4px, 1px);
            transform: translate(4px, 1px);
  }
  70% {
    -webkit-transform: translate(1px, 2px);
            transform: translate(1px, 2px);
  }
  80% {
    -webkit-transform: translate(5px, 3px);
            transform: translate(5px, 3px);
  }
  90% {
    -webkit-transform: translate(2px, 5px);
            transform: translate(2px, 5px);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
#rocket path, #rocket circle, #rocket polygon {
  fill: #FFF;
}
#rocket circle {
  cx: 369.5;
  cy: 331.8;
  r: 7;
}
#rocket polygon {
  -webkit-animation: burst 0.5s infinite;
          animation: burst 0.5s infinite;
  -webkit-transform-origin: 363px 337px;
          transform-origin: 363px 337px;
}
@-webkit-keyframes burst {
  20% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  40% {
    -webkit-transform: scale(0.6);
            transform: scale(0.6);
  }
  60% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  80% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes burst {
  20% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  40% {
    -webkit-transform: scale(0.6);
            transform: scale(0.6);
  }
  60% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  80% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
#comets line {
  fill: none;
  stroke: #FFF;
  stroke-width: 1;
  stroke-dasharray: 150 980;
  stroke-dashoffset: 150;
  -webkit-animation: cometFall 10s ease-out infinite;
          animation: cometFall 10s ease-out infinite;
}
@-webkit-keyframes cometFall {
  5%, 100% {
    stroke-dashoffset: -980;
  }
}
@keyframes cometFall {
  5%, 100% {
    stroke-dashoffset: -980;
  }
}
#comets line:nth-child(1) {
  -webkit-animation-delay: 6.5s;
          animation-delay: 6.5s;
}
#comets line:nth-child(2) {
  -webkit-animation-delay: 9.9s;
          animation-delay: 9.9s;
}
#comets line:nth-child(3) {
  -webkit-animation-delay: 2.8s;
          animation-delay: 2.8s;
}
#comets line:nth-child(4) {
  -webkit-animation-delay: 8.3s;
          animation-delay: 8.3s;
}
#comets line:nth-child(5) {
  -webkit-animation-delay: 8.7s;
          animation-delay: 8.7s;
}
#comets line:nth-child(6) {
  -webkit-animation-delay: 9.7s;
          animation-delay: 9.7s;
}
#comets line:nth-child(7) {
  -webkit-animation-delay: 8.9s;
          animation-delay: 8.9s;
}
#comets line:nth-child(8) {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}






.loading:after {
    content: '.';
    -webkit-animation: loading 1s ease alternate infinite;
            animation: loading 1s ease alternate infinite;
}

@-webkit-keyframes loading {
    60%  { text-shadow: 0.35em 0 0 currentColor; }
    100% { text-shadow: 0.35em 0 0 currentColor, 0.75em 0 0 currentColor; }
}

@keyframes loading {
    60%  { text-shadow: 0.35em 0 0 currentColor; }
    100% { text-shadow: 0.35em 0 0 currentColor, 0.75em 0 0 currentColor; }
}



h1,
h2,
h3,
h4,
h5,
h6 {
    color: #202020;
    -webkit-font-smoothing: antialiased !important
}
.intro-regular {
font-family: 'Intro Regular'
}
a:hover,
a:focus {
    outline: none;
    text-decoration: none
}
p,
#working .tooltip-inner {
    color: #51425e;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 25px;
    -webkit-font-smoothing: antialiased !important
}
section.color {
    background: url(../white.jpg) #f2f2f2;
    background-blend-mode: multiply;
    background-repeat: repeat;
    background-size: 50px;
}

.prefooter {
    background: url(../white.jpg) #444;
    background-blend-mode: multiply;
    background-repeat: repeat;
    background-size: 5%;
}

.prefooter a {
    color: #fff;
}
.prefooter a:hover {
    color: #fff;
}

.blog {
    width: 800px;
    max-width: 100%;
        box-shadow: 0 0 15px rgba(0,0,0,0.5);
         background-size: 5%;
         padding: 20px;
}

.gulin:before {
    content: "Petr Gulin";
}
.katekrew:before {
    content: "Kate Krew";
}
.ashee:before {
    content: "Aleksandra Shishkina";
}

		.demo { position:relative; top:0px; }
		.loupe { background-color:#555; background:rgba(0, 0, 0, 0.25) !important; border:5px solid rgba(0, 0, 0, 0); }

#feedback-form { /* вся форма */
  max-width: 600px;
  padding: 2%;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 0 15px rgba(0,0,0,0.5);
   text-shadow: 0 1px 0 rgba(255, 255, 255, .95);
  
}
#feedback-form label { /* наименование полей */
  float: left;
  display: block;
  clear: right;
}
#feedback-form .w100 { /* поля */
  float: right;
  max-width: 400px;
  width: 97%;
  margin-bottom: 1em;
  padding: 1.5%;
}
#feedback-form .border { /* граница полей */
  border-radius: 1px;
  border-width: 1px;
  border-style: solid;
  border-color: #C0C0C0 #D9D9D9 #D9D9D9;
  box-shadow: 0 1px 1px rgba(255,255,255,.5), 0 1px 1px rgba(0,0,0,.1) inset;
}
#feedback-form .border:focus {
  outline: none;
  border-color: #abd9f1 #bfe3f7 #bfe3f7;
}
#feedback-form .border:hover {
  border-color: #7eb4ea #97cdea #97cdea;
}
#feedback-form .border:focus::-moz-placeholder { /* убрать при фокусе первоначальный текст поля */
  color: transparent;
}
#feedback-form .border:focus::-webkit-input-placeholder {
  color: transparent;
}
#feedback-form .border:not(:focus):not(:hover):valid { /* правильно заполненные поля */
  opacity: .8;
}
#submitFF { /* кнопка "Отправить" */
  padding: 2%;
  border: none;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.2) inset;
  background: #669acc;
  color: #fff;
}
#feedback-form br {
  height: 0;
  clear: both;
}
#submitFF:hover {
  background: #5c90c2;
}
#submitFF:focus {
  box-shadow: 0 1px 1px #fff, inset 0 1px 2px rgba(0,0,0,.8), inset 0 -1px 0 rgba(0,0,0,.05);
}


/*h1:first-letter {
  color: red;
  font-size: 130%;
}*/

.bloglink {
    text-decoration:none;
}

.bloglink:hover {
     text-decoration:underline;
}

.color-white-text {
    color: #fff
}

.restline {
        background:url(../restavr/plenka.jpg) repeat-x,
                        url(../restavr/plenka.jpg) repeat-x 0 100%;
    background-size: auto 20px;
    padding: 20px 0;
}


.shoegoprices {
    width: 100%;
    height: 440px;
    background-color: #777777;
    white-space: nowrap;
      overflow: hidden;
}


.shoegoprices:hover #shosho {
    width: 10.7143%;
            transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s
}

.shoprice1 {
    width: 12.5%;
        height: 440px;
     float: left;
    display: inline;
    vertical-align: middle;
        background: rgba(115, 68, 140, 0.6) url(../1.jpg);
        background-blend-mode: multiply;
    background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
        transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s

}

.shoprice1:hover {
    width: 25% !important;
            transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s
}
.shoprice1:hover .shoprice1in{
        transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s
}

.shoprice1in {
    width: 100%;
        height: 440px;
        transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s
}

.shoprice2 {
    width: 12.5%;
        height: auto;
     float: left; 
    display: inline;
    vertical-align: middle;
            background: rgba(182, 61, 115, 0.6) url(../2.jpg);
        background-blend-mode: multiply;
    background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
            transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s
 /*             	box-shadow: -7px 0px 7px #777777 inset;
	-moz-box-shadow: -7px 0px 7px #777777 inset;
	-ms-box-shadow: -7px 0px 7px #777777 inset;
	-o-box-shadow: -7px 0px 7px #777777 inset;
	-webkit-box-shadow: -7px 0px 7px #777777 inset;*/
}
.shoprice2:hover {
    width: 25% !important;
            transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s
}

.shoprice2in {
    width: 100%;
        height: 440px;
        transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s
}


.shoprice3 {
    width: 12.5%;
        height: 440px;
            background: rgba(191, 60, 66, 0.6) url(../3.jpg);
        background-blend-mode: multiply;
    background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
     float: left; 
    display: inline;
    vertical-align: middle;
            transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s
 /*             	box-shadow: -7px 0px 7px #777777 inset;
	-moz-box-shadow: -7px 0px 7px #777777 inset;
	-ms-box-shadow: -7px 0px 7px #777777 inset;
	-o-box-shadow: -7px 0px 7px #777777 inset;
	-webkit-box-shadow: -7px 0px 7px #777777 inset;*/
}
.shoprice3:hover {
    width: 25% !important;
            transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s
}
.shoprice3in {
    width: 100%;
       height: 440px;
        transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s
}

.shoprice4 {
    width: 12.5%;
        height: 440px;
            background: rgba(206, 127, 35, 0.6) url(../4.jpg);
        background-blend-mode: multiply;
    background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
     float: left; 
    display: inline;
    vertical-align: middle;
            transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s
 /*             	box-shadow: -7px 0px 7px #777777 inset;
	-moz-box-shadow: -7px 0px 7px #777777 inset;
	-ms-box-shadow: -7px 0px 7px #777777 inset;
	-o-box-shadow: -7px 0px 7px #777777 inset;
	-webkit-box-shadow: -7px 0px 7px #777777 inset;*/
}
.shoprice4:hover {
    width: 25% !important;
            transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s
}
.shoprice4in {
    width: 100%;
       height: 440px;
        transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s
}

.shoprice5 {
    width: 12.5%;
        height: 440px;
          background: rgba(223, 193, 27, 0.6) url(../5.jpg);
        background-blend-mode: multiply;
    background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
     float: left; 
    display: inline;
    vertical-align: middle;
            transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s
 /*             	box-shadow: -7px 0px 7px #777777 inset;
	-moz-box-shadow: -7px 0px 7px #777777 inset;
	-ms-box-shadow: -7px 0px 7px #777777 inset;
	-o-box-shadow: -7px 0px 7px #777777 inset;
	-webkit-box-shadow: -7px 0px 7px #777777 inset;*/
}
.shoprice5:hover {
    width: 25% !important;
            transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s
}
.shoprice5in {
    width: 100%;
        height: 440px;
        transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s
}


.shoprice6 {
    width: 12.5%;
        height: 440px;
          background: rgba(156, 206, 35, 0.6) url(../6.jpg);
        background-blend-mode: multiply;
    background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
     float: left; 
    display: inline;
    vertical-align: middle;
            transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s
 /*             	box-shadow: -7px 0px 7px #777777 inset;
	-moz-box-shadow: -7px 0px 7px #777777 inset;
	-ms-box-shadow: -7px 0px 7px #777777 inset;
	-o-box-shadow: -7px 0px 7px #777777 inset;
	-webkit-box-shadow: -7px 0px 7px #777777 inset;*/
}
.shoprice6:hover {
    width: 25% !important;
            transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s
}
.shoprice6in {
    width: 100%;
        height: 440px;
        transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s
}


.shoprice7 {
    width: 12.5%;
        height: 440px;
         background: rgba(35, 168, 206, 0.6) url(../7.jpg);
        background-blend-mode: multiply;
    background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
     float: left; 
    display: inline;
    vertical-align: middle;
            transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s
 /*             	box-shadow: -7px 0px 7px #777777 inset;
	-moz-box-shadow: -7px 0px 7px #777777 inset;
	-ms-box-shadow: -7px 0px 7px #777777 inset;
	-o-box-shadow: -7px 0px 7px #777777 inset;
	-webkit-box-shadow: -7px 0px 7px #777777 inset;*/
}
.shoprice7:hover {
    width: 25% !important;
            transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s
}
.shoprice7in {
    width: 100%;
        height: 440px;
        transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s
}

.shoprice8 {
    width: 12.5%;
       height: 440px;
           background: rgba(52, 114, 191, 0.6) url(../8.jpg);
        background-blend-mode: multiply;
    background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
     float: left; 
    display: inline;
    vertical-align: middle;
            transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s
   /*             	box-shadow: -7px 0px 7px #777777 inset;
	-moz-box-shadow: -7px 0px 7px #777777 inset;
	-ms-box-shadow: -7px 0px 7px #777777 inset;
	-o-box-shadow: -7px 0px 7px #777777 inset;
	-webkit-box-shadow: -7px 0px 7px #777777 inset;*/
}
.shoprice8:hover {
    width: 25% !important;
            transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s
}
.shoprice8in {
    width: 100%;
        height: 440px;
        transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s
}

.shotab{
 background: linear-gradient(to top, #F2F2F2, #fff);
 opacity: 1;   
}
.opp1 {
 opacity: 0;   
 display:none;
 width: 100%;
 height: 100%;
       transition: all 0.2s ease 0s;
    -ms-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s

}
.shoprice1in:hover .opp1 {
 opacity: 1; 
 display:inline;
       transition: all 0.6s ease-in 0s;
    -ms-transition: all 0.6s ease-in 0s;
    -o-transition: all 0.6s ease-in 0s;
    -moz-transition: all 0.6s ease-in 0s;
    -webkit-transition: all 0.6s ease-in 0s

}

.opp2 {
 opacity: 0;   
 display:none;
 width: 100%;
 height: 100%;
       transition: all 0.2s ease 0s;
    -ms-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s

}
.shoprice2in:hover .opp2 {
 opacity: 1;   
 display:inline;
       transition: all 0.6s ease-in 0s;
    -ms-transition: all 0.6s ease-in 0s;
    -o-transition: all 0.6s ease-in 0s;
    -moz-transition: all 0.6s ease-in 0s;
    -webkit-transition: all 0.6s ease-in 0s

}

.opp3 {
 opacity: 0;   
 display:none;
 width: 100%;
 height: 100%;
       transition: all 0.2s ease 0s;
    -ms-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s

}
.shoprice3in:hover .opp3 {
 opacity: 1;   
 display:inline;
       transition: all 0.6s ease-in 0s;
    -ms-transition: all 0.6s ease-in 0s;
    -o-transition: all 0.6s ease-in 0s;
    -moz-transition: all 0.6s ease-in 0s;
    -webkit-transition: all 0.6s ease-in 0s

}

.opp4 {
 opacity: 0;   
 display:none;
 width: 100%;
 height: 100%;
       transition: all 0.2s ease 0s;
    -ms-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s

}
.shoprice4in:hover .opp4 {
 opacity: 1;   
 display:inline;
       transition: all 0.6s ease-in 0s;
    -ms-transition: all 0.6s ease-in 0s;
    -o-transition: all 0.6s ease-in 0s;
    -moz-transition: all 0.6s ease-in 0s;
    -webkit-transition: all 0.6s ease-in 0s

}

.opp5 {
 opacity: 0;   
 display:none;
 width: 100%;
 height: 100%;
       transition: all 0.2s ease 0s;
    -ms-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s

}
.shoprice5in:hover .opp5 {
 opacity: 1;   
 display:inline;
       transition: all 0.6s ease-in 0s;
    -ms-transition: all 0.6s ease-in 0s;
    -o-transition: all 0.6s ease-in 0s;
    -moz-transition: all 0.6s ease-in 0s;
    -webkit-transition: all 0.6s ease-in 0s

}

.opp6 {
 opacity: 0;   
 display:none;
 width: 100%;
 height: 100%;
       transition: all 0.2s ease 0s;
    -ms-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s

}

.shoprice6in:hover .opp6 {
 opacity: 1;   
 display:inline;
       transition: all 0.6s ease-in 0s;
    -ms-transition: all 0.6s ease-in 0s;
    -o-transition: all 0.6s ease-in 0s;
    -moz-transition: all 0.6s ease-in 0s;
    -webkit-transition: all 0.6s ease-in 0s

}

.opp7 {
 opacity: 0;   
 display:none;
 width: 100%;
 height: 100%;
       transition: all 0.2s ease 0s;
    -ms-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s

}
.shoprice7in:hover .opp7 {
 opacity: 1;   
 display:inline;
        transition: all 0.6s ease-in 0s;
    -ms-transition: all 0.6s ease-in 0s;
    -o-transition: all 0.6s ease-in 0s;
    -moz-transition: all 0.6s ease-in 0s;
    -webkit-transition: all 0.6s ease-in 0s

}

.opp8 {
 opacity: 0;   
 display:none;
 width: 100%;
 height: 100%;
       transition: all 0.2s ease 0s;
    -ms-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s

}
.shoprice8in:hover .opp8 {
 opacity: 1;   
 display:inline;
       transition: all 0.6s ease-in 0s;
    -ms-transition: all 0.6s ease-in 0s;
    -o-transition: all 0.6s ease-in 0s;
    -moz-transition: all 0.6s ease-in 0s;
    -webkit-transition: all 0.6s ease-in 0s

}


span.blk {
    color: #000;
    font-size: 1.35vw;
 }
span.blk-regular {
    color: #000;
    font-size: 1.45vw;
    font-family: 'Intro Regular';
}
.servnames {
    position: absolute;
    bottom: 20%;
    font-size: 1vw;

color: #fff;
padding-left: 3px;
   
}


  .op-info { 
  width:25%;
  }
@media screen and (orientation: portrait), (max-width: 768px) { 
  .op-info { 
  width:100%;
  padding: 10px 0px !important;
  }
}




@media screen and (orientation: landscape) { 
  #mobhide { display:block; }
}
@media screen and (orientation: portrait), (max-width: 768px) { 
  #mobhide { display:none; }
}

@media screen and (orientation: landscape) { 
  #mobshow { display:none; }
}
@media screen and (orientation: portrait), (max-width: 768px) { 
  #mobshow { display:block; }
}

@media screen and (orientation: landscape) { 
  #mobhide1024 { display:block; }
}
@media screen and (orientation: portrait), (max-width: 1024px) { 
  #mobhide1024 { display:none; }
}

@media screen and (orientation: landscape) { 
  #mobshow1024 { display:none; }
}
@media screen and (orientation: portrait), (max-width: 1024px) { 
  #mobshow1024 { display:block; }
}

.container {
    max-width: 1170px;
    width: 100%
}
.title {
    text-align: center;
    font-family: 'BebasNeue' !important;
   
    
}
.title h1 {
    font-size: 36px;
    font-weight: 700;
    margin: 0 0 15px;
        font-family: 'BebasNeue' !important;
}
.title h2 {
    font-size: 36px;
    font-weight: 300;
    margin: 0 0 5px;
        font-family: 'BebasNeue' !important;
}
.title p {
    font-weight: 400;
    letter-spacing: 1px;
    margin: 0;
    font-size: 14px;
    line-height: 27px
}
.title.white h1,
.title.white h2,
.title.white p {
    color: #fff
}
.title.grey h1,
.title.grey h2,
.title.grey p {
    color: #777
}
.thumbnail > img {
    width: 100%
}

.img-responsive-div img {
    opacity: 1.0;
    margin-top: 0px;
            transition: all 0.2s ease 0s;
    -ms-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s;
}
.img-responsive-div:hover img {
    opacity: 0.5;
        margin-top: -5px;
                    transition: all 0.2s ease 0s;
    -ms-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s;
}

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

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

.img-responsive2 {
    width: 100%;
    height: auto;
    display:none;
  animation: 10s linear 0s normal none infinite running img-responsive2;
  -webkit-animation: 10s linear 0s normal none infinite running img-responsive2;
}
@keyframes img-responsive2 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes img-responsive2 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.img-responsive3 {
    width: 100%;
    height: auto;
    display:none;
}

.img-responsive4 {
    width: 100%;
    height: auto;
    display:none;
}

.fishkies {

}

.btn {
    border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    -webkit-border-radius: 0;
    border: 1px solid #fff;
    padding: 10px 25px 7px;
    color: #fff;
    text-transform: uppercase
}
.btn:hover,
.btn:focus,
.btn.focus {
    color: #fff;
    background: transparent
}

.counterli {
margin-right: -74px;
margin-top: -65px;
transform: rotateY(180deg);
position:absolute;
right: 0;
width: 88px;
        transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
}
.counterli:hover {
margin-right: 0px;
transform: rotateY(0deg);
        transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
}


.colorcircle {
    border: 4px solid #fff;
            transition: all 0.5s ease 0s;
    -ms-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -webkit-transition: all 0.5s ease 0s;
}

.colorcircleout:hover .colorcircle {
    border: 4px solid #fff;
        transition: all 0.5s ease 0s;
    -ms-transition: all 0.5s ease 0s;
    -o-transition: all 0.5 ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -webkit-transition: all 0.5s ease 0s;
}

.colorcircle:hover {
        transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
}

.colorcircleout:hover .colorscheme {
opacity: 1;
    transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -webkit-transition: all 0.4s ease 0s;
}


.colorscheme {
 color:#fff;
 opacity: 0;
    transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
/* text-shadow: 1px 1px 1px #000; */
}

.worksunderline {
width:0;
     transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
}

.forport h1 {
    font-family: 'BebasNeue' !important;	
}
.forport h2 {
    font-family: 'BebasNeue' !important;	
}

.portmacdiv:hover .worksunderline {
width:100%;
     transition: all 0.6s ease 0s;
    -ms-transition: all 0.6s ease 0s;
    -o-transition: all 0.6s ease 0s;
    -moz-transition: all 0.6s ease 0s;
    -webkit-transition: all 0.6s ease 0s;
}

.cosmoslogo1 {
display:inline;
}
.cosmoslogo2 {
display:none;
}
.cosmoslogo3 {
display:none;
}
.cosmoslogo4 {
display:none;
}
.cosmoslogo5 {
display:none;
}
.cosmoslogo6 {
display:none;
}
.cosmoslogo7 {
display:none;
}
.cosmoslogo8 {
display:none;
}
.cosmoslogo9 {
display:none;
}

.workicon {
margin-top:-5px;
margin-right: 5px;
transform: rotateY(0deg);
             transition: all 0s ease 0s;
    -ms-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -webkit-transition: all 0s ease 0s;
}
.portmacdiv:hover .workicon {
    transform: rotateY(360deg);
         transition: all 0.8s ease 0s;
    -ms-transition: all 0.8s ease 0s;
    -o-transition: all 0.8s ease 0s;
    -moz-transition: all 0.8s ease 0s;
    -webkit-transition: all 0.8s ease 0s;
}


.workstitle {
    color:#222;
    font-family: 'BebasNeue';
    letter-spacing: 0.1em;
         transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
}

.portmacdiv:hover .workstitle {
         transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
}

.portmacdivin {
    width: 100%;
    height: 0;
    background-size: 93% auto;
    background-repeat: no-repeat;
    background-position: center center;
    padding-top: 76.195%;
    display: inline-block; 
    vertical-align: top;
    transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s
}
.portmacdiv:hover .portmacdivin {
       background-size: 100% auto;
    transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s
}

.portmacdiv {
    width:32vw; 
    padding: 7px 7px 7px 7px; 
    margin-bottom: 55px;
    white-space: nowrap; 
    display: inline-block; 
    vertical-align: top;
          transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s
}

.portmacdiv:hover {
                transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s
}
  
  @media screen and (max-width: 1024px) { 
  .portmacdiv { 
  width: 49vw; 
    padding: 7px 7px 7px 7px; 
    white-space: nowrap; 
    display: inline-block; 
    vertical-align: top;
    }
  }
  
    @media screen and (max-width: 1024px) { 
  .portmacdiv:hover { 
  width: 49vw; 
    padding: 7px 7px 7px 7px; 
    white-space: nowrap; 
    display: inline-block; 
    vertical-align: top;
    }
  }
  
  
  
@media screen and (orientation: portrait) { 
  .portmacdiv { 
  width: 100vw; 
    padding: 7px 7px 7px 7px; 
    white-space: nowrap; 
    display: inline-block; 
    vertical-align: top;
     }
  }
  
  @media screen and (orientation: portrait) { 
  .portmacdiv:hover { 
  width: 100vw; 
    padding: 7px 7px 7px 7px; 
    white-space: nowrap; 
    display: inline-block; 
    vertical-align: top;
     }
  }


.portmacdiv:hover .portmac {
    opacity: 0.85;
      transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s
}

.portmac {
    width:100%; 
    height:auto;
    opacity: 1.0;
      transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s
}


#fuckinpanel {
    background-color: transparent;
    margin-top:-10px;
}

@media screen and (orientation: portrait), (max-width: 768px) { 
  #fuckinpanel {
    background-color:#000;
    margin-top:-10px;
}
}


.forkate img{
    width: 100%;
    height: auto;
margin: 0;
}

.kateshadow {
    box-shadow: 0 0 35px rgba(0,0,0,0.5);
}


.portlineout {
    width: 200%;
    white-space: nowrap;
    overflow-x: hidden;
        box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
 
  .portlineoutmob { 
    width: 100%;
    white-space: nowrap;
    overflow-x: scroll;
        box-shadow: 0 0 10px rgba(0,0,0,0.5);
   }


.portline {
    width: 200%;
    white-space: nowrap;
    overflow-x: hidden;
    position : relative;
}

  .portlinemob { 
 width: 520%;
    white-space: nowrap;
    overflow-x: scroll;
    position : inherit;
   }



.psquare {
    position: inherit;
    text-align: center;
    width: 25vw;
    height: 25vw;
         float: left;
    display: inline-block;
    vertical-align: top;
}
 
  .psquaremob { 
  
  position: inherit;
    text-align: center;
    width: 65vw;
    height: 65vw;
         float: left;
    display: inline-block;
    vertical-align: top;
   }



.site {
    width: 100%;
    height: 100%;

    background-size: cover !important;
    background-position: center center !important;
    transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s
}

.site:hover {
    background-size: cover !important;
    background-position: center center !important;
     transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s
}

.siteblack {
        background: rgba(0, 0, 0, 0);
        width: 100%;
        height: 100%;
          transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
     border: 1px solid rgba(0,0,0,0);

}

.siteblack:hover {
            background: rgba(0, 0, 0, 0.7);
        width: 100%;
        height: 100%;
          transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;

}

.siteinner {
 width: 100%;
 height: 100%;
  margin-top: 10%;
  margin-left: 10%;
  width: 80%;
 height: 80%;
 border: 1px solid #fff;
 opacity: 0;
           transition: all 1s ease-out 0s;
    -ms-transition: all 1s ease-out 0s;
    -o-transition: all 1s ease-out 0s;
    -moz-transition: all 1s ease-out 0s;
    -webkit-transition: all 1s ease-out 0s;

}

.siteblack:hover .siteinner {
 opacity: 1;
           transition: all 1s ease-out 0s;
    -ms-transition: all 1s ease-out 0s;
    -o-transition: all 1s ease-out 0s;
    -moz-transition: all 1s ease-out 0s;
    -webkit-transition: all 1s ease-out 0s;
}

.tle {
  height: 100%;
  width: 100%;
  padding: 20px;
  white-space: normal;
}


.sititle {
   font-size: 1.7vw;
   color: #fff;
   font-family: 'Intro Regular';
}

    .sititlemob {
   font-size: 4vw;
   color: #fff;
   font-family: 'Intro Regular';
}


.sityear {
   font-size: 1.3vw;
   color: #fff;
   font-family: 'Intro Thin';
}


.sityearmob {
   font-size: 3.5vw;
   color: #fff;
   font-family: 'Intro Thin';
}



#contact .btn {
    border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    -webkit-border-radius: 0;
    border: 1px solid #999;
    padding: 10px 25px 7px;
    color: #999;
    text-transform: uppercase
}
#contact .btn:hover,
#contact .btn:focus,
#contact .btn.focus {
    color: #d89325;
        border: 1px solid #d89325;
    background: transparent
}



.animated {
    visibility: hidden
}
.visible {
    visibility: visible
}
.pattern-overlay {
    background: url(../images/pattern.png) repeat rgba(0, 0, 0, 0.5);
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0
}
.navbar-default,
.btn,
.we-are-block i,
#features i,
.contact-details {
    background: #51425e
}
.we-are-block:hover i,
.we-are-block:hover h2,
.we-are-block:hover h3,
.btn:hover,
#working li:hover,
#portfolio .item ul > li i:hover,
#features .feature:hover i,
#features .feature:hover h3,
#team .thumbnail .caption li > a:hover,
#footer li > a:hover,
.service-block:hover div.fa,
.service-block:hover h4,
.service-block:hover h3,
.service-block:hover i {
    transition: all 0.5s ease 0s;
    -ms-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -webkit-transition: all 0.5s ease 0s
}
#pageloader {
    background-color: #1f1f1f;
    height: 100%;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99999
}
.loader-item {
    background: url(../images/loader.gif) no-repeat;
    height: 40px;
    left: 50%;
    margin: -20px 0 0 -20px;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 40px
}
.loader-item h2 {
    color: #CCCCCC;
    font-size: 20px;
    margin: 0 auto
}

svg{
  width:100%;
  height:100%;
}

text{
  fill:red;
}

.bg1rest {
    background: url(../restavr/1bg.jpg) repeat;
    background-size: 127% auto;
    background-position-x: center !important;
}

.bg2rest {
    background: url(../restavr/2bg.jpg) repeat;
    background-size: 135% auto;
    background-position-x: center !important;
}

.bg3rest {
    background: url(../restavr/3bg.jpg) repeat;
    background-size: 135% auto;
    background-position-x: center !important;
}

.bg4rest {
    background: url(../restavr/4bg.jpg) repeat;
    background-size: 145% auto;
    background-position-x: center !important;
}

.colored-border {
    border-color: #3498db
}
.navbar {
height: 30px !important;
background-color: #000000;
}


.navbar-default {
    border-color: #000000;
    margin-bottom: 0;
    z-index: 9999;
    
}
.navbar-default .navbar-brand,
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #ffffff;
    font-size: 36px;
        font-family: 'Intro Regular';
    text-transform: uppercase;
    font-weight: 700;
}
.navbar-default .navbar-brand-thin,
.navbar-default .navbar-brand-thin:hover,
.navbar-default .navbar-brand-thin:focus {
        color: #ffffff;
    font-size: 36px;
    font-family: 'Intro Thin';
    text-transform: uppercase;
    font-weight: 700;
    margin-left: -13px;

}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    background: transparent
}
.navbar-default .navbar-header p {
    color: #ffffff;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
}
.navbar-default .navbar-nav > li > a {
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1px;
    padding-bottom: 0px;
    padding-top: 20px;
    line-height: 30px;
    outline: none
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #fff;
    letter-spacing: 1px
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background: #202020
}
.navbar-toggle {
    position: absolute;
    top: 15px;
    right: 0;
    border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    -webkit-border-radius: 0
}
.text-slider {
    background: url(../images/slider/1.jpg) repeat fixed;
    background-size: cover;
    border-color: #000000;
    position: relative;
    overflow: hidden
}


a.cta {
  display: inline-block;
  font-weight: bold;
  font-size: 24px;
  color: #000;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .75);
  user-select: none;
  padding: .3em 0.5em;
  border: 2px solid #ad6101;
  border-radius: 5px;
  outline: none;
  background: rgb(226,155,64) linear-gradient(rgb(226,155,64), rgb(246,139,3) 80%);
  box-shadow:
   0 6px #ad6101,
   0 3px 15px rgba(0,0,0,.4),
   inset 0 1px rgba(255,255,255,.3),
   inset 0 0 3px rgba(255,255,255,.5);
                transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s
} 
.cta:hover {
background: rgb(226,155,64) linear-gradient(rgb(246,139,3), rgb(226,155,64)80%);
              transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s
}
.cta:active {
  background: rgb(226,155,64) linear-gradient(rgb(246,139,3), rgb(226,155,64)80%);
  box-shadow:
   0 2px #ad6101,
   0 1px 6px rgba(0,0,0,.4),
   inset 0 1px rgba(255,255,255,.3),
   inset 0 0 3px rgba(255,255,255,.5);
  -webkit-transform: translate(0, 4px);
  transform: translate(0, 4px);
}


a.cta2 {
  display: inline-block;
  width: 15em;
  z-index: 9998;
    position: relative;
    font-size: 150%;
  font-weight: 700;
  color: #000;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .75);
  text-decoration: none;
  text-align: center;
  line-height: 1.1;
  white-space: pre-line;
  padding: .7em 0;
  border: 1px solid;
  border-color: #fca028 #e47b00 #e47b00 #fca028;
  border-radius: 6px;
  outline: none;
  background: url(http://cosmostudio.su/white.jpg), linear-gradient(#fca028, #f38900 50%, #e47b00);
  background-size: auto 170%;
  background-repeat: repeat-x;
  background-blend-mode: multiply;
  box-shadow: inset rgba(255,255,255,.5) 1px 1px;
                  transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s
}

a.cta2:hover {
  color: rgb(255,255,255);
    text-shadow: 0 1px 0 rgba(0, 0, 0, .75);
  background: url(http://cosmostudio.su/white.jpg), linear-gradient(#fbac45, #f19319 50%, #e48b24);
    background-size: auto 170%;
  background-repeat: repeat-x;
  background-blend-mode: multiply;
                  transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s
}


.macfull {
    width: 100%;
    max-width: 1088px !important;
}

.description {
 max-width: 1000px; 
}

.logofull img {
 max-width: 100%;   
}

.banner img {
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    border-radius: 5px;
    max-width: 100%;
}

.othergraphic img {
    max-width: 100%;
}

.othergraphic {
    width: 100%;
    max-width: 1088px;
}

.fullstory h1 {
color:#000;
text-shadow: 0 1px 0 rgba(255, 255, 255, .75);
	font-family: 'BebasNeue';
font-weight: 300;
}

.fullstory h2 {
color:#000;
text-shadow: 0 1px 0 rgba(255, 255, 255, .75);
	font-family: 'BebasNeue';
}

.fullstory h3 {
color:#000;
text-shadow: 0 1px 0 rgba(255, 255, 255, .75);
font-family: 'Intro Light';
}

.blog h1 {
color:#000;
text-shadow: 0 1px 0 rgba(255, 255, 255, .75);
font-family: 'Intro Regular';
}

.blog h2 {
color:#000;
text-shadow: 0 1px 0 rgba(255, 255, 255, .75);
font-family: 'Intro Regular';
}

.blog h3 {
color:#000;
text-shadow: 0 1px 0 rgba(255, 255, 255, .75);
font-family: 'Intro Light';
}

.allworks {
 color: #000;
 letter-spacing: 0;
text-shadow: 0 1px 0 rgba(255, 255, 255, .75);
font-size: 25px;
 text-decoration: none;
              transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s
}

.allworks:hover {
    color: #000;
     letter-spacing: 2px;
   -webkit-text-decoration-skip: ink;
  text-decoration-skip: ink;
               transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s
}


.text-slider .slider-container {
    position: absolute;
    right: 0;
    left: 0;
    top: 50%;
    transform: translateY(-50%)
}
.slider-text .item {
    display: block;
    width: 100%;
    height: auto
}
.slider-text .item h3 {
    color: #ffffff;
    font-size: 48px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 25px
}
.slider-text .item p {
    color: #ffffff;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 1px;
    text-align: center;
    margin-bottom: 40px
}
.owl-pagination {
    text-align: center
}
.owl-controls .owl-page {
    display: inline-block;
    height: 20px
}
.owl-page > span {
    background: #fff;
    display: block;
    height: 10px;
    margin: 0 15px;
    width: 10px
}
.owl-page.active > span {
    background: #000;
    border: 7px solid #fff;
    height: 25px;
    width: 25px;
    margin: -7px 8px
}
.scroll-down {
    text-align: center;
    position: absolute;
    right: 0;
    left: 0;
    top: 110%
}
.scroll-down > a {
    text-align: center;
    color: #fff;
    font-size: 28px;
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
    -webkit-animation-name: hover;
    animation-name: hover;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    display: inline-block;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0)
}
@-webkit-keyframes "hover" {
    50% {
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px);
    }
    100% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
    }
}
@keyframes "hover" {
    50% {
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px);
    }
    100% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
    }
}
.text-slider-container p {
    padding: 0 33%
}
.text-slider-container a.btn i {
    margin-right: 5px
}
.slides-container {
    z-index: -1
}
.wide-container {
    height: 700px
}
.bg-slider {
    position: relative
}
.z-index-99 {
    z-index: 99
}
.vertical-center-section {
    margin: 0;
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%)
}
.text-slider-container .element,
.typed-cursor {
    color: #ffffff;
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 25px;
    text-align: center;
    text-transform: uppercase
}
.typed-cursor {
    animation: fadeIn 0.6s alternate infinite;
    -o-animation: fadeIn 0.6s alternate infinite;
    -moz-animation: fadeIn 0.6s alternate infinite;
    -webkit-animation: fadeIn 0.6s alternate infinite
}
.video-bg {
    min-height: 650px;
    position: realtive
}
.text-slider.video-bg-section {
    background-image: none
}
.video-bg .movie {
    z-index: -1
}
#we-are .title {
    margin-bottom: 10px
}
#we-are .title p {
    margin: 0
}
.we-are-block h4 {
    font-size: 24px;
    font-weight: 300;
    text-align: left;
    margin: 2px 0 8px
}
.we-are-block h3 {
    font-size: 24px;
    font-weight: 700;
    text-align: left;
    margin: 0 0 10px
}
.we-are-block p {
    margin: 18px 0 50px
}
.we-are-block i,
#features i {
    font-size: 50px;
    text-align: center;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    -webkit-border-radius: 5px;
    color: #fff;
    height: 70px;
    padding: 12px 0;
    width: 70px;
    position: relative
}
.we-are-block i:after,
#features i:after {
    content: "";
    background-color: #cacaca;
    height: 60px;
    position: absolute;
    width: 1px;
    right: -16px;
    top: 5px
}
.icon-title {
    display: inline-block;
    margin-left: 29px
}
#features .title {
    margin-bottom: 95px
}
#features .features-left,
#features .features-right {
    width: 35%;
    padding: 50px 15px;
    float: left
}
#features .features-image {
    width: 30%;
    padding: 0 15px;
    float: left
}
#features .features-left {
    text-align: right
}
#features .features-right {
    text-align: left
}
#features .features-left .feature-icon {
    float: right
}
#features .features-right .feature-icon {
    float: left
}
#features .feature {
    margin-top: 75px
}
.features-title {
    display: table
}
#features h3 {
    font-size: 23px;
    font-weight: 700;
    margin: 0 0 6px
}
#features .features-left i {
    margin: 5px 0 0 25px
}
#features .features-left i:after {
    left: -14px;
    background: #51425e
}
#features .features-right i {
    margin: 5px 25px 0 0
}
#features .features-right i:after {
    right: -14px;
    background: #7c7c7c
}
#counter {
    background: url(../images/bg/counter.jpg) fixed;
    background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover
}
.counter-section {
    position: relative;
    padding: 100px 0 60px
}
.counter-section .counter,
.counter-section i,
.counter-section p {
    color: #fff;
    text-align: center
}
.counter-section i {
    font-size: 75px;
    display: block
}
.counter-section .counter {
    font-size: 60px;
    font-weight: 500
}
.counter-section p {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 50px
}
#team .title {
    margin-bottom: 75px
}
#team .thumbnail {
    border: none;
    padding: 0;
    position: relative;
    margin-bottom: 75px
}
#team .thumbnail h3 {
    font-size: 24px;
    margin-bottom: 0;
    margin-top: 10px
}
#team .thumbnail p {
    color: #000;
    line-height: 25px
}
#team .thumbnail img {
    position: relative;
    z-index: 99
}
#team .thumbnail .caption {
    background-color: #fff;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    text-align: center;
    border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    -webkit-border-radius: 0;
    min-height: 188px;
    content: attr(data-hover);
    -webkit-transform: rotateX(240deg);
    -moz-transform: rotateX(240deg);
    transform: rotateX(240deg);
    -webkit-transition: -webkit-transform 0.6s;
    -moz-transition: -moz-transform 0.6s;
    transition: transform 0.6s;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    transform-origin: 0 0;
    z-index: 0
}
#team .thumbnail:hover .caption,
#team .thumbnail .caption:hover {
    -webkit-transform: rotateX(-10deg);
    -moz-transform: rotateX(-10deg);
    transform: rotateX(-10deg);
    border: 1px solid;
    border-top: 5px solid
}
#team .thumbnail .caption ul {
    padding: 0;
    margin: 18px 0
}
#team .thumbnail .caption li {
    display: inline-block;
    font-size: 18px;
    margin: 0 5px
}
#team .thumbnail .caption li > a {
    color: #51425e
}
#team .thumbnail .caption li > a.fa-facebook:hover {
    color: #3B5998
}
#team .thumbnail .caption li > a.fa-twitter:hover {
    color: #5EA9DD
}
#team .thumbnail .caption li > a.fa-google-plus:hover {
    color: #DD4B39
}
#team .thumbnail .caption li > a.fa-youtube:hover {
    color: #C2191E
}
#skills .title {
    margin-bottom: 60px
}
#skills p {
    margin-bottom: 0
}

.fr-alternate-rows tr:hover {
    background-color: #fff5e3 !important;
}
.fr-alternate-rows td {
    padding: 4px 7px;
}

.progress {
    border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -webkit-border-radius: 0;
    -o-border-radius: 0;
    box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -webkit-box-shadow: none;
    -o-box-shadow: none;
    height: 13px;
    background: #fff;
    border: 1px solid #000;
    margin-top: 35px;
        margin-bottom: 0px;
    overflow: visible;
}
.progress-bar {
    background: #624e74;
    position: relative
}
.progress .tooltip {
    opacity: 1;
    right: -20px;
    top: -40px;
    font-family: inherit
}
.progress .tooltip-inner {
    padding: 6px 10px;
    border-radius: 0
}
#responsive {
    background: url(../images/bg/responsive.jpg) fixed;
    padding: 0;
    background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover
}
.responsive-section {
    position: relative;
    padding: 100px 0
}
#responsive div {
    z-index: 9
}
#responsive h2 {
    font-size: 48px;
    color: #fff;
    font-weight: 700;
    line-height: 58px
}
#responsive p {
    color: #fff;
    margin-bottom: 25px
}
#responsive img {
    margin-top: 35px
}
#services .title {
    margin-bottom: 80px
}
.service-block {
    text-align: center;
    padding: 95px 37px 40px
}
.services-bottom .service-block {
    padding-top: 60px
}
.service-block div.fa {
    color: #F2F2F2;
    font-size: 120px;
    position: relative
}
.service-block i.fa {
    color: #624e74;
    display: block;
    font-size: 75px;
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 20px
}
.service-block h4 {
    font-size: 26px;
    font-weight: 300
}
.service-block p {
    font-size: 14px
}
.services-bottom .service-block p {
    margin-bottom: 60px
}
.service-block h3 {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 20px
}
.services-top,
.services-bottom {
    margin-left: 110px;
    margin-right: 110px
}
.service-block.left {
    border-right: 2px solid
}
.middle-line {
    background: none repeat scroll 0 0 transparent;
    border-top: 2px solid;
    height: 0px;
    margin: 0 110px;
    position: relative
}
.middle-line:before,
.middle-line:after,
.services-top .service-block.left:before,
.services-bottom .service-block.left:after {
    border-radius: 50%;
    content: "";
    height: 20px;
    position: absolute;
    width: 20px;
    left: 0;
    margin-top: -10px
}
.middle-line:after {
    left: auto;
    right: -1px;
    top: 0
}
.services-top .service-block.left:before,
.services-bottom .service-block.left:after {
    left: auto;
    right: -11px;
    top: 0
}
.services-bottom .service-block.left:after {
    top: auto;
    bottom: 0
}
.middle-line > span {
    color: #fff;
    display: inline-block;
    font-size: 32px;
    font-weight: 700;
    line-height: 32px;
    margin: 0 auto;
    position: relative;
    text-align: center;
    top: -18px;
    width: 100%;
    z-index: 9
}
.middle-line > span:before {
    content: "";
    height: 50px;
    left: -1px;
    margin: -8px auto 0;
    position: absolute;
    right: 0;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    width: 50px;
    z-index: -1
}

.working-section {
    position: relative;
    padding: 40px 0;
    width:100%;
    height:100%;
}

#working {
    background: url(../images/bg/working.jpg) #202020 repeat fixed;
    padding: 0 !important;
        background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover
}
#working .title {
    margin-bottom: 70px
}
#working .working-circle {
    height: 160px;
    width: 160px;
    border: 2px solid #fff;
    border-radius: 50%;
    -ms-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    -webkit-border-radius: 50%;
    color: #51425e;
    margin: 0 auto;
    position: relative;
    text-align: center;
    font-family: 'Intro Thin';
    margin-bottom: 70px;
                 transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s
}
#working .working-circle:after {
    border-radius: 50%;
    box-sizing: content-box;
    content: "";
    height: 100%;
    pointer-events: none;
    position: absolute;
    width: 100%;
    background: #fff;
    left: -2px;
    padding: 2px;
    top: -2px;
    transform: scale(0.92);
    -moz-transform: scale(0.92);
    -ms-transform: scale(0.92);
    -o-transform: scale(0.92);
    -webkit-transform: scale(0.92);
                 transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s
}
#working .working-circle:hover:after {
    transform: scale(1);
    -ms-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1);
                 transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s
}
#working .working-circle i {
    font-size: 60px;
    position: relative;
    line-height: 158px;
    z-index: 9
}
#working .working-circle > p {
    color: #f2f2f2;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 1px;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 20px
}
#working .working-circle:hover:after {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    opacity: 0;
    -webkit-transition: -webkit-transform 0.5s, opacity 0.3s;
    -moz-transition: -moz-transform 0.5s, opacity 0.3s;
    transition: transform 0.5s, opacity 0.3s;
                 transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s
}
#working .working-circle:hover {
    -ms-box-shadow: 0px 0px 0px 3px #fff;
    -moz-box-shadow: 0px 0px 0px 3px #fff;
    -o-box-shadow: 0px 0px 0px 3px #fff;
    -webkit-box-shadow: 0px 0px 0px 3px #fff;
    color: #fff;
    border-color: #fff;
                 transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s
}
#working .tooltip {
    opacity: 1
}
#working .tooltip-inner {
    padding: 10px;
    line-height: unset;
    color: #fff
}
#pricings .title {
    margin-bottom: 65px
}
#pricings .pricing-table {
    border: 1px solid;
    border-color: #202020;
    text-align: center;
    margin-bottom: 40px
}
.category {
    position: relative;
    background: #51425e
}
.category h3 {
    font-size: 20px;
    font-weight: 700;
    line-height: 60px;
    color: #fff;
    margin: 0;
    text-transform: uppercase
}
.price {
    padding: 4px 0
}
.price h4,
.price p {
    margin: 0;
    letter-spacing: 1px;
    color: #51425e
}
.price h4 {
    font-size: 25px;
    font-weight: 700
}
.price p {
    font-size: 14px;
    font-weight: 400
}
.pricing-table ul {
    padding: 0 5px
}
.pricing-table ul > li {
    list-style: none;
    padding: 15px 0;
    color: #51425e;
    font-weight: 400;
    letter-spacing: 1px;
    border-bottom: 1px solid #cacaca;
    -webkit-font-smoothing: antialiased !important
}
.pricing-table .btn {
    font-size: 22px;
    background: #51425e;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 8px 25px;
    margin: 15px 0 0;
    display: block;
    border: none;
    width: 100%
}
.pricing-table .btn:hover,
#pricings .pricing-table.premium .btn:hover {
    color: #fff;
    background: #202020
}
#pricings .pricing-table.premium {
    transform: scaleY(1.05);
    -ms-transform: scaleY(1.05);
    -moz-transform: scaleY(1.05);
    -o-transform: scaleY(1.05);
    -webkit-transform: scaleY(1.05)
}
#pricings .pricing-table.premium .price {
    transform: scaleY(0.95);
    -ms-transform: scaleY(0.95);
    -moz-transform: scaleY(0.95);
    -o-transform: scaleY(0.95);
    -webkit-transform: scaleY(0.95)
}
#testimonials {
    text-align: center;
    background: url(../images/bg/testimonial.jpg)fixed;
    background-size: cover;
    z-index: 0;
    position: relative;
    padding-bottom: 80px
}
#testimonials p {
    font-weight: 500;
    font-size: 14px;
    color: #fff;
    margin-bottom: 20px
}
.img-circle-div img {
    height: 100px;
    width: 100px;
    border: 4px solid #fff;
    border-radius: 50%;
    -ms-border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%
}

.kavych {
width: 5%;
line-height: 0;
}

@media screen and (orientation: portrait) {
.kavych {
width: 0%;
}
}

 .kavychno {
text-align: justify;
font-size: 110%;
width: 90%;
padding: 15px 15px;
}

@media screen and (orientation: portrait), (max-width: 768px) {
    .kavychno {
text-align: justify;
font-size: 100%;
width: 100%;
padding: 0px 15px;
}
}

 .kavychnoniz {
text-align: center;
font-size: 110%;
width: 90%;
padding: 15px 15px;
}

@media screen and (orientation: portrait), (max-width: 768px) {
    .kavychno {
text-align: center;
font-size: 100%;
width: 100%;
padding: 0px 15px;
}
}

.tableniz {
    translateY(-50px);
}

@media screen and (orientation: portrait), (max-width: 768px) {
    .tableniz {
translateY(0px);
}
}

.clientkav1 {
    color: #777777;
    display:inline;
 opacity: 0.2;
 text-shadow: 5px 5px 5px #000;   
             transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s
}

@media screen and (orientation: portrait) {
.clientkav1 {
    color: #777777;
    display:none;
 opacity: 0.2;
 text-shadow: 5px 5px 5px #000;   
             transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s
}
}

.exlink {
width: 15px;
height: 15px;
margin-left:5px;
        background: url(/exlink.png);
    background-size: 100% auto;
    background-position: center top;
    display: inline-block;
}

.linkout:hover .exlink {
width: 15px;
height: 15px;
margin-left:5px;
        background: url(/exlink.png);
    background-size: 100% auto;
    background-position: center bottom;
    display: inline-block;
}

.clientable {
   width: 85%; 
   margin-top:-10px;
   max-width: 1000px;
}

@media screen and (orientation: portrait) {
    .clientable {
   width: 100%; 
   margin-top: 0px;
}
}


.clientable:hover .clientkav1 {
    color: #777777;
 opacity: 0.2;
 text-shadow: -5px -5px 5px #000;
             transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s
}

.clientkav2 {
    color: #777777;
 opacity: 0.2;
    display:inline;
 text-shadow: -5px -5px 5px #000;   
             transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s
}

@media screen and (orientation: portrait) {
.clientkav2 {
    color: #777777;
 opacity: 0.2;
    display:none;
 text-shadow: -5px -5px 5px #000;   
             transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s
}
}

.clientable:hover .clientkav2 {
    color: #777777;
 opacity: 0.2;
 text-shadow: 5px 5px 5px #000;
             transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s
}

#testimonials h3 {
    margin-bottom: 0
}
#clients {
    background: #fff;
    padding-bottom: 70px
}
#clients .img-responsive,
#testimonials .img-responsive {
    width: auto;
    margin: 0 auto
}
#portfolio {
    padding-bottom: 0px;
    cursor: ew-resize;
}
#portfolio ul,
#portfolio .item ul {
    text-align: center;
    padding: 0;
    list-style: none
}
#portfolio .item {
    float: left;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    background: #51425e
}
#portfolio .item h3 {
    color: #fff;
    font-size: 20px;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 20px 0;
    padding: 0 0 15px 15px;
    opacity: 0;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s
}
#portfolio ul > li {
    display: inline-block;
    padding: 0 5px;
    cursor: pointer;
    position: relative
}
#portfolio ul > li:after {
    position: absolute;
    content: "/";
    right: 0
}
#portfolio ul > li:last-child:after {
    content: ""
}
#portfolio ul > li a {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: capitalize;
    color: #000;
    padding-right: 10px
}
#portfolio .item img {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    position: relative
}
.project-grid .grid-sizer {
    width: 25%
}
.project-grid .mini-item {
    width: 25%;
    border: 5px solid #fff
}
.project-grid .mini-item.w2 {
    width: 50%
}
#portfolio .item {
    position: relative;
    display: block;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}
.item-caption {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    position: absolute;
    top: 100%;
    height: 50px;
    width: 100%
}
#portfolio .item ul {
    height: 100%;
    margin-bottom: 0;
    padding: 10px 0
}
#portfolio .item ul > li a {
    padding: 0;
    font-size: 20px;
    color: #fff;
    padding: 0 10px
}
#portfolio .item:hover .item-caption {
    -webkit-transform: translatey(-50px);
    -moz-transform: translatey(-50px);
    -o-transform: translatey(-50px);
    -ms-transform: translatey(-50px);
    transform: translatey(-50px)
}
#portfolio .item:hover img {
    -webkit-transform: translateY(-50px);
    -moz-transform: translateY(-50px);
    -o-transform: translateY(-50px);
    -ms-transform: translateY(-50px);
    transform: translateY(-50px);
    opacity: 0.5
}
#portfolio .item:hover h3 {
    -webkit-transform: translate3d(0, -50px, 0);
    transform: translate3d(0, -50px, 0);
    opacity: 1
}
#contact {
    background:url(../mailbg-v.jpg) fixed repeat-y,
                        url(../mailbg-v.jpg) fixed repeat-y 100% 0;
    background-size: 15px auto;
    padding-bottom: 0;
    position: relative;
}
.input-group {
    width: 100%
}
.form-group {
    margin-bottom: 30px
}
.form-control {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #bbb;
    border-color: #bbb;
    box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    -webkit-box-shadow: none;
    color: #bbb;
    border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -webkit-border-radius: 0;
    -o-border-radius: 0
}
.form-control::-moz-placeholder {
    color: #fff
}
.form-control:focus,
.has-error .form-control:focus,
.has-success .form-control:focus {
    box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    -webkit-box-shadow: none;
    font-style: normal
}
.has-error .form-control:focus,
.has-error .form-control {
    border-color: #a94442
}
#contact .btn {
    margin: 25px 0 50px;
    float: right;
    background: transparent;
    font-weight: 700;
    font-size: 18px;
    padding: 10px 80px;
    text-transform: none
    
}
.message-box i {
    padding-right: 37px
}
.contact-details {
    padding: 50px 20px;
    background: #624e74;
    text-align: center;
    position: relative
}
.contact-details .icon-circle {
    position: relative;
    background-color: #ffffff;
    border: 1px solid #51425e;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    padding: 18px 0;
    margin: 0 auto;
    color: #51425e;
    overflow: hidden
}
.contact-block:hover .icon-circle {
    color: #fff
}
.contact-block {
    margin-bottom: 30px
}
.contact-block i {
    font-size: 34px;
    position: absolute;
    left: 0;
    right: 0;
    display: block
}
.contact-block:hover i {
    -webkit-animation: toRightFromLeft 0.3s forwards;
    -moz-animation: toRightFromLeft 0.3s forwards;
    animation: toRightFromLeft 0.3s forwards
}
@-webkit-keyframes "toRightFromLeft" {
    49% {
        -webkit-transform: translate(100%);
    }
    50% {
        opacity: 0;
        -webkit-transform: translate(-100%);
    }
    51% {
        opacity: 1;
    }
}
@-moz-keyframes "toRightFromLeft" {
    49% {
        -moz-transform: translate(100%);
    }
    50% {
        opacity: 0;
        -moz-transform: translate(-100%);
    }
    51% {
        opacity: 1;
    }
}
@keyframes "toRightFromLeft" {
    49% {
        transform: translate(100%);
    }
    50% {
        opacity: 0;
        transform: translate(-100%);
    }
    51% {
        opacity: 1;
    }
}
.contact-details h3 {
    font-size: 28px;
    font-weight: 400;
    color: #fff;
    margin-bottom: 15px
}
.contact-details p,
.contact-details p a {
    color: #fff;
    font-size: 14px;
    line-height: 14px
}
.map #map_canvas {
    height: 240px;
    width: 100%
}
#footer {
    background: url(../white.jpg) #3c3146;
    background-blend-mode:multiply;
    background-size: auto 75%;
    background-repeat: repeat;
}
#footer p {
    color: #fff;
    margin: 32px 0;
    font-size: 14px
}
#footer ul {
    float: right;
    margin: 0;
    padding: 24px 0;
    text-align: center
}
#footer li {
    display: inline-block;
    font-size: 24px;
    padding: 0 5px
}
#footer li > a {
    color: #fff;
    background: #4a4a4a;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    padding: 8px 0
}
#footer a.fa-facebook:hover {
    background: #3B5998
}
#footer a.fa-twitter:hover {
    background: #5EA9DD
}
#footer a.fa-google-plus:hover {
    background: #DD4B39
}
#footer a.fa-youtube:hover {
    background: #C2191E
}

.sobaka:before {
    content: "@";
}

.phonenumber:before {
    content: "7(929)571-97-90";
}
.plus:before {
    content: "+";
}

.color,
.btn:hover, .btn:focus, .btn.focus,
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus,
.we-are-block:hover h4,.we-are-block:hover h3,
#features .feature:hover h3,
.service-block:hover h4,.service-block:hover h3,.service-block:hover i,
#team .thumbnail h3,
#testimonials h3,
#portfolio ul > li a.active,#portfolio .item ul > li i:hover,
.form-control:focus{
	color:#e29b40;
}
/*Mozilla placeholder*/
.form-control:focus::-moz-placeholder{
	color:#e29b40;
}
/*Services Section*/
.service-block:hover div.fa{
	color:rgba(0,153,204,0.1);
}
.navbar-default .navbar-toggle .icon-bar,
.we-are-block:hover i,
#features .feature:hover i,
.middle-line > span:before,.services-top .service-block.left:before,.services-bottom .service-block.left:after,.middle-line:before,.middle-line:after,.middle-line,
.progress .tooltip-inner,
#working .tooltip-inner,
#pricings .pricing-table.premium .category,#pricings .pricing-table.premium .btn,
#testimonials .owl-page.active > span,
.contact-block:hover .icon-circle
{
	background:#e29b40;
}	

.btn:hover, .btn:focus, .btn.focus,
.btn:hover,.services-top,#team .thumbnail .caption,
.service-block.left,.middle-line,
#pricings .pricing-table.premium,
#team .thumbnail:hover .caption,
.form-control:focus{
  	 border-color:#e29b40;
}
	 
.progress .tooltip-arrow,
/*Working Section*/
#working .tooltip-arrow{
	 border-top-color:#e29b40 !important;
}

#working .working-circle:hover{
	box-shadow:0px 0px 7px #e29b40 inset;
	-moz-box-shadow:0px 0px 7px #e29b40 inset;
	-ms-box-shadow:0px 0px 7px #e29b40 inset;
	-o-box-shadow:0px 0px 7px #e29b40 inset;
	-webkit-box-shadow:0px 0px 7px #e29b40 inset;
	
}