@import url('https://fonts.googleapis.com/css?family=Baloo+Paaji+2|Molle:400i|Poppins&display=swap');
@import url('https://fonts.googleapis.com/css?family=Courgette&display=swap');
/*
    Project Name: Starter Pack Template
    Author: Monika Todorova
    Start Date: 04.10.2017
*/

h1 {
	font-family: Courgette;
	color: #A4647F;
	font-size: 30px;
}
p {
	font-family: Poppins;
}

/* MAIN STYLES */
.main .overlay {
	background: rgba(0, 0, 0, 0.7);
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 550px;
    display:flex;justify-content:center;align-items:center;
}
.main img {
	width: 100%;
	height: 550px;
	position: relative;
}
.main .info {
	margin: auto;
	text-align: center;
}
.main .info h1 {
	font-family: Molle;
	color: #fff;
	opacity: 1;
	font-size: 55px;
}
.main .info a {
	font-family: Poppins;
	text-align: center;
	color: rgba(255, 255, 255, 0.7);
	font-size: 18px;
}
.main .info a:hover {
	text-decoration: none;
	color: #fff;
}

/* ABOUT STYLES */
.about {
	position: relative;
	text-align: center;
	background: #fff;
	padding-bottom: 100px;
}
.about .profile {
	width: 200px;
	border-radius: 100%;
	text-align: center;
	margin-top: -100px;
	border: 5px solid #FFF6FA;
}
.about .icon {
	width: 20px;
	margin-top: 0;
}
.about h1 {
	margin: 30px 0px 10px 0px;
}
.about a {
	color: #A4647F;
	font-size: 25px;
	margin: 0px 10px;
}

/* SKILLS */
.skills {
	width: 100%;
    background: url(../img/bg3.jpg) center no-repeat;
    background-size: cover;
    background-attachment: fixed;
    padding: 100px 0px;
    height: auto;
    position: relative;
    color: #fff;
    text-align: center;
}
.skills .overlay {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
}
.skills img {
	width: 80px;
	border-radius: none;
	opacity: 0.9;
	margin: 10px 0;
}
.skills img:hover {
	opacity: 1;
}
.skills h1 {
	color: #fff;
	margin: 0px 0px 10px 0px;
}

/* WORK STYLES */
.work, .work-cards {
	background: #eee;
	padding: 80px 0;
}
.work h1, .work-cards h1 {
	text-align: center;
	font-size: 40px;
	margin-bottom: 10px;
}
.work img, .work-cards img {
	width: 100%;
	margin: 20px 0px;
	border-radius: 5px;
	transition: 0.1s ease all;
	box-shadow: rgba(0, 0, 0, 0.1) 0 15px 35px;
}

.work img:hover, .work-cards img:hover {
	transform: scale(1.05);
}

/* WORK-CARDS STYLES */
.work-cards {
	background: #fff;
}

/* CONTACT-INVITE */
.contact-invite {
	background: #A4647F;
	color: #fff;
	padding: 60px 0;
}
.contact-invite h1 {
	color: #fff;
	font-size: 25px;
}
.contact-invite h4 {
	color: #fff;
	font-size: 40px;
	font-family: Poppins;
}
.contact-invite a {
	font-family: Poppins;
	font-size: 18px;
	color: #fff;
    background: none;
    padding: 10px 50px;
    border: 2px solid #fff;
    border-radius: 50px;
    margin-left: auto;
}
.contact-invite a:hover {
	background: #fff;
	color: #A4647F;
	text-decoration: none;
}
.contact-invite .col-md-4 {
	display:flex;justify-content:center;align-items:center;
}

/* REVIEWS */
.reviews {
	width: 100%;
    background: url(../img/bg5.jpg) center no-repeat;
    background-size: cover;
    background-attachment: fixed;
    padding: 100px 0px;
    height: auto;
    position: relative;
    color: #fff;
}
.reviews .overlay {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
}
.reviews img {
	width: 30%;
	border-radius: 100%;
	margin: 20px 0;
}
.reviews img:hover {
	opacity: 1;
}
.reviews .fa {
	color: gold;
	font-size: 18px;
	margin: 10px 0px 20px 0px;
}
.reviews h1 {
	position: relative;
	text-align: center;
	color: #fff;
	line-height: 0.7;
	font-size: 35px;
	margin: 0px 0px 60px 0px;
}
.reviews h2 {
	color: #000;
	line-height: 0.7;
	font-family: Courgette;
}
.reviews h3 {
	color: #939498;
	line-height: 1;
	font-size: 14px;
	margin: 0;
	font-family: Poppins;
}
.reviews .client {
	color: #000;
	padding: 10px;
	background: rgba(255, 255, 255, 1);
	border-radius: 4px;
	text-align: center;
	height: 350px;
	transition: 0.1s ease all;
	box-shadow: rgba(0, 0, 0, 0.1) 0 15px 35px;
}
.reviews .client:hover {
	transform: scale(1.02);
}

/* FIVERR */
.fiverr {
	background: #eee;
	padding: 100px 0 50px 0;
}
.fiverr h1 {
	color: #1dbf73;
	text-align: center;
	font-size: 35px;
	margin-bottom: 40px;
}
.fiverr .box {
	color: #000;
	padding: 10px 10px 40px 10px;
	background: rgba(255, 255, 255, 1);
	border-radius: 4px;
	text-align: center;
	transition: 0.1s ease all;
	box-shadow: rgba(0, 0, 0, 0.1) 0 15px 35px;
}
.fiverr .box:hover {
	transform: scale(1.02);
}
.fiverr .box img {
	width: 100%;
	height: 220px;
	object-fit: cover;
}
.fiverr .box p {
	margin: 30px 20px;
}
.fiverr .box .link {
	color: #fff;
	background: #1dbf73;
	width: 50%;
	margin: auto;
	padding: 6px 15px 10px 15px;
	border-radius: 50px;
}
.fiverr .box .link:hover {
	color: #fff;
	background: #19a463;
	text-decoration: none;
}

/* FOOTER */ 
.footer {
	background: #eee;
	padding-bottom: 30px;
}
.footer p {
	text-align: center;
	margin: 0;
}



@media all and (min-width: 768px) and (max-width: 1199px) {
	/* MAIN STYLES */
	.main .overlay {
	    height: 300px;
	}
	.main img {
		height: 300px;
	}
	.main .info h1 {
		font-size: 35px;
		margin-bottom: 10px!important;
	}
	.main .info a {
		font-size: 15px;
	}
	/* ABOUT STYLES */
	.about {
		padding-bottom: 80px;
	}
	.about .profile {
		width: 150px;
		margin-top: -80px;
	}
	.about h1 {
		margin: 30px 0px 10px 0px;
	}
	.about p {
		font-size: 15px;
	}
	/* SKILLS */
	.skills {
	    padding: 80px 0px;
	}
	.skills img {
		width: 60px;
	}
	/* CONTACT-INVITE */
	.contact-invite h4 {
		font-size: 30px;
	}
	.contact-invite a {
		font-size: 15px;
	    padding: 10px 30px;
	}
	/* REVIEWS */
	.reviews {
	    padding: 80px 0px;
	}
	.reviews img {
		width: 20%;
		margin: 20px 0;
	}
	.reviews .fa {
		font-size: 15px;
		margin: 10px 0px 20px 0px;
	}
	.reviews h1 {
		font-size: 35px;
		margin: 0px 0px 40px 0px;
	}
	.reviews h2 {
		font-size: 25px;
	}
	.reviews h3 {
		font-size: 14px;
	}
	.reviews .client {
		padding: 10px 25px;
		height: 300px;
		margin: 10px auto;
		width: 100%;
	}
	.reviews .client p {
		font-size: 13px;
	}
	/* FIVERR */
	.fiverr {
		padding: 80px 0;
	}
	.fiverr h1 {
		font-size: 35px;
		margin-bottom: 40px;
	}
	.fiverr .box {
		padding: 0px 0px 40px 0px;
		height: auto;
		margin: 10px auto;
		width: 100%;
	}
	.fiverr .box img {
		width: 100%;
		height: auto;
		object-fit: cover;
	}
	.fiverr .box p {
		font-size: 14px;
		margin: 30px 20px;
	}
	.fiverr .box .link {
		padding: 6px 20px 10px 20px;
	}
}

@media screen and (max-width: 767px) {
	/* MAIN STYLES */
	.main .overlay {
	    height: 220px;
	}
	.main img {
		height: 220px;
	}
	.main .info h1 {
		font-size: 35px;
		margin-bottom: 10px!important;
	}
	.main .info h1 span {
		margin-top: 0px !important;
		margin-bottom: 20px !important;
	}
	.main .info a {
		font-size: 14px;
	}
	.main .row {
		margin: 0 -7.5px;
	}
	.main .row .col {
		padding: 0 7.5px;
	}
	/* ABOUT STYLES */
	.about {
		padding-bottom: 80px;
	}
	.about .profile {
		width: 150px;
		margin-top: 60px;
	}
	.about h1 {
		margin: 30px 0px 10px 0px;
	}
	.about p {
		font-size: 14px;
	}
	/* SKILLS */
	.skills {
	    padding: 60px 0px;
	}
	.skills img {
		width: 60px;
	}
	/* CONTACT-INVITE */
	.contact-invite {
		text-align: center;
		padding: 60px 0;
	}
	.contact-invite h4 {
		font-size: 20px;
	}
	.contact-invite a {
		font-size: 14px;
	    padding: 10px 30px;
	    margin: 10px auto 0 auto;
	}
	/* WORK */
	.work, .work-cards {
		text-align: center;
	} 
	.work img, .work-cards img {
		width: 80%;
		margin: 20px auto;
	}
	/* REVIEWS */
	.reviews {
	    padding: 80px 0px;
	}
	.reviews img {
		width: 20%;
		margin: 20px 0;
	}
	.reviews .fa {
		font-size: 14px;
		margin: 10px 0px 20px 0px;
	}
	.reviews h1 {
		font-size: 35px;
		margin: 0px 0px 40px 0px;
	}
	.reviews h2 {
		font-size: 25px;
	}
	.reviews h3 {
		font-size: 14px;
	}
	.reviews .client {
		padding: 10px 40px;
		height: auto;
		margin: 10px auto;
		width: 100%;
	}
	/* FIVERR */
	.fiverr {
		padding: 80px 0 30px 0;
	}
	.fiverr h1 {
		font-size: 35px;
		margin-bottom: 40px;
	}
	.fiverr .box {
		padding: 0px 0px 40px 0px;
		height: auto;
		margin: 10px auto;
		width: 100%;
	}
	.fiverr .box img {
		width: 100%;
		height: auto;
		object-fit: cover;
	}
	.fiverr .box p {
		margin: 30px 20px;
	}
	.fiverr .box .link {
		padding: 6px 20px 10px 20px;
	}
	.work img, .work-cards img {
		margin: 10px auto;
		width: 100%;
	}
	.footer p {
		font-size: 12px;
	}
}