* { box-sizing: border-box; }

/*body { font-family: sans-serif; }*/

/*--- grid ---*/

.grid {
  background: #fff;
  position: relative;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-item {
    position: relative;
    float: left;
    width: 100px;
    margin:0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.grid .grid-item:hover .over{opacity: 1;}
.grid .over{position: absolute;top:0;left:0;bottom:auto;right: 0;height: 100%;width:100%;transition: opacity .1s ease-out;opacity: 0;}

.grid .over .caption{position: relative;top:50%;transform: translatey(-50%);text-align: center;width:100%;font-size: 30px;line-height: 35px; font-family: 'Adieu Regular';}
.grid .over .caption u{font-size: 22px;line-height: 25px;text-decoration: none;border-bottom: 2px solid #fff;padding: 0 0 1px 0;letter-spacing: 1px;}
.grid .over .caption .border{display: inline-block;padding: 5px 45px;margin: 20px 10px 0 0;font-size: 20px;line-height: 25px;}
.grid .shop .over .caption{top:40%;}
.grid .over.margin50{height: calc(100% - 100px);width:calc(100% - 100px);}
.grid .over.margin100{height: calc(100% - 200px);width:calc(100% - 200px);}

.page-home .container.primary, .page-shop .container.sub{max-width:100%;width:2400px;padding:0 50px;}


.grid-item--width-100 { width: 100px; }
.grid-item--width-150 { width: 150px; }
.grid-item--width-200 { width: 200px; }
.grid-item--width-250 { width: 250px; }
.grid-item--width-300 { width: 300px; }
.grid-item--width-350 { width: 350px; }
.grid-item--width-400 { width: 400px; }
.grid-item--width-450 { width: 450px; }
.grid-item--width-500 { width: 500px; }
.grid-item--width-550 { width: 550px; }
.grid-item--width-600 { width: 600px; }
.grid-item--width-650 { width: 650px; }
.grid-item--width-700 { width: 700px; }
.grid-item--width-750 { width: 750px; }
.grid-item--width-800 { width: 800px; }
.grid-item--width-850 { width: 850px; }
.grid-item--width-900 { width: 900px; }
.grid-item--width-950 { width: 950px; }
.grid-item--width-1000 { width: 1000px; }
.grid-item--width-1050 { width: 1050px; }
.grid-item--width-1100 { width: 1100px; }
.grid-item--width-1150 { width: 1150px; }
.grid-item--width-1200 { width: 1200px; }

.grid-item--height-100 { height: 100px; }
.grid-item--height-150 { height: 150px; }
.grid-item--height-200 { height: 200px; }
.grid-item--height-250 { height: 250px; }
.grid-item--height-300 { height: 300px; }
.grid-item--height-350 { height: 350px; }
.grid-item--height-400 { height: 400px; }
.grid-item--height-450 { height: 450px; }
.grid-item--height-500 { height: 500px; }
.grid-item--height-550 { height: 550px; }
.grid-item--height-600 { height: 600px; }
.grid-item--height-650 { height: 650px; }
.grid-item--height-700 { height: 700px; }
.grid-item--height-750 { height: 750px; }
.grid-item--height-800 { height: 800px; }
.grid-item--height-850 { height: 850px; }
.grid-item--height-900 { height: 900px; }
.grid-item--height-950 { height: 950px; }
.grid-item--height-1000 { height: 1000px; }
.grid-item--height-1050 { height: 1050px; }
.grid-item--height-1100 { height: 1100px; }
.grid-item--height-1150 { height: 1150px; }
.grid-item--height-1200 { height: 1200px; }



/*
.grid-item--width-100 { width: 10%; }
.grid-item--width-150 { width: 15%; }
.grid-item--width-200 { width: 20%; }
.grid-item--width-250 { width: 25%; }
.grid-item--width-300 { width: 30%; }
.grid-item--width-350 { width: 35%; }
.grid-item--width-400 { width: 40%; }
.grid-item--width-450 { width: 45%; }
.grid-item--width-500 { width: 50%; }
.grid-item--width-550 { width: 55%; }
.grid-item--width-600 { width: 60%; }
.grid-item--width-650 { width: 65%; }
.grid-item--width-700 { width: 70%; }
.grid-item--width-750 { width: 75%; }
.grid-item--width-800 { width: 80%; }
.grid-item--width-850 { width: 85%; }
.grid-item--width-900 { width: 90%; }
.grid-item--width-950 { width: 95%; }
.grid-item--width-900 { width: 100%; }
.grid-item--width-1050 { width: 100%; }
.grid-item--width-1100 { width: 100%; }
.grid-item--width-1150 { width: 100%; }
.grid-item--width-1200 { width: 100%; }

.grid-item--height-100 { height: 100px; }
.grid-item--height-150 { height: 150px; }
.grid-item--height-200 { height: 200px; }
.grid-item--height-250 { height: 250px; }
.grid-item--height-300 { height: 300px; }
.grid-item--height-350 { height: 350px; }
.grid-item--height-400 { height: 400px; }
.grid-item--height-450 { height: 450px; }
.grid-item--height-500 { height: 500px; }
.grid-item--height-550 { height: 550px; }
.grid-item--height-600 { height: 600px; }
.grid-item--height-650 { height: 650px; }
.grid-item--height-700 { height: 700px; }
.grid-item--height-750 { height: 750px; }
.grid-item--height-800 { height: 800px; }
.grid-item--height-850 { height: 850px; }
.grid-item--height-900 { height: 900px; }
.grid-item--height-950 { height: 950px; }
.grid-item--height-900 { height: 1000px; }
.grid-item--height-1050 { height: 1050px; }
.grid-item--height-1100 { height: 1100px; }
.grid-item--height-1150 { height: 1150px; }
.grid-item--height-1200 { height: 1200px; }
*/

@media screen and (max-width : 2300px){    
    .page-home .container.primary, .page-selected.var1 .container.sub, .page-shop .container.sub{max-width:100%;width:1700px;padding:0 25px;}
    .page-selected.var1 .container.sub{margin: 50px auto;}
}

@media screen and (max-width : 1700px){
    .page-home .container.primary, .page-shop .container.sub{max-width:100%;width:1300px;padding:0 25px;}
}



/*@media only screen and (min-device-width : 767px) and (max-device-width : 1024px) {*/
@media screen and (max-width : 1270px){    

    .page-home .container.primary, .page-shop .container.sub{width:900px;padding:0 25px;}
    
    .grid .over .caption{font-size: 20px;line-height: 25px;top:50%;}
    .grid .shop .over .caption{font-size: 17px;line-height: 21px;top:50%;}
    .grid .over .caption u{font-size: 17px;line-height: 25px;}
    .grid .over.margin50{height: calc(100% - 50px);width:calc(100% - 50px);margin:25px !important;}
    .grid .over.margin100{height: calc(100% - 100px);width:calc(100% - 100px);margin:50px !important;}
    
    .grid-item--width-100 { width: 50px; }
    .grid-item--width-150 { width: 75px; }
    .grid-item--width-200 { width: 100px; }
    .grid-item--width-250 { width: 125px; }
    .grid-item--width-300 { width: 150px; }
    .grid-item--width-350 { width: 175px; }
    .grid-item--width-400 { width: 200px; }
    .grid-item--width-450 { width: 225px; }
    .grid-item--width-500 { width: 250px; }
    .grid-item--width-550 { width: 275px; }
    .grid-item--width-600 { width: 300px; }
    .grid-item--width-650 { width: 325px; }
    .grid-item--width-700 { width: 350px; }
    .grid-item--width-750 { width: 375px; }
    .grid-item--width-800 { width: 400px; }
    .grid-item--width-850 { width: 425px; }
    .grid-item--width-900 { width: 450px; }
    .grid-item--width-950 { width: 475px; }
    .grid-item--width-1000 { width: 500px; }
    .grid-item--width-1050 { width: 525px; }
    .grid-item--width-1100 { width: 550px; }
    .grid-item--width-1150 { width: 575px; }
    .grid-item--width-1200 { width: 600px; }

    .grid-item--height-100 { height: 50px; }
    .grid-item--height-150 { height: 75px; }
    .grid-item--height-200 { height: 100px; }
    .grid-item--height-250 { height: 125px; }
    .grid-item--height-300 { height: 150px; }
    .grid-item--height-350 { height: 175px; }
    .grid-item--height-400 { height: 200px; }
    .grid-item--height-450 { height: 225px; }
    .grid-item--height-500 { height: 250px; }
    .grid-item--height-550 { height: 275px; }
    .grid-item--height-600 { height: 300px; }
    .grid-item--height-650 { height: 325px; }
    .grid-item--height-700 { height: 350px; }
    .grid-item--height-750 { height: 375px; }
    .grid-item--height-800 { height: 400px; }
    .grid-item--height-850 { height: 425px; }
    .grid-item--height-900 { height: 450px; }
    .grid-item--height-950 { height: 475px; }
    .grid-item--height-1000 { height: 500px; }
    .grid-item--height-1050 { height: 525px; }
    .grid-item--height-1100 { height: 550px; }
    .grid-item--height-1150 { height: 575px; }
    .grid-item--height-1200 { height: 600px; }
    
}


/* Landscape ipad */
@media only screen and (min-device-width : 767px) and (max-device-width : 1024px) and (orientation : landscape) {
    .page-home .container.primary, .page-shop .container.sub{width: 900px;}
}

/* Portrait ipad */
@media only screen and (min-device-width : 767px) and (max-device-width : 1024px) and (orientation : portrait) {
    .page-home .container.primary, .page-shop .container.sub{width: 550px;}
}

@media screen and (max-width : 767px){
    
    .page-home .container.primary, .page-shop .container.sub{width:100%;padding: 0 25px;}
    
    .grid .over{display: none;}
    
    .grid-item{margin: 15px 0;}
    .grid-item--width-600 { /*width: 200px;*/ width:100%; }
    .grid-item--width-1000 { /*width: 300px;*/ width:100%; }

    .grid-item--height-600 { height: 250px; }
    .grid-item--height-1000 { height: 250px; }
    
    /*
    .grid-item--width-100 { width: 50px; }
    .grid-item--width-150 { width: 75px; }
    .grid-item--width-200 { width: 100px; }
    .grid-item--width-250 { width: 125px; }
    .grid-item--width-300 { width: 150px; }
    .grid-item--width-350 { width: 175px; }
    .grid-item--width-400 { width: 200px; }
    .grid-item--width-450 { width: 225px; }
    .grid-item--width-500 { width: 250px; }
    .grid-item--width-550 { width: 275px; }
    .grid-item--width-600 { width: 300px; }
    .grid-item--width-650 { width: 325px; }
    .grid-item--width-700 { width: 350px; }
    .grid-item--width-750 { width: 375px; }
    .grid-item--width-800 { width: 400px; }
    .grid-item--width-850 { width: 425px; }
    .grid-item--width-900 { width: 450px; }
    .grid-item--width-950 { width: 475px; }
    .grid-item--width-900 { width: 500px; }
    .grid-item--width-1050 { width: 525px; }
    .grid-item--width-1100 { width: 550px; }
    .grid-item--width-1150 { width: 575px; }
    .grid-item--width-1200 { width: 600px; }

    .grid-item--height-100 { height: 50px; }
    .grid-item--height-150 { height: 75px; }
    .grid-item--height-200 { height: 100px; }
    .grid-item--height-250 { height: 125px; }
    .grid-item--height-300 { height: 150px; }
    .grid-item--height-350 { height: 175px; }
    .grid-item--height-400 { height: 200px; }
    .grid-item--height-450 { height: 225px; }
    .grid-item--height-500 { height: 250px; }
    .grid-item--height-550 { height: 275px; }
    .grid-item--height-600 { height: 300px; }
    .grid-item--height-650 { height: 325px; }
    .grid-item--height-700 { height: 350px; }
    .grid-item--height-750 { height: 375px; }
    .grid-item--height-800 { height: 400px; }
    .grid-item--height-850 { height: 425px; }
    .grid-item--height-900 { height: 450px; }
    .grid-item--height-950 { height: 475px; }
    .grid-item--height-900 { height: 500px; }
    .grid-item--height-1050 { height: 525px; }
    .grid-item--height-1100 { height: 550px; }
    .grid-item--height-1150 { height: 575px; }
    .grid-item--height-1200 { height: 600px; }
    */
}