/* Global Styles */
:root {
--primary-color: #e50914;
--dark-color: #141414;
--light-color: #f4f4f4;
--border-color:#222;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Arial', sans-serif;
-webkit-font-smoothing: antialiased;
background: #000;
color: #999;
font-weight: 400;
}
ul {
    list-style: none;
}
h1,
h2,
h3,
h4 {
    color: #fff;
}
a {
    color: #fff;
    text-decoration: none;
}
p {
    margin: 0.5rem 0;
}
audio, canvas, progress, video {
    display: inline-block;
    vertical-align: baseline;
}
img, video {
    width: 100%;
    height: 100%;
}
section{
    border-bottom: 8px solid var(--border-color);
}
.card_text h1{    
    font-size: 3.125rem;
    line-height: 1.1;
    margin-bottom: 0.5rem;
}
.card_text h2{
    font-size: 1.625rem;
    margin: 1rem auto; 
    max-width: 800px;
    font-weight: 400;
}
/*hero*/
#hero{
    background-image: url(./assets/hero.jpg);
    background-size: cover;
    background-position:center ;
    position: relative;
    z-index: 1;
    height: 733px;    
}
#hero::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
    background: rgba(0,0,0,.4);
    background-image: linear-gradient(0deg,rgba(0,0,0,.8) 0,transparent 60%,rgba(0,0,0,.8));
	z-index: -1;
    height:727px;
}


/*header*/
header{
    align-items: center;
    height: 5rem;
    width: 100%;
    padding: 20px 2.5rem 0px 1.6rem;
    display: flex;
    transition: background-color 0.5s ease 0s;
    justify-content: space-between;
    max-width: 1920px;
    position: relative;
    z-index: 1;
    margin: 0 auto;

}
img.logo{
    height: 70px;
    width: 200px;
}
a.small_btn{
    background-color: var(--primary-color);
    color: var(--light-color);
    font-size: .9rem;
    font-weight: 300;
    line-height: 1.5;
    padding: 6px 16px;
    height: 32px;
    border-radius: 5px;
}
.hero_cta{
    margin: 80px auto 0 auto;
    max-width: 950px;
    padding: 75px 0;
    position: relative;
    text-align: center;
    width: 100%;
    z-index: 1;
}
.hero_cta >.card_text h1{
    max-width: 800px;
    font-size: 4rem;
    margin: 0 auto;
}
.hero_cta >.card_text h2{
    max-width: 800px;
    font-size: 1.625rem;
    margin: 1rem auto;
}



.cta_form h3{
    font-size: 1.2rem;
    max-width: none;
    font-weight: 400;
    margin: 0 auto 20px auto;
    padding: 0 5%;
}
form.email_form{
    display: flex;
    flex-direction: row;
    margin: 0 auto;
}
ul.email_form_field{
    flex: 1 0 auto;
    text-align: right;
    vertical-align: top;
}
ul.email_form_field li{
    list-style: none;
    margin-left: 0;
    margin-bottom: 10px;

}
.input_responsive{
    margin: 0;
}
.placement input{
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    height: 70px!important;
    min-width: 500px;
    padding: 10px 10px 0;
}
.placement input:focus{
    border-color: #0071eb;
    outline: none;
}
.placement input:valid{
    box-shadow: none;
    border: 0;
}
.top_placeholder{
    display: none;
}
.placement label input[type="email"]:focus:not(:placeholder-shown) ~ .top_placeholder{
    display: block;
    font-size: 13px;
    font-weight: 600;
    top: 70%;
    transform: translateY(0);
    left: 105px;
    position: absolute;
    transition: font .1s ease,top .1s ease,transform .1s ease;
    z-index: 20;
}
.placement label input[type="email"]:not(:placeholder-shown)  ~ .top_placeholder{
    display: block;
    font-size: 13px;
    font-weight: 600;
    top: 68%;
    transform: translateY(0);
    left: 105px;
    position: absolute;
    transition: font .1s ease,top .1s ease,transform .1s ease;
    z-index: 20;
}
.placement label input[type="email"]:invalid:not(:focus):not(:placeholder-shown){
    border: 0;
    border-bottom: 2px solid #ffa00a;
}
.input_responsive>.placement>label>input[type="email"]:invalid:not(:focus):not(:placeholder-shown)~ .error{
    color: #ffa00a;
    font-weight: 400;
    max-height: 20px;
    display: block;
}


.error{
    display: none;
    color: #ffa00a;
    font-size: 15px;
    margin-bottom: -6px;
    padding: 6px 3px;
    text-align: left;
    margin-left: 92px;
}

.form_btn{
    display: inline-block;
    flex: 1 0 auto;
    text-align: left;
    vertical-align: top;
}

.form_btn button.big_btn{    
    flex: 1 1 auto;
    padding: 0 1em;
    text-align: center;
    font-size: 1.875rem;
    min-height: 71px;
    align-items: center;
    display: inline-flex;
    flex-direction: row;
    line-height: normal;
    width: auto;
    border: none;
    border-bottom-left-radius: 0;
    border-left: 1px solid #333;
    border-top-left-radius: 0;
    margin: 0!important;
    padding: 0 1em;
}
.btn_red{
    background-color: #e50914;
    background-image: linear-gradient(180deg,#e50914,#db0510);
    box-shadow: 0 1px 0 rgb(0 0 0 / 45%);
    color: #fff;
}
button.big_btn.btn_red:focus:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.085em #85050b;
}
button.big_btn.btn_red:active {
    background: #bb0a12;
}
.btn_red.hover, .btn_red:focus, .btn_red:hover {
    background: #f40612;
    box-shadow: 0 1px 0 rgb(0 0 0 / 45%);
}

#btn_text{
    flex: 1 1 auto;
    padding: 0.5rem 0;
    text-align: center;
    font-size: 1.875rem;
}

#btn_arrow {
    flex: 0 1 auto;
    height: 2em;
    margin: 0 0 0 0.5em;
    position: relative;
    width: 1em;
}
#btn_arrow img#arrow{
    width: 100%;
    height: 100%
}

.story_card{
    background: transparent;
    color: #fff;
    margin-bottom: 0;
    padding: 70px 45px;
    position: relative;
}
.story_container{
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1100px;
}
#story_card_2 .story_container,#story_card_4 .story_container{
    flex-direction: row-reverse;
}

.story_container .card_text{
    flex: 0 1 auto;
    height: 100%;
    padding: 0 3rem 0 0;
    width: 52%;
    z-index: 3;
}
.story_container .card_text h1{
    font-size: 3.125rem;
    line-height: 1.1;
    margin-bottom: 0.5rem;
    font-weight: 500;
}
.story_container .card_text h2{
    font-size: 1.625rem;
    font-weight: 400;
}
.story_container .card_img{
    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    height: 100%;
    width: 48%;
}
#story_card_2 .story_container .card_img>.story_card_animation_container,#story_card_5 .story_container .card_img.story_card_animation_container{
    margin:-8% 0 -4% -15%;
}
.story_card_animation_container{
    overflow: hidden;
    position: relative;
}
#story_card_1 .story_card_animation{
    height: 100%;
    left: 50%;
    max-height: 54%;
    max-width: 73%;
    position: absolute;
    top: 46%;
    transform: translate(-50%,-50%);
    width: 100%;
}
#story_card_2 .story_card_animation{
    align-items: center;
    background: #000;
    border: 2px solid hsla(0,0%,100%,.25);
    border-radius: 0.75em;
    bottom: 8%;
    box-shadow: 0 0 2em 0 #000;
    display: flex;
    left: 50%;
    margin: 0 auto;
    min-width: 15em;
    padding: 0.25em 0.65em;
    position: absolute;
    transform: translateX(-50%);
    width: 60%;
    z-index: 10;
}
#story_card_2 .story_card_animation_image{
    flex-grow: 0;
    flex-shrink: 0;
    margin: 0 1em 0 0;
}
#story_card_2 .story_card_animation_image img{
    height: 5em;
}
.story_card_animation_text{
    flex-grow: 1;
    flex-shrink: 1;
    margin: 0.3em 0
}
.text-0{
    color: #fff;
    font-size: 1em;
    font-weight: 500;
}
.text-1{
    color: #0071eb;
    font-size: .9em;
    font-weight: 400;
}
#story_card_2 .story_card_animation_custom{
    background: url(./assets/download-icon.gif) 50% no-repeat;
    background-size: 100%;
    content: "";
    display: block;
    flex-grow: 0;
    flex-shrink: 0;
    height: 3em;
    outline: 2px solid #000;
    outline-offset: -2px;
    width: 3em;
}


.story_card_img{
    position: relative;
    z-index: 2;
}
img.story_card_img{
    border: 0;
    height: auto;
    max-width: 100%;
}

/*html details element*/
.story_card#faq>.story_container>.card_text{
    width: 100%;
    padding: 0;
    text-align: center;
}
.faq_list{
    margin: 2em auto;
    width: 75%;
}
.faq_list_item{
    list-style-type: none;
    margin: 0 0 8px;
    font-size: 1.625rem;
}
.faq_question{
    border: 0;
    font-weight: 400;
    margin-bottom: 1px;
    padding: 0.8em 2.2em 0.8em 1.2em;
    position: relative;
    width: 100%;    
    background:  url(./assets/plus.svg) no-repeat;
    background-color:#303030 ;
    background-position: center right 2.2em;
    list-style: none;
    display: block;
    text-align: left;
}
details[open].faq_list_item> summary.faq_question{
    background: url(./assets/x.svg) no-repeat;
    background-color: #303030;
    background-position: center right 2.2em;
  }
.faq_answer{
    max-height: 1200px;
    transition: max-height .25s cubic-bezier(.5,0,.1,1);
    background: #303030;
    display: block;
    text-align: left;
}
.faq_answer span{
    display: inline-block;
    padding: 1.2em;
}
#faq_cta .error{
    margin-left: 174px;
}
#faq_cta .top_placeholder{
    top: 84%;
    left: 420px;
    color: #737373;
}
#faq_cta .placement label input[type="email"]:focus:not(:placeholder-shown) ~ .top_placeholder{
    top: 84%;
    left: 420px;
    color: #737373;
}
#faq_cta .placement label input[type="email"]:not(:placeholder-shown)  ~ .top_placeholder{
    top: 83%;
    left: 420px;
    color: #737373;

}

/*Footer*/
.footer_card{
    margin: 0 auto;
    max-width: 1000px;
}
.site_footer_wrapper{
    color: #737373;
    font-size: 1em;
    margin-top: 0;
    min-width: 190px;
    padding-bottom: 20px;
    position: relative;
    width: 100%;
}
.site_footer_wrapper p,.site_footer_wrapper a{
    color: #737373;
    font-size: 1em;
}
.footer_divider{
    display: none;
    border-top: 1px solid #e6e6e6;
    height: 0;
    width: 100%;
}
.site_footer{
    margin: 0 auto;
    padding-top: 0;
    width: 90%;
}
.footer_top {
    margin: 0 0 30px;
    padding: 0;
}
.footer_top a {
    color: #737373;
}
.footer_links{
    box-sizing: border-box;
    font-size: 13px;
    max-width: 1000px;
}

.footer_link_item {
    box-sizing: border-box;
    display: inline-block;
    margin-bottom: 16px;
    min-width: 100px;
    padding: 0 12px 0 0;
    vertical-align: top;
    width: 24%;
}

p.footer_country {
    font-size: 13px;
    margin-top: 24px;
}