@charset "UTF-8";
/* CSS Document */





/*---- Hide 1 tile (phone) slider ----*/
#tiles-1 {display: none;}


.wrapper {max-width: 100%; margin: 1em auto; position: relative;}
.slider-wrapper {width: 100%;overflow: hidden;}


/*---- Hide radio buttons ----*/
.wrapper input {display: none;}


.slider-wrapper .inner, .slider-wrapper .inner-1 {
    -webkit-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
    transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
}





/* ============================ */
/* ======= IMPORTANT!!! ======= */
/* ============================ */

/* .................................. */

/*---- MULTIPLY # of slides by 100 to adjust width ----*/
.slider-wrapper .inner {
    width: 300%; 
    line-height: 0;
}


/*---- MULTIPLY # of slides by 100 to adjust width ----*/
.slider-wrapper .inner-1 {
    width: 1200%!important; 
    line-height: 0;
}
/* .................................. */






/* ============================ */
/* ======= IMPORTANT!!! ======= */
/* ============================ */

/* .................................. */
/*---- DIVIDE 100 by # of slides to adjust width ----*/
.wrapper article {
    width: 33.33333333%;
    float: left;
    position: relative;
}

/*---- DIVIDE 100 by # of slides to adjust width ----*/
.inner-1 article {
    width: 8.33333333%;
    float: left;
    position: relative;
}


/* Limits displayed image dimensions */    
.wrapper article img {
    max-width:150px;
    max-height:150px;
    width: auto;
    height: auto;
}
/* .................................. */





.product-wrapper {
    width:100%;
    margin:auto;
    text-align: center;
}





/* ============================ */
/* ======= IMPORTANT!!! ======= */
/* ============================ */

/* .................................. */

/* Product blocks - ADJUST FOR CONTENT HEIGHT */    
.product {
    position: relative; /* Need this to align CTA to bottom */
    width:16%;
    height:300px;
    display:inline-block;
    text-align:center;
    margin:0 19px 40px 19px;
    vertical-align: top;
}


/* Description */
.info {
    opacity: 0;
    line-height: 20px;
    position: absolute;
    left: 0;
    top: 150px; 
    width: 100%; 
    text-align: left;    
    -webkit-transition: all 1000ms ease-out 600ms;
    -moz-transition: all 1000ms ease-out 600ms;
    transition: all 1000ms ease-out 600ms;
}


/* CTA */    
.CTA-slider {
    font-size: 17px;
    width: 100%; 
    text-align: center;
}
/* .................................. */




/*---- 768 ----*/
@media only screen and (max-width: 768px) {
    .info {top: 105px; font-size: 12px; line-height: 18px;}
    .product {height: 270px}
    .wrapper article img {max-width: 114px;max-height: 114px;}
    .product-wrapper {width:99%;}
    .top-40{margin-top: 30px!important;}
}




/*---- 650 ----*/
@media only screen and (max-width: 650px) {
    .info {top: 95px;}
    .product {height: 264px}
    .wrapper article img {max-width: 100px;max-height: 100px;}
    .product-wrapper {width:96%;}
    .top-40{margin-top: 20px!important;}
    .CTA-slider {font-size: 16px;}
}



/*---- 600 ----*/
@media only screen and (max-width: 600px) {
    #tiles-4 {display: none;}
    #tiles-1 {display: block;}    
    .info {font-size: 14px; line-height: 20px; top: 150px;}    
    .product {width: 70%; height:250px;}
    .wrapper article img {max-width:150px!important;max-height:150px!important;}
    .CTA-slider {font-size: 17px;}
    .info {text-align: center;}
}




/*---- 400 ----*/
@media only screen and (max-width: 400px) { 
    .info {font-size: 12px; line-height: 18px; top: 140px;}    
    .product {width: 60%; height:260px;}
    .wrapper article img {max-width:140px!important;max-height:140px!important;}
}



/*---- 360 ----*/
@media only screen and (max-width: 360px) { 
    .info {font-size: 12px; line-height: 18px; top: 140px;}    
    .product {width: 60%; height:270px;} 
}





/* ======================================== */
/*---- BUTTON / NAV controls & settings ----*/
/* ======================================== */

/* .................................. */
/* Button positioning */
.slider-prev-next-control {
    height: 50px;
    position: absolute;
    top: 50%;
    width: 100%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}


/* Button display characteristics */
.slider-prev-next-control label {
    display: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #D0D0CE;
    cursor: pointer;
}


/* Buttons on hover */
.slider-prev-next-control label:hover {background: #006272;}
/* .................................. */



/* .................................. */
/* Navigation positioning */
.slider-dot-control {
    position: absolute;
    width: 100%;
    bottom: 0;
    text-align: center;
}


/* Navigation display characteristics */
.slider-dot-control label {
    cursor: pointer;
    border-radius: 5px;
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #e1e1e1;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
}


/* Navigation on hover */
.slider-dot-control label:hover {
    background: #999;
    border-color: #777;
}
/* .................................. */






/* ============================================ */
/* ============================================ */
/* ============================================ */
/* ============================================ */
/* ============================================ */
/* ============================================ */
/*---- PREVIOUS / NEXT button establishment ----*/
/* ============================================ */



/*---- ========== ----*/
/*---- ============ ----*/
/*---- ============== ----*/
/*---- FOUR tile slides ----*/
/*---- ================== ----*/


/* *********************************************************************************** */
/* FONTSET FOR FORWARD/BACK BUTTONS */

/* .................................. */
/* Next (slide +1) */
#slide1:checked ~ .slider-prev-next-control label:nth-child(2)::after, 
#slide2:checked ~ .slider-prev-next-control label:nth-child(3)::after,

/* Final slide back to first */
#slide3:checked ~ .slider-prev-next-control label:nth-child(1)::after,
/* .................................. */


/* .................................. */
/* Previous (slide -1) */
#slide2:checked ~ .slider-prev-next-control label:nth-child(1)::after,  
#slide3:checked ~ .slider-prev-next-control label:nth-child(2)::after,  

/* First slide to final slide */
#slide1:checked ~ .slider-prev-next-control label:nth-child(3)::after
/* .................................. */


/* Fontset */
{   font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    margin: 0;
    line-height: 38px;
    font-size: 3em;
    display: block;
    color: #fff;
} 
/* END FONTSET FOR PREVIOUS/NEXT BUTTONS */
/* /* *********************************************************************************** */




/* *********************************************************************************** */
/* CHARACTER / SYMBOL / ICON */

/* .................................. */
/* Next (slide +1) */
#slide1:checked ~ .slider-prev-next-control label:nth-child(2)::after, 
#slide2:checked ~ .slider-prev-next-control label:nth-child(3)::after, 

/* Final slide back to first */
#slide3:checked ~ .slider-prev-next-control label:nth-child(1)::after

/* Set icon */
{content: "\f105"; padding-left: 15px;}
/* .................................. */


/* .................................. */
/* Previous (slide -1) */
#slide2:checked ~ .slider-prev-next-control label:nth-child(1)::after, 
#slide3:checked ~ .slider-prev-next-control label:nth-child(2)::after, 

/* First slide to final slide */
#slide1:checked ~ .slider-prev-next-control label:nth-child(3)::after 


/* Set icon */
{content: "\f104"; padding-left: 8px;}
/* .................................. */

/* END CHARACTER / SYMBOL / ICON */
/* *********************************************************************************** */




/* *********************************************************************************** */
/* BUTTONS */

/* .................................. */
/* Next (slide +1) */
#slide1:checked ~ .slider-prev-next-control label:nth-child(2), 
#slide2:checked ~ .slider-prev-next-control label:nth-child(3), 

/* Final slide back to first */
#slide3:checked ~ .slider-prev-next-control label:nth-child(1)

/* Set button */
{display: block; float: right; margin-right: 5px;}
/* .................................. */


/* .................................. */
/* Previous (slide -1) */
#slide2:checked ~ .slider-prev-next-control label:nth-child(1),
#slide3:checked ~ .slider-prev-next-control label:nth-child(2), 

/* First slide to final slide */
#slide1:checked ~ .slider-prev-next-control label:nth-child(3) 

/* Set button */
{display: block; float: left; margin-left: 5px;}
/* .................................. */

/* END BUTTONS */
/* *********************************************************************************** */




/* *********************************************************************************** */
/* NAVIGATION (dots) */

/* .................................. */
/* Current slide */
#slide1:checked ~ .slider-dot-control label:nth-child(1),
#slide2:checked ~ .slider-dot-control label:nth-child(2), 
#slide3:checked ~ .slider-dot-control label:nth-child(3)


{background: #333;}
/* .................................. */


/* .................................. */
/* Current slide calls/sets info transition (fade-in) */
#slide1:checked ~ .slider-wrapper article:nth-child(1) .info, 
#slide2:checked ~ .slider-wrapper article:nth-child(2) .info,
#slide3:checked ~ .slider-wrapper article:nth-child(3) .info 


{opacity: 1;}
/* .................................. */


/* .................................. */
/* Slide distance to scroll (-100% increments) */
#slide1:checked ~ .slider-wrapper .inner {margin-left: 0%;}
#slide2:checked ~ .slider-wrapper .inner {margin-left: -100%;}
#slide3:checked ~ .slider-wrapper .inner {margin-left: -200%;}



/* .................................. */


/* END NAVIGATION (dots) */
/* *********************************************************************************** */


/*---- ====================== ----*/
/*---- END FOUR tile slides ----*/
/*---- ================== ----*/
/*---- ================ ----*/
/*---- ============== ----*/












/*---- ========= ----*/
/*---- =========== ----*/
/*---- ============= ----*/
/*---- ONE tile slides ----*/
/*---- ================= ----*/



/* *********************************************************************************** */
/* FONTSET FOR FORWARD/BACK BUTTONS */

/* .................................. */
/* Next (slide +1) */
#slide1-1:checked ~ .slider-prev-next-control label:nth-child(2)::after, 
#slide2-1:checked ~ .slider-prev-next-control label:nth-child(3)::after, 
#slide3-1:checked ~ .slider-prev-next-control label:nth-child(4)::after, 
#slide4-1:checked ~ .slider-prev-next-control label:nth-child(5)::after, 
#slide5-1:checked ~ .slider-prev-next-control label:nth-child(6)::after,
#slide6-1:checked ~ .slider-prev-next-control label:nth-child(7)::after,
#slide7-1:checked ~ .slider-prev-next-control label:nth-child(8)::after,
#slide8-1:checked ~ .slider-prev-next-control label:nth-child(9)::after,
#slide9-1:checked ~ .slider-prev-next-control label:nth-child(10)::after,
#slide10-1:checked ~ .slider-prev-next-control label:nth-child(11)::after,
#slide11-1:checked ~ .slider-prev-next-control label:nth-child(12)::after,


/* Final slide back to first */
#slide12-1:checked ~ .slider-prev-next-control label:nth-child(1)::after,
/* .................................. */


/* .................................. */
/* Previous (slide -1) */
#slide2-1:checked ~ .slider-prev-next-control label:nth-child(1)::after, 
#slide3-1:checked ~ .slider-prev-next-control label:nth-child(2)::after, 
#slide4-1:checked ~ .slider-prev-next-control label:nth-child(3)::after, 
#slide5-1:checked ~ .slider-prev-next-control label:nth-child(4)::after, 
#slide6-1:checked ~ .slider-prev-next-control label:nth-child(5)::after,
#slide7-1:checked ~ .slider-prev-next-control label:nth-child(6)::after,
#slide8-1:checked ~ .slider-prev-next-control label:nth-child(7)::after, 
#slide9-1:checked ~ .slider-prev-next-control label:nth-child(8)::after,
#slide10-1:checked ~ .slider-prev-next-control label:nth-child(9)::after,
#slide11-1:checked ~ .slider-prev-next-control label:nth-child(10)::after,
#slide12-1:checked ~ .slider-prev-next-control label:nth-child(11)::after,


/* First slide to final slide */
#slide1-1:checked ~ .slider-prev-next-control label:nth-child(12)::after
/* .................................. */


/* Fontset */
{   font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    margin: 0;
    line-height: 38px;
    font-size: 3em;
    display: block;
    color: #fff;
} 
/* END FONTSET FOR PREVIOUS/NEXT BUTTONS */
/* /* *********************************************************************************** */




/* *********************************************************************************** */
/* CHARACTER / SYMBOL / ICON */

/* .................................. */
/* Next (slide +1) */
#slide1-1:checked ~ .slider-prev-next-control label:nth-child(2)::after, 
#slide2-1:checked ~ .slider-prev-next-control label:nth-child(3)::after, 
#slide3-1:checked ~ .slider-prev-next-control label:nth-child(4)::after, 
#slide4-1:checked ~ .slider-prev-next-control label:nth-child(5)::after, 
#slide5-1:checked ~ .slider-prev-next-control label:nth-child(6)::after,
#slide6-1:checked ~ .slider-prev-next-control label:nth-child(7)::after,
#slide7-1:checked ~ .slider-prev-next-control label:nth-child(8)::after, 
#slide8-1:checked ~ .slider-prev-next-control label:nth-child(9)::after, 
#slide9-1:checked ~ .slider-prev-next-control label:nth-child(10)::after, 
#slide10-1:checked ~ .slider-prev-next-control label:nth-child(11)::after, 
#slide11-1:checked ~ .slider-prev-next-control label:nth-child(12)::after, 


/* Final slide back to first */
#slide12-1:checked ~ .slider-prev-next-control label:nth-child(1)::after

/* Set icon */
{content: "\f105"; padding-left: 15px;}
/* .................................. */


/* .................................. */
/* Previous (slide -1) */
#slide2-1:checked ~ .slider-prev-next-control label:nth-child(1)::after, 
#slide3-1:checked ~ .slider-prev-next-control label:nth-child(2)::after, 
#slide4-1:checked ~ .slider-prev-next-control label:nth-child(3)::after, 
#slide5-1:checked ~ .slider-prev-next-control label:nth-child(4)::after,
#slide6-1:checked ~ .slider-prev-next-control label:nth-child(5)::after,
#slide7-1:checked ~ .slider-prev-next-control label:nth-child(6)::after,
#slide8-1:checked ~ .slider-prev-next-control label:nth-child(7)::after, 
#slide9-1:checked ~ .slider-prev-next-control label:nth-child(8)::after, 
#slide10-1:checked ~ .slider-prev-next-control label:nth-child(9)::after, 
#slide11-1:checked ~ .slider-prev-next-control label:nth-child(10)::after, 
#slide12-1:checked ~ .slider-prev-next-control label:nth-child(11)::after, 
 

/* First slide to final slide */
#slide1-1:checked ~ .slider-prev-next-control label:nth-child(12)::after 


/* Set icon */
{content: "\f104"; padding-left: 8px;}
/* .................................. */

/* END CHARACTER / SYMBOL / ICON */
/* *********************************************************************************** */




/* *********************************************************************************** */
/* BUTTONS */

/* .................................. */
/* Next (slide +1) */
#slide1-1:checked ~ .slider-prev-next-control label:nth-child(2), 
#slide2-1:checked ~ .slider-prev-next-control label:nth-child(3), 
#slide3-1:checked ~ .slider-prev-next-control label:nth-child(4), 
#slide4-1:checked ~ .slider-prev-next-control label:nth-child(5), 
#slide5-1:checked ~ .slider-prev-next-control label:nth-child(6),
#slide6-1:checked ~ .slider-prev-next-control label:nth-child(7),
#slide7-1:checked ~ .slider-prev-next-control label:nth-child(8),
#slide8-1:checked ~ .slider-prev-next-control label:nth-child(9),
#slide9-1:checked ~ .slider-prev-next-control label:nth-child(10),
#slide10-1:checked ~ .slider-prev-next-control label:nth-child(11),
#slide11-1:checked ~ .slider-prev-next-control label:nth-child(12),


/* Final slide back to first */
#slide12-1:checked ~ .slider-prev-next-control label:nth-child(1)

/* Set button */
{display: block; float: right; margin-right: 5px;}
/* .................................. */


/* .................................. */
/* Previous (slide -1) */
#slide2-1:checked ~ .slider-prev-next-control label:nth-child(1), 
#slide3-1:checked ~ .slider-prev-next-control label:nth-child(2), 
#slide4-1:checked ~ .slider-prev-next-control label:nth-child(3), 
#slide5-1:checked ~ .slider-prev-next-control label:nth-child(4),
#slide6-1:checked ~ .slider-prev-next-control label:nth-child(5),
#slide7-1:checked ~ .slider-prev-next-control label:nth-child(6),
#slide8-1:checked ~ .slider-prev-next-control label:nth-child(7), 
#slide9-1:checked ~ .slider-prev-next-control label:nth-child(8), 
#slide10-1:checked ~ .slider-prev-next-control label:nth-child(9), 
#slide11-1:checked ~ .slider-prev-next-control label:nth-child(10), 
#slide12-1:checked ~ .slider-prev-next-control label:nth-child(11), 


/* First slide to final slide */
#slide1-1:checked ~ .slider-prev-next-control label:nth-child(12) 

/* Set button */
{display: block; float: left; margin-left: 5px;}
/* .................................. */

/* END BUTTONS */
/* *********************************************************************************** */




/* *********************************************************************************** */
/* NAVIGATION (dots) */

/* .................................. */
/* Current slide */
#slide1-1:checked ~ .slider-dot-control label:nth-child(1), 
#slide2-1:checked ~ .slider-dot-control label:nth-child(2), 
#slide3-1:checked ~ .slider-dot-control label:nth-child(3), 
#slide4-1:checked ~ .slider-dot-control label:nth-child(4), 
#slide5-1:checked ~ .slider-dot-control label:nth-child(5),
#slide6-1:checked ~ .slider-dot-control label:nth-child(6),
#slide7-1:checked ~ .slider-dot-control label:nth-child(7),
#slide8-1:checked ~ .slider-dot-control label:nth-child(8),
#slide9-1:checked ~ .slider-dot-control label:nth-child(9),
#slide10-1:checked ~ .slider-dot-control label:nth-child(10),
#slide11-1:checked ~ .slider-dot-control label:nth-child(11),
#slide12-1:checked ~ .slider-dot-control label:nth-child(12)


{background: #333;}
/* .................................. */


/* .................................. */
/* Current slide calls/sets info transition (fade-in) */
#slide1-1:checked ~ .slider-wrapper article:nth-child(1) .info, 
#slide2-1:checked ~ .slider-wrapper article:nth-child(2) .info, 
#slide3-1:checked ~ .slider-wrapper article:nth-child(3) .info, 
#slide4-1:checked ~ .slider-wrapper article:nth-child(4) .info, 
#slide5-1:checked ~ .slider-wrapper article:nth-child(5) .info,
#slide6-1:checked ~ .slider-wrapper article:nth-child(6) .info,
#slide7-1:checked ~ .slider-wrapper article:nth-child(7) .info,
#slide8-1:checked ~ .slider-wrapper article:nth-child(8) .info,
#slide9-1:checked ~ .slider-wrapper article:nth-child(9) .info,
#slide10-1:checked ~ .slider-wrapper article:nth-child(10) .info, 
#slide11-1:checked ~ .slider-wrapper article:nth-child(11) .info,
#slide12-1:checked ~ .slider-wrapper article:nth-child(12) .info 


{opacity: 1;}
/* .................................. */


/* .................................. */
/* Slide distance to scroll (-100% increments) */
#slide1-1:checked ~ .slider-wrapper .inner-1 {margin-left: 0%;}
#slide2-1:checked ~ .slider-wrapper .inner-1 {margin-left: -100%;}
#slide3-1:checked ~ .slider-wrapper .inner-1 {margin-left: -200%;}
#slide4-1:checked ~ .slider-wrapper .inner-1 {margin-left: -300%;}
#slide5-1:checked ~ .slider-wrapper .inner-1 {margin-left: -400%;}
#slide6-1:checked ~ .slider-wrapper .inner-1 {margin-left: -500%;}
#slide7-1:checked ~ .slider-wrapper .inner-1 {margin-left: -600%;}
#slide8-1:checked ~ .slider-wrapper .inner-1 {margin-left: -700%;}
#slide9-1:checked ~ .slider-wrapper .inner-1 {margin-left: -800%;}
#slide10-1:checked ~ .slider-wrapper .inner-1 {margin-left: -900%;}
#slide11-1:checked ~ .slider-wrapper .inner-1 {margin-left: -1000%;}
#slide12-1:checked ~ .slider-wrapper .inner-1 {margin-left: -1100%;}

/* .................................. */


/* END NAVIGATION (dots) */
/* *********************************************************************************** */





/*---- ===================== ----*/
/*---- END ONE tile slides ----*/
/*---- ================= ----*/
/*---- =============== ----*/
/*---- ============= ----*/




/* ================================================ */
/*---- END PREVIOUS / NEXT button establishment ----*/
/* ================================================ */
/* ================================================ */
/* ================================================ */
/* ================================================ */
/* ================================================ */
/* ================================================ */