/*============= RESET STYLE =============

/*-- iPhone X Remove Gutters
Ignore W3C Validation error for this style. --*/
html {
    padding: env(safe-area-inset);
    scroll-behavior: smooth;
 }
 
 /*-- Body Resets --*/
 body {
   /* font-family: 'Merriweather Sans', sans-serif; */
   font-family: 'Cardo', serif;

    color: #17191c;

    background-color: #000000;
    background-attachment: fixed;

    overflow-x: hidden;
    margin: 0;
    padding: 0;
 
 }


 .main {
    position: absolute;
    top: 0px;
    bottom: 0vh;
    width: 100%;    
    
    overflow-y: scroll;
    overflow-x: hidden;

    padding: env(safe-area-inset);
    scroll-behavior: smooth;
    visibility: hidden;
  }

  


   #loading {
      transition: .5s ease;
      width: 100%;
      height: 100%;
      margin: auto;
      top: 0;
      left: 0;
      position: fixed;
      display: block;
      opacity: 0.95;
      /*background-color: #17191c;*/
      z-index: 99;
      text-align: center;
      color: #FFFFFF;
      
    }
    

    @-webkit-keyframes rotation {
		from {
				-webkit-transform: rotate(0deg);
		}
		to {
				-webkit-transform: rotate(359deg);
		}
}


    #loading-image {
      display: flex;
      color: #f1f1f1;
      position: relative;
      top: 50%;
      width: 2%;
      margin: auto;
      z-index: 100;
      -webkit-animation: rotation 2s infinite linear;

      
    }
  
    .loading h2{
        text-transform: uppercase;
        position: relative;
        top: 30%;
        z-index: 100;
    }


  .services{
   background: linear-gradient(rgba(0.1, 0.1,0.2, 0.3), rgba(0.3, 0.3,0.7, 0.1));
   /*background: linear-gradient(rgba(255, 255, 255, 1),rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 1));*/
   /* min-height: 100vh; */


  }

  .alt{
   background: linear-gradient(rgba(0.1, 0.1,0.2, 0.1), rgba(0.1, 0.1,0.2, 0.3));
   /* min-height: 100vh; */
}


 
 /* Custom appearance for the scrollbar */
 ::-webkit-scrollbar {
    width: 5px;
 }
 
 ::-webkit-scrollbar-track {
    border-radius: 0px;
    background-color: #17191c;
    opacity : 0;
 
 }
 
 ::-webkit-scrollbar-thumb {
    border-radius: 7px;
    background-color: #505962;
 }
 

.anchor{
   margin-top: 2rem;
   margin-bottom: 2rem;
}

#main {
     margin-left:0;
     margin-right: 0;
     height: 100vh;
     flex: 3;
     overflow:auto;
     visibility: hidden;
}



.title {
   padding-top: 0.5rem;
   padding-bottom: 1rem;
}

.title img{
   margin-top: auto;
   margin-bottom: auto;
   padding-right: 2rem;
   padding-left: 2rem;
   height:35px;


}


.round{
   border-radius: 50%;
}


 /*================= GENERAL SECTIONS ==============*/
 
 .heading {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.4rem;
    padding-bottom: 1rem;
    margin-top: 2rem;
    color: #505962;
 }
 
 /*-- Scrollspy Offset --*/
 .offset:before {
    content: "";
    height: 0rem;
    display: block;
    margin-top: 0rem;
 }
 
 /* General dark theme */

 
 .dark p {
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1.9rem;
 }

 .dark .emphasis{
    font-size: 1.2rem;
    font-weight: 700;
    color: #f1f1f1;
 }


 
 
 .dark a{
    text-decoration: none;
    color: #AAA;
    font-size: 1.13rem;
    text-decoration: none;
    font-weight: 700;
    text-decoration: underline;
 
 }

 .dark .svg-inline--fa{
    color: #f1f1f1;
    font-size: 1.4rem;
    transition: all 0.5s;
 }

 .dark .svg-inline--fa:hover{
    color: #999999;
 }
 

 .text-light{
   color:#999999!important;
 }

 
 /*============= NAVIGATION =============*/
 
.navbar{
   visibility: hidden;
}


 .navbar-brand img{
    height: 2.4rem;
 }
 
 .navbar-dark {
    padding: .1rem 1rem;
    padding-left: 0.2rem;
    font-size: 1rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: .1rem;
    background-color: rgba(0.1, 0.1, 0.1, 0.9)!important;
    color: #FFFFFF;
    padding-right: 0px;
    z-index : 1000;
    border-bottom: 1px grey solid;
}

/* change navbar-toggler inside lines color (stroke) */
.navbar-dark span.navbar-toggler-icon {
   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='grey' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
   color: grey;
 }
 /* change hamburger button border color */
 button.navbar-toggler.navbar-toggler-right {
   border-color: grey;
   border-radius: 0;
 }
 
 .navbar-nav li {
    padding-right: .8rem;
 }
 
 .navbar-nav .nav-link {
   font-size: 1.05rem;
    padding-top: .5rem;
    text-shadow: 0px 0px #f1f1f1;
 }
 
 .navbar-nav .nav-link:hover,
 .navbar-nav .nav-link.active {
    color:#999999!important;
 }
 
 /*============= LANDING PAGE =============*/
 
 /*-- Fixed Landing Page Section --*/
 .landing{
    height: 100vh;

 }

 .home-inner{
    background-image: url('../img/bandpic.jpg');
    background-color: #000000;
    position: fixed;
    visibility: hidden;

 }


 
 /* Links located at bottom right of landing page */
 .home-bottom{
    position: absolute;
    justify-content: center;
    align-items: flex-end;
    bottom: 1rem;
    right: 1rem;
 }
 
 .landing-links a{
    color: #FFFFFF;
    text-decoration: none;
 }
 
  ul.landing-links{
    list-style-type: none;
    display: inline;
    padding: 0;
    margin: 0 auto;
    max-width: 11.8rem;
 }
 
 ul.landing-links li{
    margin: 0 auto;
    display: inline;
    padding: 0.8rem;
 }
 
 .landing-links .svg-inline--fa {
    font-size: 1.5rem;
    text-shadow: 4px 4px 8px #FFFFFF;

 }

 .landing-links .svg-inline--fa:hover {
    color: #999999;
}
 
 
 /*-- Landing Page Content --*/
 .caption{
    z-index: 1;
    position: absolute;
    top: 70%;
    text-align: center;
 }

 .logo{
   z-index: 1;
   position: absolute;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   text-align: center;

}

.logo p{
   font-weight: 500;
   font-size: 7rem;
   font-family: 'Literata', serif;
   color: #101819;
   text-shadow: 4px 4px 8px #FFFFFF;
}
 
 .caption .svg-inline--fa {
    font-size: 2rem;
    color: #f1f1f1;
    transition: transform 0.5s ease;
 }
 
 .caption .svg-inline--fa:hover {
    transform: scale(1.2);
 }

 .caption img{
    width: 30rem;
 }
 
 
 /*============= PLS SECTION =============*/

 .card {
    margin-top:30px;
    margin: 20px 20px;
    border-radius: 0;
    /* padding-bottom: 1rem; */
    line-height: 1.2rem;
    background-color: #f1f1f1;
   box-shadow: 0 2px 5px 0 rgba(68,136,82, 0.16), 0 2px 10px 0 rgba(168,136,82, 0.12);
   -webkit-transition: .25s box-shadow;
   transition: .25s box-shadow;
  }


  .card h4 {
   text-transform: unset;
   color: #505962;
   font-weight: 700;
   font-size: 1.3rem;
   }

.card p {
    font-weight: 300;
    line-height: 1.1rem;
    font-size: 1.0rem;
   color:#101819;
}


.card-link {
   font-style: normal;
   font-weight: 300;
   line-height: 1.2rem;
   font-size: 0.9rem;
   color:#101819;
   background-color: #f1f1f1;
   padding: 5px 5px;
   border-radius: 4px;
   border: 1px solid gray;
   transition: 0.5s;
}

.card-link a{
   font-size: 1.1rem;
}

.card:hover .card-link-mod{
   opacity: 1;
}

.card-link:hover{
   color:#101819;
   background-color: #505962; 
}

.card-link:hover a{
   color:#f1f1f1;
}

.card-link-mod {
   position: absolute;
   top: 40%;
   opacity: 0.3;
   transition: all 0.5s;
}


  .card:focus, .card:hover {
   box-shadow: 0 5px 11px 0 rgba(151, 151, 151, 0.3), 0 4px 15px 0 rgba(151, 151, 151, 0.25);
  }



  .card-img-top{
    margin-top:0px;
  }

  .card-img-icon{
   position: absolute;
   top: 40%;
   }



  .review{
     font-style: italic;
     line-height: 1.25rem!important;
     font-size: 1.0rem;
  }

 
 /*============= PORTFOLIO SECTION =============*/


 /*============= SERVICES SECTION =============*/
 
 @media screen and (max-width: 768px) {


   .modal.custom .modal-dialog {
      width:95%;
   }

   .dark p {
      font-size: 1.05rem;
      color: #000000;
      font-weight: 400;
      line-height: 1.7rem;
   }
   

   ::-webkit-scrollbar {
      width: 3px;
   }


 }


 
 @-webkit-keyframes zoom {
   from {-webkit-transform:scale(0.8)} 
   to {-webkit-transform:scale(1)}
 }
 
 @keyframes zoom {
   from {transform:scale(0.8)} 
   to {transform:scale(1)}
 }
 




 
 /*============= CONTACT SECTION =============*/
 
 .footer{
 }
 
 .foooter img{
    height: 2rem;
    width: 3rem;
 }
 
 .bottomlogo {
    width: 18rem; 
 }
 
 .footer a{
    color: #f1f1f1;
    text-decoration: none;
 }
 
 .footer p {
    font-size: 1.1rem;
    font-weight: 300;
    line-height: 1.9rem;
 }
 
 ul.social{
    list-style-type: none;
    display: inline;
    padding: 0;
    margin: 0 auto;
    max-width: 11.8rem;
 }
 
 ul.social li{
    margin: 0 auto;
    display: inline;
    padding: 1.4rem;
 }
 
 .footer .svg-inline--fa {
    font-size: 1.7rem;
    color: #999999;
 }
 
 .footer .svg-inline--fa:hover {
    color: #FFFFFF;
 }
 
 hr.socket {
    border-top: .2rem solid #FFFFFF;
 }
 
 .cryptedmail{
   color: #f1f1f1;
 }

 .cryptedmail:after {
    content: attr(data-name) "@" attr(data-domain) "." attr(data-tld); 
  }

  .cryptedmail:hover {
    color: #999999;
  }
 
  .mail a{
     font-weight: 300;
  }
 
 /*============= MODAL WINDWOW =============*/

 
  
  /* 100% Image Width on Smaller Screens */
  @media only screen and (max-width: 700px){

  }
 
  @media (max-width: 426px){

 }
 
 
 
 /*============= MEDIA QUERIES =============*/
 
 /* Medium (md) devices (tablets, 768px and under) */
 @media (max-width: 767.98px) {

   .navbar-nav li {
   }
   

    .wall{
       margin: 0 auto;
       padding-left: 5rem;
       padding-right: 5rem;
    }
 
    ul.landing-links li{
       padding: 0.4rem;
    }
    
    .landing-links .svg-inline--fa {
       font-size: 1.6rem;
    }
 
    
    ul.social-proj li{
       padding: 0.5rem;
    }
 
    ul.social li{
       margin: 0 auto;
       display: inline;
       padding: 0.9rem;
    }
    
    .footer .svg-inline--fa {
       font-size: 1.6rem;
    }

    .caption img{
      width: 15rem;
   }

   .partners img{
      width: 70%; 
      height: auto;
   }
 
    
 
 }
 
 @media (max-width: 992px){
    .navbar-nav li {
       padding-right: .3rem;
    }
 }
 
 @media (min-width: 992px) {
    .wall{
       margin: 0 auto;
       padding-left: 10rem;
       padding-right: 10rem;
    } 
 }
 
 @media (min-width: 1200px) {
    .wall{
       margin: 0 auto;
       padding-left: 20rem;
       padding-right: 20rem;
    }   
 }
 
 /*============ BOOTSTRAP BREAK POINTS:
 
 Extra small (xs) devices (portrait phones, less than 576px)
 No media query since this is the default in Bootstrap
 
 Small (sm) devices (landscape phones, 576px and up)
 @media (min-width: 576px) { ... }
 
 Medium (md) devices (tablets, 768px and up)
 @media (min-width: 768px) { ... }
 
 Large (lg) devices (desktops, 992px and up)
 @media (min-width: 992px) { ... }
 
 Extra (xl) large devices (large desktops, 1200px and up)
 @media (min-width: 1200px) { ... }
 
 =============*/
 
 /*-- Fixed Landing Page Section --*/
 .landing {
    position: relative;
    width: 100%;
    display: table;
    z-index: -1;

 }
 .home-wrap {
    clip: rect(0, auto, auto, 0);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
 }
 .home-inner {
    display: table;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
 }