:root {
  /* color variables */
   --clr-primary: #304ffe;
   --clr-primary-hover: #29e6a7;
   --clr-primary-dark: #039d69;
   --clr-gray100: #f0f7f8;
   --clr-gray200: #cfd8dc;
   --clr-gray300: #a7b7be;
   --clr-gray400: #6b7e86;
   --clr-gray500: #425a65;
  /* border radius */
   --radius: 0.2rem;
}


/* Overall Styling */
* {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
}
html {
   margin: 0 auto;
   max-width: 1300px;
}
body {
   background-color:#F5F4F4;
   font-family: Proxima Nova, sans-serif;
}
/* Header Styling */
/* Header is composed by logo and language dropdown menu */
header {
   position: relative;
   display: flex;
   flex-flow: row wrap;
   width: 100%;
   padding: 1%;
   justify-content: space-between;
   background: #004990;
   box-shadow: 0 0 88px 0 rgba(0, 0, 0, 0.52);
   color: #f1f1f1;
}

button {
  background: #004990;
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  padding: 100%;
  border-radius:50%;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.48)
}

#go_up{
  position: fixed;
  bottom: 1%;
  right: 10%;
}
#country_list {
  font-size: 1.5vw;
  padding: 1% 1%;
}
p[id^="country"]{
  padding: 2% 0 2% 0;
}
.logo_image {
   flex: 11;
   text-align: center;
   flex-shrink: 1;
}
.logo_image img {
   vertical-align: middle;
}
.logo_image_pn {
   flex: 11;
   text-align: center;
   flex-shrink: 1;
}
.logo_image_pn img {
   vertical-align: middle;
}

.helper {
   display: inline-block;
   height: 100%;
   vertical-align: middle;
   text-transform: uppercase;
}
.WordSection1{
  padding: 1% 1%;
  overflow: hidden;
  font-size: 1.5vw;
}
.WordSection1 ul{
   padding-left: 4%;
}
.WordSection1 ol{
   padding-left: 4%;
}
#language_picker {
   flex: 1;
   flex-shrink: 1;
   font-size: 1vw;
   vertical-align: middle;
   background: transparent;
}
#language_picker *{
   list-style-type: none;
   text-transform: uppercase;
   vertical-align: middle;
   text-decoration: none;
   text-align:left;
   color: #FFFFFF;
}
#current_language {
   display: inline;
   vertical-align: middle;
   white-space: nowrap;
}
#current_language img {
   width:6%;
   vertical-align: middle;
}
#current_language:hover{
   cursor: pointer;
}
#language_submenu{
   background: #004990;
   box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
   text-align: left;
   z-index: 9;
}
div#language_submenu li{
  width: 100%;
  padding: 10%;
}
/* Add box shadow and cursor pointer when hovering/activating/focunsing on each
   element of language submenu */
div#language_submenu li:is(:hover, :active, :focus) {
  cursor: pointer;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}
#language_submenu ul{
  background: #004990;
  position: absolute;
  width: 5%;
  z-index: 3;
  margin: auto;
  font-size: 1vw;
  background: #004990;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
  border-radius:10px;
  height: 7em;
  overflow-y: scroll;
}
#language_submenu ul::-webkit-scrollbar-track {
  border: 1px solid #000;
  padding: 2px 0;
  background-color: #404040;
}

#language_submenu ul:-webkit-scrollbar {
  width: 10px;
}

#language_submenu ul::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #737272;
  border: 1px solid #000;
}
/* These classes are toggled based on user clicks */
.dont_show_languages{
  display: none;
}
.show_languages{
   display: block;  
}
/* Banner Styling */
.banner {
   width: 100%;
   margin: 0px;
   color: #F1F1F1;
   text-transform: uppercase;
}
.banner img {
   position: relative;
   display: block;
   width: 100%;
}
.banner h1{
   position: absolute;
   display: block;
   margin-top:-25%;
   margin-left: 6%;
   color: white;
   font-weight: bold;
   max-width: 50%;
   text-align:left;
   text-transform: none;
}
.banner h1 small{
   color: white;
   font-weight: bold;
   text-align:left;
}
/* Middle content Styling */
/* Middle content is composed by some text + app banners */
.middle_content {
   width: 100%;
   background-color: white;
   color: #686767;
   padding: 1%;
   margin: auto;
   text-align: center;
}
.middle_content p {
   text-align: center;
   font-size: 1.8vw;
   margin-left: auto;
   margin-right: auto;
   padding: 10px;
}
.middle_content table{
   width: 50%;
   padding: 10px;
   margin: 0 auto;
   border-spacing: 20px;
}
.text_column {
   text-align: left;
   white-space: normal;
   font-size: 1.5vw;
   width: 80%;
   text-transform: uppercase;
}
.image_column{
   width:10%;
}
.rounded_icons{
   background: #004990;
   border-radius: 50px;
   vertical-align: middle;
   width: 100%;
}
.app_banners{
   display: flex;
   width: 100%;
   padding: 3%;
   justify-content: space-between;
   flex-flow: row wrap;
   gap: 3%;
}
#play_store img{
   width: 50%;
}
#apple_store img{
   width: 50%;
}
.app_banners div img:is:hover{
  cursor: pointer;
}
.column_left {
   flex: 5;
   flex-shrink: 1;
   text-align: right;
}
.column_center {
   flex: 2;
   flex-shrink: 1;
   text-align: right;
}
.column_right {
   flex: 5;
   flex-shrink: 1;
   text-align: left;
}
#play_store:hover{
   cursor: pointer;
}
#apple_store:hover{
   cursor: pointer;
}
#download_button{
   width: 12%;
   align: center;
   background: #004990;
   border-radius: 5px;
   padding: 1%;
   margin: 2% auto;
}
#download_button a{
    text-decoration: none;
    color: #FFFFFF;
    }

/* Select Model Content Styling */
/* Model content is composed by text */
.select_model_content {
   width: 100%;
   color: #686767;
   padding: 3%;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
   font-size: 1.8vw;
}
.bold_title{
   color:#004990;
   font-weight: 700;
   text-transform: uppercase;
   font-size: 1.8vw;
}
/* Interactive Model Selection Styling */
/* Interactive Model Selection is composed by two dropdown menus */
#interactive_model_selection{
   display: flex;
   flex-flow: row wrap;
   padding: 0 1% 1% 1%;
}
#interactive_model_selection *{
   list-style-type: none;
   vertical-align: middle;
   text-decoration: none;
}
.column{
   flex: 5;
   margin: 2%;
}
#product_type_box{
   width: 100%;
   background: #FFFFFF;
   box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 2px rgba(0, 0, 0, 0.24);
   border-radius: 3px;
   color: #686767;
}
/* Change cursor type when hovering over element */
#product_type_box:hover{
  cursor:pointer;
}
#product_type_box img {
  width: 3%;
}
.first_element_product_type_wrapper{
   width: 100%;
   display: flex;
   justify-content: space-between;
   padding: 1% 3% 1% 3%;
}
#first_element_product_type{
   font-size: 1vw;
   text-align: left;
}
#first_element_product_type p b{
       font-size: 1vw;
}
#product_type_subitems hr{
   color: #E3E3E3;
   width: 90%;
   margin: auto;
   height:1px;
   border-width:0;
   text-align: center;
   background-color: #E3E3E3;
}
.subitem {
   width: 100%;
   display:flex;
   justify-content: left;
   font-size: 1vw;
   padding: 2%;
   align-items: center;
}
.subitem p {
   text-align: left;
   flex:10;
}
/* dont show submenus item image when not hovering over the specific item*/
.subitem img {
   display: none;
}
/* change submenus elemnts when hovering over*/
.subitem:hover{
   cursor: pointer;
   box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.12), 0px 1px 1px rgba(0, 0, 0, 0.12);
}
/* show submenus item image when hovering over the specific item*/
.subitem:is(:active, :focus) img {
   margin: 2%;
   display: initial;
   flex: initial;
}
.model_subitem {
   width: 100%;
   display: flex;
   vertical-align: middle;
   font-size: 1vw;
   text-align: left;
   padding: 2%;
   align-items: center;
}
.model_subitem p {
   flex: 10;
}
/* dont show submenus item image when not hovering over the specific item*/
.model_subitem img {
   flex: 2;
}
/* change submenus elemnts when hovering over*/
.model_subitem:hover{
   cursor: pointer;
   box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.12), 0px 1px 1px rgba(0, 0, 0, 0.12);
}
/* These classes are toggled based on user clicks */
.dont_show_product_type_submenu{
  display: none;
}
.show_product_type_submenu{
  display: block;
}
#model_name_box{
   width: 100%;
   background: #FFFFFF;
   border-radius: 3px;
   color:#686767;
}
#first_element_model_name {
   font-size: 1vw;
   text-align: left;
}
#model_name_box img {
   width: 3%;
}
/* These classes are toggled based on user clicks */
.disabled_model_name{
   color: rgba(104, 103, 103, 0.5);
   box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.12), 0px 0px 1px rgba(0, 0, 0, 0.12);
}
.enabled_model_name{
   color:#686767;
   box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 2px rgba(0, 0, 0, 0.24);
}
/* Change cursor type when hovering over element */
.enabled_model_name:hover{
   cursor: pointer;
}
.first_element_model_name_wrapper{
   width: 100%;
   display: flex;
   justify-content: space-between;
   padding: 1% 3% 1% 3%;
}
 #first_element_model_name p b{
       font-size: 1vw;
}
#search_model_bar {
   background-image: url('https://discover.ariston-net.remotethermo.com/static/img/lens.svg');
   background-position: 0.1vw 0.1vw;
   background-repeat: no-repeat;
   background-color: #F5F4F4;
   width: 90%;
   font-size: 0.8vw;
   font-style: italic;
   border: 1px solid #ddd;
   padding: 1vw 2vw 1vw 3vw;
   color: #979797;
}
textarea:focus, input:focus{
   outline-style: outset;
   outline-color: #ddd;
}
/* These classes are toggled based on user clicks */
.dont_show_model_name_submenu{
   display: none;
}
.show_model_name_submenu {
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
   margin: 0;
   width:100%;
   height: 8vw;
   overflow-y: scroll;
}
img.hmi{
   width: 100%;
   flex:2;
   vertical-align: middle;
   display: inline;
}
#popup_opener{
  color:#004990;
  text-decoration: underline;
  padding: 2%;
  font-size: 1.5vw;
   
}
#popup_opener:is(:hover, :active, :focus){
  cursor: pointer;
  text-decoration: underline;
}
.model_popup{
  width: 50%;
  margin: auto;
  height: 100%;
  display: none;
  background-color: #FFFFFF;
  border-radius: 2.5px;
  z-index: 101;
  box-shadow: 0px 23px 25px rgba(0, 0, 0, 0.4);
  place-items: center;
}
.inner_popup{
  width: 100%;
  flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  position:relative;
  z-index: 101;
  place-items: center;
}
.upper_image{
  background-color: #DFDFDF;
  width:100%;
  padding: 2%;
}
.upper_image img{
  width: 20%;
  display: block;
  margin: auto;
}
.lower_text{
  color: #686767;
  flex: 5;
  text-align: center;
}
.lower_text a{
  color: #686767;
  text-decoration: none;
  text-align: center;
}
.lower_text h2{
  color: #686767;
  text-decoration: none;
  text-align: center;
  width: 90%;
  display: inline-block;
  margin: auto;
  padding: 8%;
}
.lower_text p{
  font-size: 2vw;
  font-weight: 700;
  color: #686767;
  text-decoration: none;
  text-align: center;
  width: 90%;
  display: inline-block;
  margin: auto;
  padding: 8%;
}
.close_popup{
  position: absolute;
  top: 10%;
  right:5%;
  color:#004990;
  text-align:right;
}
.close_popup img{
  width: 100%;
}

.close_popup:is(:hover, :active, :focus){
  color:#004990;
  text-decoration: underline;
  cursor: pointer;
}
.overlay {
  display:none;
  position:fixed;
  padding:0;
  margin:0;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  background:rgba(255,255,255,0.7);
  z-index: 100;
}

.app_popup{
  width: 100%;
  margin: auto;
  height: 100%;
  display: none;
  background-color: #FFFFFF;
  box-shadow: 0px 23px 25px rgba(0, 0, 0, 0.4);
  border-radius: 2.5px;
  z-index: 101;
  place-items: center;
}
/* Results Styling */
/* results are composed by two section, 
   one containing a download button, the other,
   if visible, containing an embedded youtube video*/
#results {
   display: none;
   flex-flow: column nowrap;
   font-size: 22px;
   padding: 4% 0% 0% 0%;

}
.results_title {
   color: #686767;
   flex: 12;
   text-transform: uppercase;
}
.results_content {
   flex:12;
   display:flex;
   flex-flow: row wrap;
}
.document{
   display: flex;
   flex-flow: column nowrap;
   flex: 6;
   margin: 3%;
   text-align: left;
   vertical-align: middle;
}
.document table{
   background: #FFFFFF;
   border-radius: 2px;
   border-spacing: 2%;
   padding: 2%;
}
.document table tr td{
   border-spacing: 2%;
}
.grey_title{
   color: #686767;
   font-weight: 600;
   text-transform: uppercase;
}
.grey_text{
   color:rgb(137, 134, 134);
   font-weight: 600;
   font-size: 20px;
}
#download_pdf *{
   color: #004990;
   font-weight: 600;
   font-size: 20px;
   text-decoration: none;
}
.video{
   background: #DFDFDF;
   display: flex;
   flex-flow: column nowrap;
   flex: 6;
   margin: 3%;
   text-align: left;
   vertical-align: middle;
}
.video table{
   border-radius: 2px;
   border-spacing: 2%;
   padding: 2%;
}
.video table tr td{
   border-spacing: 2%;
}
#video_frame iframe{
   width: 100%;
}
.commercial{
   display: flex;
   flex-flow: column nowrap;
   flex: 6;
   margin: 3%;
   text-align: left;
   vertical-align: middle;
}
.commercial table{
   background-image: url(https://s3.eu-west-1.amazonaws.com/discover.ariston-net.remotethermo.com/static/img/wind_turbines.svg);
   background-position: top center;
   background-repeat: no-repeat;
   background-size: cover !important;
   border-radius: 2px;
   padding: 40% 2% 2% 2%;
   width: 100%;
}
.commercial table tr td{
   background: #03A649;
   padding: 2%;
}
.commercial table tr td a{
  text-decoration: none;
  color: #000000;
  font-size: 22px;
  text-align: left;
}
#go_to_site{
  width: 100%;
  display:flex;
  justify-content: space-between;
}

/* Cancellation Policy Styling */
.cancellation_policy {
   width: 100%;
   background-color: white;
   color: #686767;
   padding: 1%;
   margin: auto;
   text-align: center;
   font-size: 1.3vw;
}
.cancellation_policy p {
   text-align: left;
   margin-left: auto;
   margin-right: auto;
   padding: 10px;
}.cancellation_policy ul {
   text-align: left;
   padding: 0% 0% 0% 6%;
}

/* @Media section  */
@media screen and (max-width: 3000px) {
   .banner h1{
	margin-top: -15%;
	font-size: 2vw;
	max-width: 30%;
	}
}
@media screen and (max-width: 2000px) {
   .banner h1{
	margin-top: -20%;
	font-size: 2vw;
	max-width: 40%;
	}
}
@media screen and (max-width: 900px) {
      .banner h1{
     margin-top: -31%;
     font-size: 4vw;
     max-width: 60%;
 }
}

@media screen and (max-width: 600px) {
   .logo_image img {
     width: 30%;
  }
  .logo_image_pn img {
     width: 70%;
     padding: 2%;
  }

   #language_picker {
     font-size: 2vw;
     vertical-align: middle;
  }
  #current_language img {
     width: 15%;
  }
  #language_submenu ul {
     width: 8%;
     font-size: 2vw;    
  }
   .banner h1{
   margin-top: -31%;
   font-size: 4vw;
   max-width: 60%;
  }
   .middle_content p {
     font-size: 5.5vw;
  }

   .middle_content table {
     width: 70%;
     padding: 2vw;
     border-spacing: 2vw;
  }
   .text_column {
     font-size: 3vw;
  }
 #play_store img{
   width: 90%;
  }
 #apple_store img{
   width: 90%;
  }
   .app_advantages_container{
    width: 70%;
    margin: auto;
  }
  .column_left{
       text-align: center;
       flex: 4;
       margin: 2% 0% 2% 0%;
  }
   .column_right{
       text-align: center;
       flex:4;
       margin: 2% 0% 2% 0%;
       font-size: 6vw;
  }
   .select_model_content {
       font-size: 5vw;
  }
  #interactive_model_selection{
       flex-flow:nowrap column;
  }
  .bold_title{
   color:#004990;
   font-weight: 700;
   text-transform: uppercase;
   font-size: 5vw;
}
   .column{
       flex:2;
       margin: 0% 10% 2% 10%;
  }
   
   #first_element_product_type {
       font-size: 3.5vw;
  }
   
   .subitem {
       font-size: 3.5vw;
  }
   #first_element_model_name {
       font-size: 3.5vw;
  }
  .show_model_name_submenu {
       height: 10vw;
}
   #search_model_bar {
       font-size: 3vw;
  }
   .model_subitem {
       font-size: 3.5vw;
  }
   .results_content{
       flex-flow:nowrap column;
  }
   #results {
       font-size: 6vw;
  }
   .grey_text {
       font-size: 4vw;
  }
   #download_pdf * {
       font-size: 5vw;
  }
   #popup_opener{
       font-size: 3vw;
  }
   .lower_text a{
       color: #686767;
       text-decoration: none;
       text-align: center;
       font-size: 4vw;
  }
  .close_popup{
       position: absolute;
       top: 10%;
       right: 10%; 
       color:#004990;
       text-align:right;
       text-transform: uppercase;
   }
 #country_list {
  padding: 1% 1%;
  font-size: 4vw;
  }
 .WordSection1{
  padding: 1% 1%;
  font-size: 4vw;
  overflow: hidden;
  }
  
}
   @media screen and (max-width: 400px) {
   .banner h1{
     font-size: 3vw;
     max-width: 60%;
     }
      .middle_content table {
     width: 70%;
     padding: 0px;
     border-spacing: 2vw;
  }
   .text_column {
     font-size: 4vw;
  }
   .image_column {
     width:15%;
   }
  #country_list {
  padding: 1% 1%;
  font-size: 4vw;
  }
 .WordSection1{
  padding: 1% 1%;
  font-size: 4vw;
  overflow: hidden;
  }
}