/* p */

@font-face {
	font-family: p-semibold;
	src: url(./../fonts/poppins/Poppins-SemiBold.ttf);
}

@font-face {
	font-family: p-medium;
	src: url(./../fonts/poppins/Poppins-Medium.ttf);
}

@font-face {
	font-family: p-regular;
	src: url(./../fonts/poppins/Poppins-Regular.ttf);
}

/* r */

@font-face {
	font-family: r-regular;
	src: url(./../fonts/roboto/Roboto-Regular.ttf);
}

@font-face {
	font-family: r-medium;
	src: url(./../fonts/roboto/Roboto-Medium.ttf);
}

@font-face {
	font-family: r-bold;
	src: url(./../fonts/roboto/Roboto-Bold.ttf);
}


/* styling */
p {
	font-family: r-regular, helvetica, sans-serif;
	color: #808080;
	font-size: 18px;
	line-height: 38px;
}

h1 {
	font-family: p-semibold, helvetica, sans-serif;
	color: #fff;
	font-size: 58px;
	line-height: 89px;
}

h2 {
	font-family: p-semibold, helvetica, sans-serif;
	color: #fff;
	font-size: 58px;
	line-height: 89px;
}

h3 {
	font-family: p-medium, helvetica, sans-serif;
	color: #fff;
	font-size: 36px;
	line-height: 59px;	
}

h4 {
	font-family: r-bold, helvetica, sans-serif;
	color: #fff;
	font-size: 18px;
}

h5 {
	font-family: p-medium, helvetica, sans-serif;
	color: #fff;
	font-size: 20px;
	line-height: 29px;
}

h6 {
	font-family: r-regular, helvetica, sans-serif;
	color: #fff;
	font-size: 16px;
	line-height: 29px;
}

li {
	font-family: r-regular, helvetica, sans-serif;
	font-size: 16px;
	color: #808080;
}


/* media */

@media (max-width: 1024px) {
	li {
		font-size: 44px;
	}

	.nav-top li {
		font-size: 28px;	
	}
}

@media (max-width: 640px) {
	h1 {
		font-size: 36px;
		line-height: 59px;
	}

	h2 {
		font-size: 36px;
		line-height: 59px;
	}

	li {
		font-size: 42px;
	}

	.nav-top li {
		font-size: 24px;	
	}
}

@media (max-width: 320px) {
	h1 {
		font-size: 26px;
    	line-height: 41px;
	}
}

/** specific styles **/

.tooltiptext {
	font-family: r-medium, helvetica, sans-serif;
	font-size: 16px;
	line-height: 24px;
}

.box_category {
	font-family: r-regular, helvetica, sans-serif;
	font-size: 16px;
}

.case-studies h3 {
	font-family: p-semibold, helvetica, sans-serif;
}

.box_categor_red {
	color: #E5223D;
}

.box_content h3 {
	font-size: 36px;
}

.box_sm span {
	font-family: p-semibold, helvetica, sans-serif;
	font-size: 12px;
}

.dot p {
	font-family: p-medium, helvetica, sans-serif;
	font-size: 16px;
	color: #fff;
}

.pulse p {
	font-family: p-semibold, helvetica, sans-serif;
	font-size: 16px;
	line-height: 38px;
	color: #fff;
}

.text-align_center {
	text-align: center;
}

.text-align_right {
	text-align: right;
}

.cibap_color {
	color: #E5027D;
}

.hku_color {
	color: #9EAEBF;
}

.dribbble_color {
	color: #ea4c89;
}


/* cases styleguide */

.heading_reverze h4 {
	font-family: r-bold;
	font-size: 18px;
	line-height: 21px;
	color: #414141;
}

.heading_reverze span:nth-child(2) {
	font-family: r-bold;
	font-size: 64px;
	line-height: 100px;
	color: #fff;
}

.heading_reverze span:nth-child(3) {
	font-family: r-bold;
	font-size: 18px;
	line-height: 21px;
	color: #fff;
}

.body_reverze h4 {
	font-family: r-regular;
	font-size: 18px;
	line-height: 21px;
	color: #414141;
}

.body_reverze span:nth-child(2) {
	font-family: r-regular;
	font-size: 64px;
	line-height: 100px;
	color: #fff;
}

.body_reverze span:nth-child(3) {
	font-family: r-regular;
	font-size: 18px;
	line-height: 33px;
	color: #9c9c9c;
}


@media (max-width: 640px) {
	.heading_reverze span:nth-child(2) {
		font-size: 44px;
	}

	.body_reverze span:nth-child(2) {
		font-size: 44px;
	}
}

.steps h2:nth-child(1) {
	color: #363636;
}


.link-animation {
	border-bottom: 2px solid #676767;
	padding: 0 0 -5px 0;
    display: inline-block;
    text-decoration: none;
}

.link-animation h3 {
	color: #414141;
}

.link-animation h3:hover {
	color: #fff;
}

.link-animation h5 {
	color: #414141;
}

.link-animation h5:hover {
	color: #fff;
}

.link-animation::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #fff;
    transition: width .5s;
}

.link-animation:hover::after {
	color: #fff;
    width: 100%;
    //transition: width .5s;
}

.download-resume span {
	font-family: r-regular, helvetica, sans-serif;
	color: #808080;
	font-size: 20px;
	line-height: 53px;
	padding: 0 0 0 5px;
}


.download-resume span:hover {
	color: #fff;
}