/*==========================================================================

                                  ##
                                ##  ##
                              ##      ##
                            ##   KUBO   ##
                              ##      ##
                                ##  ##
                                  ##

                             By j3dlab.com - 2014

==========================================================================


CSS INDEX

  GENERAL
  SCUARE ROTATION 45DEG
  SOCIAL ICONS
  JQEasyTootip
  OWL SLIDER
  ISOTOPE FILTERS GENERAL
  LOADER
  PRINCIPAL NAV
  HEADER
  ABOUT
  HERE ARE SOME NUMBERS
  SERVICES
  TEAM
  WORK
  WORK DETAILS
  PROCESS
  TESTIMONIALS
  VIDEO HTML
  CLIENTS
  CONTACT
  MAP
  BLOG
  BLOG DETAIL
  FOTTER
  COLORS
  RESPONSIVE

*/


/* ==========================================================================
  GENERAL
========================================================================== */

body, html{
  height:100%;
  font-size: 99%;
}


body{
  font-family: 'Roboto Slab';
  color: #3b3b3b;
}


/*TITLES*/
h1,h2,h3,h4,h5,h6,h1 *,h2 *,h3 *,h4 *,h5 *,h6 * {
  font-family: 'Montserrat';
  color:#141414;
}

h1,h2{
  font-weight:bold;
  letter-spacing: -2px;
}

h5{
  letter-spacing: -0.01rem;
}

.onePage h2,.onePage h3,.onePage h4,.onePage h5,.onePage h6{
  text-align: center;
}

.onePage h2{
  margin-top: 0;
}

header h1 {
    font-size: 50px;
    line-height: 51px;
    text-transform: capitalize;
    text-align: left;
       margin: 100px 0 100px 35px;
        color: #fff;
        font-weight: normal;
}

h2 {
  font-size: 4.118rem;
  line-height: 4.118rem;
  margin-bottom: 80px;
  text-align: center;
}

h4 {
  font-size: 1.875rem;
  line-height: 1.875rem;
  letter-spacing: -1px;
  margin-bottom: 30px;
}

h5 {
  font-size: 1.375rem;
  line-height: 1.375rem;
  font-weight: normal; margin-bottom: 16px;
}


/* NAV STYLES */
nav a, #mainMenu a:focus{
  text-decoration: none;
  font-weight: normal;
  display: inline-block;
  padding: 30px 9px;
  font-family: 'Montserrat';
  color:#5f5f5f;

  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}

nav a:hover{
  text-decoration: none;
}

/*LINKS*/
a{
  text-decoration: none!important;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  font-weight: bold;
  text-decoration: underline;
}

a:hover, a:focus {
  color: inherit;
  text-decoration: none;
  /*color: #141414;*/
}
/*IMG FULL WIDTH*/
.img100{ width: 100%;
  height: auto;
}

/*LIST*/
ol, ul {
  list-style: none outside none;
  margin: 0;
  padding: 0;
}

li{
  margin: 0;
  padding: 0;
}


/*VERTICAL ALIGN*/
.centerContainer{
  display:table;
  position: relative;
  width: 100%;
  height: 100%;
}
.centerContainer > div:nth-of-type(1) {
  display: block;
  vertical-align: middle;
  width: 100%
}


.fullScreen{
  height: 100%;
  width: 100%;
}

.paddingstandard{
  padding:175px 0;
}

.paddingstandardTop{
  padding-top:175px;
}
.paddingstandardBottom{
  padding-bottom:175px;
}

.aligncenter{
  text-align: center;
}

.divider{
  border-bottom: 1px solid #e3e3e3;
  height: 1px;
  margin: 60px 0px;
  overflow: hidden;
}

/*BLOCKQUOTE*/
blockquote{
  margin: 20px 0 30px;
  padding: 40px 30px;
  border-left: 5px solid;
  color: #999999;
}


/* COLUMNS */
.framedColumn{
  padding:35px;
}


p, .iconlist,.squareList{
     margin-bottom: 7px;
  line-height: 20px;
    font-size: 14px;
}


/* SPECIAL LISTS */
.squareList li{
  float: none;
  position: relative;
  margin-left: 20px;
}
.squareList li:before{
  content: '■';
  margin-left: -20px;
  margin-top: -1px;
  position:absolute;
  transform:rotateZ(45deg);
  -webkit-transform:rotateZ(45deg);
  -ms-transform:rotate(45deg); /* IE9 */
}

.squareList.white,
.squareList.white li{
  color: #FFFFFF;
}

.squareList.white,
.squareList.white a:hover{
  color: #FFFFFF;
}

.iconlist li{
  color:#666666;
  line-height: 27px;
}
.iconlist span{
  padding-right: 15px;
  font-weight: bold;
}

.iconlist,.squareList{
  line-height: 30px;
}

/* FORMS */
#formMsg{
  position: relative;
  display: none;
}


#formMsg span{
  left:0;
  padding: 0;
  margin: 0;
  float: left;
}

#formMsg span:before{
  color:#93C993;
  font-size: 3rem;
}


.fa-exclamation-triangle:before{
  color: #ec971f!important;
}

#formMsg p{
  font-family: 'Montserrat';
  font-size: 1.2rem;
  padding: 9px 0 0 60px;
}



input:focus, select:focus, textarea:focus, button:focus {
  outline: none;
}

#submit:focus{
  border-radius: 0!important;
  border-color: #141414!important;
  background-color: #141414!important;
}

input, textarea{
  font-family: 'Montserrat';
  border: 2px solid #9f9f9f;
  padding:17px 20px;
  font-size: 1.250rem;
  width: 100%;
  margin-bottom: 33px;
  position: relative;
  display: block;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}

textarea{
  resize:vertical;
}

input:hover, textarea:hover, input:focus, textarea:focus{
  border-color: #6a6a6a
}

textarea:required:invalid, input:required:invalid, input:focus:invalid{
  box-shadow: none;
}

textarea:required:valid, input:required:valid, input:focus:valid{
  box-shadow: none;
  background: #E8F4E8;
  border-color: #93C993;
}

form span[class*="fa-"] {
  color: #D9D9D9;
  display: inline-block;
  height: 20px;
  width: 20px;
  padding: 24px 30px;
  position: absolute;
  right: 18px;
  text-align: center;
  z-index: 100;
}

#submit{
  text-align: left;
  display: block;
  border: none;
}

.submitIcon{
  color: #FFFFFF!important;
  padding-top:22px!important;
}


/* BUTTONS */
.button {
  padding:17px 20px;
  font-size: 1.250rem;
  color:#FFFFFF;
  font-family: 'Montserrat';
  text-transform: uppercase;
  font-size: 1.125rem;
  display: inline-block;
  text-decoration: none!important;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}

a.button{
  font-weight: normal!important;
}

.button:hover{
  color: #FFFFFF;
  background-color: #141414;
}


/* BUTTONS */

.btn{
  padding:8px 12px;
  font-size: 1.250rem;
  color:#FFFFFF;
  font-family: 'Montserrat';
  font-weight: normal;
  text-transform: uppercase;
  font-size: 1.125rem;
  display: inline-block;
  text-decoration: none!important;
  border: 2px solid;
  border-radius: 0px!important;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}

.btn-lg,
.btn-group-lg > .btn {
  padding:17px 20px;
  font-size: 1.250rem;
  line-height: 1.33;
}


.btn.white{
  color:#141414;
  background-color: #FFFFFF;
  border-color: #FFFFFF;
}

.btn.dark{
  color:#FFFFFF;
  background-color: #141414;
  border-color: #141414;
}

.btn-outline{
  background-color: transparent!important;
  border: 2px solid;
}


.btn-outline.white{
  color:#FFFFFF!important;
}

.btn-outline.dark{
  color:#141414!important;
}

.btn.btn-outline:hover,
.btn.btn-outline:focus {
color:#141414;
}


.btn:hover,
.btn:focus {
  color:#FFFFFF;
  text-decoration: none;
  background-color: #141414;
  border-color: #141414
}


/* BUTTON SYLES */
.btn.solidhoverWhite:hover{
  background-color: #FFFFFF!important;
  color:#141414!important;
  border-color: #FFFFFF!important
}

.btn.solidhoverDark:hover{
  background-color: #141414!important;
  color:#FFFFFF!important;
  border-color: #141414!important
}

.btn.solidhoverTint:hover{
  color:#FFFFFF!important;
}


/* BACKGROUNDS */

.tintBackground,
.darkBackground,
.stonebackground,
.trianglebackground,
.citybackground,
.citybackgroundbw
{
  position: relative;
}


.stonebackground:before,
.trianglebackground:before,
.citybackground:before,
.citybackgroundbw:before{
  content: " ";
  background-size: cover;
  background-position:center; 
  top: 0;
  left: 0;
  bottom: 0;
  right:0;
  opacity: 0.1;
  -moz-opacity: 0.1;
  position: absolute;
  height: 100%;
  width:100%;
  display: block;
}

.tintBackground:before,
.darkBackground:before{
  opacity: 0.1;
}


.trianglebackground:before{
  background-image: url(http://placehold.it/1680x900);
}


.citybackgroundbw:before{
  background-image: url(http://placehold.it/1680x900);
}

.citybackground:before{
  background-image: url(http://placehold.it/1680x900);
  opacity: 0.3;
}


.stonebackground .container,
.trianglebackground .container,
.citybackground .container{
  position: relative;
}


.custombackgroundoverlay{
  z-index: 1;
  position: relative;
}

.video_background {
  position: absolute;
  bottom: 0px;
  right: 0px;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  overflow: hidden;
}




/* ==========================================================================
  SQUARE ROTATION 45DEG
========================================================================== */

.kubo{
  display:inline-table;
  position: relative;
  text-align: center;
  z-index: 1;
}

.kubo:after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
  height:70%;
  margin-left: -35%;
  margin-top: -35%;
  z-index: -1;
  transform:rotate(45deg);
  -ms-transform:rotate(45deg); /* IE 9 */
  -webkit-transform:rotate(45deg); /* Opera, Chrome, and Safari */
}

.kubo > div:nth-of-type(1) {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
}


.kubo.dark:after{
  background-color: #141414;
}
.kubo.grey:after{
  background-color: #c9c9c9;
}

/* FLIP (to make a card flip animation) */
.flip-container { text-align: center;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;
  display: inline-block;
  position: relative;
}

.flipper {
  position: relative;
  -moz-transform: perspective(1000px);
  -moz-transform-style: preserve-3d;
}

.front, .back {
  position: absolute;
  top: 0;
  left: 0;

  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;

  -webkit-transition: 0.6s;
  -webkit-transform-style: preserve-3d;

  -moz-transition: 0.6s;
  -moz-transform-style: preserve-3d;

  -o-transition: 0.6s;
  -o-transform-style: preserve-3d;

  -ms-transition: 0.6s;
  -ms-transform-style: preserve-3d;

  transition: 0.6s;
  transform-style: preserve-3d;
}

.back {
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -o-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}

.flip-container:hover .back, .flip-container.hover .back {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

.flip-container:hover .front, .flip-container.hover .front {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.front {
  z-index: 2;
}




/* ==========================================================================
  SOCIAL ICONS
========================================================================== */

.social li{
  display: inline-block;
}

.social li .kubo, .social li .flip-container{
  width:47px;
  height:47px;
}

.social li .kubo a{
  color: #FFFFFF;
  text-decoration: none;
  font-size: 1.2rem;
  display: block;
  width:47px;
  height: 47px;
  position: relative;
  padding:14px 0;
}

.social li .kubo:after{
  background-color: #9f9f9f
}

/* social media colors*/
.facebookTint:after{
  background-color: #3b5998!important
}

.googleTint:after{
  background-color: #dd4c39!important
}

.twitterTint:after{
  background-color: #55acee!important
}

.pinterestTint:after{
  background-color: #cb2028!important
}


/* ==========================================================================
  REVOLUTION SLIDER
========================================================================== */
.header-caption {
  font-family: 'Montserrat';
  color:#FFFFFF;
  font-weight:bold;
  letter-spacing: -2px;
  text-align: center;
  font-size: 4.375rem;
  line-height: 5.25rem;
}


#principalheader .fa-angle-down {
color: transparent;
font-size: 4.688rem;
display: inline-block;
position: relative;
text-shadow: 0 -20px transparent, 0 0px #fff;
text-decoration: none;
transition: all 0.3s;
-webkit-transition: all 0.3s;
}


#principalheader .fa-angle-down:hover{
  text-shadow: 0 0px #fff, 0 60px transparent;
  color: transparent;
}

/*IE FIX*/
.IE #principalheader .fa-angle-down{
  color:#fff;
}

#principalheader .tp-caption{
  font-family: Montserrat;
}

#principalheader .roboto{
  font-family: Roboto Slab;
  text-align: center;
}

/* ==========================================================================
  JQEasyTootip
========================================================================== */

strong.customeasytip, strong.customeasytiptint{
  border-bottom: dotted 2px;
}

.tipthemesquarecustom{
  background: #141414;
  border-style:solid;
  border-width: 1px;
  border-radius: 0px !important;
  font-size:0.938rem !important;
}

.tipthemesquarecustom,
.tipthemesquarecustom *:not(i),
.tipthemesquarecustomtint,
.tipthemesquarecustomtint *:not(i){
  color:#fff !important;
  font-size:0.938rem !important;
}

.tipthemesquarecustom:after{
  border-color: #141414;
}

.tipthemesquarecustom h1,
.tipthemesquarecustom h2,
.tipthemesquarecustom h3,
.tipthemesquarecustom h4
.tipthemesquarecustomtint h1,
.tipthemesquarecustomtint h2,
.tipthemesquarecustomtint h3,
.tipthemesquarecustomtint h4{
  font-size: 1.125rem !important;
}

*[class*="tipicon"] i{
  color: #fff;
}


.tipthemesquarecustom{
  border-color: #141414;
}
.tipopen {
  -moz-box-sizing: content-box !important;
  box-sizing: content-box !important;
}

/* ==========================================================================
  OWL SLIDER
========================================================================== */


.owl-carousel .owl-item img{
  transform-style: flat;
  -webkit-transform-style: flat;
}

.owl-theme .owl-controls{
  margin-top: 30px;
  text-align: center;
}

/* Styling Next and Prev buttons */
.owl-theme .owl-controls .owl-buttons div{
  display: inline-block;
  zoom: 1;
  display: inline;
}


.owl-theme .owl-dots .owl-dot span{
  width: 17px;
  height: 17px;
  display: block;
  cursor: pointer;
  margin-right: 15px;
  border:3px solid #41a1c4;
  border-radius: 0;
  background: none;

  transition: all 0.3s;
  transform:rotateZ(45deg);
  -webkit-transition: all 0.3s;
  -webkit-transform:rotateZ(45deg);
  -ms-transform:rotate(45deg);
}

.owl-theme .owl-dots .owl-dot span:hover{
   transform:rotateZ(135deg);
  -webkit-transform:rotate(135deg);
  -ms-transform:rotate(135deg);
}


/* ==========================================================================
  ISOTOPE FILTERS GENERAL
========================================================================== */

.isotopeFilter{
  margin-bottom: 30px;
}
.isotopeFilter a {
  font-size: 1.250rem;
}
.isotopeFilter .is-checked{
  color: #FFFFFF;
}


/* ==========================================================================
  LOADER
========================================================================== */

.nonscroll{
  overflow:hidden;
}

#windowloader{
  overflow: auto;
  top:0%;
  left: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 999999;
  display: table;
  background: #141414;
}


#windowloader > div{
  font-family: 'Montserrat' ;
  font-size: 2rem;
  color:#fff;
  position: relative;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

#windowloader > div span{
  display:inline-block;
  width: 20px;
  height: 20px ;
  margin: 0 5px;
  animation:infinite loading 1s;
  -ms-animation:infinite loading 1s;
  -webkit-animation:infinite loading 1s;
  -moz-animation:infinite loading 1s;
  transform:rotateZ(45deg);
  -ms-transform:rotate(45deg);
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
}

/*LOADER ANIMATION*/
@keyframes loading
{
  0%   {transform:rotateZ(45deg);}
  100% {transform:rotateZ(135deg);}
}
@-ms-keyframes loading
{
  0%   {-ms-transform:rotate(45deg);}
  100% {-ms-transform:rotate(135deg);}
}
@-webkit-keyframes loading
{
  0%   {-webkit-transform:rotate(45deg);}
  100% {-webkit-transform:rotate(135deg);}
}
@-o-keyframes loading
{
  0%   {-o-transform:rotate(45deg);}
  100% {-o-transform:rotate(135deg);}
}
@-moz-keyframes loading
{
  0%   {-moz-transform:rotate(45deg);}
  100% {-moz-transform:rotate(135deg);}
}

/*LOAD FINISH*/
#windowloader.loaded{
  top:-100%;
}

/* ==========================================================================
  PRINCIPAL NAV
========================================================================== */

#menucontainer{
  z-index: 1000;
  background-color:#141414;
  display:block;
  width: 100%;
  position: absolute;
  z-index:9999;
}

#menucontainer .container{
  transition:all 0.3s;
  -webkit-transition:all 0.3s;
}

.menulogo{
  float:left; margin-top: 11px;
  transition:all 0.3s;
  -webkit-transition:all 0.3s;
}

#menucontainer nav{
  text-align: right;
}
#menucontainer nav a{
  font-size: 0.938rem;
}

#menucontainer nav a:last-child:before{
  content:' ';
  border-left: 1px solid #5F5F5F;
  margin-left: -3px;
  margin-right: 16px;
}

#menucontainer nav a.select, #menucontainer nav a:hover{
  color: #FFFFFF;
}

#menucontainer.sticky {
  position: fixed !important;
  top: 0; z-index: 1000;
}


#menucontainer.sticky nav a{
  padding: 20px 9px;
}

.desktop #menucontainer.sticky .menulogo{
  height: 10px; margin-top: 5px;
  transform:scale(0.8,0.8);
  -webkit-transform:scale(0.8,0.8);
}

.desktop #menucontainer.sticky:hover nav a{
  padding: 30px 9px;
}
.desktop #menucontainer.sticky:hover .menulogo{
  margin-top: 11px;
  transform:scale(1,1);
  -webkit-transform:scale(1,1);
}

/*RESPONSIVE NAV*/
#responsivemenu {
  text-align: center;
  display: none;
  z-index: 300000;
  background: #141414;
  color: #fff;
  position: fixed;
  left: 15px;
  top:15px;
  padding: 7px 10px;
  font-size: 1.5rem;
  cursor: pointer;
}

.mobile #responsivemenu, .tablet #responsivemenu{
  display: block !important;
}

.mobile #menucontainer,
.tablet #menucontainer {
  width: 100% ;
  left: -100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  z-index: 200000;
  position: fixed;
  top:0;

  transition:all 0.5s;
  -webkit-transition:all 0.5s;
}

.mobile #menucontainer .container ,
.tablet #menucontainer .container {
  width: 70% ;
  height: 100%;
  background: #141414;
  float: left;
  padding:20px;
}

.mobile #menucontainer .logo,
.tablet #menucontainer .logo{
  text-align: center;
  display: block;
  width: 100%;
  margin-bottom: 30px;
}


.mobile #menucontainer nav,
.tablet #menucontainer nav{
  width: 100%;
  text-align:center;
}

.mobile #menucontainer nav a,
.tablet #menucontainer nav a{
  display: block !important;
  width: 100%;
  padding: 10px 0 !important;
}

.mobile #menucontainer nav a:last-child:before,
.tablet #menucontainer nav a:last-child:before{
  display: none;
}

.mobile #menucontainer.open,
.tablet #menucontainer.open{
  left: 0;
}



/* ==========================================================================
  HEADER
========================================================================== */

/*CANVAS ANIMATION*/

#shadercanvas {
  width: 100%;
  height: 100%;
  position:absolute;
  top:0;
  left:0;
}

#shadercanvas canvas{
  opacity:0.3;
  width: 100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
}

header .logo{
  position:relative;
  margin-top: 5px;
}

header h2{
  font-family: 'Roboto Slab';
  font-size:1.125rem;
  line-height:1.688rem;
  font-weight:normal;
  letter-spacing: 0px;
  margin-bottom: 140px;
}

header strong{
  color: #fff;
}

header .fa-angle-down{
  color:transparent;
  font-size: 4.688rem;
  display: inline-block;
  position:relative;
  text-shadow: 0 -20px transparent, 0 0px #fff ;
  text-decoration: none;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}

header .fa-angle-down:hover{
  text-shadow: 0 0px #fff, 0 60px transparent;
  color: transparent;
}

/*IE FIX*/
.IE header .fa-angle-down{
  color:#fff;
}


/* ==========================================================================
  ABOUT
========================================================================== */
.desktop section#about{
  margin-top: 61px;
}

#slidercontainer{
  margin-top: 40px;
}

/* ==========================================================================
  HERE ARE SOME NUMBERS
========================================================================== */

.numbercontainer{
  margin: 0 auto;
  margin-bottom: 80px
}

.number, .numbercontainer{
  width:200px;
  height: 200px;
}

.number:after{
  border:4px solid #ffffff;
}

.number span:not(.fa){
  font-family: Montserrat;
}

.number span{
  font-size: 4.063rem;
}

.back > .number:after{
  background-color: #FFFFFF;
}

#numbers a{
  color: #FFFFFF;
}

/* ==========================================================================
  SERVICES
========================================================================== */

/*SLIDER*/
#serviceSlider{
  margin-top: 142px;
}

#serviceSlider .owl-col, #serviceSlider .owl-col p{
  color:#3B3B3B;
}

#serviceSlider .owl-col h4{
  text-align: left;
  color:#141414;
}

#serviceSlider .owl-stage-outer{
  padding-bottom: 80px !important;
  z-index: 10
}


#serviceSlider .owl-stage{
  padding-top: 20px;
  counter-reset: li;
  list-style: none outside none;
}

#serviceSlider .owl-stage >li:before{
  content: counters(li, ".") " ";
  counter-increment: li ;
  display: block;
  text-align:center;
  font-style: normal;
  font-size:2.250rem;
  color: #FFFFFF;
  font-weight:bold;
  font-family: 'Montserrat' !important;
  margin-top: -22px;
}

#serviceSlider .owl-stage li .owl-col{
  margin: -23px 15px;
  padding-top:75px;
  padding-bottom: 95px;
  background: url(../img/service-background.svg) top center no-repeat;
  min-height: 550px;
}

#serviceSlider .owl-controls{
  position: absolute;
  top: -100px;
  left: 0;
  width:100%;
}

#serviceSlider .owl-dots{
  display: none;
}

#serviceSlider .owl-nav{
  margin-top: 30%;
  position: absolute;
  width: 100%
}

#serviceSlider .owl-next, #serviceSlider .owl-prev{
  position:absolute;
  background-color: transparent;
  border: 28px solid #5f5f5f;
  border-radius: 0;
  height: 0px;
  width:0px;
  margin:0;
  padding:0;
  transition: border 0.3s;
  -webkit-transition: border 0.3s;
}

#serviceSlider .owl-controls .owl-prev,
#serviceSlider .owl-controls .owl-next{
  position:absolute;
  border-top-color:transparent;
  border-bottom-color:transparent;
}

#serviceSlider .owl-controls .owl-prev{
  border-left-color:transparent;
  left:-140px;
}

#serviceSlider .owl-controls .owl-next{
  border-right-color:transparent;
  right:-140px;
}

/*BUTONS*/
.servicebutton{
  width:114px;
  height: 114px;
  position: absolute;
  margin-left:-57px;
  bottom: -80px;
  left:50%;
}

.servicebutton:after{
  transition: all 0.5s ease 0s;
  -webkit-transition: all 0.5s ease 0s;
}

.servicebutton a{
  background-color:transparent!important;
  border: none;
}

.servicebutton:hover:after{
  background-color: #333333!important;
  transform: rotateZ(-135deg);
  -webkit-transform: rotateZ(-135deg);
}


/* ==========================================================================
  TEAM
========================================================================== */

#isotopeMembers{
  clear: both;
}

#memberfilter .is-checked{
  color:#FFFFFF;
}

#team .member{
  margin-top: 30px;
  overflow: hidden;
}

#team .member img:first-child{
  width: 100%;
  margin-bottom:100px;
  transition:all 0.3s;
  transition-timing-function: ease-in-out;
  -webkit-transition:all 0.3s;
  -webkit-transition-timing-function: ease-in-out;
}

/*INFO CONTENT*/
#team .member .info{
  margin:0 15px;
  padding: 25px 28px;
  background-color: #FFFFFF;
  position: absolute;
  top:100%;
  margin-top: -100px;
  left:0;
  height:100%;
  transition:all 0.3s;
  transition-timing-function: ease-in-out;
  -webkit-transition:all 0.3s;
  -webkit-transition-timing-function: ease-in-out;
}

#team .member .info .name{
  font-family: 'Montserrat';
  font-weight:bold;
  font-size: 1.250rem;
  letter-spacing:-1px;
  text-transform:uppercase;
}

#team .member .info .ocupation{
  font-family: 'Montserrat';
  font-weight:bold;
  font-size: 1rem;
  margin-bottom: 32px;
}

#team .member .info p{
  color:#141414;
  line-height: 1.563rem;
}

#team .member .info .social{
  position: absolute;
  bottom:25px;
}

#team .member:hover .info{
  top:0;
  margin-top: 0px;
}

#team .member:hover img:first-child{
  margin-top:-30px;
  margin-bottom: 130px;
}

#memberfilter{
  margin-bottom: 0px;
}

#memberfilter a:hover{
  color: #FFFFFF!important;
}



/* ==========================================================================
  WORK
========================================================================== */

#work.paddingstandard{ padding-bottom: 0px;}

/*imac carrusel*/
#imac-work{
  margin-top: 80px !important;
  margin-bottom: 80px !important;
  position: relative;
}

#imac-work .item > img,
#imac-work > img{
  width: 100%;
}

#imac-work #containerSlider{
  position: absolute;
  top: 0;
  left:0px;
  width: 100%;
  z-index:10;
  padding: 13px 26px;
}

/* ---- isotope grid---- */
#portfoliogrid .item {
  width: 20%;
  float: left;
  cursor: pointer;
  overflow: hidden;
  padding-bottom: 0%;
}

#portfoliogrid .item.width2 {
  width: 40%;
}

#portfoliogrid img{
  width:100%
}


/* Item rollover */
#work .item .rollover{
  position: absolute;
  width: 100%;
  height:100%;
  top:0;
  left:0;
  bottom:0;
  right:0;
  padding:15px;
  text-align: center;
}

#work .item .rollover:before{
  content:"";
  position: absolute;
  height:50%;
  width: 50%;
  left:25%;
  top:26%;
  opacity:0;
  margin-top: 40px;

  transition:all 0.3s 0.5s, opacity 0.3s 0.8s, margin-top 0.3s 0.8s;
  transform: rotateZ(-45deg);
  -webkit-transition:all 0.3s 0.5s, opacity 0.3s 0.8s, margin-top 0.3s 0.8s;
  -webkit-transform: rotateZ(-45deg);
}

#work .item.width2 .rollover:before{
  width: 25%;
  left:38%;
}

#work .item .rollover .centerContainer{
  opacity: 0;
  height: 100%;
  transition:all 0.3s 0.1s;
  transform: rotateZ(-5deg);
  -webkit-transition:all 0.3s 0.1s;
  -webkit-transform: rotateZ(-5deg);
}

#work .item .rollover .centerContainer a{
  font-family: "Montserrat";
  font-size: 1.250rem;
  font-weight: bold;
  letter-spacing: -2px;
  color:#FFFFFF;
  display: block;
  text-transform:uppercase;
  text-decoration: none!important;
}

#work .item .rollover .centerContainer .title{
  font-size: 2.8rem;
  line-height: 2.8rem;
  margin-bottom: 15px;
}

#work .item:hover .rollover:before,
#work .portfolioActive .rollover:before{
  width:100%!important;
  height: 100%!important;
  top:0!important;
  left:0!important;
  opacity:1;
  margin-top: 0px;

  transition:all 0.3s 0.4s , opacity 0.2s 0.1s, margin-top 0.3s 0.1s;
  transform: rotateZ(0deg);
  -webkit-transition:all 0.3s 0.4s , opacity 0.2s 0.1s, margin-top 0.3s 0.1s;
  -webkit-transform: rotateZ(0deg);
}

#work .item:hover .centerContainer,
#work .portfolioActive .centerContainer{
  opacity: 1;
  transition:all 0.3s 0.6s;
  transform: rotateZ(0deg);
  -webkit-transition:all 0.3s 0.6s;
  -webkit-transform: rotateZ(0deg);
}


/* WORK OPEN ANIMATION */
@keyframes turn {
  0% {
    transform: rotate(45deg);
  }
  15% {
      transform: rotate(135deg);
  }
  25% {
      transform: rotate(135deg);
  }
  40% {
      transform: rotate(225deg);
  }
  50% {
      transform: rotate(225deg);
  }
  65% {
      transform: rotate(315deg);
  }
  75% {
      transform: rotate(315deg);
  }
  90% {
      transform: rotate(405deg);
  }
  100% {
      transform: rotate(405deg);
  }
}

#workLoader{
  position: absolute;
  z-index:10000;
  -webkit-transition:all 0.8s;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
}

#workLoader .iconloader{
  position: relative;
  z-index: 20;
  display: block;
  margin: 0 auto;
  width:30px;
  height: 100%;
  width: 100%;
}

#workLoader .iconloader:after{
  content: "";
  width:50%;
  height:50%;
  position: absolute;
  top:25%;
  left:25%;
  border: 4px solid #FFFFFF;

  transform: rotateZ(45deg);
  animation: turn 4s cubic-bezier(0.86, 0, 0.07, 1) infinite;
  -webkit-transform: rotateZ(45deg);
  -webkit-animation: turn 4s cubic-bezier(0.86, 0, 0.07, 1) infinite;
  -ms-transform: rotate(45deg);
}

#workLoader.width2 .iconloader:after{
  width:25%;
  left:38%;
}


#workLoader .front, #workLoader .back{
  height:100%;
  width:100%;
  position: absolute;
  top:0;
  left:0;
  overflow: hidden;

  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

#workLoader .front{
  text-align: center;
}

#workLoader .front img{
  width: 100%;
  opacity:0.2;
}

#workLoader .back{
  background-color: rgba(20,20,20,.95);
  transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg);
}

#workLoader .back #wrkclosebtn{
  position: fixed;
  top: 10px;
  right: 20px;
}

#workLoader .back .fa-times{
  font-size: 2rem;
  cursor: pointer;
  color:#5f5f5f
}

#workLoader .back .fa-times:hover{
  color:#FFFFFF
}

.scale100{
  width:100%!important;
  height: 100%!important;
  left:0!important;
  transform: perspective(1000px) rotateX(-180deg);
  -webkit-transform: perspective(1000px) rotateX(-180deg);
}

#workdetailcontainer.darkBackground{
  padding-top: 40px;
}


/* FIX IE 9/10/11 */
.IE #workLoader{
  transition:all .8s!important;
  transform:none;
}

.IE #workLoader .front, .IE #workLoader .back {
  transition:all .8s!important;
}

.IE #workLoader .back {
  transform: perspective(1000px) rotateX(180deg)!important;
}

.IE #wrkclosebtn{
  display: none;
}

.IE .scale100 #wrkclosebtn{
  display: inline;
}

.IE .scale100{
  transition: none!important;
  transform: rotateX(0deg)!important;
}

.IE #workLoader.scale100 .back{
  transform: perspective(1000px) rotateX(0deg)!important;
  z-index: 10;
}

.IE #workLoader.scale100 .front{
  transform: perspective(1000px) rotateX(-180deg)!important;
}

.IE9 #workLoader {
  background-color: green; opacity: 0;
}


/* ==========================================================================
  WORK DETAILS
========================================================================== */

#workdetail{
  padding: 40px 0;
}

#workdetail h1{
  color:#FFFFFF;
  line-height: 4rem;
  margin-bottom: 35px;
  margin-top:0px;
  font-size: 4rem;
  text-align: left;
}

#workdetail #detailImg img{
  width: 100%;
}

#workdetail .workDouble #detailImg{
  margin-bottom: 35px;
}

#workdetail p, #workdetail #details span{
  color:#FFFFFF;
}

#workdetail #details{
  margin-bottom: 35px;
  font-size: 0.9rem;
}

#workdetail #details span{
  font-family: 'Montserrat';
}

#workdetail #details li{
  color: #CCC;
  margin-bottom: 5px;
}


#workdetail .button.tint:hover{
  color:#141414;
  background-color: #FFFFFF;
}


/* ==========================================================================
  PROCESS
========================================================================== */


#process .number{
  margin-bottom: 35px;
}

#process .number:after{
  border-style:none;
  background-color: #fcfcfc;
  transition: all 0.3s;
}

#process div[class^='col-']:hover .number:after{
  border-width:6px;
}

#process div[class^='col-']:hover .number span{
  color: #FFFFFF;
}

.first .number:after, .second .number:after, .third .number:after, .fourth .number:after{
  border-bottom-style:solid!important;
}

.second .number:after, .third .number:after, .fourth .number:after{
  border-left-style:solid!important;
}

.third .number:after, .fourth .number:after{
  border-top-style:solid!important;
}

.fourth .number:after{
  border-right-style:solid!important;
}

#process div[class^='col-'].first,
#process div[class^='col-'].second,
#process div[class^='col-'].third,
#process div[class^='col-'].fourth{
  transition: all 0.6s;
  transform:rotateY(90deg);
  -webkit-transition: all 0.6s;
  -webkit-transform:rotateY(90deg);
}

/* IE 9 fix */
.IE9 #process div[class^='col-'].first,
.IE9 #process div[class^='col-'].second,
.IE9 #process div[class^='col-'].third,
.IE9 #process div[class^='col-'].fourth{
  opacity: 0;
}

.IE9  #process div[class^='col-'].rotatenone{
  opacity: 1;
}

/* ----- */

#process div[class^='col-'].rotatenone{
  transform:rotateY(0deg);
  -webkit-transform:rotateY(0deg);
}

/* STARTCONTAINER */
#startContainer{
  position: absolute;
  width: 100%;
  left:0;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}

#startContainer.second .number:after{
  transform:rotateZ(135deg);
  -webkit-transform:rotateZ(135deg);
  -ms-transform:rotate(135deg); /* IE 9*/
  border-style:none!important;
  border-bottom-style:solid!important;
  border-right-style:solid!important;
}

#startContainer.third .number:after{
  transform:rotateZ(225deg);
  -webkit-transform:rotateZ(225deg);
  -ms-transform:rotate(225deg); /* IE 9*/
  border-top-style:solid!important;
}

#startContainer.fourth .number:after{
  transform:rotateZ(315deg);
  -webkit-transform:rotateZ(315deg);
  -ms-transform:rotate(315deg); /* IE 9*/
  border-style:solid!important;
}



/* ==========================================================================
  TESTIMONIALS
========================================================================== */

.testimonial{
  width:100%;
}

.testimonial .name, #testimonials .occupation,
.testimonial p{
  text-align: center;
  color: #FFFFFF;
}

.testimonial p{
  font-size:2.6rem;
  line-height:3rem;
  font-style: italic;
  margin-bottom: 60px;
}

.testimonial p:before{
  content: '“';
  font-size: 3rem;
  margin-right: 11px;
}

.testimonial p:after{
  content: '”';
  font-size: 3rem;
  margin-left: 3px;
}

.testimonial .name{
  font-size:1.4rem;
  font-family: 'Montserrat';
  text-transform: uppercase;
}

.testimonial .occupation{
  font-size:0.9rem;
  font-family: 'Montserrat';
}


/* Styling olw Dots */
#testimonialslider .owl-dot.active span,
#testimonialslider .owl-dot span:hover{
  background-color: #FFFFFF;
}

#testimonialslider .owl-dot span{
  border-color:#FFFFFF;
}


#testimonials .owl-controls{
  margin-top: 60px;
}



/* ==========================================================================
  VIDEO HTML
========================================================================== */

#videohtml5{
  width: 100%;
  height: 85%;
}

#vjs-test-fluid-intrinsic-ratio{
  background-color: transparent;
  cursor: pointer;
  width: 100%  !important;
  height: 100% !important;
}

#videohtml5 *{
  color:#FFFFFF!important;
}


.vjs-container-intrinsic-ratio {
  position: relative;
  height: 100%;
}

.vjs-container-intrinsic-ratio .video-js {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.vjs-container-static {
  height: 500px;
}


.vjs-default-skin .vjs-big-play-button {
  color:#fff;
  border: 4px solid #FFFFFF;
  margin: 0;
  width: 136px;
  height: 136px;
  left: 50%;
  margin-left: -73px;
  top: 35%;
  margin-top: 0;
  background-color:transparent;

  /* border-radius */
  -webkit-border-radius: 0em;
  -moz-border-radius: 0em;
  border-radius: 0em;
  /* box-shadow */
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;

  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;

}

.vjs-default-skin:hover .vjs-big-play-button,
.vjs-default-skin .vjs-big-play-button:focus {
  outline: 0;
  /* box-shadow */
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  /* transition */
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transform:  rotateZ(135deg);
  transform:  rotateZ(135deg);
}

.vjs-default-skin:hover .vjs-big-play-button:before{
  -webkit-transform: rotateZ(-90deg);
  -moz-transform: rotateZ(-90deg);
  -o-transform: rotateZ(-90deg);
  transform: rotateZ(-90deg);
}


.vjs-default-skin .vjs-big-play-button:before {
  content: "";
  border: 20px solid #FFFFFF;
  border-left-color: transparent;
  border-bottom-color:transparent;
  line-height: 0em;
  text-shadow: 0em 0em 0em #000;
  position: absolute;
  left: 35%;
  top: 36%;
  width: 0;
  height: 0;

  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
}



.vjs-default-skin:hover .vjs-big-play-button:before,
.vjs-default-skin .vjs-big-play-button:focus .vjs-big-play-button:before {
  text-shadow: none;
}

.vjs-default-skin .vjs-play-progress,
.vjs-default-skin .vjs-volume-level{
 background: none
}

.vjs-default-skin .vjs-control-bar,
.vjs-default-skin .vjs-menu{
  background-color: rgba(20,20,20,0.8);
}


/* ==========================================================================
  CLIENTS
========================================================================== */

#clients .clientscontainer{
  text-align: center;
  padding: 0 15px;
  margin-top: 110px;
}

#clients .client.vertical{
  display: inline-block;
  height:201px;
  width:201px;
  padding: 30px;
  margin:-98px 5px 0;
}

#clients .client a{
  width:141px;
  height:141px;
  display: table-cell;
  vertical-align: middle;
  border:4px solid #262626;

  transition: all 1s;
  transform:rotateZ(45deg);
  -webkit-transition: all 1s;
  -webkit-transform:rotateZ(45deg);
  -ms-transform:rotate(45deg);
  -webkit-background-color:blue;
}

html:not(.cssfilters) #clients .client a{
  background-color: #FFFFFF;
}


#clients .client img{
  transition: all 1s;
  transform:rotateZ(-45deg);
  -webkit-transition: all 1s;
  -webkit-filter: grayscale(100%) contrast(0.2) brightness(.9);
  -webkit-transform:rotateZ(-45deg);
  -ms-transform:rotate(-45deg);
}

#clients .client canvas{
  position: absolute;
}

#clients .client a:hover img{
  -webkit-filter: grayscale(0%) contrast(1) brightness(1);
}

#clients .client a:hover{
  border-color: #FFFFFF;
  background-color: #FFFFFF;
}

/* Landscape phones and down */
@media (max-width: 995px) {
  #clients .client,
  #clients .clientscontainer{
    margin-top: 0px!important;
  }
}

/* Landscape phones and down */
@media (max-width: 480px) {
  #clients .client{
    display: block;
    margin: 0 auto;
  }
}



/* ==========================================================================
  CONTACT
========================================================================== */

#contact h5{
  font-weight: bold;
  font-size: 1.563rem;
  line-height: 2rem;
  text-align: left;
  margin:0 0 25px 0;
}

#contact .social{
  margin-bottom: 20px;
}



/* ==========================================================================
  MAP
========================================================================== */

#gmap{
  width:100%;
  height:350px;
}




/* ==========================================================================
  BLOG
========================================================================== */

#blog{
  background-color:#363636;
}

#blogfilter a:hover{
  color:#FFFFFF;
}

#blogsearchcontainer{
  float:left;
  margin:0;
  padding-top: 15px;
}

#blogsearch{
  color:#8f8f8f;
  background: none;
  text-align: right;
  margin:0;
}


#blog footer, #articledetail footer{
  background-color: #141414;
}

#articledetail #articlecontent{
  padding-top:130px;
}

#blog footer p,
#articledetail footer p,
#blog footer a:hover,
#articledetail footer a:hover{
  color: #FFFFFF
}

#blog h2{
  line-height: 0;
  font-size: 0;
  text-align: left;
  margin: 0px;
}

#blog .article{
  position: relative;
  margin-bottom: 30px;
}

#blog .article .title{
  height:100%;
  width: 100%;
}

#blog .article .title a{
  display:block;
  font-size: 1.463rem;
  line-height: 1.875rem;
  text-transform: uppercase;
  margin-bottom: 20px;
  color:#141414;
  text-align: left;
}

#blog .imgcontainer{
  overflow: hidden;
}

#blog .imgcontainer img{
  cursor: pointer;
  width: 100%;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}

#blog .article .info{
  background: #fff;
}

#blog .article .info .excerpt{
  font-size: 0.875rem;
  line-height: 1.438rem;
  margin-bottom: 20px;
}

#blog .article .info .date{
  font-size: 0.750rem;
}

#blog .article:hover img{
  -ms-transform: scale(1.2,1.2) rotate(2deg); /* IE 9 */
  -webkit-transform: scale(1.2,1.2) rotate(2deg); /* Chrome, Safari, Opera */
  transform: scale(1.2,1.2) rotate(2deg);
}


/* ==========================================================================
  BLOG DETAIL
========================================================================== */

#articledetail h1,
#articledetail h5 {
  color:#141414;
  font-size: 3.125rem;
  line-height: 3.1rem;
  text-transform: uppercase;
  font-weight: bold;
  margin:0;
  margin-bottom: 30px;
}

#articledetail h5 {
  font-size: 1.563rem;
  line-height: 1.563rem;
}


#articledetail .info {
  font-size: 0.9rem;
  color: #848484;
  margin-bottom: 30px;
}

#articledetail .info adress a{
  color:#141414;
}

#articlecontent{
  margin-top: 25%;
  padding-top: 50px;
  background-color: #FFFFFF;
  position: relative;
}

.author{
  display: inline;
}



#articledetail .imgContainer{
  overflow: hidden;
  width: 100%;
  top:0;
  height: 70%;
  position: fixed;
  display: block;
}

#articledetail .imgContainer img{
  width: 100%;
}

.mobile #articledetail .imgContainer,
.tablet #articledetail .imgContainer{
  margin-top: 0;
}

#comments{
  margin-bottom: 90px;
}


.comment .avatar{
  float: left;
  margin-right: 37px;
}

.comment .commentinfo{
  margin-bottom: 15px;
  position:relative;
}

.comment .commentinfo div {
  display:inline;
  font-family: 'Montserrat';
  font-size: 1.125rem;
}

.comment .buttons a{
  font-family: 'Montserrat';
  font-size: 1rem!important;
  text-decoration:none!important;
}

.comment .buttons{
  float: right;
}

.comment .replies{
  padding-left: 60px;
}

.comment .replies .comment{
  margin-top: 90px;
}


.admincomment .avatar{
  border-width: 4px;
  border-style: solid;
}

.admincomment .adminMarker:after{
  content:"";
  width:10px;
  height: 10px;
  display:inline-block!important;
  margin:6px 0 0 8px;
  position: absolute;
  transform:rotateZ(-45deg);
  -webkit-transform:rotateZ(-45deg);
  -ms-transform:rotate(-45deg);
}

#authordetails{
  line-height: 27px;
}

#authordetails h5{
  display: block;
}

#authordetails .author{
  padding-right: 8px;
  display: inline;
}

#authordetails p{
  display: inline;
}

#authordetails .social{
  margin:27px 0 20px 0;
  display: block;
}


#blogcontactform span{
  position: absolute;
  color: #d9d9d9;
  width: 25px;
  height: 25px;
  z-index: 100;
  display: inline-block;
  right: 25px;
  padding: 23px;
  text-align: center;
}

#blogcontactform span[class*='fa-comments']{
  right:25px;
  margin-left: -60px;
  color:#fff;
}


#articledetail #sharepost{
  padding-top: 60px;
  text-align: center;
  float: right;
}

#articledetail #sharepost span{
  color:#9f9f9f;
  font-family: 'Montserrat';
  font-size:1.250rem;
  font-weight: bold;
  text-transform: uppercase;
  display: block;
  margin-bottom: 20px;
}


#articledetail .autorsocial:after{
  content: '';
  display: block;
  position: relative;
  clear: both;
}


/* ==========================================================================
  WHATE WE DO
========================================================================== */
#whatwedo .btn-toolbar{
  margin-bottom: 25px;
}

#whatwedo{
  background-image: url('../img/fond-savoure.jpg');
  background-size: cover;
  background-repeat: repeat;
  background-position: center center;
  background-attachment: fixed;
}


#whatwedo p, #whatwedo h4{
  color: #FFFFFF;
}
/* ==========================================================================
  SERVICES 2 (One by one)
========================================================================== */

#services2 .kubo{
  width:120px;
  height:120px;
}

#services2 .kubo:after{
  border: 2.4px solid #FFFFFF;
}

#services2 .kubo span{
  font-size: 2rem;
}

#services2 .clearfix{
  margin-bottom: 25px;
}

/* ==========================================================================
  FULLWIDTH DEVICES SECTION (responsivebest)
========================================================================== */
#responsivebest h3{
  margin-bottom: 30px;
}

#deviceContainer{
  position: relative;
  margin-top: 50px;
}
#deviceContainer .col-md-4{
  position: absolute;
  left: 0;
  bottom: 0;
}

#deviceContainer .col-md-2{
  position: absolute;
  right: 0;
  bottom: 0;
}



/* ==========================================================================
  PRICES
========================================================================== */
.kubo.price.grey{
  width: 160px;
  height: 160px;
  margin-bottom: 30px;
  margin-top: 15px;
}

.kubo.price.dark:after{
  background-color: #141414;
}

.kubo.price.tint{
  width: 180px;
  height: 180px;
  margin-bottom: 25px;
}

.kubo.price span{
  font-size: 3rem;
  font-family: Montserrat;
}

#priceContainer h4{
  margin-top: 25px;
  margin-bottom: 35px;
  color:#c9c9c9;
}

#priceContainer>li{
  background-color: #FFFFFF;
}

#priceContainer>li:nth-child(even){
  border-left: none;
  border-right: none;
}

#priceContainer .details{
  margin-bottom: 35px;
}

#priceContainer .details li{
  padding: 14px 0;
  border-top: 1px solid #dbdbdb;
  font-size: 0.9rem;
  color:#999;
}

#priceContainer .details li:last-child{
  border-bottom: 1px solid #dbdbdb
}




/* ==========================================================================
  FOTTER
========================================================================== */

footer p{
  padding-top: 33px;
  font-family: 'Montserrat';
}



/* ==========================================================================
  BOOTSTRAP STYLES
========================================================================== */
.text-left{
  text-align: left!important;
}

.text-right{
  text-align: right!important;
}

.text-center{
  text-align: center!important;
}



/* ==========================================================================
  COLORS
========================================================================== */

/* GENERAL COLORS */
.tintBackground h1,
.tintBackground h2,
.tintBackground h3,
.tintBackground h4,
.tintBackground h5,
.tintBackground h6,
.tintBackground p,
.darkBackground h1,
.darkBackground h2,
.darkBackground h3,
.darkBackground h4,
.darkBackground h5,
.darkBackground h6,
.darkBackground p
{
  color:#FFFFFF;
}



.tint span,
.kubo span{
 color:white;
}


/* TINT COLORS */
.tintBackground,
.button,
.tint.kubo:after,
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span,
.vjs-default-skin .vjs-play-progress,
.vjs-default-skin .vjs-volume-level,
.vjs-default-skin:hover .vjs-big-play-button,
.vjs-default-skin .vjs-big-play-button:focus,
.vjs-default-skin:hover .vjs-big-play-button,
.vjs-default-skin .vjs-big-play-button:focus,
#work .item .rollover:before,
#workLoader .front,
.tipthemesquarecustomtint,
.admincomment .adminMarker:after,
#windowloader > div span,
#process div[class^='col-']:hover .number:after,
.btn,
.btn.solidhoverTint:hover
{
    background-color: #da1b42;
}

.vjs-default-skin:hover .vjs-big-play-button,
.vjs-default-skin .vjs-big-play-button:focus,
.owl-theme .owl-dots .owl-dot span,
.tipthemesquarecustomtint, .tipthemesquarecustomtint:before,
html:not(.cssfilters) #clients .client a:hover,
.admincomment .avatar,
blockquote, blockquote.tint,
#process .number:after,
.btn,
.btn.solidhoverTint:hover
{
  border-color: #c44741;
}

a,
#contact h5,
.squareList li:before,
.iconlist span,
.back > .number span,
.isotopeFilter a:hover,
.member .info .ocupation,
#portfolionav .is-checked,
.admincomment .adminMarker,
blockquote.tint,
#process .number span, #process h5,
#blog .article:hover a,
.btn.btn-outline,
#priceContainer h4.tint
{
 color: #da1b42;;
}

#serviceSlider .owl-next:hover{
  border-left-color: #c44741;
}
#serviceSlider .owl-prev:hover {
  border-right-color: #c44741;
}





/* ==========================================================================
  RESPONSIVE
========================================================================== */

/* HEADER SPECIAL QUERIES */
@media only screen and (max-height: 800px) {
  header .logo{
    margin-bottom: 40px;
  }
  header h2{
    margin-bottom: 40px;
  }
}

/* SERVICESLIDER SPECIAL QUERIES */
@media only screen and (min-width: 1400px) and (max-width: 1510px) {
  #serviceSlider .owl-controls .owl-prev{
    left:-120px;
  }

  #serviceSlider .owl-controls .owl-next{
    right:-120px;
  }
}
@media only screen and (min-width: 1343px) and (max-width: 1400px) {
  #serviceSlider .owl-controls .owl-prev{
    left:-90px;
  }

  #serviceSlider .owl-controls .owl-next{
    right:-90px;
  }
}

@media only screen and (max-width: 1343px) {
  #serviceSlider .owl-dots{
    display: inline;
  }

  #serviceSlider .owl-nav{
    display: none;
  }
}



/* Landscape phones and down */



  header .logo{
    margin-bottom: 30px;
  }

  header h1, #workdetail h1{
    font-size: 3rem;
    line-height: 3.1rem;
    margin-bottom: 30px;
  }


  /*responsive nav*/

  #menucontainer.sticky .menulogo{
    margin-top: 11px !important;
    height: auto !important;
    transform:scale(1,1)!important;
    -webkit-transform:scale(1,1)!important;
  }

  #responsivemenu{
    display: block !important;
  }

  #menucontainer{
    width: 100% ;
    left: -100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 200000;
    position: fixed;
    top:0;

    transition:all 0.5s;
    -webkit-transition:all 0.5s;
  }

  #menucontainer .container{
    width: 70% ;
    height: 100%;
    background: #141414;
    float: left;
    padding:20px;
  }

  #menucontainer .logo{
    text-align: center;
    display: block;
    width: 100%;
    margin-bottom: 30px;
  }


  #menucontainer nav{
    width: 100%;
    text-align:center;
  }

  #menucontainer nav a{
    display: block !important;
    width: 100%;
    padding: 10px 0 !important;
  }

  #menucontainer nav a:last-child:before{
    display: none;
  }

  #menucontainer.open{
    left: 0;
  }


  #articledetail h1{
    font-size:2.4rem!important;
    line-height: 2.6rem;
    margin-bottom: 30px;
  }

  #articledetail .imgContainer{
    margin-top: 0px;
  }

  #articledetail #articlecontent{
    padding-top:50px;
  }

  h2{
    font-size: 3rem;
    line-height:3rem;
    margin-bottom: 50px;
  }


  .paddingstandardTop{
    padding-top:75px;
  }
  .paddingstandardBottom{
    padding-bottom:75px;
  }


  #numbers .numbercontainer{
    margin-bottom: 20px;
  }

  #numbers .col-md-3{
    margin-bottom: 20px;
  }

  #memberfilter, #blogfilter{
    text-align: center;
  }

  #portfoliogrid .item {
    width: 50%;
  }

  #portfoliogrid .item.width2{
    width: 100%!important;
  }

  .isotopeFilter a{
    padding: 5px 9px;
  }


  .testimonial p{
    font-size:1.625rem;
  line-height:2rem;
  font-style: italic;
  margin-bottom: 30px;
  }

  .testimonial p:before{
    content: '“';
    font-size: 2.750rem;
    margin-right: 11px;
  }

  .testimonial p:after{
    content: '”';
    font-size: 2.750rem;
    margin-left: 3px;
  }

  .testimonial .name{
    font-size:1rem;
    font-family: 'Montserrat';
    text-transform: uppercase;
  }

  .testimonial .occupation{
    font-size:0.8rem
  }


  .commentinfo .auth{
    display: block!important;
  }

  .commentinfo .buttons{
    float: none;
  }
}


@media (max-width: 940px) {
  #articledetail .imgContainer{
    height: auto;
    position: relative;
  }

  #articledetail #articlecontent{
    margin-top: 0px;
  }
}


/* PORTFOLIO */
@media (min-width: 768px) and (max-width: 940px) {
  #portfoliogrid .item {
    width: 50%;
  }

  #portfoliogrid .item.width2{
    width: 100%!important;
  }
}

@media (min-width: 940px) and (max-width: 1024px) {
  #portfoliogrid .item {
    width: 33%;
  }

  #portfoliogrid .item.width2{
    width: 66%!important;
  }
}


@media (min-width: 1025px) and (max-width: 1200px) {
  #work .item .rollover .centerContainer a{
    font-size: 1rem;
    letter-spacing: -0px;
  }

  #work .item .rollover .centerContainer .title{
    font-size: 1.5rem;
    line-height: 1.8rem;
    margin-bottom: 12px;
  }
}

@media (min-width: 1201px) and (max-width: 1500px) {
  #work .item .rollover .centerContainer a{
    font-size: 1rem;
    letter-spacing: -0px;
  }

  #work .item .rollover .centerContainer .title{
    font-size: 1.8rem;
    line-height: 1.8rem;
    margin-bottom: 12px;
  }
}

/*  TEAM */
@media (min-width: 992px) and (max-width: 1199px) {
  #team .member{
    width: 33%;
  }
}


@media (min-width: 768px) and (max-width: 991px) {
  #menucontainer .container{
    width: 100%;
  }
}