@charset "UTF-8";

/*
Document: responsive.css
Website: www.insomniaguitars.com
Author: Alessandra Sanson (alessandrasanson[at]live[dot]it)
*/





/* ====================================================================================================================
 * GENERAL                                                                                      
 * ====================================================================================================================*/
 
 @media (min-width: 800px) and (max-width: 999px) {

    [class*="grid-"] {padding: 0 10px;}
    
 }
 
 @media (max-width: 899px) {
 
    #home, #convenzioni {background-attachment:scroll;}
    
 }
 
  @media (max-width: 399px) {
 
    p, h3, td, th, li {font-size:14px}
    #footer li, #footer td, #footer th, #footer h3 {font-size:11px;}
    
 }
 
/* ====================================================================================================================
 * HEADER                                                                                   
 * ====================================================================================================================*/
    @media (min-width: 1030px) {

    #header.smaller {top: 0;padding:15px 0;}
    #mainnav ul {position:absolute;  right:0;}
    
}

  @media (min-width: 1030px) and (max-width: 1119px) {

    #name h1 {font-size: 20px;}
    #name h2 {font-size: 8px;letter-spacing:2.9px}
    #mainnav > ul > li > a {font-size: 13px;padding:14px 0px}
    
}


@media (max-width:1029px) {

#header.smaller {top: 0;}
    #header {padding-bottom:0;}
    #logo-container {width:100%}
    #logo {margin-right:5px}

  .grid_container#mainnav {
    width:100%;
    max-width:100%;
  }
  
  #logo-container {
    max-width:95%;
    margin-left:auto;
    margin-right:auto; 
    display:block;
    float:none;
  }
  
  #mainnav #head-mobile {
    display: block;
    padding:15px;
  }
  #mainnav ul {
    width: 100%;
    float:none;
    padding:0;
    display: none
  }
  #mainnav ul li {
    display:block;
    border-top: 1px solid #444
  }
  #mainnav ul ul li,
  #mainnav li:hover > ul > li {
    height: auto
  }
  #mainnav ul li a,
  #mainnav ul ul li a {
    width: 95%;
    margin-left:auto;
    margin-right:auto;
    padding: 10px 15px;
    border: 0
  }
  #mainnav > ul > li {
    float: none
  }
  #mainnav ul ul li a {
    padding-left: 25px
  }
  #mainnav > ul > li+li {
    margin-left:0;
  }
  #mainnav ul ul li {
    background: #333!important;
  }
  #mainnav ul ul li:hover {
    background: #363636!important
  }
  #mainnav ul ul ul li a {
    padding-left: 35px
  }
  #mainnav ul ul li a {
    color: #f0edde;
    background: none
  }
  #mainnav ul ul li:hover > a,
  #mainnav ul ul li.active > a {
    color: #f0edde
  }
  #mainnav ul ul,
  #mainnav ul ul ul {
    position: relative;
    left: 0;
    width: 100%;
    margin: 0;
    text-align: left
  }
  #mainnav > ul > li.has-sub > a:after,
  #mainnav > ul > li.has-sub > a:before,
  #mainnav ul ul > li.has-sub > a:after,
  #mainnav ul ul > li.has-sub > a:before {
    display: none
  }
  
  #mainnav .button {
    width: 55px;
    height: 46px;
    position: absolute;
    right: 2.5%;
    right: calc(2.5% + 15px);
    top: 0;
    cursor: pointer;
    z-index: 12399994;
  }
  #mainnav .button:after {
    position: absolute;
    top: 22px;
    right: 0;
    display: block;
    height: 4px;
    width: 20px;
    border-top: 2px solid #f0edde;
    border-bottom: 2px solid #f0edde;
    content: ''
  }
  #mainnav .button:before {
    -webkit-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
    position: absolute;
    top: 16px;
    right: 0;
    display: block;
    height: 2px;
    width: 20px;
    background: #f0edde;
    content: ''
  }
  #mainnav .button.menu-opened:after {
    -webkit-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
    top: 23px;
    border: 0;
    height: 2px;
    width: 19px;
    background: #f0edde;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg)
  }
  #mainnav .button.menu-opened:before {
    top: 23px;
    background: #f0edde;
    width: 19px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg)
  }
  #mainnav .submenu-button {
    position: absolute;
    z-index: 99;
    right: 0;
    top: 0;
    display: block;
    border-left: 1px solid #f0edde;
    height: 46px;
    width: 46px;
    cursor: pointer
  }
  #mainnav .submenu-button.submenu-opened {
    background: #f0edde
  }
  #mainnav ul ul .submenu-button {
    height: 34px;
    width: 34px
  }
  #mainnav .submenu-button:after {
    position: absolute;
    top: 22px;
    right: 19px;
    width: 8px;
    height: 2px;
    display: block;
    background: #f0edde;
    content: ''
  }
  #mainnav ul ul .submenu-button:after {
    top: 15px;
    right: 13px
  }
  #mainnav .submenu-button.submenu-opened:after {
    background: #f0edde
  }
  #mainnav .submenu-button:before {
    position: absolute;
    top: 19px;
    right: 22px;
    display: block;
    width: 2px;
    height: 8px;
    background: #f0edde;
    content: ''
  }
  #mainnav ul ul .submenu-button:before {
    top: 12px;
    right: 16px
  }
  #mainnav .submenu-button.submenu-opened:before {
    display: none
  }
  #mainnav ul ul ul li.active a {
    border-left: none
  }
  #mainnav > ul > li.has-sub > ul > li.active > a,
  #mainnav > ul ul > li.has-sub > ul > li.active > a {
    border-top: none
  }
}



 @media (max-width: 699px) {
 
    #top-bar {display:none;}
    #header {top:0;padding-bottom:0;padding-top:20px}
    #mainnav #head-mobile {padding:10px}
    #logo {height:45px}
    #name h1 {font-size: 18px;}
    #name h2 {font-size: 6px;letter-spacing: 3.25px;}


}

 @media (max-width: 458px) {
 
    #header {padding-bottom:0;position:absolute}
    #logo {margin-bottom:15px}
    #name {margin-right:0}
    #name h1 {margin-bottom:5px;}


}
 @media (min-width:400px) and (max-width: 699px) {
 
    #name {padding-right:40px}


}
 
/* ====================================================================================================================
 * HOME                                                                                   
 * ====================================================================================================================*/
 
  
 
 
 /* ====================================================================================================================
 * ABOUT                                                                                   
 * ====================================================================================================================*/
 
  @media (max-width: 1000px) {

    #about [class*="grid-"] {width:100%; float:none;}
    #about [class*="grid-"].block:not(:last-child) {margin-bottom:60px}
    
    
 }
 /* ====================================================================================================================
 * PRODUCTS                                                                                 
 * ====================================================================================================================*/
  @media (max-width: 1000px) {/*---- product-container width 100% ----*/

    .products-row [class*="grid-"] {width:100%; float:none;margin-bottom: 0px; overflow:hidden; }
    .collection-container .productscontainer [class*="col-"] {width:100%;}  
    .productscontainer .col-5:last-child {margin-top:0;}    
    .product-container {padding:10px; margin-bottom:50px;}
    .product-container .image-placeholder {width:49%; height: auto; margin-right:15px;}
    .product-container:hover {
         -moz-transform: scale3d(1,1,1);
         -webkit-transform: scale3d(1,1,1);
         -o-transform: scale3d(1,1,1);
         -ms-transform: scale3d(1,1,1);
         transform: scale3d(1,1,1);
         }
 }



 
/* ====================================================================================================================
 * CONTATTI                                                                                   
 * ====================================================================================================================*/
 
  @media (max-width: 1000px) {

    #contacts [class*="grid-"] {width:100%; float:none; margin-top:70px;}
 }
 
 
  /* ====================================================================================================================
 * FOOTER                                                                                   
 * ====================================================================================================================*/
 
  @media (max-width: 899px) {

    #footer [class*="grid-"] {width:100%; float:none; margin-top:40px;}
    #footer [class*="grid-"]:first-child {margin-top:0}
    #footer-bottom li {display:block; margin-bottom:10px}
    #footer-bottom .sociallink {display:inline-block; }
    #footer-bottom li+li:before {margin-right:0}
 }
 
   @media (max-width: 649px) {
   
    #footer-bottom li {display: block;float:none; }
    #footerline1:after {margin:0; border-width: 0}
    #footer .socialmedia {position:absolute;top:0; right:0}
 }
 
    @media (max-width: 389px) {

    #footer .socialmedia {position:static;float:none}
 }
 



  /* ====================================================================================================================
 * PRODUCTS                                                                                 
 * ====================================================================================================================*/
  @media (max-width: 1000px) {/*---- product-container width 100% ----*/

    .product-page [class*="grid-"] {width:100%; float:none;margin-bottom: 0px; overflow:hidden; }
}