/*Fonts*/
@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,300;0,500;0,800;1,500&display=swap');

/* Pre-set */
*{
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}
ul{
    list-style: none;
    padding-left: 0;
}
a{
    text-decoration: none;
}

/* Start */
/* set family font */
body{
    font-family: 'Mulish', sans-serif;
    transition: .3s ease all;
}
/*set dark mode*/
body.dark{
    background: rgb(22, 22, 22);
}
header{
    width: 100%;
    height: 160px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 9rem;
}
/* Hero background */
.hero-wrapper{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    background:url(../media/img/new-header-2024.png) center no-repeat;
    background-size: cover;
}
.mail-picture{
    width: auto;
    height: auto;
    position: relative;
    top: 70px;
    z-index: 2;
}
.mail-picture button.mail{
    width: auto;
    height: auto;
    background: #054887;
    border-radius: 5px;
    padding: 2px;
    display: flex;
    justify-content: center;
    align-items: center;

    -webkit-animation: scale-up-center 0.8s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: scale-up-center 0.8s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}


/*gmail logo*/
.mail-picture button.mail .logo-mail{
   padding-left: 15px;
}
.mail-picture button.mail .logo-mail img{
    width: 40px;
    height: auto;
    display: block;
    margin-right: 7px;
}
.mail-picture button.mail .dir{
    display: flex;
    align-items: center;
    padding-right: 15px;
}
.mail-picture button.mail .dir p{
    margin: 0;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 500;
}

/* Picture */
.mail-picture .picture {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1.5rem;
}
.mail-picture .picture img{
    width: 155px;
    box-shadow: -3px 4px 43px -23px rgba(0,0,0,0.88);
    border-radius: 10rem;
}
body.dark .mail-picture .picture img{
    box-shadow: -3px 4px 43px -23px rgba(158, 158, 158, 0.88);
}


/* Bar */
.bottom-bar{
    width: 100%;
    height: 6px;
    position: absolute;
    bottom: 0.6rem;
    background: #fff;
}
body.dark .bottom-bar{
    background: rgb(182, 175, 175);
}
/*btn dark mode*/
.dark-cont{
    position: absolute;
    top: 14rem;
    display: flex;
    justify-content: flex-end;
    padding-right: 4rem;
    z-index: 45;
}
.dark-cont .dark-wrapper button{
    background: #343D5B;
    border-radius: 1000px;
    border: none;
    position: relative;
    cursor: pointer;
    display: flex;
    outline: none;
    padding: 0 2px;
    font-size: 1.3rem;
    box-shadow: -3px 4px 43px -23px rgba(0,0,0,0.88);
    -webkit-animation: slide-left 1.5s ease-out both;
	        animation: slide-left 1.5s ease-out both;
}
body.dark .dark-cont .dark-wrapper button{
    box-shadow: -3px 4px 43px -23px rgba(158, 158, 158, 0.88);
}
.dark-cont .dark-wrapper button::after{
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;
    background: #f1f1f1;
    top: 0%;
    left: 0;
    right: unset;
    border-radius: 100px;
    transition: .3s ease all;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, .2);
}
.dark-cont .dark-wrapper button.active{
    background: rgb(13, 143, 13);
    color: #fff;
}
.dark-cont .dark-wrapper button.active::after{
    right: 0;
    left: unset;
}
.dark-cont .dark-wrapper button span{
    width: 30px;
    height: 30px;
    line-height: 30px;
    display: block;
    background: none;
    color: #fff;
}


/* btn go to top */
.gtop{
    display: none;
    width: auto;
    height: auto;
    background: #06579E;
    border: none;
    outline: none;
    border-radius: 10px;
    padding-bottom: 3px;
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 98;
}
/* delete outline after click */
.gtop:active{
    outline: none;
}
.gtop:focus{
    outline: none;
}
.gtop i{
    font-size: 2rem;
    color: #fff;
    cursor: pointer;
    padding: .5rem;
}

/* Info section */

.sec1 .title{
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-animation: slide-right 1.5s ease-out both;
	        animation: slide-right 1.5s ease-out both;
}
.sec1 .title .dyd h1{
    font-size: 2.5rem;
    color: #06579E;
    font-weight: 500;
}
body.dark .sec1 .title .dyd h1{
    color: rgb(240, 235, 235);
}
.sec1 .title .case{
    padding-right: 0.5rem;
}
.sec1 .title .case i{
    font-size: 1.8rem;
    color:  #06579E;
}
body.dark .sec1 .title .case i{
    color: rgb(221, 215, 215);
}


.sec1 .arrow-down{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2.5rem 0;
}
.sec1 .arrow-down i{
    font-size: 2.5rem;
    color: #054887;
	-webkit-animation: slide-right 1s ease-out both;
	        animation: slide-right 1s ease-out both;
}
body.dark .sec1 .arrow-down i{
    color: rgb(206, 202, 202);
}

/* Skills */
.skills-title{
    text-align: center;
}
.skills-title h2{
    margin-bottom: 1.8rem;
    color: #054887;
    font-weight: 500;

    -webkit-animation: slide-fwd-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-fwd-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
body.dark .skills-title h2{
    color: #339bfd;
}
.skills-title h2 span{
    text-decoration: underline;
}
.skills-title .skills-lyst{
    max-height: 16.5rem;
    overflow-y: hidden;
}
.skills-title .skills-lyst ul li{
    margin-bottom: 0.7rem;
    font-size: 1.3rem;
    text-transform: uppercase;
    font-weight: 600;
    color: #0870D1;

    -webkit-animation: slide-fwd-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-fwd-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
body.dark .skills-title .skills-lyst ul li{
    color: rgb(221, 215, 215);
}
.skills-title .plus{
    margin-top: 0.8rem;
}
.skills-title .plus i{
    font-size: 2rem;
    color: #054887;

    -webkit-animation: slide-fwd-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-fwd-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
body.dark .skills-title .plus i{
    color: #0082fc;
}
/* info */
.info-title{
    border-left: 2px solid #bababe;
}
.info-title h2{
    text-align: center;
    margin-bottom: 1.8rem;
    color: #054887;
    font-weight: 500;

    -webkit-animation: slide-fwd-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-fwd-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
body.dark .info-title h2{
    color: #339bfd;
}
.info-title h2 span{
    text-decoration: underline;
}
.info-title .info-lyst{
    display: flex;
    justify-content: center;
    font-size: 1.3rem;
}
.info-title .info-lyst ul{
    text-align: start;
}
.info-title .info-lyst ul li, .info-title .info-lyst ul li i{
    font-size: 1.4rem;
    font-weight: 800;
    color: #0870D1;

    -webkit-animation: slide-fwd-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-fwd-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
body.dark .info-title .info-lyst ul li , body.dark .info-title .info-lyst ul li i{
    color: #1d8ef8;
}
.info-title .info-lyst ul li p{
    display: inline-block;
    font-weight: 500;
    color: #000; /*#06579*/

    -webkit-animation: slide-fwd-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-fwd-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
body.dark .info-title .info-lyst ul li p{
    color: rgb(240, 235, 235);
}
/* modal */
.my-modal-wrapper{
    width: 100%;
    height: 100%;
    display: none;
    background: rgba(0, 0, 0, 0.418);
    justify-content: center;
    align-items: center;
    z-index: 99;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .5s all;
}
.my-modal-wrapper.active{
    display: flex;
}
.my-modal{
    display: block;
    width: 97%;
    height: auto;
    margin: 0 auto;
    background: rgb(5,72,135);
    background: linear-gradient(175deg, rgba(5,72,135,1) 0%, rgba(15,35,83,1) 88%);
    box-shadow: 1px 3px 8px 0px rgba(0,0,0,0.87);
    border: 3px solid #bababe;
    border-radius: 15px;
    -webkit-animation: slide-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.my-modal-header{
    max-width: 95%;
    height: auto;
    border-bottom: 2px solid #bababe;
    margin-bottom: 30px;
}
.my-modal-h-title{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10px 0;
}
.my-modal-h-title h2{ 
    color: #fff;
    font-weight: 600;
    font-size: 2.2rem;
}
.my-modal-h-close{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.my-modal-h-close button{
    background: none;
    border-radius: 10px;
    border: 3px solid #fff;
    padding: 3px 5px;
    border-radius: 11px;
}
.my-modal-h-close button:active{
    outline: none;
}
.my-modal-h-close button:focus{
    outline: none;
}
.my-modal-h-close button i{
    color: #fff;
    font-size: 1.6rem;
}

.sk-con{    
    width: 95%;
    height: auto;
    text-align: center;
    padding: 25px;
    margin-bottom: 1rem;
}
.sk-lyst{
    border-right: 1px solid #fff;
}
.sk-lyst:last-child{
    border-right: none;
}
.sk-lyst ul li{
    margin: 25px 0;
    font-size: 1.5rem;
    color: #fff;
    text-transform: uppercase;
    font-weight: 500;
}
.my-modal-footer{
    width: 95%;
    height: 20px;
    padding: 1.3rem 0;
    border-top: 2px solid #bababe;
    margin: 0 auto;
}




/* section about me */
.sec-1-5{
    background: #55a5eb11;
    margin: 6.8rem 0;
    padding: 2rem 0;
}
.sec-1-5 .h2-back h2{
    color: #0870D1;
    font-weight: 700;
    text-decoration: underline;
    -webkit-animation: slide-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
body.dark .sec-1-5 .h2-back h2{
    color: #339bfd;
}
.sec-1-5 .text-1 p, .sec-1-5 .text-2 p{
    font-size: 1.3rem;
    font-weight: 500;
     -webkit-animation: slide-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
body.dark .sec-1-5 .text-1 p, body.dark .sec-1-5 .text-2 p{
    color: rgb(221, 215, 215);
}
.sec-1-5 .text-1 p span.profsn{
    font-weight: 700;
    color: #054887;
}
body.dark .sec-1-5 .text-1 p span.profsn{
    color: #1d8ef8;
}
.sec-1-5 .text-2 p span.typesw{
    font-style: italic;
    color: #06579E;
}
body.dark .sec-1-5 .text-2 p span.typesw{
    color: #1d8ef8;
}
.sec-1-5 .text-2 p span.typesoth{
    font-weight: 600;
    color: #0870D1;
}
body.dark .sec-1-5 .text-2 p span.typesoth{
    color: #1d8ef8;
}
.sec-1-5 .who{
    margin-bottom: 1rem;
}

/* icon */
.icons{
    margin: 7rem 0;
}
.icons .icon{
    display: flex;
    justify-content: center;
    align-items: center;
}
.icons .icon img{
    -webkit-animation: slide-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}



/* Employment */
.sec2{
    margin-top: 4rem;
    background: rgba(247, 244, 244, 0.87);
    padding: 2rem 0;
}
body.dark .sec2{
    background: rgba(32, 32, 32, 0.87);
}
.employ-title{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2.3rem;
    color:#054887;
}
.employ-title h2{
    font-weight: 500;

    -webkit-animation: slide-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
body.dark .employ-title h2{
    color: #339bfd;
}
.employ-title h2 span{
    text-decoration: underline;
}
.employ-title .right-arrow{
    padding-right: 0.3rem;
}
.employ-title .right-arrow i{
    font-size: 1.3rem;

    -webkit-animation: slide-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
body.dark .employ-title .right-arrow i{
    color: #339bfd;
}
/* feed */
.feed{
    margin-bottom: 1.8rem;
}
.feed h3{
    margin-bottom: 1.6rem;
    color: #0870D1;
    font-weight: 600;

    -webkit-animation: slide-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
body.dark .feed h3{
    color: #1d8ef8;
}
.feed p{
    font-size: 1.3rem;
    font-weight: 500;
    text-align: justify;
    color: #000;

    -webkit-animation: slide-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
body.dark .feed p{
    color: rgb(221, 215, 215);
}
.feed p.extra-detail{
    font-size: 1.1rem;
    color: #8c8a99;

    -webkit-animation: slide-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.feed p.date{
    font-size: 1.1rem;
    text-transform: uppercase;
    color: #8c8a99;

    -webkit-animation: slide-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* img */
.image-brand{
    display: flex;
    justify-content: flex-end;
}
.image-brand img{
    max-width: 37%;

    -webkit-animation: slide-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.img-my-company-container{
    margin-left: 3rem;
}
.img-my-company-container img{
    width: 88px;
}

/*  skew div */
.skew{
    width: 100%;
    height: 43px;
    background: #054887;
    transform: skew(0deg, 3deg);
    margin-top: 6rem;
}
body.dark .skew{
    color: #1d8ef8;
}
/*social networks*/
.networks-title{
    margin-top: 3rem;
}
.networks-title h2{
    color: #054887;
    font-weight: 500;

    -webkit-animation: slide-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
body.dark .networks-title h2{
    color: #339bfd;
}
.networks-title h2 span{
    text-decoration: underline;
}
.social-icons{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2rem 0;
}
.social-icons ul{
    margin-bottom: 0;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.social-icons ul li{
    width: 31%;
    display: inline-block;
    text-align: center;
}
.social-icons ul li a{
    font-size: 4rem;
    color: #000000;
    transition: all .2s;
}
body.dark .social-icons ul li a{
    color: rgb(240, 235, 235);
}
/*hover*/
.shadow-pop-bl:hover{
    color: #054887;
}
body.dark .shadow-pop-bl:hover{
    color: #0082fc;
}

.div-decoration1{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
}
.div-decoration1 span{
    width: 140px;
    height: 3px;
    background: #bababe;
    border-radius: 10px;
}

/* contact */
.contact-by{
    width: 100%;
    height: auto;
}
.contact-by h3{
    text-align: center;
    color: #0870D1;
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 2rem;
    
    -webkit-animation: slide-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
body.dark .contact-by h3{
    color: #1d8ef8;
}
.div-decoration2{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
}
.div-decoration2 span{
    width: 3px;
    height: 35px;
    background: #bababe;
    border-radius: 10px;
}

/* second gmail btn */
.mail-2{
    width: auto;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.mail-2 button.mail{
    width: auto;
    height: auto;
    background: #054887;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px;
}

/*gmail logo*/
.mail-2 button.mail .logo-mail{
   padding-left: 15px;
}
.mail-2 button.mail .logo-mail img{
    width: 40px;
    height: auto;
    display: block;
    margin-right: 7px;
}
.mail-2 button.mail .dir{
    display: flex;
    align-items: center;
    padding-right: 15px;
}
.mail-2 button.mail .dir p{
    margin: 0;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 500;
}

/* qr code */
.qr-container {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
}
.qr-container .qr-text h4{
    font-weight: 400;
    text-decoration: underline;

    -webkit-animation: slide-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
body.dark .qr-container .qr-text h4{
    color: rgb(221, 215, 215); 
}
.qr-container .qr-image{
    margin-left: 20px;
}
.qr-container .qr-image img{
    width: 185px;
}

/* footer - skew */
footer{
    width: 100%;
    height: auto;
    padding-bottom: 1rem;
}
footer .skew2{
    width: 100%;
    height: 50px;
    background: #054887;
    margin: 6.4rem 0 1rem 0;
}
body.dark footer .skew2{
    color: #1d8ef8;

}
footer h3{
    margin-bottom: 0;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 500;

    -webkit-animation: slide-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}body.dark footer h3{
    color: rgb(221, 215, 215); 
}


/*mediaquery*/
/* mobile media */
@media only screen and (max-width: 325px){
    .dark-cont {
        padding-right: 0.3rem !important;
    }
    .sec1 .title .dyd h1 {
    font-size: 1.2rem !important;
    }
    .contact-by h3 {
        font-size: 1.8rem !important;
    }
    
}

@media only screen and (max-width: 490px){
    .gtop i {
        font-size: 2.1rem;
    }
    .dark-cont {
        padding-right: 1rem;
    }
    .sec1 .title .dyd h1 {
        font-size: 1.4rem;
    }
    .sec1 .title .case i {
        font-size: 1.4rem;
    }
    .sec1 .arrow-down i {
        font-size: 2rem;
    }
    .info-title{
        margin: 4rem 0 0 0;
        border: none;
    }
    .info-title .info-lyst ul {
        text-align: center;
    }
    .sec-1-5 {
        margin: 4.8rem 0;
    }
    .sec-1-5>.container>.row{
        padding: 0 15px;
    }
    .sec-1-5 .text-1 p, .sec-1-5 .text-2 p {
        font-size: 1.2rem;
    }
    .sec-1-5 .text-1 p{
        margin-bottom: 30px;
    }
    .icons{
        margin: 4rem 0;
    }
    .icon{
        margin: 40px 0;
    }
    .feed{
        padding: 0 10px;
    }
    .image-brand img{
        display: none;
    }
    .networks-title>.row>.col-12{
        padding: 0 0 0 18px;
    }
    .social-icons{
        display: block;
    }
    .social-icons ul{
        width: auto;
        display: block;
        text-align: center;
    }
    .social-icons ul li a {
        font-size: 3.6rem;
    }
    .img-my-company-container{
        display: none;
    }
    .qr-container{
        flex-wrap: wrap;
        margin-top: 4rem !important;
    }
    .qr-container .qr-image{
        margin-left: 0 !important;
        margin-top: 20px;
    }
    .my-modal{
        height: 382px;
        overflow-y: scroll;
        overflow-x: hidden;
    }
    .my-modal-header, .my-modal-footer{
        width: 91%;
    }
    .sk-con{
        padding: 0;
    }
    .sk-lyst{
        border-right: none;
        margin-top: -1rem;
    }
    .sk-lyst ul li {
        font-size: 1.5rem !important;
    }
    .qr-text h4{
        text-align: center;
    }


}


@media only screen and (max-width: 1024px){
    .mail-picture button.mail:hover{
        background: none;
        border: 3px solid #fff;
    }
    .sk-lyst ul li {
        font-size: 1.2rem;
    }

}

@media only screen and (min-width: 1440px){
   .dark-cont {
        padding-right: 8rem;
    }
    
}
@media only screen and (min-width: 1920px){
    .dark-cont {
        padding-right: 10rem;
    }

}

@media only screen and (min-width: 1240px) {
    /*effect hover for social icons*/
  .shadow-pop-bl:hover{
    color: #054887;
    -webkit-animation: shadow-pop-bl 0.3s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
	        animation: shadow-pop-bl 0.3s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
    animation: shadow-pop-bl 0.3s cubic-bezier(0.470, 0.000, 0.745, 2) both;
}

/* btn gmail*/
.mail-picture .mail:hover {
	-webkit-animation: shadow-drop-2-bottom 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: shadow-drop-2-bottom 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.mail-2 .mail:hover {
	-webkit-animation: shadow-drop-2-bottom 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: shadow-drop-2-bottom 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.skills-title .plus{
    transition: all .2s ease-in-out;
    transform: scale(1);
}
.skills-title .plus:hover{
    transform: scale(1.5);
    cursor: pointer;
}

}




/*keyframes*/
/* first-btn-gmail */
@-webkit-keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

/* arrow down */
@-webkit-keyframes slide-right {
  0% {
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes slide-right {
  0% {
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}


/* skills and info */
@-webkit-keyframes slide-fwd-top {
  0% {
    -webkit-transform: translateZ(0) translateY(100px);
            transform: translateZ(0) translateY(100px);
  }
  100% {
    -webkit-transform: translateZ(160px) translateY(0);
            transform: translateZ(160px) translateY(0);
  }
}
@keyframes slide-fwd-top {
  0% {
    -webkit-transform: translateZ(0) translateY(100px);
            transform: translateZ(0) translateY(100px);
  }
  100% {
    -webkit-transform: translateZ(160px) translateY(0);
            transform: translateZ(160px) translateY(0);
  }
}

/* employment section */
@-webkit-keyframes slide-right {
  0% {
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes slide-right {
  0% {
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

/* network section */
@-webkit-keyframes slide-left {
  0% {
    -webkit-transform: translateX(100px);
            transform: translateX(100px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes slide-left {
  0% {
    -webkit-transform: translateX(100px);
            transform: translateX(100px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}



/* social icons */
@-webkit-keyframes shadow-pop-bl {
  0% {
    -webkit-box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e;
            box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e;
    -webkit-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
  }
  100% {
    -webkit-box-shadow: -1px 1px #3e3e3e, -2px 2px #3e3e3e, -3px 3px #3e3e3e, -4px 4px #3e3e3e, -5px 5px #3e3e3e, -6px 6px #3e3e3e, -7px 7px #3e3e3e, -8px 8px #3e3e3e;
            box-shadow: -1px 1px #3e3e3e, -2px 2px #3e3e3e, -3px 3px #3e3e3e, -4px 4px #3e3e3e, -5px 5px #3e3e3e, -6px 6px #3e3e3e, -7px 7px #3e3e3e, -8px 8px #3e3e3e;
    -webkit-transform: translateX(8px) translateY(-8px);
            transform: translateX(8px) translateY(-8px);
  }
}
@keyframes shadow-pop-bl {
  0% {
    -webkit-box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e;
            box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e;
    -webkit-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
  }
  100% {
    -webkit-box-shadow: -1px 1px #3e3e3e, -2px 2px #3e3e3e, -3px 3px #3e3e3e, -4px 4px #3e3e3e, -5px 5px #3e3e3e, -6px 6px #3e3e3e, -7px 7px #3e3e3e, -8px 8px #3e3e3e;
            box-shadow: -1px 1px #3e3e3e, -2px 2px #3e3e3e, -3px 3px #3e3e3e, -4px 4px #3e3e3e, -5px 5px #3e3e3e, -6px 6px #3e3e3e, -7px 7px #3e3e3e, -8px 8px #3e3e3e;
    -webkit-transform: translateX(8px) translateY(-8px);
            transform: translateX(8px) translateY(-8px);
  }
}


/* second btn gmail */
@-webkit-keyframes shadow-drop-2-bottom {
  0% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    -webkit-transform: translateZ(50px) translateY(-12px);
            transform: translateZ(50px) translateY(-12px);
    -webkit-box-shadow: 0 12px 20px -12px rgba(0, 0, 0, 0.35);
            box-shadow: 0 12px 20px -12px rgba(0, 0, 0, 0.35);
  }
}
@keyframes shadow-drop-2-bottom {
  0% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    -webkit-transform: translateZ(50px) translateY(-12px);
            transform: translateZ(50px) translateY(-12px);
    -webkit-box-shadow: 0 12px 20px -12px rgba(0, 0, 0, 0.35);
            box-shadow: 0 12px 20px -12px rgba(0, 0, 0, 0.35);
  }
}