/*----------------------------------------------------------------------------------------------------------- */
/* Min 1025px */
/*----------------------------------------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  /* Wrapper */
  /*======================================================== */
  .wrapper {
    width: 90%;
  }
}

/*----------------------------------------------------------------------------------------------------------- */
/* Max 1024px */
/*----------------------------------------------------------------------------------------------------------- */
@media (max-width: 1024px) {

  /* Touch device */
  /*======================================================== */
  .touch #menu-clone {
    margin: 0;
    width: 100%;
    position: absolute;
    top: 74px;
    left: -150%;
    z-index: 2000;
    -webkit-transition: left 0.3s ease-in-out 0s;
    -moz-transition: left 0.3s ease-in-out 0s;
    -o-transition: left 0.3s ease-in-out 0s;
    transition: left 0.3s ease-in-out 0s;
  }
  .touch #menu-clone > li {
    display: block;
    float: none;
    position: relative;
  }
  .touch #menu-clone > li:first-child a {
    border-top: 0 none;
  }
  .touch #menu-clone a {
    position: relative;
  }
  .touch #menu-clone.show {
    left: 0;
  }
  .touch .has-dropdown {
    margin: 0;
    padding: 0;
  }
  .touch .dropdown {
    height: auto;
    width: auto;
    position: relative;
    top: 0 !important;
    overflow: hidden;
    visibility: visible;
    opacity: 1;
    overflow: hidden;
    -webkit-transition: height 0.3s ease-in-out 0s;
    -moz-transition: height 0.3s ease-in-out 0s;
    -o-transition: height 0.3s ease-in-out 0s;
    transition: height 0.3s ease-in-out 0s;
  }
  .touch .dropdown a {
    padding-left: 40px;
    border: 0 none;
  }
  .touch .menu-arrow li {
    position: relative;
  }
  .touch .menu-arrow li:before {
    top: 13px;
    left: 15px;
    line-height: 14px;
    z-index: 5;
    color: white;
  }
  .touch .view-dropdown {
    display: block;
    height: 39px;
    width: 39px;
    position: absolute;
    top: 1px;
    right: 0;
    z-index: 10;
    line-height: 39px;
    text-align: center;
    color: white;
    cursor: pointer;
  }
}

/*----------------------------------------------------------------------------------------------------------- */
/* Max 768px */
/*----------------------------------------------------------------------------------------------------------- */
@media (max-width: 768px) {

  /* Wrapper */
  /*======================================================== */
  .wrapper {
    width: 100%;
  }

  /* Menu */
  /*======================================================== */
  /* Menu - Clone menu for mobile andtouch device */
  #menu-clone {
    margin: 0;
    display: none;
    width: 100%;
    position: absolute;
    top: 74px;
    left: -200%;
    z-index: 2000;
  }
  #menu-clone > li {
    display: block;
    float: none;
    position: relative;
  }
  #menu-clone > li:first-child a {
    border-top: 0 none;
  }
  #menu-clone a {
    position: relative;
  }
  #menu-clone.show {
    left: 0;
  }
  #menu-clone .list-icon {
    margin-right: 10px;
  }

  /* Menu - show icon menu */
  .menu-small {
    display: block;
  }

  /* Menu - Change dropdown */
  .dropdown {
    height: auto;
    width: auto;
    position: relative;
    top: 0 !important;
    overflow: hidden;
    visibility: visible;
    opacity: 1;
    overflow: hidden;
    -webkit-transition: height 0.3s ease-in-out 0s;
    -moz-transition: height 0.3s ease-in-out 0s;
    -o-transition: height 0.3s ease-in-out 0s;
    transition: height 0.3s ease-in-out 0s;
  }
  .dropdown a {
    border: 0 none;
  }

  /* Menu - menu arrow */
  .menu-arrow li {
    position: relative;
  }
  .menu-arrow li:before {
    top: 13px;
    left: 15px;
    line-height: 14px;
    z-index: 5;
    color: white;
  }

  /* Menu - view dropdown */
  .view-dropdown {
    display: block;
    height: 39px;
    width: 39px;
    position: absolute;
    top: 1px;
    right: 0;
    z-index: 10;
    line-height: 39px;
    text-align: center;
    color: white;
    cursor: pointer;
  }

  /* Header */
  /*======================================================== */
  .header-big {
    font-size: 28px;
    line-height: 32px;
  }

  /* Title with icon */
  /*======================================================== */
  .twi-icon {
    height: auto;
    width: 32px;
    font-size: 32px;
  }

  /* Padding-left 75px */
  /*======================================================== */
  .pl-75 {
    padding-left: 55px;
  }

  /* Textarea */
  /*======================================================== */
  textarea {
    height: 150px;
  }

  /* Pricing */
  /*======================================================== */
  .price {
    height: 32px;
  }
  .price span {
    font-size: 32px;
  }
  .price small {
    font-size: 18px;
  }
  .price small:first-of-type {
    font-size: 13px;
    vertical-align: 14px;
  }
}



/*----------------------------------------------------------------------------------------------------------- */
/* Max 520px */
/*----------------------------------------------------------------------------------------------------------- */
@media (max-width: 520px) {

  /* Wrapper */
  /*======================================================== */
  .wrapper {
    width: 100%;
  }
    

  /* Width */
  /*======================================================== */
  /* Items */
  .col-1,
  .col-1-2,
  .col-1-3,
  .col-2-3,
  .col-1-4,
  .col-3-4,
  .col-1-5,
  .col-2-5,
  .col-3-5,
  .col-4-5,
  .col-small,
  .col-big, .items-4 .item, .items-3 .item, .items-2 .item {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100%;
  }

  /* Header */
  /*======================================================== */
  .top-section .search {
    margin: 6px 0 0;
    width: 100%;
  }

  /* Menu */
  /* Social top header */
  /*======================================================== */
  .menu,
  .social-top-header {
    display: none;
  }

  /* Menu - logo */
  /*======================================================== */
  .logo {
    max-width: 60px !important;  margin-top:10px; margin-left:10px;
  }

  /* Quotation */
  /*======================================================== */
  .quotation {
    font-size: 18px;
    line-height: 1.2;
    width: 75%;
  }

  /* Quotation - content */
  .quotation-content {
    padding: 4em 0 2em;
  }

  /* Share */
  /*======================================================== */
  .share,
  .share-content {
    width: 100%;
  }

  /* Pricing */
  /*======================================================== */
  .price-grid .button {
    margin-left: -40%;
    width: 80%;
  }

  /* Space */
  /*======================================================== */
  .space {
    margin-top: 40px !important;
  }

  /* Dropcaps - navigation */
  /*======================================================== */
  .dropcaps-navi.horizontal .next {
    right: -20px;
  }
  .dropcaps-navi.horizontal .prev {
    left: -20px;
  }

  /* Title with icon - icon */
  /*======================================================== */
  .twi-icon {
    margin: 0;
    left: 0;
  }

  /* Padding-left 75px */
  /*======================================================== */
  .pl-75 {
    padding-left: 40px !important;
  }

  /* Categories */
  /*======================================================== */
  .categories {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 60px;
    left: -200%;
    z-index: 1000;
  }
  .categories li {
    width: 100%;
    background: white;
  }

  /* Categories - menu */
  .categories-menu {
    display: block;
  }

  /* Blog */
  /*======================================================== */
  /* Post - more info */
  .post-more-info li {
    margin: 10px 0 0;
    display: block;
    font-size: 14px;
  }
  .post-more-info li:first-child {
    margin-top: 0;
  }

  /* Blog - items of list of blog posts */
  .blog-list-item:first-child {
    padding-top: 22px !important;
  }
  .blog-list-item .pl-40 {
    padding-left: 0 !important;
  }

  /* Blog - date in list of blog posts */
  .blog-list-data {
    margin: 36px 0 0;
    display: block;
    height: 90px;
    width: 90px;
    font-size: 14px;
    font-weight: 300;
    line-height: 1;
    text-align: center;
    background: #37a8d2;
    color: white;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
  }
  .blog-list-data span {
    display: block;
    width: inherit;
  }
  .blog-list-data span:first-child {
    margin-top: 13px;
    font-size: 3.5em;
  }

  /* Comment */
  /*======================================================== */
  /* Comment - avatar */
  .avatar {
    display: block;
    width: 165px;
  }
  .avatar + .content-liquid {
    padding-top: 20px;
    width: 100%;
  }

  /* Comment - author */
  .comment-author-post {
    margin: 0;
    float: right;
  }
  .comment-author-post:after {
    top: 4px;
    left: -18px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #37a8d2;
  }

  /* Comment - list of replies */
  .replylist {
    margin-left: 0;
  }
}


/*----------------------------------------------------------------------------------------------------------- */
/* Max 480px */
/*----------------------------------------------------------------------------------------------------------- */
@media (max-width: 480px) {

  /* Wrapper */
  /*======================================================== */
  .wrapper {
    width: 100%;
  }

  /* Wrapper */
  /*======================================================== */
  .quotation {
    width: 70%;
  }

  /* Blog */
  /*======================================================== */
  .blog-list-data {
    top: 120px;
  }

  /* Wrapper */
  /*======================================================== */
  .list-inline li {
    margin-left: 0;
    display: block;
  }
  
  .logo {
    max-width: 60px !important;  margin-top:10px; margin-left:10px;
  }
}

/*----------------------------------------------------------------------------------------------------------- */
/* Max 320px */
/*----------------------------------------------------------------------------------------------------------- */
@media (max-width: 320px) {

  /* Wrapper */
  /*======================================================== */
  .wrapper {
    width: 100%;
  }

  /* Wrapper */
  /*======================================================== */
  .quotation {
    width: 70%;
  }

  /* Blog */
  /*======================================================== */
  .blog-list-data {
    top: 120px;
  }

  /* Wrapper */
  /*======================================================== */
  .list-inline li {
    margin-left: 0;
    display: block;
  }
  
  .logo {
    max-width: 60px !important;  margin-top:10px; margin-left:10px;
  }
  
}


/*----------------------------------------------------------------------------------------------------------- */
/* Max 220px */
/*----------------------------------------------------------------------------------------------------------- */
@media (max-width: 220px) {

  /* Wrapper */
  /*======================================================== */
  .wrapper {
    width: 100%;
  }

  /* Wrapper */
  /*======================================================== */
  .quotation {
    width: 70%;
  }

  /* Blog */
  /*======================================================== */
  .blog-list-data {
    top: 120px;
  }

  /* Wrapper */
  /*======================================================== */
  .list-inline li {
    margin-left: 0;
    display: block;
  }
  
  .logo {
    max-width: 60px !important;  margin-top:10px; margin-left:10px;
  }
  
}