/* Copyright (C) YOOtheme GmbH, YOOtheme Proprietary Use License (http://www.yootheme.com/license) */

@import url(../warp/css/responsive.css);


/* Breakpoints
----------------------------------------------------------------------------------------------------*/

/* All except large Screens */
@media (max-width: 1220px) {

}

/* Only Phones and Tablets (Portrait) */
@media (max-width: 959px) {

  /* Layout */
  #search { display: none; }

  .sidebars-1 #maininner,
  .sidebars-2 #maininner { padding: 0; }

  /* Modules */
  .grid-h .mod-line:before { border-left: 0; }
 
  #sidebar-a .grid-v:first-child .mod-line:before,
  #sidebar-b .grid-v:first-child .mod-line:before { border-width: 1px 0 0 0; }

  .grid-h .mod-line,
  .grid-v:first-child .mod-line { padding: 20px 0; }

  .grid-h .mod-line .badge,
  .grid-v:first-child .mod-line .badge { top: 20px; }

  /* Systems */
  #system { padding-bottom: 20px; }

}

/* Only Tablets (Portrait) */
@media (min-width: 768px) and (max-width: 959px) { 

  /* Extensions */
  .spotlight[data-spotlight*="fade"] .overlay > div {
    padding: 15px;
    font-size: 13px;
    line-height: 15px;
  }

  .spotlight[data-spotlight*="fade"] .overlay > div p { margin-top: 5px; }

  /* Modules */
  .grid-h:nth-child(n+3).width33 > .mod-line:before { border-width: 0; }

}

/* Only Tablets (Portrait) and Phones (Landscape) */
@media (min-width: 480px) and (max-width: 959px) {

  /* Modules */
  .grid-h:nth-child(n+3) > .mod-line:before {   
    top: -10px;
    bottom: auto;
    left: 0;
    right: 0;
    border-width: 1px 0 0 0;
  }

}

/* Only Phones */
@media (max-width: 767px) {

  /* Layout */
  #toolbar,
  #headerbar,
  #logo,
  #menubar,
  #menu,
  #search,
  #breadcrumbs { display: none; }

  .display-block[data-spotlight] { display: inline-block; }

}

/* Only Phones (Landscape) */
@media (min-width: 480px) and (max-width: 767px) {
  
  /* Extensions */
  .spotlight[data-spotlight*="fade"] .overlay > div {
    padding: 15px;
    line-height: 14px;
    font-size: 12px;
  }

  .spotlight[data-spotlight*="fade"] .overlay > div h2  {
    font-size: 22px;
    line-height: 22px;
  }

  .spotlight[data-spotlight*="fade"] .overlay > div p { margin-top: 5px; }

  /* Tools */
  .box-parallax h1 {
    line-height: 80px;
    font-size: 72px;
  }

  .box-parallax h2 {
    line-height: 28px;
    font-size: 25px;
  }

}

/* Only Phones (Portrait) */
@media (max-width: 479px) {

  /* Modules */
  .grid-h .mod-line:before {   
    top: -10px;
    left: 0;
    right: 0;
    bottom: auto;
    border-width: 1px 0 0 0;
  }

  /* System */
  #system .items .item,
  #system .items .item:first-child {
    margin-top: 12px;
    padding-top: 18px;
    border-width: 1px 0 0 0;
  }

  #system .items :first-child .item:first-child {
    margin-top: 0;
    padding-top: 0;
    border-width: 0;
  }

  #system .items .leading .item {
    margin-bottom: 0;
    padding-bottom: 0;
    border-width: 0;
  }

  #system .item { padding-left: 0; }

  #system .item > header time {
    display: inline;
    position: relative;  
    top: 0;
    left: 0;
    width: 60px;
    text-align: left;
  }

  #system .item > header time > span { display: inline; }

  #system .item > header time .day,
  #system .width50 .item > header time .day {
    line-height: 14px;
    font-size: 14px;
    letter-spacing: 0;
  }

  #system .item > header time .month,
  #system .width50 .item > header time .month {
    line-height: 14px;
    font-size: 14px;
  }

  #system .width50 .item > header time { left: 0; }

  /* Tools */
  .box-parallax h1 {
  margin-bottom: 10px;
  line-height: 60px;
  font-size: 56px;
  }

  .box-parallax h2 {
  margin-top: 10px;
  line-height: 22px;
  font-size: 20px;
  }

}