/* iPhone 5 Retina regardless of IOS version */
@media (device-width : 320px) 
{
	/*IPhone 5 only CSS here*/
	.logo img { width:120px;height:auto; }
	#fluid-autocomplete input.search { width: 265px !important;	}
	body .autocomplete-list { width:301px !important; }
	body #autocompletePhone .header { width:100%; }
}

@media (max-width: 344px) 
{
    .logo img { width:120px !important;height:auto !important; }
}

/* Landscape phones and down */
@media (max-width: 479px) 
{ 
	.visible-phone { display:block; }
	.visible-tablet { display:none; }
	.visible-desktop { 	display: none; }
	.hidden-phone { display:none; }
	.hidden-tablet { display:block; }
	.hidden-desktop { display: block; }

	.container { width:310px;  }
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) 
{
    @import "./components/media/media_max767.less";
} 
@media only screen and (max-device-width: 767px)
{
   @import "./components/media/media_maxDevice767.less";
}
@media only screen and (max-device-width: 767px) and (orientation: landscape) 
{
    .popupContainer .content a.close {right: 20px;top: 20px; }
    .popUpBox .content-box .content .popupContent { max-height:250px; }
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) and (orientation: portrait) 
{
    li.waterpark a.waterpark { top:0px; }
}
@media (min-width: 768px) and (max-width: 979px) 
{
    @import "./components/media/media_min768_max979.less";
}
@media (min-width: 768px) and (orientation: landscape)
{
    body.template .main-search-box { margin-bottom:80px; }
}
@media (min-width: 768px) 
{
    @import "./components/media/media_min768.less";
}

/* Desktop */
@media (min-width: 980px)
{
    @import "./components/media/media_min980.less";
}

/* Large desktop */
@media (min-width: 1200px) 
{ 
    @import "./components/media/media_min1200.less";
}

@media only screen and (min-device-width : 1024px) and (max-device-width : 1366px) and (-webkit-min-device-pixel-ratio: 2)
{
	.tablet .search-fluid-popup { margin-top:0px; }
    #photo .container .item { top:20px; }
}

@media(orientation: portrait){
	.tablet .search-fluid-popup { margin-top:-25px; margin-left:-310px; }

    body:not(.search) .tablet #travelparty-container.search-fluid-popup .triangle,
	.tablet .search-fluid-popup:not(#travelparty-container) .triangle { 
        top:-20px;
        left:51px;
        .transform( rotate(90deg) ); 
    }
	body:not(.search) .tablet #travelparty-container.search-fluid-popup .triangle-border,
    .tablet .search-fluid-popup:not(#travelparty-container) .triangle-border { 
        top:-22px;
        left:50px;
        .transform( rotate(90deg) );
	}
    

    body:not(.search) .tablet #travelparty-container.search-fluid-popup .triangle { top:-30px;left:51px; }
    body:not(.search) .tablet #travelparty-container.search-fluid-popup .triangle-border { top:-32px;left:50px; }
}

@media(max-width: 979px), 
	only screen and (min-device-width : 1024px) and (max-device-width : 1366px) and (-webkit-min-device-pixel-ratio: 2),	/* ipad pro */
	only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2),		/* ipad 1, 2, 3, 4, mini en air */
	only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1)		/* ipad mini 1 */
{
	@import "./components/media/media_ios.less";
}
@media(max-width: 979px) and (orientation: portrait), 
    only screen and (min-device-width : 1024px) and (max-device-width : 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), /* ipad pro */
    only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), /* ipad 1, 2, 3, 4, mini en air */
    only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait) /* ipad mini 1 */
{
    .results .photo .photo-link a { width:1px;height:1px; }
    .photo-carousel-results img { width:360px;height:240px; }
    ul.results > li > .photo > div, ul.results > li > .photo > div > div { width:100%;height:100%; }
}