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

/**/
html, body { margin: 0; padding: 0; }
/**/
body { font-family: 'colgateReady', Helvetica, Arial, sans-serif; color: #fff; background-image: url(/ColgateTotal/v5/BR/locale-assets/images/home/daily-repair-landing/bg.jpg); }
/**/
h2 { color: #ed1c24; font-size: 43px; font-weight: 100; }
h2.media-heading.hompeageSecondaryHeadline { color: black !important;}
a { text-decoration: none; color: inherit; }
a:hover { text-decoration: underline; opacity: 0.7; }
a:hover, a:focus {color: #c21a22 !important;}
/**/
#Homepage_Slide_Container{height: 0px;}
.bg-green1>div { background-color: #ee5e6a; color: #fff; }
.bg-green2>div { background-color: #ed1c24; color: #fff; }
.bg-gray>div { background-color: #e4e4e4; color: #ed1c24; }
.bg-white>div { background-color: #fff; color: #ed1c24; }
.bg-white .back>a { border-color: #f36c49; }
/**/
#main-banner {background-image: url(/ColgateTotal/v5/BR/locale-assets/images/home/daily-repair-landing/main-banner.jpg);background-position: center;background-repeat: no-repeat;background-color: #f33d3d;width: 100%;height: 488px;color: #FFFFFF;font-size: 26px;background-size: cover;}
#main-banner-txt { max-width: 1020px; height: auto; margin: 0 auto; position: relative; top: 160px; line-height: 1; padding-left: 100px;}
#main-banner-txt p {display: inline-block;vertical-align: middle;position: relative;right: -30px;}
#main-banner-txt-m { display: none; }
#main-txt-2 {  float: right; }
p#main-txt-1 { position: relative; right: 50px;}
p.navTitle {color:black !important;}
/**/
#grid-video { width: 615px; height: 410px; background: #000000; }
grid-video-img-t { display: none; }
/**/
#title-line { border-bottom: solid 1px #ed1c24; width: calc(100% - 420px); margin-left: 20px; height: 50px; display: inline-block; }
#content { max-width:1025px;margin: 0 auto; }
#content h2 { display: inline-block; }
#content h2 strong { font-size:70%; }
#grid { max-width:1025px; margin: 0 auto; }
article#grid-1 {background-color: black;}
article.a1 { height: 205px; }
article.a2 { height: 410px; }
article.l1 { width: 205px; }
article.l2 { width: 410px; }
article.l3 {width: 615px;}
article>div { width: 100%; height: 100%; position: absolute; background-size: cover; line-height: 100%; font-size: 0; text-align: center; }
article>div::after { content: ""; display: inline-block; height: 100%; width: 0; overflow: hidden; vertical-align: middle; }
.front.fulltype p { width: calc(100% - 60px); margin: 0; padding: 25px 30px; text-align: center; font-size: 16px; border-top: solid 1px; border-bottom: solid 1px; display: inline-block; line-height: 1.4em; vertical-align: middle; text-transform: uppercase; }
.front.fulltype a { position: absolute; font-size: 11px; text-transform: uppercase; }
.more-dir { right: 40px; top: 175px; }
.more-esq { left: 25px; top: 175px; }
.back p { background: inherit; width: calc(100% - 140px); position: relative; margin: 0; padding: 15px 20px 25px; text-align: center; font-size: 14px; border-top: solid 1px; border-bottom: solid 1px; display: inline-block; line-height: 1.4em; vertical-align: middle; }
.back p::before { content: ""; position: absolute; display: block; width: 140px; height: 25px; left: calc(50% - 71px); bottom: -13px; background: inherit; }
.back>a { position: absolute; right: 10px; top: 10px; width: 20px; height: 20px; font-size: 16px; text-align: center; line-height: 17px; border: solid 1px #ffffff; padding: 0; }
.back p a {position: absolute;display: block;width: 100px;left: calc(50% - 51px);bottom: -13px;text-align: center;font-size: 12px;line-height: 25px;}
.close { text-align: center; line-height: 0.8; }
/**/
.front.txt-img p { font-size: 16px; position: absolute; line-height: 1.4em; text-transform: uppercase; text-align: left; }
.front.txt-img a { position: absolute; font-size: 11px; text-transform: uppercase; }
#grid-1>div { overflow: hidden; }
#grid-3-txt {     top: 32px;
    left: 280px;
    text-align: left;
    font-size: 18px;
    font-weight: bold; }	
#grid-3-more {     left: 280px;
    top: 130px;
    font-size: 12px; }
#grid-6-txt {left: 185px;top: 60px; width: 220px; }
#grid-7-txt { font-size: 18px; text-align: center; top: 0px; }
p#grid-7-txt { margin: 10px 10px 10px; text-align: center; color:#ed1c24}
#grid-7-more { top: 120px;
    left: 65px;
    color: #ed1c24; }
#grid-10-txt {     width: 200px;
    top: 60px;
    left: 30px;
    color: #fff; }
#grid-10-more {
    top: 130px;
    left: 120px;
}	
#grid-11-txt { top: 35px; left: 245px; }
#grid-13-txt {     font-size: 16px;
    top: 250px;
    left: 50px;
    width: 200px;
    text-transform: none; }
#grid-13-more { right: 40px;
    top: 375px; }
#grid-15-txt {     left: 180px;
    top: 40px;
    width: 180px; }
#grid-15-more { left: 180px;
    top: 120px; }	
/**/
#grid-3>div.front { background-image: url(/ColgateTotal/v5/BR/locale-assets/images/home/daily-repair-landing/grid-bg-3.jpg); }
#grid-6>div.front { background-color: #e3e3e3}
#grid-7>div.front { background-image: url(/ColgateTotal/v5/BR/locale-assets/images/home/daily-repair-landing/grid-bg-7.jpg); }
#grid-7>div.back p { width: calc(100% - 80px); padding: 25px 10px 30px; font-size: 18px; line-height: 23px; }
#grid-10>div.front { background-image: url(/ColgateTotal/v5/BR/locale-assets/images/home/daily-repair-landing/grid-bg-10.jpg); }
#grid-11>div.front { background-color: #ee5e6a}
#grid-15>div.front { background-image: url(/ColgateTotal/v5/BR/locale-assets/images/home/daily-repair-landing/grid-bg-12.jpg); }
#grid-13>div.front { background-image: url(/ColgateTotal/v5/BR/locale-assets/images/home/daily-repair-landing/grid-bg-13.jpg); }
/**/
#bottom { background-color: #e81d2d; width: 100%; height: 640px; color: #FFFFF; font-size: 34px; margin: 80px 0 0; text-align: center; }
#bottom h2 { font-size: 24px; line-height: 30px; margin: 0; padding: 75px 0 35px; font-weight: normal; color: #ffffff; }
#bottom-video-box { display: inline-block; width: 755px; height: 421px; border: solid 5px #e2505c; background: #000000; overflow: hidden; position: relative; z-index: 5; }
#bottom-video { width: 756px; height: 421px; }
#video-shadow { margin-top: -85px; position: relative; }
/**/
.play { cursor: pointer; }
/**/
@keyframes reveal { 0% { z-index:0; -webkit-transform:scale(-1, 1) skewY(0deg); transform:scale(-1, 1) skewY(0deg); } 20% { -webkit-transform:scale(-0.8, 1) skewY(5deg); transform:scale(-0.8, 1) skewY(5deg); } 50% { -webkit-transform:scale(0, 1) skewY(10deg); transform:scale(0, 1) skewY(10deg); } 80% { -webkit-transform:scale(0.8, 1) skewY(5deg); transform:scale(0.8, 1) skewY(5deg); } 100% { z-index:10; -webkit-transform:scale(1, 1) skewY(0deg); transform:scale(1, 1) skewY(0deg); } } 
@-webkit-keyframes reveal { 0% { z-index:0; -webkit-transform:scale(-1, 1) skewY(0deg); transform:scale(-1, 1) skewY(0deg); } 20% { -webkit-transform:scale(-0.8, 1) skewY(5deg); transform:scale(-0.8, 1) skewY(5deg); } 50% { -webkit-transform:scale(0, 1) skewY(10deg); transform:scale(0, 1) skewY(10deg); } 80% { -webkit-transform:scale(0.8, 1) skewY(5deg); transform:scale(0.8, 1) skewY(5deg); } 100% { z-index:10; -webkit-transform:scale(1, 1) skewY(0deg); transform:scale(1, 1) skewY(0deg); } } 
@keyframes hide { 0% { z-index:10; -webkit-transform:scale(1, 1) skewY(0deg); transform:scale(1, 1) skewY(0deg); } 20% { -webkit-transform:scale(0.8, 1) skewY(-5deg); transform:scale(0.8, 1) skewY(-5deg); } 50% { -webkit-transform:scale(0, 1) skewY(-10deg); transform:scale(0, 1) skewY(-10deg); } 80% { -webkit-transform:scale(-0.8, 1) skewY(-5deg); transform:scale(-0.8, 1) skewY(-5deg); } 100% { z-index:0; -webkit-transform:scale(-1, 1) skewY(0deg); transform:scale(-1, 1) skewY(0deg); } } 
@-webkit-keyframes hide { 0% { z-index:10; -webkit-transform:scale(1, 1) skewY(0deg); transform:scale(1, 1) skewY(0deg); } 20% { -webkit-transform:scale(0.8, 1) skewY(-5deg); transform:scale(0.8, 1) skewY(-5deg); } 50% { -webkit-transform:scale(0, 1) skewY(-10deg); transform:scale(0, 1) skewY(-10deg); } 80% { -webkit-transform:scale(-0.8, 1) skewY(-5deg); transform:scale(-0.8, 1) skewY(-5deg); } 100% { z-index:0; -webkit-transform:scale(-1, 1) skewY(0deg); transform:scale(-1, 1) skewY(0deg); } }
article.turned .front { -webkit-animation: hide 400ms linear 0ms both; animation: hide 400ms linear 0ms both; }
article.turned .back { -webkit-animation: reveal 400ms linear 0ms both; animation: reveal 400ms linear 0ms both; }
article.unturned .front { -webkit-animation: reveal 400ms linear 0ms both; animation: reveal 400ms linear 0ms both; }
article.unturned .back { -webkit-animation: hide 400ms linear 0ms both; animation: hide 400ms linear 0ms both; }
article:not(.turned):not(.unturned) .front { z-index: 10; }
article:not(.turned):not(.unturned) .back { z-index: 0; }
/**/
.more { width: 16px; height:16px; display: inline-block; text-align: center; line-height:normal; margin-left: 5px; line-height: 0.7;     vertical-align: middle; font-size: 19px; }
.more-esq .more {margin-left:0; margin-right:5px;}
.arrow {display:inline-block;}
/**/
.btn-white { color: #f36c49; border: solid 1px #fff; background: #ffffff; background: -moz-linear-gradient(to bottom right, #ffffff 0%, #f6f6f6 47%, #f7ece7 49%, #fde2db 50%); background: -webkit-gradient(left top, right bottom, color-stop(0%, #ffffff), color-stop(47%, #f6f6f6), color-stop(49%, #f7ece7), color-stop(50%, #fde2db)); background: -webkit-linear-gradient(to bottom right, #ffffff 0%, #f6f6f6 47%, #f7ece7 49%, #fde2db 50%); background: -o-linear-gradient(to bottom right, #ffffff 0%, #f6f6f6 47%, #f7ece7 49%, #fde2db 50%); background: -ms-linear-gradient(to bottom right, #ffffff 0%, #f6f6f6 47%, #f7ece7 49%, #fde2db 50%); background: linear-gradient(to bottom right, #ffffff 0%, #f6f6f6 47%, #f7ece7 49%, #fde2db 50%); }
.btn-green { color: #fff; border: solid 1ox #c21a22; background: #ed1c24; background: -moz-linear-gradient(to bottom right, #ed1c24 0%, #ed1c24 50%, #c21a22 51%, #c21a22 59%, #c21a22 100%); background: -webkit-gradient(left top, right bottom, color-stop(0%, #ed1c24), color-stop(50%, #ed1c24), color-stop(51%, #c21a22), color-stop(59%, #c21a22), color-stop(100%, #c21a22)); background: -webkit-linear-gradient(to bottom right, #ed1c24 0%, #ed1c24 50%, #c21a22 51%, #c21a22 59%, #c21a22 100%); background: -o-linear-gradient(to bottom right, #ed1c24 0%, #ed1c24 50%, #c21a22 51%, #c21a22 59%, #c21a22 100%); background: -ms-linear-gradient(to bottom right, #ed1c24 0%, #ed1c24 50%, #c21a22 51%, #c21a22 59%, #c21a22 100%); background: linear-gradient(to bottom right, #ed1c24 0%, #ed1c24 50%, #c21a22 51%, #c21a22 59%, #c21a22 100%); }