/*
	Template name: iSeada's website.
	Description: Portfolio HTML5 Template.
	Author: Ibrahim A. Seada.
	Author URI: http://iSeada.com
	Version: 1.2
*/
@import url('https://fonts.googleapis.com/css?family=Rubik:300,400,500&display=swap');

body {
	background: #fff;
	margin: 0;
	font-family: 'Rubik', sans-serif;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.375rem;
	color: #222;
	text-align: left;
}

body.mobile-navigation_active {overflow: hidden;}

header {
	padding-top: 3.438rem;
	background: #FFFFFF;
	-webkit-box-shadow: 0 2px 50px 0 rgba(0,0,0,0.10), 0 1px 0 0 #F3F3F4;
	        box-shadow: 0 2px 50px 0 rgba(0,0,0,0.10), 0 1px 0 0 #F3F3F4;
}

.frontpage header {
	padding-bottom: 5rem;
}

header .header-wrap {
	margin-bottom: 3.438rem;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-flex: 1;
	    -ms-flex: 1 1 0px;
	        flex: 1 1 0;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}

header .logo {
	min-height: 40px;
}

header .logo a img {
	max-width: 40px;
}

header .main-navigation {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
}

header .main-navigation .main-nav-item {
	position: relative;
	margin-right: 2rem;
}

header .main-navigation .main-nav-item::after {
	/*content: '';*/
	width: 3px;
	height: 3px;
	display: inline-block;
	background: #D5D5D5;
	border-radius: 3px;
	margin-left: 1.125rem;
	vertical-align: middle;
}

header .main-navigation .main-nav-item:last-child,
header .main-navigation .main-nav-item:last-child::after {
	margin: 0;
}

header .main-navigation .main-nav-item:last-child::after {
	display: none;
}

header .main-navigation .main-nav-item a {
	position: relative;
	font-size: 0.875rem;
	color: #222;
}

header .main-navigation .main-nav-item a:hover {
	text-decoration: none;
}

header .main-navigation .main-nav-item a::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -5px;
	display: block;
	width: 0.5rem;
	height: 2px;
	margin-left: -0.25rem;
	-webkit-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
	border-radius: 1px;
}

header .main-navigation .main-nav-item.active a::after,
header .main-navigation .main-nav-item a:hover::after {
	background: #222;
}

header .main-navigation .main-nav-item a:hover::after {
	width: 100%;
	left: 0;
	margin-left: 0;
}

header .mobile-navigation, header .mobile__extras {
	display: none;
}

.mobile-navigation input + label {
	position: relative;
	display: block;
	width: 40px;
	height: 40px;
	z-index: 5;
}

.mobile-navigation input + label span {
	position: absolute;
	top: 16px;
	right: 10px;
	background: #222;
	width: 20px;
	height: 2px;
	display: block;
	-webkit-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
}

.mobile-navigation input + label span:last-child {
	top: 22px;
	width: 15px;
}

.mobile-navigation label:hover {
	cursor: pointer;
}

.mobile-navigation input:checked + label span {
	opacity: 0;
	top: 50%;
}

.mobile-navigation input:checked + label span:first-child {
	opacity: 1;
	-webkit-transform: rotate(405deg);
	    -ms-transform: rotate(405deg);
	        transform: rotate(405deg);
}

.mobile-navigation input:checked + label span:last-child {
	opacity: 1;
	width: 20px;
	-webkit-transform: rotate(-405deg);
	    -ms-transform: rotate(-405deg);
	        transform: rotate(-405deg);
}

.mobile-navigation input ~ .mobile-navigation__container {
	position: fixed;
	top: 0;
	left: 0;
	visibility: hidden;
	width: 100%;
	height: 100%;
	z-index: 3;
	overflow: hidden;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
    -webkit-transform: scale(0.75);
        -ms-transform: scale(0.75);
            transform: scale(0.75);
	-webkit-transition: all .5s ease;
		 -o-transition: all .5s ease;
			transition: all .5s ease;
}

.mobile-navigation input ~ .mobile-navigation__container .main-nav-item {
	text-align: center;
	opacity: 0;
	transition: .5s;
	-webkit-transition-delay: 0s;
	     -o-transition-delay: 0s;
	        transition-delay: 0s;
}

.mobile-navigation input ~ .mobile-navigation__container .main-nav-item a {
	position: relative;
	display: block;
	font-size: 2rem;
	font-weight: 400;
	color: #222;
	padding: 2rem;
}

.mobile-navigation input ~ .mobile-navigation__container .main-nav-item.active a::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 10px;
	width: 1rem;
	margin-left: -0.5rem;
	height: 3px;
	background: #222;
	border-radius: 1.5px;
}

.mobile-navigation input ~ .mobile-navigation__container .main-nav-item a:hover {
	text-decoration: none;
}

.mobile-navigation input:checked ~ .mobile-navigation__container {
	visibility: visible;
	background: #E4E726;
	height: 100%;
	-webkit-transform: scale(1);
	    -ms-transform: scale(1);
	        transform: scale(1);
	-webkit-transition-delay: 0s;
	     -o-transition-delay: 0s;
	        transition-delay: 0s;
}

.mobile-navigation input:checked ~ .mobile-navigation__container .main-nav-item {
	opacity: 1;
	-webkit-transition-delay: .5s;
	     -o-transition-delay: .5s;
	        transition-delay: .5s;
}

header .mobile__extras {
	position: absolute;
	left: 0;
	bottom: 1rem;
	width: 100%;
}

header .mobile__extras div a {
	font-size: 1rem !important;
	font-size: 0.875rem !important;
    letter-spacing: 1px;
    padding: 1rem 0.875rem !important;
}

header .intro .intro-name {
	font-size: 1.5rem;
	letter-spacing: -0.5px;
	font-weight: 300;
	margin-bottom: 1.75rem;
}

header .intro .intro-headline {
	font-size: 2rem;
	line-height: 2.75rem;
	font-weight: 400;
	letter-spacing: -0.5px;
	margin-bottom: 2rem;
}

header .intro .occupation {
	font-size: 1.25rem;
	font-weight: 300;
	margin-bottom: 0.625rem;
}

header .intro .learn-more {
	display: inline-block;
	background-image: url(../img/icons/i-internal-link.svg);
	background-repeat: no-repeat;
	background-position: 100% center;
	padding-right: 24px;
	font-size: 1rem;
	font-weight: 500;
	color: #222;
}

.svg-icon {
	display: inline-block;
	background-repeat: no-repeat;
}

section {
	padding: 5rem 0;
}

section .section-head {
	display: inline-block;
	position: relative;
	margin-bottom: 2.5rem;
	font-size: 1.875rem;
	font-weight: 400;
	letter-spacing: -0.5px;
}

#things-i-do .specialized {
	display: inline-block;
	font-size: 1.125rem;
	font-weight: 400;
	margin-bottom: 0.375rem;
}

#things-i-do .item p {
	font-size: 0.9375rem;
	font-weight: 300;
	max-width: 270px;
	margin: 0 auto;
}

#tools .tool-set ul li {
	position: relative;
	display: inline-block;
	list-style: none;
	margin: 0 10px;
	-webkit-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

#tools .tool-set ul li:hover {
	-webkit-transform: translateY(-10px);
	    -ms-transform: translateY(-10px);
	        transform: translateY(-10px);
}

#tools .tool-set ul li .app-icon {
	-webkit-box-shadow: 15px 15px 40px 0 rgba(0,0,0,0.05);
	        box-shadow: 15px 15px 40px 0 rgba(0,0,0,0.05);
}

#tools .tool-set ul li .app-name {
	display: block;
	margin-top: 0.625rem;
	font-size: 0.75rem;
	line-height: 1rem;
}

#clients .clients-carousel:before,
#clients .clients-carousel:after {
	content: '';
	display: block;
	position: absolute;
	left: 0; top: 0;
	z-index: 1;
	height: 30px;
	width: 100px;
	background-image: url(../img/clients-left-shadow.png);
	background-repeat: no-repeat;
	background-position: left center;
}

#clients .clients-carousel:after {
	left: inherit;
	right: 0;
	background-image: url(../img/clients-right-shadow.png);
	background-position: right center;
}

#clients .clients-carousel .slick-track .slick-slide {
	min-height: 30px;
	height: 30px;
}

#clients .clients-carousel .slick-track .slick-slide {
	margin: 0 1.25rem;
}

#clients .clients-carousel .slick-track .slick-slide img {
	display: inline-block;
}

#clients .testimonials {
	position: relative;
	background-color: rgb(255, 255, 255, 0.9);
	margin-top: 3.75rem;
	-webkit-box-shadow: 0 30px 40px 0 rgba(0,0,0,0.05), 0 1px 0 0 #F3F3F4;
	        box-shadow: 0 30px 40px 0 rgba(0,0,0,0.05), 0 1px 0 0 #F3F3F4;
	border-radius: 10px;
	padding: 3rem 1.5rem 1.25rem 1.5rem;
	cursor: -webkit-grabbing;
	cursor: grabbing;
}

#clients .testimonials:before {
	content: '';
	position: absolute;
	left: 67px;
	top: -20px;
	display: block;
	width: 77px;
	height: 59px;
	background-image: url(../img/icons/i-testimonials.svg);
	background-repeat: no-repeat;
}

#clients .testimonials .item {
	outline: 0;
}

#clients .testimonials .testimony {
	font-size: 0.9375rem;
	font-weight: 300;
	line-height: 1.563rem;
}

#clients .testimonials .user-card {
	margin-top: 1.25rem;
}

#clients .testimonials .user-card img {
	display: inline-block;
	max-width: 30px;
	border-radius: 15px;
}

#clients .testimonials .user-card span {
	display: block;
	font-size: 0.8125rem;
	line-height: 1.25rem;
}

#clients .testimonials .user-card span.name {
	margin-top: 0.5rem;
	font-weight: 500;
}

#clients .testimonials .slick-dots {
    position: absolute;
    left: 0;
    bottom: -40px;
    width: 100%;
    text-align: center;
}

#clients .testimonials .slick-dots li {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 2px;
    cursor: pointer;
}

#clients .testimonials .slick-dots li button {
    display: block;
    width: 20px;
    height: 20px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}

#clients .testimonials .slick-dots li button:before {
    content: '';
    background: #E7E7E7;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
}

#clients .testimonials .slick-dots li.slick-active button:before {
	width: 10px;
	height: 10px;
    background: #FFFFFF;
    margin: -5px 0 0 -5px;
    border: 1px solid #222222;
}

#contact {
	padding-top: 2.5rem;
}

#contact .contact-wrapper {
	position: relative;
	background-color: #E4E726;
	background-image: url(../img/i-contact-light-bg.svg);
	background-repeat: no-repeat;
	background-position: 30% center;
	padding: 3.75rem 3.125rem;
	-webkit-box-shadow: 10px -10px 0 0 rgba(228,231,38,0.20), 7px 15px 25px 0 rgba(0,0,0,0.10);
	        box-shadow: 10px -10px 0 0 rgba(228,231,38,0.20), 7px 15px 25px 0 rgba(0,0,0,0.10);
	border-radius: 10px;
}

#contact .contact-wrapper .dots-bg {
	position: absolute;
	left: 4px; bottom: -33px;
	width: 77px;
	height: 65px;
	background-image: url(../img/i-contact-small-dots.svg);
}

#contact .contact-wrapper .headline {
	font-size: 1.875rem;
	font-weight: 300;
}

#contact .contact-wrapper .cta a {
	background: #fff;
	font-size: 0.9375rem;
	font-weight: 500;
	color: #222;
	padding: 0.875rem 2.375rem;
	-webkit-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
	        box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
	border-radius: 25px;
	-webkit-transition: all .15s linear;
	-o-transition: all .15s linear;
	transition: all .15s linear;
}

#contact .contact-wrapper .cta a:hover {
	background: #222;
	color: #fff;
	text-decoration: none;
	-webkit-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
	        box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

.footer-quick-links {
	margin: 2.875rem 0 1.75rem 0;
}

footer {
	position: relative;
	padding: 2.875rem 0;
}

footer::before, footer::after {
	content: '';
	display: block;
	background: #222;
	position: absolute;
	top: -2px;
	left: 0;
	height: 1px;
	width: 150px;
	border-radius: 0.5px;
}

footer::after {
	left: auto;
	right: 0;
}

footer .copyright {
	font-size: 0.8125rem;
	font-weight: 300;
}

.footer-links {
	margin-top: 2.75rem;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}

.footer-links .footer-links__item {
	-webkit-box-flex: 1;
	    -ms-flex: 1 1 0px;
	        flex: 1 1 0;
}

.footer-links .footer-links__item a {
	background: url(../img/icons/i-external-link.svg) no-repeat 100% 5px;
    padding-right: 20px;
	display: inline-block;
	font-size: 1.25rem;
	font-weight: 300;
	color: #222;
}

/* Utility classes */

hr {
	margin: 0;
	border: 0;
	height: 3px;
	opacity: 0.5;
	background: url(../img/i-section-separator.svg) no-repeat center center;
}

.progress-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
}
.progress-bar {
    background-color: #E4E726;
    width: 0%;
    height: 100%;
    font-size: 0;
}

.frontpage .intro,
.frontpage #main-wrap #things-i-do,
.inner-page #main-wrap > section {
	animation: fadein 2s;
	-moz-animation: fadein 2s;
	-webkit-animation: fadein 2s;
	-o-animation: fadein 2s;
}

.top-hero-space {margin-top: 5rem;}
.top-mid-space {margin-top: 2.5rem;}
.bot-hero-space {margin-bottom: 5rem;}
.bot-mid-space {margin-bottom: 2.5rem;}

@keyframes fadein {
    from {opacity: 0;}
    to {opacity: 1;}
}
@-moz-keyframes fadein {
    from {opacity: 0.5;}
    to {opacity: 1;}
}
@-webkit-keyframes fadein {
    from {opacity: 0.5;}
    to {opacity: 1;}
}
@-o-keyframes fadein {
    from {opacity: 0.5;}
    to {opacity: 1;}
}

@-moz-keyframes fadein {
    from {opacity: 0.5;}
    to {opacity: 1;}
}
@-webkit-keyframes fadein {
    from {opacity: 0.5;}
    to {opacity: 1;}
}
@-o-keyframes fadein {
    from {opacity: 0.5;}
    to {opacity: 1;}
}

@keyframes placeHolderShimmer{
    0% {background-position: -468px 0}
    100% {background-position: 468px 0}
}

@-webkit-keyframes TextSpriteY {
	49% { -webkit-transform: translateY(-100%); }
	50% { -webkit-transform: translateY(100%); opacity: 0; }
	51% { opacity: 1; }
}
@-moz-keyframes TextSpriteY {
	49% { -moz-transform: translateY(-100%); }
	50% { -moz-transform: translateY(100%); opacity: 0; }
	51% { opacity: 1; }
}
@-ms-keyframes TextSpriteY {
	49% { -ms-transform: translateY(-100%); }
	50% { -ms-transform: translateY(100%); opacity: 0; }
	51% { opacity: 1; }
}
@-o-keyframes TextSpriteY {
	49% { -o-transform: translateY(-100%); }
	50% { -o-transform: translateY(100%); opacity: 0; }
	51% { opacity: 1; }
}
@keyframes TextSpriteY {
	49% { transform: translateY(-100%); }
	50% { transform: translateY(100%); opacity: 0; }
	51% { opacity: 1; }
}

@-webkit-keyframes TextSpriteX {
	49% { -webkit-transform: translateX(100%); }
	50% { -webkit-transform: translateX(-100%); opacity: 0; }
	51% { opacity: 1; }
}
@-moz-keyframes TextSpriteX {
	49% { -moz-transform: translateX(100%); }
	50% { -moz-transform: translateX(-100%); opacity: 0; }
	51% { opacity: 1; }
}
@-ms-keyframes TextSpriteX {
	49% { -ms-transform: translateX(100%); }
	50% { -ms-transform: translateX(-100%); opacity: 0; }
	51% { opacity: 1; }
}
@-o-keyframes TextSpriteX {
	49% { -o-transform: translateX(100%); }
	50% { -o-transform: translateX(-100%); opacity: 0; }
	51% { opacity: 1; }
}
@keyframes TextSpriteX {
	49% { transform: translateX(100%); }
	50% { transform: translateX(-100%); opacity: 0; }
	51% { opacity: 1; }
}

.projects .project__item .cover {
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background: #f3f3f3;
    background: linear-gradient(to right, #f3f3f3 8%, #e9e9e9 18%, #f3f3f3 33%);
    background-size: 800px 104px;
    width: 100%;
    min-height: 180px;
    position: relative;
}

.open-to-work .open-links .open-links__item.open-links__item--contact a:hover img {
	-webkit-animation: TextSpriteY .25s forwards;
	-moz-animation: TextSpriteY .25s forwards;
	-ms-animation: TextSpriteY .25s forwards;
	-o-animation: TextSpriteY .25s forwards;
	animation: TextSpriteY .25s forwards;
}

.open-to-work .open-links .open-links__item.open-links__item--resume a:hover img,
.page-404 .page-404__text a:hover img,
.pagination div a:hover svg {
	-webkit-animation: TextSpriteX .25s forwards;
	-moz-animation: TextSpriteX .25s forwards;
	-ms-animation: TextSpriteX .25s forwards;
	-o-animation: TextSpriteX .25s forwards;
	animation: TextSpriteX .25s forwards;
}

/*!---- inner pages ----*/
.inner-page header {
	border-bottom: 1px solid rgba(0, 0, 0, 0.07);
	-webkit-box-shadow: none;
	        box-shadow: none;
}
.inner-page header .container .row {
	background: none;
}

.selected {
	display: block;
	opacity: 0.5;
	letter-spacing: -0.5px;
	margin-bottom: 0.875rem;
	line-height: 0.875rem;
	padding-left: 5px;
}

h1.page-title {
	font-size: 4rem;
	line-height: 2.75rem;
	font-weight: 300;
	margin: 0 0 4rem 0;
}

.paragraph-wrap p {
	font-size: 1.125rem;
	line-height: 1.75rem;
	margin-bottom: 1rem;
}

.about-summary {
	padding-left: 5rem;
}
.about-summary h3 {
	font-size: 1.625rem;
	line-height: 2.5rem;
	font-weight: 400;
	margin-bottom: 1.5rem;
}

.connect {
	display: flex;
}

.connect .connect__link {
	margin-right: 2em;
}

.connect a {
	display: block;
	font-size: 1.125rem;
	color: #222;
	text-decoration: underline;
}

.connect a img {
	margin-right: 10px;
}

.open-to-work .open__status {
	font-size: 2.5rem;
	font-weight: 400;
	line-height: 3rem;
	margin-bottom: 1.625rem;
}

.open-to-work .open-links {
	display: flex;
	justify-content: center;
}

.open-to-work .open-links .open-links__item {
	margin: 0 1rem;
}

.open-to-work .open-links .open-links__item a,
.page-404 .page-404__text a {
	background: #fff;
	display: inline-block;
	color: #222;
	line-height: 1rem;
	-webkit-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
	border-radius: 25px;
	padding: 0.75rem 2.5rem;
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.open-to-work .open-links .open-links__item.open-links__item--contact a,
.page-404 .page-404__text a {
	background: #222;
	color: #fff;
}

.open-to-work .open-links .open-links__item.open-links__item--contact a img,
.page-404 .page-404__text a img {
	-webkit-filter: invert(1);
	        filter: invert(1);
}

.open-to-work .open-links .open-links__item a img,
.page-404 .page-404__text a img {
	margin-left: 8px;
}

.open-to-work .open-links .open-links__item a:hover,
.page-404 .page-404__text a:hover {
	text-decoration: none;
}

.projects {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 3rem 1fr;
	grid-template-columns: 1fr 1fr;
	grid-gap: 3rem;
}

.projects .project__item {
	position: relative;
	border-radius: 30px;
	overflow: hidden;
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	-webkit-box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.05);
	        box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.05);
}

.projects .project__item:hover {
	-webkit-transform: translateY(-7px);
	    -ms-transform: translateY(-7px);
	        transform: translateY(-7px);
	-webkit-box-shadow: 0 10px 35px 0 rgba(0, 0, 0, 0.05);
	        box-shadow: 0 10px 35px 0 rgba(0, 0, 0, 0.05);
}

.projects .project__item .cover img {
	display: block;
	width: 100%;
}

.projects .project__item .name {
	-webkit-transform: rotate(0.01deg);
	    -ms-transform: rotate(0.01deg);
	        transform: rotate(0.01deg);
}

.projects .project__item .name.grid-col-2 {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 1fr;
	grid-template-columns: 1fr 1fr;
}

.projects .project__item .name.grid-col-3 {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 1fr 1fr;
	grid-template-columns: 1fr 1fr 1fr;
}

.projects .project__item .name h3 {
	font-size: 1.5rem;
	font-weight: 500;
	letter-spacing: -0.5px;
}

.projects .project__item .name .portfolio-link {
	text-align: center;
}

.projects .project__item .name .portfolio-link a {
	display: block;
	padding: 1.5rem 0;
	color: #222;
}

.projects .project__item .name .cta {
	font-size: 1rem;
}

.projects .project__item .name .cta--haslink {
	background-image: url(../img/icons/i-external-link.svg);
	background-repeat: no-repeat;
	background-position: 100% center;
	padding-right: 20px;
}

.projects .project__item .name .cta--haslink.cta--ios {
	background-image: url(../img/icons/i-ios-link.svg);
}

.projects .project__item .name .cta--haslink.cta--android {
	background-image: url(../img/icons/i-android-link.svg);
}

.projects .project__item .link {
	display: block;
	position: absolute;
	left: 0; top: 0;
	width: 100%;
	height: 100%;
}

/* 1 col prjects */

.projects.full-width {
	-ms-grid-columns: 1fr;
	grid-template-columns: 1fr;
}

.projects.full-width .project__item {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

.projects.full-width .project__item:nth-child(odd) {
	-webkit-box-orient: horizontal;
	-webkit-box-direction: reverse;
	    -ms-flex-flow: row-reverse;
	        flex-flow: row-reverse;
}

.projects.full-width .project__item .name {
	padding-left: 4rem;
	padding-right: 4rem;
}

.projects.full-width .project__item .cover,
.projects.full-width .project__item .name {
	-webkit-box-flex: 1;
	    -ms-flex: 1 1 50%;
	        flex: 1 1 50%;
}

.projects.full-width .project__item .name h3 {
	margin-bottom: 0.375rem;
	font-size: 3rem;
	line-height: 3.25rem;
}

.projects.full-width .project__item .desc {
	margin-bottom: 1.5rem;
	font-size: 1.125rem;
	line-height: 1.75rem;
	max-width: 25rem;
}

.projects.full-width .project__item .name .cta {
	font-size: 1rem;
	font-weight: 500;
}

.projects.full-width .project__item .name .cta--haslink {
	background-image: url(../img/icons/i-internal-link.svg);
	padding-right: 20px;
}

.actions {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: distribute;
	    justify-content: space-around;
}

.action {
	flex-basis: 33.33333%;
}

.action .preamble {
	display: block;
	letter-spacing: -0.5px;
}

.action .callout {
	position: relative;
	display: inline-block;
	font-size: 2rem;
	color: #222;
}

.action .callout::after {
	content: '';
	display: block;
	width: 1rem;
	height: 4px;
	margin: 0 auto;
	background: #222;
	-webkit-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
	-webkit-box-shadow: 0 0 30px 0 rgba(0,0,0,0.07);
	        box-shadow: 0 0 30px 0 rgba(0,0,0,0.07);
	border-radius: 2px;
}

.action.action--dribbble .callout::after {
	background: #EA4C89;
}

.action .callout:hover {
	text-decoration: none;
}

.action .callout:hover::after {
	width: 100%;
}

.action .callout h3 {
	font-weight: 400;
	padding: 1rem 0;
}

.page-404 {
	padding: 10rem 2.5rem;
	border-radius: 30px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
	-webkit-box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.05);
	        box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.05);
}

.page-404 .page-404__img img {
	max-width: 300px;
}

.page-404 .page-404__text {
	text-align: center;
	max-width: 230px;
}

.page-404 .page-404__text h2 {
	font-size: 2.5rem;
	margin-bottom: 1.5rem;
	font-weight: 500;
}

.page-404 .page-404__text p {
	font-size: 1rem;
	font-weight: 300;
	margin-bottom: 1.25rem;
}

/* Pagination */
.pagination-wrapper {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.pagination {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
	margin: 0 auto;
	min-height: 44px;
	border: 3px solid rgba(0,0,0,0.05);
	border-radius: 22px;
	padding: 0 1rem;
}

.pagination div a {
	position: relative;
	display: block;
	padding: 0.5rem 1rem;
	color: #222;
}

.pagination div a:hover {
	text-decoration: none;
}

.pagination .pagination__arrow.arrow--inactive {
	opacity: 0.1;
	pointer-events: none;
}

.pagination .pagination__page.page--current a:after {
	content: '';
	display: block;
	height: 3px;
	width: 100%;
	position: absolute;
	left: 0;
	top: 100%;
	background: #222;
	border-radius: 1.5px;
	-webkit-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}

/* Dark theme */
/*
@media (prefers-color-scheme: dark) {
	body {
		color: rgb(255, 255, 255, 0.85);
	}

	header .intro-copy .intro-quick-links ul li a,
	.footer-quick-links ul li a,
	#things-i-do .item p,
	#tools .tool-set ul li .app-name,
	#clients .testimonials .user-card span {
		color: rgb(255, 255, 255, 0.60);
	}

	body {
		background-color: #0F0F0F;
	}

	header {
		background-color: #121212;
		border-bottom: 1px solid #191920;
		-webkit-box-shadow: none;
		        box-shadow: none;
	}

	header .logo a img {
		filter: invert(1);
	}

	header .container .row {
		background-image: url(../img/i-dots-dark-bg.svg);
	}

	header .intro-background img,
	#tools .tool-set ul li .app-icon {
    	filter: brightness(.8) contrast(1.2);
		opacity: 0.5;
	}

	header .intro-copy .intro-quick-links ul li a span,
	.footer-quick-links ul li a span,
	#clients .clients-carousel .slick-track .slick-slide img,
	#clients .testimonials .user-card img {
		filter: invert(1);
		opacity: 0.6;
	}

	section .section-head {
		font-weight: 500;
	}

	#tools {
		background: #121212;
	}

	#clients .testimonials {
		background-color: inherit;
		border: 5px solid #25262C;
		-webkit-box-shadow: none;
		        box-shadow: none;
	}

	#clients .clients-carousel:before,
	#clients .clients-carousel:after {
		opacity: 0;
	}

	#clients .testimonials:before {
		background-image: url(../img/icons/i-testimonials-dark.svg);
	}

	#clients .testimonials .slick-dots li button:before {
		background: rgba(255, 255, 255, 0.60);
	}

	#clients .testimonials .slick-dots li.slick-active button:before {
		background: rgba(255, 255, 255, 0.80);
		border: 2px solid #3E3F45;
	}

	#contact .contact-wrapper {
		background-image: url(../img/i-contact-dark-bg.svg);
		background-color: #25262C;
		-webkit-box-shadow: 10px -10px 0 0 rgba(255,255,255,0.03);
				box-shadow: 10px -10px 0 0 rgba(255,255,255,0.03);
	}

	#contact .contact-wrapper .dots-bg {
		opacity: 0.05;
	}

	#contact .contact-wrapper .cta a {
		background: rgba(255, 255, 255, 0.80);
		color: #121212;
	}

	#contact .contact-wrapper .cta a:hover {
		background: rgba(255, 255, 255, 0.90);
		color: #121212;
		-webkit-box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
		        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
	}

	.progress-bar {
		background-color: rgba(255, 255, 255, 0.60);
	}
}
*/
/* Extra large devices (large desktops, 1200px and up) */
@media (max-width: 1200px) {
	#things-i-do .item p {
		font-size: 0.875rem;
	}
	#tools .tool-set ul li {
		margin: 0 2px;
	}
	#contact .contact-wrapper {
		padding: 3.125rem 2.5rem;
	}
	#contact .contact-wrapper .headline {
		font-size: 1.75rem;
	}
	/* Inner pages */
	h1.page-title {
		font-size: 3.375rem;
	}
	.about-summary {
		padding-left: 3rem;
	}
	.projects {
		grid-gap: 2.5rem;
	}
	.projects.full-width .project__item .name {
		padding-left: 3rem;
		padding-right: 3rem;
	}
	.projects .project__item .name h3 {
		font-size: 1.25rem;
		margin-bottom: 0.25rem;
	}
	.action .callout h3 {
		padding: 0.8125rem 0;
	}
	.page-404 .page-404__img img {
		max-width: 250px;
	}
}


/* Large devices (desktops, 992px and below) */
@media (max-width: 992px) {
	header {
		padding-top: 1.75rem;
		padding-bottom: 3.5rem;
	}
	header .header-wrap {
		margin-bottom: 2.375rem;
	}
	.inner-page header {
		padding-bottom: 2rem;
	}
	.inner-page header .header-wrap {
		margin-bottom: 0;
	}
	header .intro .intro-name {
		font-size: 1.25rem;
		margin-bottom: 1rem;
	}
	header .intro .intro-headline {
	    font-size: 2rem;
	    line-height: 2.75rem;
	    margin-bottom: 2.5rem;
	}
	#things-i-do {
		padding-bottom: 4.375rem;
	}
	#things-i-do .row .col-lg-4 .item {
		margin-bottom: 1.625rem;
	}
	#tools.top-mid-space {
		margin-top: 0;
	}
	#tools .tool-set ul li {
		width: 15%;
		margin: 10px 0;
	}
	/* Inner pages */
	.inner-page section {
		padding: 3.5rem 0;
	}
	.selected {
		margin-bottom: 0.5rem;
		padding-left: 4px;
	}
	h1.page-title {
		font-size: 3rem;
		margin: 0 0 2.5rem 0;
	}
	.about-summary {
		padding-left: 15px;
	}
	.paragraph-wrap p {
		margin-bottom: 1.75rem;
	}
	.about-summary h3 {
		font-size: 1.25rem;
	    line-height: 2rem;
	    margin-bottom: 1rem;
	}
	.about-summary .connect .connect__link {
		margin-right: 1rem;
	}
	.about-summary .connect a {
	    font-size: 1.25rem;
	}
	.open-to-work .open__status {
	    font-size: 1.75rem;
	    line-height: 2.5rem;
	    margin-bottom: 1rem;
	}
	.open-to-work .open-links .open-links__item {
		margin: 0 0.5rem;
	}
	.open-to-work .open-links .open-links__item a {
		padding: 0.75rem 2rem;
	}
	.projects {
	    grid-gap: 2rem;
	}

	.projects .project__item .name .portfolio-link a {
		padding: 1rem 0;
	}
	.projects.full-width .project__item .name {
		padding-left: 2rem;
		padding-right: 2rem;
	}
	.projects.full-width .project__item .name h3 {
		font-size: 2rem;
		line-height: 2.25rem;
	}
	.projects.full-width .project__item .desc {
		font-size: 1rem;
		line-height: 1.5rem;
		margin-bottom: 1rem;
	}
	.projects.full-width .project__item .name .cta,
	.projects .project__item .name .cta {
		font-size: 0.875rem;
	}
	.action .callout {
	    font-size: 1.5rem;
	}
	.action .callout h3 {
	    padding: 0.5rem 0;
	}
	.top-hero-space {
		margin-top: 3.5rem;
	}
}

/* Medium devices (tablets, 768px and below) */
@media (max-width: 768px) {
	.frontpage header {
		padding: 1.75rem 0 2.5rem 0;
	}
	.inner-page header .header-wrap {
		margin-bottom: 0;
	}
	header .main-navigation {
		display: none;
	}
	header .mobile-navigation {
		display: block;
	}
	header .mobile__extras {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
	}
	header .intro {
		padding: 0 0.9375rem;
	}
	header .intro .intro-name {
	    margin-bottom: 0.625;
	}
	header .intro .intro-headline {
		font-size: 1.5rem;
		line-height: 2.25rem;
		margin-bottom: 1.125rem;
	}
	header .intro .occupation {
	    font-size: 1rem;
	    margin-bottom: 0.25rem;
	}
	header .intro .learn-more {
		font-size: 0.875rem;
	}
	section {
	    padding: 3rem 0 3.125rem 0;
	}
	section .section-head {
		font-size: 1.5rem;
		margin-bottom: 1rem;
	}
	#things-i-do {
		padding-bottom: 2.375rem;
	}
	#things-i-do .row .col-lg-4 .item,
	#things-i-do .row .col-lg-4 .item {
		margin-bottom: 1.25rem;
	}
	#things-i-do .item p {
		max-width: 280px;
	}
	#tools .tool-set ul li {
		width: 24%;
	}
	#clients .clients-carousel .slick-track .slick-slide {
		margin: 0 0.625rem;
	}
	#clients .testimonials {
		margin-top: 1.25rem;
		padding: 3rem 1.5rem 1.25rem 1.5rem;
	}
	#clients .testimonials:before {
		top: 0;
		left: 50%;
		margin-left: -25px;
		width: 50px;
	    height: 39px;
	    background-size: contain;
	}
	#clients .testimonials .testimony {
		font-size: 0.875rem;
	}
	#contact {
		padding: 2rem 0 3rem 0;
	}
	#contact .contact-wrapper {
		background-position: right top;
		text-align: center;
		padding: 1.875rem;
	}
	#contact .contact-wrapper .pull-left,
	#contact .contact-wrapper .pull-right {
		float: none !important;
	}
	#contact .contact-wrapper .headline {
		font-size: 1.25rem;
		margin-bottom: 1.75rem;
	}
	#contact .contact-wrapper .cta a {
		padding: 0.75rem 1.75rem;
	}
	.footer-links {
		margin-top: 2.5rem;	
	}
	.footer-links .footer-links__item a {
		font-size: 1rem;
	}
	footer {
		padding: 1.375rem 0;
	}
	footer::before, footer::after {
		width: 2rem
	}
	footer .copyright span {
		display: block;
	}
	/* Inner pages */
	.inner-page section {
	    padding: 2.5rem 0;
	}
	.selected {
		margin-bottom: 0;
		padding-left: 2px;
	}
	h1.page-title {
		font-size: 2.25rem;
		margin: 0 0 1.5rem 0;
	}
	.open-to-work .open__status {
	    font-size: 1.5rem;
	    line-height: 2rem;
	}
	.projects {
	    grid-template-columns: 1fr;
	}
	.projects .project__item {
		border-radius: 20px;
	}
	.projects.full-width .project__item,
	.projects.full-width .project__item:nth-child(odd) {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-flow: column;
		        flex-flow: column;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
	}
	.projects.full-width .project__item .name {
		padding: 2rem;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-webkit-box-pack: end;
		    -ms-flex-pack: end;
		        justify-content: flex-end;
	}
	.projects.full-width .project__item .name .cta {
		font-size: 1rem;
	}
	.actions {
		display: block;
	}
	.action {
		margin-bottom: 1.5rem;
	}
	.action:last-child {
		margin-bottom: 0;
	}
	.progress-container {
		height: 5px;
	}
	.page-404 {
		padding: 5rem 1.5rem;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
	}
	.page-404 .page-404__img {
		margin-bottom: 2rem;
	}
	.page-404 .page-404__img img {
		max-width: 200px;
	}
	.top-hero-space {
		margin-top: 2.5rem;
	}
	/* Dark theme */
/*	@media (prefers-color-scheme: dark) {
		header .intro-copy .intro-quick-links ul li a {
			background: #25262C;
		}
		#clients .testimonials:before {
			top: -15px;
		}
	}*/
}

/* Small devices (landscape phones, 576px and below) */
@media (min-width: 576px) {

}