#photo
{
	position:absolute;
	right:50%;
	top:0;
    max-height:470px;

	& > .carousel
	{
		position:relative;
		right:-50%;
		height:470px;
		width:1920px;
		overflow:hidden;
		border:none;
        margin:0 !important;
        background:@pv-carousel-background-color;
	}

	.carousel .bg-photo
	{
		width:100%;
		height:100%;
		border:none;
        position:relative;
	
		& > picture > .photo,
		& > .photo
		{
			width:100%;
			height:100%;
            object-fit: cover;
            font-family:"object-fit: cover;";
            color:transparent;
		}
  
        & > .container 
        {
            position:absolute;
            top:0px;
            left:0px;
            width:100%;
            height:100%;
            min-height:0 !important;
        }
    }

    .carousel:not(.slick-dotted) .bg-photo:not(.slick-slide) {
        bottom:-20px;
    }

    .container 
    {
	    .item
	    {
		    position:absolute;
            z-index:1;
			@pv-photo-container-item();

		    & > a 
            {
			    display:block;
			    width:100%;
			    height:100%;
			    text-decoration:none;
		    }
        }

		div.h2
		{
			color: #fff;

			margin-bottom: 16px;
			display: block;
			margin-top: -12px;

			@media @desktop/*, @desktop-hd*/ {
				font-size: 40px;
				line-height: 32px;
			}

			@media @tablet {
				font-size: 30px;
				margin-bottom: 12px;
			}

			@media @mobile {
				font-size: 24px;
				margin-bottom: 8px;
			}
            @pv-photo-title();
		}
		div.h3
		{
	 float: none;
			text-decoration: none;
			display: inline-block;
			background: #fff !important;
			padding: 6px 12px;
			/*margin-left: -25px;*/
			@header-default();
			color:@color-primary;
        

			text-transform: uppercase;

			text-wrap:none;
			white-space:nowrap;
			overflow:hidden;

			@media @desktop/*, @desktop-hd*/ {
				font-size: 24px;
				line-height: 30px;
			}
			@media @tablet {
				font-size: 16px;
				line-height: 24px;
			}
			@media @mobile {
				font-size: 14px;
				line-height: 20px;
				margin-left: -40px;
				padding: 4px 26px 4px 50px;
			}
            @pv-photo-subtitle();
		}



        .h3 a 
        {
			background:url(img/base/button/pc/button_med_geel.png) no-repeat right 5px;
		}
    }


	.link-box,
    .slick-dots
	{
		position:absolute;
		top:40px;
		right:0px;
		z-index:6;
	}

    .slick-dots 
    { 
        text-align:right;
        padding-right:500px;
        height:12px; 

        li 
        {
            width:12px;
            margin:0 4px 0 0;
            
            button::before { display:none; }
        }
    }

    .link-box .select-slide,
    .slick-dots li button
    {
	    float:left;
	    display:block;
	    width:12px;
	    height:12px;
        .border-radius(6px);
	    margin-right:4px;
        background:#e4f3fd;
    }

    .link-box .select-slide.active,
    .slick-dots li.slick-active button
	{
        background:#c00;
	}

	.next-box,
	.prev-box,
    a.slick-arrow 
    {
		position:absolute;
		z-index:7;
	}

	.next-box,
    a#btn-up
	{
		right:-100px;
		top:150px;
	}
    a#btn-up { right:380px; }



    .next-box .up,
    a#btn-up
    {
	    display:block;
	    width:85px;
	    height:86px;
    }
    .prev-box,
    a#btn-down
	{
		left:-100px;
		top:150px;
	}
    a#btn-down { left:380px; }

    .prev-box .down,
    a#btn-down
    {
	    display:block;
	    width:85px;
	    height:86px;
    }

    .footer
    {
	    height:43px;
	    width:695px;
	    position:absolute;
	    bottom:0;
	    right:-900px;
	    padding:25px 425px 0 800px;
        background:url(img/base/elements/pc/photo_bottom.png) no-repeat left top; 
        @pv-photo-footer();
    }

    .text 
    {
	    .h2
	    {
		    font-size:18px;
		    font-weight:normal;
		    line-height:18px;
            color: @color-primary; 

		    &.sub-title
		    {
			    font-size:18px;
			    line-height:26px;
                color:@color-text-accent;
		    }
	    }

	    div.fb-like
	    {
		    float:right;
	    }
    }

}


    

body.template #photo 
{ 
    max-height:540px; 

	& > .carousel 
    { 
        height:540px; 

        & > div
        {
            position:absolute;
            bottom:0;
            width:100%;
            height:490px;
        }
	}

    .container .item
    {
        top:14px;
    }
}



		/* 
			ALS we cufon gaan gebruiken voor de titeltjes op de homepage dan zijn deze nodig om de stijlen te overschrijven.
			Cufon wordt eenmalig uitgevoerd, dus de titels moeten al gelijk in goede grootte staan.
			Mochten we toch voor de lettertype font-face variant gaan dan moeten in default.aspx de 2 extra item's per banner weggehaald worden.
		*/
		#photo .container .item.tablet h2,#photo .container .item.tablet h2 a { font-size:26px; }
		#photo .container .item.tablet h3,#photo .container .item.tablet h3 a { font-size:16px;line-height:20px; }

		#photo .container .item.phone h2, #photo .container .item.phone h2 a { font-size: 18px;line-height:18px; }
		#photo .container .item.phone h3, #photo .container .item.phone h3 a { font-size: 16px;line-height:16px;}


.slick-vertical .slick-slide { border:none !important; }





.imgHolder
{
    position: absolute;
    width:100%;
    height:100%;

    .imgCaption
    {
        position: absolute;
        width: 100%;
        bottom: 0px;
        left: 0px;
        color: #000;
        background: #d9d9d9;
        text-align: left;
        background-color:rgba(217,217,217,0.7);
        padding: 2px;
    }
}

/*FACEBOOK LIKES*/


#content-bottom .content-box.active-box-photos .content,
#content-bottom .content-box.active-box-prices .content
{
	padding:0;
}
#content-bottom .content-box.active-box-photos h3,
#content-bottom .content-box.active-box-prices h3, 
.popupContainer .content-box.active-box-prices h3 
{
	margin:0 0 0 15px;
}


.box-photos 
{
    position:relative;
	padding-top:15px;

	.btn-rood 
    {
		margin:0 0 15px 15px;
	}

    .big-photo-container 
    {
	    width:626px;
	    height:416px;
	    position:relative;
	    margin:0 auto;
	    overflow:hidden;
    }

    .big-photo
    {
	    width:100%;
	    height:100%;
	    text-align:center;
	    position:relative;		

        div.imgHolder 
        {
		    width:626px;
		    height:416px;
            position:relative;
        }

	    div img 
        {
		    width:626px;
		    height:416px;
            border:none !important;
            color:transparent;
	    }

	    img.horizontal { width:100%; }
	    img.vertical { height:100%; }
    }

	.small-photos-container
	{
		padding:45px 0px;
		position:relative;
		height:100px;
	}
}


#photo-small 
{
		
	width:100%;
	height:100px;
	overflow:hidden;
	padding:0 43px;
	position:relative;
    .box-sizing();
	
    img { color:transparent; }

    .slick-dots li button { color:#000; }
}

/* In rows mode zitten er extra divs tussen */
#photo-small .slick-slide > div > div > img,
#photo-small > div .slick-slide > img { height:80px;width:100%;border:2px solid #fff;cursor:pointer;color:transparent;position:relative;z-index:2;.box-sizing();border-radius:8px; }
#photo-small > div .slick-current img { border:2px solid #c00; }
            

        


ul.list-photos 
{
	position:absolute;
	width:555px;

	&:not(:first-child) 
    {
		display:none;
	}
}