html, body { box-sizing: border-box; } 

*,:before,:after{box-sizing:inherit;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;  scroll-behavior: smooth;}

body { 
  margin:0; padding:0; max-width: 100vw; overflow-x: hidden;  
  font-family: "Manrope", sans-serif; font-optical-sizing: auto; 
  font-size: 14px; font-weight: 400; color: #5e646a; 
  background-color: #2d2d32;
  background-image: url(../images/bgrd.png); background-repeat: no-repeat; background-size: 29% 100%;
  
}
section { opacity: 0; transition: opacity .2s; }

/*  The basics  */
h1,h2,h3,h4,h5{ 
  font-family: "Manrope", sans-serif; font-optical-sizing: auto; 
  color: #303030; padding:0; margin:0; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%; text-transform: uppercase;
}
h1 { font-size: 1.9vw; font-weight:800; letter-spacing: -2px; }
h2 { font-size: 1.4vw; font-weight:800; letter-spacing: 4px; }
h3 { font-size: 1vw; font-weight:800; letter-spacing: 1px; }
h4 { font-size: 10px; font-weight:800; letter-spacing: 1px; }

hr { border: 0; height: 1px; background: #f9bf26; width:60px; margin: 20px 0px; }

p { font-size: 14px; line-height: 20px; letter-spacing: 1px; }
a { color:#000; text-decoration: none; transition: 0.2s; }
a:hover { color: #000; }




/*------------------------------*\
    Grid System
\*------------------------------*/

.gridrow, 
.gridcolumn { box-sizing: border-box; }
.gridrow:before,
.gridrow:after { content: ""; display: table;}
.gridrow:after { clear: both; }
.gridcolumn { position: relative; float: left; display: block; }

.gridcolumn + .gridcolumn { margin-left: 0%; }
.gridcolumn-1, .gridcolumn-1x { width: calc( 100% * 1 / 12 ); }
.gridcolumn-2, .gridcolumn-2x { width: calc( 100% * 2 / 12 ); }
.gridcolumn-3, .gridcolumn-3x { width: calc( 100% * 3 / 12 ); } /*{ width: 24.9999999999%; }*/
.gridcolumn-4, .gridcolumn-4x { width: calc( 100% * 4 / 12 ); }
.gridcolumn-5aria, .gridcolumn-5ariax { width: calc( 100% * 1 / 5 ); }
.gridcolumn-5, .gridcolumn-5x { width: calc( 100% * 5 / 12 );}
.gridcolumn-6, .gridcolumn-6x { width: calc( 100% * 6 / 12 ); }
.gridcolumn-7, .gridcolumn-7x { width: calc( 100% * 7 / 12 ); }
.gridcolumn-8, .gridcolumn-8x { width: calc( 100% * 8 / 12 ); }
.gridcolumn-9, .gridcolumn-9x { width: calc( 100% * 9 / 12 ); }
.gridcolumn-10, .gridcolumn-10x { width: calc( 100% * 10 / 12 ); }
.gridcolumn-11, .gridcolumn-11x { width: calc( 100% * 11 / 12 ); }
.gridcolumn-12 { width: 100%; margin-left: 0; }


@media only screen and (max-width: 960px) {
  .gridcolumn-1, .gridcolumn-2, .gridcolumn-3, .gridcolumn-4, .gridcolumn-5, .gridcolumn-5aria, .gridcolumn-6, .gridcolumn-7, .gridcolumn-8, .gridcolumn-9, .gridcolumn-10, .gridcolumn-11, .gridcolumn-12 { 
      float: none; width: auto; text-align: center !important; 
    }
  .gridcolumn + .gridcolumn { margin-left: 0; text-align: left !important; }
}

.imgx { display: block;  /* margin: 0 auto; Centred */  max-width: 100%; }

.gridcolumn { border: 0px solid #4affff; padding: 3px; min-height: 0px; display: block;}
.vertical { display: block; vertical-align: middle; }
.txtCenter { text-align: center; }

.gridrow { margin-bottom: 0px; /*  max-width: 1280px; */  margin: 0px auto; }
.gridrow:last-child { margin-bottom: 0; }
.gridcolumn .gridcolumn { border-color: 0px solid #4ed7ff; }

@media only screen and (max-width: 960px) {
    .gridrow { margin-bottom: 0px; }
    .gridcolumn { margin-bottom: 0px; text-align: left !important; }
    .gridrow:last-child .gridcolumn:last-child { margin-bottom: 0px; text-align: center; }
    .imgx { display: block; margin: 0 auto; max-width: 100%; position: relative; }
}



/*  Particles   */

.particle-network-animation {
  top: 0;
  left: 0;
  height: 99%;
  width: 99%; 
  z-index: 0;
}
.particle-network-animation::before {
  z-index: -2;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  opacity: 0.2;
}




/*Image popup*/









/*  --Custom Css--  */

.displayDesktop { display: block; }
.displayMobile { display: none; }

/*Basic Colors*/
.dC1 { background-color: #2a2a2e; }
.dC2 { background-color: #2d2d32; }
.dC3 { background-color: #35353a; }
.yC4 { color: #f9bf26; }
.yBc4 { background-color: #f9bf26; }

.txtC { text-align: center; }
.txtR { text-align: right; }

.customHref h4 { font-size: 12px; display: inline-block; color: #35353a;   }
.customHref i { color: #35353a; margin-left: 20px; transition: 0.1s  }
.customHref:hover i { margin-left: 30px; color: #f9bf26; }

.genButton { 
  position: relative; display: inline-block; 
  margin: 10px 0px 10px 10px; padding: 10px 30px;
  color: #fff; font-weight: bold; font-size: 12px; text-transform: uppercase; background-color: #f9bf26;
  cursor: pointer; transition: 0.2s ease-in-out;
}
.genButtonArrow { position: relative; display: inline-block; background-color: #f8f8f8; font-size: 11px; margin: 10px 30px 10px 0; padding: 11px 12px; transition: 0.2s ease-in-out; }

.genButton:hover { 
  color: #2d2d32; padding: 10px 16px;
}
.genButton:hover + .genButtonArrow { padding: 11px 26px; background-color: #2d2d32; color: #f9bf26; }



.init0, .init1, .init2, .init3 { 
  position: absolute; display: block;
  height:100vh; 
  margin-top: -90px; margin-left: 0;
  animation-fill-mode: forwards;
  animation-delay: 0;
}

.init0 { z-index: 50; width: 100vw; background-color: #2a2a2e; animation-name: initi0; animation-duration: 1s; }
@keyframes initi0 {
  0% { }
  75% { }
  100% { margin-left: 100%; width: 0vw; }
}

.init1 { z-index: 60; width: 0vw; background-color: #35353a; animation-name: initi1; animation-duration: 1.5s; opacity: 1; }
@keyframes initi1 {
  0% { width: 0vw; }
  15% { margin-left: 0; width: 100vw; }
  60% { margin-left: 0; width: 100vw;opacity: 1; }
  100% { margin-left: 100%; width: 0vw; opacity: 0.5;}
}

.init2 { z-index: 70; width: 0vw; background-color: #2d2d32; animation-name: initi2; animation-duration: 1s; opacity: 1; }
@keyframes initi2 {
  0% { width: 0vw; }
  50% { margin-left: 0; width: 100vw; }
  70% { margin-left: 0; width: 100vw; opacity: 1; }
  100% { margin-left: 100%; width: 0vw; opacity: 0.5;}
}






/*Menu*/
.menuButton { position:absolute; display: block; right: 0; width: 140px; height: 90px; text-align: center; cursor: pointer; z-index: 999; }
.menuButton i { font-size: 16px; margin: 30px 0 10px 0; color: #f9bf26; transition: ease-in-out 0.2s;  }
.menuButtonMinus { position:absolute; display: block; top: 45px; margin-left: -20px; width: 40px; height: 1px; background-color: #f9bf26; transition: ease-in-out 0.2s  } 
.menuButton h4 { color: #969684; }

.menuButton:hover i { color: #fff; }
.menuButton:hover .menuButtonMinus { margin-left: -40px; }
.menuButton:hover h4 { color: #f9bf26;  transition: 0.3s }

.menuContainer {
  position: fixed; display: block;
  right: 0; bottom: 0;
  width: 0; height: calc( 100vh - 90px );
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 990; opacity: 1;
}
.menuColumn {
  position: fixed; display: block;
  right: 0; bottom: 0;
  width: 25%; height: calc( 100vh - 90px );
  background-color: #262627;
  z-index: 995; margin-right: -25%;
}
.menuMain {
  position: absolute; display: block;
  top: 50%; transform: translateY(-50%);
  width: 80%; padding: 10%;
}
.menuMain ul{
  width:100%;
  margin-left:0;
  list-style-type:none;
  text-align: left;
}

.menuMain li{
  margin-top:5px;
  padding: 10px;
  color: #7f7f80;
  transition: 0.2s ease-in-out;
  cursor: pointer;
}
.menuMain li::after{
  position: absolute;
  right: 11%; line-height: 5px;
  content: '→';
  margin-top:5px;
  color: #7f7f80;
}

.menuMain li:hover {
  background-color: #2d2d32;
  color: #f9bf26;
}
.menuMain li:hover i{
  color: #f9bf26;
}





.menuSocial {
  position: absolute; display: block;
  right: 0; bottom: 0;
  width: 100%; height: 70px; padding: 14px 0 0 0; text-align: center;
  background-color: #2d2d32;
  z-index: 5;
}
.menuSocial h4 {
  position: relative; display: inline-block; padding: 10px; color: #fff;  
}

.social_icon {
  padding: 11px 13px; margin: 0 5px;
  font-size: 12px;
  border: solid 1px #3d3e42;
  color: #838487;
  border-radius: 0px;
  transition:  0.2s ease-in-out;
  margin-bottom: 20px;
}
.social_icon_leftBar {
  width: 40px; height: 40px;
  font-size: 12px; line-height: 40px !important;
  text-align: center;
  margin-bottom: 5px;
  border: solid 1px #3d3e42;
  color: #838487;
  transition:  0.2s ease-in-out;
}

.social_icon:hover, .social_icon_leftBar:hover { border-radius: 50%; color: #fff; }



/*Top Line*/
.topLine {
  position: fixed; display: block; top: 0;
  width: 100%; height: 90px;
  background-color: #35353a; color: #fff;
  z-index: 100;
}
.topLine .gridrow { padding: 0; }  
.topLine .gridcolumn { height: 90px; }
.logo_mamais_full { margin: 20px 0 20px 90px; }
.topLineRight a { color:inherit; }
.topLineRight h4 {
  position: absolute; display: inline-block;
  top: calc( 50% - 7px); ; right: 200px;
  color: #fff; letter-spacing: 3px;
}



/*Left line*/
.leftLine {
  position: fixed; display: block; top: 0;
  width: 90px; height: 100vh;
  background-color: #2d2d32; color: #fff;
  z-index: 90;
}
.leftLineTop { position: relative; display: block; width: 40px; height: 200px; margin: 0 auto; background-color: #35353a; }
.leftLineTop h3 { position: absolute; display: block; left: 0; bottom: 0; width: 100%; height: 12px; margin: 0 0 -40px -3px; transform: rotate(-90deg); font-size:12px; color: #f9bf26 }
.leftLineSep { position:absolute; display: inline-block; top: 50%; left: calc( 50% - 20px ); width: 40px; height: 1px; background-color: #f9bf26; } 
.leftLineBottom { position: absolute; display: block; bottom: 0; left: calc( 50% - 20px); width: 40px; height: 200px;  }







/*--  Home Page --*/

.homePage {
  position: relative; display: block;
  width: calc( 100% - 90px ); height: calc( 100vh - 90px );
  margin: 90px 0 0 90px;
  overflow-x: hidden; overflow-y: auto;
  background-color: #2a2a2e;
}

.homePageTitle { position: absolute; display: block; z-index: 10; left: 15%; top: 50%; color: #fff; transform: translateY(-50%); }
.homePageTitle h1 { color: #fff; font-size: 3vw; }
.homePageTitle h2 { color: #fff; }
.homePageTitle h4 { display: inline-block; color: #f9bf26;   }
.homePageTitle i { color: #f9bf26; margin-left: 20px; transition: 0.1s  }
.homePageTitle a:hover  i { margin-left: 30px; color:#fff;  }

.pageBottomBar {
  position: absolute; display: block;
  z-index: 10;
  left: 0; bottom: 0;
  width: 60%; height: 70px;
  background-color: #323236;
}
.pageBottomBar .gridrow { padding: 0; }
.pageBottomBar .gridcolumn { height: 70px; }
.pageBottomBar .gridcolumn { line-height: 63px; color: #fff; }
.pageBottomBar .gridcolumn-6 { padding-left: 3% }


.pageBottomBarButton { 
  position: relative; display: block;
  width: 100%; height: 100%; 
  background-color: #f9bf26;
  text-align: center; color: #fff; cursor: pointer;
  transition: ease-in-out 0.1s; 
}
.pageBottomBarButton:hover { background-color: #323236; }
.pageBottomBarButton:hover i { margin-left: 30%; color: #f9bf26; transition: 0.2s; }
.pageBottomBar h4 { color: #8B8B8B; display:inline; position:absolute; }

.pageBottomBarDiscoverTxt { display: inline-block; }
.pageBottomBar hr { position: relative; display: block; width: 70%; margin: 34px auto 0 ; background-color: #f9bf26; }





/*--  About Page --*/

.aboutPage {
  position: relative; display: block;
  width: calc( 100% - 90px ); height: calc( 100vh - 90px );
  margin: 90px 0 0 90px;
  overflow-x: hidden; overflow-y: auto;
  background-color: #fff;
}

.aboutPageLeft { background-image: url(../images/aboutPageGreyBgrd.png); background-repeat: no-repeat; background-size: 75% 450px }
.aboutPageRight { background-image: url(../images/aboutPage.png); background-size: cover; background-position: center bottom; position:sticky; top: 0; height: 100%; padding:0 }
.stuffPageRight { background-image: url(../images/stuffPage.png); background-size: cover; position:sticky; top: 0; height: 100%; padding:0 }
.contactPageRight { background-image: url(../images/contactPage.png); background-size: cover; position:sticky; top: 0; height: 100%; padding:0 }

.aboutPageLeft { padding: 3% 5%; }
.aboutPageLeft .gridcolumn { padding: 10px; }



.aboutPageRightSecNum { position: absolute; display:block; font-size: 6vw; color:#f8f8f8; left:50%; }

.blackFrame { position:relative; display:block; padding: 5% 10%; color: #fff; background-color: #2a2a2e; }
.blackFrame h4 { color: #f8f8f8; margin: 8% 0; }
.blackFrameSkill { background-color:#505050; padding: 5px 10px; margin: 5px; border-radius: 4px; font-size:12px; line-height:35px }

.gridrowNumbers { margin: 10% 0; border-top: solid 1px #f2f2f2; border-bottom: solid 1px #f2f2f2; font-size: }
.gridrowNumbers .gridcolumn { padding: 3% 1% }
.gridrowNumbers i { color:#f9bf26; margin-right:10px; }

.skillBarOuter { width: 100%; height: 6px; background-color: #2a2a2e; }
.skillBarInner { width: 99%; height: 6px; margin-top: 1px; background-color: #fac921; }


.experienceSec { background-color:#f8f8f8; margin:5px 0; padding: 20px; border-bottom: solid 1px #f8f8f8; }
.experienceSec h4 { display:inline-block; margin-left: 20px; } 
.experienceSecHR { width: 100% ; margin: 10px 0px; }

.aboutPageRightTop { position:absolute; display:block; width: 70px; height: 250px; }
.aboutPageRightTop img { position:absolute; display: block; bottom:0; }
.aboutPageRightTop h4 { position: absolute; display: inline-block; top: 50%; left: -70%; width: 170px; transform: rotate(90deg); color: #fff; }

.aboutPageRightName { position:absolute; display:block; right: 20px; bottom: 100px; width: 100%; height: auto; text-align: right; }
.aboutPageRightName h1, .aboutPageRightName h3 { color: #fff; }

.aboutPageRightBottom { position:absolute; display:block; bottom: 0; right: 0; width:70%; height:70px; }
.aboutPageRightBottom hr { position: relative; display: block; width: 70%; margin: 34px auto 0 ; background-color: #f9bf26; }





/*Showcase*/

.showCase {
  position: relative; display: block;
  width: calc( 100% - 90px ); height: calc( 100vh - 90px );
  margin: 90px 0 0 90px;
  overflow-x: hidden; overflow-y: auto;
  background-color: #2a2a2e;  
}

#postWrapper {
  display: flex;
  overflow-x: scroll;
  max-width: 100%;
  margin: 0 auto;
  height: 100%;
}

.postWrapperContainer {
  background: #35353a ;
  color: white;
  padding: 1%;
  margin: 2% 1%;
  min-width: 360px;
}
 .pwc1 { background-image: url(../images/showcase1.png);  background-size: cover; }
 .pwc2 { background-image: url(../images/showcase2.png);  background-size: cover; }
 .pwc3 { background-image: url(../images/showcase3.png);  background-size: cover; }
 .pwc4 { background-image: url(../images/showcase4.png);  background-size: cover; }
 .pwc5 { background-image: url(../images/showcase5.png);  background-size: cover; }
 .pwc6 { background-image: url(../images/showcase6.png);  background-size: cover; }



.postWrapperBox { position:relative; display:block; padding: 0%; background-color: rgba(45,45,50,0.81); width: 0%; height:100%; transition: 0.2s; }
.postWrapperContainer h4 { color:#f9bf26; margin-top: 40px; opacity: 0; transition: 0.2s;  }
.postWrapperContainer h3 { position: absolute; display: block; bottom: 6%; color: #fff; opacity: 0; transition: 0.1s; }

.postWrapperContainer:hover .postWrapperBox { position:relative; display:block; padding: 10%; background-color: rgba(45,45,50,0.81); width: 100%; height:100%; }
.postWrapperContainer:hover h4 { color:#f9bf26; margin-top: 0px; opacity: 1; transition: 0.2s; transition-delay: 0.15s; }
.postWrapperContainer:hover h3 { position: absolute; display: block; bottom: 2%; color: #fff; opacity: 1; transition: 0.2s; transition-delay: 0.3s; }

#postWrapper::-webkit-scrollbar, #postWrapper::-webkit-scrollbar-button  { width: 1px; height: 1px; }



.showCaseSingle {
  position: relative; display: block;
  width: calc( 100% - 90px ); height: calc( 100vh - 90px );
  margin: 90px 0 0 90px;
  overflow-x: hidden; 
  background-color: #fff;
}

.showCaseSingleHeader { 
  position: relative; display: block; min-height: 200px; color: #fff; background-color: #2a2a2e; padding: 11.33%;
  background-size: auto 100%; background-position: right; background-repeat: no-repeat;
}
.sCSH1 { background-image: url(../images/showcase1a.png); }
.sCSH2 { background-image: url(../images/showcase2a.png); }
.sCSH3 { background-image: url(../images/showcase3a.png); }
.sCSH4 { background-image: url(../images/showcase4a.png); }
.sCSH5 { background-image: url(../images/showcase5a.png); }
.sCSH6 { background-image: url(../images/showcase6a.png); }
.sCSH7 { background-image: url(../images/showcase7a.png); }
.sCSH8 { background-image: url(../images/showcase8a.png); }


.showCaseSingleHeader h1 { font-size: 4vw; color: #fff; margin-bottom: 20px; }
.showCaseSingleHeader h4 { color: #f9bf26; margin-bottom: 20px; }

.showCaseSingleLine { height: 80px; background-color: #2a2a2e; padding: 0; }
.showCaseSingleLine1 { background-color: #f9bf26; text-align: center; transition: 0.2s; }
.showCaseSingleLine1:hover { background-color: #323236; }
.showCaseSingleLine1 i { color: #fff; line-height: 74px; }

.showCaseSingleDataContainer { position: relative; display: block; max-width: 1200px; margin: 4% auto; }
.showCaseSingleDataContainer .gridcolumn { padding: 2%; }
.showCaseSingleDataContainer .gridcolumn-4 { position: sticky; top: 0; padding: 2%; }
.showCaseSingleDataContainer a:hover { color:f9bf26; }
.showCaseSingleDataContainer i { margin-left: 20px; }





.gridFooter { position: relative; display: block; padding: 14% 0 0; background-color: #262627; height: calc( 100vh - 90px ); }
.logoFooter { position: relative; display: inline-block; float: left; max-width: 100px; }
.gridFooter p { margin: 10px 20px; color: #ababab }
.gridFooter h4 {position: relative; display: inline-block; margin: 10px; color: #f9bf26; line-height: 12px; }
.footerText { font-size: 10vw; font-weight: 800; letter-spacing: 5px; line-height:8vw; color: #444; margin: 0 10px 10px 0; }
























/* MOBILE */

@media only screen and (max-width: 960px) {

.displayDesktop { display: none; }
.displayMobile { display: block; }

html, body { overflow-x: hidden; }
h1 { font-size: 6vw; font-weight:800; letter-spacing: -2px; }
h2 { font-size: 4vw; font-weight:800; letter-spacing: 4px; }
h3 { font-size: 4vw; font-weight:800; letter-spacing: 1px; }
h4 { font-size: 10px; font-weight:800; letter-spacing: 1px; }

hr { border: 0; height: 1px; background: #f9bf26; width:60px; margin: 20px 0px; }

p { font-size: 14px; line-height: 20px; letter-spacing: 1px; }
a { color:#000; text-decoration: none; transition: 0.2s; }
a:hover { color: #000; }

.init0, .init1, .init2, .init3 { margin-top: 50px; }



/*Menu*/
.menuButton { width: 60px; height: 50px; }
.menuButton i { margin: 10px 0 0px 0; }
.menuButtonMinus { top: 23px; margin-left: -10px; width: 20px;} 
.menuContainer { width: 0%; height: calc( 100vh - 50px ); }
.menuColumn { width: 320px; height: calc( 100vh - 50px ); margin-right: -100%; }


.topLine { width: 100%; height: 50px; background-color: #35353a; color: #fff; z-index: 10; }
.topLine .gridcolumn { height: 50px; }
.logo_mamais_full { height: 40px; margin: 0px 0 0px 10px; }

.leftLine {display: block; width: 50px; height: calc( 100vh - 50px); margin-top: 50px; }


.homePage, .aboutPage, .showCase, .showCaseSingle   { width: calc( 100% - 50px ); height: calc( 100vh - 50px ); margin: 50px 0 0 50px; }

.homePageTitle { left: 5%; }
.homePageTitle h1 { font-size: 8vw; }

.pageBottomBar .gridcolumn-1, .pageBottomBar .gridcolumn-5, .pageBottomBar .gridcolumn-4 { display: none; }

.postWrapperContainer { padding: 5%; margin: 0% 5%; min-width: 220px; }
.postWrapperBox { padding: 5%; width: 100%; }
.postWrapperContainer h4 { margin-top: 5px; opacity: 1; }
.postWrapperContainer h3 { bottom: 1%; opacity: 1; }


.showCaseSingleHeader { min-height: 400px; padding: 0% 0 0 0;}



.showCaseSingleHeader h1 { font-size: 11vw; color: #fff; margin-bottom: 1px; background-color: rgba(0, 0, 0, 0.5); padding: 2% 0 2% 5%; }
.showCaseSingleHeader h4 { color: #f9bf26; margin-bottom: 20px; background-color: rgba(0, 0, 0, 0.5); padding: 2% 0 2% 5%; }



.gridFooter { position: relative; display: block; padding: 14% 0 0; background-color: #262627; height: calc( 100vh - 90px ); }
.logoFooter { position: relative; display: inline-block; float: left; max-width: 100px; }


}