/*
 * Reset
 */

article, aside, footer, header, hgroup, nav, section { display: block }
html, body{ margin:0; padding:0; height: 100%; width: 100% }
ul{ margin:0; padding:0 }
li{ list-style:none }
br.clear{clear:both}
a{ cursor:pointer }
a img{ border: 0 }
body .mobile{ display: none }
hr{ border: 0; border-bottom: 1px solid #fff; margin: 0.9em 0; opacity: 0.3; filter:alpha(opacity=30) }
sup{ font-size: 60% }
::selection{ background: #000; color: #fff }
::-moz-selection { background: #000; color: #fff }

/*
 * Loader
 */

#loader { position:fixed; top:0; bottom:0; width:100%; height:100%; text-align:center; background:#000; z-index:999999; color:white;  }
#loader i { font-size:180%; font-style: normal }
#loader h2 { font-size:320%; margin-top: .5em; margin-bottom:.5em; }
#loader .wrapper { border-bottom: 1px solid #FFF; display: inline-block; position: relative }
#loader .progress { border-bottom: 1px solid #ba9b6d; height:1px; width:0; position: relative; top:1px; }
#loader .logo { position:absolute; top:15px; left:15px; }

.country-TW #loader .wrapper i { font-family:Arial; font-style:italic; }

/*
 * Animation
 */
a{ -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -o-transition: color 0.3s ease; transition: color 0.3s ease }
header .order img { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease   } 
#slides nav a:hover { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease   }
#slides nav a:hover span { -webkit-transition: all 0.1s ease; -moz-transition: all 0.1s ease; -o-transition: all 0.1s ease; transition: all 0.1s ease   }

/*
 * Common
 */
html{ background: #000 }
body{ font-family: humanist, arial, helvetica, sans-serif; color:#000; font-size:10px }

.left{ float: left }
.right{ float: right }

.table{ display: table; width: 100%; height: 100% }
    .table .td{ display: table-cell; width: 100%; height: 100%; vertical-align: middle }

section, article{ width: 100% }
    section{ position: absolute; top: 65px; bottom: 35px }
    article{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; overflow: hidden }
    article.transition{ overflow: visible }

.split{ height: 100% }
    .split > div{ width: 50%; display: block; overflow: hidden; height: 100%; float: left; position: relative }
    #slides .split > div.background > div.background{ width: 100%; display: block; height: 100%; position: relative; background-repeat: no-repeat; background-color: transparent }

.image-animate { overflow:hidden; width:100%; }

/*
 * Unicode
 */
html.unicode body * { font-family: Arial, sans-serif !important }
html.unicode p { font-family: Arial, sans-serif !important }
html.unicode h1 { font-family: Arial, sans-serif !important }
html.unicode h2 { font-family: Arial, sans-serif !important }
html.unicode .text{ font-family: Arial, sans-serif !important; }
html.unicode #slides .slide .content { font-family: Arial, sans-serif !important; }

/*
 * Header
 */
header{ background:#000; position: fixed; top: 0; left: 0; right: 0; padding: 15px; height: 35px; z-index: 500 }
    header .container{ position: relative; height: 100% }

        header .logo{ text-decoration: none; text-align: center; position: absolute; left: 0; top: 0 }
            body.loaded header .logo img{ width: 172px; height: 35px; background: url("../images/common/logo.large.png") no-repeat left center; vertical-align: middle }

        header .title{ text-transform: uppercase; color: #ba9b6d; font-size: 190%; text-align: center; height: 100% }
        header .title a { color: #ba9b6d; text-decoration: none; }

        body.loaded header .button{ float: right; margin-left: 5px; width: 35px; height: 35px; background: url("../images/common/button.mobile.png") no-repeat; background-size: 200% }
            body.loaded header .button.buy{ background-position: top right; display: none }
            body.loaded header .button.plus{ background-position: top left }
            body.loaded header .button.minus{ background-position: bottom left }

    body.loaded header .order{  position: absolute; bottom: 0; right: 0; background:url("../images/common/background.order.png") no-repeat left top; height: 31px; color:#000; font-size: 100%; text-decoration: none; padding-left: 50px; padding-right: 10px; text-transform: uppercase; letter-spacing: -0.1em; }
    body.lang-jp header .order{ font-size: 130% }

    body.loaded.noorder header .order{ display: none }


        header .order img { vertical-align: middle; margin-left: 5px; animation: order 0.3s; -webkit-transform:scale(0.8); -moz-transform:scale(0.8);  }
        header .order:hover img { -webkit-transform:scale(1); -moz-transform:scale(1); }
		

    body.loaded header .expanded{ position: fixed; top: 54px; bottom: 0; left: 0; width: 100%; background: url('../images/common/menu.mobile.jpg') no-repeat; background-size: 100% 100%;
                    text-align: center; border-top: 1px solid rgba(255,255,255,0.2); display: none; z-index: 9999 }
    header .expanded .container{ display: none }
    header .expanded li{ float: left; width: 33%; padding: 1.4em 0; border-left: 1px solid rgba(255,255,255,0.2) }
    header .expanded li img{ max-width: 38px; height: auto; width: 25%; margin: auto }
    header .expanded img.nespresso{ width: 40%; height: auto; margin: 3em auto; display: block }
    header .expanded .baseline{ margin: 0 20px; color: #fff; font-family: frutiger, arial, helvetica, sans-serif; font-size: 200%; font-weight: 100 }



/*
 * Scroll bar
 */

.iScrollIndicator { height:30px; }

/*
 * Slides
 */

    #slides .background{ background-repeat: no-repeat; background-position: center; background-color: #000 }

    #slides .transition{ font-family: frutiger, arial, helvetica, sans-serif; text-align: center; z-index: 20; pointer-events: none; }
        #slides .transition .background{ background: #fff }
    #slides .transition h1{ font-size: 500%; color: #8f682f ; margin: 0.5em 0; font-weight: 100 }
    #slides .transition p{ font-size: 210%; font-weight: 100; padding-bottom: 3em; margin: 0 auto; max-width: 720px; width: 80% }
    #slides .transition span{ color:#8f682f  }

    #slides .text{ color: #fff; text-align: center; position: absolute; z-index: 6; top:0; left: 0; width: 100%; height: 100% }
    #slides .title{ position: absolute; top:10%; left: 0; width: 100%; z-index: 7 }
    #slides .vcenter .title{ position: static }
        #slides .title i{  font-size: 150% }
        #slides .title h2{ font-size: 300%; text-transform: uppercase; font-weight: normal; margin-top: 0.55em; margin-bottom: 0.2em }
            #slides .title h2 img{ vertical-align: middle; margin: 0 10px }
            #slides .title h2 span{ color: #8f682f  }
        #slides .title h3{ font-size: 150%; text-transform: uppercase; font-weight: normal; margin-top: 0.5em }
        #slides .title p{ font-size: 200%; font-weight: 100; font-family: frutiger, arial, helvetica, sans-serif; width: 40%; margin: auto; line-height: 140% }
        #slides .title p span{ color: #8f682f  }

    #slides .scroll{ position: absolute; bottom:37px; left: 0; width: 100%; font-family: frutiger, arial, helvetica, sans-serif; font-size: 90%; text-align: center; z-index: 299 }
        #slides .scroll a{ color: #FFF; text-decoration: none; text-transform: uppercase }
        #slides .scroll span{ display: block; margin-top:-5px; }
        #slides .scroll .scroll-img { display:inline-block; width:59px; height:59px; margin-bottom: -5px; background:url(../images/common/anim.scroll.png); }

    #slides .slide{ z-index: 5 }
    #slides .slide .content{ position: absolute; bottom:13%; left: 30%; right: 30%; font-family: frutiger, arial, helvetica, sans-serif; font-size: 200%; line-height: 140% }
        #slides .content span{ color:#8f682f  }


		body.loaded #slides nav{ z-index: 30; font-family: arial, helvetica, sans-serif; background: url("../images/common/darker.png") repeat; position: absolute; bottom: 0; left: 0; width: 100%; text-align: center }
        #slides nav a{ position:relative; cursor: pointer; text-transform: uppercase; text-decoration: none; font-size: 11px; font-weight: 100; padding: 8px 20px; display: inline-block; color:#555555; }
        #slides nav a span { position:absolute; top:100%; left:0; right:0; bottom:-5%; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8f662d), color-stop(100%,#532c0a)); background: -webkit-linear-gradient(top,  #8f662d 0%,#532c0a 100%); background: -o-linear-gradient(top,  #8f662d 0%,#532c0a 100%); background: -ms-linear-gradient(top,  #8f662d 0%,#532c0a 100%); background: linear-gradient(to bottom,  #8f662d 0%,#532c0a 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8f662d', endColorstr='#532c0a',GradientType=0 ); z-index:-1; }

        #slides nav a.active, #slides nav a:hover { top:-2px; color:#fff; }
        #slides nav a.active span, #slides nav a:hover span { display:block; top:-5%; bottom:-5%; }

    #slides .split .text{ color: #fff; font-family: frutiger, arial, helvetica, sans-serif; font-size: 160%; line-height: 140%; text-align: left }
        #slides .split .text .box{ width: 80%; max-width: 350px }
            #slides .split .text .box > div{ padding: 10% }
    body.loaded #slides .split .text .box.cauca{ background: url("../images/common/darker.png") repeat center; margin-left: 10% }
        #slides .split .cauca span{ color: #90db4d }
    body.loaded #slides .split .text .box.santander{ background: url("../images/common/darker.png") repeat center; margin-right: 10%; margin-left: auto }
        #slides .split .santander span{ color: #ff8b36 }

        body.lang-cn #slides nav a,
        body.lang-kr #slides nav a { font-size:110% }


/*
 * Footer
 */
		
footer{ background:#000; position: fixed; bottom: 0; left: 0; right: 0; padding: 10px 40px; height: 15px; z-index: 500 }
    footer .socials{}
        footer .socials a{ text-decoration: none; margin: 0 5px }
        footer .socials a img{ opacity: 0.8 }
        footer a img{ vertical-align: middle }
        footer .socials a:after{ content: '•'; color: #fff; margin-left: 5px }
        footer .socials a:last-of-type:after{ content: ''; margin-left: 0 }
		    body.no-app footer .android { display:none; }
		    body.no-app footer .apple { display:none; }
		    body.no-pinterest footer .pinterest { display:none; }

    footer nav{ font-size: 10px; white-space: nowrap }
    html.win footer nav{ font-family: arial, helvetica, sans-serif }
        footer nav a{ color: #666; text-decoration: none; margin-right: 4px; font-family: Arial; }
        footer nav a:hover{ color: #fff }
        footer nav a:after{ color: #666; content: '.'; margin-left: 6px }
        footer nav a:last-of-type:after{ content: ''; margin-left: 0 }

	footer .qrcode > img { position:absolute; margin-top:-170px; margin-left:-102px; width:150px; height:165px; display:none; }


/*
 * QRcode
 */
 body.qrcode article{ font-family: frutiger, arial, helvetica, sans-serif; height:100%; position:relative }
 body.qrcode.santander .slide1{ background-image:url('../images/qrcode/bg-santander.jpg')}
 body.qrcode.cauca .slide1{ background-image:url('../images/qrcode/bg-cauca.jpg')}
 body.qrcode .slide1{ background-size:cover; background-position:center; text-align:center; color:#fff }
 body.qrcode .slide1 i{ display:block; margin-top:2em; font-size: 150% }
 body.qrcode .slide1 p.text{ font-size: 140%; margin: 0 1em; margin-top: 1em }
 body.qrcode .slide1 p.text span{ color:#ff8a34 }
 body.qrcode .slide1 .order{ font-weight:100; background-color:#fff; position:absolute; bottom:0; left:0; right:0; padding-top:1em; color:#ba9b6d; text-align:left }
 body.qrcode .slide1 .order img{ float:left; margin-left:4em; margin-right:2em; width:20%; height:auto }
 body.qrcode .slide1 .order h1{ font-weight:100; font-size:300%; padding-top: 0.2em; margin:0 }
 body.qrcode .slide1 .order p{ font-size:190%; margin:0 }
 body.qrcode .slide1 .scroll{ position:absolute; bottom:10em; left:0; right:0; text-align:center }
 body.qrcode .slide1 .scroll img{ width:10%; height:auto }
 body.qrcode a.order { text-decoration:none; } 
 
 body.qrcode .slide2{ background:url('../images/qrcode/bg-terroirs.jpg') no-repeat center; background-size:cover; text-align:center; color:#fff }
 body.qrcode .slide2 p.text{ font-size: 140%; margin: 0 1em; margin-top: 1em }
 body.qrcode .slide2 p.text span{ color:#ba9b6d }
 body.qrcode .slide2 h2{ font-family: humanist, arial, helvetica, sans-serif; font-weight:100; text-transform:uppercase; font-size:200%; padding-top: 0.2em; margin:0; margin-top:2em }

 body.qrcode .slide2 .more{ font-weight:100; position:absolute; bottom:0; left:0; right:0; padding-top:1em; color:#fff; font-size:230% }
 body.qrcode .slide2 .more img{ width: 10%; margin: 0.5em }
 body.qrcode .mobile.button { display:none }


@media screen and (max-width : 1400px)
{
    #loader i { font-size:100% }
    #loader h2 { font-size:200%; margin-top: .5em; margin-bottom:.5em; }
}

@media only screen and (max-width: 1024px)
{
    nav.right{ display: none }
    body.loaded #slides nav {display: none !important }
    #slides .scroll{ bottom:20px; }
	#slides .scroll span { display:none }
}


@media only screen and (max-width: 640px)
{
    .mobile{ display: block }
    #loader{ font-size: 200% }
    #loader h2{ font-size: 110% }
	#loader .logo { position:absolute; top:15px; left:50%; margin-left:-86px; }

    header{ padding: 10px }
    header .mobile.button{ display: inline-block }
    body.loaded header .order{ position: fixed; bottom: 0 }
    header .title{ float: left; text-align: left; margin-left: 5px; font-size: 130% }
    header .logo{ position: static; float: left }
        body.loaded header .logo img{ background-image: url("../images/common/logo.square.png"); width: 30px; background-size: 100% }

    section{ top: 55px; bottom: 0 }

    #slides .slide .content{ left: 5%; right: 5% }
    #slides .split .text .box{ width: 90%; line-height: 120% }
    body.loaded #slides .split .text .box.cauca{ margin-left: 5% }
    body.loaded #slides .split .text .box.santander{ margin-right: 5% }

    #slides .transition h1 { font-size: 400% }
    #slides .transition p { font-size: 180%; margin: 0 5% }

    footer,#slides nav{ display: none!important }

    #slides .title h2{ font-size: 240% }
    #slides .title h3{ font-size: 140% }
    #slides .title p{ width:90%; font-size: 150%; line-height:120%; display: none; margin-bottom: 1em }
    #slides .scroll{ bottom: 10px }

    #slides .split .text .box > div { padding: 7% }

}

@media screen and (max-width : 320px) 
{
	.scroll { display:none !important }
	#slides .slide .content { line-height:100%  }
}

@media screen and (max-height : 380px) 
{
	#slides .slide.region .title { display: none }
	#slides .split .text .box > div { line-height:1.1em }
}

@media screen and (min-width : 320px) and (orientation:landscape)
{
    html.smartphone{ height: 100% }
    html.smartphone body *{ display: none!important }
    html.smartphone body{ background: url("images/common/mobile-rotation.png") no-repeat center #fff; background-size: 50% }
}