
[data-cattype="503"] .fa-stack.twitter svg {
  width: 50% !important;
  height: 55% !important;
  left: 45%;
  top: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}


body.fullPageMenuOpended #header {
  display: none;
}

#insidepage .sticked.sticky-wrapper,
.wrapper_header.bottom{
  z-index: 100;
  position: absolute;
}

section[data-cattype="503"].wrapper_middle {
  z-index: 101;
  position: absolute;
  top: 0;
  padding: 0;
}

[data-cattype="503"] .menu-trigger, 
[data-cattype="503"] .close-trigger {
  position: fixed;
  top: 30px;
  right: 20px;
  display: block;
  width: 42px;
  height: 42px;
  cursor: pointer;
  z-index: 2333;
}

[data-cattype="503"]:not(.white-menu) .menu-trigger{
  top: 24px;
  width: 36px;
  height: 36px;
}


[data-cattype="503"] .menu-trigger:hover .menu-trigger-bar:before, 
[data-cattype="503"] .close-trigger:hover .menu-trigger-bar:before {
  width: 100%;
}

[data-cattype="503"] .menu-trigger:hover .close-trigger-bar:before, 
[data-cattype="503"] .close-trigger:hover .close-trigger-bar:before {
  width: 100%;
}

[data-cattype="503"] .close-trigger {
  z-index: 5;
  top: 42px;
}

[data-cattype="503"] .menu-trigger-bar {
  display: block;
  width: 100%;
  height: 4px;
  background-color: #21408a;
  margin-bottom: 6px;
  transform: rotate(-45deg);
  position: relative;
  
}

[data-cattype="503"].white-menu .menu-trigger-bar {
  background-color: #fff;
  box-shadow: #333 0px 0px 3px;
}

[data-cattype="503"] .menu-trigger-bar:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 0%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}

[data-cattype="503"] .menu-trigger-bar.top {
  width: 50%;
}

[data-cattype="503"] .menu-trigger-bar.middle:before {
  left: auto;
  right: 0;
}

[data-cattype="503"] .menu-trigger-bar.bottom {
  width: 50%;
  margin-left: 50%;
}

[data-cattype="503"] .close-trigger-bar {
  display: block;
  width: 100%;
  height: 4px;
  background-color: #222222;
  position: relative;
}

[data-cattype="503"] .close-trigger-bar:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 0%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2);
  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}

[data-cattype="503"] .close-trigger-bar.left {
  transform: translateX(100px) translateY(-100px) rotate(-45deg);
}

[data-cattype="503"] .close-trigger-bar.right {
  transform: translateX(-100px) translateY(-100px) rotate(45deg);
  top: -3px;
}


[data-cattype="503"] .inner-container, 
[data-cattype="503"] .menu-container {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: none;
  justify-content: center;
  align-items: center;
}

[data-cattype="503"] .inner-container {
  z-index: 2000;
}
[data-cattype="503"] .inner-container.fullyLoaded{
  background-color: #fff;
}

[data-cattype="503"] .menu-container {
  display: flex;
  align-items: center;
  overflow: auto;
}

[data-cattype="503"] ul.menu {
  display: block;
  width: 100%;
  padding: 5%;
  margin: 0;
}

[data-cattype="503"] .menu li {
  text-align: left;
  display: block;
  padding: 5px 0;
  text-transform: capitalize;
  z-index: 5;
}

[data-cattype="503"] .menu>li>a {
  text-decoration: none;
  color: #5fa7d9;
  display: inline-block;
  padding: 9px 0;
  letter-spacing: 3px;
  font-weight: 500;
  font-size: calc(2.4 * (1.5vh + 0.9vw));
  line-height: 1.2;
}
[data-cattype="503"] .menu>li>a:hover {
  color: #333;
}

[data-cattype="503"] .link>li>a {
  color: #333;
}

[data-cattype="503"] .link>li>a:hover {
  color: #5fa7d9;
}

[data-cattype="503"] .icon a {
  text-decoration: none;
  color: #231f20;
  display: inline-block;
  padding: 10px 0;
  letter-spacing: 5px;
  font-weight: 500;
  font-size: 20px;
  line-height: 0px;
}

[data-cattype="503"] .fa-stack {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  vertical-align: middle;
}

[data-cattype="503"] .fa-stack-2x {
  font-size: 40px;
}



[data-cattype="503"] .wrapper-menu-bg{
  position: absolute;  
  transform: rotate(-45deg) scaleY(0);
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

[data-cattype="503"] .menu-bg {
  position: absolute;
  display: block;
  width: 200%;
  left: -53%;
  top: -25%;
  height: 40%;
  background-color: white;
  
}

[data-cattype="503"] .menu-bg.middle {
  top: 29%;
  left: -20%;
  transform:  scaleY(0);
  transform-origin: 21% 40%;
  height: 1806px;
}

[data-cattype="503"] .menu-bg.top {
  left: -40%;
  top: 40%;
  transform:  translateY(-152%);
  transform-origin: 10% 40%;
  opacity: 0;
  transition: 0.1s;
}

[data-cattype="503"] .menu-bg.bottom {
  top: 105%;
  transform:  translateY(25%);
  left: -20%;
  transform-origin: 60% 40%;
}





[data-cattype="503"] ul.link {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  padding: 0;
  margin-top: 60px;
}

[data-cattype="503"] ul.link li {
  width: auto;
  text-align: center;
  font-size: 22px;
}


[data-cattype="503"] ul.link li::before {
  content: "\2022";
  color: #ffc22b;
  font-weight: bold;
  display: inline-block;
  width: 2em;
  margin-left: -4px;
}

[data-cattype="503"] .link li:first-child::before {
  display: none;
}

[data-cattype="503"]  .wrapper-sociallink{
  margin-top: -3vh;
}


[data-cattype="503"] ul.sidebar {
  margin: 0;
  padding: 0;
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  opacity: 0;
  transition: 0.3s;
}

[data-cattype="503"] ul.sidebar li:first-child {
  background-color: #21408a;
  height: 70vh;
  width: 20px;
}

[data-cattype="503"] ul.sidebar li:nth-child(2) {
  background-color: #ffc22b;
  height: 30vh;
  width: 20px;
}

[data-cattype="503"] ul.followus {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  align-items: center;
}

[data-cattype="503"] ul.followus li:first-child {
  width: 100px;
}

[data-cattype="503"] .icon a.stack:hover{
  color: #21408a;
}

[data-cattype="503"] .bottom img {
  width: 200px;
}


/* Portrait tablet to landscape and desktop */
@media (min-width: 1200px) and (max-width: 1500px) {

  [data-cattype="503"] .menu {
    padding: 2% 5%;
  }

  [data-cattype="503"] .menu li {
    padding: 0;
  }

  
  [data-cattype="503"] .icon a {
    font-size: 20px;
    line-height: 0px;
  }

  [data-cattype="503"] ul.sidebar li:first-child {
    height: 90%;
  }


  [data-cattype="503"] .bottom img {
    width: 150px;
    margin-top: 50px;
  }

  [data-cattype="503"] .menu-bg.top {
    left: -60%;
    height: 500px;
  }

  [data-cattype="503"]  .wrapper-sociallink{
    margin-top: -9vh;
  }

}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 980px) {

  [data-cattype="503"] .menu-bg.top {
    left: -40%;
    top: 15%;
  }


  [data-cattype="503"] .icon a {
    font-size: 20px;
    line-height: 0px;
  }

  [data-cattype="503"] .menu {
    display: block;
    width: 100%;
    padding: 25% 5% 5% 5%;
  }

  [data-cattype="503"] .align-right, section.align-right {
    text-align: left;
    position: absolute;
    top: 20px;
  }

  [data-cattype="503"] ul.followus {
    justify-content: start;
    padding: 0;
  }



  [data-cattype="501"] .right {
    height: auto;
    background-position: top;
    background-repeat: no-repeat;
    background-size: 50%;
    position: relative;
  }



}

/* Mobile screen size - landscape view */
@media (max-width: 767px) {}

/* Mobile screen size */
@media (max-width: 480px) {


  [data-cattype="501"] .rotate {
    animation: animName 4s linear infinite;
    position: absolute;
    width: 200px;
    top: -5px;
    right: 10px;
    z-index: 5;
  }

  

  [data-cattype="503"] .menu>li>a {
    font-size: 30px;
    line-height: 30px;
  }

  [data-cattype="503"] .icon a {
    font-size: 15px;
    line-height: 0px;
  }


  [data-cattype="503"] .menu {
    display: block;
    width: 100%;
    padding: 9% 6% 0px 9%;
    margin-top: 0;
  }


  [data-cattype="503"] ul.sidebar li:first-child,
  [data-cattype="503"] ul.sidebar li:last-child {
    width: 10px;
  }

  [data-cattype="503"] ul.link li {
    font-size: 15px;
  }

  [data-cattype="503"] .wrapper-sociallink {
    text-align: left;
    margin: 27px 0 60px 0;
  }
  [data-cattype="503"] .wrapper-sociallink .companylogo{
    width: 30%;
  }


  [data-cattype="503"] ul.link {
    justify-content: flex-start;
    margin-top: 20px;
  }

  [data-cattype="503"] ul.followus {
    justify-content: flex-start;
    align-items: center;
    padding: 0;
  }



  [data-cattype="503"] .menu-bg.middle {
    top: -17%;
    left: -20%;
    transform: rotate(-45deg) scaleY(0);
    transform-origin: 21% 40%;
    height: 1806px;
  }

  [data-cattype="503"] .menu-bg.bottom {
    top: 103%;
    transform: rotate(-45deg) translateY(25%);
    left: -50%;
    transform-origin: 60% 40%;
  }

  [data-cattype="503"] .bottom img {
    width: 150px;
  }

  [data-cattype="503"] .fa-stack {
    width: 30px;
    height: 30px;
    line-height: 30px;
  }

  [data-cattype="503"] .fa-stack-2x {
    font-size: 30px;
  }

  [data-cattype="501"] .right {
    height: 500px;
    background-position: top right;
    background-repeat: no-repeat;
    background-size: 43%;
    position: relative;
  }


}