@charset "utf-8";
/*Personal CSS Document*/

                                    /*Smartphone Styles portrait*/
@media (min-width:320px)
{
    /*Navbar*/
    .web-logo{
        width: 70px;
        height: 70px;
    }
    .home-icon{
        width: 23px;
        height: 23px;
    }
    .facebook-icon{
        width: 23px;
        height: 23px;
    }
    .behance-icon{
        width: 23px;
        height: 23px;
    }
    .linkedin-icon{
        width: 23px;
        height: 23px;
    }
    .find-me{
        width: 150px;
        height: 25px;
        padding-left: 30px;
        padding-bottom: 5px;
    }
    /*HOME*/
    .portrait{
        width: 300px;
    }
    .header{
        font-family: prometo, sans-serif;
        font-weight: 400;
        font-style: normal;
        color: #5ABF7E;
        font-size: 19pt;
    }
    .welcome-message{
        padding-top: 50px;
    }
    .welcome{
        color: #FFFFFF;
        font-family: 'Zen Kaku Gothic New', sans-serif;
        font-size: 12pt;
    }
    .subtitle{
        font-family: prometo, sans-serif;
        font-weight: 400;
        font-style: normal;
        color: #4A4AB5;
        font-size: 16pt;
    }
    .caption{
        color: #4A4AB5;
        font-family: 'Zen Kaku Gothic New', sans-serif;
        font-weight: 800;
        font-size: 10pt;
    }
    .home-bubbles{
        width: 130px;
      }
    /*PORTFOLIO*/
    .town-pad {
        padding-left: 10%;
        height: auto;
        width: 90%;
    }
    /*ABOUT*/
    .line{
        background-color: #5ABF7E;
    }
    .portfolio-desc, .about-desc, .contact-desc {
        color: #FFFFFF;
        font-family: 'Zen Kaku Gothic New', sans-serif;
        font-size: 12pt;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    /*Footer*/
.footer-item, .copyright{
    font-family: prometo, sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 10pt;
    color: #30305A;
    }
    .bottom-logo{
        width: 87px;
        height: 70px;
    }
    .bubbles-port{
        height: 800px;
    }
}

                                    /*Smartphone Styles landscape*/
@media (min-width:480px)
{
}

                                        /*Desktop Styles*/
@media (min-width:1200px)
{
       /*NAVBAR*/
    .web-logo{
        width: 80px;
        height: 80px;
    }
    .home-icon{
        width: 28px;
        height: 28px;
    }
    .facebook-icon{
        width: 28px;
        height: 28px;
    }
    .behance-icon{
        width: 28px;
        height: 28px;
    }
    .linkedin-icon{
        width: 28px;
        height: 28px;
    }
    .find-me{
        width: 100%;
        height: 20px;
    }
        /*HOME*/
    .portrait{
        width: 350px;
    }
    .header{
        font-family: prometo, sans-serif;
        font-weight: 400;
        font-style: normal;
        color: #5ABF7E;
        font-size: 26pt;
    }
    .bubbles{
        width: 480px;
    }
    .welcome{
        color: #FFFFFF;
        font-family: 'Zen Kaku Gothic New', sans-serif;
        font-size: 14pt;
    }
    .home-bubbles{
      width: 230px;
    }

    /*FOOTER*/
.footer-item, .copyright{
    font-family: prometo, sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 10pt;
    color: #30305A;
}
.bottom-logo{
    width: 97px;
    height: 80px;
}
    /*PORTFOLIO PAGE*/
    .bubbles-port{
        height: 1500px;
    }
    .portfolio-desc, .about-desc, .contact-desc {
        color: #FFFFFF;
        font-family: 'Zen Kaku Gothic New', sans-serif;
        font-size: 14pt;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .caption{
        color: #4A4AB5;
        font-family: 'Zen Kaku Gothic New', sans-serif;
        font-weight: 800;
        font-size: 10pt;
    }
    .subtitle{
        font-family: prometo, sans-serif;
        font-weight: 400;
        font-style: normal;
        color: #4A4AB5;
        font-size: 18pt;
    }
    .town-pad {
        padding-left: 10%;
        height: auto;
        width: 90%;
    }
    
    
/*ABOUT*/
    .line{
        background-color: #5ABF7E;
    }

/*CONTACT*/
    .break{
        height: 180px;
    }

}
                                            /*Other CSS*/
/*CONTACT Page and NAVBAR Icon Hover*/
.envelope-effect:hover {
    transform: scale(1.1);
    transition: all .5s;
}

.facebook-effect:hover {
    transform: scale(1.1);
    transition: all .5s;
}

.mobile-effect:hover {
    transform: scale(1.1);
    transition: all .5s;
}

.linkedin-effect:hover {
    transform: scale(1.1);
    transition: all .5s;
}

.social-media:hover {
    transform: scale(1.2);
    transition: all .5s;
}

/*Scroll Java*/
.home-card {
    opacity: 0;
    transform:translateY(50px);
    transition: all 1s ease-in;
}

.home-card.show{
    opacity: 1;
    transform:translateY(0px);
}

.home-card-1 {
    opacity: 0;
    transform:translateY(-50px);
    transition: all 1s ease-in;
}

.home-card-1.show{
    opacity: 1;
    transform:translateY(-0px);
}

.home-card-2 {
    opacity: 0;
    transform:translateY(50px);
    transition: all 1s ease-in;
}

.home-card-2.show{
    opacity: 1;
    transform:translateY(0px);
}

.home-bubbles {
    opacity: 0;
    transform:translateY(-300px);
    transition: all 1.7s ease-in;
}

.home-bubbles.show{
    opacity: 1;
    transform:translateY(0px);
}

.portrait {
    opacity: 0;
    transform:translateY(-80px);
    transition: all 1s ease-in;
}

.portrait.show{
    opacity: 1;
    transform:translateY(0px);
}

.adobe {
    opacity: 0;
    transform:translateY(50px);
    transition: all 1s ease-in;
}

.adobe.show{
    opacity: 1;
    transform:translateY(0px);
}

.website {
    opacity: 0;
    transform:translateY(-50px);
    transition: all 1s ease-in;
}

.website.show{
    opacity: 1;
    transform:translateY(-0px);
}

.concept {
    opacity: 0;
    transform:translateY(50px);
    transition: all 1s ease-in;
}

.concept.show{
    opacity: 1;
    transform:translateY(0px);
}

.bubbles-port {
    opacity: 0;
    transform:translateY(-200px);
    transition: all 1s ease-in;
}

.bubbles-port.show{
    opacity: 1;
    transform:translateY(0px);
}

.testimonials {
    opacity: 0;
    transform:translateY(-20px);
    transition: all 1s ease-in;
}

.testimonials.show{
    opacity: 1;
    transform:translateY(10px);
}

.brand {
    opacity: 0;
    transform:translateY(50px);
    transition: all 1s ease-in;
}

.brand.show{
    opacity: 1;
    transform:translateY(0px);
}

.contact-card {
    opacity: 0;
    transform:translateY(-100px);
    transition: all 1s ease-in;
}

.contact-card.show{
    opacity: 1;
    transform:translateY(20px);
}

.contact-card-1 {
    opacity: 0;
    transform:translateY(100px);
    transition: all 1s ease-in;
}

.contact-card-1.show{
    opacity: 1;
    transform:translateY(20px);
}

/*Bubble Lines*/
hr {
    background-color:#4A4AB5;
    height: 7px;
    border-radius: 20px;
  }

/*Portfolio hover #1, #2, #6, and #7*/
.card-img-top, .card-img-top-2, .card-img-top-6, .card-img-top-7{
    position: relative;
  }

  .card-img-top, .card-img-top-2, .card-img-top-6, .card-img-top-7{
    color: #FFFFFF;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: 10pt;
  }

  .card-img-top:before {
    content: attr(data-hover);
    visibility: hidden;
    opacity: 0;
    width: 220px;
    height: 220px;
    background-color: #30305A;
    color: #fff;
    text-align: center;
    border-radius: 4px;
    transition: opacity 1s ease-in-out;
    position: absolute;
    padding-top: 95px;
    padding-left: 5px;
    padding-right: 5px;
  }

  .card-img-top-2:before {
    content: attr(data-hover);
    visibility: hidden;
    opacity: 0;
    width: 235px;
    height: 220px;
    background-color: #30305A;
    color: #fff;
    text-align: center;
    border-radius: 4px;
    transition: opacity 1s ease-in-out;
    position: absolute;
    padding-top: 95px;
    padding-left: 5px;
    padding-right: 5px;
  }

  .card-img-top-6:before {
    content: attr(data-hover);
    visibility: hidden;
    opacity: 0;
    width: 220px;
    height: 220px;
    background-color: #30305A;
    color: #fff;
    text-align: center;
    border-radius: 4px;
    transition: opacity 1s ease-in-out;
    position: absolute;
    padding-top: 95px;
    padding-left: 5px;
    padding-right: 5px;
  }

  .card-img-top-7:before {
    content: attr(data-hover);
    visibility: hidden;
    opacity: 0;
    width: 220px;
    height: 220px;
    background-color: #30305A;
    color: #fff;
    text-align: center;
    border-radius: 4px;
    transition: opacity 1s ease-in-out;
    position: absolute;
    padding-top: 65px;
    padding-left: 5px;
    padding-right: 5px;
  }
  
  .card-img-top:hover:before {
    opacity: .9;
    visibility: visible;
  }

  .card-img-top-2:hover:before {
    opacity: .9;
    visibility: visible;
  }

  .card-img-top-6:hover:before {
    opacity: .9;
    visibility: visible;
  }

  .card-img-top-7:hover:before {
    opacity: .9;
    visibility: visible;
  }

  .card-img-top:active::before {
    opacity: .9;
    visibility: visible;
  }

  .card-img-top-2:active::before {
    opacity: .9;
    visibility: visible;
  }

  .card-img-top-6:active::before {
    opacity: .9;
    visibility: visible;
  }

  .card-img-top-7:active::before {
    opacity: .9;
    visibility: visible;
  }

 /*hover #5*/
  .card-img-top-5{
    position: relative;
  }

  .card-img-top-5{
    color: #FFFFFF;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: 10pt;
  }

  .card-img-top-5:before {
    content: attr(data-hover);
    visibility: hidden;
    opacity: 0;
    width: 288px;
    height: 155px;
    background-color: #30305A;
    color: #fff;
    text-align: center;
    border-radius: 4px;
    transition: opacity 1s ease-in-out;
    position: absolute;
    padding-top: 68px;
    padding-left: 5px;
    padding-right: 5px;
  }

  .card-img-top-5:hover:before {
    opacity: .9;
    visibility: visible;
  }

  .card-img-top-5:active::before {
    opacity: .9;
    visibility: visible;
  }

  /*hover #3 and #4*/
  .card-img-top-3, .card-img-top-4 {
    position: relative;
  }

  .card-img-top-3, .card-img-top-4{
    color: #FFFFFF;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: 10pt;
  }

  .card-img-top-3:before {
    content: attr(data-hover);
    visibility: hidden;
    opacity: 0;
    width: 180px;
    height: 325px;
    background-color: #30305A;
    color: #fff;
    text-align: center;
    border-radius: 4px;
    transition: opacity 1s ease-in-out;
    position: absolute;
    padding-top: 65px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .card-img-top-4:before {
    content: attr(data-hover);
    visibility: hidden;
    opacity: 0;
    width: 183px;
    height: 325px;
    background-color: #30305A;
    color: #fff;
    text-align: center;
    border-radius: 4px;
    transition: opacity 1s ease-in-out;
    position: absolute;
    padding-top: 80px;
    padding-left: 10px;
    padding-right: 10px;
  }
  
  .card-img-top-3:hover:before {
    opacity: .9;
    visibility: visible;
  }

  .card-img-top-4:hover:before {
    opacity: .9;
    visibility: visible;
  }

  .card-img-top-3:active::before {
    opacity: .9;
    visibility: visible;
  }

  .card-img-top-4:active::before {
    opacity: .9;
    visibility: visible;
  }
/*Buttons*/
.buttons{
    font-family: prometo, sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 10pt;
    color: #30305A;
}

/*Navbar*/
.nav-item, .nav-link{
    font-family: prometo, sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 11pt;
    color: #30305A;
}

/*Homepage Carousel*/
/*Button icon padding on portfolio carousel*/
.carousel-control-prev, .carousel-control-next {
    padding-top: 1.5vw;
}

/*Secondary and Previous CSS*/
/*Contact page icon grid and image*/

h4 {
    font-family: roc-grotesk-extrawide, sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 12pt;
    color: #5abf7e;
    padding-top: 5%;
}

.icon-para {
    color: #969696;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: 13pt;
}

.w-100 {
    width: 100% !important;
  }

.home-desc {
    color: #7777b4;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: 12pt;
}

/*Portfolio Card Descriptions*/
.card-desc {
    color: #7777b4;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: 12pt;
    padding-top: 5px;
    padding-left: 10px;
    text-align: center;
}

.card-desc-2 {
    color: #7777b4;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: 12pt;
    padding-top: 5px;
    padding-left: 15px;
    text-align: center;
}

.card-desc-3 {
    color: #7777b4;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: 12pt;
    padding-top: 5px;
    padding-left: 20px;
    text-align: center;
}

.card-desc-4 {
    color: #7777b4;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: 12pt;
    padding-top: 5px;
    padding-left: 25px;
    text-align: center;
}

/*"CLICK TO VIEW" portfolio*/
.click-row {
    color: #5abf7e;
    font-family: roc-grotesk-extrawide, sans-serif;
    font-weight: 500;
    font-style: italic;
    font-size: 10pt;
}

/*Portfolio cards fade*/
.circle-cards {
    border-radius: 4px;
    padding: 18px 18px;
    cursor: pointer;
    transition: .4s transform cubic-bezier(.155,1.105,.295,1.12),.3s box-shadow,.3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
    opacity: 0.6;
}

.circle-cards:hover{
    transform: scale(1.20);
    opacity: 100;
    transition: all 0.2s ease-in;
}

/*About Me skill paragraphs and Contact page icon paragraphs*/
.col-lg-4 {
    color: #7777b4;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: 12pt;
}

.btn-lg {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    color: #5abf7e;
    transform: translate(1%, 80%);
}

.px-3 {
    background-color:#969696;
    background-size: cover;
}

/*Space between lines and picture rows in portfolio*/
.picture-row {
    padding-top: 1.5vw;
}

/*Button icon padding on portfolio carousel*/
.carousel-control-prev, .carousel-control-next {
    padding-top: 1.5vw;
}

.centered {
    color: #1e1e4b;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: 2vw;
}

.display-5 {
    font-family: roc-grotesk-wide, sans-serif;

    font-weight: 300;
    
    font-style: normal;
    font-size: 30pt;
    color: #7777b4;
}

.intro, .lead {
    color: #969696;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: 20pt;
}

h2 {
    font-family: roc-grotesk-extrawide, sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 12pt;
    color: #5abf7e;
    padding-top: 5%;
}

h3 {
    color: #5abf7e;
    font-family: roc-grotesk-extrawide, sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 15pt;
}

.card-body {
    background-color: #5858bb;
}

.btn-group {
    background-color: #5abf7e;
    font-family: 'Zen Kaku Gothic New', sans-serif;
}

/*Body Elements, all pages*/
body {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    background-color: #1e1e4b;
}

.description {
    font-family: roc-grotesk-extrawide, sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 12pt;
    color: #5abf7e;
}