@font-face {
  font-family: 'helveticabold';
  src: url('../fonts/helvetica-bold-webfont.woff2') format('woff2'),
       url('../fonts/helvetica-bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'robotobold';
  src: url('../fonts/roboto-bold-webfont.woff2') format('woff2'),
       url('../fonts/roboto-bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'helveticaregular';
  src: url('../fonts/helvetica-webfont.woff2') format('woff2'),
       url('../fonts/helvetica-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'AvenirNextProBold';
  src: url('../fonts/AvenirNextLTPro-Bold.eot');
  src: url('../fonts/AvenirNextLTPro-Bold.eot?#iefix') format('embedded-opentype'),
      url('../fonts/AvenirNextLTPro-Bold.woff2') format('woff2'),
      url('../fonts/AvenirNextLTPro-Bold.woff') format('woff'),
      url('../fonts/AvenirNextLTPro-Bold.ttf') format('truetype'),
      url('../fonts/AvenirNextLTPro-Bold.svg#AvenirNextLTPro-Bold') format('svg');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'AvenirNextProIt';
  src: url('../fonts/AvenirNextLTPro-It.eot');
  src: url('../fonts/AvenirNextLTPro-It.eot?#iefix') format('embedded-opentype'),
      url('../fonts/AvenirNextLTPro-It.woff2') format('woff2'),
      url('../fonts/AvenirNextLTPro-It.woff') format('woff'),
      url('../fonts/AvenirNextLTPro-It.ttf') format('truetype'),
      url('../fonts/AvenirNextLTPro-It.svg#AvenirNextLTPro-It') format('svg');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'AvenirNextProReg';
  src: url('../fonts/AvenirNextLTPro-Regular.eot');
  src: url('../fonts/AvenirNextLTPro-Regular.eot?#iefix') format('embedded-opentype'),
      url('../fonts/AvenirNextLTPro-Regular.woff2') format('woff2'),
      url('../fonts/AvenirNextLTPro-Regular.woff') format('woff'),
      url('../fonts/AvenirNextLTPro-Regular.ttf') format('truetype'),
      url('../fonts/AvenirNextLTPro-Regular.svg#AvenirNextLTPro-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


  .page-footer {
    background-color: #114A7C; }
  
  .blue-gradient {
    background: -webkit-linear-gradient(50deg, #45cafc, #303f9f) !important;
    background: -o-linear-gradient(50deg, #45cafc, #303f9f) !important;
    background: linear-gradient(40deg, #45cafc, #303f9f) !important; }
  
  .card-comments img {
    width: 4rem; }
  
  .card-intro {
    margin-top: 67px; }
    .card-intro .card-body {
      -webkit-border-radius: 0 !important;
      border-radius: 0 !important; }
  
  .navbar-brand img {
    height: 20px; }
  
  .pagination .page-item.active .page-link {
    background-color: #09c; }
  
  .card-avatar img {
    width: 100px; 
}

/*styles*/
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: #2c2c2c;
  font-family: 'AvenirNextProReg';
}
ul {
    list-style: none;
}

h4{ font-family: "AvenirNextProBold";}

.right-nav{
  position: fixed;
  right: 0;
  top: 0;
  background: #3c3c3c;
  height: 100%;
  width: 165px;
  z-index: 1;
}

#primary-menu-list{
  padding: 20px;
}

.right-nav .custom-menu-class ul#primary-menu-list li{
  margin: 18px 0;
}

.right-nav .custom-menu-class ul#primary-menu-list li:first-child:after{
  border: 1px solid #fff;
  transform: rotate(270deg);
  content: "";
  display: block;
  height: 1px;
  width: 240px;
  margin-top: 140px;
  margin-bottom: 140px;
  margin-left: -56px; /* margin-left: -64px; */
  margin-right: 0px;
}
.right-nav .custom-menu-class ul#primary-menu-list li a{
  color: #fff;
  border: 1px solid #fff;
  border-radius: 25px;
  padding: 2px 10px;
  width: 100%;
  display: inline-block;
  text-align: center;
  font-size: 11px;
  text-transform: uppercase;
}

.right-nav .custom-menu-class ul#primary-menu-list li a:hover{
  background-color: #f1465c;
  border: 1px solid #fff;
  text-decoration: none !important;
}

.right-nav .custom-menu-class ul#primary-menu-list li:first-child a{
  border: none;
  color: #f1465c;
  font-weight: bold;
}
.right-nav .custom-menu-class ul#primary-menu-list li:first-child a:hover,
.right-nav .custom-menu-class ul#primary-menu-list li:first-child a:focus{
  border: none;
  color: #fff;
  font-weight: bold;
}

.main-section {
  margin-right: 150px;
}

.mid-left-section,
.mid-right-section{
  width: 100%; height: 100%;
}
.mid-left-section img,
.mid-right-section img{
  width: 100%; height: 100%;
}

.mid-right-section {
  position: relative;
}

.navbar{
  box-shadow: none;
}

#pagesection .center-section .container .col-md-6{
  width: 46%;
}

#left-section{
  width: 20%;
  display: block;
  position: relative;
}

#left-section {
  background: #2c2c2c;
  width: 100%;
  height: 100%;
}

section.page .container .row #left-section .counter,
#pagesection .container .row #left-section .counter{
  transform: rotate(270deg);
  text-transform: uppercase;
  position: relative;
  left: 10%;
}

#pagesection section#home .container .row #left-section .counter.count-one span{
  font-size: 12rem;
}

#pagesection section#home .container .row #left-section .counter.count-one{
  top: 44vh;
}
#pagesection section#about .container .row #left-section .counter.count-two{
  top: 52vh;
}

#pagesection section#about .container .row #left-section .counter.count-two span{
  font-size: 12rem;
}

#pagesection section#services .container .row #left-section .counter.count-three{
  top: 60vh;
}
#pagesection section#services .container .row #left-section .counter.count-three span{
  font-size: 10rem;
}

#pagesection section#work .container .row #left-section .counter.count-four{
  top: 60vh;
}

#pagesection section#work .container .row #left-section .counter.count-four span{
  font-size: 12rem;
}

#pagesection .container .row #left-section .counter.count-five{
  top: 40vh;
}

#pagesection .container .row #left-section .counter.count-five span{
  font-size: 12rem;
}

#pagesection .container .row #left-section .counter.count-six{
  top: 30vh;
}

#pagesection .container .row #left-section .counter.count-six span{
  font-size: 14rem;
}

#pagesection .container .row #left-section .counter.count-seven{
  top: 60vh;
}

#pagesection .container .row #left-section .counter.count-seven span{
  font-size: 10rem;
}

/* #pagesection .mid-left-section {
  background: #2c2c2c;
} */

#pagesection .container #left-section .counter{
  color: #333333;
  font-family: 'helveticabold';
}

.home-page-content{
  font-size: 4rem;
  position: absolute;
  display: block;
  text-align: left;
  padding: 0 16%;
  z-index: 10;
  top: 14%;
  text-transform: uppercase;
  line-height: 54px;
}

.home-page-content h2{
  line-height: 54px;
}

.homepage-background{
  background-position: 40% 50%;
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  min-height: 100vh;
  height: 100%;
}

.layer {
  background-color: rgba(69, 69, 69, 0.7);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.page-background-services{
  background-position: 5% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  min-height: 100vh;
  height: 100%;
  position: relative;
  right: -25px;
}


section.page{
  min-height: 100vh;
  background: #2c2c2c;
  z-index: 1;
  margin: 10vh 200px 0 0; /* margin: 10vh 165px 0 0; */
}

section.page.contact{
  margin: 10vh 170px 0 0;
}

section.page .container{
  margin: 0 0 0 4vh;
}

.lp-image img,
.rp-image img {
  width: 100%;
  /* height: 100%; */
  height: 370px;
  object-fit: cover;
}

.about-content{
  padding: 100px 0;
  margin-right: 30px;
}

section.page .clients-content{
  margin-top: 20vh !important;
}

section.page .work-content{
  margin-top: 20vh !important;
}

section.page .team-content{
  margin-top: 20vh !important;
  z-index: 5;
}

.about-content p{
  color: #fff;
}

.heading{
  font-family: 'AvenirNextProBold';
  /* margin-left: 2rem; */
}

.no-padding-left-col{
  padding-right: 0;
}
.no-padding-right-col{
  padding-left: 0;
}

#work .page-content,
.mid-left-section.services {
  margin-top: 14vh;
}

.mid-left-section.contact,
section.page .page-content{
  margin-top: 14vh;
}

.mid-left-section.contact{
  padding-right: 10px;
  height: auto;
}

.work-images img{
  height: 220px;
  object-fit: cover;
  width: 100%;
  max-width: 100%;
}

a.link-section{
  background: #f1465c;
  padding: 5px 10px;
  border-radius: 10px;
  text-transform: uppercase;
  font-size: 12px;
}

.particles-1{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 50%;
  z-index: 10;
}

/*ABOUT*/
.particles-2{
  position: absolute;
  /* top: 0; */
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 0;
}

/*ABOUT TOSTRI LIVE*/
.particles-3{
  position: absolute;
  /* top: 0; */
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 0;
}

/*CLIENTS*/
.particles-4{
  position: absolute;
  /* top: 0; */
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 0;
}

/*TEAM*/
.particles-5{
  position: absolute;
  /* top: 0; */
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 0;
  opacity: 0.5;
}

.particles-1 canvas,
.particles-2 canvas,
.particles-3 canvas,
.particles-4 canvas,
.particles-5 canvas{
  display: block;
  vertical-align: bottom;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  -webkit-transition: opacity .8s ease, -webkit-transform 1.4s ease;
  transition: opacity .8s ease, transform 1.4s ease;
  z-index: -1;
}

.content-block .post-imgs.team img{
  width: 100%;
  height: 410px;
  object-fit: cover;
}

@media screen and (max-width: 1200px) {
  .content-block .post-imgs.team img{
    width: 100%;
    height: 250px;
    object-fit: cover;
  }
}

.post-attrbts{
  padding: 5px 0;
}
.post-attrbts h4{
  font-size: 15px;
}

.post-attrbts p{
  color: #fff !important;
  margin-top: -5px;
}

.page-background-contact{
  background-position: 5% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  min-height: 100vh;
  height: 100%;
}

.site-logo {
  position: fixed;
  left: 24px;
  top: 20px;
}

section.page.home{
  margin: 0 30px 0 0; /* margin: 0 150px 0 0; */
}

.single-content-img img{
  width: 100%;
  max-width: 100%;
  height: auto;
}

.post-thumbnail img{
  width: 100%;
  max-width: 100%;
  height: auto;
}

.single-content-content{
  color: #fff !important;
}

.single-content-content img{
  width: 100%;
  max-width: 100%;
  height: auto;
}

section.page .container .row #left-section .counter{
  top: 50vh;
}

section.page .container .row #left-section .counter.post span{
  font-size: 10rem;
  font-family: 'helveticabold';
}
.home-button-holder{
  position: absolute;
  left: 46%;
  top: 52%;
  z-index: 100;
}

.home-button-holder a{
  background: #f1465c;
  padding: 8px 25px;
  border-radius: 15px;
}

/*Team captions*/
.hovereffect {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
  /* background: rgba(69, 69, 69, 0.7); */
}

.hovereffect .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 60%;
  left: 0;
  padding: 50px 20px;
}

.hovereffect img {
  display: block;
  position: relative;
  max-width: none;
  width: calc(100% + 20px);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-10px,0,0);
  transform: translate3d(-10px,0,0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  filter: alpha(opacity=40);
  opacity: 0.4;
}

.hovereffect:hover img {
  opacity: 1;
  /* filter: alpha(opacity=40); */
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  cursor: url('../img/icon-zoom-white.png'), pointer;
}

.hovereffect h2 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  position: relative;
  font-size: 17px;
  overflow: hidden;
  padding: 0.5em 0;
  background-color: transparent;
}

.hovereffect h2:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  content: '';
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  -webkit-transform: translate3d(-100%,0,0);
  transform: translate3d(-100%,0,0);
}

.hovereffect:hover h2:after {
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

.hovereffect a, .hovereffect p {
  color: #FFF;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(100%,0,0);
  transform: translate3d(100%,0,0);
}

.hovereffect:hover a, .hovereffect:hover p {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}


/*HOVER 2*/
.hovereffect-2 {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
  /* background: -webkit-linear-gradient(45deg, #ff89e9 0%, #05abe0 100%);
  background: linear-gradient(45deg, #ff89e9 0%,#05abe0 100%); */
  height: 400px;
}

.hovereffect-2 .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  padding: 3em;
  text-align: left;
}

.hovereffect-2 img {
  display: block;
  position: relative;
  max-width: none;
  width: calc(100% + 60px);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.45s;
  transition: opacity 0.35s, transform 0.45s;
  -webkit-transform: translate3d(-40px,0,0);
  transform: translate3d(-40px,0,0);
  object-fit: cover;
  height: 100%;
  min-height: 400px;
}

.hovereffect-2 h2 {
  text-transform: uppercase;
  color: #fff;
  position: relative;
  font-size: 17px;
  background-color: rgba(230, 53, 80, 0.7);  /* background-color: transparent; */
  padding: 5px 10px;/*15% 0 10px 0;*/
  text-align: left;
}

.hovereffect-2 .overlay:before {
  position: absolute;
  top: 20px;
  right: 20px;
  bottom: 20px;
  left: 20px;
  border: 1px solid #fff;
  content: '';
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.45s;
  transition: opacity 0.35s, transform 0.45s;
  -webkit-transform: translate3d(-20px,0,0);
  transform: translate3d(-20px,0,0);
}

.hovereffect-2 a, .hovereffect-2 p {
  color: #FFF;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.45s;
  transition: opacity 0.35s, transform 0.45s;
  -webkit-transform: translate3d(-10px,0,0);
  transform: translate3d(-10px,0,0);
  text-align: center;
  text-transform: uppercase;
}

.hovereffect-2:hover img {
  opacity: 0.6;
  filter: alpha(opacity=60);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

.hovereffect-2:hover .overlay:before,
.hovereffect-2:hover a, .hovereffect-2:hover p {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}



.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
  background:transparent;
  color:#FFF;    
}

.wpcf7 textarea:focus{
  background:transparent;
  color:#FFF;    
}

.wpcf7 .form-control,
.wpcf7 .form-control:focus{
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 1px;
}

#home-carousel{
  max-height: 100vh;
  overflow: hidden;
}

#home-carousel .carousel-item img{
  width: 100%;
  height: 100%;
  min-height: 100vh;
  object-fit: cover;
}

.home-sl-overlay{
  background-color: rgba(69, 69, 69, 0.7);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.carousel .carousel-indicators li{
  width: 20px;
  height: 2px;
  border-radius: unset;
}
#clients .container .post-imgs img{
  transition: transform .25s ease;
  z-index: 20;
}
#clients .container .post-imgs img:hover{
  transform: scale(1.25);
  border: 4px solid #e63550;
  background: #2c2c2c;
  z-index: 50;
  cursor: url('../img/icon-zoom-red.png'), pointer;
}

#contact .mid-left-section.contact .page-content-text{
  margin: 10rem 0;
}

.btn-contact-sbmt,
.btn-contact-sbmt:hover,
.btn-contact-sbmt:focus,
.btn-contact-sbmt:active{
  background-color: #f1465c !important;
  box-shadow: none !important;
}

.mobile-nav{ display: none !important; }

.n2-section-smartslider{opacity: .5; z-index: 10;}
.n2-section-smartslider:hover{opacity: 1;}

.fas.burgers {color: #fff;font-size: 30px;}


/*ICON*/
.animated-icon2 span {
  background: #f1465c;
}
.animated-icon2{
  width: 30px;
  height: 20px;
  position: relative;
  margin: 0px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}
  
.animated-icon2 span{
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
.animated-icon2 span:nth-child(1) {
  top: 0px;
}
  
.animated-icon2 span:nth-child(2), .animated-icon2 span:nth-child(3) {
  top: 10px;
}

.animated-icon2 span:nth-child(4) {
  top: 20px;
}

.animated-icon2.open span:nth-child(1) {
  top: 11px;
  width: 0%;
  left: 50%;
}

.animated-icon2.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.animated-icon2.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.animated-icon2.open span:nth-child(4) {
  top: 11px;
  width: 0%;
  left: 50%;
}

.mobile-nav #primary-menu-list{
  padding: 0px;
}

/* .animated-icon2.open{
  z-index: 200;
  right: 20px;
  position: absolute;
} */

section.single-post{
  margin: 0;
}

section.single-post .container{
  margin: 0;
  width: 100%;
  max-width: 100%;
  padding: 0 20px;
}

section.single-post .container .lefto{
  margin-top: 40px;
}

.lefto .single-content-content{
  position: sticky;
} 

section.single-post .container .righto{
  overflow: scroll;
}

.each-img{margin: 0 0 1rem;}

.back-btn a{background: #e63550 !important; color: #fff !important;padding: 5px 20px}

.back-btn{margin-bottom: 30px;}

.back-btn a:hover,
.back-btn a:focus,
.more-section a:hover,
.more-section a:focus{
  cursor: pointer;
  text-decoration: none !important;
}

.more-section {
  padding: 10px 0;
}

section#nothing{
  margin-top: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

section#nothing header h1{
  font-family: 'AvenirNextProBold';
  color: #e63550 !important;
}

section#nothing .container{
  margin: 0px !important;
}

section#nothing .page-content{
  margin-top: 5vh;
}

section#nothing .page-content p,
#searchform{
  color: #FFF !important;
}

#more-work-page .container .row .more-work-content{
  margin-top: 10vh;
  margin-bottom: 10vh;
}

section#more-work-page{
  margin: 10vh 0 0 0;
}

section#more-work-page .container{
  margin: 0px !important;
}