/* productBannerTop */
#productBannerTop .crow {padding:0;}
#productBannerTop img {width:100%;}


/*portugeseCementBox*/
#portugeseCementBox {}
#portugeseCementBox .crow {background:#dfe2e3; padding:0; position:relative; height:0; transition:all 300ms ease;}
#portugeseCementBox p {height:0; overflow-y:hidden; text-align:center; width:680px; margin:0 auto; transition:all 300ms ease;}
#portugeseCementBox.expanded .crow {padding:30px; height:160px;}
#portugeseCementBox.expanded p {height:100px;}


/* 
#portugeseCementBox .crow {background:#dfe2e3;}
#portugeseCementBox p {text-align:center; margin:0; height:65px; overflow-y:hidden; transition:all 300ms ease;}
#portugeseCementBox.active p {height:150px;} 
*/
#portugeseCementBox .bottomLink:hover {text-decoration:none !important;}
#portugeseCementBox .bottomLink {background:#dfe2e3; width:106px; height:30px; line-height:26px; padding:0; padding-left:8px; position:absolute; top:-30px; z-index:1; right:15px; }
#portugeseCementBox .bottomLink {margin-top:0;}
#portugeseCementBox .bottomLink i {transform: scale(.45, 1) translate(-20px, 5px); font-size:1.2em;}
#selectorBox .ccol.n4 .bottomLink i, #selectorBoxMini .bottomLink i {transform: scale(.45, 1) translate(-20px, 2px); font-size:1.2em;}






/*#selectorMainBox*/
/* #selectorMainBox.fixed {position:fixed; top:150px; width:100%;} */
#selectorMainBox.fixed {position:fixed; top:150px; width:100%;}
#selectorMainBox.fixed .subContentBox {margin:0 auto;}

#selectorMainBox.fixed #selectorBoxMini .crow {border:solid 1px #7A8891; box-sizing:content-box}



/*selectorBoxMini*/
#selectorBoxMini {display: none;}
#selectorBoxMini .crow {height:40px; background:#7a8891; color:white; position:relative;}
#selectorBoxMini .ccol {float:left; padding:0 20px; border-right:solid 1px #6c7982; height:40px; padding-top:2px;}
#selectorBoxMini h5 {font-weight:300; display: inline-block; vertical-align:top;}
#selectorBoxMini .icon {display:inline-block; width:20px; height:20px; margin-top:8px; margin-left:15px; background-position:left top; background-repeat:no-repeat; background-size:cover;}
#selectorBoxMini .ccol.n2 span {display:inline-block;  margin-top:8px; margin-left:15px;}
#selectorBoxMini .bottomLink {position:absolute; right:10px; top:0; padding:0; color:white;}
#selectorBoxMini .activeColorBlock {display:inline-block; width:20px; height:20px; margin-top:8px; border:solid 1px #455159; margin-left:15px; background:#00b9ee;}
#selectorMainBox {z-index:1;}

/*selectorBox*/
/* #selectorBox {background:#7a8891;} */
#selectorBox .crow {height:180px; background:#7a8891;}
#selectorBox .ccol {height:180px; width:25%; float:left; padding-top:30px;}
#selectorBox .ccol h5 {color:#e7eaeb; margin:0; margin-bottom:20px; font-weight:300}
#selectorBox .ccol.n1, #selectorBox .ccol.n4 {padding-left:10px;}
#selectorBox .ccol.n1, #selectorBox .ccol.n3 {border:solid 1px #6c7982; border-top:0; border-bottom:0;}
#selectorBox .ccol.n4 {border-right:solid 1px #6c7982}

#selectorBox ul {padding:0;}
#selectorBox ul li {float:left; list-style:none;}
#selectorBox li a {color:#e7eaeb;}
.horiList li a {display:block; width:50px; position:relative;}
.horiList li a img {display:block; clear:both; width:38px; height:38px; margin:0 auto 15px;}
.horiList li a figure {width:28px; height:52px; position:absolute; left:50%; margin-left:-14px; margin-top:-20px; background:#697780; z-index:0; opacity:0; transition:all 300ms ease; z-index:1;}
.horiList li a figure small {display:block; position:absolute; width:80px; height:28px; left:50%; margin-left:-40px; bottom:0; text-align:center; line-height:28px; background:#697780; color:white;}
.horiList li a:hover figure {display:block; opacity:1;}

#selectorBox .ccol li .square {display:block; background:#e7eaeb; width:12px; height:12px; border:solid 1px #455159; margin:0 auto; z-index:1; position:relative; z-index:2;}
#selectorBox .ccol li.active .square {background:#2e383e;}

#selectorBox .ccol.n2, #selectorBox .ccol.n3 {padding-left:30px;}
#selectorBox .ccol.n2 h5 {margin-bottom:10px;}
#selectorBox .ccol.n2 li {margin-right:30px; margin-bottom:5px;}
#selectorBox .ccol.n2 li a {vertical-align:middle;}
#selectorBox .ccol.n2 li .square {display:inline-block; margin-right:20px;}
#selectorBox .ccol.n2 li:hover .square {background:#2e383e;}

#selectorBox .ccol.n3 ul {padding-left:30px;}

#selectorBox .ccol.n4 {position:relative;}
#selectorBox .colorActive {display:block; background:#697780; width:38px; height:38px; position:absolute; top:18px; left:60px; z-index:1;}
#selectorBox.pop .colorActive {width:65px;}
#selectorBox .colorActive small {width:22px; height:22px; display:block; border:solid 1px #5b676f; position:absolute; top:8px; left:8px;}
#selectorBox .colorActive .close {position:absolute; top:10px; right:8px; display:block; text-shadow:none; font-size:1.4em; display:none; color:#333; opacity:1;}
#selectorBox.pop .colorActive .close {display:block;}
#selectorBox .colorBox {height:68px; overflow-y:hidden; padding:10px; position:absolute; width:276px; left:0; background:#7a8891; top:56px; z-index:100;}
#selectorBox .colorBox ul {margin:0;}
#selectorBox .colorBox li {margin-right:7px; margin-bottom:8px;}
#selectorBox .colorBox li:nth-child(9n) {margin-right:0;}
#selectorBox .colorBox li a {display:block; width:22px; height:22px; border:solid 1px #5b676f;}
/* #selectorBox .colorBox li.active a */
#selectorBox .colorBox li:hover a {border-width:4px; border-color:#333;}
#selectorBox .ccol.n4 .bottomLink.down {color:#e7eaeb; padding:0; bottom:30px; position:absolute; width:100%; text-align:center;}
#selectorBox.pop .bottomLink {display:none;}
#selectorBox.pop .colorBox {height:auto;}
#selectorBox .colorSearchBox {position:relative;}
#selectorBox .colorSearchBox .searchSpot {position:absolute; right:5px; top:2px;width:30px; text-align:center;}
#selectorBox .colorSearchBox input {border:0; padding:5px 10px 7px; font-style:italic; width:100%; background:#E7EAEB;}


/*tilePaginationBox*/
.tilePaginationBox.n1 {margin-top:20px;}
.tilePaginationBox.n1 ul {margin:0;}



/*tileDesignBox*/
#tileDesignBox {margin-top:20px;}

#tileDesignBox .crow, .tilePaginationBox .crow {width:1132px;}
#tileDesignBox .grid {max-width:1132px;}
/* #tileDesignBox .ccol {width:260px; float:left; margin-right:20px; margin-bottom:20px;} */
#tileDesignBox .ccol {width:268px; float:left; height:335px; margin-bottom:20px;}

#tileDesignBox .ccol:nth-child(4n) {margin-right:0;}
#tileDesignBox .ccol figure {margin-bottom:5px;}
#tileDesignBox .ccol img {width:100%;}
#tileDesignBox .ccol .x4 {width:268px; height:268px; display:none;}
#tileDesignBox .ccol .x4 img {width:134px; float:left;}
#tileDesignBox .ccol:hover .x4 {display:block;}
#tileDesignBox .ccol:hover .single {display:none;}

#tileDesignBox .ccol .text {background:#e7eaeb; padding:10px 12px; color:#7d8184; position:relative;}
#tileDesignBox .ccol .text .title, #tileDesignBox .ccol .text p {margin:0;}
#tileDesignBox .ccol .text .title {margin-bottom:5px;}
#tileDesignBox .ccol .text i {display:inline-block; display:none; position:absolute; top:22px; right:15px; font-size:1em; transform: scale(1.4, 0.5);  height:16px; vertical-align:top;}
#tileDesignBox .ccol:hover .text i {display:block;}

/* #tileDesignBox .ccol.x2 {width:540px; margin-right:0; height:325px; background:#ccc; position:relative;} */
#tileDesignBox .ccol.x2 {width:556px; height:334px; background:#ccc; position:relative;}
#tileDesignBox .ccol.x2 a {color:#f5f5f5; position:absolute; padding:20px; width:100%;}
#tileDesignBox .ccol.x2 a i {margin-left:10px; font-size:1em; transform: scale(1.1, 0.5); display:inline-block; height:16px; vertical-align:top; margin-top:2px;}
#tileDesignBox .ccol.x2 a:hover span {text-decoration:underline;}





/*paginationBox*/
.tilePaginationBox {margin-bottom:60px;}
.tilePaginationBox .crow {position:relative;}
.tilePaginationBox ul {padding:0; background:#e7eaeb; padding:10px 12px; display:inline-block; float:right; margin-right:4px; margin-bottom:30px;}
.tilePaginationBox ul li {float:left; list-style:none; margin-right:9px;}
.tilePaginationBox ul li:last-child {margin-right:0;}
.tilePaginationBox li a {width:26px; height:26px; line-height:24px; display:inline-block; text-align:center; font-weight:700;}
.tilePaginationBox li.active a, .tilePaginationBox li:hover a {background:#455159; color:white;}

#topReturnBtnBox {position:fixed; z-index:500; width:1130px; bottom:0; left:50%; margin-left:-565px;}
#topReturnBtn {width:46px; height:45px; bottom:-36px; z-index:1000; cursor:pointer; transition:all 300ms ease; display:block; position:absolute; right:-50px;}
#topReturnBtn.active {bottom:0;}
#topReturnBtn .arrow {width:46px; height:46px; background:url(../img/icon-top-return.png) no-repeat left top; position:absolute; z-index:1;}
#topReturnBtn .textBox, .tilePaginationBox .textBox {position:absolute;top:-26px;background:#7a8891;color:white;width:130px;height:35px;line-height:32px;left:50%;margin-left:-65px;text-align:center;z-index: 0; /*border:solid 1px #445159;*/}
#topReturnBtn:hover .textBox, .tilePaginationBox .textBox:hover {background:#445159;}
#topReturnBtn:hover .arrow {background-image:url(../img/icon-top-return-hover.png);}

/* #topReturnBtnBox.isNogDetached #topReturnBtn:hover .arrow {background-image:url(../img/icon-top-return-hover-02.png)} */

.tilePaginationBox .textBox {display:none; left:initial; top:initial; margin:0; right:0; bottom:-20px;}
.tilePaginationBox .textBox:after {bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(122, 136, 145, 0); border-bottom-color: #7a8891; border-width: 8px; margin-left: -8px; }
.tilePaginationBox .textBox:hover:after {border-bottom-color: #445159;}





/* Media Queries */
@media(max-width:1199px) {
    .horiList li {margin-right:15px;}
    .horiList li a {width:30px;}
    .horiList li a img {width:100%; height:30px;}
    
    /* #selectorBox .crow {border:solid 1px red;} */
    #selectorBox .ccol.n2, #selectorBox .ccol.n3 {padding-left:25px;}
    #selectorBox .ccol.n2 li {margin-right:20px;}
    #selectorBox .ccol.n2 li .square {margin-right:12px;}

    #selectorBox .colorBox {width:216px;}
    #selectorBox .colorBox li:nth-child(9n) {margin-right:7px;}
    #selectorBox .colorBox li:nth-child(7n) {margin-right:0;}


    /*#tileDesignBox .crow {border:solid 1px red; width:824px;}*/
    #tileDesignBox .crow, .tilePaginationBox .crow {width:846px;}
    
    #topReturnBtnBox {width:960px; margin-left:-480px;}
    #topReturnBtn {right:40px;}


}


@media(max-width:991px) {
    /*     
    #portugeseCementBox p br {display:none;}
    #portugeseCementBox.active p {height:170px;} 
    */

    #tileDesignBox .crow, .tilePaginationBox .crow {width:560px;}

    #selectorBox .crow {width:580px;}
    #selectorBox .crow, #selectorBox .ccol {height:320px;}
    #selectorBox .ccol.n2, #selectorBox .ccol.n3 {padding-left:10px;}
    #selectorBox .ccol.n3 ul {padding-left:0;}
    .horiList li {margin-bottom:20px;}
    #selectorBox .colorBox {width:130px;}
    #selectorBox .colorBox li:nth-child(9n), #selectorBox .colorBox li:nth-child(7n) {margin-right:7px;}
    #selectorBox .colorBox li:nth-child(4n) {margin-right:0;}
    #selectorBox.pop .colorBox {width:160px;}
    #selectorBox.pop .colorBox li:nth-child(4n) {margin-right:7px;}
    #selectorBox.pop .colorBox li:nth-child(5n) {margin-right:0;}
    #selectorBox .ccol.n4 .bottomLink.down {margin-left:-10px; bottom:initial; bottom:auto; top:120px;}
    /*#selectorMainBox.fixed {position:static; top:initial;}*/
    /*#selectorMainBox.fixed {top:140px}*/
    /*#selectorMainBox.fixed {top:174px}*/
    #selectorMainBox.fixed {top:150px}



    #topReturnBtnBox {width:840px; margin-left:-420px;}


}


@media (max-width:860px) {
    #portugeseCementBox p {width:auto;}

    #topReturnBtnBox {width:700px; margin-left:-350px;}
    
}


@media(max-width:767px) {
    /* #portugeseCementBox.active p {height:210px;} */
    #topReturnBtnBox {width:580px; margin-left:-290px;}
    #selectorBoxMini .ccol.n1, #selectorBoxMini .ccol.n2, #selectorBoxMini .ccol.n3, #selectorBoxMini .ccol.n4 {display: none;}

    #portugeseCementBox.expanded .crow {height:180px;}
    #portugeseCementBox.expanded p {height:120px;}


}


@media(max-width:620px) {
/*     #portugeseCementBox p {height:90px;}
    #portugeseCementBox.active p {height:250px;} */

    #selectorBox .crow, .tilePaginationBox .crow {width:auto;}
    .horiList li {margin-right:15px;}
    #selectorBox .ccol.n1, #selectorBox .ccol.n2, #selectorBox .ccol.n3, #selectorBox .ccol.n4 {float:none; width:100%; height:auto; padding:20px; border:0; border-bottom:solid 1px #6c7982;}
    #selectorBox .crow, #selectorBox .ccol {height:auto;}
    #selectorBox .ccol.n4 {height:200px; border-bottom:0;}
    #selectorBox .colorBox, #selectorBox.pop .colorBox{left:10px; width:260px;}
    #selectorBox .ccol.n4 .bottomLink.down {text-align:left; margin-left:0;}
    #selectorBox .colorBox li:nth-child(9n), #selectorBox .colorBox li:nth-child(7n), #selectorBox .colorBox li:nth-child(4n), #selectorBox.pop .colorBox li:nth-child(5n) {margin-right:7px;}

    #selectorMainBox.fixed {top:182px}

    #tileDesignBox .crow {width:270px;}
    #tileDesignBox .ccol.x2 {width:100%;}

    .tilePaginationBox {text-align:center;}
    .tilePaginationBox ul {float:none;}

    #topReturnBtnBox {left:auto; left:initial; margin-left:auto; width:100%;}

    #portugeseCementBox.expanded .crow {height:220px;}
    #portugeseCementBox.expanded p {height:160px;}




    
}


@media(max-width:480px) {
/*     #portugeseCementBox p {height:125px;}
    #portugeseCementBox.active p {height:330px;} */

    #portugeseCementBox.expanded .crow {height:260px;}
    #portugeseCementBox.expanded p {height:200px;}


}


@media(max-width:380px) {
/*     #portugeseCementBox p {height:150px;}
    #portugeseCementBox.active p {height:410px;} */

    #portugeseCementBox.expanded .crow {height:340px;}
    #portugeseCementBox.expanded p {height:300px;}

}