/* ---------------------
 * All of css here is coming from parent bootstrap file `initialize.css`.
 *
 * Rules:
 * - If the changes needs to implement to all pages. Put it in `initialize.css`.
 * - If the changes needs to be implement only in profile page for both internal and external not to all hk pages. Put it here.
 * - If the changes is just for internal page. put it in `publicInternal.css`.
 * - If the changes is just for external page. put it in `publicExternal.css`.
 */


.background-shadow {
	box-shadow: 0 3px 6px -2px rgba(0,0,0,.3);
}

/*
 * Forms
 */
.form-text-override {
	font: 13px 'Tahoma' !important;
}
.form-control.error {
	border: 1px solid #c24949;
}
.form-with-icon {
	/* border-radius: 0px; */
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
}
.input-group-prepend {
	height:30.5px;
}
.override-input-group-text {
	padding: .35rem .35rem !important;
}

 .askQuotation-background {
    background: #f7f7f7;
 }

 #contactExpertForm #contactMessage {
     height: 100px !important;
 }

/*
 * Modal
 */
.modal-body-loading-hide {
	display: none;
}
.modal-body-loading-show {
	display: block !important;
}

/*
 * Add Quotation Section
 */
.inviteOtherExperts, .isWorkOnLocation {
	color: #5b5d62;
}
.inviteOtherExperts a {
    color:#5b5d62 !important;
	text-decoration: underline;
}
.conditions {
	padding-top: 5px;
}
.expert-quotation .conditions, .expert-quotation-button {
	color: #5b5d62 !important;
	font-size:14px;
}
.expert-quotation .conditions a {
	color:#5b5d62 !important;
	text-decoration: underline;
}

/*
 * Overview Section
 */
.bounce {
	display: inline-block;
  	-moz-animation: pulse 2s infinite linear;
  	-o-animation: pulse 2s infinite linear;
  	-webkit-animation: pulse 2s infinite linear;
	animation: pulse 2s infinite linear;
}
.overview-control {
	cursor: pointer;
	color: #f9a31a;
}
#overview {
	font-size: 15px;
	line-height: 1.5;
}
#overview p.collapse:not(.show) {
    height: 433px !important;
    overflow: hidden;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
#overview p.collapsing {
    min-height: 433px !important;
}
#overview span.collapsed:after  {
    content: '+ Lees verder';
}
#overview span:not(.collapsed):after {
    content: '- Lees minder';
}
.expertise-spacing {
	padding-top:5px;
}
.custom-badge-link:visited, .custom-badge-link:hover, .custom-badge-link:active {
	color: #f9a31a !important;
}

/*
 * Client Review Section
 */
.clear-fluid {
	padding-right: 0px !important;
	padding-left: 0px !important;
}
.client-review-item-compact {
	padding-right: 0px !important;
	padding-left: 0px !important;
}
.custom-title-padding-top {
	padding-top: 35px !important;
}
.referentiesterren {
	vertical-align: inherit;
}

/*
 * Portfolio
 */
.card {
	width: 95% !important;
}
.magnifying-glass-icon {
	cursor:pointer;
	font-size:20px;
}
.portfolio-cover {
	border: 1px solid #ccd2d2 !important;
	box-shadow: 1px 2px 2px #ccc !important;
}
.view-portfolio-details {
	color: #0b0b0b !important;
}
.p-title {
	color: #212529;
	background-color: #fff;
	border-color: #bebebe;
	font-size:24px;
	margin-bottom: 0px !important;
}
.p-title, .p-content {
	text-align: center !important;
}
.p-padding {
	padding-left: 20px;
	padding-right: 20px;
}
.p-freelance-firstname {
	display:inline-block !important;
}
.p-subtitle {
	color: #290064;
	background-color: #f9a31a;
	border-color: #bf5019;
	margin-bottom: 0px !important;
}
.p-subtitle-fit {
	display: inline-block;
	padding: 10px;
	border-radius: 5px;
}
.p-coverimage img {
	width: 300px;
	border-radius: 5px;
}
.p-file img {
	width: 350px;
}
.p-file-download {
	text-decoration: none !important;
}
.portfolio-iframe iframe {
	width:100% !important;
	height: 600px !important;
}
.p-file video {
	width: 100% !important;
	/* border: 1px solid #ccc;
	box-shadow: 2px 2px #ccc; */
}

.portfolio-box {
	background-image: url('/img/thumbnails/svg/unknown-file.svg');
	background-size: 245px 265px;
	background-repeat: no-repeat;
}

.hovereffect:hover > .portfolio-box{
	opacity: 0.1 !important;
}

.title-underline {
    border-color: #f9a31a !important;
}

.expert-ratings-orange {
    background-color: #f9a31a !important;
}

@-webkit-keyframes pulse {
	30% { opacity: 1; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}
@-moz-keyframes pulse {
	30% { opacity: 1; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}
@-o-keyframes pulse {
	30% { opacity: 1; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}
@-ms-keyframes pulse {
	30% { opacity: 1; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes pulse {
	30% { opacity: 1; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}

/*
 * Google Map Section
 */
.expert-location {
	display: none;
}
.expert-location-show {
	display: block;
}

/*
 * Devices
 */
@media only screen and (min-width: 992px) and (max-width: 1024px) {
	.expert-ratings-position {
		width:80px !important;
		position:absolute;
		top:60px;
		left:295px;
	}
}
@media only screen and (min-width: 768px) and (max-width: 990px) {
	/* show 2 items */
	.carousel-inner .active,
	.carousel-inner .active.carousel-item + .carousel-item {
		display: block !important;
	}

	.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
	.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
	.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
		transition: none;
	}

	.carousel-inner .carousel-item-next,
	.carousel-inner .carousel-item-prev {
		position: relative;
		transform: translate3d(0, 0, 0);
	}

	.carousel-inner .active.carousel-item + .carousel-item + .carousel-item  {
		position: absolute;
		top: 0;
		right: -25%;
		z-index: -999;
		display: block;
		visibility: visible;
	}

	/* left or forward direction */
	.active.carousel-item-left + .carousel-item-next.carousel-item-left,
	.carousel-item-next.carousel-item-left + .carousel-item,
	.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item {
		position: relative;
		transform: translate3d(-100%, 0, 0);
		visibility: visible;
	}

	/* farthest right hidden item must be abso position for animations */
	.carousel-inner .carousel-item-prev .carousel-item-right {
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		display: block;
		visibility: visible;
	}

	/* right or prev direction */
	.active.carousel-item-right + .carousel-item-prev.carousel-item-right,
	.carousel-item-prev.carousel-item-right + .carousel-item,
	.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
	.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
		position: relative;
		transform: translate3d(100%, 0, 0);
		visibility: visible;
		display: block;
		visibility: visible;
	}
}
@media only screen and (min-width: 991px) {
	/* show 3 items */
	.carousel-inner .active,
	.carousel-inner .active.carousel-item + .carousel-item,
	.carousel-inner .active.carousel-item + .carousel-item + .carousel-item{
		display: block !important;
	}

	.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
	.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
	.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
		transition: none;
	}

	.carousel-inner .carousel-item-next,
	.carousel-inner .carousel-item-prev {
		position: relative;
		transform: translate3d(0, 0, 0);
	}

	.carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item  {
		position: absolute;
		top: 0;
		right: -25%;
		z-index: -999;
		display: block;
		visibility: visible;
	}

	/* left or forward direction */
	.active.carousel-item-left + .carousel-item-next.carousel-item-left,
	.carousel-item-next.carousel-item-left + .carousel-item,
	.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
	.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
		position: relative;
		transform: translate3d(-100%, 0, 0);
		visibility: visible;
	}

	/* farthest right hidden item must be abso position for animations */
	.carousel-inner .carousel-item-prev.carousel-item-right {
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		display: block;
		visibility: visible;
	}

	/* right or prev direction */
	.active.carousel-item-right + .carousel-item-prev.carousel-item-right,
	.carousel-item-prev.carousel-item-right + .carousel-item,
	.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
	.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
		position: relative;
		transform: translate3d(100%, 0, 0);
		visibility: visible;
		display: block;
		visibility: visible;
	}

	/* Client Review Height */
	.custom-client-reviews-height {
		height:145px !important;
	}
}
@media (max-width: 991px) {
	.expert-ratings-position {
		width:80px !important;
		position:absolute;
		top:60px;
		left:240px;
	}
	.expert-quotation-details, .expert-quotation-action {
		-ms-flex: 0 0 100% !important;
		flex: 0 0 100% !important;
		max-width: 100% !important;
		text-align: center !important;
	}

}
@media (max-width: 767px) {
	.carousel-inner .active {
		display: block !important;
	}
	/* .expert-ratings-position {
		width:80px !important;
		position:absolute;
		top:60px;
		left:210px;
	} */
	.border-seperator {
		border-left: 1px solid #fff;
	}
}
@media only screen and (min-width: 328px) and (max-width: 391px) {
	/* Client Reviews Height */
	.custom-client-reviews-height {
		/*height:205px !important;*/
	}
}
@media (max-width: 327px) {
	/* Client Reviews Height */
	.custom-client-reviews-height {
		/*height:210px !important;*/
	}

	.custom-center {
		text-align: center !important;
	}

	.col-6 {
		max-width: 100%;
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
	}
}
@media only screen and (max-width: 500px) {

	.avatar-expert {
		width: 135px !important;
	}

	.news-logo {
		width: 15em;
	}

	.col-remove {
		display: none;
	}
}
@media (max-width: 414px) {
	.creative-cloud {
		padding-top:25px !important;
	}

	.custom-height {
		height: 424px;
	}

	.mobile-contact-section {
		text-align: center;
	}
}
@media(max-width: 375px) {
	.mobile-contact-section {
		text-align: center;
	}

	.avatar-position-top-right {
		left: 192px;
		top: 320px;
	}
}
@media(max-width: 320px) {
	.mobile-contact-section {
		text-align: center;
	}

	.mobile-spacer {
		padding-bottom: 5px !important;
	}

	.avatar-position-top-right {
		left: 152px;
		top: 345px;
	}
}

@media (max-width: 575px) {
	.container-portfolio {
		width: 245px !important
	}
}