/******************************************  
* Media Queries (Responsive Design)
*******************************************/

/*
WARNING! DO NOT EDIT THIS FILE!

To make it easy to update your theme, you should not edit the styles in this file. Instead use
the custom.css file to add your styles. You can copy a style from this file and paste it in
custom.css and it will override the style in this file.

*/
 


/* Large Screens */
@media screen and (max-width: 1080px) {      

    #page-wrap { width: 96%; background: #fff;}

    #selectnav1, #selectnav2 { display: inline-block; font-size: 16px; padding: 5px; vertical-align: top; float: left; }
    #mainmenu, #topmenu { display: none; }
    #topbar { padding: 5px 15px; }
    #menu { padding-left:15px; }
    #selectnav2 {  margin-bottom: 10px; }

    #slider { height: auto; }

    #slider #slides { width: 73%; }
    #slider_nav  {width: 27%; }
    #slider_nav h3 { display: none; }
 
    #slider #slides  h2 a { font-size: 20px; }
    #slides .postcontent {  width:96%; height:auto; padding: 2%; background: url(images/gradient.png) repeat-x 0 -95px; }
    #slides .postcontent p { display: none; }
 
    #slider #slides img { max-width: 100%; height: auto; }

    .video_cover { position: relative; padding-bottom: 56.25%; display: block;  height: 0; overflow: hidden; width: 100%; max-width: 100%; }
    .video_cover iframe,
    .video_cover object,
    .video_cover embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

    #carousel-items { width: 100%; }
    #carousel-items img { max-width: 100%; height: auto; }
    
    #content { width: 64%; margin:0 0 0 2%; }
    #sidebar { width: 30%; margin-right:2%; }

    .featured_art .thumb {width: 45%; }

    .featured_art img { max-width: 100%; height: auto; }

    .featured_cat .thumb img { max-width: 100%; height: auto; }
    .featured_cat .article { float:none; width: auto; overflow: hidden; border:none; }
    .featured_cat ul { width: 100%; float:left; overflow: hidden; margin: 0; }
     
    #comments .commentlist li #respond input { width: 94%; }
    #comments .commentlist li #respond textarea { width: 94%; }
    #comments .commentlist li #respond p.form-submit input { width: auto; }
    
    .fb_iframe_widget { width: 100%!important }
    .fb_iframe_widget span { width: 100%!important; }
    .fb_iframe_widget span iframe { width: 100%!important; }
    .widget img,
    .adv_side img { max-width: 100%; height: auto; }

    #footer div.column { width: 23%; margin-right: 2%; float: none; vertical-align: top; display: inline-block; }

}


/* Tablets */
@media screen and (max-width: 768px) {

    #content { width: 96%;  }
    #sidebar { width: 96%; }
    .adv { display: none; }

    #slider #slides { width: 100%; }
    #slider_nav  { display: none; }
  
    #logo img { max-width: 100%; height: auto; }
    #footer div.column { width: 48%; margin-right: 1%; float: none; vertical-align: top; display: inline-block; }
    
}

/* All Mobile Sizes (devices and browser) */
@media screen and (max-width: 640px) {

    #topbar { padding: 5px 0 5px 10px; }
    #menu { padding-left:10px; }

    .featured_art .thumb { width:auto; margin: 0 0 15px;}
    .featured_art .post-content { width:100%; float:left;  overflow: visible;}

    .featured_cat .article { width: 100%; padding: 0; }
 
    #header #searchform { display: none; }
 
    #recent-posts .thumb {  margin:0 0 20px; }

    #recent-posts .post-content { width:100%; float:left; overflow: visible; }
 
    #logo { float:left; display: block; width:90%; }

    #respond .form_fields { width:97%; margin:0; }
    #respond input, #respond textarea { width: 97%; }
    #respond .comment-form-comment {width:99%; }
    #respond .form_fields input { width:94%; }
    .children #respond { margin-right:0; }

    #footer div.column { width: 100%; margin-right:0; float:none; vertical-align: top; display: inline-block;}

    #slider #slidemain .cover, #slider #slidemain .video_cover { margin: 0; text-align: center; }

    #copyright span { float:left; width: 100%; text-align: left; }
    
}