*, 
*:after, 
*:before {
    -webkit-box-sizing: border-box; 
    -moz-box-sizing:border-box; 
    box-sizing:border-box;
}
.banner-widget {margin:0 0 40px 0; display:block}
.banner-widget .topitemholder .topitembox {float:none; width:100%;}
.banner-widget .topitemtitle2 {display:none;}
.banner-widget .topitemholder .topitembox #topitemimage {height:auto;}
.banner-widget .topitemholder .topitembox #topitemimage a img {position:relative; max-height:none;}
.widget.valentine .product .prod .image {padding:0;}
.widget.valentine {background:#FEEAE9; padding:40px; margin-bottom:40px}
.imgFull:checked ~ .inside-half .galleryAll .holder-img {height:700px;}

.description,
.description * {font-size:16px; font-family: "canada-type-gibson", sans-serif !important;}
.description strong,
.description b {font-weight:500 !important;}

.galleryAll label[for="imgB"] > span:first-child {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    background: rgba(134, 134, 132, 0.8);
    padding: 2px 5px;
    height: auto;
    z-index: 2;
    opacity: 0;
    margin: -9px 0 0 -45px;
    -webkit-transition: opacity .2s ease-in-out;
    -moz-transition: opacity .2s ease-in-out;
    -ms-transition: opacity .2s ease-in-out;
    -o-transition: opacity .2s ease-in-out;
    transition: opacity .2s ease-in-out;
}

.galleryAll .holder-img {height:550px;}

.product-description {
  /*
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  */
  opacity:1;
    -webkit-transition: transform .3s ease-in-out;
    -moz-transition: transform .3s ease-in-out;
    -ms-transition: transform .3s ease-in-out;
    -o-transition: transform .3s ease-in-out;
    transition: transform .3s ease-in-out;
}

.imgFull:checked ~ .inside-half .galleryAll .close {
    display: block;
}

.imgFull:checked ~ .inside-half {
    grid-template-columns:auto
}
.imgFull:checked ~ .inside-half .product-description {
    position: absolute;
    top: 0;
    right: 0;
  /*
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
  */ opacity:0
}


.show-menu,
#show-menu {display:none;}

    #wrapper {background:#fff; margin:0; padding:0; font-family: "canada-type-gibson", sans-serif;}
    
    .inside {max-width:1500px; position: relative; margin:0 auto; display:block;}
    .design-process:after,
    .how-to:after,
    .inside:after {content:''; clear:both; display: table;}

    #header {padding:0; margin:0; }
    #header .inside {margin:0 auto}
    .logo {display: inline-block; margin:10px 0; padding:0;}
    .logo img {display:block; padding:0; margin: 0; border:none;}

    .copyright {right:0; position: absolute; top:calc(50% - 20px)}
    .copyright a {line-height:20px; display:inline-block; text-decoration: none; color:#121212; font-size: 14px;}
    .copyright a:hover {text-decoration: underline;}
    .copyright a img {float:right; margin:0 0 0 5px}

    h1.title {color:#666; background:transparent; font-size: 30px; border:none; padding: 0; font-weight: normal;}

    .price {font-size: 20px; padding:10px 0; display: block;}

    .notes {padding:0 0 40px}
    .notes p {color:#ff3333; line-height: 30px;}
    .notes p img {float:left; margin:0 20px 0 0}

    .info {font-size:16px; font-weight: 400; clear:both; margin:0; color:#666; padding:40px 0 0; border-top:3px #ccc solid;}
    .info ul {margin:0; padding:0 0 0 15px;}
    .info li {margin:0 0 10px}
    .info h4 {font-weight: 500; color: #000; margin:0 0 20px}
    .info b {font-weight: 500;}

    #menu {background: #E8E8E8; margin:0; padding:0; list-style: none; text-align: center;}
#menu ul {margin:0; padding:0; list-style:none;}
    #menu li {display:inline-block;}
    #menu li a {font-size:16px; display:block; padding:20px 50px; color:#121212; text-decoration: none;}
    #menu li:hover a {color:#999}

    .banner {width:100%; margin:0 0 40px; padding:0;}
    .banner img {max-width:100%; height:auto ; border:none; margin:0; padding:0}
    
    .top {background: #121212; color:#fff; text-align: center;}
    .top p {margin:0; padding:15px 0; display:inline-block}
    .top i {margin-right:10px}

    .feedback {background: #E6E6E6; color:#121212; text-align: center;}
    .feedback p {margin:0; padding:15px 0; display: inline-block;}
    .feedback i {margin:0 5px;}
    .feedback span {margin:0 10px}

    .description {margin:0 0 40px 0; padding:40px; background:#F9F9FB; color:#121212}
    .description ul {margin:0; padding:0 0 15px 15px;}
    .description li {margin:0 0 10px}
    .description img {max-width: 100%;}
    .description h1 {font-size: 26px; font-weight:500; margin-bottom:20px}
    .description h2 {font-size: 20px; font-weight:500; margin-bottom:20px}
    .description h3 {font-size: 18px; font-weight:500; margin-bottom:20px}
    .description h4,
    .description h5 {font-size: 16px; font-weight:500; margin-bottom:20px}

    .inside-half {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 40px;
    grid-row-gap: 0px;
    margin:0 0 40px
    }

    .widget h3 {font-size: 26px; margin:0 0 20px; font-weight: normal; display:block; text-align: center;}
.product {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    }
.product .prod {float:none; width:100%;}

.product .prod .image {background:#F9F9FB;}

.prod .image,
.product .prod .image span {height:300px; }

.prod .image a  {border:1px #ccc solid; padding:20px}

.prod .title,
.prod .price {display:none;}
.product .prod .btn {padding:10px 0 20px 0;}
.product .prod .btn  a {height:auto; color:#000; border-radius:15px;  background:#E8E8E8; padding:10px 30px}

    .design-process,
    .how-to {
	  /*
    display: flex;
    flex-direction: row;
	  */
    align-items: center;
    }
    .how-to h3,
    .design-process h3 {font-weight:normal; font-size: 26px; color:#000; margin:0 0 40px}
    .how-to ul {margin:0; padding:0; font-size: 20px;}
    .how-to li {margin:0 0 30px 15px; padding:0}
    .how-to img {float:left; margin:0 }
    .design-process img {float:right; margin:0 }
    .design-process {color:#666; line-height: 26px;}
    .design-process p {margin:0 0 30px}
    .how-to img,
    .design-process img {border-radius:50%; padding:20px; background:#F9F9FB; border:1px #ccc solid; max-width:100%}



@media screen and (max-width: 1024px) {
  .prod .image, 
  .product .prod .image span {height:200px;}
  .inside-half {grid-template-columns:none;}
  .design-process.inside-half div {order:2;}
  .how-to.inside-half img {margin-bottom:40px;}
.design-process.inside-half div,
  #gallery { order:2;}
  .design-process.inside-half img {order:1; margin-bottom:40px}
  .product-description {order:1; padding-bottom:40px; padding-left:40px; padding-right:40px}
  .copyright  {right:20px;}
  .how-to img, 
  .design-process img {float:none; margin:0 auto; height:200px}
  .how-to.inside-half,
  .design-process.inside-half {padding-left:40px; padding-right:40px;}
  .top p {padding:15px;}
}

@media screen and (max-width: 769px) {
  .product {grid-template-columns: repeat(2, 1fr);}
  .prod .image, 
  .product .prod .image span {height:300px;}
  #menu li a {padding:20px;}
}

@media screen and (max-width: 640px) {
  .show-menu:before {
    display: block;
    content: "";
    border-top: 4px solid #121212;
    position: absolute;
    height: 11px;
    width: 20px;
    left: 20px;
    top: 11px;
    border-bottom: 4px solid #121212;
    border-top: 4px solid #121212;
}
  .show-menu:after {
    display: block;
    content: "";
    background: #121212;
    position: absolute;
    height: 4px;
    width: 20px;
    left: 20px;
    top: 25px;
}
  .show-menu {
    text-decoration: none;
    color: #121212;
    text-transform: uppercase;
    text-align: left;
	display:block;
    padding: 0 10px 0 50px;
    cursor: pointer;
    position: relative;
    height: 40px;
    line-height: 40px;
}
  #menu ul {padding-bottom:10px; display:none}
  #menu li {display:block; text-align:left;}
  #menu li a {padding:10px 20px}
  
  .banner {padding-bottom:20px; margin:0}
  .product-description {padding-left:20px; padding-right:20px;}

#show-menu[type=checkbox] {display:none}
#show-menu[type=checkbox]:checked ~ ul {display:block !important}
  .description * {white-space:normal !important;}
  
  .logo img {width:50%;}
  .notes {padding-bottom:20px;}
  h1.title {font-size:24px;}
  .info {padding-top:20px;}
  
  .description {padding:20px; margin-bottom:20px;}
  
  .how-to.inside-half, .design-process.inside-half {padding-left:20px; padding-right:20px;}
  
  .how-to ul {font-size:inherit;}
  .how-to li {margin-bottom:10px;}
  
  .prod .image, .product .prod .image span {height:150px;}
  
  .how-to h3, .design-process h3 {font-size:20px; margin-bottom:20px;}
  .widget h3 {font-size:20px;}
  .product {grid-column-gap:20px; grid-row-gap:20px;}
  .product .prod .btn {padding:10px 0;}
  .feedback i {margin:0;}
  
}