/*
    Responsive CSS Layout
*/
/* 
    Created on : 17-Mar-2014, 11:57:30
    Author     : Paul Coady
*/

.responsive-block {
    display: inline-block !important;
    min-width: 268px;
    padding: 0px;
}
.responsive-block-sml {
    display: inline-block !important;
    min-width: 110px;
    padding: 0px;
}

/****************** Media Queries ********************/	
/* Desktops, laptops and large tablets 1224px in landscape*/
@media only screen 
and (min-width : 1224px)
and (orientation : landscape){
    .hidden-desktop-all, .hidden-desktop-l, 
    .hidden-l,
    .only-phone-all, .only-phone-p, .only-phone-l, 
    .only-tablet-all, .only-tablet-l, .only-tablet-p,
    .only-desktop-p
    {
        display:none;  
    }          
    .responsive-block-sml {
        min-width: 180px;
    }        
}

/* Desktops, laptops and large tablets 1224px in portrait*/
@media only screen 
and (min-width : 1224px)
and (orientation : portrait){
    .hidden-desktop-all, .hidden-desktop-p, 
    .hidden-p,
    .only-phone-all, .only-phone-p, .only-phone-l, 
    .only-tablet-all, .only-tablet-l, .only-tablet-p,
    .only-desktop-l
    {
        display:none;  
    }          
    .responsive-block-sml {
        min-width: 180px;
    }        
}

/* Tablets in landscape */	
@media 
only screen 
and (min-width : 600px) 
and (max-width : 1280px)
and (-webkit-min-device-pixel-ratio: 1)
and (-webkit-max-device-pixel-ratio :1.4)
and (orientation : landscape),
only screen 
and (min-width : 533px) 
and (max-width : 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (-webkit-max-device-pixel-ratio :1.9)
and (orientation : landscape),
only screen 
and (min-width : 540px) 
and (max-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2)
and (-webkit-max-device-pixel-ratio :2.9)
and (orientation : landscape),
only screen 
and (min-width : 540px) 
and (max-width : 1024px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation : portrait){   
    .hidden-tablet-all, .hidden-tablet-l, 
    .hidden-desktop-all, .hidden-desktop-l, .hidden-desktop-p, 
    .hidden-l,
    .only-phone-all, .only-phone-l, .only-phone-p, 
    .only-tablet-p, 
    .only-desktop-all, .only-desktop-l, .only-desktop-p
    {
        display:none; 
    }          
    .responsive-block-sml {
        min-width: 180px;
    }        
}

/* Tablets in portrait */		
@media
only screen 
and (min-width : 600px) 
and (max-width : 1280px)
and (-webkit-min-device-pixel-ratio: 1)
and (-webkit-max-device-pixel-ratio :1.4)
and (orientation : portrait),
only screen 
and (min-width : 533px) 
and (max-width : 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (-webkit-max-device-pixel-ratio :1.9)
and (orientation : portrait),
only screen 
and (min-width : 540px) 
and (max-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2)
and (-webkit-max-device-pixel-ratio :2.9)
and (orientation : portrait),
only screen 
and (min-width : 540px) 
and (max-width : 1024px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation : portrait){ 
    .hidden-tablet-all, .hidden-tablet-p, 
    .hidden-desktop-all, .hidden-desktop-p, .hidden-desktop-l, 
    .hidden-p,
    .only-phone-all, .only-phone-p, .only-phone-l, 
    .only-tablet-l, 
    .only-desktop-all, .only-desktop-p, .only-desktop-l
    {
        display:none;  
    }    
    .responsive-block-sml {
        min-width: 180px;
    }         
}


/* Mobile Phones in landscape */
@media 
only screen 
and (min-width : 320px) 
and (max-width : 640px)
and (orientation : landscape),
only screen 
and (min-width : 320px) 
and (max-width : 960px) 
and (-webkit-min-device-pixel-ratio: 1)
and (-webkit-max-device-pixel-ratio :1.4)
and (orientation : landscape),
only screen 
and (min-width : 320px) 
and (max-width : 852px) 
and (-webkit-min-device-pixel-ratio: 1.5)
and (-webkit-max-device-pixel-ratio :1.9)
and (orientation : landscape),
only screen 
and (min-width : 360px) 
and (max-width : 640px)
and (-webkit-min-device-pixel-ratio: 2)
and (-webkit-max-device-pixel-ratio :2.9)
and (orientation : landscape),
only screen 
and (min-width : 360px) 
and (max-width : 640px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation : landscape){ 
    .hidden-phone-all, .hidden-phone-l, 
    .hidden-tablet-all, .hidden-tablet-l, .hidden-tablet-p,
    .hidden-desktop-all, .hidden-desktop-l, .hidden-desktop-p,
    .hidden-l,
    .only-phone-p, 
    .only-tablet-all, .only-tablet-p, .only-tablet-l,
    .only-desktop-all, .only-desktop-p, .only-desktop-l
    {
        display:none !important;           
    } 
    .container, #footer, #three-columns, #content {
	width: 100%  !important;
    }    
    #box1, #box2, #box3, .twocolumn1 #sidebar{
        background: none !important;
        padding: 0px 0px 0px 0px !important;
    }  
    #header,#logo, #footer{
        height: 60px;
    } 
    #logo h1 a {
        padding-top: 10px;
    }
	.image-style2, image-style2a {
		float: none !important;
		padding-bottom: 18px;
	}
}

/* Mobile Phones in portrait */
@media 
only screen 
and (min-width : 320px) 
and (max-width : 599px)
and (orientation : portrait),
only screen 
and (min-width : 320px) 
and (max-width : 599px) 
and (-webkit-min-device-pixel-ratio: 1)
and (-webkit-max-device-pixel-ratio :1.4)
and (orientation : portrait),
only screen 
and (min-width : 320px) 
and (max-width : 532px) 
and (-webkit-min-device-pixel-ratio: 1.5)
and (-webkit-max-device-pixel-ratio :1.9)
and (orientation : portrait),
only screen 
and (min-width : 360) 
and (max-width : 640px)
and (-webkit-min-device-pixel-ratio: 2)
and (-webkit-max-device-pixel-ratio :2.9)
and (orientation : portrait),
only screen 
and (min-width : 360px) 
and (max-width : 640px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation : portrait){   
    .hidden-phone-all, .hidden-phone-p , 
    .hidden-tablet-all, .hidden-tablet-l, .hidden-tablet-p, 
    .hidden-desktop-all, .hidden-desktop-l, .hidden-desktop-p,
    .hidden-p,
    .only-phone-l, 
    .only-tablet-all, .only-tablet-p, .only-tablet-l,
    .only-desktop-all, .only-desktop-p, .only-desktop-l
    {
        display:none !important;         
    }  
    .container, #footer, #three-columns, #content{
	width: 100%  !important;
    }    
    #box1, #box2, #box3, .twocolumn1 #sidebar{
        background: none !important;
        padding: 0px 0px 0px 0px !important;
    }  
    #header,#logo, #footer{
        height: 60px;
    } 
    #logo h1 a {
        padding-top: 10px;
    }
	.image-style2, image-style2a {
		float: none !important;
		padding-bottom: 18px;
	}
}