/* 
    Document   : mediaQueries
    Created on : 18-Dec-2012, 15:57:14
    Author     : Vladimir Spasic vladimir.spasic.86@gmail @VladaSpasic
    Description:
        Style For Different Devices.
*/

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-width : 320px) 
and (max-width : 480px) {
    body {
        font-size: 6px;
    }

    .detailed-item .text-wrapper {
        font-size: 1em !important;
    }
    
    #navigation .dots {
        width: 6px;
        height: 6px;
        padding: 0;
        margin: 0 3px; 
    }

    #fullscreen-wrapper #navigation .dots {
        width: 4px;
        height: 4px;
        padding: 0;
        margin: 0 2px; 
    }
    
    #navigation .next,  #navigation .prev{
        width: 5px;
        height: 10px;
        padding: 0;
        margin: 0 3px;
    }
    
    #fullscreen-wrapper #navigation .next, #fullscreen-wrapper  #navigation .prev{
        width: 6px;
        height: 12px;
        padding: 0;
        margin: 0 5px;
    }

    /* Play Button */

    .box_item .vjs-big-play-button, .play-icon {
        width: 20px;
        height: 20px;
        margin-top: -10px;
        margin-left: -10px; 
    }

    #fullscreen-wrapper .vjs-big-play-button {
        width: 30px;
        height: 30px;
        margin-top: -15px;
        margin-left: -15px; 
    }
}
 
/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
     body {
        font-size: 9px;
    }    

    .detailed-item .text-wrapper {
        font-size: 1em !important;
    }
}
 
/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
    .box_item .vjs-big-play-button {
        width: 20px;
        height: 20px;
        margin-top: -10px;
        margin-left: -10px; 
    }

    .detailed-item .text-wrapper {
        font-size: 1em !important;
    }

    #fullscreen-wrapper .vjs-big-play-button {
        width: 30px;
        height: 30px;
        margin-top: -15px;
        margin-left: -15px; 
    }

}

@media only screen 
and (min-width : 481px)
and (max-width : 1024px) {
    body {
        font-size: 10px;
    }

    #navigation .dots {
        width: 8px;
        height: 8px;
        padding: 0;
        margin: 0 3px; 
    }

    #fullscreen-wrapper #navigation .dots {
        width: 10px;
        height: 10px;
        padding: 0;
        margin: 0 4px;
    }
    
    #navigation .next,  #navigation .prev{
        width: 5px;
        height: 10px;
        padding: 0;
        margin: 0 2px;
    }
    
    #fullscreen-wrapper #navigation .next, #fullscreen-wrapper  #navigation .prev{
        width: 6px;
        height: 12px;
        padding: 0;
        margin: 0 4px;
    }

    /* Play Button */

    .box_item .vjs-big-play-button, .play-icon {
        width: 60px;
        height: 60px;
        margin-top: -30px;
        margin-left: -30px; 
    }

    #fullscreen-wrapper .vjs-big-play-button {
        width: 80px;
        height: 80px;
        margin-top: -40px;
        margin-left: -40px; 
    }
	 
	.detailed-item .text-wrapper {
    font-size: 1.5em !important;
    }

}

@media only screen 
and (min-width : 481px)
and (max-width : 1024px) 
and (min-height : 530px) {
	
.detailed-item .text-wrapper {
    font-size: 1.4em !important;
    }

}

@media only screen 
and (min-width : 1025px) {
    body {
        font-size: 12px;
    }

    #navigation .dots {
        width: 8px;
        height: 8px;
        padding: 0;
        margin: 0 3px; 
    }

    #fullscreen-wrapper #navigation .dots {
        width: 10px;
        height: 10px;
        padding: 0;
        margin: 0 4px;
    }
    
    #navigation .next,  #navigation .prev{
        width: 5px;
        height: 10px;
        padding: 0;
        margin: 0 2px;
    }
    
    #fullscreen-wrapper #navigation .next, #fullscreen-wrapper  #navigation .prev{
        width: 6px;
        height: 12px;
        padding: 0;
        margin: 0 4px;
    }

    /* Play Button */

    .box_item .vjs-big-play-button, .play-icon {
        width: 60px;
        height: 60px;
        margin-top: -30px;
        margin-left: -30px; 
    }

    #fullscreen-wrapper .vjs-big-play-button {
        width: 80px;
        height: 80px;
        margin-top: -40px;
        margin-left: -40px; 
    }
	.detailed-item .text-wrapper {
    font-size: 1.2em !important;
    }

}

@media only screen 
and (max-height : 600px) { 
    .detailed-item .text-wrapper {
        font-size: 1.1em;
    }
}
 
/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
    body {
        font-size: 12px;
    }

    .detailed-item .text-wrapper {
        font-size: 1.9em !important;
    }
    
    #navigation .dots {
        width: 6px;
        height: 6px;
        padding: 0;
        margin: 0 4px; 
    }

    #fullscreen-wrapper #navigation .dots {
        width: 8px;
        height: 8px;
        padding: 0;
        margin: 0 5px; 
    }
    
    #navigation .dots {
        width: 8px;
        height: 8px;
        padding: 0;
        margin: 0 5px; 
    }

    #fullscreen-wrapper #navigation .dots {
        width: 10px;
        height: 10px;
        padding: 0;
        margin: 0 6px; 
    }
    
    #navigation .next,  #navigation .prev{
        width: 6px;
        height: 12px;
        padding: 0;
        margin: 0 4px;
    }
    
    #fullscreen-wrapper #navigation .next, #fullscreen-wrapper  #navigation .prev{
        width: 8px;
        height: 16px;
        padding: 0;
        margin: 0 6px;
    }

    /* Play Button */

    .box_item .vjs-big-play-button, .play-icon {
        width: 80px;
        height: 80px;
        margin-top: -40px;
        margin-left: -40px; 
    }

    #fullscreen-wrapper .vjs-big-play-button {
        width: 100px;
        height: 100px;
        margin-top: -50px;
        margin-left: -50px; 
    }
}

@media only screen 
and (min-width : 1224px)
and (max-height : 400px) {
    body {
        font-size: 8px;
    }

    .detailed-item .text-wrapper {
        font-size: 1.2em !important
    }
}

@media only screen 
and (min-width : 1224px)
and (min-height : 401px)
and (max-height : 550px) {
    body {
        font-size: 10px;
    }

    .detailed-item .text-wrapper {
        font-size: 1.2em !important;
    }

     #navigation .dots {
        width: 4px;
        height: 4px;
        padding: 0;
        margin: 0 2px; 
    }

    #navigation .next,  #navigation .prev{
        width: 5px;
        height: 10px;
        padding: 0;
        margin: 0 3px;
    }
}

@media only screen 
and (min-width : 1224px)
and (min-height : 551px)
and (max-height : 650px) {

    .detailed-item .text-wrapper {
        font-size: 1.3em !important;
    }
}

@media only screen 
and (min-width : 1224px)
and (min-height : 651px)
and (max-height : 800px) {
    body {
        font-size: 12px;
    }

    .detailed-item .text-wrapper {
        font-size: 1.6em !important;
    }

     #navigation .dots {
        width: 7px;
        height: 7px;
        padding: 0;
        margin: 0 3px; 
    }

    #navigation .next,  #navigation .prev{
        width: 7px;
        height: 14px;
        padding: 0;
        margin: 0 4px;
    }
}
 
/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
    body {
        font-size: 14px;
    }

    .detailed-item .text-wrapper {
        font-size: 1.9em !important;
    }
    
    #navigation .dots {
        width: 10px;
        height: 10px;
        padding: 0;
        margin: 0 5px; 
    }

    #fullscreen-wrapper #navigation .dots {
        width: 12px;
        height: 12px;
        padding: 0;
        margin: 0 6px; 
    }
    
    #navigation .next,  #navigation .prev{
        width: 7px;
        height: 14px;
        padding: 0;
        margin: 0 10px;
    }
    
    #fullscreen-wrapper #navigation .next, #fullscreen-wrapper  #navigation .prev{
        width: 9px;
        height: 18px;
        padding: 0;
    }

    /* Play Button */

    .box_item .vjs-big-play-button, .play-icon {
        width: 80px;
        height: 80px;
        margin-top: -40px;
        margin-left: -40px; 
    }

    #fullscreen-wrapper .vjs-big-play-button {
        width: 100px;
        height: 100px;
        margin-top: -50px;
        margin-left: -50px; 
    }
}

@media only screen 
and (min-width : 1824px)
and (max-height : 930px) {
    body {
        font-size: 12px;
    }

    .detailed-item .text-wrapper {
        font-size: 1.5em !important;
    }
}

@media only screen 
and (min-width : 1824px)
and (max-height : 800px) {
    body {
        font-size: 12px;
    }

    .detailed-item .text-wrapper {
        font-size: 1.5em !important;
    }
}

@media only screen 
and (min-width : 1824px)
and (max-height : 640px) {
    body {
        font-size: 11px;
    }

    .detailed-item .text-wrapper {
        font-size: 1.3em !important;
    }
}

@media only screen 
and (min-width : 1824px)
and (max-height : 560px) {
    body {
        font-size: 9px;
    }

    .detailed-item .text-wrapper {
        font-size: 1.4em !important;
    }
}

@media only screen 
and (min-width : 1824px)
and (max-height : 400px) {

    .detailed-item .text-wrapper {
        font-size: 1.1em !important;
    }
}
 
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
	

    .detailed-item .text-wrapper {
    font-size: 0.5em !important;
	line-height: 1.0em !important;
    }
    
	.box_item h2.title{
	font-family: 'BentonSansBook';
	color: #808080;
	letter-spacing: 0px;
    font-size: 0.5em;
	}
	
	.box_item.detail .bottom-links, #fullscreen-wrapper .bottom-links {
	font-family: 'BentonSansBook';
	letter-spacing: 0px;
    font-size: 0.5em;
	}
	
    #navigation .dots {
        width: 5px;
        height: 5px;
        padding: 0;
        margin: 0 5px; 
    }

    #fullscreen-wrapper #navigation .dots {
        width: 5px;
        height: 5px;
        padding: 0;
        margin: 0 6px; 
    }
    
    #navigation .next,  #navigation .prev{
        width: 7px;
        height: 14px;
        padding: 0;
        margin: 0 10px;
    }
    
    #fullscreen-wrapper #navigation .next, #fullscreen-wrapper  #navigation .prev{
        width: 9px;
        height: 18px;
        padding: 0;
    }

    /* Play Button */

    .box_item .vjs-big-play-button, .play-icon {
        width: 40px;
        height: 40px;
        margin-top: -20px;
        margin-left: -20px; 
    }

    #fullscreen-wrapper .vjs-big-play-button {
        width: 80px;
        height: 80px;
        margin-top: -40px;
        margin-left: -40px; 
    }
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
    body {
        font-size: 12px !important;
    }   
    
    #navigation .dots {
        width: 10px;
        height: 10px;
        padding: 0;
        margin: 0 5px; 
    }

    #fullscreen-wrapper #navigation .dots {
        width: 12px;
        height: 12px;
        padding: 0;
        margin: 0 6px;
    }
    
    #navigation .next,  #navigation .prev{
        width: 6px;
        height: 12px;
        padding: 0;
        margin: 0 3px;
    }
    
    #fullscreen-wrapper #navigation .next, #fullscreen-wrapper  #navigation .prev{
        width: 8px;
        height: 16px;
        padding: 0;
        margin: 0 5px;
    }

    /* Play Button */

    .box_item .vjs-big-play-button, .play-icon {
        width: 60px;
        height: 60px;
        margin-top: -30px;
        margin-left: -30px; 
    }

    #fullscreen-wrapper .vjs-big-play-button {
        width: 80px;
        height: 80px;
        margin-top: -40px;
        margin-left: -40px; 
    }
	
	#categories a {
	font-family: 'BentonSansLight';
	}
}
 
/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
    .detailed-item .text-wrapper {
        font-size: 1.4em !important;
    }
}
 
/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
    .detailed-item .text-wrapper {
        font-size: 1.1em !important;
    }    
	.box_item h2.title{
    font-size: 1.0em;
	letter-spacing: 0px;
	color: #404040;
	}
	.box_item.detail .bottom-links, #fullscreen-wrapper .bottom-links {
    font-size: 1.0em;	
	letter-spacing: 0px;
	color: #404040;
	}
	.menu-item-wrapper {
	padding: 3% 13% 3% 7%;
    }
	.city h2 {
    font-family: 'BentonFont';
    font-size: 3.5em;
}
/*  simplified contact line 
	.city .cell.details {
    font-size: 1.3em;
    }  */
    .city .cell.details {
    font-size: 3.5em;
    }


}

/* Retina --------------------- */
@media 
only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min-resolution: 192dpi) { 

	.search input[type="text"] {
    font-size: 0.8em;
	}

	.about p {
    font-size: 1.6em;
		 color: #707070;
	}

	.city h2 {
    font-family: 'BentonFont';
    font-size: 2.1em;
	}
/*  simplified contact line 
	.city .cell.details {
    font-size: 0.8em;
	}  */
    .city .cell.details {
    font-size: 2.1em;
    }

	#categories ul li{
    font-size: 0.9em;
	}

	.box_item h2.title{
	font-family: 'BentonFont';
    font-size: 0.6em;
	color: #606060;
	letter-spacing: 1px;
	}
	
	.box_item.detail .bottom-links, #fullscreen-wrapper .bottom-links {
	font-family: 'BentonFont';
    font-size: 0.6em;
	color: #606060;
	letter-spacing: 1px;
	}
	
	.detailed-item .text-wrapper {
    font-size: 0.9em !important;
    }
	
    body {
        font-size: 20px;
    }
    
    #navigation .dots {
        width: 7px;
        height: 7px;
        padding: 0;
        margin: 0 5px; 
    }

    #fullscreen-wrapper #navigation .dots {
        width: 8px;
        height: 8px;
        padding: 0;
        margin: 0 6px; 
    }
    
    #navigation .next,  #navigation .prev{
        width: 6px;
        height: 12px;
        padding: 0;
        margin: 0 15px;
    }
    
    #fullscreen-wrapper #navigation .next, #fullscreen-wrapper  #navigation .prev{
        width: 10px;
        height: 20px;
        padding: 0;
    }

    /* Play Button */

    .box_item .vjs-big-play-button, .play-icon {
        width: 70px;
        height: 70px;
        margin-top: -35px;
        margin-left: -35px; 
    }

    #fullscreen-wrapper .vjs-big-play-button {
        width: 84px;
        height: 84px;
        margin-top: -12px;
        margin-left: -42px; 
    } 
}

/*Retina iPad in landscape */

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2)
{
	
	.search input[type="text"] {
    font-size: 1.5em;
	}
	
	.about p {
     font-family: 'BentonSansLight';
	 font-size: 2.0em;
	 color: #707070;
	}

	.box_item h2.title{
	font-family: 'BentonSansLight';
    font-size: 1.2em;
	color: #808080;
	}
	
	.box_item.detail .bottom-links, #fullscreen-wrapper .bottom-links {
	font-family: 'BentonSansLight';
    font-size: 1.2em;
	color: #808080;
	}
	
	.detailed-item .text-wrapper {
    font-size: 1.4em !important;
	
    }
	#categories ul li{
    font-size: 1.8em;
	}

	.city h2 {
    font-family: 'BentonFont';
    font-size: 3.5em;
	}

/*  simplified contact line 
	.city .cell.details {
    font-size: 1.4em;
	}  */
    .city .cell.details {
    font-size: 3.5em;
    }
	  #navigation .dots {
        width: 9px;
        height: 9px;
        padding: 0;
        margin: 0 6px; 
    }

    #fullscreen-wrapper #navigation .dots {
        width: 10px;
        height: 10px;
        padding: 0;
        margin: 0 7px; 
    }
}

/*Retina iPad in portrait */

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2)
{
	
	.search input[type="text"] {
    font-size: 1.5em;
	}
	
	.about p {
     font-family: 'BentonSansLight';
	 font-size: 2.0em;
	 color: #707070;
	}
	
	.box_item h2.title{
 	font-family: 'BentonSansLight';
    font-size: 1.0em;
	color: #606060;
		letter-spacing: 0px;
	}
	
	.box_item.detail .bottom-links, #fullscreen-wrapper .bottom-links {
	font-family: 'BentonSansLight';
    font-size: 1.0em;
	color: #606060;
		letter-spacing: 0px;
	}
	
	.detailed-item .text-wrapper {
    font-size: 1.2em !important;
    }
	
    #navigation .dots {
        width: 8px;
        height: 8px;
        padding: 0;
        margin: 0 5px; 
    }
	
	    #fullscreen-wrapper #navigation .dots {
        width: 10px;
        height: 10px;
        padding: 0;
        margin: 0 7px; 
    }
	
	#categories ul li{
    font-size: 1.5em;
	}
	.city h2 {
    font-family: 'BentonFont';
    font-size: 3.2em;
	}

/*  simplified contact line 
.city .cell.details {
    font-size: 1.2em;
}   */
.city .cell.details {
    font-size: 3.2em;
}

    #fullscreen-wrapper .vjs-big-play-button {
        width: 84px;
        height: 84px;
        margin-top: -42px;
        margin-left: -42px; 
    } 
}