html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

@font-face {
    font-family: 'Product Sans Bold';
    src: url('https://s0.2mdn.net/creatives/assets/4644999/ProductSans-Bold.ttf') format('truetype'); /* Safari, Android, iOS */;
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Product Sans Black';
    src: url('https://s0.2mdn.net/creatives/assets/4644999/ProductSans-Black.ttf') format('truetype'); /* Safari, Android, iOS */;
    font-weight: bold;
    font-style: normal;
}


/*------------------------- GLOBAL STYLES --------------------------------*/
/* Default font */
body {
    font-family: "Noto Sans", sans-serif; font-weight: 700;
}
.cta {
    font-family: "Noto Sans", sans-serif; font-weight: 700;
}
.terms {
    font-family: "Roboto", sans-serif; font-weight: 400;
}

span {
    display: inline-block;
}

strong, b {
    font-weight:800;
}
.text {
    position: relative;
    display: block;
    -webkit-font-smoothing: antialiased;
}
.hidden {
    display: none;
    visibility: hidden;
}
#banner_content {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#banner_outline {
    box-sizing: border-box;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    line-height: 1;
    border: 1px solid #000000;
    cursor: pointer;
    overflow: hidden;
}


/*------------------------- IMAGE --------------------------------*/
#characterImg,
#endImg,
#endLogo {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    opacity: 0;
}
.s300x250 #characterImg { transform-origin: 70% 60%; }
.s320x50 #characterImg { transform-origin: 70% 50%; }
.s320x100 #characterImg { transform-origin: 70% 50%; }

.s300x250 #endImg { transform-origin: 70% 60%; }
.s320x50 #endImg { transform-origin: 70% 50%; }
.s320x100 #endImg { transform-origin: 70% 50%; }

.s300x250 #endLogo { transform-origin: 20% 80%; }
.s320x50 #endLogo { transform-origin: 90% 80%; }
.s320x100 #endLogo { transform-origin: 90% 80%; }

/*------------------------- TEXT --------------------------------*/

.txt {
    color:#7e7e7e;
}
.s300x250 .txt { font-size: 19px; line-height: 26px; }
.s320x50 .txt { font-size: 11px; line-height: 12px; }
.s320x100 .txt { font-size: 14px; line-height: 18px; }

.s300x250.Generic .txt { font-size: 15px; line-height: 22px; }
.s320x50.Generic .txt { font-size: 9px; line-height: 12px; }
.s320x100.Generic .txt { font-size: 14px; line-height: 18px; }

.txt-left {
    position: absolute;
    text-align: left;
}
.s300x250 .txt-left { left: 13px; top: 56px; }
.s320x50 .txt-left { left: 44px; top: 18px; }
.s320x100 .txt-left { left: 10px; top: 32px; }

.txt-right {
    position: absolute;
    top: 16px;
    right: 16px;
    text-align: right;
}

/*------------------------- Intro --------------------------------*/

.intro {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
}

#playTxt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.s300x250 #playTxt { width: 154px; }
.s320x50 #playTxt { width: 116px; }
.s320x100 #playTxt { width: 134px; }

#playIcon {
    position: absolute;
    top: 50%;
    width: 0;
    transform: translate(-50%, -50%);
}
.s300x250 #playIcon { left: 28%; width: 38px; }
.s320x50 #playIcon { left: 35%; width: 25px; }
.s320x100 #playIcon { left: 33%; width: 30px; }

#playMask {
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    width: 100%;
    height: 40px;
    background-color: #FFFFFF;
}
.s300x250 #playMask { left: -75%; }
.s320x50 #playMask { left: -67%; }
.s320x100 #playMask { left: -71%; }


/*------------------------- Segment --------------------------------*/

.segment {
    opacity: 0;
    display: inline-table;
    transform: translate(-50%, -50%) rotate(-61deg);
    position: absolute;
    top: 42%;
    left: 50%;
    width: 400%;
    background-color:#fceba3;
}

.corner {
    width: 50%;
    display: block;
    float: left;
}

#c1 {
    fill:#4285F4;
    position: relative;
    z-index: 1;
    transform-origin: 100% 50%;
}

#c2 {
    fill:#DB4437;
    position: relative;
    z-index: 0;
    transform-origin: 0% 50%;
}

/* for all animations on small sizes: straight angle */
.s320x50 #c2 { transform: rotate(60deg); }
.s320x100 #c2 { transform: rotate(60deg); }

/* animation specific tweaks */
.s300x250.Clip #c2 { transform: rotate(28deg); }
.s300x250.Promo #c2 { transform: rotate(28deg); }

/*------------------------- Background --------------------------------*/
.bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #FFFFFF;
}

/*------------------------- Frame --------------------------------*/

.frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #666666;
}

.frame img {
    width: 100%;
}

/*------------------------- Tag --------------------------------*/
.tag-color { 
    fill-rule:evenodd;
    clip-rule:evenodd;
    fill:#EA4335;
    overflow: visible;
}

#tag {
    position: absolute;
    transform-origin: 0% 0%;
}
.s300x250 #tag { top: -100%; left: 50%; }
.s320x50 #tag { top: 150%; left: 67%; }
.s320x100 #tag { top: 150%; left: 67%; }

#tagContent {
    text-align: center;
}
.s300x250 #tagContent { width: 260px; height: 135px; transform: translate(-50%, -50%); }
.s320x50 #tagContent { width: 120px; height: 45px; transform: translate(-97%, -50%); }
.s320x100 #tagContent { width: 160px; height: 83px; transform: translate(-50%, -50%); }

#tag svg {
    width:100%;
    filter: url(#shadow);
}

#tag #txt1 {
    position: absolute;
    top: 50%;
    left: 58%;
    transform: translate(-50%, -50%);
    color:#1d1d1d;
}
.s300x250 #tag #txt1 { width: calc(100% - 70px); font-size:30px; line-height:40px; }
.s320x50 #tag #txt1 { width: calc(100% - 28px); font-size:14px; line-height:18px; }
.s320x100 #tag #txt1 { width: calc(100% - 42px); font-size:18px; line-height:30px; }

/*------------------------- End --------------------------------*/
.endContent {
    position: absolute;
    opacity: 0;
}
.s300x250 .endContent { left: 14px; top: 46px; }
.s320x50 .endContent { left: 10px; top: 0px; }
.s320x100 .endContent { left: 13px; top: 24px; }

.adLogo {
    position: absolute;
}
.s300x250 .adLogo { left: 13px; top: 13px; height: 40px; width: auto; }
.s320x50 .adLogo { left: 99px; top: 24px; height: 22px; width: auto;  }
.s320x100 .adLogo { left: 12px; top: 9px; height: 20px; width: auto; }

#txt3 {
    opacity: 0;
}

.cta {
    position: relative;
    text-align: center;
    opacity: 1;
    color: #FFFFFF;
    border-radius: 2px;
    padding: 5px;
    overflow: hidden;
    display: inline-block;
}
.s300x250 .cta { min-width: 110px; font-size: 12px; line-height: 14px; margin-top: 12px; }
.s320x50 .cta { min-width: 70px; font-size: 8px; line-height: 8px; margin-top: 4px; }
.s320x100 .cta { min-width: 83px; font-size: 9px; line-height: 9px; margin-top: 4px; }

.terms {
    position: absolute;
    bottom: 2px;
    right: 4px;
    opacity: 1;
    text-align: right;
    color: #ffffff;
    text-shadow: 0px 0px 4px #000000;
}
.s300x250 .terms { font-size: 8px; line-height: 10px; }
.s320x50 .terms { font-size: 5.5px; line-height: 7px; }
.s320x100 .terms { font-size: 5.5px; line-height: 7px; }

/*------------------------- Promo --------------------------------*/

/* "Promo" content hidden by default */
#frame1,
#frame2,
#frame3,
#adLogoPromo {
    display: none;
}
.Promo #frame1,
.Promo #frame2,
.Promo #frame3,
.Promo #adLogoPromo {
    display: block;
}

.Promo .cta {
    -webkit-mask-image: linear-gradient(to bottom, black 50%, black);
    mask-image: linear-gradient(to bottom, black 50%, black);
    -webkit-mask-size: 30% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/*------------------------- Clip --------------------------------*/

/* "Clip" content hidden by default */
#frameClipVideo,
#frameClipEnd {
    display: none;
}

.Clip #frameClipVideo,
.Clip #frameClipEnd {
    display: block;
}

#videoPlayer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slidingBackground {
    left: -20px;
}
.s300x250 .slidingBackground { width: 320px; height: 250px; }
.s320x50 .slidingBackground { width: 340px; height: 50px; }
.s320x100 .slidingBackground { width: 340px; height: 100px; }

#textOverlay {
    box-sizing: border-box;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    letter-spacing: -1px;
}
.s300x250 #textOverlay { padding-bottom: 35px; }
#textOverlayContent {
    position: relative;
    color: #ffffff;
    text-align: center;
    text-shadow: 0 0 5px #000000, 0 0 5px #000000, 0 0 5px #000000;
}
.s300x250 #textOverlayContent { font-size: 45px; line-height: 55px; }
.s320x50 #textOverlayContent { font-size: 18px; line-height: 22px; }
.s320x100 #textOverlayContent { font-size: 27px; line-height: 35px; }

#adLogoLight {
    position: absolute;
}
.s300x250 #adLogoLight { bottom: 10px; right: 16px; width: 40px; }
.s320x50 #adLogoLight { bottom: 12px; right: 26px; width: 26px; }
.s320x100 #adLogoLight { bottom: 36px; right: 18px; width: 30px; }
.slidingBackgroundAnimation.s320x100 #adLogoLight { bottom: 10px; right: 10px; width: 80px; }

#ctaVideo {
    position: absolute;
}
.s300x250 #ctaVideo { left: 15px; bottom: 15px; }
.s320x50 #ctaVideo { left: 8px; bottom: 15px; transform-origin: 0% 50%; transform: scale(0.8); }
.s320x100 #ctaVideo { left: 6px; bottom: 40px; transform-origin: 0% 50%; transform: scale(0.6); }
.slidingBackgroundAnimation.s320x100 #ctaVideo { left: 10px; bottom: 10px; transform: scale(1); }

#endImgClip,
#endLogoClip {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
}

/*------------------------- Generic --------------------------------*/

/* "Generic" content hidden by default */
#frameGeneric {
    display: none;
}

.Generic #frameGeneric {
    display: block;
}

#frameGeneric .appIcon {
    position: absolute;
    width: 70px;
    border-radius: 16px;
}
.s300x250 #iconOut1 {left: 180px; top: -260px; transform: scale(0.6);}
.s300x250 #iconOut2 {left: 90px; top: -200px; transform: scale(1.6);}
.s300x250 #iconOut3 {left: 190px; top: -170px; transform: scale(0.8);}
.s300x250 #iconOut4 {left: 157px; top: -100px; transform: scale(1.2);}
.s300x250 #iconOut5 {left: 80px; top: -80px; transform: scale(0.7);}
.s300x250 #iconOut6 {left: 153px; top: -70px; transform: scale(0.9);}
.s300x250 #iconOut7 {left: 100px; top: -60px; transform: scale(0.5);}
.s300x250 #iconIn1 {left: 212px; top: -6px; transform: scale(0.45);}
.s300x250 #iconIn2 {left: 215px; top: 31px; transform: scale(0.55);}
.s300x250 #iconIn3 {left: 166px; top: 8px; transform: scale(0.7);}
.s300x250 #iconIn4 {left: 157px; top: 72px; transform: scale(1);}
.s300x250 #iconIn5 {left: 225px; top: 81px; transform: scale(0.8);}
.s300x250 #iconIn6 {left: 173px; top: 130px; transform: scale(0.55);}
.s300x250 #iconIn7 {left: 216px; top: 133px; transform: scale(0.55);}

.s320x50 #iconOut1 {left: 200px; top: -260px; transform: scale(0.25);}
.s320x50 #iconOut2 {left: 120px; top: -200px; transform: scale(0.5);}
.s320x50 #iconOut3 {left: 190px; top: -170px; transform: scale(0.3);}
.s320x50 #iconOut4 {left: 70px; top: -100px; transform: scale(0.25);}
.s320x50 #iconOut5 {left: 150px; top: -80px; transform: scale(0.5);}
.s320x50 #iconOut6 {left: 123px; top: -70px; transform: scale(0.3);}
.s320x50 #iconOut7 {left: 240px; top: -60px; transform: scale(0.35);}
.s320x50 #iconIn1 {left: 151px; top: -17px; transform: scale(0.25);}
.s320x50 #iconIn2 {left: 203px; top: -11px; transform: scale(0.5);}
.s320x50 #iconIn3 {left: 133px; top: -14px; transform: scale(0.2);}
.s320x50 #iconIn4 {left: 173px; top: -17px; transform: scale(0.3);}
.s320x50 #iconIn5 {left: 142px; top: 3px; transform: scale(0.23);}
.s320x50 #iconIn6 {left: 159px; top: 2px; transform: scale(0.2);}
.s320x50 #iconIn7 {left: 176px; top: 3px; transform: scale(0.23);}

.s320x100 #iconOut1 {left: 200px; top: -260px; transform: scale(0.25);}
.s320x100 #iconOut2 {left: 120px; top: -200px; transform: scale(0.5);}
.s320x100 #iconOut3 {left: 190px; top: -170px; transform: scale(0.3);}
.s320x100 #iconOut4 {left: 70px; top: -100px; transform: scale(0.25);}
.s320x100 #iconOut5 {left: 150px; top: -80px; transform: scale(0.5);}
.s320x100 #iconOut6 {left: 113px; top: -70px; transform: scale(0.3);}
.s320x100 #iconOut7 {left: 260px; top: -60px; transform: scale(0.35);}
.s320x100 #iconIn1 {left: 145px; top: -5px; transform: scale(0.4);}
.s320x100 #iconIn2 {left: 225px; top: 15px; transform: scale(0.5);}
.s320x100 #iconIn3 {left: 118px; top: -2px; transform: scale(0.33);}
.s320x100 #iconIn4 {left: 184px; top: -8px; transform: scale(0.6);}
.s320x100 #iconIn5 {left: 136px; top: 36px; transform: scale(0.7);}
.s320x100 #iconIn6 {left: 173px; top: 26px; transform: scale(0.3);}
.s320x100 #iconIn7 {left: 196px; top: 25px; transform: scale(0.27);}