body{cursor: url(../Transparent.cur) 0 0, url(../trans-hand.cur) 0 0, auto;}
a:hover{cursor: url(../trans-hand.cur), auto;}
li:hover{cursor: url(../trans-hand.cur) 0 0, auto !important;}

#header .navbar li a{font-family: 'Corben';font-weight: 600;}
.section-title{font-family: 'Patua One';font-size: 40px;color: #26354b;}

#hero .btn-get-started{font-family: 'patua One'!important;}
#hero h1{font-family: 'Patua One';}
#hero h2{font-family: 'Nanum Pen Script', 'cursive';font-size: 36px;}

/* about */
#about{height: 800px;margin-bottom: 80px;}
#about .about-container{height: 540px;}
#about .about-container .row{height: 100%;}
#about .about-container .row .col-lg-6{height: 100%;}
#about .about-container .row .col-md-6{height: 100%;}
#about img{border-radius: 30px;height: 100%;}

#about .about-content .about-title{font-family: 'Hahmlet';color: #234a68;}
#about .about-content p{margin: 0;font-family: 'Hahmlet';font-weight: 500;color: #333 !important;}
#about .about-content p span{margin-right: 20px;color: #234a68 !important;}

#about .about-content .name{margin-bottom: 5px;}
#about .about-content .age{margin-bottom: 20px;}

#about .about-content .intro{margin-bottom: 40px;font-size: 15px;letter-spacing: 1px;}
#about .about-content .intro em{font-style: normal;font-weight: 600;}

#about .about-content .skill > div{display: flex;margin-bottom: 20px;}
#about .about-content .skill > div .circle{flex: 1;}
#about .about-content .skill > div .circle{position: relative;}
#about .about-content .skill > div .circle > strong{position: absolute;top: 35px;left: 30px;font-size: 20px;font-weight: 500;color: #1d3e57;}
#about .about-content .skill > div .circle span{text-align: left;display: block;font-weight: 600;color: #234a68;}

#about .about-content .first span{margin-left: 30px;}
#about .about-content .second span{margin-left: 40px;}
#about .about-content .third span{margin-left: 15px;}
#about .about-content .forth span{margin-left: 40px;}
#about .about-content .fifth span{margin-left: 40px;}
#about .about-content .sixth span{margin-left: 25px;}

/* portfolio 공통 */
#portfolio{background-size: 100% 100%;}
#portfolio .wrap{padding: 60px 0 0 0;}
#portfolio .wrap p{margin: 0;padding: 0;}
#portfolio .wrap .inner{height: 700px;margin-top: 100px;padding: 0 130px;position: relative;}

#portfolio .wrap .port{width: 100%;transition: .7s;padding: 50px 0;}
#portfolio .wrap .port.active{width: 100%;margin: 0 auto;}

#portfolio .wrap .port:first-child.active{background: url(../images/back1.png) no-repeat left 0 bottom 50px;transition: 1s;}
#portfolio .wrap .port:nth-child(2).active{background: url(../images/back2.png) no-repeat left 0 bottom 50px;transition: 1s;}
#portfolio .wrap .port:nth-child(3).active{background: url(../images/back3.png) no-repeat left 0 bottom 50px;transition: 1s;}
#portfolio .wrap .port:nth-child(4).active{background: url(../images/back4.png) no-repeat left 0 bottom 50px;transition: 1s;}

#portfolio .wrap .port1:before{content: '';background: url(../images/back6.png) no-repeat;left: 0;top: 100px;right: 0;bottom: 0;position: absolute;opacity: 0.6;}
/* #portfolio .wrap .port1:before.active{background: url(images/back6.png) no-repeat left 0 bottom 0;transition: 1s;opacity: 1;} */

#portfolio .wrap .port.active #pf1{width: 70%;margin: 0 auto;}
#portfolio .wrap .port.active #pf2{width: 70%;margin: 0 auto;}
#portfolio .wrap .port.active #pf3{width: 70%;margin: 0 auto;}
#portfolio .wrap .port.active #pf4{width: 70%;margin: 0 auto;}

#portfolio .wrap .pfTitle{width: 220px;}
#portfolio .wrap .pfTitle .pfNum{font-size: 24px;font-family: 'Patua One';padding-bottom: 10px;border-bottom: 1px solid #000;box-sizing: border-box;color: #000;}
#portfolio .wrap .pfTitle .pfTopic{margin-top: 10px;font-family: 'Patua One';font-size: 20px;}
#portfolio .wrap .pfTitle .siteName{font-size: 28px;text-transform: uppercase;font-family: 'Patua One';}

#portfolio .wrap .pfImg{width: 100%;}

#portfolio .wrap .cont{padding-top: 500px;padding-left: 50px;}
#portfolio .wrap .cont:after{content: '';display: block;clear: both;}
#portfolio .wrap .cont p{font-family: 'Hahmlet';font-weight: 500;letter-spacing: 1px;}
#portfolio .wrap .cont span{margin-right: 20px;font-family: 'Hahmlet';font-weight: 600;display: inline-block;text-align: center;letter-spacing: 0px;}

#portfolio .wrap .cont .color span{float: left;}
#portfolio .wrap .cont .color .colorIcon{float: left;padding-top: 10px;}
#portfolio .wrap .cont .color .colorIcon i{display:inline-block;width:20px;height:10px;background:#949494;border-radius: 10px;transform:rotate(-45deg);text-indent:-9999px;}

#portfolio .wrap .btnSet{position: relative;}
#portfolio .wrap .btnSet .lightBox{width: 180px;height: 45px;background-color: #fff;border: 2px solid #000;border-radius: 15px;box-sizing: border-box;
  line-height: 40px;text-align: center;font-family: 'Hahmlet';font-weight: 600;letter-spacing: 1px;position: absolute;right: 230px;top: -35px;color: #777;}
#portfolio .wrap .btnSet .site{width: 180px;height: 45px;background-color: #fff;border: 2px solid #000;border-radius: 15px;box-sizing: border-box;
  position: absolute;right: 40px;top: -35px;}
#portfolio .wrap .btnSet a{display: block;width: 180px;height: 45px;line-height: 40px;text-align: center;font-family: 'Hahmlet';font-weight: 600;letter-spacing: 1px;color: #777;}

/* 팝업 */
.modal-header h4{font-family: 'Hahmlet';font-size: 20px;font-weight: 500;}
.modal-content {margin-left:-250px;
  width:1000px !important;height:auto} /* height를 auto로 잡아야 스크롤바가 생김 */
.modal-body{overflow-y: scroll;height: 750px;} /* overflow-y: scroll; = 세로 스크롤바 생기게 함 */
.modal-body img {width:100%}

/* portfolio 팝업 */
#portfolio #bank .modal-header h4{color: #5388c4;}
#portfolio #bank .modal-footer .btn{background-color: #5388c4;border: 0;font-family: 'Hahmlet';}

#portfolio #dduck .modal-header h4{color: #e66969;}
#portfolio #dduck .modal-footer .btn{background-color: #e66969;border: 0;font-family: 'Hahmlet';}

#portfolio #bs .modal-header h4{color: #00376b;}
#portfolio #bs .modal-footer .btn{background-color: #00376b;border: 0;font-family: 'Hahmlet';}

#portfolio #pig .modal-header h4{color: #b5b9a0;}
#portfolio #pig .modal-footer .btn{background-color: #b5b9a0;border: 0;font-family: 'Hahmlet';}

/* design 팝업 */
#design .modal-content{margin-left: -50px;width: 600px !important;height: auto;margin-top: 100px;}
#design .modal-body{overflow-y: scroll;height: 450px;}
#design .modal-footer .btn{background-color: #26354b;border: 0;font-family: 'Hahmlet';}

/* pf1 */
#portfolio .wrap #pf1{background: url(../images/bg_01.png) no-repeat right 10px top 10px;height: 800px;width: 66%;margin: 0 auto;transition: .4s;}
#portfolio .wrap #pf1 .pfTitle{float: right;text-align: right;}

#portfolio .wrap #pf1 .pfImg .pc{background: url(../images/bank_computer.png) no-repeat;width: 600px;height: 500px;position: absolute;transform: translateX(-55%);left: 50%;background-size: 100%;}
#portfolio .wrap #pf1 .pfImg .pc span{background: url(../images/koreabank.png) no-repeat;position: absolute;left: 26px;top: 23px;display: block;width: 546px;height: 293px;}
#portfolio .wrap #pf1 .pfImg .pc:hover span{animation: bankScroll 10s ease infinite;}

#portfolio .wrap #pf1 .pfImg .pc i{display: block;position: absolute;width: 60px;height: 60px;border-radius: 40px;transition: opacity 0.3s;left: 30px;top: 30px;font-size: 11px;
  background-color: rgba(33, 59, 138, 0.7);opacity: 1;text-align: center;font-style: normal;padding: 13px 0;font-family: 'Hahmlet';color: #fff;font-weight: 500;}
#portfolio .wrap #pf1 .pfImg .pc:hover i{opacity: 0;}

#portfolio .wrap #pf1 .cont .color .colorIcon i:first-child{background-color: #1cadda;}
#portfolio .wrap #pf1 .cont .color .colorIcon i:nth-child(2){background-color: #1663a1;}
#portfolio .wrap #pf1 .cont .color .colorIcon i:last-child{background-color: #586dca;}

#portfolio .wrap #pf1 .btnSet .lightBox{border: 2px solid #1cadda;transition: all 0.5s;}
#portfolio .wrap #pf1 .btnSet .site{border: 2px solid #1663a1;transition: all 0.5s;}
#portfolio .wrap #pf1 .btnSet .lightBox:hover{border: 2px solid #fff;background-color: #1cadda;color: #fff;}
#portfolio .wrap #pf1 .btnSet .site:hover{border: 2px solid #fff;background-color: #1663a1;}
#portfolio .wrap #pf1 .btnSet .site:hover a{color: #fff;}

/* pf2 */
#portfolio .wrap #pf2{background: url(../images/bg_02.png) no-repeat left 10px top 10px;height: 800px;width: 66%;margin: 0 auto;transition: .4s;}
#portfolio .wrap #pf2 .pfTitle{float: left;}

#portfolio .wrap #pf2 .pfImg .pc{background: url(../images/baedduck_computer.png) no-repeat;width: 600px;height: 500px;position: absolute;transform: translateX(-45%);left: 50%;background-size: 100%;}
#portfolio .wrap #pf2 .pfImg .pc span{background: url(../images/baedduck.png) no-repeat;position: absolute;left: 26px;top: 23px;display: block;width: 546px;height: 293px;}
#portfolio .wrap #pf2 .pfImg .pc:hover span{animation: dduckScroll 10s ease infinite;}

#portfolio .wrap #pf2 .pfImg .pc i{display: block;position: absolute;width: 60px;height: 60px;border-radius: 40px;transition: opacity 0.3s;left: 30px;top: 30px;font-size: 11px;
  background-color: rgba(211, 48, 48, 0.7);opacity: 1;text-align: center;font-style: normal;padding: 13px 0;font-family: 'Hahmlet';color: #fff;font-weight: 500;}
#portfolio .wrap #pf2 .pfImg .pc:hover i{opacity: 0;}

#portfolio .wrap #pf2 .cont .color .colorIcon i:first-child{background-color: #ff6e6e;}
#portfolio .wrap #pf2 .cont .color .colorIcon i:nth-child(2){background-color: #e23838;}
#portfolio .wrap #pf2 .cont .color .colorIcon i:last-child{background-color: #fff;}

#portfolio .wrap #pf2 .btnSet .lightBox{border: 2px solid #ff6e6e;transition: all 0.5s;}
#portfolio .wrap #pf2 .btnSet .site{border: 2px solid #e23838;transition: all 0.5s;}
#portfolio .wrap #pf2 .btnSet .lightBox:hover{border: 2px solid #fff;background-color: #ff6e6e;color: #fff;}
#portfolio .wrap #pf2 .btnSet .site:hover{border: 2px solid #fff;background-color: #e23838;}
#portfolio .wrap #pf2 .btnSet .site:hover a{color: #fff;}

/* pf3 */
#portfolio .wrap #pf3{background: url(../images/bg_03.png) no-repeat right 10px top 10px;height: 800px;width: 66%;margin: 0 auto;transition: .4s;}
#portfolio .wrap #pf3 .pfTitle{float: right;text-align: right;}

#portfolio .wrap #pf3 .pfImg .pc{background: url(../images/hospital_computer.png) no-repeat;width: 600px;height: 500px;position: absolute;transform: translateX(-55%);left: 50%;background-size: 100%;}
#portfolio .wrap #pf3 .pfImg .pc span{background: url(../images/hospital_desktop.png) no-repeat;position: absolute;left: 26px;top: 23px;display: block;width: 546px;height: 293px;}
#portfolio .wrap #pf3 .pfImg .pc:hover span{animation: bsScroll 10s ease infinite;}

#portfolio .wrap #pf3 .pfImg .pc i{display: block;position: absolute;width: 60px;height: 60px;border-radius: 40px;transition: opacity 0.3s;left: 30px;top: 30px;font-size: 11px;
  background-color: rgba(0, 49, 122, 0.7);opacity: 1;text-align: center;font-style: normal;padding: 13px 0;font-family: 'Hahmlet';color: #fff;font-weight: 500;}
#portfolio .wrap #pf3 .pfImg .pc:hover i{opacity: 0;}

#portfolio .wrap #pf3 .pfImg .mobile{background: url(../images/hospital_iphone.png) no-repeat;width: 120px;height: 238px;background-size: 100%;text-indent: -9999px;margin-top: 300px;
  position: absolute;left: 250px;top: -80px;margin-left: -350px;opacity: 0;}
#portfolio .wrap #pf3 .pfImg .tablet{background: url(../images/hospital_tablet.png) no-repeat;width: 220px;height: 303px;background-size: 100%;text-indent: -9999px;margin-top: 225px;
  position: absolute;right: 230px;top: -60px;margin-right: -350px;opacity: 0;}

#portfolio .wrap #pf3 .cont .color .colorIcon i:first-child{background-color: #3071ad;}
#portfolio .wrap #pf3 .cont .color .colorIcon i:nth-child(2){background-color: #00376b;}
#portfolio .wrap #pf3 .cont .color .colorIcon i:last-child{background-color: #ffd553;}

#portfolio .wrap #pf3 .btnSet .lightBox{border: 2px solid #3071ad;transition: all 0.5s;right: 570px;}
#portfolio .wrap #pf3 .btnSet .site{border: 2px solid #00376b;transition: all 0.5s;right: 380px;}
#portfolio .wrap #pf3 .btnSet .t_site{width: 180px;height: 45px;background-color: #fff;border: 2px solid #ffd553;border-radius: 15px;box-sizing: border-box;
  position: absolute;right: 190px;top: -35px;transition: all 0.5s;}
#portfolio .wrap #pf3 .btnSet .m_site{width: 180px;height: 45px;background-color: #000;border: 2px solid #fff;border-radius: 15px;box-sizing: border-box;
  position: absolute;right: 0;top: -35px;transition: all 0.5s;}

#portfolio .wrap #pf3 .btnSet .lightBox:hover{border: 2px solid #fff;background-color: #3071ad;color: #fff;}
#portfolio .wrap #pf3 .btnSet .site:hover{border: 2px solid #fff;background-color: #00376b;}
#portfolio .wrap #pf3 .btnSet .site:hover a{color: #fff}
#portfolio .wrap #pf3 .btnSet .t_site:hover{background-color: #ffd553;border: 2px solid #fff;}
#portfolio .wrap #pf3 .btnSet .t_site:hover a{color: #000;}
#portfolio .wrap #pf3 .btnSet .m_site:hover{background-color: #fff;border: 2px solid #000;}
#portfolio .wrap #pf3 .btnSet .m_site:hover a{color: #000;}

/* pf4 */
#portfolio .wrap #pf4{background: url(../images/bg_04.png) no-repeat left 10px top 10px;height: 800px;width: 66%;margin: 0 auto;transition: .4s;}
#portfolio .wrap #pf4 .pfTitle{float: left;}

#portfolio .wrap #pf4 .pfImg .pc{background: url(../images/pigment_computer.png) no-repeat;width: 600px;height: 500px;position: absolute;transform: translateX(-45%);left: 50%;background-size: 100%;}
#portfolio .wrap #pf4 .pfImg .pc span{background: url(../images/pigment.png) no-repeat;position: absolute;left: 26px;top: 23px;display: block;width: 546px;height: 293px;}
#portfolio .wrap #pf4 .pfImg .pc:hover span{animation: pigScroll 10s ease infinite;}

#portfolio .wrap #pf4 .pfImg .pc i{display: block;position: absolute;width: 60px;height: 60px;border-radius: 40px;transition: opacity 0.3s;left: 30px;top: 30px;font-size: 11px;
  background-color: rgba(186, 192, 145, 0.7);opacity: 1;text-align: center;font-style: normal;padding: 13px 0;font-family: 'Hahmlet';color: #fff;font-weight: 500;}
#portfolio .wrap #pf4 .pfImg .pc:hover i{opacity: 0;}

#portfolio .wrap #pf4 .pfImg .p_mobile{background: url(../images/pigment_phone.png) no-repeat;width: 120px;height: 239px;background-size: 100%;text-indent: -9999px;margin-top: 300px;
  position: absolute;right: 250px;top: -60px;margin-right: -350px;opacity: 0;}

#portfolio .wrap #pf4 .cont .color .colorIcon i:first-child{background-color: #fffdf1;}
#portfolio .wrap #pf4 .cont .color .colorIcon i:nth-child(2){background-color: #c5caaf;}
#portfolio .wrap #pf4 .cont .color .colorIcon i:last-child{background-color: #333;}

#portfolio .wrap #pf4 .btnSet .lightBox{border: 2px solid #fffdf1;transition: all 0.5s;right: 420px;}
#portfolio .wrap #pf4 .btnSet .site{border: 2px solid #c5caaf;transition: all 0.5s;right: 230px;}
#portfolio .wrap #pf4 .btnSet .Msite{width: 180px;height: 45px;background-color: #fff;border: 2px solid #333;border-radius: 15px;box-sizing: border-box;
  position: absolute;right: 40px;top: -35px;transition: all 0.5s;}
#portfolio .wrap #pf4 .btnSet .lightBox:hover{border: 2px solid #fff;background-color: #fffdf1;color: #000;}
#portfolio .wrap #pf4 .btnSet .site:hover{border: 2px solid #fff;background-color: #c5caaf;}
#portfolio .wrap #pf4 .btnSet .site:hover a{color: #fff;}
#portfolio .wrap #pf4 .btnSet .Msite:hover{border: 2px solid #fff;background-color: #333;}
#portfolio .wrap #pf4 .btnSet .Msite:hover a{color: #fff;}

/* pf5(mobile) */
#portfolio .wrap .port1{padding-bottom: 20px;position: relative;}
#portfolio .wrap #pf5{height: 800px;width: 70%;margin: 0 auto;}
#portfolio .wrap #pf5 .pfTitle{text-align: center;position: absolute;left: 50%;transform: translateX(-50%);}

#portfolio .wrap #pf5 .pfImg .appCenter{width: 200px;height: 405px;position: absolute;left: 50%;transform: translateX(-50%);top: 150px;background: url(../images/mobile_pet.png) no-repeat;}
#portfolio .wrap #pf5 .pfImg .appCenter span{display: block;background: url(../images/mobile_pet_slide.png) no-repeat;width: 178px;height: 312px;position: absolute;left: 11px;top: 45px;}
#portfolio .wrap #pf5 .pfImg .appCenter:hover span{animation: appScroll 13s ease infinite;}

#portfolio .wrap #pf5 .pfImg .appCenter i{display: block;position: absolute;width: 60px;height: 60px;border-radius: 40px;transition: opacity 0.3s;right: -15px;top: -5px;font-size: 11px;
  background-color: rgba(75, 58, 58, 0.7);opacity: 1;text-align: center;font-style: normal;padding: 13px 0;font-family: 'Hahmlet';color: #fff;font-weight: 500;}
#portfolio .wrap #pf5 .pfImg .appCenter:hover i{opacity: 0;}

#portfolio .wrap #pf5 .pfImg .petLeft{background: url(../images/mobile_pet_left.png) no-repeat;width: 170px;height: 405px;background-size: 100%;text-indent: -9999px;margin-top: 200px;
  position: absolute;left: 360px;top: -20px;margin-left: -550px;opacity: 0;}
#portfolio .wrap #pf5 .pfImg .petRight{background: url(../images/mobile_pet_right.png) no-repeat;width: 170px;height: 405px;background-size: 100%;text-indent: -9999px;margin-top: 200px;
  position: absolute;right: 360px;top: -20px;margin-right: -550px;opacity: 0;}

#portfolio .wrap #pf5 .cont{padding-top: 550px;padding-left: 50px;}
#portfolio .wrap #pf5 .btnSet .site{width: 180px;height: 45px;background-color: #fff;border: 2px solid #fff5df;border-radius: 15px;box-sizing: border-box;transition: all 0.5s;
  line-height: 40px;text-align: center;font-family: 'Hahmlet';font-weight: 600;letter-spacing: 1px;position: absolute;right: 230px;top: -55px;color: #777;}
#portfolio .wrap #pf5 .btnSet .Msite{width: 180px;height: 45px;background-color: #fff;border: 2px solid #634e4e;border-radius: 15px;box-sizing: border-box;
  position: absolute;right: 40px;top: -55px;transition: all 0.5s;}
#portfolio .wrap #pf5 .btnSet .site:hover{border: 2px solid #fff;background-color: #fff5df;}
#portfolio .wrap #pf5 .btnSet .site:hover a{color: #000;}
#portfolio .wrap #pf5 .btnSet .Msite:hover{border: 2px solid #fff;background-color: #634e4e;}
#portfolio .wrap #pf5 .btnSet .Msite:hover a{color: #fff;}

#portfolio .wrap #pf5 .cont .color .colorIcon i:first-child{background-color: #fff5df;}
#portfolio .wrap #pf5 .cont .color .colorIcon i:nth-child(2){background-color: #634e4e;}
#portfolio .wrap #pf5 .cont .color .colorIcon i:last-child{background-color: #ff8181;}

/* design */
#design .container{padding: 0;}
#design .row{display: flex;margin-bottom: 40px;}
#design .row .de{flex: 1;margin-right: 30px;padding: 0;width: 400px;height: 300px;position: relative;overflow: hidden;}
#design .row .de:last-child{margin-right: 0;}
#design .row .de img{width: 100%;height: 100%;}
#design .row .de:hover img{transform: scale(1.05);transition: all 0.4s;}
#design .row .de:hover .de_info{opacity: 1;}

#design .row .de .de_info{position: absolute;left: 0;top: 0;height: 100%;width: 100%;background-color: rgba(255,255,255,0.7);transition: all 0.4s;
  opacity: 0;cursor: url(../trans-hand.cur), auto;}
#design .row .de .de_info h4{font-family: 'Hahmlet';position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);font-size: 20px;font-weight: 600;}
#design .row .de .de_info i{text-align: center;display: block;position: absolute;top: 50%;transform: translateY(-50%);right: 120px;font-size: 30px;}



/* contact */
#contact .justify-content-center{display: block;padding-top: 10px;}
#contact .justify-content-center .col-lg-3{width: 80%;margin: 0 auto;padding: 0;}
#contact .info{display: flex;margin-bottom: 30px;}
#contact .info div:first-child{flex: 0.65;margin: 0 30px;height: 150px;position: relative;transition: all 0.5s;}
#contact .info div:first-child:hover{background-color: #26354b;color: #fff;}
#contact .info div:first-child:hover i{color: #fff;}
#contact .info div:first-child i{position: absolute;top: 60px;left: 150px;transition: all 0.5s;}
#contact .info div:first-child p{text-align: center;font-size: 20px;font-weight: 500;height: 150px;line-height: 150px;}

#contact .info div:last-child{flex: 0.35;margin: 0 30px;color: #000;height: 150px;position: relative;}
#contact .info div:last-child i{position: absolute;top: 60px;left: 10px;}
#contact .info div:last-child p{height: 150px;line-height: 150px;font-size: 15px;}

#contact .link{width: 470px;margin: 0 auto;}
#contact .link a{display: block;background-color: #eee;height: 40px;line-height: 40px;font-family: 'Hahmlet';color: #333;letter-spacing: 1px;font-weight: 500;
  border-radius: 10px;transition: all 0.4s;}
#contact .link .port_info{width: 240px;text-align: center;margin: 0 20px;}
#contact .link .git{width: 150px;text-align: center;margin: 0 20px;}

#contact .link a:hover{background-color: #26354b;color: #fff;}

/* footer */
#footer{background: url(../images/the-night-sky.jpg) no-repeat;}
#footer .copyright{font-size: 13px;letter-spacing: 1px;}

/* 글씨 슬라이더 */
.animated-title {font-size:80px; font-family:'Raleway',Sans-serif; font-weight:500; position: relative; width: 100%;max-width:100%; height: auto; padding:80px 0;
  overflow-x: hidden; overflow-y: hidden; color: #ddd;margin-bottom: 50px;}
.animated-title .track {position: absolute; white-space: nowrap;will-change: transform;animation: marquee 60s linear infinite; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (hover: hover) and (min-width: 700px){
.animated-title .content {-webkit-transform: translateY(calc(100% - 8rem)); transform: translateY(calc(100% - 8rem));}
    }

/* portfolio scroll */
@keyframes bankScroll{
  0%{background-position: 0 0;}
  50%{background-position: 0 -258px;}
  100%{background-position: 0 0;}
}
@keyframes dduckScroll{
  0%{background-position: 0 0;}
  50%{background-position: 0 -2670px;}
  100%{background-position: 0 0;}
}
@keyframes bsScroll{
  0%{background-position: 0 0;}
  50%{background-position: 0 -408px;}
  100%{background-position: 0 0;}
}
@keyframes pigScroll{
  0%{background-position: 0 0;}
  50%{background-position: 0 -2052px;}
  100%{background-position: 0 0;}
}
@keyframes appScroll{
  0%{background-position: 0 0;}
  50%{background-position: -534px 0;}
  100%{background-position: 0 0;}
}