@font-face {
  font-family: 'HPFuturaLT';
  font-style: normal;
  src: url('../fonts/FuturLig_OT.otf') ;
}
@font-face {
  font-family: 'HPFuturaHV';
  font-style: normal;
  src: url('../fonts/FuturHea_OT.otf') ;
}
body{
  font-family: 'HPFuturaLT', Arial, Helvetica, sans-serif;
}

h1 {
  text-transform: uppercase;
  margin-bottom: 2rem;
}

.content-text
{
  text-align: justify;
}

.page-home
{
  background-color: #224e55;
  height: 100vh;
}

.bgHome{
  position: absolute;
  bottom: -7px;
  left: 0;
  width: 19.5vw;
}

@media (min-width: 1400px) and (max-width: 1670px)
{
  .bgHome {
    width: 19vw;
  }
}

@media (min-width: 1212px) and (max-width: 1399px)
{
  .bgHome {
    width: 18vw;
  }
}

@media (min-width: 1024px) and (max-width: 1211px)
{
  .bgHome {
    width: 17vw;
  }
}

@media (min-width: 795px) and (max-width: 1023px)
{
  .bgHome {
    width: 16vw;
  }
}

@media (min-width: 646px) and (max-width: 794px)
{
  .bgHome {
    width: 14vw;
  }
}

@media (min-width: 460px) and (max-width: 645px)
{
  .bgHome {
    width: 12vw;
  }
}

@media (max-width: 459px)
{
  .bgHome {
    width: 7vw;
  }
}


.bgWho {
  position: absolute;
  margin-top: 0;
  right: 0;
  width: 100vw;
}

.bgPorfolio {
  width: 80vw;
  position: absolute;
  margin-top: -1px;
}

.bgWhatWeOffer {
  width: 100%;
  left: 0;
  position: absolute;
}

.bgClient {
  width: 70%;
  left: 0;
  position: absolute;
}

.bgContact {
  width: 70%;
  right: 0;
  position: absolute;
}
.page-wo-we-are
{
  background-color: #fff;
  height: 99vh;
}
@media (max-width: 1500px)
{ 
#whatWeOffer.page-menu02 .navbar.navbar-light.mx-auto
{
    margin-left: auto !important;
    margin-right: 0 !important;
    margin-top: 7vh;
}
#whatWeOffer.page-menu02 .navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='square' stroke-miterlimit='15' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
}

#contacts.page-menu02 .navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(225, 225, 225)' stroke-width='4' stroke-linecap='square' stroke-miterlimit='15' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

address{
  font-family: 'HPFuturaHV', 'HPFuturaLT', Arial, Helvetica, sans-serif;
  color: #f78d11;
}

address h3{
  font-weight: bold;
}

.mail-contact a, .mail-contact a:hover, .mail-contact a:visited, .mail-contact a:link
{
  font-family: 'HPFuturaHV', 'HPFuturaLT', Arial, Helvetica, sans-serif;
  color: #f78d11;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
}

.box-contact{  
  width: 100%;
  margin-top: 21%;
}

.bgContactWhite
{
  margin: 15px;
  padding: 15px;
  background-color: rgba(255,255,255,0.4);
  border-radius: 20px;
  width: 95%;
  height: 100%;
}

.page-what-we-offer
{
background: #B1B4B6 url(../images/bgTriangle.png) no-repeat center center;
 height: 98vh;
 /*background-color: #B1B4B6;*/
}

@media (max-width: 991.98px)
{  
  .page-wo-we-are
  {
    height
    : auto;
  }

  .box-contact{  
    margin-top: 8%;
  }
}

@media (max-width: 1200px)
{  
  .page-what-we-offer
  {
    height
    : auto;
  }
}
.div-bg-what
{
  margin: 0 -15px;
}

.content-triangle
{
  position: absolute;
  width: 100%;
  z-index: 1;
}

.menu-triamgle{
  text-transform: uppercase;
  font-size: 24px;
  font-family: 'HPFuturaHV', Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #fff;
}

.triangle01 {
  width: 100%;
  /*background: url('data:image/svg+xml;utf8,<svg width="100%" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 546 616" xml:space="preserve"> <polygon fill="#fa9938" points="11,8 11,606 536,307 "/></svg>');*/
  background: url(../images/triangle01.svg) no-repeat;
}

.menu-triamgle01{
  position: absolute;
  width: 500px;
  margin-top: -3%;
  z-index: 4;
}

.menu-triamgle04{
  position: absolute;
  width: 400px;
  margin-top: 14%;
  margin-left: 12%;
  z-index: 3;
}

.menu-triamgle05{
  position: absolute;
  width: 400px;
  margin-top: 7%;
  margin-left: 32%;
  z-index: 4;
}

.menu-triamgle03{
  position: absolute;
  width: 380px;
  margin-top: -1%;
  margin-left: 44%;
}

.menu-triamgle02{
  position: absolute;
  width: 380px;
  margin-top: 12%;
  margin-left: 55%;
}

@media (min-width: 1200px) and (max-width: 1420px)
{  
  .menu-triamgle04{
    margin-top: 25%;
  }
  
  .menu-triamgle05{
    margin-top: -4%;
    margin-left: 42%;
  }
  
  .menu-triamgle03{
    margin-left: 74%;
    margin-top: 8%;
  }
  
  .menu-triamgle02{
    margin-top: 22%;
    margin-left: 68%;
    z-index: 4;
  }
}

.divContentTriangle h2{
  text-transform: uppercase;
  font-family: 'HPFuturaHV', Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #babdc2;
}

.page-portfolio
{
  /*background: #fff url(../images/bg04.jpg) no-repeat left top;*/
  height: 100vh;
}

@media (max-width: 991.98px)
{  
  .page-portfolio
  {
    height: auto;
  }
}

.page-client
{
  background-color: #b6b9b9;
  height: 100vh;
}

@media (max-width: 991.98px)
{  
  .page-client
  {
    height: auto;
  }
}

.page-contact
{
  background: #fff url(../images/bg05.jpg) no-repeat center bottom;
  height: 100vh;
}

.border-menu {
  border-bottom: 1px solid #6f9ba2;
}

a.close-menu, a:hover.close-menu, a:active.close-menu, a:visited.close-menu 
{
  color: #fff;
  text-decoration: none;
}

.margin-logo {
  margin-top: 27vh;
}

.margin-logo01 {
  padding-right: 0;
}

@media (max-width: 991.98px)
{  
  .margin-logo01 {
    height: 20%;
  }
}

.logo-who{
  margin-top: 30vh;
}

#navbarSupportedContentWho {
  position: absolute;
  right: 15px;
  top: 65px;
  z-index: 999;
}

.page-wo-we-are h1 {
  margin-top: 20vh;
}

.container-social
{
  margin-top: 20px;
  right: 15px;
}

@media (max-width: 1115px)
{
  .container-social
  {
    margin-top: 90px;
  }
}

@media (max-width: 575px)
{
  .logo-who{
    height: 50%;
    margin-top: 0;
  }
}

@media (max-width: 991.98px)
{
  .border-menu {
    border-bottom: none;
  }

  .margin-logo {
    margin-top: 20vh;
  }

  #navbarSupportedContent {
    position: absolute;
    right: 15px;
    top: 75px;
    z-index: 999;
  }

  .page-wo-we-are h1 {
    margin-top: 6vh;
  }
}

#navbarSupportedContentWho {
  position: absolute;
  right: 15px;
  top: 75px;
  z-index: 999;
}

#navbarSupportedContentWhat {
  position: absolute;
  right: 15px;
  top: 75px;
  z-index: 999;
}

#navbar-portfolio {
  position: absolute;
  right: 15px;
  top: 75px;
  z-index: 999;
}

#navbar-clients {
  position: absolute;
  right: 15px;
  top: 75px;
  z-index: 999;
}

#navbar-contact {
  position: absolute;
  right: 15px;
  top: 75px;
  z-index: 999;
}

.container-portfolio{
  width: 100%;
  padding: 5% 10% 0;
}
.container-portfolio-item{
  width: 100%;
  padding: 0 10%;
}
.container-client{
  width: 100%;
  padding: 5% 10%;
}
.content-text2 {
  overflow-y: auto;
  overflow-x: hidden;
  height: 65vh;
  margin-bottom: 15px;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #90c23e !important;
  background-color: rgba(255,99,49,.75);
}
.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #FF6331;
  background-color: rgba(255,99,49,.75);
  filter: "alpha(opacity=75)";
  -ms-filter: "alpha(opacity=75)";
}
.maskHover{
  background-color: rgba(244,127,33, 0.8);
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;  
  -ms-transform: scale(0);
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  transition: .3s ease;
}

.maskHoverTriangle{
  background: url(../images/triangle.svg) center center no-repeat ;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;  
  -ms-transform: scale(0);
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  transition: .3s ease;
}

.maskHover > div, .maskHoverTriangle > div{
  width: 32px;
  margin-top: 25%;
}

.maskHover a, .maskHoverTriangle a{
  color: #fff;
  font-size: 30px;
  margin: 5px;
}

.maskHover a:hover, .maskHoverTriangle a:hover{
  -ms-transform: scale(1.2) rotate(-10deg);
  -webkit-transform: scale(1.2) rotate(-10deg);
  -moz-transform: scale(1.2) rotate(-10deg);
  -o-transform: scale(1.2) rotate(-10deg);
  transform: scale(1.2) rotate(-10deg);
  color: #fff;
}

.content-portfolio:hover > div.maskHover, .content-portfolio:hover > div.maskHoverTriangle {
  transform: scale(1)
}