#main {width:980px; margin:0px auto;}

#main-left {float:left; margin-right:3%; padding-right:3%; width:68%; background:url('../images/separator-vertical2.jpg') repeat-y right top;}
#main-right {float:left; width:26%;}

.half-left, .half-right {float:left; width:46%; margin-right:4%;}
.half-right {margin-right:0; margin-left:4%;}

#headermenu {width:980px; margin:0px auto; margin-top:-15px;}
#smoothmenu1 {float:left; width:90%; top:0px;}
#socialmenu {float:right; xwidth:10%; margin-top:15px;}
#socialmenu li {float:left; margin-left:10px;}

#sociallinks {float:left; width:55%; margin-right:5%;}
#medialinks {float:left; width:100%;}

.wooden-board .csc-textpic-imagerow {xwidth:100% !important; float:left !important; margin-right:10px; xmargin-bottom:10px; clear:none !important; background:url('../images/shelves.png') no-repeat center bottom; background-size:110%; margin-bottom:25px;}



.xbox-schwarz .csc-textpic-intext-left-nowrap div {float:left; margin-left:0px;}

/* #Tablet (Portrait) ================================================== */

@media only screen and (min-width:768px) and (max-width:959px) {

    .inner {width:768px;}

    #banner {height:387px;}
    #banner .banner-in {width:768px; height:387px; padding:0px; background:none;}

    .gotop {display:none;}
    .ddsmoothmenu ul li a {font-size:12px; padding:14px 17px 0;}

    .heading {font-size:18px;}
}


/*  #Mobile (Portrait) ================================================== */

@media only screen and (max-width:767px) {
    
    .inner {width:300px;}

    #banner {height:135px;}
    #banner .banner-in {width:300px; height:113px; padding:0px; background:none;}
    .nivo-html-caption {display:none !important;}
    .nivo-caption  {display:none !important;}
    .nivo-directionNav {bottom:17px;}

    .gotop {display:none;}
    .ddsmoothmenu ul li a {font-size:12px; padding:14px 17px 0;}

    .heading {font-size:18px;}
}


/* #Mobile (Landscape) ================================================== */

@media only screen and (min-width:480px) and (max-width:767px) {
    .inner {width:420px;}

    #banner {height:180px;}
    #banner .banner-in {width:420px; height:160px; padding:0px; background:none;}
    .theme-default .nivoSlider {height:158px !important; overflow:hidden;}
    .nivo-html-caption {display:none !important;}
    .nivo-caption {display:none !important;}
    .nivo-directionNav {bottom:41px;}

    .gotop {display:none;}
    .ddsmoothmenu ul li a {font-size:12px; padding:14px 17px 0;}

    .heading {font-size:18px;}
}

/* menu icon */
#menu-icon {
  display:none; /* hide menu icon initially */
}

@media screen and (max-width:768px) {
  #smoothmenu1 {position:relative; width:100%;}
  #menu-icon {
    color:#fff; width:100%; height:40px; background:#333333; padding:8px 10px 0 10px; cursor:pointer;
    margin:4px 0px 0px 0px; display:block; font-size:20px; text-transform:uppercase;
    font-family:'Oswald', sans-serif; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;
    box-sizing:border-box;
  }
  #menu-icon:hover {background-color:#000;}
  #menu-icon.active {background-color:#000;}
  #nav {
    clear:both; 
    position:absolute;
    top:38px;
    width:100%;
    z-index:10000;
    padding:5px 0px;
    background:#000;
    display:none;
  }
  #nav li {clear:both; float:none; margin:2px 0; width:100%; display:block;}
  #nav a, #nav ul a {
              font:inherit; xbackground:none; display:inline-block; padding:10px 10px 0px 10px; color:#fff;
              border:none; width:100%; font-size:14px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;
              box-sizing:border-box; font-size:14px; text-transform:uppercase; font-family:'Oswald', sans-serif;
  }

  #nav ul {width:100% !important; position:static; display:block !important; border:none; background:inherit;}
  #nav ul li {margin:3px 0 3px 15px;}
  #nav ul li a {font-size:12px; font-family:Arial, Helvetica, sans-serif;}
  .ddsmoothmenu ul li ul li:first-child {padding-top:0px;}
}

@media screen and (min-width:768px) {
  #nav {display:block !important;}
}





/* #Mobile ================================================== */
@media only screen and (max-width:1122px) {
  #sub-banner {padding:10px 1% 10px 1%;}
}

@media only screen and (max-width:1023px) {
  #headermenu {width:94%; margin:0px 3%; margin-top:-25px;}
    #main, #footer .inner {width:94%; padding:0 3%;}
    
    #smoothmenu1 {width:80%;}
    
  #sub-banner {width:92%; margin-left:3%; margin-right:3%;}
  .wooden-board .csc-textpic-imagerow {padding-bottom:0px; background:none;}
  .csc-textpic-imagerow {width:auto !important; float:left;}

.ytvideo-item {width:100%;}
.ytvideo-item iframe {width:100%;}
}

@media only screen and (max-width:768px) {
#logo {width:94%; padding:0 3%; padding-top:8px;}
}

@media only screen and (max-width:680px) {
    #main {width:92%;}
    #main-left, #main-right, .half-left, .half-right {float:none; width:100%; margin-right:0px; margin-left:0px;}    

.box-schwarz .csc-textpic-single-image {float:none !important; margin:0px auto !important;}
.box-schwarz .csc-textpic div {margin-left:0px !important; margin-right:0px !important;}
}

@media only screen and (max-width:480px) {
  #smoothmenu1 {width:70%;}
  #sociallinks {float:none; width:100%; margin:0;}
  #medialinks {float:none; width:100%; margin-top:20px;}
.box-schwarz {padding:20px 3%;}
.box-schwarz .csc-textpic-imagewrap, .box-schwarz .csc-textpic-image {width:100% !important;}
.box-schwarz img {width:100% important;}
}




/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width:959px) {}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width:768px) and (max-width:959px) {}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width:767px) {}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width:480px) and (max-width:767px) {}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width:479px) {}