@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Lato:400,700,900');
body {font-family: 'Lato', sans-serif; font-weight:400; overflow-x: hidden; background:#fafaf9;}
a {	transition: 0.5s all ease;}
img {	max-width: 100%;}
.maincontainer {	margin: 0 auto; padding:0 15px;	max-width: 1030px; width: 100%;}
.headercont { background:url(../images/headerbg.jpg) no-repeat center top; min-height:139px; background-size:cover;}
.logo { display:inline-block; margin-top:15px;}
.topbar { font-size:12px; color:#fff; text-transform:uppercase; line-height:37px; float:right; margin-top:5px;}
.topbar li { list-style:none; display:inline-block; padding:0 10px;}
.topbar li i { margin-right:5px;}
.topbar li a:link,.topbar li a:active,.topbar li a:visited { font-size:13px; color:#fff; text-transform:none;}
.topbar li a:hover { color:#fb1218;}

#gallery_outer_3 .mainimage, #gallery_outer_3 .mainimage div { border:0 !important;}

#menuToggle {
    display: block;
    position: relative;
    z-index: 1;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
   
}
#menuToggle input {
    display: block;
    width: 100%;
    height: 52px;
    position: absolute;
    top: 0px;
    left: 0px;
    cursor: pointer;
    opacity: 0;
    z-index: 2;
    -webkit-touch-callout: none;
	margin:0;

}
#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: #ffffff;
  border-radius: 3px;
  
  z-index: 1;
  
  -webkit-transform-origin: 4px 0px;
  
          transform-origin: 4px 0px;
  
  -webkit-transition: background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease,
              -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  
  transition: background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease,
              -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease,
              -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menuToggle span:first-child
{
  -webkit-transform-origin: 0% 0%;
          transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  -webkit-transform-origin: 0% 100%;
          transform-origin: 0% 100%;
}


#menuToggle input:checked ~ span
{
  opacity: 1;
  -webkit-transform: rotate(45deg) translate(-2px, -1px);
          transform: rotate(45deg) translate(-2px, -1px);
  background: #fff;
}

#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  -webkit-transform: rotate(0deg) scale(0.2, 0.2);
          transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked ~ span:nth-last-child(2)
{
  opacity: 1;
  -webkit-transform: rotate(-45deg) translate(0, -1px);
          transform: rotate(-45deg) translate(0, -1px);
}



/****************************************/
.mainmenu { background:#1b8abb; border-top:1px solid #b3d8e8;}
#menu  { margin:0; padding:0;float:left; width:100%; list-style:none; border-radius:8px; text-align:center;}
#menu li { display: inline-block;
float:left;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    overflow: hidden;  padding-right:1px; background:url(../images/spretor.jpg) no-repeat right center;}
#menu li a i { width:100%; text-align:center;	font-size:18px;} 
#menu li:last-child { background:none;}
#menu li a{color: #000000;   font-size: 16px;    line-height:24px;    padding:14px 17px; margin:0 0;    display: block;    text-decoration: none; position:relative; overflow:hidden;  font-weight:500;}

#menu li a:hover { color:#fff; background:#fb1218;}


#menuToggle h1{
	    position: absolute; top:-7px; right:15px; font-size: 22px; color: #fff;
   }
   .border1px { border:1px solid #d9d9d9;}

.prodname { background:#f1f1f1; font-size:14px; color:#2f2f2f; padding:8px 15px; border-bottom:1px solid #fff;}
.prodname span { float:left; width:115px;color:#2f2f2f;  font-weight:normal;}
.prodprice { font-weight:600; color:#df2531;}
.detailheading { background:url(../images/detailheading.png) no-repeat left top; height:36px; border-radius:6px; overflow:hidden;}
.detailtext { font-size:12px; color:#4c4c4c; line-height:22px; padding:18px;}



.tabbed{
  float : left;
  width : 100%;
}

.tabbed > input{
  display : none;
}

.tabbed > section > h1{
  float       : left;
  box-sizing  : border-box;
  margin      : 0 0px 0 0;
  padding     : 0;
  border-bottom:0;
  overflow    : hidden;
  font-size   : 1em;
  font-weight : normal;
}


.tabbed > section > h1 > label{
    display: inline-block;
    font-size: 14px;
	margin:0;
    color: #000;
	text-transform:uppercase;
    padding: 14px 65px;
text-align:center;   border-bottom           : none;
     background: #f0eff0 ;

  cursor                  : pointer;
     -moz-user-select     : none;
      -ms-user-select     : none;
  -webkit-user-select     : none;
}







.tabbed > input:checked + section > h1 > label { background:#df2531; color:#fff;}

.tabbed > section > div{
  position      : relative;
  z-index       : 1;
  float         : right;
  box-sizing    : border-box;
  width         : 100%;
  padding:0px 0 0 0;
  margin        :43px 0 10px -100%;
   border:1px solid #e2e2e2;
}

.tabbed > input:checked + section > h1{
  position : relative;
  z-index  : 2;
}

.tabbed > input:not(:checked) + section > div{
  display : none;
}
.contenttext { padding:15px; font-size:12px; color:#000; line-height:22px;}
.footercont { background:url(../images/footerbg.jpg) no-repeat center top; background-size:cover;}
.footerheading { font-size:18px; text-transform:uppercase; color:#fff; text-transform:uppercase; margin-bottom:10px; font-weight:bold;}
.footerlinks { font-size:18px; color:#fff; padding:0; line-height:24px; margin:0;}
.footerlinks li { list-style:none;}
.copyright { font-style:italic; color:#fff; font-size:13px;  text-align:center; padding:20px 0 0 0;}

@media screen and (min-width:820px){
#menuToggle span { display:none;}	
#menuToggle input { display:none;}	
#menuToggle h1 { display:none;}	
}


@media screen and (max-width:1040px){
.tabbed > section > h1 > label { padding:14px 50px;}
}

@media screen and (max-width:1000px){
.tabbed > section > h1 > label { padding:14px 40px;}	
}



@media screen and (max-width:820px){
#menuToggle {background:#df2531; padding:15px 0px 12px 15px; border-bottom:0;}
#menu
{
  position: absolute;
  width: 100%;
  margin: -40px 0 0 -50px;
  box-shadow:0 0 0 0 #000;
  padding: 1px 1px;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;

  display:none;}


#menu li
{
  padding: 5px 0;
  font-size: 22px;
  width:100%; background:none;

}
#menu li a{ text-align:left; line-height:30px;}
#menu li a i { display:none;}
#menuToggle input:checked ~ ul
{
  -webkit-transform: scale(1.0, 1.0);
          transform: scale(1.0, 1.0);
  opacity: 1;
    margin: 11px 0 0 -8px;
    position: static;
	display:block;
	transition:all 0.5s ease-in-out;
}



.tabbed{margin:10px 0;}	 
#tabbed2 + section > div { margin-top:-1px !important;}
#tabbed3 + section > div { margin-top:-1px !important;}
#tabbed4 + section > div { margin-top:-1px !important;}
.tabbed > section > div{    margin:-1px 0;}
.tabbed > section > h1{ margin:0 !important; width:100%; padding:0 0 0 !important}
.tabbed > section > h1 > label { width:100% !important; text-align:left !important; padding:14px 15px !important; margin:1px 0; position:relative;}
.tabbed > section > h1 > label::after{
content: "\f0fe";
    font-family: "fontawesome";
    color: #000;
    position: absolute;
    right: 10px;
    top: 15px;
}

.tabbed > input:checked + section > h1 > label::after{
 content: "\f146";
 color:#fff;
}

}