/* 
    Document   : layout.less
    Created on : 2014.06.05., 11:54:10
    Author     : Farkas Dániel
*/

//== Media queries breakpoints
//
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.

// Extra small screen / phone
// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
@screen-xs: 480px;
@screen-xs-min: @screen-xs;
@screen-phone: @screen-xs-min;

// Small screen / tablet
// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
@screen-sm: 768px;
@screen-sm-min: @screen-sm;
@screen-tablet: @screen-sm-min;

// Medium screen / desktop
// Note: Deprecated @screen-md and @screen-desktop as of v3.0.1
@screen-md: 992px;
@screen-md-min: @screen-md;
@screen-desktop: @screen-md-min;

// Large screen / wide desktop
// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1
@screen-lg: 1200px;
@screen-lg-min: @screen-lg;
@screen-lg-desktop: @screen-lg-min;

// So media queries don't overlap when required, provide a maximum
@screen-xs-max: (@screen-sm-min - 1);
@screen-sm-max: (@screen-md-min - 1);
@screen-md-max: (@screen-lg-min - 1);

h1 ,h2, h3{
	margin-top: 0px !important;
}
.keywords{
	color: white;
	font-size:20px;
}
.border-radius (@radius-top-left: 8px, @radius-top-right: 8px, @radius-bottom-left: 8px, @radius-bottom-right: 8px) {
  -webkit-border-radius: @radius-top-left @radius-top-right @radius-bottom-left @radius-bottom-right;
  -moz-border-radius: @radius-top-left @radius-top-right @radius-bottom-left @radius-bottom-right;
  border-radius: @radius-top-left @radius-top-right @radius-bottom-left @radius-bottom-right;
}

.border-radius (@radius: 8px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

.box-shadow(@shadow){
  -webkit-box-shadow: @shadow;
  -moz-box-shadow: @shadow;
  box-shadow: @shadow;
}

.gradient (@startColor, @endColor) {
  background-color: @startColor;
  background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
  background: -webkit-linear-gradient(top, @startColor, @endColor);
  background: -moz-linear-gradient(top, @startColor, @endColor);
  background: -ms-linear-gradient(top, @startColor, @endColor);
  background: -o-linear-gradient(top, @startColor, @endColor);
  background: linear-gradient(to bottom, @startColor, @endColor);	
}

input:focus, textarea:focus {
  outline: none;
}

.nowrap{
  white-space: nowrap;
}

.nopadding{
  padding: 0px;
}
.nopadding-left{
  padding-left: 0px;
}
.nopadding-right{
  padding-right: 0px;
}
.nomargin{
  margin: 0px;
}

.clear{
  clear: both;
}

.column{
  padding-left: 20px;
  padding-right: 20px;
}

.column.first{
  padding-left: 0px;
  padding-right: 20px;
}

.column.last{
  padding-left: 20px;
  padding-right: 0px;
}

.column.first.last{
  padding-left: 0px;
  padding-right: 0px;
}

.column{
  padding-left: 20px;
  padding-right: 20px;
}

.row{
  padding-left: 5px !important;
  padding-right: 5px !important;
}

body{
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  color: #5e5e5e;
  font-size: 14px;
  background: #303135;
}

a{
  color: #666666;
}

a:hover{
  color: #CB2028;
}

#content{
  .sidebar{
    a{
      text-decoration: none;
    }
	h2{
		margin: 0px;
		line-height: 145%;
	}
	h4{
		font-size: 100%;
		margin: 0px;
		line-height: 145%;
	}
  }
  a{
    text-decoration: underline;
  }
}

p{
  line-height: 180%;
}

.flip-items{
  height: 400px !important;
  width: 460px !important;
}

.page-wrapper{
  max-width: 1264px;
  margin: 0 auto;
  .box-shadow(~"0 3px 24px rgba(24,24,25,.31)");
}

.wrapper{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  position: relative;
}

.table-responsive {
  width: 100%;
  margin-bottom: 15px;
  overflow-y: hidden;
  overflow-x: auto;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  border: 0;
  -webkit-overflow-scrolling: touch;
}

.modal-dialog {
  width: 100% !important;
  max-width: 400px !important;
}

#header{
  height: auto;
  background: #FFFFFF;
  padding-bottom: 5px;
  .header-logo{
    float: left;
    display: block;
    width: 274px;
    height: 72px;
    background: transparent url(../img/logo_header.png) no-repeat top center;
    margin: 5px 0 0 0;
  }
  .top-info{
    text-align: right;
    padding: 5px;
    text-transform: uppercase;
    background: #F3F3F3;
    color: #000000;
    font-size: 11px;
  }
  .header-content{
    text-align: right;
    float: right;
    position: absolute;
    bottom: 25px;
    right: 0;	
    .top-menu{
      font-family: "Open Sans", Arial, Helvetica, sans-serif;
      text-align: right;
      li{
        float: left;
        padding: 0 0 0 25px;
	ul{
	    left: auto;
	    li{
		float: none;
		text-align: left;
		padding: 0 !important;
	    }
	}
        a{
          font-size: 11px;
          color: #333333;
          font-weight: 800;
          text-transform: uppercase;
          padding-bottom: 2px;
        }
        a:hover{
          text-decoration: none;
          color: #CB2028;
        }
        .active{
          color: #CB2028;
        }
      }
      .dropdown-toggle:hover ul{
	  visibility:visible;
      }
      .dropdown-menu{
	  margin-top:0;
      }
    }
  }
  .line{
    border-bottom: 1px solid #CBC7BE;
    margin-top: 24px;
  }
}

#banner{
  position: relative;
  .title{
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 12px 50px 32px 50px;
    color: #303135;
    position: absolute;
    text-align: center;
    width: 100%;
  }    
  .next{
    position: absolute;
    left: 30px;
    top: 20px;
    z-index: 101;
    cursor: pointer;
  }
  .prev{
    position: absolute;
    right: 30px;
    top: 20px;
    z-index: 101;
    cursor: pointer;	
  }
  .slideshow-pager-wrapper{
    text-align: center;
    background: #F2F2F2;
    border-bottom: 1px solid #D6D5DA;
    position: relative;
    height: 80px;
  }
  .slideshow-pager{
    position: absolute;
    bottom: 20px;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 52px;
    z-index: 101;
    text-align: center;
    width: 100%;
    color: #57585A;
    line-height: 0;
    .cycle-pager-active{
      color: #CB2027;
    }
  }
  .slide{
    display: block;
    background-repeat: no-repeat;
    background-position: top center;
    width: 100%;
    img{
      width: 100%;
    }
	h2 {
		line-height: 140%;
		margin: 0px;
	}
  }
}

#content{
  background: #FFFFFF;
  padding: 30px 10px 0 10px;  
  overflow-x: hidden;
  .wrapper{
    background: #FFFFFF;
    .slideshow-pager{
      cursor: pointer;
      position: absolute;
      bottom: 0;
      right: 20px;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 45px;
      z-index: 101;
      text-align: right;
      width: 100%;
      color: #8D8D8D;
      .cycle-pager-active{
        color: #FEFEFE;
      }	    
    }
    .breadcumb{
      font-size: 13px;	
    }	
    .page-title{
      font-size: 40px;
      font-weight: 300;
      text-transform: uppercase;
      background: transparent url(../img/title_icon.png) no-repeat left top;
      padding-left: 60px;
      min-height: 57px;
	  line-height: 140%;
      margin: 20px 0 0 0 !important;
      color: #303134;
      padding-bottom: 20px;
      border-bottom: 1px solid #E5E5E5;
    }
    .intro{
      font-weight: bold;
      padding: 10px 0;	    
    }
    .content{
      padding: 10px 0;
    }
    .product-box{
      background-color: #eeeeee;
      padding: 10px 20px;
      margin: 20px 0 40px 0;
      .box-shadow(~"0 3px 10px rgba(24,24,25,.31)");
      img{
        width: 100%;
      }
    }
    .product-phone{
      background-color: #eeeeee;
      margin: 20px 0;
      .box-shadow(~"0 3px 10px rgba(24,24,25,.31)");
      .title{
        background: #303135;
        color: #FFFFFF;
        text-transform: uppercase;
        font-size: 17px;
        font-weight: bold;
        padding: 25px 10px;
        text-align: center;
      }
      .tel{
        background: transparent url(../img/right-arrow.png) no-repeat -5px center;
        color: #303135;
        text-transform: uppercase;
        font-size: 17px;
        font-weight: bold;
        padding: 25px 10px;
        text-align: center;
        padding-right: 0;		
      }
      .small-text{	
        color: #303135;
        padding: 25px 10px;
        text-align: center;
        text-transform: none;
        font-weight: 300;
        font-size: 15px;	
        font-weight: bold;
      }
      .button{
        padding: 18px 18px 0 10px;
        text-align: right;
        button.call{
          border: 0;
          color: #FFFFFF;
          background-color: #cb2027;
          padding: 7px 15px;
          font-size: 17px;
          font-weight: bold;
          text-transform: uppercase;
          .box-shadow(~"0 3px 10px rgba(24,24,25,.31)");
        }	    
      }
    }
    .product-table{
      .table-responsive{
        .box-shadow(~"0 3px 10px rgba(24,24,25,.31)");		
      }
      .title{
        font-size: 24px;
        font-weight: 600;
        color: #303134;
        padding: 0 0 10px 0;
      }	    
      table{
        border: 5px solid #EEEEEE;
        th{
          font-size: 12px;
          text-align: center;
          vertical-align: middle;
          border-left: 1px solid #EEEEEE;
          border-right: 1px solid #EEEEEE;
          border-top: 3px solid #EEEEEE;
          border-bottom: 3px solid #6595B2;
          color: #303135;
          font-weight: 600;
          padding: 10px;
          height: 100px;		    
        }
        td{
          font-size: 12px;
          text-align: center;
          vertical-align: middle;
          border-left: 1px solid #EEEEEE;
          border-right: 1px solid #EEEEEE;
          border-top: 3px solid #EEEEEE;
          border-bottom: 3px solid #EEEEEE;
          color: #303135;
          font-weight: 600;
          padding: 10px;
          height: 100px;		    
          max-height: 100px;
        }
        .text-left{
          text-align: left;
          min-width: 400px;
        }
      }
    }
    .product-pdf{
      .col-sm-6:nth-child(odd){
        padding-right: 10px;		
      }
    }
    .product-pdf{
      .col-sm-6:nth-child(even){
        padding-left: 10px;
      }
    }
    .pdf{
      text-align: left;
      border: 0;
      background-color: #eeeeee;
      padding: 10px 20px;
      margin: 10px 0 10px 0;
      width: 100%;
      height: 70px;
      .box-shadow(~"0 3px 10px rgba(24,24,25,.31)");
      background: #EEEEEE url('../img/pdf_icon_2.png') no-repeat 10px center;
      padding-left: 70px;
      span{
        display: inline-block;
        position: relative;
        padding-left: 10px;
      }	    
    }	
  }
  .sidebar{
    float: left;
    margin-bottom: 30px;
    .sidebar-content{
      display: block;
    }	
    .box{
      background: #303135;
      margin-bottom: 30px;
      border-top: 5px solid #186694;
	  overflow-x: hidden;
      .box-shadow(~"0 3px 10px rgba(24,24,25,.31)");
      .bottom{
        min-height: 140px;
        color: #000000;
        background: #f2f2f2 url(../img/down-arrow.png) no-repeat center top;	
        padding: 20px 0;
        text-align: center;
        .tel{
          text-align: center;
          font-weight: 700;
          font-size: 21px;
          line-height: 150%;
        }
        .small-text{
          font-size: 14px;
          text-align: center;
        }
        button.call{
          border: 0;
          color: #FFFFFF;
          background-color: #cb2027;
          padding: 7px 30px;
          margin-top: 10px;
          font-size: 18px;
          font-weight: bold;
          text-transform: uppercase;
          .box-shadow(~"0 3px 10px rgba(24,24,25,.31)");
        }
      }	    
    }
    .box.red{
      border-top: 5px solid #CB2028;	    
    }
	.box.white{
		background: #FFFFFF;
		#___page_0{
			display: block !important;
		}
	}
	.box.youtube{
		padding: 10px;
	}
    .title{
      font-size: 24px;
      font-weight: 700;
      color: #FFFFFF;
      text-transform: uppercase;
      padding: 15px 15px 10px 15px;
    }
    .search{
      padding: 10px 20px 15px 20px;	    
      form{
        position: relative;		
      }
      input[name="search"]{
        width: 100%;
        border: 0;
        font-size: 20px;
        padding: 5px 30px 5px 10px;
        font-weight: normal;
      }
      button{
        border: 0;
        background: transparent;
        color: #232323;
        font-size: 20px;
        position: absolute;
        top: 5px;
        right: 5px;
      }
    }
    .category-menu{
      padding: 15px 0 15px 0;
      border-top: 1px solid #bebebe;
	  ul li a{
        padding-left: 20px;
      }
      ul li > ul li a{
        padding-left: 35px;
      }
      ul li > ul li > ul li a{
        padding-left: 50px;
      }
      ul li > ul li > ul li > ul li a{
        padding-left: 65px;
      }
      ul li > ul li > ul li > ul li > ul li a{
        padding-left: 80px;
      }
      ul li > ul li > ul li > ul li > ul li > ul li a{
        padding-left: 95px;
      }
      ul li > ul li > ul li > ul li > ul li > ul li > ul li a{
        padding-left: 110px;
      }
      ul li > ul li > ul li > ul li > ul li > ul li > ul li > ul li a{
        padding-left: 125px;
      }
      ul li > ul li > ul li > ul li > ul li > ul li > ul li > ul li > ul li a{
        padding-left: 140px;
      }
      li > ul{
        display: none;
      }
      a{
        display: block;
        padding: 3px 0;
        color: #bebebe;
      }
      a:hover{
        color: #ffffff;
      }
      a.active{
        color: #303135;
        background: #FFFFFF url('../img/menu_icon.png') no-repeat 2px center;
      }
    }
    .category-title{
      padding-left: 15px;
      font-size: 14px;
      font-weight: bold;
      color: #FFFFFF;
      text-transform: uppercase;	    
    }
    .pdf-download{
      display: block;
      padding: 20px;
      button{
        padding: 10px;
        width: 100%;
        text-align: left;
        color: #000000;
        font-weight: 800;
        text-transform: uppercase;
        border: 0;
        background: #FFFFFF;
        .box-shadow(~"0 3px 10px #18181");
        span{
          display: inline-block;
          position: relative;
          top: 8px;
          padding-left: 10px;
        }
        img{
          float: left;
        }
      }
    }
  }
  .content-row{
    padding: 0 0 0 30px;
    float: left;
    li{
      margin-left: 30px;
    }
    .table{
      display: table;
      width: 110%;
      border-spacing: 30px 0;
      margin-bottom: 20px;
      border-collapse: separate;
      position: relative;
      left: -30px;	    
      .table-row{
        display: table-row;
        .top-box{
          padding: 0;
          float: none;
          display: table-cell;
          background: #f2f2f2;
          .box-shadow(~"0 3px 10px rgba(24,24,25,.31)");
        }
      }
    }
    .top{
      border-top: 5px solid #186694;	    
      padding: 15px 30px 5px 30px;
      background: #303135;
      color: #ACADAF;
      p{
        line-height: 140%;
      }
      .title{
        font-size: 24px;
        font-weight: 700;
        color: #FFFFFF;
		margin: 0px;
        text-transform: uppercase;
        padding: 0 0 10px 0;
      }
    }
    .bottom{
      min-height: 140px;
      color: #000000;
      background: #f2f2f2 url(../img/down-arrow.png) no-repeat center top;	    
      .tel{
        text-align: center;
        font-weight: 700;
        font-size: 21px;
        line-height: 150%;
      }
      .small-text{
        font-size: 14px;
      }
      button.call{
        border: 0;
        color: #FFFFFF;
        background-color: #cb2027;
        padding: 7px 30px;
        margin-top: 10px;
        font-size: 18px;
        font-weight: bold;
        text-transform: uppercase;
        .box-shadow(~"0 3px 10px rgba(24,24,25,.31)");
      }
    }
    .top-box-left{
	  .h3{
		margin: 0px;
		line-height: 140%;
	  }
      .bottom{
        padding: 25px 20px 10px 20px;
        font-weight: 700;
        line-height: 180%;
        a{
          color: #186694;
        }
      }
    }
    .top-box-right{
      .bottom{
        padding: 25px 30px 10px 30px;
        text-align: center;
      }
    }
    .text{
      margin: 40px 0;
      padding-bottom: 20px;			    
      p{
        line-height: 140%;
      }
      .title{
        font-size: 24px;
        font-weight: 600;
        color: #303134;
        padding: 0 0 10px 0;
      }
	  img{
		width: 100%;
	  }
	  .videoWrapper {
		position: relative;
		padding-bottom: 56.25%; /* 16:9 */
		padding-top: 25px;
		height: 0;
	  }
	  .videoWrapper iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	  }
    }
    .wrapper{
      padding: 0 5px;
    }
    h1,h2,h3,h4,h5,h6{
      font-weight: 800;
      color: #303134;
    }
    h1{
      margin:  30px 0 10px 0;
      font-size: 26px;
      text-transform: uppercase;
    }
    h2{
      margin: 30px 0 10px 0;
      font-size: 22px;
      text-transform: uppercase;
    }
    h3{
      margin:  20px 0 10px 0;
    }
    .small{
      font-size: 9px;
      text-align: right;
    }
  } 
  img{
    margin: 0;
  }
  form.contact{
	margin-top: 15px;
    .left{
      padding-left: 0;
    }
    .right{
      padding-right: 0;
    }
    textarea, input[type="text"]{
      background-color: #e1e1e1;
      border: solid 1px #fcfdfd;
      .box-shadow(~"inset 0 2px 2px rgba(15,15,16,.38)");
      padding-top: 10px;
      padding-bottom: 10px;
      margin-bottom: 15px;
    }
    textarea{
      height: 156px;
    }
    button{
      border: 0;
      color: #FFFFFF;
      background-color: #cb2027;
      padding: 10px 40px;
      margin-top: 10px;
      font-size: 18px;
      font-weight: bold;
      text-transform: uppercase;
      width: 100%;
      .box-shadow(~"0 3px 10px rgba(24,24,25,.31)");		   
    }
    .checkboxes{
      margin-top: 22px;
    }
    input[type=radio], input[type=checkbox] {
      margin: -2px 0 0;
    }	
    select {
      background-color: #e1e1e1;
      border: 1px solid #fcfdfd;
      box-shadow: 0 2px 2px rgba(15, 15, 16, 0.38) inset;
      margin-bottom: 15px;
      padding-bottom: 10px;
      padding-top: 10px;      
    }
  }
  form.visszahivas{
	textarea{
	  height: 215px;	
	}
  }
}

#content.product-list{
	nav.category-menu{
		ul{
			list-style:disc;
		}
	}
}

#content.product{
    .top-box{
	margin: 15px 0;
	  .bottom > ul,
	  .category-menu{
	  	height: 300px;
	  	max-height: 300px;	    
	  	overflow-y: auto;	    
	  }
	  .title{
	  	font-size: 18px;
	  }
	  .category-menu ul li {
	    h3 {
	      font-size: 16px;
		  font-weight: bold;
		}
		ul li h4 {
		  font-size: 14px;
		  font-weight: bold;
		}
	  }
	  h6{
	    font-size: 16px;
	  }
    }
    .content-row{
	.top{
	    padding: 15px 20px 5px 20px;
	}
    }
}

#content.termekek{
  .content-row{
    .top-box-left, .top-box-right{
      .bottom{
        text-align: left;
        padding: 25px 20px 10px 20px;
        font-weight: 700;
        line-height: 180%;
        a{
          color: #186694;
        }
      }
    }	
  }
}
#content.search{
  .text{
    p{
      h2{
        margin-top: 15px;
        margin-bottom: 10px;
      }
      a{
        font-weight: 600;
      }
      span{
        display: block;
      }
    }
  }
}
#content.home{
  .home-top{
    color: #000000;
    .title{
      text-align: center;
      font-weight: 800;
      font-size: 25px;
    }
    .text{
      text-align: center;
    }
  }
  .content-row{
    .text{
      margin: 40px 0;
      padding-bottom: 20px;		
      border-bottom: 1px solid #E5E5E5;
      p{
        line-height: 140%;
      }
      .title{
        font-size: 24px;
        font-weight: 700;
        color: #303134;
        text-transform: uppercase;
        padding: 0 0 10px 0;
      }
    }    
  }
}

#content.tevekenysegeink{
  .row{
    padding: 40px 0;
    margin-bottom: 3px;
    .box-shadow(~"1px 2px 2px rgba(190,193,195,.75)");
    .title{
      a{
        text-decoration: none;
      }	    
      font-family: "Open Sans", Arial, Helvetica, sans-serif;
      font-weight: 700;
      font-size: 25px;
      line-height: 120%;
      a{
        color: #4B4B4B;
      }
    }
    button{
      font-family: "Open Sans", Arial, Helvetica, sans-serif;	    
      background-color: #4d4d4d;
      color: #FFFFFF;
      border: 0;
      padding: 7px 10px;
      text-transform: uppercase;
      min-width: 226px;
      font-size: 18px;
    }
  }
  .box{
    .slideshow{
      img{
        width: 100%;
      }
    }
  }
}

#footer-content{
  background: #1C1C1C;
  color: #ffffff;
  padding: 40px 0 15px 0;
  p{
    font-size: 14px;
    line-height: 150%;
  }
  .wrapper{
    .title{
      font-size: 25px;
      margin-bottom: 20px;
      text-transform: uppercase;
      font-weight: bold;
    }
    img{
      width: 100%;
    }
    .minositeseink{
      img{
        margin-top: 25px;
      }
    }
  }
  a{
    color: #ffffff;
  }
  li{
    list-style: none;
    margin-bottom: 4px;
  }
}

#footer{
  min-height: 100px;
  .gradient(#383b44, #18191D);
  .footer-logo{
    background: transparent url(../img/footer_logo.png) no-repeat center center;
    width: 151px;
    height: 100px;
    margin: 0 auto;
  }
  .tags{
    text-align: center;
    max-width: 900px;
    color: #BDBDBF;
    margin: 0 auto;
    padding-bottom: 20px;
  }   
}

#callModal{
  .modal-header{
    border: 0;
    border-top: 5px solid #186694;
    padding-bottom: 0;
  }
  .modal-body{
    padding-top: 0;
    padding-bottom: 0;
  }
  .modal-content{
    .border-radius(0);	
  }
  #callModalLabel{
    text-align: center;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 23px;
  }
  .modal-footer{
    border-top: 0;
    padding: 0 35px 35px 35px;
    button{
      border: 0;
      color: #FFFFFF;
      background-color: #666666;
      padding: 10px 40px;
      font-size: 18px;
      font-weight: bold;
      text-transform: uppercase;
      width: 100%;
      .box-shadow(~"0 3px 10px rgba(24,24,25,.31)");		   
    }	
  }
  form.contact{
    .left{
      padding-left: 0;
    }
    .right{
      padding-right: 0;
    }
    textarea, input[type="text"], select{
      background-color: #e1e1e1;
      border: solid 1px #fcfdfd;
      .box-shadow(~"inset 0 2px 2px rgba(15,15,16,.38)");
      padding-top: 10px;
      padding-bottom: 10px;
      margin-bottom: 15px;
    }
    textarea{
      height: 156px;
    }
    button{
      margin-top: 10px;
      border: 0;
      color: #FFFFFF;
      background-color: #cb2027;
      padding: 10px 40px;
      font-size: 18px;
      font-weight: bold;
      text-transform: uppercase;
      width: 100%;
      .box-shadow(~"0 3px 10px rgba(24,24,25,.31)");		   
    }
    .checkboxes{
      margin-top: 22px;
    }
    input[type=radio], input[type=checkbox] {
      margin: -2px 0 0;
    }	
  }
}

@media(max-width: @screen-xs-max){
  .mobile-clear{
    clear: both;
  }
  #banner{
    .next{
      left: 10px;
    }
    .prev{
      right: 10px;
    }
    .title{
      padding-left: 50px;
      padding-right: 50px;
      font-size: 16px;
    }
    .slideshow-pager {
      bottom: -15px;	
    }
  }
  #header{
    height: auto;
    .wrapper{
      .header-logo{
        float: left;
        background-size: 100% auto;
        width: 250px;
        height: 72px;
        margin: 10px;
      }
      .mobile-menu-button{
        float: right;
        font-size: 40px;
        padding: 25px 10px 0 0;
        cursor: pointer;
      }	    
      .header-content{
        position: relative;
        display: block;
        float: none;
        padding: 0;
        .top-menu{
          margin-top: 10px;
          display: none;
          text-align: left;
          ul{
            padding: 0;
            margin-bottom: 0;
            li{
              float: none;
              display: block;
              padding: 0;
              a{
                display: block;
                border-bottom: 1px solid #E9E9E9;
                padding: 10px;
                font-size: 14px;
              }
            }
          }
	  .dropdown-menu{
	      position: relative;
	      float: none;
	      border: 0;
	      a{
		  padding-left: 25px;
	      }
	  }
        }
      }
    }
    .line{
      display: none;
    }
  }
  #content{
    .wrapper{
      .product-pdf{
        .col-sm-6{
          padding: 0px !important;		
        }
      } 
      .product-phone{
        padding-bottom: 25px;
        .title{
          font-size: 30px;
        }
        .tel{
          background: transparent url(../img/down-arrow.png) no-repeat center top;
          padding-bottom: 10px;
          font-size: 30px;
        }
        .small-text{
          padding: 0;
        }
        .button{
          text-align: center;
          button.call{
            font-size: 30px;			
          }
        }
      }	    
    }
    .sidebar{
      .sidebar-menu-button{
        cursor: pointer;
        i{
          font-size: 28px;
        }
      }
      .sidebar-content{
        display: none;
      }
    }	
    .content-row{
      padding: 0;
      .table{
        width: 100%;
        display: block;
        left: 0;
        .table-row{
          display: block;
          .top-box{
            float: left;
            display: block;
          }
        }
      }
      .top-box{
        padding: 0;
      }
      .text{
        padding: 0 15px;
      }
      .breadcumb{
        padding: 0 15px;
      }
    }
    img{
      margin: 0;
    }
    form.contact{
      .left{
        padding: 0;
      }
      .right{
        padding: 0;
      }
    }
  }
  #content.product{
    .top-box{
	.category-menu{
	    height: auto;
	    max-height: none;	    
	    overflow-y: visible;   
	}
    }
  }
  
  #footer-content{
    .contant-info,
    .contact-form,
    .map{
      padding-left: 5px;
      padding-right: 5px;
    }
  }
}

@media(min-width: @screen-tablet){
  #header{
    .wrapper{
      .header-logo{
	margin-left: 10px;
      }
      .header-content{
        .top-menu{
	  padding-right: 10px;
          display: block !important;
          li{
            padding: 0 0 0 10px;
            a{
              font-size: 11px;
            }
          }
        }
      }
    }
  }
  #content{
    .sidebar{
      .sidebar-content{
        display: block !important;
      }
    }
    .wrapper{
      .top-box-left{
        padding-left: 0;
      }
      .top-box-right{
        padding-right: 0;
      }
      .main-menu{    

      }
    }
    img{
      margin: 0;
    }	
  }
}

@media(min-width: @screen-tablet) and(max-width: @screen-desktop){
  #content{
      .sidebar{
	  .pdf-download{
	      button{
		font-weight: 600;
		span{
		    top: 0;
		}
		img{
		    width: 22%;
		}
	      }
	  }
	  .box{
	      .bottom{
		  button.call{
		      font-size: 16px;
		  }
	      }
	  }
      }
  }
}

@media(min-width: @screen-tablet) and (max-width: 1100px){
  #banner{
    .slideshow-pager {
      bottom: -15px;	
    }
  }
}

@media(min-width: @screen-desktop){
  #header{
    .wrapper{
      .header-content{		
        .top-menu{
          li{
            padding: 0 0 0 20px;
            a{
              font-size: 11px;
            }
          }
        }
      }
    }
  }  
  #content{
    .wrapper{

    }
    img{
      margin: 0;
    }	
  }
}

@media(min-width: @screen-lg-desktop){
  #header{
    .wrapper{
      .header-content{		
        .top-menu{
          li{
            padding: 0 0 0 26px;
            a{
              font-size: 13px;
            }
          }
        }
      }
    }
  }    
}

@media(max-width: 450px){
  #content{
    .wrapper{

    }
  }
}

@media(min-width: 768px) and (max-width: 915px){
  #header{
    .header-logo{
	width: 20%;
	background-size: 100% auto;
	background-position-y: center;
    }
  }
}

.btn-default{
  .gradient(#F1F1F1, #DADADA);
  .border-radius(10px);
}

.map{
	margin-bottom: 15px;
}

.social {
	float: right;
	padding: 0 0 0 10px;
	img {
		opacity: 0.7;
		filter: alpha(opacity=70);
		margin: 0 4px;
	}
	.last {
		margin-right: 0;
	}
}

@media print {
	img{
		width:100%;
	}
	body, #content, #container {
		width: 100%;
		margin: 0;
		float: none;
		background: #fff url(none);
	}
	
	body {
		font: 1em Georgia, "Times New Roman", Times, serif;
		color: #000; 
	}
	
	h1,h2,h3,h4,h5,h6 {
		font-family: Helvetica, Arial, sans-serif;
		color: #000;
	}
	h1 { font-size: 250%; }
	h2 { font-size: 175%; }
	h3 { font-size: 135%; }
	h4 { font-size: 100%; font-variant: small-caps; }
	h5 { font-size: 100%; }
	h6 { font-size: 90%; font-style: italic; }
	
	a:link, a:visited {
		color: #00c;
		font-weight: bold;
		text-decoration: underline; }
		
	#content a:link:after, #content a:visited:after {
		content: " (" attr(href) ") ";
	}
	
	
	#banner, #footer-content, .sidebar, #callModal, .product-phone, .mobile-menu-button, .top-info, .breadcumb, .header-content{
		display:none !important;
	}
	
	.content-row{
		width:100% !important;
		padding:0px !important;
		
	}
	.product-box{
		box-shadow:none !important;
		padding:0px !important;
		background:#fff !important;
	}
	.table-responsive{
		box-shadow:none !important;
		width:100% !important;
	}
}