.about-box,
.share-trip,
.contact-box {
	position: relative;
	@pv-contact-box();

	.content{
	background-color: white;
	border: 1px solid #e8e8e8;
	padding: 16px;
	}
}

.contact-box 
{
	height:100%;

	.content{
        h3 {
            font-family: Titillium Web;
            font-style: normal;
            font-weight: bold;
            font-size: 24px;
            line-height: 32px;
            letter-spacing: -0.02em;
            color: #333;
            margin-bottom: 25px;
        }
	}

    .telephone 
    {
        padding-left: 40px;
        padding-top: 5px;
        height: 30px;
        width: 130px;
        line-height: 18px;
        text-align: right;
        padding-bottom: 20px;

	    span 
        {
		    font-size:18px;
		    font-weight:bold;
			@pv-contact-box-telephone-span();
	    }

	    small 
        {
		    font-size:9px;
            line-height:9px;
			@pv-contact-box-telephone-small();
	    }
		@pv-contact-box-telephone();
    }

	.phone
	{
		a
		{
			text-decoration:none;
		}

		span.number
		{
			font-size:20px;
			font-weight:bold;
			
		}
	}

    .woman
	{
		width: 0;
		height: 0;
		position: absolute;
		right: 0;
		bottom: 0;
		pointer-events:none;
        
		@pv-contact-box-woman();
	}

    .content
    {
        a { color:@pv-contact-box-link-color; }

        dl
        {
		    dt
		    {
			    float:left;
			    clear:left;
			    width:70px;

                &.full {
                    width:100%;
                    font-size:14px;
                }
		    }

	        dd
	        {
		        float:left;
		        clear:right;
                text-align:right;
		        width:80px;
		
		        strong
		        {
			        font-size:16px;
		        }
            }
        }

        .mail 
        {
            padding-top: 10px;
            padding-bottom: 3px;
        }
    }

}

.sidebar.col3 .contact-box .woman,
#search-filters-column .contact-box .woman { background-position:40px 20px; }


.share-trip .content {	padding:10px; }
.contact-box .content
{
	padding:16px;
	line-height: 20px;
}

  .about-box .content {
        h3 {
            font-family: Titillium Web;
            font-style: normal;
            font-weight: bold;
            font-size: 24px;
            line-height: 32px;
            letter-spacing: -0.02em;
            color: #0077BF;
            margin-bottom: 25px;
        }
    }

.contact-box .content,
.about-box .content {
	.iconbox {
		margin-right: 14px;
		width: 25px;
		height: 25px;
	}

	.btn-default {
		margin-top: 33px;
		width: fit-content;
	}

	h4{
        font-family: Titillium Web;
        font-style: normal;
        font-weight: bold;
        font-size: 24px;
        line-height: 32px;
        letter-spacing: -0.02em;
        color: #333;
        margin-bottom: 25px;
	}

	> div > div {
		font-family: Lato;
		font-style: normal;
		font-weight: 500;
		font-size: 14px;
		line-height: 20px;
		color: #707070;
		margin-left: 35px;
		margin-bottom: 25px;
		margin-top: 3px;
	}

	.h4 {
		font-family: Lato;
		font-style: normal;
		font-weight: bold;
		font-size: 16px;
		line-height: 24px;
		color: #FF7801;
		@pv-contact-box-h4();
		margin:0;
	}

	div.widget-gray-bottom {
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		height: 79px;
		background: #F9F9F9;
		margin: 0;

		> div {
			margin-top: 14px;
			font-family: Lato;
			font-style: normal;
			font-weight: bold;
			font-size: 12px;
			line-height: 24px;
			text-align: center;
			color: #333333;
		}

		.widget-gray-bottom-socials {
			margin-top: 3px;
			width: 100%;
			display: flex;
			justify-content: center;
		}
	}

	.dreizen-logo {
		background: url('../../Images/d-reizen.nl/d-reizen_logo_home.svg') no-repeat 0 0;
		background-size: cover;
		width: 104px;
		height: 24px;
		display: block;
		margin: 2px 0;
	}
}

	.contact-box .content > .details {
		width: 100%;
	}

	.sidebar:not(.col3) .contact-box .telephone {
		width: 160px;
	}

	.sidebar:not(.col3) .contact-box .content dl dt:not(.full) {
		width: 130px;
	}

	.sidebar .contact-box .woman {
		background-position: 20px 20px;
	}

	.contact-page{
		h2{
			@header-default();
		}

		div.contact-subjects{
			display:flex;
			row-gap:8px;
			column-gap:8px;
			flex-wrap:wrap;
			justify-content:space-between;
			margin:10px 0 30px 0;
			
				@media @mobile{
					justify-content:center;
				}

			& > div{
				border-radius:4px;
				border:2px solid @color-primary-light-50;
				width:~"calc(33% - 4px)";
				flex-basis:~"calc(33% - 4px)";
				text-align:center;
				box-sizing:border-box;
				padding:19px 8px 49px 8px;
				position:relative;

				@media @mobile{
					width:100%;
					flex-basis:100%;
				}

				&:hover{
					border-color:@color-primary-light-25;
					background:@color-primary-light-75;

					a{
						
					}
				}

				a{
					color:@color-primary;
					text-decoration:none;
					font-weight:normal;
					position:absolute;
					top:0;
					left:0;
					padding:49px 8px 19px 8px;
					width:100%;
					height:100%;
					text-align:center;
					box-sizing:border-box;
				}
				
				&::before{
					font-family:@pv-font-icons-name;
					font-size:26px;
					color:@color-primary;
					display:block;
				}
				&.trip:before{ content:'\e92f';}
				&.documents:before{ content:'\e917';}
				&.transfer:before{ content:'\e916';}
				&.date:before{ content:'\e937';}
				&.departure:before{ content:'\e90f';}
				&.cancel:before{ content:'\e938';}
			}
		}

		div.center-text{
			text-align:center;

			& > a{
				display:inline !important;
			}
			& > p{
				@text-default();
				color:@color-text-subtle;
				width:100%;
				margin-top:20px;
			}
		}

		div.big-boxes{
			display:flex;
			row-gap:8px;
			justify-content:space-between;
			margin:20px 0;

			@media @mobile{
				justify-content:center;
				flex-direction:column;
			}

			& > div{
				background:@color-primary-light-75;
				border-radius:4px;
				padding:38px 8px 85px;
				text-align:center;
				width:188px;
				box-sizing:border-box;
				position:relative;

				@media @mobile{
					width:100%;
				}

				&:hover{
					&:before{
						color:@color-primary;
					}
					a{
						color:@color-primary;
					}
				}

				a{
					@text-default();
					color:@color-text-body;
					text-decoration:none;
					position:absolute;
					top:0;
					left:0;
					padding:70px 8px 38px 8px;
					width:100%;
					height:100%;
					text-align:center;
					box-sizing:border-box;

					small{
						@text-small();
						color:@color-primary;
						display:block;
					}
				}
				&::before{
					font-family:@pv-font-icons-name;
					font-size:38px;
					color:@color-text-body;
					display:block;
					margin:0 0 10px 0;
				}
				&.phone:before{ content:'\e942'; }
				&.whatsapp:before{ content:'\e923'; }
				&.mail:before{ content:'\e940'; }
				&.calendar:before{ content:'\e937'; }
				&.profile:before{ content:'\e92f'; }
			}
		}

		.dashed-box{
			padding:0;
			border:none;
			background:none;
			margin:0;
		}

		#contactform{
			ul{
				display:flex;
				flex-direction:row;
				row-gap:16px;
				column-gap:8px;
				flex-wrap:wrap;
				justify-content:space-between;
				align-content:space-between;
				li{
					width:100%;
					margin:0;
					flex-basis:100%;

					input,select,textarea{
						margin:0;
					}

					select#ContentPlaceHolderContent_cbSubject {
						&:invalid
						{
							color:@color-black;
							opacity:0.6;
						}
					}

					&.form-error{
						input,select,textarea{
							border-color:@color-action-alert;
							& + span{
								display:none !important;
							}
						}
					}

					&.phone,
					&.mail,
					&.subject,
					&.dossier{
						width:~"calc(50% - 4px)";
						flex-basis:~"calc(50% - 4px)";
					}
				}
			}
		}

		.valSummary{
			margin:10px 0 0 0;

			.valSummaryHead {
				span.formErrorImg{
					display:none !important;
				}
				@header-small();
				color:@color-secondary-dark-50;
			}
			ul {
				li{
					position:relative;
					color:@color-secondary-dark-50 !important;

					/*the validation seems to add these ::marker elements */
					&:before{
						color: @color-secondary-dark-50 !important;
						left:-15px !important;
						top:0 !important;
					}
					&::marker{
						content:'' !important;
					}
				}
			}
		}
}

	@media @mobile{
	/* 
		When validation fails the page scrolls to the select, but it doesn't know about the menu/header so it stays hidden.
		Add a little scroll-margin-top magic et voila!
	*/
	body.contact{
		*{
			scroll-margin-top: 70px;
		}

		#contactform{
			ul{
				li{
					&.phone,
					&.mail,
					&.subject,
					&.dossier{
						width:~"100%";
						flex-basis:~"100%";
					}
				}
			}
		}

	}
}