@font-face {
    font-family: 'FuturaBoldMasBoldMas';
    src: url('../font/futuraboldmas-webfont.eot');
    src: url('../font/futuraboldmas-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/futuraboldmas-webfont.woff') format('woff'),
         url('../font/futuraboldmas-webfont.ttf') format('truetype'),
         url('../font/futuraboldmas-webfont.svg#FuturaBoldMasBoldMas') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FuturaHeaMasHeaMas';
    src: url('../font/futuraheamas-webfont.eot');
    src: url('../font/futuraheamas-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/futuraheamas-webfont.woff') format('woff'),
         url('../font/futuraheamas-webfont.ttf') format('truetype'),
         url('../font/futuraheamas-webfont.svg#FuturaHeaMasHeaMas') format('svg');
    font-weight: normal;
    font-style: normal;

}

body {font-family: 'FuturaHeaMasHeaMas'; font-size:15px; color:#73d1df; overflow:hidden;}

.wrapper {width:810px; height:800px; margin:0 auto; position:relative; overflow:hidden; background:#0077c8}
.wrapper .header {height:100px; background:#0077c8; position:relative}
.wrapper .header .logo {float:left; width:200px; height:100px; background:url(../images/pepsi-logo.jpg) no-repeat}
.wrapper .header .logo span {display:none;}
.wrapper .header .menu {font-family: 'FuturaBoldMasBoldMas'; float:right; margin:35px 15px 0 0}
.wrapper .header .menu ul {margin:0;}
.wrapper .header .menu ul li {float:left; font-size:20px; padding:4px 10px; margin-right:5px}
.wrapper .header .menu ul li a {color:#fff; text-decoration:none;}
.wrapper .header .menu ul li.selected {background:#fff; color:#015081}
.wrapper .header .menu ul li.selected a {color:#015081}

.promoContainer {width:810px; height:660px; position:relative}
.promoContainer .promoPicture {position:absolute; top:60px; left:0; z-index:1}

.subMenu { position:absolute ; top:0; width:811px; height:75px; background:url(../images/subMenu-bg.png) repeat-x; z-index:2; font-family: 'FuturaBoldMasBoldMas'; }
.subMenu h1 { color: #ffffff; font-size:20px;  line-height:60px; margin-left:20px; }
.select-box h2, .select-box a { padding-left:10px;  color: #015081; font-size: 13px; }

.select-box { cursor:pointer;  background:url(../images/select-box-passive.png) right no-repeat; position: absolute; top: 15px; right: 24px; background-color: #ffffff; height:30px; width:230px; padding-right:30px; }
.select-box.active { background-image:url(../images/select-box-active.png); }
.select-box h2 {  line-height: 30px; }
.select-box ul { display: none; position: absolute; top:30px;  width:260px;  }
.select-box ul li { display: block; }
.select-box ul li a { width:250px; text-decoration:none; display: block; background-color: #ffffff; line-height: 26px; }
.select-box ul li a:hover { background-color:#ccdce6; }

.loader { display: none; z-index:999;  position: absolute; top:50%; left:50%; margin-top:30px;  margin-left:-27px; }

.prc-subMenu { position:absolute ; top:0; width:811px; height:105px; background:url(../images/prc-tab-menu-bg.png) repeat-x; z-index:2; font-family: 'FuturaBoldMasBoldMas'; clear: both; left:0;}
.prc-subMenu ul {margin:17px 0 0 40px}
.prc-subMenu ul li {float:left; color:#fff; font-size:16px;  margin:0 17px; position:relative;}
.prc-subMenu ul li img {position:absolute; left:10px; top:0}
.prc-subMenu ul li a {display:inline-block; color:#fff; text-decoration:none; margin:20px 0 0 0; height:83px; }
.prc-subMenu ul li a span { padding:5px 10px 5px 55px; }
.prc-subMenu ul li a.selected {background: url(../images/sub-menu-selected-bg.png) no-repeat bottom center; margin-top:15px}
.prc-subMenu ul li a.selected span {background:#FFF; display:inline-block; color:#015081; padding:5px 10px 5px 55px;} 
.prc-subMenu ul li.twist a span { padding-left:45px}

.pagePopups {position:absolute; bottom:20px; z-index:3; width:810px; font-family: 'FuturaBoldMasBoldMas'; font-size:15px}
.pagePopups a {display:inline-block; color:#fff; text-decoration:none; padding:4px 10px;}
.pagePopups a.legal-notice {float:left; background:#ff1e00;  margin-left:20px}
.pagePopups a:hover {opacity:0.85; filter:alpha(opacity=85);}
.pagePopups .sss-award-btns {float:right; margin-right:20px;}
.pagePopups .sss-award-btns a {float:left; background:#1c1c1c; margin-left:10px; font-size:13px}

.popupContainer {width:500px; display:none;}
.popupContainer h3 { font-size:15px; font-family: 'FuturaBoldMasBoldMas'; margin-bottom:10px; color:#0077c8}
.popupContainer .window { width:489px; padding-right:10px; height:350px; overflow:auto;}
.popupContainer .window p {margin-bottom:10px; font-size:14px; color:#807d7d}
.staticTxtContainer {width:600px; height:450px; position:absolute; z-index:2; background: url(../images/scrollContentBg.png) repeat; top:80px; left:20px}
.staticScrollContainer {width:560px; height:415px; position:relative; margin:17px 0 0 20px}
.conactContainer {width:770px; height:560px; position:absolute; z-index:2; top:0; left:0}
.contactScrollContainer {width:770px; height:560px; position:absolute; margin:20px 0 0 20px; z-index:2}

.popupTxt-grup {margin-bottom:20px;}
.popupTxt-grup p {margin-bottom:7px!important;}
.popupTxt-grup p strong {color:#484848;}

.contactList {position:relative; clear:both;}
.contactList .item { width:320px; height:230px; float:left; background:url(../images/scrollContentBg.png) repeat; padding:20px; margin:0 15px 20px 0}
.contactList .item h2 {color:#fff; font-size:21px; font-family: 'FuturaBoldMasBoldMas'; margin-bottom:17px}
.contactList .item p {color:#fff; font-size:15px!important; padding-bottom:10px}
.contactList .line {clear:both; overflow:hidden; float:none; *height:290px;}
.contactList .item .contactLine {clear:both; overflow:hidden}
.contactList .item .contactLine.mrgn {margin-bottom:20px;}
.contactList .item .contactLine .left {float:left; width:70px; color:#fff}
.contactList .item .contactLine .right {float:left; width:240px; font-size:15px!important}
.contactList .item .contactLine .right a {color:#65c5db; text-decoration:none;}


#scroller-body { position:relative; z-index:9; width:630px; height:360px; margin:0 auto; top:180px; overflow:hidden;}
#scroller-body #mask { width:600px; margin:0 auto; overflow:hidden; position:relative} 
#scroller-body #product div {float:left;}
#scroller-body .prcBox {position:relative!important; height:700px!important;}
#scroller-body .prcPicture {float:left!important;  height:400px!important; position:absolute; left:20px; z-index:5;}
#scroller-body .prcTxt {float:left; width:341px!important; height:275px; background:url(../images/scrollContentBg.png) repeat; position:relative; top:30px; padding:15px 30px 0 230px}
#scroller-body .prcTxt h2 {font-family: 'FuturaBoldMasBoldMas'; color:#fff; font-size:30px; margin-bottom:5px}
#scroller-body .prcTxt p {color:#73d1df; margin-bottom:10px;}
#scroller-body .prcTxt .indexTxt {z-index:999; position:relative; width:350px!important; }


.footer {height:40px; width:811px; background:#393939; font-family: 'FuturaBoldMasBoldMas'; color:#fff; font-size:12px}
.footer .copyLike {float:left; margin:10px 0 0 20px}
.footer .copyLike .copyright {padding:2px 20px 0 0;}
.footer .copyLike .copyright, .likeBox {float:left;}
.footer .shareBox {float:right; margin:10px 20px 0 0}
.footer .shareBox h4, a {float:left;}
.footer .shareBox h4 {padding:2px 5px 0 0;}
.footer .shareBox a {margin:0 2px;}

.window p a { float:none; }