:root {
  /* || BACKGROUND SHADES || */

  --templateShade1: #F8F8F8;
  --templateShade2: #f5f5f5e6;
  --templateShade3: #F8F8F8;
  --templateShade4: #d8d3d3;
  --templateShade5: #F1F1F1;
  --templateShade6: #F8F8F8;
  --templateShade7: #d3d3d3;
  --templateShade8: #ff0000;
  --templateShade9: #d3d3d3;
  --templateShade10: #d3d3d3;
  --templateShade11: #d3d3d3;
  --templateShade12: #d3d3d3;
  --templateShade13: #d3d3d3;
  --templateShade14: #d3d3d3;
  --templateShade15: #d3d3d3;

  /* || BACKGROUND PAGE IMAGE || */

  --templateBgImage: url(./images/mainBG.webp);


  /* FONT SHADES */
  --templateFontShade1: #000000;
  --templateFontShade2: #000000;
  --templateFontShade3: #555555;
  --templateFontShade4: #555555;
  --templateFontShade5: #555555;
  --templateFontShade6: #555555;
  --templateFontShade7: #555555;
  --templateFontShade8: #555555;
  --templateFontShade9: #555555;
  --templateFontShade10: #555555;
  --templateFontShade11: #555555;
  --templateFontShade12: #555555;

  /* BUTTON BACKGROUND COLOR */
  --templateButtonBgColor1: #000000;
  --templateButtonBgColor2: #000000;
  --templateButtonBgColor3: #000000;
  --templateButtonBgColor4: #000000;
  --templateButtonBgColor5: #000000;
  --templateButtonBgColor6: #000000;
  --templateButtonBgColor7: #000000;
  --templateButtonBgColor8: #000000;
  --templateButtonBgColor9: #000000;
  --templateButtonBgColor10: #000000;

  /* BUTTON FONT COLOR */
  --templateButtonFontColor1: #FFFFFF;
  --templateButtonFontColor2: #FFFFFF;
  --templateButtonFontColor3: #FFFFFF;
  --templateButtonFontColor4: #FFFFFF;
  --templateButtonFontColor5: #FFFFFF;

  /* BUTTON FONT FAMILY */
  --templateButtonFontFamily1: 'Roboto';
  --templateButtonFontFamily2: 'Montserrat';
  --templateButtonFontFamily3: 'Arial';

  /* || BORDER SIZE || */
  --templateBorderSize1: 1px;
  --templateBorderSize2: 2px;
  --templateBorderSize3: 3px;
  --templateBorderSize4: 4px;
  --templateBorderSize5: 5px;

  /* BORDER COLOR */
  --templateBorderColor1: #575555;
  --templateBorderColor2: #575555;
  --templateBorderColor3: #575555;
  --templateBorderColor4: #575555;
  --templateBorderColor5: #575555;
  --templateBorderColor6: #575555;
  --templateBorderColor7: #575555;
  --templateBorderColor8: #575555;
  --templateBorderColor9: #575555;
  --templateBorderColor10: #575555;


  /* || BOX SHADOW SIZE || */
  --templateBoxShadowSize1: 0 1px 2px;
  --templateBoxShadowSize2: 0 2px 4px;
  --templateBoxShadowSize3: 0 4px 8px;
  --templateBoxShadowSize4: 0 6px 16px;
  --templateBoxShadowSize5: 0 10px 24px;

  /* BOX SHADOW COLOR */
  --templateBoxShadowColor1: rgba(0, 0, 0, 0.7);
  --templateBoxShadowColor2: rgba(0, 0, 0, 0.15);
  --templateBoxShadowColor3: rgba(0, 0, 0, 0.1);
  --templateBoxShadowColor4: rgba(0, 0, 0, 0.1);
  --templateBoxShadowColor5: rgba(0, 0, 0, 0.1);

  /* || FONT FAMILY || */

  --templateFontFamily1: 'Roboto';
  --templateFontFamily2: 'Poppins';
  --templateFontFamily3: 'Montserrat';
  --templateFontFamily4: 'Noto Sans';
  --templateFontFamily5: 'Lato';
  --templateFontFamily6: 'Arial';
  --templateFontFamily7: 'Helvetica';
  --templateFontFamily8: 'Verdana';
  --templateFontFamily9: 'Georgia';
  --templateFontFamily10: 'Times New Roman';
  --templateFontFamily11: 'Tahoma';
  --templateFontFamily12: 'Birthstone';
  --templateFontFamily13: 'Oxanium';

  /* TEMPLATE TEXT FONT SIZE */
  --templateNormalFontSizeXSmall: 16px;
  --templateNormalFontSizeSmall: 16px;
  --templateNormalFontSizeMedium: 16px;
  --templateNormalFontSizeLarge: 16px;
  --templateNormalFontSizeXLarge: 20px;
  --templateNormalFontSize: var(--templateNormalFontSizeXSmall);

  /* TEMPLATE CAPITAL FONT SIZE */
  --templateCapitalFontSizeXSmall: 14px;
  --templateCapitalFontSizeSmall: 14px;
  --templateCapitalFontSizeMedium: 16px;
  --templateCapitalFontSizeLarge: 16px;
  --templateCapitalFontSizeXLarge: 16px;
  --templateCapitalFontSize: var(--templateCapitalFontSizeXSmall);

  /* || TEMPLATE HEADING FONT SIZE */

  /* TEMPLATE H1 FONT SIZE */
  --templateH1FontSizeXSmall: 32px;
  --templateH1FontSizeSmall: 40px;
  --templateH1FontSizeMedium: 48px;
  --templateH1FontSizeLarge: 56px;
  --templateH1FontSizeXLarge: 64px;
  --templateH1FontSize: var(--templateH1FontSizeXSmall);

  /* TEMPLATE H2 FONT SIZE */
  --templateH2FontSizeXSmall: 24px;
  --templateH2FontSizeSmall: 32px;
  --templateH2FontSizeMedium: 48px;
  --templateH2FontSizeLarge: 48px;
  --templateH2FontSizeXLarge: 56px;
  --templateH2FontSize: var(--templateH2FontSizeXSmall);

  /* TEMPLATE H3 FONT SIZE */
  --templateH3FontSizeXSmall: 20px;
  --templateH3FontSizeSmall: 24px;
  --templateH3FontSizeMedium: 32px;
  --templateH3FontSizeLarge: 40px;
  --templateH3FontSizeXLarge: 40px;
  --templateH3FontSize: var(--templateH3FontSizeXSmall);

  /* TEMPLATE H4 FONT SIZE */
  --templateH4FontSizeXSmall: 18px;
  --templateH4FontSizeSmall: 22px;
  --templateH4FontSizeMedium: 26px;
  --templateH4FontSizeLarge: 26px;
  --templateH4FontSizeXLarge: 30px;
  --templateH4FontSize: var(--templateH4FontSizeXSmall);

  /* TEMPLATE H5 FONT SIZE */
  --templateH5FontSizeXSmall: 16px;
  --templateH5FontSizeSmall: 18px;
  --templateH5FontSizeMedium: 20px;
  --templateH5FontSizeLarge: 22px;
  --templateH5FontSizeXLarge: 26px;
  --templateH5FontSize: var(--templateH5FontSizeXSmall);

  /* TEMPLATE BUTTON NORMAL FONT SIZE */
  --templateButtonFontSizeXSmall: 16px;
  --templateButtonFontSizeSmall: 16px;
  --templateButtonFontSizeMedium: 16px;
  --templateButtonFontSizeLarge: 16px;
  --templateButtonFontSizeXLarge: 20px;
  --templateButtonFontSize: var(--templateButtonFontSizeXSmall);

  /* TEMPLATE BUTTON CAPITAL FONT SIZE */
  --templateButtonCapitalFontSizeXSmall: 14px;
  --templateButtonCapitalFontSizeSmall: 14px;
  --templateButtonCapitalFontSizeMedium: 16px;
  --templateButtonCapitalFontSizeLarge: 16px;
  --templateButtonCapitalFontSizeXLarge: 16px;
  --templateButtonCapitalFontSize: var(--templateButtonCapitalFontSizeXSmall);

  /* || HEIGHT || */

  --templateHeight1: 100vh;
  --templateHeight2: 100dvh;

  /* || HEIGHT & WIDHT || */

  /* HEADER BANNER CONTAINER */

  /* BANNER CONTAINER HEIGHT */
  --templateBannerContainerHeightXSmall: 20px;
  --templateBannerContainerHeightSmall: 25px;
  --templateBannerContainerHeightMedium: 30px;
  --templateBannerContainerHeightLarge: 35px;
  --templateBannerContainerHeightXLarge: 40px;
  --templateBannerContainerHeight: var(--templateBannerContainerHeightXSmall);

  /* WIDTH */
  --templateBannerContainerWidth: 100%;

  /* HEADER BANNER HEIGHT & WIDTH */

  /* HEIGHT */
  --templateBannerHeightXSmall: 30px;
  --templateBannerHeightSmall: 35px;
  --templateBannerHeightMedium: 40px;
  --templateBannerHeightLarge: 45px;
  --templateBannerHeightXLarge: 50px;
  --templateBannerHeight: var(--templateBannerHeightXSmall);

  /* WIDTH */
  --templateBannerWidth: calc(100% - 10px);

  /* HEADER BANNER CONTENT HEIGHT & WIDTH */

  /* HEIGHT */
  --templateBannerContentHeightXSmall: 20px;
  --templateBannerContentHeightSmall: 25px;
  --templateBannerContentHeightMedium: 30px;
  --templateBannerContentHeightLarge: 35px;
  --templateBannerContentHeightXLarge: 40px;
  --templateBannerContentHeight: var(--templateBannerContentHeightXSmall);

  /* WIDTH */
  --templateBannerContentWidth: 100%;

  /* HEADER HEIGHT & WIDTH */

  /* HEADER HEIGHT */
  --templateHeaderHeightXSmall: 45px;
  --templateHeaderHeightSmall: 45px;
  --templateHeaderHeightMedium: 50px;
  --templateHeaderHeightLarge: 72px;
  --templateHeaderHeightXLarge: 77px;
  --templateHeaderHeight: var(--templateHeaderHeightXSmall);

  /* WIDTH */
  --templateHeaderWidth: 100%;

  /* HEADER MENUE CONTAINER WIDTH */
  --templateHeaderMenueContainerWidth: 100%;

  /* HEADER MENUE HEIGHT & WIDTH */

  /* HEIGHT */
  --templateHeaderMenueHeightXSmall: 48px;
  --templateHeaderMenueHeightSmall: 72px;
  --templateHeaderMenueHeightMedium: 72px;
  --templateHeaderMenueHeightLarge: 72px;
  --templateHeaderMenueHeightXLarge: 97px;
  --templateHeaderMenueHeight: var(--templateHeaderMenueHeightXSmall);

  /* WIDTH */
  --templateHeaderMenueWidth: calc(100% - 20px);

  /* HEADER MENUE CONTENT HEIGHT & WIDTH */

  /* HEIGHT */
  --templateHeaderMenueContentHeightXSmall: 28px;
  --templateHeaderMenueContentHeightSmall: 52px;
  --templateHeaderMenueContentHeightMedium: 52px;
  --templateHeaderMenueContentHeightLarge: 52px;
  --templateHeaderMenueContentHeightXLarge: 77px;
  --templateHeaderMenueContentHeight: var(--templateHeaderMenueContentHeightXSmall);

  /* HEADER MENUE CONTENT WIDTH */
  --templateHeaderMenueContentWidth: 100%;

  /* || LOGO HEIGHT WIDTH || */

  /* LOGO HEIGHT*/
  --templateLogoHeightXSmall: 45px;
  --templateLogoHeightSmall: 45px;
  --templateLogoHeightMedium: 60px;
  --templateLogoHeightLarge: 60px;
  --templateLogoHeightXLarge: 75px;
  --templateLogoHeight: var(--templateLogoHeightXSmall);

  /* LOGO WIDTH*/
  --templateLogoWidthXSmall: 90px;
  --templateLogoWidthSmall: 90px;
  --templateLogoWidthMedium: 120px;
  --templateLogoWidthLarge: 120px;
  --templateLogoWidthXLarge: 150px;
  --templateLogoWidth: var(--templateLogoWidthXSmall);

  /* || SITE FEATURE CONTAINER HEIGHT WIDTH || */

  /* SITE FEATURE CONTAINER HEIGHT */
  --siteFeatureContainerHeightXSmall: 14px;
  --siteFeatureContainerHeightSmall: 24px;
  --siteFeatureContainerHeightMedium: 24px;
  --siteFeatureContainerHeightLarge: 24px;
  --siteFeatureContainerHeightXLarge: 24px;
  --siteFeatureContainerHeight: var(--siteFeatureContainerHeightXSmall);

  /* SITE FEATURE CONTAINER WIDTH */
  --siteFeatureContainerWidthXSmall: 73px;
  --siteFeatureContainerWidthSmall: 132px;
  --siteFeatureContainerWidthMedium: 132px;
  --siteFeatureContainerWidthLarge: 132px;
  --siteFeatureContainerWidthXLarge: 132px;
  --siteFeatureContainerWidth: var(--siteFeatureContainerWidthXSmall);

  /* || HEADER ICONS HEIGHT WIDTH || */

  /* HEADER ICONS HEIGHT*/
  --headerIconHeightXSmall: 22px;
  --headerIconHeightSmall: 22px;
  --headerIconHeightMedium: 22px;
  --headerIconHeightLarge: 22px;
  --headerIconHeightXLarge: 32px;
  --headerIconHeight: var(--headerIconHeightXSmall);

  /* HEADER ICONS WIDTH*/
  --headerIconWidthXSmall: 22px;
  --headerIconWidthSmall: 22px;
  --headerIconWidthMedium: 22px;
  --headerIconWidthLarge: 22px;
  --headerIconWidthXLarge: 32px;
  --headerIconWidth: var(--headerIconWidthXSmall);

  /* MAIN CONTAINER WIDTH*/
  --templatemainWidth: 100%;

  /* MAIN CONTENT WIDTH*/
  --templatemainContentWidth: calc(100% - 10px);

  /* FOOTER HEIGHT & WIDTH */

  /* FOOTER HEIGHT */
  --templateFooterHeightXSmall: 400px;
  --templateFooterHeightSmall: 400px;
  --templateFooterHeightMedium: 350px;
  --templateFooterHeightLarge: 350px;
  --templateFooterHeightXLarge: 350px;
  --templateFooterHeight: var(--templateFooterHeightXSmall);

  /* WIDTH */
  --templateFooterWidth: 100%;

  /* FOOTER CONTENT WIDTH*/
  --templatefooterContentWidth: calc(100% - 10px);

  /* FOOTER ICONS HEIGHT & WIDTH */

  /* FOOTER ICONS HEIGHT*/
  --footerIconHeightXSmall: 24px;
  --footerIconHeightSmall: 24px;
  --footerIconHeightMedium: 24px;
  --footerIconHeightLarge: 24px;
  --footerIconHeightXLarge: 24px;
  --footerIconHeight: var(--footerIconHeightXSmall);

  /* FOOTER ICONS WIDTH*/
  --footerIconWidthXSmall: 24px;
  --footerIconWidthSmall: 24px;
  --footerIconWidthMedium: 24px;
  --footerIconWidthLarge: 24px;
  --footerIconWidthXLarge: 24px;
  --footerIconWidth: var(--footerIconWidthXSmall);

  /* || SPACER HEIGTH || */

  /* MAIN TOP SPACER HEIGHT */
  --mainTopSpacerHeightXSmall: 5px;
  --mainTopSpacerHeightSmall: 5px;
  --mainTopSpacerHeightMedium: 5px;
  --mainTopSpacerHeightLarge: 5px;
  --mainTopSpacerHeightXLarge: 5px;
  --mainTopSpacerHeight: var(--mainTopSpacerHeightXSmall);

  /* MAIN BOTTOM SPACER HEIGHT */
  --mainBottomSpacerHeightXSmall: 5px;
  --mainBottomSpacerHeightSmall: 5px;
  --mainBottomSpacerHeightMedium: 5px;
  --mainBottomSpacerHeightLarge: 5px;
  --mainBottomSpacerHeightXLarge: 5px;
  --mainBottomSpacerHeight: var(--mainBottomSpacerHeightXSmall);

  /* FOOTER TOP SPACER HEIGHT */
  --footerTopSpacerHeightXSmall: 5px;
  --footerTopSpacerHeightSmall: 5px;
  --footerTopSpacerHeightMedium: 5px;
  --footerTopSpacerHeightLarge: 5px;
  --footerTopSpacerHeightXLarge: 5px;
  --footerTopSpacerHeight: var(--footerTopSpacerHeightXSmall);

  /* FOOTER BOTTOM SPACER HEIGHT */
  --footerBottomSpacerHeightXSmall: 5px;
  --footerBottomSpacerHeightSmall: 5px;
  --footerBottomSpacerHeightMedium: 5px;
  --footerBottomSpacerHeightLarge: 5px;
  --footerBottomSpacerHeightXLarge: 5px;
  --footerBottomSpacerHeight: var(--footerBottomSpacerHeightXSmall);

  /* || SPACER WIDTH || */

  /* MAIN TOP SPACER WIDTH */
  --mainTopSpacerWidth: 100px;

  /* MAIN BOTTOM SPACER WIDTH */
  --mainBottomSpacerWidth: 100px;

  /* FOOTER TOP SPACER WIDTH */
  --footerTopSpacerWidth: 100px;

  /* FOOTER BOTTOM SPACER WIDTH */
  --footerBottomSpacerWidth: 100px;

  /*------------------------------------------------------------------------------------------------------------------------------------*/

  /* || COMPONENT LEVEL || */

  /* || BANNER || */

  --bannerWidth: var(--templateBannerWidth);
  --bannerHeight: var(--templateBannerHeight);
  --bannerBgColor1: var(--templateShade1);
  --bannerFontFamily1: var(--templateFontFamily1);
  --bannerTextFontSize1: var(--templateNormalFontSize);
  --bannerTextFontColor1: var(--templateFontShade1);
  --bannerButtonBgColor1: var(--templateButtonBgColor1);
  --bannerButtonFontFamily1: var(--templateButtonFontFamily1);
  --bannerButtonTextFontSize1: var(--templateButtonFontSize);
  --bannerButtonCapitalFontSize1: var(--templateButtonCapitalFontSize);
  --bannerButtonFontColor1: var(--templateButtonFontColor1);
  --bannerBorderSize1: var(--templateBorderSize1);
  --bannerBorderColor1: var(--templateBorderColor1);
  --bannerBoxShadowSize1: var(--templateBoxShadowSize1);
  --bannerBoxShadowColor1: var(--templateBoxShadowColor1);

  /* || HEADER || */

  --headerWidth: var(--templateHeaderWidth);
  --headerHeight: var(--templateHeaderHeight);
  --headerBgColor1: var(--templateShade1);
  --headerBgColor2: var(--templateShade2);
  --headerBgColor3: var(--templateShade3);
  --headerBgColor4: var(--templateShade4);
  --headerModalBgColor1: var(--templateShade8);
  --headerIconsHeight1: var(--headerIconHeight);
  --headerIconsWidth1: var(--headerIconWidth);
  --headerFontFamily1: var(--templateFontFamily1);
  --headerTextFontSize1: var(--templateNormalFontSize);
  --headerCapitalFontSize1: var(--templateCapitalFontSize);
  --headerTextFontColor1: var(--templateFontShade1);
  --headerTextFontColor2: var(--templateFontShade2);
  --headerTextFontColor3: var(--templateFontShade2);
  --headerTextFontColor4: var(--templateFontShade7);
  --headerTextFontColor5: var(--templateFontShade8);
  --headerButtonBgColor1: var(--templateButtonBgColor1);
  --headerButtonFontFamily1: var(--templateButtonFontFamily1);
  --headerButtonTextFontSize1: var(--templateButtonFontSize);
  --headerButtonCapitalFontSize1: var(--templateButtonCapitalFontSize);
  --headerButtonFontColor1: var(--templateButtonFontColor1);
  --headerBorderSize1: var(--templateBorderSize1);
  --headerBorderColor1: var(--templateBorderColor1);
  --headerBoxShadowSize1: var(--templateBoxShadowSize1);
  --headerBoxShadowSize2: var(--templateBoxShadowSize2);
  --headerBoxShadowColor1: var(--templateBoxShadowColor1);

  /* || HEADER LOGO HEIGHT WIDTH || */

  /* LOGO HEIGHT*/
  --headerLogoHeightXSmall: 50px;
  --headerLogoHeightSmall: 50px;
  --headerLogoHeightMedium: 60px;
  --headerLogoHeightLarge: 75px;
  --headerLogoHeightXLarge: 75px;
  --headerLogoHeight: var(--headerLogoHeightXSmall);

  /* LOGO WIDTH*/
  --headerLogoWidthXSmall: 90px;
  --headerLogoWidthSmall: 90px;
  --headerLogoWidthMedium: 120px;
  --headerLogoWidthLarge: 120px;
  --headerLogoWidthXLarge: 150px;
  --headerLogoWidth: var(--headerLogoWidthXSmall);

  /* MENUE LINKS */

  --menueBgColor1: var(--headerBgColor1);
  --menueBgColor2: var(--headerBgColor2);
  --menueBgColor3: var(--headerBgColor3);
  --menuModalBgColor1: var(--headerModalBgColor1);
  --menueHamburgerColor1: var(--headerBgColor2);
  --menueHoverBgColor1: var(--headerBgColor3);
  --menueFontFamily1: var(--headerFontFamily1);
  --menueTextFontSize1: var(--headerTextFontSize1);
  --menueCapitalFontSize1: var(--headerCapitalFontSize1);
  --menueTextFontColor1: var(--headerTextFontColor1);
  --menueTextFontColor2: var(--headerTextFontColor2);
  --menueTextFontColor3: var(--headerTextFontColor3);
  --menueTextFontColor4: var(--headerTextFontColor4);
  --menueTextFontColor5: var(--headerTextFontColor5);
  --menuButtonBgColor: var(--headerButtonBgColor1);
  --menuButtonTextFontSize: var(--headerButtonTextFontSize1);
  --menuButtonTextFontColor: var(--headerButtonFontColor1);
  --menuButtonFontFamily: var(--headerButtonFontFamily1);
  --menueBorderSize1: var(--headerBorderSize1);
  --menueBorderColor1: var(--headerBorderColor1);
  --menueBorderColor2: var(--headerBorderColor2);
  --menueBoxShadowSize1: var(--headerBoxShadowSize1);
  --menueBoxShadowColor1: var(--headerBoxShadowColor1);

  /* SITE FEATURES */

  --siteFeatureBgColor1: var(--headerBgColor1);
  --siteFeatureCounterBgColor1: var(--headerBgColor3);
  --siteFeatureTextFontColor1: var(--headerTextFontColor1);
  --siteFeatureContainerHeight1: var(--siteFeatureContainerHeight);
  --siteFeatureContainerWidth1: var(--siteFeatureContainerWidth);
  --siteFeatureIconHeight1: var(--headerIconsHeight1);
  --siteFeatureIconWidth1: var(--headerIconsWidth1);

  /* || MAIN || */

  --mainWidth: var(--templatemainWidth);
  --mainBgColor1: var(--templateShade1);
  --mainBgColor2: var(--templateShade2);
  --mainBgColor3: var(--templateShade3);
  --mainBgColor4: var(--templateShade4);
  --mainBgColor5: var(--templateShade5);
  --mainBgColor6: var(--templateShade6);
  --mainBgColor7: var(--templateShade7);
  --mainBgColor8: var(--templateShade8);
  --mainBgColor9: var(--templateShade9);
  --mainBgColor10: var(--templateShade10);
  --mainBgColor11: var(--templateShade11);
  --mainBgColor12: var(--templateShade12);
  --mainBgColor13: var(--templateShade13);
  --mainBgColor14: var(--templateShade14);
  --mainBgColor15: var(--templateShade15);
  --mainFontFamily1: var(--templateFontFamily1);
  --mainFontFamily2: var(--templateFontFamily2);
  --mainFontFamily3: var(--templateFontFamily3);
  --mainTextFontSize1: var(--templateNormalFontSize);
  --mainCapitalFontSize1: var(--templateCapitalFontSize);
  --mainHeadingFontSize1: var(--templateH1FontSize);
  --mainHeadingFontSize2: var(--templateH2FontSize);
  --mainHeadingFontSize3: var(--templateH3FontSize);
  --mainHeadingFontSize4: var(--templateH4FontSize);
  --mainHeadingFontSize5: var(--templateH5FontSize);
  --mainFontColor1: var(--templateFontShade1);
  --mainFontColor2: var(--templateFontShade2);
  --mainFontColor3: var(--templateFontShade3);
  --mainFontColor4: var(--templateFontShade4);
  --mainFontColor5: var(--templateFontShade5);
  --mainFontColor6: var(--templateFontShade6);
  --mainFontColor7: var(--templateFontShade7);
  --mainFontColor8: var(--templateFontShade8);
  --mainFontColor9: var(--templateFontShade9);
  --mainFontColor10: var(--templateFontShade10);
  --mainFontColor11: var(--templateFontShade11);
  --mainFontColor12: var(--templateFontShade12);
  --mainHeadingFontColor1: var(--templateFontShade1);
  --mainHeadingFontColor2: var(--templateFontShade2);
  --mainHeadingFontColor3: var(--templateFontShade3);
  --mainHeadingFontColor4: var(--templateFontShade4);
  --mainHeadingFontColor5: var(--templateFontShade5);
  --mainButtonBgColor1: var(--templateButtonBgColor1);
  --mainButtonBgColor2: var(--templateButtonBgColor2);
  --mainButtonBgColor3: var(--templateButtonBgColor3);
  --mainButtonBgColor4: var(--templateButtonBgColor4);
  --mainButtonBgColor5: var(--templateButtonBgColor5);
  --mainButtonBgColor6: var(--templateButtonBgColor6);
  --mainButtonBgColor7: var(--templateButtonBgColor7);
  --mainButtonBgColor8: var(--templateButtonBgColor8);
  --mainButtonBgColor9: var(--templateButtonBgColor9);
  --mainButtonBgColor10: var(--templateButtonBgColor10);
  --mainButtonFontFamily1: var(--templateButtonFontFamily1);
  --mainButtonTextFontSize1: var(--templateButtonFontSize);
  --mainButtonCapitalFontSize1: var(--templateButtonCapitalFontSize);
  --mainButtonFontColor1: var(--templateButtonFontColor1);
  --mainButtonFontColor2: var(--templateButtonFontColor2);
  --mainButtonFontColor3: var(--templateButtonFontColor3);
  --mainButtonFontColor4: var(--templateButtonFontColor4);
  --mainButtonFontColor5: var(--templateButtonFontColor5);
  --mainBorderSize1: var(--templateBorderSize1);
  --mainBorderSize2: var(--templateBorderSize2);
  --mainBorderSize3: var(--templateBorderSize3);
  --mainBorderSize4: var(--templateBorderSize4);
  --mainBorderSize5: var(--templateBorderSize5);
  --mainBorderColor1: var(--templateBorderColor1);
  --mainBorderColor2: var(--templateBorderColor2);
  --mainBorderColor3: var(--templateBorderColor3);
  --mainBorderColor4: var(--templateBorderColor4);
  --mainBorderColor5: var(--templateBorderColor5);
  --mainBorderColor6: var(--templateBorderColor6);
  --mainBorderColor7: var(--templateBorderColor7);
  --mainBorderColor8: var(--templateBorderColor8);
  --mainBorderColor9: var(--templateBorderColor9);
  --mainBorderColor10: var(--templateBorderColor10);
  --mainBoxShadowSize1: var(--templateBoxShadowSize1);
  --mainBoxShadowSize2: var(--templateBoxShadowSize2);
  --mainBoxShadowSize3: var(--templateBoxShadowSize3);
  --mainBoxShadowSize4: var(--templateBoxShadowSize4);
  --mainBoxShadowSize5: var(--templateBoxShadowSize5);
  --mainBoxShadowColor1: var(--templateBoxShadowColor1);
  --mainBoxShadowColor2: var(--templateBoxShadowColor2);
  --mainBoxShadowColor3: var(--templateBoxShadowColor3);
  --mainBoxShadowColor4: var(--templateBoxShadowColor4);
  --mainBoxShadowColor5: var(--templateBoxShadowColor5);


  /* || WEBSITE PAGE || */

  --webPageBgColor1: var(--mainBgColor1);
  --webPageBgColor2: var(--mainBgColor2);
  --webPageBgColor3: var(--mainBgColor3);
  --webPageBgColor4: var(--mainBgColor4);
  --webPageBgColor5: var(--mainBgColor5);
  --webPageBgColor6: var(--mainBgColor6);
  --webPageBgColor7: var(--mainBgColor7);
  --webPageBgColor8: var(--mainBgColor8);
  --webPageBgColor9: var(--mainBgColor9);
  --webPageBgColor10: var(--mainBgColor10);
  --webPageBgColor11: var(--mainBgColor11);
  --webPageBgColor12: var(--mainBgColor12);
  --webPageBgColor13: var(--mainBgColor13);
  --webPageFontFamily1: var(--mainFontFamily1);
  --webPageFontFamily2: var(--mainFontFamily2);
  --webPageFontFamily3: var(--mainFontFamily3);
  --webPageTextFontSize1: var(--mainTextFontSize1);
  --webPageCapitalFontSize1: var(--mainCapitalFontSize1);
  --webPageHeadingFontSize1: var(--mainHeadingFontSize1);
  --webPageHeadingFontSize2: var(--mainHeadingFontSize2);
  --webPageHeadingFontSize3: var(--mainHeadingFontSize3);
  --webPageHeadingFontSize4: var(--mainHeadingFontSize4);
  --webPageHeadingFontSize5: var(--mainHeadingFontSize5);
  --webPageFontColor1: var(--mainFontColor1);
  --webPageFontColor2: var(--mainFontColor2);
  --webPageFontColor3: var(--mainFontColor3);
  --webPageFontColor4: var(--mainFontColor4);
  --webPageFontColor5: var(--mainFontColor5);
  --webPageFontColor6: var(--mainFontColor6);
  --webPageFontColor7: var(--mainFontColor7);
  --webPageFontColor8: var(--mainFontColor8);
  --webPageFontColor9: var(--mainFontColor9);
  --webPageFontColor10: var(--mainFontColor10);
  --webPageHeadingFontColor1: var(--mainHeadingFontColor1);
  --webPageHeadingFontColor2: var(--mainHeadingFontColor2);
  --webPageHeadingFontColor3: var(--mainHeadingFontColor3);
  --webPageButtonBgColor1: var(--mainButtonBgColor1);
  --webPageButtonBgColor2: var(--mainButtonBgColor2);
  --webPageButtonBgColor3: var(--mainButtonBgColor3);
  --webPageButtonBgColor4: var(--mainButtonBgColor4);
  --webPageButtonBgColor5: var(--mainButtonBgColor5);
  --webPageButtonBgColor6: var(--mainButtonBgColor6);
  --webPageButtonBgColor7: var(--mainButtonBgColor7);
  --webPageButtonBgColor8: var(--mainButtonBgColor8);
  --webPageButtonBgColor9: var(--mainButtonBgColor9);
  --webPageButtonBgColor10: var(--mainButtonBgColor10);
  --webPageButtonFontFamily1: var(--mainButtonFontFamily1);
  --webPageButtonTextFontSize1: var(--mainButtonTextFontSize1);
  --webPageButtonCapitalFontSize1: var(--mainButtonCapitalFontSize1);
  --webPageButtonFontColor1: var(--mainButtonFontColor1);
  --webPageButtonFontColor2: var(--mainButtonFontColor2);
  --webPageButtonFontColor3: var(--mainButtonFontColor3);
  --webPageButtonFontColor4: var(--mainButtonFontColor4);
  --webPageButtonFontColor5: var(--mainButtonFontColor5);
  --webPageBorderSize1: var(--mainBorderSize1);
  --webPageBorderSize2: var(--mainBorderSize2);
  --webPageBorderSize3: var(--mainBorderSize3);
  --webPageBorderSize4: var(--mainBorderSize4);
  --webPageBorderSize5: var(--mainBorderSize5);
  --webPageBorderColor1: var(--mainBorderColor1);
  --webPageBorderColor2: var(--mainBorderColor2);
  --webPageBorderColor3: var(--mainBorderColor3);
  --webPageBorderColor4: var(--mainBorderColor4);
  --webPageBorderColor5: var(--mainBorderColor5);
  --webPageBorderColor6: var(--mainBorderColor6);
  --webPageBorderColor7: var(--mainBorderColor7);
  --webPageBorderColor8: var(--mainBorderColor8);
  --webPageBorderColor9: var(--mainBorderColor9);
  --webPageBorderColor10: var(--mainBorderColor10);
  --webPageBoxShadowSize1: var(--mainBoxShadowSize1);
  --webPageBoxShadowSize2: var(--mainBoxShadowSize2);
  --webPageBoxShadowSize3: var(--mainBoxShadowSize3);
  --webPageBoxShadowSize4: var(--mainBoxShadowSize4);
  --webPageBoxShadowSize5: var(--mainBoxShadowSize5);
  --webPageBoxShadowColor1: var(--mainBoxShadowColor1);
  --webPageBoxShadowColor2: var(--mainBoxShadowColor2);
  --webPageBoxShadowColor3: var(--mainBoxShadowColor3);
  --webPageBoxShadowColor4: var(--mainBoxShadowColor4);
  --webPageBoxShadowColor5: var(--mainBoxShadowColor5);

  /* || WEBSITE FORM || */

  --webFormBgColor1: var(--mainBgColor1);
  --webFormBgColor2: var(--mainBgColor2);
  --webFormBgColor3: var(--mainBgColor3);
  --webFormBgColor4: var(--mainBgColor4);
  --webFormBgColor5: var(--mainBgColor5);
  --webFormHeaderBgColor1: black;
  --webFormFontFamily1: var(--mainFontFamily1);
  --webFormFontFamily2: var(--mainFontFamily2);
  --webFormFontFamily3: var(--mainFontFamily3);
  --webFormTextFontSize1: var(--mainTextFontSize1);
  --webFormCapitalFontSize1: var(--mainCapitalFontSize1);
  --webFormHeadingFontSize1: var(--mainHeadingFontSize1);
  --webFormHeadingFontSize2: var(--mainHeadingFontSize2);
  --webFormHeadingFontSize3: var(--mainHeadingFontSize3);
  --webFormHeadingFontSize4: var(--mainHeadingFontSize4);
  --webFormHeadingFontSize5: var(--mainHeadingFontSize5);
  --webFormFontColor1: var(--mainFontColor1);
  --webFormFontColor2: var(--mainFontColor2);
  --webFormFontColor3: var(--mainFontColor3);
  --webFormFontColor4: var(--mainFontColor4);
  --webFormFontColor5: var(--mainFontColor5);
  --webFormHeadingFontColor1: var(--mainHeadingFontColor1);
  --webFormHeadingFontColor2: var(--mainHeadingFontColor2);
  --webFormHeadingFontColor3: var(--mainHeadingFontColor3);
  --webFormButtonBgColor1: var(--mainButtonBgColor1);
  --webFormButtonBgColor2: var(--mainButtonBgColor2);
  --webFormButtonBgColor3: var(--mainButtonBgColor3);
  --webFormButtonBgColor4: var(--mainButtonBgColor4);
  --webFormButtonBgColor5: var(--mainButtonBgColor5);
  --webFormButtonFontFamily1: var(--mainButtonFontFamily1);
  --webFormButtonTextFontSize1: var(--mainButtonTextFontSize1);
  --webFormButtonCapitalFontSize1: var(--mainButtonCapitalFontSize1);
  --webFormButtonFontColor1: var(--mainButtonFontColor1);
  --webFormButtonFontColor2: var(--mainButtonFontColor2);
  --webFormButtonFontColor3: var(--mainButtonFontColor3);
  --webFormButtonFontColor4: var(--mainButtonFontColor4);
  --webFormButtonFontColor5: var(--mainButtonFontColor5);
  --webFormBorderSize1: var(--mainBorderSize1);
  --webFormBorderSize2: var(--mainBorderSize2);
  --webFormBorderSize3: var(--mainBorderSize3);
  --webFormBorderSize4: var(--mainBorderSize4);
  --webFormBorderColor1: var(--mainBorderColor1);
  --webFormBorderColor2: var(--mainBorderColor2);
  --webFormBorderColor3: var(--mainBorderColor3);
  --webFormBorderColor4: var(--mainBorderColor4);
  --webFormBoxShadowSize1: var(--mainBoxShadowSize1);
  --webFormBoxShadowSize2: var(--mainBoxShadowSize2);
  --webFormBoxShadowColor1: var(--mainBoxShadowColor1);
  --webFormBoxShadowColor2: var(--mainBoxShadowColor2);

  /* || LOGIN LOGO HEIGHT WIDTH || */

  /* LOGO HEIGHT*/
  --loginLogoHeightXSmall: 50px;
  --loginLogoHeightSmall: 50px;
  --loginLogoHeightMedium: 60px;
  --loginLogoHeightLarge: 75px;
  --loginLogoHeightXLarge: 75px;
  --loginLogoHeight: var(--loginLogoHeightXSmall);

  /* LOGO WIDTH*/
  --loginLogoWidthXSmall: 90px;
  --loginLogoWidthSmall: 90px;
  --loginLogoWidthMedium: 120px;
  --loginLogoWidthLarge: 120px;
  --loginLogoWidthXLarge: 150px;
  --loginLogoWidth: var(--loginLogoWidthXSmall);

  /* || WEBSITE COMPONENT || */

  --webComponentBgColor1: var(--mainBgColor1);
  --webComponentBgColor2: var(--mainBgColor2);
  --webComponentBgColor3: var(--mainBgColor3);
  --webComponentBgColor4: var(--mainBgColor4);
  --webComponentBgColor5: var(--mainBgColor5);
  --webComponentBgColor6: var(--mainBgColor6);
  --webComponentBgColor7: var(--mainBgColor7);
  --webComponentBgColor8: var(--mainBgColor8);
  --webComponentBgColor9: var(--mainBgColor9);
  --webComponentBgColor10: var(--mainBgColor10);
  --webComponentBgColor11: var(--mainBgColor11);
  --webComponentBgColor12: var(--mainBgColor12);
  --webComponentBgColor13: var(--mainBgColor13);
  --webComponentBgColor14: var(--mainBgColor14);
  --webComponentBgColor15: var(--mainBgColor15);
  --webComponentFontFamily1: var(--mainFontFamily1);
  --webComponentFontFamily2: var(--mainFontFamily2);
  --webComponentFontFamily3: var(--mainFontFamily3);
  --webComponentTextFontSize1: var(--mainTextFontSize1);
  --webComponentCapitalFontSize1: var(--mainCapitalFontSize1);
  --webComponentHeadingFontSize1: var(--mainHeadingFontSize1);
  --webComponentHeadingFontSize2: var(--mainHeadingFontSize2);
  --webComponentHeadingFontSize3: var(--mainHeadingFontSize3);
  --webComponentHeadingFontSize4: var(--mainHeadingFontSize4);
  --webComponentHeadingFontSize5: var(--mainHeadingFontSize5);
  --webComponentFontColor1: var(--mainFontColor1);
  --webComponentFontColor2: var(--mainFontColor2);
  --webComponentFontColor3: var(--mainFontColor3);
  --webComponentFontColor4: var(--mainFontColor4);
  --webComponentFontColor5: var(--mainFontColor5);
  --webComponentFontColor6: var(--mainFontColor6);
  --webComponentFontColor7: var(--mainFontColor7);
  --webComponentFontColor8: var(--mainFontColor8);
  --webComponentFontColor9: var(--mainFontColor9);
  --webComponentFontColor10: var(--mainFontColor10);
  --webComponentFontColor11: var(--mainFontColor11);
  --webComponentFontColor12: var(--mainFontColor12);
  --webComponentHeadingFontColor1: var(--mainHeadingFontColor1);
  --webComponentHeadingFontColor2: var(--mainHeadingFontColor2);
  --webComponentHeadingFontColor3: var(--mainHeadingFontColor3);
  --webComponentHeadingFontColor4: var(--mainHeadingFontColor4);
  --webComponentHeadingFontColor5: var(--mainHeadingFontColor5);
  --webComponentButtonBgColor1: var(--mainButtonBgColor1);
  --webComponentButtonBgColor2: var(--mainButtonBgColor2);
  --webComponentButtonBgColor3: var(--mainButtonBgColor3);
  --webComponentButtonBgColor4: var(--mainButtonBgColor4);
  --webComponentButtonBgColor5: var(--mainButtonBgColor5);
  --webComponentButtonBgColor6: var(--mainButtonBgColor6);
  --webComponentButtonBgColor7: var(--mainButtonBgColor7);
  --webComponentButtonBgColor8: var(--mainButtonBgColor8);
  --webComponentButtonBgColor9: var(--mainButtonBgColor9);
  --webComponentButtonBgColor10: var(--mainButtonBgColor10);
  --webComponentButtonFontFamily1: var(--mainButtonFontFamily1);
  --webComponentButtonTextFontSize1: var(--mainButtonTextFontSize1);
  --webComponentButtonCapitalFontSize1: var(--mainButtonCapitalFontSize1);
  --webComponentButtonFontColor1: var(--mainButtonFontColor1);
  --webComponentButtonFontColor2: var(--mainButtonFontColor2);
  --webComponentButtonFontColor3: var(--mainButtonFontColor3);
  --webComponentButtonFontColor4: var(--mainButtonFontColor4);
  --webComponentButtonFontColor5: var(--mainButtonFontColor5);
  --webComponentBorderSize1: var(--mainBorderSize1);
  --webComponentBorderSize2: var(--mainBorderSize2);
  --webComponentBorderSize3: var(--mainBorderSize3);
  --webComponentBorderSize4: var(--mainBorderSize4);
  --webComponentBorderSize5: var(--mainBorderSize5);
  --webComponentBorderColor1: var(--mainBorderColor1);
  --webComponentBorderColor2: var(--mainBorderColor2);
  --webComponentBorderColor3: var(--mainBorderColor3);
  --webComponentBorderColor4: var(--mainBorderColor4);
  --webComponentBorderColor5: var(--mainBorderColor5);
  --webComponentBorderColor6: var(--mainBorderColor6);
  --webComponentBorderColor7: var(--mainBorderColor7);
  --webComponentBorderColor8: var(--mainBorderColor8);
  --webComponentBorderColor9: var(--mainBorderColor9);
  --webComponentBorderColor10: var(--mainBorderColor10);
  --webComponentBoxShadowSize1: var(--mainBoxShadowSize1);
  --webComponentBoxShadowSize2: var(--mainBoxShadowSize2);
  --webComponentBoxShadowSize3: var(--mainBoxShadowSize3);
  --webComponentBoxShadowSize4: var(--mainBoxShadowSize4);
  --webComponentBoxShadowSize5: var(--mainBoxShadowSize5);
  --webComponentBoxShadowColor1: var(--mainBoxShadowColor1);
  --webComponentBoxShadowColor2: var(--mainBoxShadowColor2);
  --webComponentBoxShadowColor3: var(--mainBoxShadowColor3);
  --webComponentBoxShadowColor4: var(--mainBoxShadowColor4);
  --webComponentBoxShadowColor5: var(--mainBoxShadowColor5);


  /* || FOOTER || */

  --footerWidth: var(--templateFooterWidth);
  --footerHeight: var(--templateFooterHeight);
  --footerBgColor1: var(--templateShade1);
  --footerBgColor2: var(--templateShade2);
  --footerFontFamily1: var(--templateFontFamily1);
  --footerFontFamily2: var(--templateFontFamily2);
  --footerTextFontSize1: var(--templateNormalFontSize);
  --footerCapitalFontSize1: var(--templateCapitalFontSize);
  --footerHeadingFontSize1: var(--templateH1FontSize);
  --footerHeadingFontSize2: var(--templateH2FontSize);
  --footerFontSizeColor1: var(--templateFontShade1);
  --footerFontSizeColor2: var(--templateFontShade2);
  --footerFontSizeColor3: var(--templateFontShade3);
  --footerHeadingFontSizeColor: var(--templateFontShade1);
  --footerButtonBgColor1: var(--templateButtonBgColor1);
  --footerButtonFontFamily1: var(--templateButtonFontFamily1);
  --footerButtonTextFontSize1: var(--templateButtonFontSize);
  --footerButtonCapitalFontSize1: var(--templateButtonCapitalFontSize);
  --footerButtonFontColor1: var(--templateButtonFontColor1);
  --footerBorderSize1: var(--templateBorderSize1);
  --footerBorderSize2: var(--templateBorderSize2);
  --footerBorderColor1: var(--templateBorderColor1);
  --footerBorderColor2: var(--templateBorderColor2);
  --footerBoxShadowSize1: var(--templateBoxShadowSize1);
  --footerBoxShadowSize2: var(--templateBoxShadowSize2);
  --footerBoxShadowColor1: var(--templateBoxShadowColor1);
  --footerBoxShadowColor2: var(--templateBoxShadowColor2);

  /* || FOOTER LOGO HEIGHT WIDTH || */

  /* LOGO HEIGHT*/
  --footerLogoHeightXSmall: 50px;
  --footerLogoHeightSmall: 50px;
  --footerLogoHeightMedium: 60px;
  --footerLogoHeightLarge: 75px;
  --footerLogoHeightXLarge: 75px;
  --footerLogoHeight: var(--footerLogoHeightXSmall);

  /* LOGO WIDTH*/
  --footerLogoWidthXSmall: 90px;
  --footerLogoWidthSmall: 90px;
  --footerLogoWidthMedium: 120px;
  --footerLogoWidthLarge: 120px;
  --footerLogoWidthXLarge: 150px;
  --footerLogoWidth: var(--footerLogoWidthXSmall);

  /* COPYRIGHT */

  --copyrightBgColor: var(--footerBgColor2);
  --copyrightFontFamily: var(--footerFontFamily1);
  --copyrightFontSize: var(--footerTextFontSize1);
  --copyrightFontColor: var(--footerFontSizeColor1);
  --copyrightBorderSize: var(--footerBorderSize1);
  --copyrightBorderColor: var(--footerBorderColor1);

}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  background: var(--templateShade1);
  font-size: var(--templateNormalFontSize);
  font-family: var(--templateFontFamily1);
  min-height: var(--templateHeight1);
  min-height: var(--templateHeight2);
  -webkit-tap-highlight-color: transparent;
}

/* HAVE TO REVIEW LATER*/
.progress-bar {
  height: 4px;
  width: 100%;
  background-color: var(--templateShade5);
  border-radius: 2px;
  position: fixed;
  top: 0px;
  left: 0px;
  overflow: hidden;
  cursor: pointer;
  z-index: 10;
  display: none;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background-color: var(--templateShade8);
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 2px;
  transition: width 0.1s linear;
}

header {
  background: var(--templateShade1);
}

.header_container {
  width: var(--templateHeaderWidth);
  min-height: var(--templateHeaderHeight);
  flex-shrink: 0;
}

.header_banner_container {
  width: var(--templateBannerContainerWidth);
  flex-shrink: 0;
}

.header_menue_container {
  width: var(--templateHeaderMenueContainerWidth);
}

header,
.header_banner_container,
.header_banner,
.header_menue_container,
.header_menue,
main,
.main_container,
footer,
.footer_container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.header_banner {
  width: var(--templateBannerWidth);
  min-height: var(--templateBannerHeight);
  background: var(--templateShade7);
}

.header_banner_content {
  width: var(--templateBannerContentWidth);
  min-height: var(--templateBannerContentHeight);
  background: var(--templateShade7);
}

.header_menue {
  width: var(--templateHeaderMenueWidth);
  min-height: var(--templateHeaderMenueHeight);
  background: var(--templateShade2);
}

.header_menue_content {
  width: var(--templateHeaderMenueContentWidth);
  min-height: var(--templateHeaderMenueContentHeight);
  background: var(--templateShade3);
}

main,
.main_container {
  display: flex;
  flex-direction: column;
  width: var(--templatemainWidth);
  background: var(--templateShade1);
  flex: 1 1 auto;
}

.main_content_top_spacer {
  width: var(--mainTopSpacerWidth);
  height: var(--mainTopSpacerHeight);
}

.main_content {
  width: var(--templatemainContentWidth);
  background: var(--templateShade2);
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.main_content_bottom_spacer {
  width: var(--mainBottomSpacerWidth);
  height: var(--mainBottomSpacerHeight);
}

.footer_container {
  display: flex;
  flex-direction: column;
  width: var(--templateFooterWidth);
  background: var(--templateShade1);
  min-height: var(--templateFooterHeight);
  flex-shrink: 0;
}

.footer_content_top_spacer {
  width: var(--footerTopSpacerWidth);
  height: var(--footerTopSpacerHeight);
}

.footer_content {
  width: var(--templatefooterContentWidth);
  background: var(--templateShade2);
  flex: 1 1 auto;
  justify-content: center;
  display: flex;
}

.footer_content_bottom_spacer {
  width: var(--footerBottomSpacerWidth);
  height: var(--footerBottomSpacerHeight);
}

.click {
  display: inline-flex;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
}

.click * {
  transition: transform 0.25s ease, opacity 0.25s ease, filter 0.25s ease;
}

.click:hover {
  transform: scale(1.01);
}

.click a:hover {
  text-decoration: underline;
}

.click:active * {
  transform: translateY(0px) scale(0.98);
}

.click:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 6px;
}

.click[disabled],
.click.disabled {
  pointer-events: none;
}

.click_media {
  transition: transform 0.28s ease, filter 0.28s ease;
  will-change: transform;
}

.click_media:hover {
  transform: scale(1.09);
  filter: brightness(1.05);
}

.click_media:active {
  transform: scale(0.96);
}

.image-container {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-cover picture,
.image-contain picture {
    display: block;
    width: 100%;
    height: 100%;
}

.image-contain img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.image-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
} 

@media screen and (min-width:576px) {
  :root {
    --templateButtonFontSize: var(--templateButtonFontSizeSmall);
    --templateButtonCapitalFontSize: var(--templateButtonCapitalFontSizeSmall);
    --templateNormalFontSize: var(--templateNormalFontSizeSmall);
    --templateCapitalFontSize: var(--templateCapitalFontSizeSmall);
    --templateH1FontSize: var(--templateH1FontSizeSmall);
    --templateH2FontSize: var(--templateH2FontSizeSmall);
    --templateH3FontSize: var(--templateH3FontSizeSmall);
    --templateH4FontSize: var(--templateH4FontSizeSmall);
    --templateH5FontSize: var(--templateH5FontSizeSmall);
    --templateBannerHeight: var(--templateBannerHeightSmall);
    --templateBannerContentHeight: var(--templateBannerContentHeightSmall);
    --templateHeaderHeight: var(--templateHeaderHeightSmall);
    --templateHeaderMenueHeight: var(--templateHeaderMenueHeightSmall);
    --templateHeaderMenueContentHeight: var(--templateHeaderMenueContentHeightSmall);
    --templateLogoHeight: var(--templateLogoHeightSmall);
    --templateLogoWidth: var(--templateLogoWidthSmall);
    --siteFeatureContainerHeight: var(--siteFeatureContainerHeightSmall);
    --siteFeatureContainerWidth: var(--siteFeatureContainerWidthSmall);
    --headerIconHeight: var(--headerIconHeightSmall);
    --headerIconWidth: var(--headerIconWidthSmall);
    --mainTopSpacerHeight: var(--mainTopSpacerHeightSmall);
    --mainBottomSpacerHeight: var(--mainBottomSpacerHeightSmall);
    --footerTopSpacerHeight: var(--footerTopSpacerHeightSmall);
    --templateFooterHeight: var(--templateFooterHeightSmall);
    --footerIconHeight: var(--footerIconHeightSmall);
    --footerIconWidth: var(--footerIconWidthSmall);
    --footerBottomSpacerHeight: var(--footerBottomSpacerHeightSmall);
    --headerLogoHeight: var(--headerLogoHeightSmall);
    --headerLogoWidth: var(--headerLogoWidthSmall);
    --loginLogoHeight: var(--loginLogoHeightSmall);
    --loginLogoWidth: var(--loginLogoWidthSmall);
    --footerLogoHeight: var(--footerLogoHeightSmall);
    --footerLogoWidth: var(--footerLogoWidthSmall);
  }
}

@media screen and (min-width:992px) {
  :root {
    --templateButtonFontSize: var(--templateButtonFontSizeMedium);
    --templateButtonCapitalFontSize: var(--templateButtonCapitalFontSizeMedium);
    --templateNormalFontSize: var(--templateNormalFontSizeMedium);
    --templateCapitalFontSize: var(--templateCapitalFontSizeMedium);
    --templateH1FontSize: var(--templateH1FontSizeMedium);
    --templateH2FontSize: var(--templateH2FontSizeMedium);
    --templateH3FontSize: var(--templateH3FontSizeMedium);
    --templateH4FontSize: var(--templateH4FontSizeMedium);
    --templateH5FontSize: var(--templateH5FontSizeMedium);
    --templateBannerHeight: var(--templateBannerHeightMedium);
    --templateBannerContentHeight: var(--templateBannerContentHeightMedium);
    --templateHeaderHeight: var(--templateHeaderHeightMedium);
    --templateHeaderMenueHeight: var(--templateHeaderMenueHeightMedium);
    --templateHeaderMenueContentHeight: var(--templateHeaderMenueContentHeightMedium);
    --templateLogoHeight: var(--templateLogoHeightMedium);
    --templateLogoWidth: var(--templateLogoWidthMedium);
    --siteFeatureContainerHeight: var(--siteFeatureContainerHeightMedium);
    --siteFeatureContainerWidth: var(--siteFeatureContainerWidthMedium);
    --headerIconHeight: var(--headerIconHeightMedium);
    --headerIconWidth: var(--headerIconWidthMedium);
    --mainTopSpacerHeight: var(--mainTopSpacerHeightMedium);
    --mainBottomSpacerHeight: var(--mainBottomSpacerHeightMedium);
    --footerTopSpacerHeight: var(--footerTopSpacerHeightMedium);
    --templateFooterHeight: var(--templateFooterHeightMedium);
    --footerIconHeight: var(--footerIconHeightMedium);
    --footerIconWidth: var(--footerIconWidthMedium);
    --footerBottomSpacerHeight: var(--footerBottomSpacerHeightMedium);
    --headerLogoHeight: var(--headerLogoHeightMedium);
    --headerLogoWidth: var(--headerLogoWidthMedium);
    --loginLogoHeight: var(--loginLogoHeightMedium);
    --loginLogoWidth: var(--loginLogoWidthMedium);
    --footerLogoHeight: var(--footerLogoHeightMedium);
    --footerLogoWidth: var(--footerLogoWidthMedium);
  }
}

@media screen and (min-width:1200px) {
  :root {
    --templateButtonFontSize: var(--templateButtonFontSizeLarge);
    --templateButtonCapitalFontSize: var(--templateButtonCapitalFontSizeLarge);
    --templateNormalFontSize: var(--templateNormalFontSizeLarge);
    --templateCapitalFontSize: var(--templateCapitalFontSizeLarge);
    --templateH1FontSize: var(--templateH1FontSizeLarge);
    --templateH2FontSize: var(--templateH2FontSizeLarge);
    --templateH3FontSize: var(--templateH3FontSizeLarge);
    --templateH4FontSize: var(--templateH4FontSizeLarge);
    --templateH5FontSize: var(--templateH5FontSizeLarge);
    --templateBannerHeight: var(--templateBannerHeightLarge);
    --templateBannerContentHeight: var(--templateBannerContentHeightLarge);
    --templateHeaderHeight: var(--templateHeaderHeightLarge);
    --templateHeaderMenueHeight: var(--templateHeaderMenueHeightLarge);
    --templateHeaderMenueContentHeight: var(--templateHeaderMenueContentHeightLarge);
    --templateLogoHeight: var(--templateLogoHeightLarge);
    --templateLogoWidth: var(--templateLogoWidthLarge);
    --siteFeatureContainerHeight: var(--siteFeatureContainerHeightLarge);
    --siteFeatureContainerWidth: var(--siteFeatureContainerWidthLarge);
    --headerIconHeight: var(--headerIconHeightLarge);
    --headerIconWidth: var(--headerIconWidthLarge);
    --mainTopSpacerHeight: var(--mainTopSpacerHeightLarge);
    --mainBottomSpacerHeight: var(--mainBottomSpacerHeightLarge);
    --footerTopSpacerHeight: var(--footerTopSpacerHeightLarge);
    --templateFooterHeight: var(--templateFooterHeightLarge);
    --footerIconHeight: var(--footerIconHeightLarge);
    --footerIconWidth: var(--footerIconWidthLarge);
    --footerBottomSpacerHeight: var(--footerBottomSpacerHeightLarge);
    --headerLogoHeight: var(--headerLogoHeightLarge);
    --headerLogoWidth: var(--headerLogoWidthLarge);
    --loginLogoHeight: var(--loginLogoHeightLarge);
    --loginLogoWidth: var(--loginLogoWidthLarge);
    --footerLogoHeight: var(--footerLogoHeightLarge);
    --footerLogoWidth: var(--footerLogoWidthLarge);
  }
}

@media screen and (min-width:2000px) {
  :root {
    --templateButtonFontSize: var(--templateButtonFontSizeXLarge);
    --templateButtonCapitalFontSize: var(--templateButtonCapitalFontSizeXLarge);
    --templateNormalFontSize: var(--templateNormalFontSizeXLarge);
    --templateCapitalFontSize: var(--templateCapitalFontSizeXLarge);
    --templateH1FontSize: var(--templateH1FontSizeXLarge);
    --templateH2FontSize: var(--templateH2FontSizeXLarge);
    --templateH3FontSize: var(--templateH3FontSizeXLarge);
    --templateH4FontSize: var(--templateH4FontSizeXLarge);
    --templateH5FontSize: var(--templateH5FontSizeXLarge);
    --templateBannerHeight: var(--templateBannerHeightXLarge);
    --templateBannerContentHeight: var(--templateBannerContentHeightXLarge);
    --templateHeaderHeight: var(--templateHeaderHeightXLarge);
    --templateHeaderMenueHeight: var(--templateHeaderMenueHeightXLarge);
    --templateHeaderMenueContentHeight: var(--templateHeaderMenueContentHeightXLarge);
    --templateLogoHeight: var(--templateLogoHeightXLarge);
    --templateLogoWidth: var(--templateLogoWidthXLarge);
    --siteFeatureContainerHeight: var(--siteFeatureContainerHeightXLarge);
    --siteFeatureContainerWidth: var(--siteFeatureContainerWidthXLarge);
    --headerIconHeight: var(--headerIconHeightXLarge);
    --headerIconWidth: var(--headerIconWidthXLarge);
    --mainTopSpacerHeight: var(--mainTopSpacerHeightXLarge);
    --mainBottomSpacerHeight: var(--mainBottomSpacerHeightXLarge);
    --footerTopSpacerHeight: var(--footerTopSpacerHeightXLarge);
    --templateFooterHeight: var(--templateFooterHeightXLarge);
    --footerIconHeight: var(--footerIconHeightXLarge);
    --footerIconWidth: var(--footerIconWidthXLarge);
    --footerBottomSpacerHeight: var(--footerBottomSpacerHeightXLarge);
    --headerLogoHeight: var(--headerLogoHeightXLarge);
    --headerLogoWidth: var(--headerLogoWidthXLarge);
    --loginLogoHeight: var(--loginLogoHeightXLarge);
    --loginLogoWidth: var(--loginLogoWidthXLarge);
    --footerLogoHeight: var(--footerLogoHeightXLarge);
    --footerLogoWidth: var(--footerLogoWidthXLarge);
  }
}