/*General*/
/*COMMON to ALL PAGES*/

*
{
    margin: 0;
    padding: 0;
    font-family: 'Hack', sans-serif;
    color: var(--Mid_grey);
    list-style: none;
    border-radius: var(--Rd_angles);
}

html, body {
    
    height: 100%; 
    background-color: var(--bg_color1);
    overflow-x: hidden;
}

.body_wrapper {
    max-width: 1920px;
    margin: 0 auto;
/*    overflow-x: hidden;*/
}

h1{ margin-top: 4em;
    margin-bottom: 2em;
    font-size: var(--h1);}

h2{ font-size: var(--h2);}

p, ul li { font-size: var(--text);}

a {
    text-decoration: none;
    color: var(--Mid_grey);
    
}
a:hover {color: var(--CNP_Green)}

button {border: none; background-color: transparent; cursor: pointer;}

.display_br {display: none}

@font-face {
  font-family: 'Hack';
  src: url('fonts/hack-regular.woff2?sha=3114f1256') format('woff2'), url('fonts/hack-regular.woff?sha=3114f1256') format('woff');
  font-weight: 400;
  font-style: normal; font-display: swap;}

@font-face {
  font-family: 'Hack';
  src: url('fonts/hack-bold.woff2?sha=3114f1256') format('woff2'), url('fonts/hack-bold.woff?sha=3114f1256') format('woff');
  font-weight: 700;
  font-style: normal;font-display: swap;
}

@font-face {
  font-family: 'Hack';
  src: url('fonts/hack-italic.woff2?sha=3114f1256') format('woff2'), url('fonts/hack-italic.woff?sha=3114f1256') format('woff');
  font-weight: 400;
  font-style: italic;font-display: swap;
}

@font-face {
  font-family: 'Hack'; 
  src: url('fonts/hack-bolditalic.woff2?sha=3114f1256') format('woff2'), url('fonts/hack-bolditalic.woff?sha=3114f1256') format('woff');
  font-weight: 700;
  font-style: italic;font-display: swap;
}
/* --------------- Variable  ----------- */

:root {
    
    --Grad_color: linear-gradient(to right, #8DC8C8, #47B448, #FFBF89);
    --Grad_color_diag: linear-gradient(to bottom right, #8DC8C8, #47B448, #FFBF89);
    
    --CNP_Green : #47B448;
    
    --CNP_Green_hover : #137E13;
/*    rgb(64,139,49)*/
    --CNP_Gold  : rgb(236,134,40);
    --Red       : rgb(204,39,39) ;
    
    --Darkest_grey : #32333d;
    --Mid_grey     : #373740;
    --Light_grey   : #899B9B;
/*        #BDC5C5;*/
/*        #adadb1*/
    --divider      : rgba(96, 85, 85, 0.12);
    --disabled     : rgba(255,255,255, 0.2);
    
    --Bg_grey      : #27272f;
    --bg_color1    : #ECEDED;
    
    --VL_green1    : rgb(237, 252, 229);
    --VL_green2    : rgb(175, 224, 182);
    
    
    --Rd_angles    : 5px;
    --Margin       : 8px;
    --Margin_phone       : 4px;
    --Margin2      : 16px;
    --Margin2_phone      : 8px;
    
    --Padding      : 12px;
    --Padding_phone      : 6px;
    --Padding2     : 18px;
    --Padding2_phone     : 9px;
    
    
    --Hero1 : 66px;
    --Hero2 : 41px;
    --h1    : 40px;
    --h2    : 25px;
    --h3    : 18px;
    --action_button: 16px;
    --text  : 16px;
    --subtext : 14px;
    
    
    --h1_phone : 18px;
    --h2_phone : 15px;
    --h3_phone : 13.5px;
    --text_phone : 12px;
    --sub_text_phone : 9px;
    
    --h1_tablet : 22px;
    --h2_tablet : 17px;
    --h3_tablet : 15.5px;
    --text_tablet : 14px;
    --sub_text_tablet : 11px;
        
    
    --palletton_Green1 : #A0E4A0;
    --palletton_Green2 : #70CF70;
    --palletton_Green3 : #47B447;    
    --palletton_Green4 : #2A9E2A;
    --palletton_Green5 : #137E13;
    
    --palletton_Turquise1 : #8DC8C8;  
    --palletton_Turquise2 : #569F9F;
    --palletton_Turquise3 : #358787;
    --palletton_Turquise4 : #1F7777;
    --palletton_Turquise5 : #0E5F5F;
    

    --green_text1: #8AB18A;
    --green_text2: #B5CDB5;
    --green_text3: #619661;
}

/* --------------- OLDER COLOR SYSTEM ----------- */


.Shadow {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
.CNPGreen{color: var(--CNP_Green);}
.bg_DKGREY {background-color: var(--Darkest_grey);}    
.bg_GREEN {background-color: var(--CNP_Green);}
.bg_0 {background-color: var(--bg_color1)}

/*
.bg_palletton_Green1 {background-color: #A0E4A0;}
.bg_palletton_Green2 {background-color: #70CF70;}
.bg_palletton_Green3 {background-color: #47B447;}
.bg_palletton_Green4 {background-color: #2A9E2A;}
.bg_palletton_Green5 {background-color: #137E13;} 


.palletton_Turquise1 {background-color: #8DC8C8;}  
.palletton_Turquise2 {background-color: #569F9F;}  
.palletton_Turquise3 {background-color: #358787;}  
.palletton_Turquise4 {background-color: #1F7777;}  
.palletton_Turquise5 {background-color: #0E5F5F;}  


.palletton_Gold1 {background-color: #FFD6B4;}  
.palletton_Gold2 {background-color: #FFBF89;}  
.palletton_Gold3 {background-color: #E19759;}  
.palletton_Gold4 {background-color: #C67634;}  
.palletton_Gold5 {background-color: #9E5518;} 
#358787 #E19759

.palletton_Red1 {background-color: #FFB4B4;} 
.palletton_Red2 {background-color: #FF8989;} 
.palletton_Red3 {background-color: #E15959;} 
.palletton_Red4 {background-color: #C63434;} 
.palletton_Red5 {background-color: #9E1818;} 
*/

/* --------- -------------------- Color used for  Use Case Tiles START ------------------------------- */
/*background-image: linear-gradient(to bottom right, rgba(255, 191, 137, 0.2) 15%, rgba(71, 180, 72, 0.2) , rgba(141, 200, 200, 0.2), rgba(141, 200, 200, 0.0) , var(--bg_color1));*/

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

/*

.White{color: #FFF;}

.CNPLightGrey{color: #ECEDED;}
.CNPDarkGrey{color: #3C474C;}
.CNPMediumGrey{color: #969F9D; }
.CNPblue{color: #657876;}
.CNPBrownBG{color: #847B72;}
.BGLightGrey { background-color: #ECEDED;}
.BGDarkGrey {background-color: #3C474C;}
.BGBlue {background-color: #657876;}

.GreenBG {color: black;}
*/

/* --------- -------------------- STANDARD ELEMENT --- START ------------------------------- */

/*
.width4     {width: 21.5%;}
.width3     {width: 31%;}
.width2e    {width: 47.5%;}
.width3e2b  {width: 60%;}
*/
.width100   {width: 100%;}

.heigh25pct {min-height: 20vh;}
.heigh50pct {min-height: 40vh;}
.heigh70pct {min-height: 60vh;}
.heigh80pct {min-height: 80vh;}
.heigh100pct{min-height: 85vh;}

.CenterXY { 
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.CenterX{text-align: center}
.CenterY {
    width: 100%;
    position: relative;
    top: 50%;
    -webkit-transform: translate(0%, -50%);
    -moz-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    -o-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
}

.CenterXBottomY { 
    margin: 0;
    position: absolute;
    bottom: 10%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.CenterXBottomY0 { 
    margin: 0;
    position: absolute;
    bottom:-15%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/* --------- -------------------- STANDARD ELEMENT --- END ------------------------------- */

/* -----------------  Shape & Object  ------------------------*/
section{
   
    border-radius: var(--Rd_angles);
    margin: 0 var(--Margin2) ;
    vertical-align: middle;
    padding : 5em var(--Padding2);
    background-color: transparent;
    text-align: center;
    position: relative;
    z-index: 0;
}

.section_icon{
    opacity: 0.2;
    z-index:-2;
    position: absolute;
/*    overflow: hidden; mod*/
}

.Open_btn {
    color: var(--Light_grey);
    background-color: transparent;
    position: absolute;
    font-size: var(--text);
    cursor: pointer;
    border: none;
}

.Open_btn::after {
    content: "\27F6";
    padding-left: 5px;
    font-size: 1rem;
    color: var(--Light_grey);
}

.Open_btn:hover{
    color: var(--CNP_Green);

}
.Open_btn:hover > svg > path{
    fill: var(--CNP_Green);
}

.Open_btn:hover::after {
    color: var(--CNP_Green);
}

.frame_GREEN {
    display: inline-block;
    border-radius: var(--Rd_angles);  
    border-style: solid; 
    border-color: var(--CNP_Green); 
    padding: var(--Padding2 );
    margin: var(--Margin);
    color: var(--CNP_Green);
    font-size: var(--action_button);
}

.frame_GREEN:hover{
    background-color: var(--CNP_Green_hover);
    border-color: var(--CNP_Green_hover);
    color: white;
    
}

.Call2Action{
    display: inline-block;
    color: white;
        border-style: solid; 
    border-color: var(--CNP_Green); 
    padding: var(--Padding2 );
    margin: var(--Margin);
    font-size: var(--action_button);    
    text-align: center;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.Call2Action:hover{
    background-color: var(--CNP_Green_hover);
    border-color: var(--CNP_Green_hover);
    color: white;
    color: white;
}

/* ------------------------  HEADER --- START  ------------------------*/
.header_wrapper
{
    max-width: calc(1920px - (var(--Margin)*2) );
    margin: 0 auto;
    padding: var(--Padding)  ;
    height: 4.5em;
    text-align: center;} 

.Underheader {
    padding: var(--Padding)  ;
    height: 4.5em;}

header
{
    background-color:  var(--bg_color1);
    color: var(--Mid_grey);
    height: auto;
    position: fixed;
    left: 0;
    Top: 0;
    width: 100%;
    z-index: 100;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}

header.anim3 {
    visibility: hidden;
    animation-name: header;
    animation-delay: 4s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    
    
}

@keyframes header {
        0%   {transform: translate(0px, -4.5em); visibility: visible;}
        100% {transform: translate(0px, 0px) ;visibility: visible;}
    }

.LogoContainer
{
    display: inline-block;
    vertical-align: middle;
    float: left;
}

.HeaderLogo { width: 4em; }

.HeaderBrand
{

    font-size: 1.8em;
    font-weight: bold;
    float: right;
    padding-left: 25px;
    padding-top: 0.5em;
    
}

header nav ul li
{
    display: inline-block;
    text-transform:  uppercase;
}

header nav ul li a
{
/*    color: var(--Mid_grey);*/
    text-decoration: none;
    border-bottom: none;    
}

#nav_option ul li {
    padding: var(--Padding2);
    font-size: 1em;
}

#nav_login  {
    float: right;
    
}

#burger_cb { display: none }
    
#burgerbutton{
    width: 40px;
    height:40px;
    position: absolute;
    top: 0.5em;
    right: 0;
    margin: var(--Margin);
    display: none;

}

/* ---------Burger Button and Animation  -- */
.burgerbutton{
    width:100%;
    height:8px;
    background-color:var(--Mid_grey);
    display:block;
    position: absolute;
    border-radius: var(--Rd_angles); /*    2px;*/
    transition: all .5s ease;
}

.burgerbutton:nth-child(1){
/*    top:0%;*/
    top:0px;
}
.burgerbutton:nth-child(2){
/*    top:50%;*/
    top:15px;
    right:0px;
}
.burgerbutton:nth-child(3){
/*    top:100px;*/
    top:30px;
}


#burger_cb:checked ~ label>.burgerbutton:nth-child(1){
    animation-name: top_bar;
    animation-delay: 0s;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    }

    @keyframes top_bar {
        0%   {transform: translate(0px, 0px);}
        50%  {transform: translate(0px, 15px);}
        100% {transform: translate(0px, 15px) rotate(45deg);}
    }
    
#burger_cb:checked ~ label>.burgerbutton:nth-child(2){
    animation-name: middle_bar;
    animation-delay: 0s;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    }
    
    @keyframes middle_bar {
        0%   {transform: translate(0px, 0px);}
        50%  {background-color: transparent;}
        100% {background-color: transparent;}
    }
    
#burger_cb:checked ~ label>.burgerbutton:nth-child(3){
    animation-name: bottom_bar;
    animation-delay: 0s;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    }
    
    @keyframes bottom_bar {
        0%   {transform: translate(0px, 0px);}
        50%  {transform: translate(0px, -15px);}
        100% {transform: translate(0px, -15px) rotate(-45deg);}
    }
    
    
#burger_cb ~ label>.burgerbutton:nth-child(1){
    animation-name: top_bar_r;
    animation-delay: 0s;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    }

    @keyframes top_bar_r {
        0% {transform: translate(0px, 20px) rotate(45deg);}
        50%  {transform: translate(0px, 20px);}
        100%   {transform: translate(0px, 0px);}
    }
    
#burger_cb ~ label>.burgerbutton:nth-child(2){
    animation-name: middle_bar_r;
    animation-delay: 0s;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    
    }
    
    @keyframes middle_bar_r {
        0% {background-color: transparent;}
        50%  {transform: translate(0px, 0px);}
        100%   {transform: translate(0px, 0px);}
    }
    
#burger_cb ~ label>.burgerbutton:nth-child(3){
    animation-name: bottom_bar_r;
    animation-delay: 0s;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    
    }
    
    @keyframes bottom_bar_r {
        
        0% {transform: translate(0px, -20px) rotate(-45deg);}
        50%  {transform: translate(0px, -20px);}
        100%   {transform: translate(0px, 0px);}
    }

/* ---------Burger Button and Header Menu  -- */

#burger_cb:checked ~ .header_wrapper {
/*    background-color: red;*/
/*    height: 100vh;*/
    animation-name: Opening_menu;
    animation-delay: 0s;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    }

    @keyframes Opening_menu {
        100% {height: 100vh;}
    }

/*
#burger_cb: ~ .header_wrapper {
    animation-name: Closing_menu;
    animation-delay: 0s;
    animation-duration: 0.5s;
    animation-fill-mode: both;
    }

    @keyframes Closing_menu {
        100% {height: 4.5em;}
    }
*/

#burger_cb:checked ~ .header_wrapper> #nav_option {
    display: block;
    font-size: 1.25em;
    margin :  var(--Margin);
    padding :  var(--Padding2);
    white-space: pre;
    position: absolute;
    top: 25%;
    left: 0%;
    -webkit-transform: translate(-0%, -50%);
    -moz-transform: translate(-0%, -50%);
    -ms-transform: translate(-0%, -50%);
    -o-transform: translate(-0%, -50%);
    transform: translate(-0%, -50%);
    text-align: left;

}

#burger_cb:checked ~ .header_wrapper> #nav_login {
    display: inline-block;
    margin: 0 auto;
    padding :  var(--Padding2);
    position: absolute;
    bottom: 0;
    left: 50%;  
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 1.25em;
    white-space: nowrap;
    
}

/* ------------------------  HEADER --- END ------------------------*/

/* ------------------------  SECTION : HERO ------------------------*/

#hero {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 40% 60%;
    grid-template-rows: 100%;
	overflow: hidden;}

#hero_title > div {
    position: absolute;
    top: 25%;
    font-weight: bolder;
    text-align: left;
    text-transform: uppercase;
    width: 100%;
}

#MainTitle {
    position: relative;
    font-size: var(--Hero1);
    padding : var(--Padding2);
    margin: 1em 0 0 0 ;
    line-height: 0.85em;
/*    word-spacing: 1em;*/

}
#MainTitle.anim1{
    animation-name: hero_title;
    animation-delay: 2s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    visibility: hidden;
    
}

.scrolling-words-box {	
  height: var(--Hero2);
/*  margin: auto;*/
  overflow: hidden;
}

.scrolling-words-box ul {
  margin-left: .5em;
  padding: 0;
  animation: scrollUp 5s infinite;
  animation-fill-mode: forwards;

}

.scrolling-words-box li {
  	display: flex;
  	align-items: flex-start;
  	justify-content: flex-start;
	font-size: var(--Hero2);
}

@keyframes scrollUp {
	
/* 7 elements _ 7 times frames _ 6 moves ... 	*/
	14.29%	{transform: translateY(0);}
  	28.57%	{transform: translateY(-14.29%);}
  	42.86% 	{transform: translateY(-28.57%);}
  	57.14%	{transform: translateY(-42.86%);}
	71.43%	{transform: translateY(-57.14%);}
	85.71%	{transform: translateY(-71.43%);}	
	100%	{transform: translateY(-85.71%);}

}

#SubTitle
{
    font-size: var(--Hero2);
    color: var(--Light_grey); 
    /* font-weight: normal; */
    text-transform: lowercase;
    padding :  var(--Padding2);
    margin: 0 ;
    width: 40%;
	display: flex;
	flex-wrap: wrap;
}

#SubTitle.anim2{
    animation-name: hero_title;
    animation-delay: 2.5s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    visibility: hidden;
    
}

@keyframes hero_title {
        
        0%   {opacity: 25%; visibility: visible;}
        50%  {opacity: 100  %; visibility: visible;}
        100% {opacity: 100%; visibility: visible;}
    }

#hero_images {
    padding: 0 0 0 4em;
    position: relative;

}

#hero_img{

    width : 90%; 
    z-index: 3;
    margin: auto;
    
}

#overlay {
    position: absolute;
    top: 0;
    left: 0;
/*    transform: translate(80%, 160%);*/
    /*      
    
    width: 30vmax;
    
    

    position: absolute;
    top: 0;
    width: 45%;
    height: 200px;
    */
    

}

#overlay > img {
    position: absolute;
/*
    top: 0;
    left: 0;
    transform: translate(80%, 160%);
*/
    width: 450px;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
    z-index: 1;
    
    --start_x: 250%
}

#img1 {      
    
    --indent1_X: 115%;
    --indent1_Y: 550px;
    /*    --indent1_Y: 250%;*/
    transform: translate(var(--indent1_X), var(--indent1_Y));
    z-index: 3;
}

#img1.anim { 
    visibility: hidden;
    animation-name: hero_overlay1;
    animation-delay: 3s;
}

@keyframes hero_overlay1 {
        
        0%   {transform: translate(var(--start_x), var(--indent1_Y)); visibility:visible}
        100% {transform: translate(var(--indent1_X), var(--indent1_Y)); visibility:visible}
    }

#img2 {
    z-index: 2;
    --indent2_X: 130% ;
    --indent2_Y: 450px ;
/*    --indent2_Y: 155% ;*/
    transform: translate(var(--indent2_X), var(--indent2_Y)); 
}

#img2.anim { 
        visibility: hidden;
        animation-name: hero_overlay2;
        animation-delay: 3s;
}

@keyframes hero_overlay2 {
        
        0%   {transform: translate(var(--start_x), var(--indent2_Y)); visibility:visible}
        100% {transform: translate(var(--indent2_X), var(--indent2_Y)); visibility:visible}
    }
#img3 {
    z-index: 1;
    --indent3_X: 145%;
    --indent3_Y: 350px;
/*    --indent3_Y: 80%;*/
    transform: translate(var(--indent3_X), var(--indent3_Y));
        
}
#img3.anim { 
        visibility: hidden;
        animation-name: hero_overlay3;
        animation-delay: 3s;
}
@keyframes hero_overlay3 {
        
        0%   {transform: translate(var(--start_x), var(--indent3_Y)); visibility:visible}
        100% {transform: translate(var(--indent3_X), var(--indent3_Y)); visibility:visible}
}
#hero_img_s{
    display: None;
    width : 96%;
    height: auto;
    z-index: 1;
    margin: 2em  auto;
    vertical-align: middle;
    
    
}
.anim0 {
    animation-name: hero_img;
    animation-delay: 0s;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    visibility: hidden;
}
#hero_img.anim00 {
    animation-name: hero_img;
    animation-delay: 0.5s;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    visibility: hidden;
}
@keyframes hero_img {
        
        0%   {transform: translateX(-25%); opacity: 25%; visibility: visible;}
        50%  {transform: translateX(-25%);opacity: 100%; visibility: visible;}
        100% {transform: translateX(0%); opacity: 100%; visibility: visible;}
    }
/* ------------------------  SECTION  Features ------------------------*/

/* ------------------------  SECTION  Testimonial ------------------------*/

#Testimonials { 
    padding-top: 9em;
    padding-bottom: 7em;
    position: relative;
    z-index: 1;    
}

#Speak_Icon { 
    top: 0px;
    transform: translate(-50%,  0%);
    width: 45%;
}


#quote_row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 2em;
}

blockquote {
    background-color: var(--bg_color1);
    height: auto;
/*    font-size: 1.2vmax;*/
    text-align: left;
    border-radius: var(--Rd_angles);
    text-align: left;
    margin : var(--Margin);
    padding: var(--Margin);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
/*    clear: right; */

}

blockquote > p {
    margin: var(--Margin2);
    padding-left: 2.5em;
    padding-right: 2.5em;
/*    font-size: 1vmax;*/
    font-weight: bold;
}

blockquote:before{
    font-family: Georgia, serif;
    content: "\201C";  font-size: 5em; 
    color: var(--Light_grey);
    opacity: 0.4;
    float: left;
    margin-top: -0.1em;
}

blockquote:after{
    font-family: Georgia, serif;
    content: "\201D";  font-size: 10em;
    color: var(--Light_grey);
    opacity: 0.125;
    float: right;
    margin-top: -0.4em;
    margin-bottom: -0.7em;
    line-height: 1em;
    z-index: -1;
}

cite {
    display: block;
    text-align: center;
    margin: var(--Margin);
    color : var(--Light_grey);
    font-size: var(--subtext);
}

cite:after {
    display: block;
    text-align: center;
    content: "\02605\02605\02605\02605\02605";
    color: #E19759;
/*        var(--CNP_Gold)*/
}


blockquote.quote_animationL1 {
    animation-name: show_quote_L;
    animation-delay: .5s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    visibility: hidden;
}

blockquote.quote_animationL2 {
    animation-name: show_quote_L;
    animation-delay: 1.5s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    visibility: hidden;
}

blockquote.quote_animationL3 {
    animation-name: show_quote_L;
    animation-delay: 2.5s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    visibility: hidden;
}


@keyframes show_quote_L {

    0%   {transform: translateX(-50%); opacity: 25%; visibility: visible;}
/*    50%  {transform: translateX(-25%);opacity: 100%; visibility: visible;}*/
    100% {transform: translateX( 0%); opacity: 100%; visibility: visible;}
}


blockquote.quote_animationR1 {
    animation-name: show_quote_R;
    animation-delay: 1s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    visibility: hidden;
}

blockquote.quote_animationR2 {
    animation-name: show_quote_R;
    animation-delay: 2s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    visibility: hidden;
}

blockquote.quote_animationR3 {
    animation-name: show_quote_R;
    animation-delay: 3s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    visibility: hidden;
}

@keyframes show_quote_R {

    0%   {transform: translateX(50%); opacity: 25%; visibility: visible;}
/*    50%  {transform: translateX(25%);opacity: 100%; visibility: visible;}*/
    100% {transform: translateX(0%); opacity: 100%; visibility: visible;}
}
/* ------------------------  SECTION  Use Case ------------------------*/

#toolbox_icon { 
    top: 0px;
    transform: translate(-50.9%,  -10%);
    width: 100%;        
}

#UC {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: calc( var(--Margin2) *2 );
    margin-bottom: 2em;
    padding-top: 4em;
    text-align: center;
}

#UC article { 
	padding: 2em 0 2em 0;
	background-color: var(--bg_color1);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

} 
    
.back-card  li {
    color: var(--Mid_grey);
    margin: 0.5rem 1rem;

}
    
.back-card ul {
    list-style: none;
    text-align: left;
    
/*    font-size: 1vmax;*/
    color:  inherit;
    text-align: left;
    
/*    width: 75%;*/
    margin: 0;
    padding: 0;
    
/*
    position: absolute;
    top: 50%;
    left: 0%;
    -o-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    -moz-transform: translate(0%, -50%);
    -webkit-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
*/
    }

.back-card p{
/*    color: var(--palletton_Green5);*/
/*	color: var(--Light_grey);*/
/*    color: #EEFCEE;*/
    font-weight: bold;
    margin: 1rem 1rem;
/*    opacity: 0.5;*/
    font-size: 1.15em;

    }
/*.front-card > h2 {color: var(--Light_grey );}*/

.back-card   ul li:before {   
    content: "\25AA"; 
/*	color: var(--CNP_Green_hover ); */
	color: var(--Light_grey);
    font-size: 1em; padding-right: 5px; margin-left: 10px;
/*    line-height: 1vmax;*/
    }

.back-card g {
    
/*    fill : var(--CNP_Green_hover); */
    fill: black;
    margin: 0;
    padding: 0;
    scale : 6;
    opacity: 0.5;
    
}

.front-card g {
/*    fill:  var(--Light_grey);*/	
/*	fill: var(--palletton_Green1);*/
    margin: 0;
    padding: 0;
    scale : 4;
    opacity: 0.75;
    
}

.front-card svg {
/*    position: absolute;*/
    width: 100px;
    height: 100px;
    margin-top: 1em;
    padding: 0px;
    bottom: 0%;
    right: 0%;
	text-align: center;
    
}

#flip_card_1 > .front-card g {fill: #FFBF89;}
#flip_card_2 > .front-card g {fill: #8DC8C8;}
#flip_card_3 > .front-card g {fill: #59B96A;}
#flip_card_4 > .front-card g {fill: #8DC8C8;}
#flip_card_5 > .front-card g {fill: #59B96A;}
#flip_card_6 > .front-card g {fill: #FFBF89; stroke: #FFBF89;}


#flip_card_1 > .back-card   ul li:before {color: #FFBF89;}
#flip_card_2 > .back-card   ul li:before {color: #8DC8C8;}
#flip_card_3 > .back-card   ul li:before {color: #59B96A;}
#flip_card_4 > .back-card   ul li:before {color: #8DC8C8;}
#flip_card_5 > .back-card   ul li:before {color: #59B96A;}
#flip_card_6 > .back-card   ul li:before {color: #FFBF89;}

#flip_card_1 > .front-card > h2 {color: #FFBF89; );}
#flip_card_2 > .front-card > h2 {color: #8DC8C8; );}
#flip_card_3 > .front-card > h2 {color: #59B96A; );}
#flip_card_4 > .front-card > h2 {color: #8DC8C8; );}
#flip_card_5 > .front-card > h2 {color: #59B96A; );}
#flip_card_6 > .front-card > h2 {color: #FFBF89; );}



.back-card > svg {
	display: None;
/*    position: absolute;*/
    width: 140px;
    height: 140px;
    margin: 0px;
    padding: 0px;
    bottom: 0%;
    right: 0%;
    z-index: -10;
    
    
}
/* ------------------------  SECTION  Pricing ------------------------*/

.Pricing{
    display: inline-table;
    width: 300px;
    margin :  var(--Margin);
    border-radius: var(--Rd_angles);
}

.Pricing > .Membership_Content h2 {

    margin: 1.5em 0;
    font-size: var(--h2);}


#PriceBoxes > h2 a {

    color: var(--Light_grey);
}


#PriceBoxes > h2 a:hover {

    color: var(--CNP_Green);
}


#PriceBoxes .payment_info {
    padding: 0;
    margin: 0;
    font-size: var(--text);
    color: var(--Light_grey);
}


.Pricing > .Membership_Content p {

    margin: 1em 0;
/*    font-size: 0.9vmax;*/
    color : #497171;
/*            color: var(--Light_grey); */

}

.Pricing > .Membership_Content .C_Profile {min-height: 2.5em; }

.Pricing > .Membership_Content ul {
    margin: 3em 1em;
    height: 7em;
}

.Pricing > .Membership_Content ul li {
    margin: 0.5em;
}

.Pricing > .Membership_Content hr {

    margin: var(--Margin);
    border-radius: var(--Rd_angles);
    border: .1em solid #497171;
    }

.border2{background-color: white;}
.border3{background-color: #899B9B;}
.border4{background-color: #BDC5C5;}

.Membership_Content { 
    position: relative;
    min-height: 10em;
    }

.Membership_Content > .Price_Tag { 
        min-height: 3em;
        margin: 1em 0 0 0;
        font-size: var(--h2);
        font-weight: bold;
    }
.Membership_Content > .clear{ min-height: 4em;}
.Membership_Content > a .Button_2_Account {
    margin: 0;
    width: 100%;

    position: absolute;
    bottom: 30px;
    left: 50%;

    --X: -50%;
    --Y: -50%;

    -ms-transform:      translate(var(--X),var(--Y));
    -webkit-transform:  translate(var(--X),var(--Y));
    -moz-transform:     translate(var(--X), var(--Y));
    -o-transform:       translate(var(--X), var(--Y));
    transform:          translate(var(--X), var(--Y));
}


/* ------------------------  Section FAQ & Blog  ------------------------*/


/* Do I need this ???  */ 
.TextBG
{
    object-fit: contain;
    height: auto;
    max-width: 80em;
    margin: 80px Auto;
    text-align: center;
    clear: both;
}

/*Notice that the Wrapper 3, CNPHow use class defined before*/

#BlogOverview
{
    overflow: hidden
}

#Blog_icon {
    top: 50%;
    left: 50%;
    transform: translate(-50%,  -45%);
    height: 100%;        
}

.clearfix
{     overflow: auto;}

.BlogOverview article
{
    margin: 1em auto;
    padding: var(--Padding);
    width: 80%;
    background-color: var(--bg_color1);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.BlogOverview article h1 { margin: 0.5em  2em; text-align: left; }
.BlogOverview article h2 { margin: 0.5em  2em; text-align: left; }


.ImgOverview{float: left; padding-right: 2em;}
.ImgBlog{}
.ImgIcon{width: 4em}

.tagarea{float: left;}
.tagarea ul li{display:inline-block;
    border-radius: 30px;
    padding: 1px 8px; 
    border: solid 2px;
    text-transform: capitalize;
    color: var(--CNP_Green);
    border-color: var(--CNP_Green);
    margin: 0.5em 0;

}

.tagarea ul li:first-child {
    color: var(--CNP_Gold);
    border-color: var(--CNP_Gold); 
}

.tagarea li > svg {height: var(--Margin2) ; width:  20px } 
.tagarea li > svg > path {height: 100%; width: 100%; fill:  var(--bg_color1);} 

/*.tagarea ul  li:last-child */
.tagarea ul author li:first-child{
    color: var(--bg_color1);
    border-color: var(--CNP_Green);
    background-color:  var(--CNP_Green);
    margin: 0 0 8px 0;
}


.tagareaSize1{font-size: var(--subtext)}
.tagareaSize2{font-size: var(--subtext)}


/* --------  ---------- BLOG Pages  / FAQ.html ----------------------*/

.BlogLayout {max-width: 85%; margin: 4em Auto 4em Auto; min-height: 80vh;
    

}

.BlogLayout article{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    
}

.BlogLayout h1
{
/*    line-height: 3em;*/
    margin: 0.5em 0;
}
.BlogLayout h3 { font-size: var(--h3); margin-top: 1em; padding-left: 2em; }
.BlogLayout a { text-decoration: underline; cursor: pointer}

.GreyOverlay
{
/*    background-color: rgba(236, 237, 237, 0.90);*/
/*
    border-color: #3C474C;
    border-width: thin;
    border-style: solid;
*/
/*    border-radius: 10px;*/
    height: auto;
    margin-top: 2em;
    margin-bottom: 2em;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

author
{
    display: inline-block;
    font-size: var(--subtext)
}


.Invite a {color: var(--Light_grey); text-decoration: none;}

.Invite a::after {
    content: "\27F6";
    padding-left: 5px;
    font-size: 1rem;
    color: var(--Light_grey);
}

.Invite a:hover {color: var(--CNP_Green);}
.Invite a:hover::after {color: var(--CNP_Green);}

.Invite{margin: 1.5em 0 ;  float: right }




/* --------  ---------- FAG Pages  / FAQ.html ----------------------*/

/*Notice that the Wrapper 3, Section CNPAccess and CNPHow use class defined before*/

/*General for the section*/
.overlaytext h1 {margin: 25px 0 80px 0;}
.overlaytext h2 {margin: 25px 0 25px 0;}
.overlaytext p
{
    padding-top: 10px;
    text-align: justify
}
.overlaytext
{
    padding: 50px;
}
.overlaytext li
{
    padding-left: 30px;
    text-align: left;
}
.overlaytext li:first-child
{
    margin-top: 20px;
}
.overlaytext li:last-child
{
    margin-bottom: 20px;
}
.overlaytext li:before
{
    content: "\25AA"; color: #47B448; font-size: 15px; padding-right: 10px;
}



/* --------  ---------- Legal Pages  / Project.html ----------------------*/

.wrapper3
{
    max-width:  1600px;
    height: 90%;
    margin: 80px auto;
    text-align: center;
}
/* -----  -----  Email Button ------    --- BEGIN */
.Email
{
    background-color: #47B448;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    padding: 10px;
    border-color: transparent;
}
.Email:hover{background-color: var(--CNP_Green_hover);color: white;}

.ShowEmail
{
    background-color: #3C474C;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    padding: 10px;
    border-color: transparent;

}
.ShowEmail:hover{background-color: var(--CNP_Green_hover);color: white;}
/* -----  -----  Email Button ------    --- END */

/*Privacy Policy Content */

.PrivacyPolicy
{
    
    margin: 0 auto;
    max-width: 1400px;
    padding: 40px;
    
}

.PrivacyPolicy h2 {text-align: left; margin: 1em 0em;}
.PrivacyPolicy h3 { font-size: var(--h3); margin-top: 1em; padding-left: 2em; }

.PrivacyPolicy h4
{
   font-size: 20px;
    margin : 15px
}
.PrivacyPolicy h5
{
    font-size: 20px;
    margin : 15px 0 10px 40px;
}
.PrivacyPolicy p
{
    text-align: justify;
    line-height: 20px;
    padding-bottom: 10px;
    font-size: 15px;

}
.PrivacyPolicy nav {
    padding-bottom: 40px;
    text-align: right;
    font-size: 1em;
}
.PrivacyPolicy nav p {
    text-align: right;
}
.PrivacyPolicy a {color: var(--Light_grey);}

.PrivacyPolicy a::after {
    content: "\27F6";
    padding-left: 5px;
    font-size: 1rem;
    color: var(--Light_grey);
}

.PrivacyPolicy a:hover {color: var(--CNP_Green);}
.PrivacyPolicy a:hover::after {color: var(--CNP_Green);}

.PrivacyPolicy ul
{
    margin: 1em 0;
    text-align: left;
}
.PrivacyPolicy li
{
    padding-left: 30px;
    font-size: 15px;
/*    text-align: left;*/
}
.PrivacyPolicy li:before
{
    content: "\25AA"; color: #47B448; font-size: 15px; padding-right: 10px;
}

/* PP - Update page */
hr
{
    margin: 40px 0 40px 0;
    border-style: solid;
    border-color: #3C474C;
    border-radius: 10px;
    border-width: 2px;
}


/* Footer --- Section  ------ BEGIN -*/

footer {
    background-color: var(--Mid_grey);
    display: block;
/*    min-height: 250px;*/
    z-index: 2;
    overflow: hidden;
    text-align: center;
    clear: both
    
}

.footer_wrapper
{
/*    max-width: calc(1920px - (var(--Margin)*2) );*/
    z-index: 3;
    max-width: calc(1920px / 1.25);
    margin: 4em auto;
    padding: 0 calc(var(--Padding) + var(--Margin)*2 + var(--Margin2)   );
    min-height: 150px;} 


#f_block {
    display: grid;
    grid-template-columns: 50% 20% 20%;
    gap: 10px;
    
}
    
#f_block  > #Logo_Footer{
    text-align: center;
}
    
.Footer_Logo {
    width: 200px;
    height: 200px;
    }

    
#f_block  > .Footer_Col {
    text-align: left;
    color: var(--Light_grey);
    
    }

.Footer_Col > h1 {
    margin-top: 30px;
    padding: 0;
    font-size: 16px;
    padding: 0;
    
    text-transform: uppercase; 
    color: var(--Light_grey);
        
    }

.Footer_Col > a {
    display: block;
    text-decoration: none;
    font-size: 15px;
    color: var(--Light_grey);
        
    }
    
.Footer_Col > a:hover{color: #47B448;}

    
#Copyright  { 
    position: static;
    visibility: visible;
    
}

#Copyright > p {
    
    padding-top:  1em;
    clear: both;
    color: var(--Light_grey);
    font-size: 12px;
    
    z-index: 2;
}


/* Mobil Disclamer  --- Section  ------ BEGIN -*/

.Transparent_button{margin-bottom: 4em;}
#Proceed_2_App {}
#FormCP { margin-top: 3em; display: none}

/* Mobil Disclamer  --- Section  ------ BEGIN -*/


@media only screen and (max-width: 2000px){

    
    #overlay > img {
    width: 30vmax;
    --start_x: 250%
    }

#img1 {      
    
    --indent1_X: 85%;
    --indent1_Y: 250%;
    transform: translate(var(--indent1_X), var(--indent1_Y));
    z-index: 3;
}

@keyframes hero_overlay1 {
        
        0%   {transform: translate(var(--start_x), var(--indent1_Y)); visibility:visible}
        100% {transform: translate(var(--indent1_X), var(--indent1_Y)); visibility:visible}
    }

#img2 {
    z-index: 2;
    --indent2_X: 100% ;
    --indent2_Y: 155% ;
    transform: translate(var(--indent2_X), var(--indent2_Y)); 
}

@keyframes hero_overlay2 {
        
        0%   {transform: translate(var(--start_x), var(--indent2_Y)); visibility:visible}
        100% {transform: translate(var(--indent2_X), var(--indent2_Y)); visibility:visible}
    }
#img3 {
    z-index: 1;
    --indent3_X: 115%;
    --indent3_Y: 80%;
    transform: translate(var(--indent3_X), var(--indent3_Y));
        
}

@keyframes hero_overlay3 {
        
        0%   {transform: translate(var(--start_x), var(--indent3_Y)); visibility:visible}
        100% {transform: translate(var(--indent3_X), var(--indent3_Y)); visibility:visible}
}

}


@media only screen and (max-width: 1300px) {    
    
    h1{ font-size: var(--h1_tablet);}
    h2{ font-size: var(--h2_tablet);}
    p, ul li { font-size: var(--text_tablet);}
       
    .Open_btn {font-size:  var(--text_tablet);}
    #overlay > img {display: none; }
   
    /*  ----------  Header  ----------  */
    .header_wrapper { height: 3em;}
    .HeaderLogo { width: 3em; }
    .HeaderBrand { font-size: 1.5em; }

    /* Hero Section */
    #nav_option {display: none}
    #nav_login { display: none;}
    #burgerbutton { display: inline;}

    #hero_img { display:  none;}
    #hero_img_s { display:  block;}
    
    #MainTitle {font-size: 3.39vmax;}
    #SubTitle {font-size: 2.1vmax; width: 100%;}
	

	.scrolling-words-box {	height: 2.1vmax;}
	.scrolling-words-box li {font-size: 2.1vmax}

    
   
	#Benfits_Sec {
	margin : 0em 1.5em -7em 1.5em;
	padding: 3em 0 3em 0;}

	.Benefit > div{font-size: var(--h2_tablet);}
	
    /* Features Section */
    
    #features_names button { margin-left: 2em;}
       

    .feature svg  { 
        width: 32px;
        height: 32px;
    }

    .feature_icon {
/*        width: 3em; height: 3em; */
        margin: .75em; }
    .feature .feature_icon  > path { scale : 1.2;}
    
    .feature:hover::before{ 

        left: -25px;
        border-width: 12px 0 12px 12px;

}

    .active_feature::before {
        left: -25px;
        border-width: 12px 0 12px 12px;
    }
       

    /* Testimonial Section */
/*    #quote_row {grid-template-columns: auto auto ;}*/
    .display_br {display: block;}
    
    blockquote:before{ font-size: 4em;}
    blockquote:after{font-size: 8em;}

    cite {font-size: var(--sub_text_tablet);}

    /* Use Case Section */
    #UC {grid-template-columns: 1fr 1fr;}
    #UC article button{display: block}
/*
s
*/
    .back-card p{font-size: 1em;}

/*    ----------  Pricing page  ----------  */  


    .Pricing > .Membership_Content ul {
        margin: 1em 1em;
        min-height: 9vmax ;}    

    .width4     {width: 30%;}
    #PriceBoxes .payment_info {transform: translateY(2em)}
    .Pricing > .Membership_Content h2 { transform: translateY(1em)}
    .Pricing > .Membership_Content h3 {margin-bottom: 1.5em}

    #PriceBoxes > h2 a { font-size:var(--h2_tablet);}
    .Pricing > .Membership_Content .Price_Tag { font-size:var(--h2_tablet);}

    .Membership_Content > .Button_2_Account {font-size:  var(--text_tablet);} 
 
       
/*  Blog and FAQ main page*/

    #BlogOverview article{ width: 95%;}
    #BlogOverview article h1{ line-height: 1.2em; margin: var(--Margin-phone)}
    #BlogOverview article ul li { margin: 0.5em 0}
    #BlogOverview article p {line-height: 1.2em}

    .BlogLayout { margin: 0 auto; max-width: 95%;}
    .BlogLayout article ul li { margin: 0.5em 0}
    .BlogLayout .ImgBlog {width: 4em}
    .BlogLayout h3 { font-size: var(--h3_tablet)}
    .Invite{font-size: var(--text_tablet); margin-top: 1em;float: right;}

    /*.Blog Pages */
    
    .overlaytext {padding: 2em var(--Padding) 3em var(--Padding)}
    .overlaytext ul li{ 
        padding: 0 var(--Padding_phone)}

/*    ----------  Legal pages  ----------  */
    
    
/*    Impressum */
    
    .wrapper3 address{font-size: var(--text_tablet);}
    .wrapper3 button{font-size: var(--text_tablet);}
    
    .PrivacyPolicy {padding: var(--Padding_phone)}
    .PrivacyPolicy h3 { font-size: var(--h3_tablet);}
    .PrivacyPolicy a{font-size: var(--text_tablet)}
    .PrivacyPolicy button{font-size: var(--text_tablet);}
    
    
    
/*     Footer */
    #f_block {     grid-template-columns: 100%;}
    .Footer_Logo    {width: 100px; height: 100px};
    .Footer_Col > h1  {  
        margin: var(--Margin_phone) 0;}
    .Footer_Col > a { font-size: var(--text_tablet); margin: var(--Margin) 0;}
    #Copyright > p {  font-size: var(--text_tablet); padding-top:  3em; }
       
}

@media only screen and (max-width: 1400px) and (orientation: landscape) {


    
}

@media only screen and (max-width: 1180px){ 
    
            
/*    .icon_4_mobil{display: inline-block;}*/
    #features {
        grid-template-columns: 100%;
        grid-template-rows: 50% 50%;
    }
    #features_names {margin-top: 1em}
    #features_names button{width: 90%; transform: translateX(-1em); margin-left: 2em;}
    .feature{ margin :  var(--Margin_phone);}
    .feature h2 {font-size: var(--h2_tablet);}
    .Green_KW {padding: 3px;}
}

@media only screen and (max-width: 920px){ 
    
    /*  ----------  Header  ----------  */
    .header_wrapper { height: 3em;}
    .HeaderLogo { width: 2.5em; }
    .HeaderBrand { font-size: 1.25em; }
    #burgerbutton{
        width: 30px;
        height:30px;
        }
    
    .burgerbutton{
        height:6px;
    }
    
    .burgerbutton:nth-child(2){top:10px; }
    .burgerbutton:nth-child(3){top:20px; }
        @keyframes top_bar {
        0%   {transform: translate(0px, 0px);}
        50%  {transform: translate(0px, 10px);}
        100% {transform: translate(0px, 10px) rotate(45deg);}
    }
    
        @keyframes bottom_bar {
        0%   {transform: translate(0px, 0px);}
        50%  {transform: translate(0px, -10px);}
        100% {transform: translate(0px, -10px) rotate(-45deg);}
    }

    #burger_cb:checked ~ .header_wrapper> #nav_option {
        display: block;
        font-size: 1em;
        margin :  var(--Margin_phone);
        padding :  var(--Padding2_phone);
    }
    
    #burger_cb:checked ~ .header_wrapper> #nav_option ul {
        margin-top:  4em;
    }
    
    #burger_cb:checked ~ .header_wrapper> #nav_login {
        padding :  var(--Padding2_phone);
        font-size: 1em;
        width: 100%;

        -webkit-transform: translate(-50%,        -150%);
        -moz-transform: translate(-50%,        -150%);
        -ms-transform: translate(-50%,        -150%);
        -o-transform: translate(-50%,        -150%);
        transform: translate(-50%,      -150%);
    }
    
    #burger_cb:checked ~ .header_wrapper> #nav_login ul li{
        display: inline;
        padding: 1.5em;
    }
    
    #burger_cb:checked ~ .header_wrapper> #nav_login ul li button_S{
        padding: 2em; height: 40px;

    }
    
    
    /*  Hero  */
    
    #hero { grid-template-columns: 100%;     grid-template-rows: 50% 50%;}
    #hero_title > div {
        position: relative;
        top: 0%;
        text-align: center;}
    #hero_images {padding: 0em;}

    #MainTitle {padding :  var(--Padding2_phone);}
    #SubTitle {padding :  var(--Padding2_phone); margin: 0 ; text-align: center; justify-content: center;}
        
    #overlay > img {
        display: none;
        width: 350px;}
    
    #img1 {      
        --indent1_X: 115%;
        --indent1_Y: 250%;
        transform: translate(var(--indent1_X), var(--indent1_Y))    
    }
    
    #img2 {
        --indent2_X: 130% ;
        --indent2_Y: 155% ;
        transform: translate(var(--indent2_X), var(--indent2_Y)); 
    }

    #img3 {
        --indent3_X: 145%;
        --indent3_Y: 80%;
        transform: translate(var(--indent3_X), var(--indent3_Y));
    }
    
       
    /*  Features       */
/*    #features_videos video {margin-bottom: 1.5em;}*/
/*    #features_names button.width100{width: 80%;}*/
/*    .feature{width: 80%}*/
    .feature svg  { 
        width: 22px;
        height: 22px;
        
        top: -50%;
        left: -50%
        --vertical_align: 50%;
        --horizontal_align: 50%;

        -webkit-transform: translate(var(--horizontal_align), var(--vertical_align));
        -moz-transform: translate(var(--horizontal_align), var(--vertical_align));
        -ms-transform: translate(var(--horizontal_align), var(--vertical_align));
        -o-transform: translate(var(--horizontal_align), var(--vertical_align));
        transform: translate(var(--horizontal_align), var(--vertical_align));
        }

    .feature_icon {
/*        width: 3em; height: 3em; */
        margin: .75em; }
    
    .feature .feature_icon  > path { scale : 1.1;}
    
    .front-card g {scale : 3;}
	.front-card svg {
/*    position: absolute;*/
    width: 70px;
    height: 70px;

/*
    margin-top: 1em;
    padding: 0px;
    bottom: 0%;
    right: 0%;
*/
    
}
	
    /*  Pricing  */
    
    
    .Pricing    {min-height: 425px;}
    .width4     {width: 40%;}
    .Pricing > .Membership_Content ul {min-height: 80px ;} 
    
    .Membership_Content > .Button_2_Account {bottom: 15px;}
    
    /*  ----------  Blog Section no sure ...   ----------  */
    
    .BlogOverview article h1{font-size: 0.9em;  line-height: 1.2em}
    .BlogLayout h1, {font-size: 1em;}
    .tagareaSize1{font-size: 0.5em;}
    .tagareaSize2{font-size: 0.5em;}

}

@media only screen and (max-width: 920px) and (orientation: landscape) {
    header {display: none; position: relative;}
    .Underheader{display: none}
    section{
        
        margin: 0;
        
/*        padding : 5em var(--Padding2);*/
        
    }
    #burger_cb:checked ~ .header_wrapper> #nav_option ul {margin-top:  5em;

    }
    #burger_cb:checked ~ .header_wrapper> #nav_login {
        bottom: 0;
/*        width: 100%;*/
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }    
    
    #hero{display: none}
	#Benfits_Sec{display: none}
    .Pricing     {min-height: 400px;}
    .Membership_Content > .Button_2_Account {bottom: 0px;}
    #feat{padding: 0;}
    #features {
    /*    margin-top: 15em;
        position: fixed;
        top : 0;
        left: 0;
        */
        margin: 0;
        padding: var(--Padding2_phone);
        display: grid;
        grid-template-columns: 85% 15%;
        grid-template-rows: 100%;

    }
    
    #features_names button { margin-left: 2em; padding: 0;}

    #Testimonials{display: none}
    #UCSec{display: none}
    #Call2Action{display: none}
    footer{display: none}

    /* Add arrows to the left container (pointing right) */

/*
    #item_vid{display: none}
    #search_vid{display: block}
    #keyword_vid{display: none}
    #bookmark_vid{display: none}
    #sharing_vid{display: none}
*/

    .feature:hover::before{ --Triangle_color: #373740; 
        content: " ";
        height: 0;
        position: absolute;
        top: 50%;
        left: -25px;
        --vertical_align: -50%;
        -webkit-transform: translate(0%, var(--vertical_align));
        -moz-transform: translate(0%, var(--vertical_align));
        -ms-transform: translate(0%, var(--vertical_align));
        -o-transform: translate(0%, var(--vertical_align));
        transform: translate(0%, var(--vertical_align));
        width: 0px;
        z-index: -1;
        border: medium solid var(--Triangle_color);
        border-color: transparent transparent transparent var(--Triangle_color);
        --Triangle_border: 12px;
        border-width: var(--Triangle_border) 0 var(--Triangle_border) var(--Triangle_border);
        

    }

    .active_feature {
    /*    border-top: 16px solid transparent; */
        border-left: var(--Margin) solid #373740;
    /*    border-bottom: 16px solid transparent */
    }
    
    .active_feature::before {
        content: " ";
        height: 0;
        position: absolute;
        top: 50%;
        left: -25px;
        --vertical_align: -50%;
        -webkit-transform: translate(0%, var(--vertical_align));
        -moz-transform: translate(0%, var(--vertical_align));
        -ms-transform: translate(0%, var(--vertical_align));
        -o-transform: translate(0%, var(--vertical_align));
        transform: translate(0%, var(--vertical_align));

        --Triangle_color: #373740;
        width: 0px;
        border: medium solid var(--Triangle_color);
        border-color: transparent transparent transparent var(--Triangle_color);
        --Triangle_size: 12px;
        border-width: var(--Triangle_size) 0 var(--Triangle_size) var(--Triangle_size);
        
        z-index: 2;
    }


    .feature{
        height: 20%;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 100%;

    }

    .feature h2 {display: none}



    .feature_icon {
        display: inline-block;
        margin: 1.1em;
        padding: 0;
        width: 1em;
        height: 1em;
        clear: both;
        position: relative;
    }

    .feature svg  { 
        width: 35px;
        height: 35px;
        position: relative;
        display: inline-block;
        top: 0%;
        left: 25%;
        --vertical_align: 0%;
        --horizontal_align: -50%;
        -webkit-transform: translate(var(--horizontal_align), var(--vertical_align));
        -moz-transform: translate(var(--horizontal_align), var(--vertical_align));
        -ms-transform: translate(var(--horizontal_align), var(--vertical_align));
        -o-transform: translate(var(--horizontal_align), var(--vertical_align));
        transform: translate(var(--horizontal_align), var(--vertical_align));
        }

    .feature .feature_icon  > path {

        /* fill : var(--CNP_Green);  */
        scale : 1.5;
        margin: 0;
        padding: 0;
    }


    }

@media only screen and (max-width: 660px) {
:root{

    --h1    : 18px;
    --h2    : 15px;
    --h3    : 13.5px;
    --action_button: 16px;
    --text  : 12px;
    --subtext :  9px;
    }

    h1{ font-size: var(--h1_phone);}
    h2{ font-size: var(--h2_phone);}
    p, ul li { font-size: var(--text_phone);}
    .Open_btn {font-size:  var(--text_phone);}	
/*	Not Optimal */
	.scrolling-words-box {height: var(--h2_phone);}
	.scrolling-words-box li {font-size: var(--h2_phone);}
/*	Not Optimal */
	.Benefit > div{font-size: var(--text_phone); 
	width: 74%
	}
	#B1{margin-left: 0em}
	#B2{margin-left: 1.2em}
	#B3{margin-left: 2.4em}
	#B4{margin-left: 3.6em}
	#B5{margin-left: 4.8em}
	#B6{margin-left: 6em}
	
    .row{grid-template-columns: 1fr;}

 /*    ----------  Header   ----------  */  
    
    
    #burger_cb:checked ~ .header_wrapper> #nav_option {
        display: block;
        font-size: 1em;
        margin :  var(--Margin_phone);
        padding :  var(--Padding2_phone);
        
    }
    
    #burger_cb:checked ~ .header_wrapper> #nav_option ul {
        margin-top:  2em;

    }
    
    #burger_cb:checked ~ .header_wrapper> #nav_login {
        padding :  var(--Padding2_phone);
        font-size: 1em;
        width: 100%;
        bottom: 0;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
    
    #burger_cb:checked ~ .header_wrapper> #nav_login ul li{
        display: block;
        padding: 1.5em;
    }
    
    #burger_cb:checked ~ .header_wrapper> #nav_login ul li button_S{
        padding: 2em; 
        height: 40px; }
    
        
/*    ----------  Features page  ----------  */  
    
    
    
    
    #overlay > img {
                display: none;
                width: 150px;}
    
    #img1 {      
        --indent1_X: 115%;
        --indent1_Y: 300%;
        transform: translate(var(--indent1_X), var(--indent1_Y))    
    }
    
    #img2 {
        --indent2_X: 130% ;
        --indent2_Y: 200% ;
        transform: translate(var(--indent2_X), var(--indent2_Y)); 
    }

    #img3 {
        --indent3_X: 145%;
        --indent3_Y: 100%;
        transform: translate(var(--indent3_X), var(--indent3_Y));
    }
    
       

    
    
    section { margin : 0 var(--Margin2_phone) ; padding : 4em var(--Padding2_phone);}
    
    
    /* Heroe Section  */
    
    /* Features */
    #search_vid{display: none}
    #icon_4_mobil_wrapper {display: block; border: solid  var(--Mid_grey) 2px;} 
    .icon_4_mobil {
        padding: 1em;
        fill:  var(--Mid_grey);
    
        transform: rotate(45deg) ;
            
        animation-name: Rotate_Screen;
        animation-delay: 1s;
        animation-duration: 3s;
        animation-fill-mode: forwards;
        animation-iteration-count: 1;
    }

    @keyframes Rotate_Screen {
            
        0%   {transform: rotate(45deg);}
        66% {transform: rotate(-45deg);}
        100%   {transform: rotate(0deg);}
        }

    .icon_4_mobil > path{
        scale: 6;}
    
    #features_names {padding: 0; margin-top: 1em}
    #features_names button{width: 100%; transform: translateX(-1em); margin-left: 1em;}
    .feature{ margin :  var(--Margin_phone);}
    .feature h2 {font-size: var(--text_phone); padding: 1em 0}
    
    .feature_icon {width: 0em; height: 0em; margin: 0}
    .feature svg{ 
        width: 20px;
    }
    .feature .feature_icon  > path { scale : 0.8;}
    .Green_KW {padding: 2px; }

    .feature:hover::before{ 
        --Triangle_color: #899B9B; 
        left: -25px;
        border-width: 10px 0 10px 10px;
    }

    .active_feature::before {
        left: -25px;
        border-width: 10px 0 10px 10px;
    }
    
    
    /* Testimonial Section */
    
    
/*    #Testimonials h1{font-size:  var(--h1_phone);}*/
    #quote_row {display: block;}
    blockquote:before{ font-size: 2.5em;}
    blockquote:after{font-size: 5em;}
    blockquote > p {

        margin: var(--Margin2_phone);
        padding-left: 0em;
        padding-right: 0em;}
    cite {font-size: var(--sub_text_phone);}



    #UC {  display: block; }
    #UC article { margin: 1em 0;}
	.back-card p{ font-size: var(--h2_phone);}
    #Call2Action > a .button_M {font-size:  var(--h1_phone);}
    
/*    ----------  Pricing page  ----------  */  
    .Pricing     {min-height: 300px;}
    .Pricing > .Membership_Content ul {
        margin: 1em 1em;
        min-height: 80px ;} 
    
    .Pricing{   
        display: block;
        min-width: 95%;
        margin :  0 auto;}
    #PriceBoxes .payment_info {font-size:var(--sub_text_phone); transform: translateY(-2em)}
    .Pricing > .Membership_Content h2 {
        transform: translateY(1em)}
    .Pricing > .Membership_Content h3 {font-size: var(--h2_phone); margin-bottom: 1.5em}
    #PriceBoxes > h2 a { font-size:var(--h2_phone);}
    .Pricing > .Membership_Content .Price_Tag { font-size:var(--h2_phone);}

    .Membership_Content > .Button_2_Account {font-size:  var(--text_phone);}
    
/*    ----------  Blog & FAQ pages  ----------  */    
    
/*  Blog and FAQ main page*/
    #BlogOverview{ height: 100%;}
    #BlogOverview article{ width: 95%;}
    #BlogOverview article h1{
        line-height: 1.2em; margin: var(--Margin-phone)}
    #BlogOverview article ul li {
        margin-bottom: 0.25em}
    #BlogOverview article p {
        line-height: 1.2em}

    .BlogLayout { margin: 0 auto; max-width: 95%;}
    .BlogLayout h1 {font-size: var(--h2_phone)}
    .BlogLayout h3 { font-size: var(--h3_phone)}
    .BlogLayout article ul li {
        margin-bottom: 0.25em} 
    .BlogLayout .ImgBlog {width: 4em}
    
    .Invite{font-size: var(--text_phone); margin-top: 1em;float: right;}

    /*.Blog Pages */
    
    .overlaytext {padding: 2em var(--Padding) 3em var(--Padding)}
    .overlaytext ul li{ 
        padding: 0 var(--Padding_phone)}

/*    ----------  Legal pages  ----------  */
    
    
/*    Impressum */
    
    .wrapper3 address{font-size: var(--text_phone);}
    .wrapper3 button{font-size: var(--text_phone);}

    .PrivacyPolicy {padding: var(--Padding_phone)}
    .PrivacyPolicy h3 { font-size: var(--h3_phone);}
    .PrivacyPolicy a{font-size: var(--text_phone)}
    .PrivacyPolicy button{font-size: var(--text_phone);}
    
    
    
/*     Footer */
    
    #f_block {     grid-template-columns: 100%;}
    .Footer_Logo    {width: 100px; height: 100px};
    .Footer_Col > h1  {margin: var(--Margin_phone) 0;}
    .Footer_Col > a { font-size: var(--text_phone); margin: var(--Margin) 0;}
    #Copyright > p {padding-top:  3em; }

}