header{
    background-color: #290a59;
    background: -moz-linear-gradient(top, #290a59 0%, #650f61 100%);
    background: -webkit-linear-gradient(top, #290a59 0%,#650f61 100%);
    background: linear-gradient(to bottom, #290a59 0%,#650f61 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#290a59', endColorstr='#650f61',GradientType=0 );

    border-bottom: 9px solid #34C89B;

    max-height: 500px;
    overflow: hidden;
}

p{
    font-size: 1.1rem;
}

.header-secondary{
    background-image: url(images/duotone_background.jpg);
    background-size: cover;
}

.heading-top{
    background-color:#ffffff;
    border-radius: 5px;
    font-family: 'Noto Sans', Arial, sans-serif;
    font-size: 2.25rem;
    padding: 1rem;
    margin-left: 1rem;
    margin-top: 2rem;
    margin-bottom: 0;
    order:1;
}

.float-nav{
    position:absolute;
    z-index: 1000;
    width: 100%;
}

.nav-top{
    background-color:#ffffff;
    border-radius: 5px;
    margin-top: 2rem;
    margin-left: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    order:2;
}

.nav-link{
    text-decoration: none;
    padding: 0 .5rem;
    font-size: 1.3rem;
    border: 1px solid #ffffff;
}

.active {
    font-weight: bold;
    border: 1px solid #2B2B2B;
    color: #2B2B2B;
    border-radius: 5px;
}

.nav-top-heading {
    font-family: 'Noto Sans', Arial, sans-serif;
    font-size: 2rem;
}

.float-nav .contact{
    order:3;
}

.contact{
    margin-top: 2rem;
    margin-right: 1rem;
    margin-left: 1rem;
    border-radius: 5px;
    border:none;
    text-decoration:none;
    color: #ffffff;
    font-size: 1.2rem;
}

.tagline{
    padding-top:5rem;
    padding-left:2rem;
}

.tagline h1{
    color:#ffffff;
    font-size: 2.5rem;
}

.swoosh {
    background-color: #290A59;
    transform: skew(-14deg);
    z-index: 100;
    left:50px;
    min-width: 150px;
}

.swoosh-secondary{
    display:none;
}

.portrait-bg{
    background-image: url(images/duotone_background.jpg);
    background-size: cover;
}

.portrait-bg-secondary{
    display:none;
}

.portrait-img{
    padding-top: 80px;
    max-height:600px;
    text-align: right;
}

.fancy-card .card{
    background-color:#AB406B;
    min-height: 200px;
}

.fancy-card .card:nth-child(1){
    background-image: url(design-assets/02_web_banner.jpg);
    background-size: cover;
    background-position: center center;
}

.fancy-card .card:nth-child(2){
    background-image: url(ui-assets/case-study-notif.jpg);
    background-size: cover;
    background-position: center center;
}

.fancy-card .card:nth-child(3){
    background-image: url(eLearning-assets/images/06_course.PNG);
    background-size: cover;
    background-position: center center;
}

.fancy-card .card:nth-child(4){
    background-image: url(illustration-assets/01-comic-cover.jpg);
    background-size: cover;
    background-position: center center;
}

.fancy-card h3{
    background-color: rgba(255, 255, 255, 0.9);
    padding:1rem;
    font-size:1.7rem;
    display: inline-block;
    border-radius: 0 5px 5px 0;
}

.fancy-card a{
    text-decoration: none;
    color:#ffffff;
    text-shadow: 1px 1px 2px #093B2C;
}

.fancy-card .card-footer{
    text-align:center;
    background-color: rgba(0,0,0,.7);
    border-top:2px solid #000000;
}

.about-section{
    background-color: #E8E8E8;
    padding: 2rem;
}

.text-content{
    background-color: #ffffff;
    padding: 2rem;
    border-radius: 5px;
    max-width: 1024px;
    margin: 0px auto;
}

.text-content h2{
    font-size: 2rem;
    column-span: all;
    margin-bottom:2rem;
}

.social{
    list-style: none;
    padding: 0;
    justify-content: space-around;
    margin-top: 2rem;
}

.social li{
    border-radius: 50%;
    padding: 8px 17px;
    line-height: 2;
}

i{
    color:#ffffff;
}

.resume-section{
    background-color: #290a59;
    background: -moz-linear-gradient(top, #290a59 0%, #650f61 100%);
    background: -webkit-linear-gradient(top, #290a59 0%,#650f61 100%);
    background: linear-gradient(to bottom, #290a59 0%,#650f61 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#290a59', endColorstr='#650f61',GradientType=0 );

    padding: 2rem;
}

.resume-section ul{
    margin-bottom: 2rem;
}

.summary{
    column-span: all;
    color: #650f61;
}

footer {
    background-color: #290A59;
    color: #ffffff;
    padding: 1rem;
}

h6 {
    font-weight: bold;
}

footer .contact {
    margin: 0;
}

footer p{
    margin:0;
}

/*secondary pages*/ 

.tagline-secondary h1{
    margin-top:80px;
    margin-bottom:2rem;
}

.card-columns{
    background-color:#E8E8E8;
    padding-top: 1rem;
}

.double{
    column-count: 2;
}

.double .btn-success{
    width:100%;
    text-decoration: none;
    color:white;
}

.card-header{
    background-color: #290A59;
    color:white;
    border-bottom: 3px solid #34C89B;
}

.card-body p{
    margin:1rem;
}



.lost-message p{
    font-size:1.875rem;
    text-align: center;
    padding-top: 2rem;
    font-weight: bold;
}

.lost-splash{
    font-size: 25rem;
    text-align: center;
    color:#FF1C77;
    line-height: 1;
}

.triangle-bottomright {
    width: 0;
    height: 0;
    position: absolute;
    right:0;
    bottom: 0px;
    border-bottom: 500px solid #290A59;
    border-left: 800px solid transparent;
    z-index:100;
  }

  .triangle-bottomleft {
    width: 0;
    height: 0;
    border-bottom: 400px solid #34C89B;
    border-right: 800px solid transparent;
    position: absolute;
    bottom: 0;
    left:0;
  }

  .pattern-field{
    background-image: url(images/duotone_background.jpg);
    background-size: cover;
    min-height: 300px;
  }


/*media queries*/
@media (max-width: 1024px) {
    header {
        max-height: 400px;
    }

    .portrait-img{
        max-height:440px;
    }

}

@media (max-width: 768px) {
    .float-nav{
        position:static;
        width: auto;
    }

    header{
        max-height: 100%;
        background-image: url(images/duotone_background.jpg);
    background-size: cover;
    }

    .heading-top{
        margin:0;
        border-radius:0;
        background-color:#290A59;
        color:#ffffff;
        order:1;
    }

    .nav-top-heading{
        font-size: 1.2rem;
    }

    .nav-top{
        margin:0;
        border-radius:0;
        padding:.5rem;
        line-height: 2;
        order:3;
    }

    .float-nav .contact{
        margin:0;
        border-radius:0;
        padding:.5rem;
        order:2;
    }

    .nav-link{
        font-size: 1rem;
    }

    .tagline{
        padding-top:1rem;
        padding-bottom:1rem;
    }

    .tagline h1{
        font-size: 1.3rem;
    }

    .header-secondary{
        min-height: 200px;
    }

    .tagline-secondary h1{
        padding:0;
        margin:0;
    }

    .swoosh{
        display:none;
    }

    .portrait-bg{
        background:none;
    }

   .portrait-img{
       padding:0;
   }

   .fancy-card .card{
       min-height:0;
       border:none;
       border-radius:0;
       margin-bottom:1rem;
       min-width: 100px;
   }

   .card-body{
       padding:0;
   }

   .card-title{
       margin:0;
   }

    .fancy-card h3{
        display:block;
        border-radius:0;
        background-color: rgba(0,0,0,.4);
        color:white;
        text-shadow: 1px 1px 2px #000000;
    }

    .about-section{
        padding:.5rem;
    }

    .text-content{
        padding:1rem;
    }

    .resume-section{
        padding:.5rem;
    }

    footer .contact{
        margin-top:1rem;
    }



    .lost-message p{
        font-size:1rem;
        text-align: center;
        padding-top: 2rem;
        font-weight: bold;
    }
    
    .lost-splash{
        font-size: 10rem;
        text-align: center;
        color:#FF1C77;
        line-height: 1;
    }
    
    .triangle-bottomright {
        width: 0;
        height: 0;
        position: absolute;
        right:0;
        bottom: 0;
        border-bottom: 250px solid #290A59;
        border-left: 400px solid transparent;
        z-index:100;
      }
    
      .triangle-bottomleft {
        width: 0;
        height: 0;
        border-bottom: 210px solid #34C89B;
        border-right: 300px solid transparent;
        position: absolute;
        bottom: 0;
        left:0;
      }
    
      .pattern-field{
        background-image: url(images/duotone_background.jpg);
        background-size: cover;
        min-height: 200px;
      }

}

@media (max-width: 500px) {
    .double{
        column-count: 1;
    }

}