/* CSS Document */
:root {
    --main-red-color: #B30A0A; /* #f00000;*/
    --hover-red-color: #c9282c;
}

/* @font-face {
    font-family:"FrutigerNextLT-Regular";
    src:url("../fonts/frutigernextlt-regular-eot.eot?") format("embedded-opentype"),
            url("../fonts/frutigernextlt-regular-woff.woff") format("woff"),
            url("../fonts/frutigernextlt-regular-ttf.ttf") format("truetype");
}
@font-face {
    font-family:"FrutigerNextLT-Regular";
    font-weight:bold;
    src:url("../fonts/frutigernextlt-bold-eot.eot?") format("embedded-opentype"),
            url("../fonts/frutigernextlt-bold-woff.woff") format("woff"),
            url("../fonts/frutigernextlt-bold-ttf.ttf") format("truetype");
} */

/** breakpoint media queries:
    1140
    920
    850
    810
    768
    415
    380
    350
    320
 */

/*



*/

*{font-family:"Segoe UI", "San Francisco", "Verdana", "Tahoma", sans-serif;/*"FrutigerNextLT-Regular";*/margin:0;padding:0;line-height:1.36em;box-sizing:border-box;color:#1c1c1c;font-weight:normal;}
input, select, option, textarea, button, submit{font-family:"Segoe UI", "San Francisco", "Verdana", "Tahoma", sans-serif;/*"FrutigerNextLT-Regular";*/font-size:16px;}
a{text-decoration:none;}
a:hover{color:var(--hover-red-color);}
header,div.wrapper,intro,footer{position:relative;top:0;left:0;display:block;}

h1,h3{font-size:70px;line-height:80px;}
h2{font-size:16px;line-height:20px;letter-spacing:0.4em;text-transform:uppercase;}
h4{font-size:50px;line-height:60px;letter-spacing:0.05em;}
body, p{font-size:22px;line-height:30px;letter-spacing:0.025em;}
intro{font-size:30px;line-height:40px;letter-spacing:0.025em;}
small, .small{font-size:16px;line-height:20px;letter-spacing:0.05em;}


html,body{position:relative;top:0;left:0;width:100%;min-height:100%;height:100%;cursor:default;text-shadow:rgba(0,0,0,.01) 0 0 1px;overflow-x:hidden;}

#container{position:relative;top:0;left:0;width:100%;max-width:100%;height:100%;margin:0 auto;padding:20px 0;display:flex;flex-direction:column;}
#container>div.wrapper{position:relative;top:0;left:0;width:1140px;max-width:100%;margin:0 auto;padding:0px 0;}
#container>div.wrapper:not(:last-child){flex:1}
#container .cookie-banner{position:relative;top:-20px;left:0;display:block;width:100%;min-width:100%;background:#d7d7d7;z-index:1;}
#container .cookie-banner:before{position:absolute;top:0;left:50%;width:800%;margin-left:-400%;height:100%;content:'';background:#d7d7d7;}
#container .cookie-banner .wrapper{position:relative;top:0;left:0;margin:0 auto;width:1140px;font-size:14px;line-height:18px;max-width:100%;padding:10px 45px 10px 0px;}
#container .cookie-banner a{font-weight:900;text-decoration:underline;}
#container .cookie-banner .close_btn{position:absolute;top:50%;margin-top:-30px;right:10px;}
#container .cookie-banner .close_btn span {display:block;margin:17px 0 0 0;width:27px;height:27px;cursor:pointer;background:url('../images/img_con_v27_icon_sprite_svg.svg') -0 -16px no-repeat;overflow:hidden;}

#container header{margin-bottom:0px;text-align:center;}
#container header #logo-p20{position:relative;display:block;height:50px;width:auto;margin:0 auto;top:0;left:0;}
#container header h1{font-size:70px;line-height:80px;margin-top:23px;margin-bottom:29px;}
#container header h2{margin:50px 0 32px 0;}
#container header p{margin:50px 0;}
#container header p:last-child{margin-bottom:0;}
#container header .error{color:var(--main-red-color);font-weight:900;}
#container .separator {width:50px;height:4px;background:var(--main-red-color);position:relative;top:0;left:0;margin:44px auto 28px auto;}

#container div.wrapper #form{display:block;width:100%;margin:0 0 30px 0;}
#container div.wrapper .promo, #container div.wrapper .promo + #form{width:50%;display:inline-block;vertical-align:top;margin:0 2.5%;}
#container div.wrapper .promo{width:50%;}
#container div.wrapper .promo + #form{width:39%;}
#container div.wrapper .promo picture{max-width:100%;height:auto;}
#container div.wrapper .promo img{max-width:100%;height:auto;}

#container section{padding:30px 20px;width:100%;}
#container section.darkgrey{background:#1c1c1c;color:#ffffff;}

#container section.additional_contents{text-align:center;margin-bottom:275px;}
#container section.additional_contents h1, #container section.additional_contents h2, #container section.additional_contents h3, #container section.additional_contents h4, #container section.additional_contents p{color:#ffffff;}

#container section a.button{position:relative;top:0;left:0;background:#ffffff;color:#1c1c1c;border:2px solid #1c1c1c;border-radius:2px;transition:all 0.3s ease;height:50px;line-height:46px;font-size:19px;letter-spacing:0.2em;}
#container section.darkgrey a.button{color:#ffffff;border-color:#ffffff;background:#1c1c1c;}
#container section.darkgrey a.button span{position:relative;top:0;left:0;color:#ffffff;z-index:1;}
#container section.darkgrey a.button:before{position:absolute;content:'';width:0%;height:100%;top:0;left:0;background:#ffffff;z-index:0;transition:all 0.3s ease;}
#container section.darkgrey a.button:hover:before{width:100%;}
#container section.darkgrey a.button:hover span{color:#1c1c1c;}
#container section a.button:first-child:last-child{position:relative;display:block;top:0;left:0;margin:60px auto;width:230px;min-width:230px;max-width:230px;}
#container section.additional_contents picture.camera{display:block;width:100%;max-width:1000px;height:auto;margin:20px auto -275px auto;}

#container section.discoveringP20Pro{text-align:center;}
#container section.discoveringP20Pro #ksp {margin-top:60px;display:table;border-collapse:separate;border-spacing:20px;}
#container section.discoveringP20Pro #ksp .item{display:table-cell;width:1%;position:relative;top:0;left:0;}
#container section.discoveringP20Pro #ksp .item img{display:block;margin:0 auto 30px auto;max-width:80%;height:auto;}

#form fieldset{border:0;}
#form .form-title{margin-bottom:0.5em;font-weight:900;text-align:center;}
#form .form-title ~ .form-title{margin-top:2em;}
#form ul, #form ul{display:block;font-size:0;letter-spacing:-1em;}
#form ul, #form ul li{display:block;position:relative;top:0;left:0;font-size:16px;letter-spacing:0;list-style:none;list-style-type:none;width:100%;line-height:0px;min-height:50px;margin-bottom:25px;}
#form ul, #form ul li input{display:inline-block;width:100%;padding:0 5px;text-align:left;line-height:50px;height:50px;}
#form ul li[class^="privacy"]{line-height:25px;min-height:25px;margin-bottom:5px;font-size:0.8em;}
#form ul li[class^="privacy"] label[for^="privacy"]{width:100%;padding:0 5px;text-align:left;display:block;color:#1c1c1c;min-height:25px;line-height:25px;max-height:none;}
#form ul li[class^="privacy"] input[name^="privacy"]{width:auto;vertical-align:middle;line-height:25px;height:25px;width:25px;}
#form ul li[class^="privacy"] a{text-decoration:underline;}
#form li.error input{box-shadow:0 0 3px var(--main-red-color);}
li.error:before{position:absolute;top:0px;left:-20px;width:20px;text-align:center;content:'!';color:var(--main-red-color);font-weight:900;animation:exclamationMark 1s infinite;}
.button{position:relative;top:0;left:0;font-size:19px;letter-spacing:0.2em;color:#ffffff;background:var(--main-red-color);height:50px;line-height:50px;color:#ffffff;text-align:center;border-radius:2px;cursor:pointer;transition:all 0.3s ease;}
.button#install-btn{width:15em;margin:auto;opacity:1;transform:scale(1);transition:opacity 0.4s ease, transform 0.4s ease;}
.button#install-btn.hidden {opacity:0;transform:scale(0.95);pointer-events:none;}
.button:before{position:absolute;content:'';width:0%;height:100%;top:0;left:0;background:#1c1c1c;z-index:0;transition:all 0.3s ease;}
.button:hover:before{width:100%;}
.button[disabled], .button.disabled{background:#b0b0b0;color:#ffffff;cursor:default;;pointer-events:none;}
.button span{position:relative;top:0;left:0;color:#ffffff;z-index:1;}
#form li.small, #form li.small small{font-size:12px;line-height:14px;}
#form li.error-msg{height:auto;font-size:15px;line-height:17px;margin-bottom:10px;color:var(--main-red-color);}

#form ul li[data-text]::after{position:absolute;top:50%;right:0.5em;height:100%;margin:0;color:var(--main-red-color);content:attr(data-text);z-index:1;}

@keyframes exclamationMark {
    0% {top: 0%;}
    50% {top:10px;}
    100% {top:0%;}
}

footer{position:relative;top:0;left:0;line-height:30px;font-size:12px;padding:10px 0px 0px 0px;clear:both;margin:60px 20px 20px 0px;text-align:center;border-top:#1c1c1c solid 1px;}
footer .menu_copy{font-size:12px;line-height:30px;overflow:hidden;width:100%;}
footer .menu_copy .menu{}
footer .menu_copy .menu a{margin-right:10px;}
footer .menu_copy .menu a:last-child{margin-right:0;}
footer .menu_copy .menu a:hover{color:var(--hover-red-color);}
footer .menu_copy .copy{clear:both;margin-top:20px;}

footer .socials{display:table;border-collapse:separate;border-spacing:1em;text-align:center;margin:0 auto 10px auto;}
footer .socials a{display:table-cell;width:20px;height:20px;background:url('../images/img_con_v27_icon_sprite_svg.svg') 0 0 no-repeat;text-decoration:none;color:#000;}
footer .socials a:hover {opacity:0.5;}
footer .socials a.icon_Facebook {background-position: -97px -140px;}
footer .socials a.icon_Twitter {background-position: -150px -141px;}
footer .socials a.icon_Instagram {background-position: -203px -141px;}
footer .socials a.icon_LinkedIn {background-position: -306px -141px;}
footer .socials a.icon_Googleplus {background-position: -27px -165px;}
footer .socials a.icon_Youtube {background-position: -60px -165px;}
footer .socials a.icon_Pinterest {background-position: -350px -141px;}
footer .socials a.icon_Tumblr {background-position: -394px -140px;}
footer .socials a.icon_Snapchat {background-position: -392px -168px;}

@media (min-width:768px){
    #container>div.wrapper, #container .cookie-banner .wrapper{width:720px;}
    #container section.additional_contents{margin-bottom:26vw;}
    #container section.additional_contents picture.camera{margin-bottom:-26vw;}
}
@media (min-width:992px){
    #container>div.wrapper, #container .cookie-banner .wrapper{width:960px;}
    #container section.additional_contents{margin-bottom:275px;}
    #container section.additional_contents picture.camera{margin-bottom:-275px;}
}
@media (min-width:1200px){
    #container>div.wrapper, #container .cookie-banner .wrapper{width:1140px;}
    #container section.additional_contents{margin-bottom:275px;}
    #container section.additional_contents picture.camera{margin-bottom:-275px;}
}
@media (max-width:768px){
    h1,h3{font-size:40px;line-height:50px;}
    h2{font-size:16px;line-height:20px;letter-spacing:0.4em;text-transform:uppercase;}
    h4{font-size:30px;line-height:40px;letter-spacing:0.05em;}
    intro{font-size:22px;line-height:30px;letter-spacing:0.025em;}
    body, p{font-size:22px;line-height:30px;letter-spacing:0.025em;}
    small, .small{font-size:12px;line-height:20px;letter-spacing:0.05em;}

    #container{padding-top:0;}
    #container>div.wrapper{width:100%;padding:20px 0px;}
    #container>div.wrapper:first-child{width:100%;padding:10px 0px 0px 0px;}
    #container>div.wrapper:last-child{padding-bottom:0px;}
    #container .cookie-banner{top:0;}
    #container .cookie-banner .wrapper{width:100%;padding-left:20px;}

    #container header #logo-p20{height:30px;}
    #container header h2{margin-top:20px;margin-bottom:15px;font-size:14px;letter-spacing:0.2em;}
    #container header p:last-child{font-size:18px;}
    #container .separator{margin-top:25px;}
    #container>div.wrapper:first-child .separator{margin-bottom:-25px;}

    #container>div.wrapper:first-child + .wrapper section{padding-top:0;}
    #container>div.wrapper .promo, #container>div.wrapper .promo + #form{display:block;width:100%;margin:0 0 30px 0;}
    #container section.additional_contents{margin-bottom:26vw;}
    #container section.additional_contents picture.camera{margin-bottom:-26vw;}

    #container section.discoveringP20Pro{text-align:center;}
    #container section.discoveringP20Pro #ksp {margin-top:60px;display:block;border-collapse:separate;border-spacing:20px;}
    #container section.discoveringP20Pro #ksp .item{display:block;width:100%;position:relative;top:0;left:0;padding:0 0px;margin-bottom:60px;}
    #container section.discoveringP20Pro #ksp .item:last-child{margin-bottom:0;}
    #container section.discoveringP20Pro #ksp .item img{display:block;margin:0 auto 30px auto;max-width:80%;height:auto;}

    #container footer{margin-top:0;}
}

/* COOKIE POLICY STYLES */
.word.cookie-policy *{font-size:14px;}
.word.cookie-policy h1 {
	text-transform: none;
	font-size: 35px;
	line-height: 280%;
	letter-spacing: 12px;
}
.word.cookie-policy .line {
    height: 3px;
    width: 30px;
    background-color: gray;
    margin-bottom: 35px;
}
.word.cookie-policy p.title {
    font-weight: bold;
    padding: 10px 0;
    word-break: initial;
}
.word.cookie-policy strong, .word.cookie-policy thead tr td{font-weight:900;}
.word.cookie-policy ul, .word.cookie-policy strong ul li{list-style:none;list-style-type:none;}
.word.cookie-policy table{margin: 20px 0;}
.word.cookie-policy tr, .word.cookie-policy td{border: 1px solid #ddd;}