@font-face {
    font-family: 'Passero One';
    src: url('fonts/Passero_One/PasseroOne-Regular.ttf');
    src: url('fonts/Passero_One/PasseroOne-Regular.ttf') format('embedded-opentype'),
    url('fonts/Passero_One/PasseroOne-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('fonts/Plus_Jakarta_Sans/PlusJakartaSans-VariableFont_wght.ttf');
    src: url('fonts/Plus_Jakarta_Sans/PlusJakartaSans-VariableFont_wght.ttf') format('embedded-opentype'),
    url('fonts/Plus_Jakarta_Sans/PlusJakartaSans-VariableFont_wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'PlusMedium';
    src: url('fonts/Plus_Jakarta_Sans/PlusJakartaSans-Medium.ttf');
    src: url('fonts/Plus_Jakarta_Sans/PlusJakartaSans-Medium.ttf') format('embedded-opentype'),
    url('fonts/Plus_Jakarta_Sans/PlusJakartaSans-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'PlusLight';
    src: url('fonts/Plus_Jakarta_Sans/PlusJakartaSans-Light.ttf');
    src: url('fonts/Plus_Jakarta_Sans/PlusJakartaSans-Light.ttf') format('embedded-opentype'),
    url('fonts/Plus_Jakarta_Sans/PlusJakartaSans-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Satoshi';
    src: url('fonts/Satoshi/Satoshi-Variable.ttf');
    src: url('fonts/Satoshi/Satoshi-Variable.ttf') format('embedded-opentype'),
    url('fonts/Satoshi/Satoshi-Variable.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SatoshiMedium';
    src: url('fonts/Satoshi/Satoshi-Medium.otf');
    src: url('fonts/Satoshi/Satoshi-Medium.otf') format('embedded-opentype'),
    url('fonts/Satoshi/Satoshi-Medium.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SatoshiBold';
    src: url('fonts/Satoshi/Satoshi-Bold.otf');
    src: url('fonts/Satoshi/Satoshi-Bold.otf') format('embedded-opentype'),
    url('fonts/Satoshi/Satoshi-Bold.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SatoshiBlack';
    src: url('fonts/Satoshi/satoshi-black.otf');
    src: url('fonts/Satoshi/satoshi-black.otf') format('embedded-opentype'),
    url('fonts/Satoshi/satoshi-black.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

body { font-family: Satoshi; }

header { height: 80px; }

a { color: #000; }
a:hover { text-decoration: none; color: #000; }
ul { list-style: none !important; padding: 0; margin: 0; }

.headerLogoTitle { margin: 0; padding-top: 10px; padding-bottom: 10px; }
.headerLogo { color: #242738; font-family: PlusLight; font-size: 32px; font-style: normal; font-weight: 300; line-height: 118%; }
.headerMenu { display: inline-block; width: 100%; text-align: right; height: 24px; padding-top: 27px; }
.headerMenu li { display: inline-block; margin-left: 12px; }
.headerMenu li a { display: inline-block; width: 25px; }
.headerMenu img { width: 24px; }
.headerMenu img:hover { opacity: 0.8; }
.helloFluid { padding-top: 130px; padding-bottom: 140px; }

.helloContainer { padding-top: 135px; padding-bottom: 150px; }
.helloContainer h2 { font-size: 32px; }

.projectInner { padding-top: 135px; padding-bottom: 25px; }
.projectInner h2 { font-size: 32px; }
.projectInnerDesc { font-size: 20px; margin-top: 25px; margin-bottom: 35px; font-weight: 300; }

.roleFluid { padding-bottom: 50px; }

.projectImg { width: 100%; border-radius: 24px; }
.projectName { padding-top: 12px; color: #242738; font-size: 42px; font-style: normal; font-family: SatoshiBold; line-height: 118%; text-transform: uppercase; }
.projectDesc { padding-top: 24px; color: #242738; font-size: 16px; font-style: normal; font-weight: 400; line-height: 118%; }
.projectCov { padding-top: 48px; color: #242738; font-family: Plus Jakarta Sans; font-size: 24px; font-style: normal; font-weight: 600; line-height: 118%; text-transform: uppercase; }
.projectCovList { padding-top: 12px; color: #242738; font-size: 16px; font-style: normal; font-weight: 400; line-height: 118%; }
.dribbbleImg { margin-bottom: 48px; }

.aboutFluid { padding-top: 100px; }
.aboutTitle { color: #242738; font-family: Passero One; font-size: 39px; font-style: normal; font-weight: 400; line-height: 118%; }
.aboutDesc { padding-top: 24px; color: #000; font-size: 56px; font-style: normal; font-family: SatoshiMedium; line-height: 118%; text-transform: uppercase; }
.aboutDesc span { font-family: SatoshiBold; background: linear-gradient(180deg, #1CF2F2 -10%, #1CA5F2 42.50%, #141BC3 120%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 60px; font-style: normal; font-weight: 700; line-height: 118%; text-transform: uppercase; }
.aboutDesc2 { margin-top: 25px; font-size: 18px; font-weight: 300; }
.aboutDesc2 a { color: #7F4BD4; }
.aboutDesc2 a:hover { text-decoration: underline; }

.workFluid { margin-top: 50px; border-top: #dadada 1px solid; padding-top: 125px; }
.workList { margin-top: 15px; margin-bottom: 50px; font-size: 18px; }
.workList li { margin-bottom: 3px; }
.workYear { font-weight: 300; font-style: italic; }
.workName { font-weight: 600; }
.workType { font-weight: 300; }

.helpFluid { border-top: #dadada 1px solid; margin-top: 50px; padding-top: 100px; padding-bottom: 75px; }
.helpList { margin-top: 35px; margin-bottom: 35px; font-size: 20px; font-weight: 300; }
.helpList li { margin-bottom: 10px; }
.helpList .fa-circle { font-size: 12px; margin-right: 8px; position: relative; top: -2px; }
.skillsFluid { padding-top: 140px; padding-bottom: 80px; }
.skillsCont { border-radius: 48px; background: #242738; max-width: 1382px; padding-left: 136px; padding-right: 136px; padding-bottom: 24px; }
.skillsTitle { padding-top: 64px; padding-bottom: 100px; color: #FFF; font-size: 96px; font-style: normal; font-family: SatoshiBold; line-height: 118%; text-transform: uppercase; }
.skillsListWrap { padding-bottom: 48px; }
.skillsDot { position: relative; top: -11px; display: inline-flex; height: 16px; width: 16px; margin-right: 24px; }
.skillsListName { display: inline-flex; font-family: SatoshiBold; color: #FFF; font-size: 40px; font-style: normal; line-height: 118%; text-transform: uppercase; }
.skillsLine { border-radius: 4px; background: #3D4152; height: 2px; width: 100%; margin-top: 24px; }

.greyLine { height: 2px; width: 100%; border-radius: 4px; background: #F3F3F3; }
.proTitle { vertical-align: top; color: #242738; font-family: PlusMedium; display: inline-flex; font-size: 96px !important; font-style: normal; font-weight: 500; line-height: 118%; text-transform: uppercase; }
.proTitleLink { float: right; position: relative; top: 10px; vertical-align: top; display: inline-flex; align-items: center; justify-content: center; border-radius: 48px; background: linear-gradient(180deg, #1CF2F2 -10%, #1CA5F2 42.50%, #141BC3 120%); width: 320px; height: 90px; flex-shrink: 0; color: #FFF; font-family: Satoshi; font-size: 48px; font-style: normal; font-weight: 500; line-height: 118%; text-transform: uppercase; }
.proTitleLink:hover { color: #fff; background: linear-gradient(180deg, #39FFFF -10%, #40BAFF 42.50%, #333BF0 120%); }
.proTitleUI { color: #242738; font-size: 130px !important; font-style: normal; font-weight: 900; text-transform: uppercase; font-family: SatoshiBlack; text-transform: uppercase; }
.proTitleUI span { font-weight: 900; display: inline-flex; background: linear-gradient(180deg, #1CF2F2 -10%, #1CA5F2 42.50%, #141BC3 120%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.proBottomUI { padding-top: 16px; color: #242738; font-size: 18px; font-style: normal; font-family: SatoshiBold; line-height: 118%; text-transform: uppercase; }
.proBottomDesc { padding-top: 16px; color: #242738; font-size: 14px; font-style: normal; font-weight: 400; line-height: 118%; }
.projectsTitle { padding-bottom: 24px; color: #242738; font-size: 96px; font-style: normal; font-family: SatoshiBold; line-height: 118%; text-transform: uppercase; }
.greyLinePad { margin-bottom: 48px; }
.greyLineTop { margin-top: 48px; }
.projectTitle { padding-top: 24px; color: #242738; font-family: PlusMedium; font-size: 24px; font-style: normal; line-height: 118%; text-transform: uppercase; }
.projectTextBox h2 { margin-bottom: 0 !important; padding-bottom: 4px; color: #242738; font-size: 42px; font-style: normal; font-family: SatoshiBold; line-height: 118%; text-transform: uppercase; }
.projectTextWrap { padding-top: 130px; }
.projectText { padding-top: 12px; color: #242738; font-size: 20px; font-style: normal; font-weight: 400; line-height: 118%; }
.projectTextTitle { font-family: PlusMedium; padding-top: 24px; color: #242738; font-size: 24px; font-style: normal; font-weight: 600; line-height: 118%; text-transform: uppercase; }
.projectImgWrap { padding-top: 36px; padding-bottom: 40px; }
.projectImgWrapLast { padding-bottom: 80px; }
.dribbbleTitle { display: inline-block; font-size: 64px; padding-bottom: 0; vertical-align: middle; }
.dribbbleLink { display: inline-block; }
.dribbbleLink img { display: inline-block; width: 76px; vertical-align: middle; margin-right: 24px; }
.dribbbleCol { padding-top: 152px; padding-bottom: 24px; }

footer { text-align: center; padding-bottom: 36px; }
.footerCopy { padding-top: 36px; color: #242738; font-size: 24px; font-style: normal; font-weight: 400; line-height: 118%; }
.footerMenu { display: inline-flex; }
.footerMenu li { justify-content: center; }
.footerMenu a { margin-left: 24px; margin-right: 24px; }
.footerMenu img { width: 80px; height: 80px; }
.footerMenu img:hover { opacity: 0.8; }
.footerTitle { color: #fff; text-align: center; font-size: 24px; font-weight: 600; }
.footerDesc { color: #fff; text-align: center; font-size: 22px; font-weight: 300; opacity: 0.75; margin-top: 10px; }
.footerCTA { text-align: center; margin-top: 35px; padding-bottom: 100px; }
.footerCTA a { color: #fff; font-size: 14px; font-weight: 600; padding: 15px 35px; background: #7F4BD4; border-radius: 25px; }
.footerCTA a:hover { background: #923ad4; }
.footerCR { font-size: 24px; color: #fff; opacity: 0.75; font-weight: 300; }
.footerList { text-align: right; display: inline-block; width: 100%; }
.footerList li { display: inline-block; vertical-align: top; }
.footerList li a { color: #fff; font-size: 20px; margin-left: 25px; }
.footerList li a:hover { color: #923ad4; }
.greyCol, .proTitleLinkMob { display: none; }
.projectText a { color: #923ad4; }

@media screen and (max-width: 1200px) {
    .proTitle { font-size: 64px !important; }
    .proTitleLink { height: 75px; width: 300px; top: 0; }
    .proTitleUI { font-size: 100px !important; }
    .projectContainer .col-7, .projectContainer .col-5, .projectContainer .col-6 { max-width: 100%; flex: 0 0 100% }
    .skillsCont { max-width: 960px; padding-right: 40px; padding-left: 40px; }
    .skillsTitle { padding-bottom: 40px; }
    .greyCol { display: flex; }
}

@media screen and (max-width: 991px) {
    .proTitle { font-size: 48px !important; }
    .proTitleLink { height: 54px; width: 220px; top: 0; font-size: 32px; }
    .proTitleUI { font-size: 70px !important; }
    .aboutDesc { font-size: 42px; }
    .skillsCont { max-width: 720px; }
    .skillsTitle { padding-top: 24px; }
    .skillsListName { font-size: 24px; }
    .skillsDot { top: -5px; }
    .skillsListWrap { padding-bottom: 32px; }
}

@media screen and (max-width: 768px) {
    .projectContainer, .helloFluid { max-width: none !important; text-align: center; }
    .projectName, .projectDesc, .responsiveCol8 { max-width: 100%; flex: 100%; }
    .projectDesc { margin-top: 15px; }
    .responsiveCol { display: none; }
    footer .col-6 { max-width: 100%; flex: 100%; text-align: center !important; }
    .footerList { text-align: center; margin-top: 10px; }
    .proTitleLink { display: none; }
    .proTitleLinkMob { display: flex; }
    .headerLogo { font-size: 30px; }
    .helloFluid { padding-top: 60px; padding-bottom: 60px; }
    .proTitleUI { font-size: 54px !important; }
    .proBottomWrap .col-6 { flex: 0 0 100%; max-width: 100%; }
    .projectsTitle { font-size: 64px; text-align: center; }
    .aboutDesc, .aboutDesc span { font-size: 36px; }
}

@media screen and (max-width: 650px) {
    .skillsTitle { font-size: 64px; }
    .skillsCont .col-6 { max-width: 100%; flex: 0 0 100% }
    .skillsLine { display: none; }
}

@media screen and (max-width: 500px) {
    .proTitle { font-size: 36px !important; }
    .proTitleUI { font-size: 40px !important; }
    .projectsTitle { font-size: 48px; }
    .projectName { font-size: 30px; }
    .projectTitle { font-size: 18px; }
    .footerMenu img { width: 40px; height: 40px; }
    .headerLogo { font-size: 20px; }
    .proTitleUI { font-size: 32px !important; }
    .proTitle { font-size: 28px !important; }
    .projectsTitle { font-size: 40px; }
    .projectName { font-size: 24px !important; }
    .aboutTitle { font-size: 30px; }
    .aboutDesc, .aboutDesc span { font-size: 24px; }
    .skillsTitle { text-align: center; font-size: 40px; }
    .skillsListName { font-size: 18px; }
    .aboutFluid { padding-top: 80px; }
    .skillsFluid { padding-top: 80px; }
    .projectTextBox h2 { font-size: 24px; }
    .projectTextTitle { font-size: 18px; }
    .projectTextWrap { padding-top: 80px; }
    .projectText { font-size: 16px; }
}