/* CSS Document */


/********** BODY SETUP **********/
body, html {
  height: 100%; 
  /*overflow: visible;*/
  overflow-x:hidden;
}


/************************* NAV BAR *****************************/


.nav {
	
	background-color: white; 
	/*opacity: 1;
	filter: alpha(opacity=95); */
	height: 107px;
}

.navbar-nav {
    flex-direction: row;
}

.navbar-nav a {
  transition: all .32s ease-in-out;
}


/*
.shadow {
    box-shadow: 0 .1rem 2px -2px rgba(0,0,0,.15);
}*/


/* Logo */
.brand {
		width: 333px;
		margin-top: 0;
		padding: 0; 
        margin-right: 10em;
        margin-left: -0.8em;
}

/* Links */
.nav-link {
   /* padding-right: 1em !important;
    padding-left: 1em !important; */
    color: #3C3C3C;
}

a: hover {
    text-decoration: none;
}

a.nav-link:link{ 
	color:#606060;
}

a.nav-link:visited{ 
	color:#606060;	
}

a.nav-link:hover {
	color: #D15257 !important;
    text-decoration: none;
}

.mynav a.active {
  color: #D15257;
}


.navbar-expand-lg .navbar-nav .nav-link {
        padding-left: 1em;
        padding-right: 1em;
}


 /* Phone */
        
@media (min-width: 1px) and (max-width: 576px) {

    .navbar-expand-lg .navbar-nav .nav-link {
            padding-left: 0.4em;
            padding-right: 0.4em;
            font-size: 17px;
    }
    
    .navbar-nav {
    flex-direction: column;
    }
            
}


/**** Mobile Hamburger Menu Bars *****/


.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #666;
  margin: 6px 0;
  transition: 0.4s;
}


/**************************** CONTAINER **************************/

.container {
    width: 100%;
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.7em;
    padding-right: 1.7em;
    /*padding-bottom: 1em;*/
}

.container-portfolio {
    width: 100%;
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0em;
    padding-right: 0em;
    padding-bottom: 1em;
}

/* For devices larger than 400px */
@media (min-width: 25em) {
  .container {
    width: 100%;
    padding: 0 1rem;
  }
    
  .container-portfolio {
    width: 100%;
    padding: 0 1rem;
  }
}
/* For devices larger than 550px */
@media (min-width: 48em) {
  .container {
    width: 90%;
    padding: 0;
  }
    
   .container-portfolio {
    width: 100%;
    padding: 0;
  }
}


/*.container {
  position: relative;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  box-sizing: border-box;
} 

padding-left: 30px;
padding-right: 30px;

*/


/**************************** Heros **************************/


.overview-hero {
    height: 250px;
}

.pattern1 {
    background-image: url(../images/banners/overview-hero1.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.pattern2 {
    background-image: url(../images/banners/overview-hero2.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.pattern3 {
    background-image: url(../images/banners/overview-hero3.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.page-hero {
    height: auto;  
}

.hero-img1 {
    background-image: url(../images/web/ntrepid/web-hero1.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; 
}

.hero-img2 {
    background-image: url(../images/web/sydney/web-hero2.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover; 
}


.hero-img3 {
    background-image: url(../images/web/next/web-hero3.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover; 
}

.hero-img4 {
    background-image: url(../images/web/step/web-hero4.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover; 
}

.hero-img5 {
    background-image: url(../images/web/step-app/web-hero5-2.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover; 
}

.hero-img6 {
    background-image: url(../images/web/discounts/web-hero6.2.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover; 
}

.explore1 {
    background-image: url(../images/web/explore/explore6.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; 
}


 /* Phone */
        
        @media (min-width: 1px) and (max-width: 576px) {
            
            .explore1 {
                    background-position: bottom left;
                }
            
        }



/**************************** Background Colors **************************/

/********** Ntrepid ********/

    .background-ntrepid1 {
            background: #0E2846;  /* fallback for old browsers */
            background: -webkit-linear-gradient(to bottom, #0E2846, #11345F);  /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(to bottom, #0E2846, #11345F); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }
    
    .background-ntrepid2 {
            background: #1B4F8E;  /* fallback for old browsers */
            background: -webkit-linear-gradient(to bottom, #1B4F8E, #0E2847);  /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(to bottom, #1B4F8E, #0E2847); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }
    
    .background-ntrepid3 {
            background: #F2F2F2;  /* fallback for old browsers */
            background: -webkit-linear-gradient(to bottom, #F2F2F2, #CCCCCC);  /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(to bottom, #F2F2F2, #CCCCCC); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }
    
    .background-ntrepid4 {
            background: #0D263E;  /* fallback for old browsers */
            background: -webkit-linear-gradient(to bottom, #0D263E, #123255);  /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(to bottom, #0D263E, #123255); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }

/********** Sydney *********/

.background-sydney1 {
            background-image: url(../images/web/sydney/sydney-background1.svg);
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover; 
    }

.background-sydney2 {
            background: #576250;  /* fallback for old browsers */
            background: -webkit-linear-gradient(to bottom, #78886E, #586351);  /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(to bottom, #78886E, #586351); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }


.background-sydney3 {
            background: #FBF8F2;
    }

.leaves {
            position: absolute;
            content: url(../images/web/sydney/sydney-background3.svg);
            z-index: -1;
        }

.background-sydney4 {
            background: #3C505C;  /* fallback for old browsers */
            background: -webkit-linear-gradient(to bottom, #3C505C, #30404A);  /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(to bottom, #3C505C, #30404A); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }


/********** Next Step Go *********/

.background-next1 {
            background: #FFFFFF;  /* fallback for old browsers */
            background: -webkit-linear-gradient(to bottom, #FFFFFF,#D6D7DD);  /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(to bottom, #FFFFFF, #D6D7DD); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }

.background-next2 {
            background: #34767E;  /* fallback for old browsers */
            background: -webkit-linear-gradient(to bottom, #73B482, #34767E);  /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(to bottom, #73B482, #34767E); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }

.background-next3 {
            background: #FFFFFF;  /* fallback for old browsers */
            background: -webkit-linear-gradient(to bottom, #FFFFFF, #D6D7DD);  /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(to bottom, #FFFFFF, #D6D7DD); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }

.background-next4 {
            background: #4C918A;  /* fallback for old browsers */
            background: -webkit-linear-gradient(to bottom, #18565D, #4C918A);  /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(to bottom, #18565D, #4C918A); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }


/********** Step Web *********/

.background-step1 {
            background: #0B2A48;  /* fallback for old browsers */
            background: -webkit-linear-gradient(to bottom, #12487C, #0B2A48);  /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(to bottom, #12487C, #0B2A48); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }


/********** Step App *********/

.background-stepapp1 {
            background: #10446A;  /* fallback for old browsers */
            background: -webkit-linear-gradient(to bottom, #2B5A7D, #10446A);  /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(to bottom, #2B5A7D, #10446A); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }

.background-stepapp2 {
            background: #F0F0F0; 
    }


/********** Member Discounts *********/

.background-mem1 {
            background: #165490;  /* fallback for old browsers */
            background: -webkit-linear-gradient(to bottom, #3D8FCB, #165490);  /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(to bottom, #3D8FCB, #165490); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }

.background-mem2 {
            background: #F9F9F9; 
    }


/**************************** FORMATTING **************************/

/* Formatting Text on Hero Banners */

.cursive-align-c {
    padding-top: 3.4em;
    text-align: center;
}

.hero-align-c {
    padding-top: 4.7em;
    text-align: center;
}

.hero-align-left {
    padding-top: 4.7em;
    padding-left: 8em;
    padding-right: 33em;
    text-align: left;
    padding-bottom: 5em;
}

.ux-hero {
    padding-top: 4.7em;
    padding-left: 8em;
    padding-right: 33em;
    text-align: left;
    padding-bottom: 5em;
}

/* Aligning Images Center */
.img-c {
    display: block;
    margin-left: auto;
    margin-right: auto;

        }

/* Adding Space Above Text */
.p-top {
    padding-top: 2.5em;
}

.p-top2 {
    padding-top: 5em;
}

.align-c {
    padding-top: 5em;
    text-align: center;
}

 .align-c2 {
    padding-top: 4em;
    text-align: center;
}

.align-l {
    padding-top: 5em;
    padding-left: 4.5em;
    padding-right: 5em;
    text-align: left;
}

.align-l2 {
    padding-top: 0;
    padding-left: 3.5em;
    padding-right: 3em;
    text-align: left;
}

.bottom {
    padding-bottom: 3em;
}

.bottom2 {
    padding-bottom: 5em;
}

/* Space Above Rows on Graphics & Web Pages */
.port-top {
    margin-top: 2.8em;   
}

.port-top2 {
    margin-top: 2.8em;    

}

/*** Below Regular Size ***/

 /* Tablet */
    @media (min-width: 576px) and (max-width: 991px) {
        
        .nav {
	       height: 170px;
            }
        
         .hero-align-left {
            padding-top: 4.7em;
            padding-left: 6em;
            padding-right: 6em;
            text-align: left;
            padding-bottom: 4.7em;
        }
        
        .align-l {
    
            padding-top: 5em;
            padding-left: 2em;
            padding-right: 1em;
            text-align: left;
        }
    }

 /* Phone */
        
        @media (min-width: 1px) and (max-width: 576px) {
            
             .hero-align-left {
                padding-top: 4.7em;
                padding-left: 2.3em;
                padding-right: 3em;
                text-align: left;
                padding-bottom: 4.7em;
            }  
            
            .align-l {
    
                padding-top: 2em;
                padding-left: 1.7em;
                padding-right: 1.7em;
                text-align: left;
            }
            
            .align-l2 {
    
                padding-left: 1em;
                padding-right: 1em;
            }
            
            .port-top2 {
                margin-top: 0.2em;  

            }
            
        }


/************************* LINES *****************************/


hr {
    height: 1px;
    width:100%;
    border-width:0;
    background-color:#D9D9D9;
}



/************************* ANIMATION *****************************/

#fade {
	animation-delay: 5s;
	animation-delay: 1s;
}

#fade3 {
	animation-delay: 2s;
}

#fadebtn {
	animation-delay: 2s;
}

#fadehead {
	animation-delay: 1s;
}

.img-hover-zoom {
  width: 300px;
  height: 700px; /* Modify this according to your need */
  overflow: hidden; /* Removing this will break the effects */
}

/* Slow-motion Zoom Container */
.img-hover-zoom--slowmo img {
  transform-origin: 50% 65%;
  transition: transform 5s, filter 3s ease-in-out;
}

/* The Transformation */
.img-hover-zoom--slowmo:hover img {
  filter: brightness(100%);
  transform: scale(3);
}





/**************************** Home Page **************************/
 
        .dana {
            width: 90%;
            padding: 3em 0;
        
        }
        
        .pop-container {
            padding-left: 3em;
            padding-top: 5em;
            padding-bottom: 1em;
        }
        
        .pop1 {
            position: absolute;
            content: url('images/pops/pop1.svg');
            transform: translate(-24%, -31%);
            width: 50%;
            z-index: -1;
        }
        
        .background-grey {
            background-color: #F9F9F9;   
        }
        
        .projects-align-c {
            padding-top: 4em;
            text-align: center;
            padding-left: 10em;
        }
        
        .web-project-left {
            content: url('images/home/ipad1.png');
            width: 110%;
            margin-top:-8em;
            margin-left:-7em;
            transform: rotate(7deg);
        }
        
        .web-project-right {
            content: url('images/home/phone1.png');
            width: 80%;
            margin-top:-8em;
            margin-left:11em;
            transform: rotate(4deg);    
        }
        
        .background-drk-grey {
            background-color: #F0F0F0;
        }
        
        .graphic-design-right {
            content: url('images/home/mag.png');
            width: 120%;
            margin-top:2em;
            margin-bottom:1em;
            margin-left: -1em;
            transform: rotate(10deg); 
        }
        
        .background-main {
            /*background-color: #A13C41;*/
            background: #F7F8F8;  /* fallback for old browsers */
            background: -webkit-linear-gradient(to bottom, #C6575D, #76262A);  /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(to bottom, #C6575D, #76262A); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        }
        
        
        
        /* Home Phone */
        
        @media (min-width: 1px) and (max-width: 576px) {

            
        /*** HOME ***/
            .pop-container {
                padding-left: 3em;
                padding-top: 1em;
        }
            
        .projects-align-c {
            padding-top: 4em;
            text-align: center;
            padding-left: 2em;
        }
        
        .web-project-left {
            margin-top:2em;
        }
        
        .web-project-right {
            margin-left:7.5em; 
        }
            
        .align-l {
            padding-left: 2em;
            padding-bottom: 1.7em;
        }
            
        .pop-container2 {
                padding-left: 3em;
                padding-top: 0;
                }
        }
        



/**************************** About Page **************************/

        .dana2 {
            width: 70%;
            padding: 3em 0;
        }

        .dana3 {
            width: 90%;
            padding: 3em 0;
        }
        
        .pop-container2 {
            padding-left: 1em;
            padding-top: 5em;
            padding-bottom: 1em;
        }
        
        .pop2 {
            position: absolute;
            content: url('images/pops/pop2.svg');
            transform: translate(120%, 2%);
            width: 50%;
            z-index: -1;
        }
        
        .space {
            padding-left: 2em;
        }
        
         .background-pink {
            background-color: #F58F86;   
        }
        
        
        .align-c2 {
            padding-top: 4em;
            text-align: center;
        }
        
        .icons1 {
            width: 60%;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
        
        .question {
            text-align: center;
            display: block;
            margin-top: 1em;
        }
        
        .answers {
            text-align: center;
            display: block;
            margin-top: 0.7em;
        }
        
         .adventure {
            width: 100%;
        }
        

        
/* About Tablet */
            @media (min-width: 576px) and (max-width: 991px) {

                .mobile-bottom {
                padding-bottom: 4em;
                }
            }

    
/* About Phone */
        
        @media (min-width: 1px) and (max-width: 576px) {
            
               .dana2 {
                    width: 90%;
                    padding: 0 0;
                    padding-top: 2.3em;
                }
            
            .mobile-bottom {
                padding-bottom: 4em;
            }
            
             .question {
                margin-top: 2em;
            }
            
            .icons1 {
                width: 40%;
            }
            
        }




/**************************** Ntrepid Page **************************/

    .info-arch {
        width: 100%;
        image-rendering: auto;
    }
    
    
    .align-l-ipad {
        padding-top: 5em;
        padding-left: 4.5em;
        padding-right: 5em;
        text-align: left;
    }
    
    .ipads {
        width: 100%;
    }
    
    .full-screenshot {
        width: 100%;
        box-shadow: 0 0 20px rgba(96, 96, 96, 0.5);
    }
    
    .sticky-l  {
        position: sticky;
        z-index: 1;
        top: 20px;
        left: 10px;
        padding: 8px 0;
    }
    
    .phone-image {
        width: 62%;
        padding-top: 2.5em;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    
    .phone-image2 {
        width: 100%;
    }
    
    .vid {
        width: 90%;
        display: block;
        margin-top: 4em;
        margin-left: auto;
        margin-right: auto;
        /*border: 1px solid #606060;*/
    }
    
    .pages1 {
            display: block;
            width: 90%;
            margin-top: 5em;
            margin-right:auto;
            margin-left: auto;
            
        }
 

     /* Ntrepid Tablet */
    @media (min-width: 576px) and (max-width: 991px) {
        
        .pages1 {
            width: 100%;
        }
        
    }
 
     /* Ntrepid Phone */
        
        @media (min-width: 1px) and (max-width: 576px) {
            
            .info-arch {
                width: 100%;
                image-rendering: auto;
            }
            
              .align-l-ipad {
                padding-top: 5em;
                padding-left: 1.7em;
                padding-right: 1.7em;
                text-align: left;
            }
            
        }




/**************************** Sydney Page **************************/


       .sydney-logo {
           width: 50%;
           padding-top: 1em;
        }
        
        .type {
            width: 53%;
            
        }
        
        .colors {
            margin-top: 1.5em;
            width: 50%;
        }
        
        .ipad-image {
            width: 90%;
            padding-top: 6em;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
        
        .full-screenshot-middle {
            width: 60%;
            box-shadow: 0 0 20px rgba(96, 96, 96, 0.5);
        }
        
        .sydney-phone {
            width: 82%;
            padding-top: 3.6em;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
            
        .components-img {
            width: 100%;
        }
        
        .pages2 {
            display: block;
            width: 90%;
            margin-right:auto;
            margin-left: auto;
        }
        
        .sydney-align-l {
            padding-top: 5em;
            padding-left: 4.5em;
            padding-right: 5em;
            text-align: left;
        }
   
  
/* Sydney Tablet */

    @media (min-width: 576px) and (max-width: 991px) {
        
         .sydney-align-l {
                padding-top: 2em;
                padding-left: 0;
                padding-right: 2em;
                text-align: left;
            }
        
    }
        
/* Sydney Phone */
        
    @media (min-width: 1px) and (max-width: 576px) {
            
            .sydney-logo {
                width: 100%;
            }

            .type {
                width: 100%;  
            }

            .colors {
                margin-top: 1em;
                width: 100%;
                padding-left: 1em;
            }
        
            .ipad-image {
                width: 90%;
                padding-top: 1em;
                display: block;
                margin-left: auto;
                margin-right: auto;
            }
        
            .sydney-align-l {
                padding-top: 2em;
                padding-left: 1.7em;
                padding-right: 1.7em;
                text-align: left;
            }
        }



/**************************** Next Step Go PAGE **************************/


        .next-colors {
            margin-top: 1.5em;
            margin-left: -1em;
            width: 50%;
        }

        .next-align-c {
            padding-top: 0;
            margin-top: -7.3em;
            text-align: center;
        }

        .dash {
            width: 50%;
            box-shadow: 0 0 20px rgba(96, 96, 96, 0.5);
            margin-top: 2.3em;
        }

        .dash2 {
            width: 90%;
            box-shadow: 0 0 20px rgba(96, 96, 96, 0.5);
            margin-top: 4em;
        }

         .next-vid {
            width: 90%;
            display: block;
            margin-left: auto;
            margin-right: auto;
            margin-top: 5em;
            box-shadow: 0 0 20px rgba(96, 96, 96, 0.5);
        }


 .ntrepid-vid {
            width: 90%;
            display: block;
            margin-left: auto;
            margin-right: auto;
            margin-top: 5em;
            box-shadow: 0 0 20px rgba(96, 96, 96, 0.5);
        }


/**************************** Step Page **************************/


        .step-devices {
            display: block;
            width: 90%;
            margin-top:4em;
            margin-left:auto;
            margin-right: auto;
        }

    /* extra
        .step-left {
            content: url('images/web/step/ipad2.png');
            width: 200%;
            margin-top:0;
            margin-left:0;
            transform: rotate(16deg);
        }
        
        .step-right {
            content: url('images/web/step/phone1.png');
            width: 100%;
            margin-top:15em;
            margin-left:0;
            transform: rotate(-20deg);    
        }*/


/* Step Phone */        
    @media (min-width: 1px) and (max-width: 576px) {
            
        .step-devices {
            display: block;
            width: 105%;
            margin-top: 2.8em;
            margin-left:auto;
            margin-right: auto;
        }
        
    }

/**************************** Step APP Page **************************/

       .step-app {
            width: 70%;
            margin-left: 1em;
            margin-top: 3em;
            box-shadow: 0 0 20px rgba(96, 96, 96, 0.5);
        }


/**************************** Member Discounts Page **************************/

 .page {
            display: block;
            width: 55%;
            margin-top: 5em;
            margin-right:auto;
            margin-left: auto;
        }

.mem-vid {
            width:72%;
            display: block;
            margin-left: auto;
            margin-right: auto;
            margin-top: 3em;
        }

.mem-vid2 {
            width: 90%;
            display: block;
            margin-left: auto;
            margin-right: auto;
            margin-top: 5em;
            box-shadow: 0 0 20px rgba(96, 96, 96, 0.5);
        }
            


.mem-align-l {
    
                padding-top: 5em;
                padding-left: 4.5em;
                padding-right: 5em;
                text-align: left;
            }


/* Member Phone */        
    @media (min-width: 1px) and (max-width: 576px) {
        
        .mem-vid {
            width:100%;
        }
        
        .mem-vid2 {
            width: 90%;
            display: block;
            margin-left: auto;
            margin-right: auto;
            margin-top: 3em;
            box-shadow: 0 0 20px rgba(96, 96, 96, 0.5);
        }
            
       .mem-align-l {
    
                padding-top: 4.3em;
                padding-left: 1.7em;
                padding-right: 1.7em;
                text-align: left;
            }
        
    }


/**************************** Experience Page **************************/


        .background-grey {
            background-color: #F9F9F9;   
        }

        .skills-top{
            margin-top: 3em;
        }

        .icons2 {
            width: 56%;
            display: block;
            margin: auto;
            margin-top:1em;
        }

        .skills-heading {
            display: block;
            margin-right: 0.2em;
            text-align: center;
            font-family: 'Neue Haas Grotesk Disp W05_55R';
            color:#fdfdfd;
            font-size: 20pt;
            margin-bottom: 0.6em;
            margin-top: 0.3em;
        }
        
        .pink-box {
            background-color: #F06C6C; 
            height: 477px;
            margin-left: 1em;
            padding-left: 2em;
            padding-right: 2em;
            padding-top: 1em;
            -webkit-animation: background 10s cubic-bezier(1,0,0,1) infinite;
            animation: background 10s cubic-bezier(1,0,0,1) infinite; 
        }
        
        .red-box {
            background-color: #B51010; 
            height: 477px;
            margin-left: 1em; 
            padding-left: 2em;
            padding-right: 2em;
            padding-top: 1em;
        }
    

        @-webkit-keyframes background {
          0% { background-color: #F06C6C; }
          33% { background-color: #B51010; }  
          67% { background-color: #F06C6C; }
          100% { background-color: #D15257; }
        }

        @keyframes background {
          0% { background-color: #F06C6C; }
          33% { background-color: #B51010; }  
          67% { background-color: #F06C6C; }
          100% { background-color: #D15257; }
        }

        .logo {
            width: 60%;
            min-width: 150px;
            margin-top: 4em;
        }
        
         .logo-ntrepid {
            width: 60%;
            min-width: 150px;
            margin-top: 7em;
        }
        
        .logo-atpco {
            width: 300px;
            min-width: 150px;
            margin-top: 3em;
        }
        
          .logo-jmurj {
            width: 250px;
            min-width: 150px;
            margin-top: 2em;
        }
        
        .work-title {
            margin-top: 1.5em;
            color: #3C3C3C;
            font-family: 'Neue Haas Grotesk Disp W05_75B';
            font-size: 26pt;
            letter-spacing: 0.03em;
            margin-bottom: 0.25em;
            
        }

        .work-align {
            margin-left: 2em;
            margin-bottom: 1em;
        }
        
        .work-descrip {
            font-size: 12pt;
        }


/*  Experience Phone */
        
    @media (min-width: 1px) and (max-width: 576px) {
        
         .icons2 {
            width: 56%;
            display: block;
            margin: auto;
            margin-top: 0;
        }
        
        .skills-top{
            margin-top: 2em;
        }
        
            .pink-box {
            margin-top: 1em;
            margin-left: 1.3em; 
            margin-right: 1.7em; 
            height: auto;
        }
        
        .red-box {
            margin-top: 1em;
            margin-left: 1.3em; 
            margin-right: 1.7em; 
            height: auto;
        }
        
        .work-align {
            margin-left: 1em;
        }

        }



/**************************** Contact Page **************************/

        .msg {
            margin-bottom: 2.5em;
        }


/**************************** FOOTER **************************/

.footer {
    background-color: #F9f9f9;
    padding:6px 0px 1px 2.1em;
    border-top: 1px solid #D9D9D9;
}


/**************************** Page Loader **************************/



.spinner-wrapper{
    width: 100%;
    height: 100%;
    background-color: #F9F9F9;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spinner {
    position: relative;
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
}

.spinner::before,
.spinner:after{
    content: "";
    position: absolute;
    border-radius: 50%;
}

.spinner:before {
    width: 100%;
    height: 100%;
    background-image:linear-gradient(90deg, #F8D7D7 0%,#B51010 100% );
    animation: spin .5s infinite linear;
}
.spinner:after {
    width: 90%;
    height: 90%;
    background-color: #F9F9F9;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }

}

/*Simulate page content*/
.main-content{

}





/**************************** Graphic Page **************************/


.pad-left {
    padding-left: 3em;
    padding-right: 1em;
}

.pad {
    padding-left: 2em;
    padding-right: 2em;
}


.pad-right {
    padding-right: 3em;
}

.graphic {
    width:100%;
}

.graphic-modal-imgs {
    width: 95%; 
    margin-top: 1em;
    margin-left: 1.3em;
}

.modal-header {
    margin-top:-1em;
    height: 3.2em;
    background-color: #fff;
    border-bottom: 1px solid #C4C4C4;
}

.close {
    margin-top: -1em;
}

.modal-dialog{
    overflow-y: initial !important;
}

.modal-body{
    height: 70vh;
    overflow-y: auto;
}

.modal-img {
    width: 100%;
    margin: 1em 0;
}


.modal-footer {
    height: 1em;
    background-color: #fff;
    border-top: 1px solid #C4C4C4;
}

.modal-button {
    margin: 0;
    width: 10%;
    border-radius: 0.2em;
    display: inline-block;
    padding: 0.2em;
    background-color: #5E4373;
    text-decoration: none;
    color: white;
    text-align: center;
    font-size: 11pt;
}

/* MODAL SIDE TEXT */

.sidenav {
    width: 276px;
    position: fixed;
    z-index: 1;
    margin-left: 1.6em;
    margin-top: 1em;
    overflow-x: hidden;
    padding: 9px 0;
    display: block;
    
}

.main {
    margin-left: 140px; /* Same width as the sidebar + left position in px */
    font-size: 28px; /* Increased text to enable scrolling */
    padding: 0px 10px;
}

 .mobile-content {
    display: none;
    }


.modal-content {
    width: 110%;
    left: -3em;
}

/* STICKY SIDEBAR */

.sidebar {
  position: fixed;
  background-color: whitesmoke;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1; 
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}

}



/* Graphic Tablet */    

@media (min-width: 576px) and (max-width: 991px) { 
    
        .sidenav {
            display: none;
    }
    
        .mobile-content {
            display: contents;
    }
      
}
	


/* Graphic Mobile */ 

@media (min-width: 1px) and (max-width: 576px) {
    
      
    .pad-left {
        padding-left: 3em;
        padding-right: 3em;
        margin-bottom: 1.5em;
    }

    .pad {
        padding-left: 3em;
        padding-right: 3em;
        margin-bottom: 1.5em;
    }

    .pad-right {
        padding-left: 3em;
        padding-right: 3em;
        margin-bottom: 1.5em;
    }
    
      .sidenav {
      display: none;
    }
    
    .mobile-content {
        display: contents;
    }
    
    
    .mobile-headleft {
        margin-left: 1.6em;
        margin-right: 1em;
        margin-top: 0.5em;
    }
    
    .mobile-left {
        margin-left: 2em;
        margin-right: 1em;
        margin-bottom: 0.7em;
    }
    
    .modal-content {
        width: 100%;
        left: 0.3em;
}
}




/******************** MOBILE SCREENS NAV ********************/



@media (min-width: 1px) and (max-width: 576px) {
    
    
     .nav {
		background-color: white; 
		opacity: 0.95; 
		filter: alpha(opacity=95); 
		height: auto;
		margin-top: 0;
	}
	
	.nav-item {
		text-align: center;
		margin-top: 7px;
		font-size: 14pt;
	} 

    
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-left: 0.4em;
        padding-right: 0.4em;
        font-size: 17px;
    }   
    
    .brand {
		width: 250px;
		margin-top: 0;
		padding: 0;
		margin: 0;
        margin-left: -0.77em;
	}
    
       
    ol {
      display: table;
      margin-left: 2em;
    }

}