/*===========================================================
'  DOMOS myHome 
'
'  NAME:    CSS Styles
'  VERSION: 0.4.003
'  DATE:    11/12/2023
'  AUTHOR:  Luca Maroglio
'  COPY:    Zenity (c) 2023
'===========================================================*/

@font-face { font-family: 'Digital'; src: url('../fonts/Ds-Digi-Bold.ttf'); }

body {
	margin:0;
	padding:0;
	font-weight: normal;
	font-size: .875em;
	line-height: 1.6em;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   /* font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; */
   background-color: #000;
	color: #000;
	text-align: center;

	min-height: 100%;
	height: auto;
   overflow: hidden;
}

.PageBody {
   display: block;
   position:absolute;
   top: 0vh;
   left: 0vw;
   width: 100vw;
   height: 100vh;
   margin: 0px;
   padding: 60px 0 0 0;
   color: #ffffff;

   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-position: center;
   background-size: cover;
   -webkit-touch-callout: none;
   -webkit-text-size-adjust: none;

   overflow: auto;
}

.BodyTitle {
   position:absolute;
   top:0px;
   width: 100%;
   height: 44px;
   padding-top: 20px;   
   padding-bottom: 8px;   
   font-size: 38px;
   text-align: center;

   font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
   color: #ffffff;
   background-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0.7), rgba(0,0,0,0.4), rgba(0,0,0,0));
}


.PageData {
   transition: transform 0s;
   transform: translate(0vw, 0vh);
   box-shadow: 0px 0px 20px 20px #00000097;
}

#Page1 {
   background-color: #e1d4bc;
   background-image: url('../img/BG/Lighting.jpg');
   z-index: 2;
}
#Page2 {
   background-color: #152e47;
   background-image: url('../img/BG/Devices.jpg');
   z-index: 1;
}
#Page3 {
   background-color: #370b34;
   background-image: url('../img/BG/Shield.jpg');
   z-index: 1;
}
#Page4 {
   background-color: #171636;
   background-image: url('../img/BG/Meteo.jpg');
   z-index: 1;
}
#Page5 {
   background-color: #5e1605;
   background-image: url('../img/BG/BoxAuto.jpg');
   z-index: 1;
}

.BodyFooter {
   position: absolute;
   bottom: 0px;
   width: 100%;
   height: 64px;
   text-align: center;
   background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.6), rgba(0,0,0,0.8), rgba(0,0,0,1));
   z-index: 20;
}


/* ==================================================================================================================================
   LOGIN
================================================================================================================================== */

#PageLogin {
   display: block;
   background-color: #5e1605;
   background-image: url('../img/BG/Login.jpg');

   max-height: calc( 100vh - 60px );
}

#PageLogin .AppVersion {
   display: block;
   position: absolute;
   left: 20px;
   bottom: 10px;
   width: 105px;
   height: 30px;
   line-height: 30px;
   padding: 0px 10px;
   font-size: 16px;
   text-align: left;
   background-color: #040b12ab;
}

.LoginTitle {
	color: #ffffff;
   color: #f3faff;
   font-size: 2.7em;   
	font-weight: bold;
   letter-spacing: -1.3px;
   word-spacing: 5px;
   text-decoration: none solid rgb(68, 68, 68);
   text-shadow: 0px 0px 5px rgba(0, 66, 93, 1);
	margin-top: 60px;
}

.LoginTitle_Base {
   font-family: "Arial", Gadget, sans-serif;
	font-size:0.95em;
	letter-spacing:-1pt;
	font-weight:normal;
   font-variant:normal;
}
.LoginTitle_High {
	font-size:1.18em;
	letter-spacing:-3pt;
   font-variant:normal;
	color:#ec8c26;
}

.LoginArea {
   width: 60%;
   margin: 20px auto;
   padding: 10px;
   text-align: left;
   border-radius: 5px;
   color: #fff;
   border: 1px solid #cbddef9e;
   background-color: #050e17a6;
   text-align: center;
}
.LoginArea #fldLogin {
   width: calc( 94% - 20px);
   font-size: 24px;
   display: block;
   margin: 10px auto;
   padding: 4px 10px;
   border-radius: 5px;
}
.LoginArea #fldPW {
   width: calc( 94% - 20px);
   font-size: 24px;
   display: block;
   margin: 10px auto;
   padding: 4px 10px;
   border-radius: 5px;
}
.LoginArea #LoginSubmit {
   margin: 10px auto;
   padding: 10px 25px;
   font-size: 20px;
   font-weight: 500;
   border: none;
   outline: none;
   background-color: #f3faff;
   border:1px solid transparent;
   color: #014b84;
   border-radius: 5px;
   cursor: pointer;
}
.LoginArea #LoginSubmit:hover{
   background: #000f22bb;
   border:1px solid #ffffff;
   color: #ffffff;
}
#fldError {
   font-size: 24px;
}

.btCentered {
   display: none;
   opacity: 0;

   position: absolute;
   bottom: 0px;
   left: 50%;
   margin-left: -130px;
   width: 260px;

   margin-left: -35vw;
   width: 70vw;

   min-width: 260px;
   height: 50px;
   
   color:#1c3063;
   background-color: #ffffff;
   border: 1px solid #ababab;
   border-radius: 4px;
   cursor: pointer;
   z-index: 100;
   transition: opacity 3.0s;

   -webkit-tap-highlight-color: transparent;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}
.btCentered .fa {
   display: inline-block;
   position: relative;
   top: -2px;
   font-size:38px;
}
.btCentered span {
   display: inline-block;
   text-align: left;
   margin-top: 4px;
   margin-left: 10px;
   font-size:18px;
   font-weight: bold;
}

.btOnAngle {
   display: block;
   position: absolute;
   width: 42px;
   height: 42px;
   font-size:42px;
   color:#ffffff5e;
   cursor: pointer;
   z-index: 100;
   transition: opacity 0.5s;

   -webkit-tap-highlight-color: transparent;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;

}
.btOnAngle.btWithOver:hover {
   color: #FFFFFF !important;
}

#btOptions {
   top: 10px;
   left: 6px;
}

#btLogout {
   top: 10px;
   right: 4px;
}
#btLeftArrow {
   color:#ffffff5e;
   bottom: 10px;
   left: 6px;
}
#btRightArrow {
   color:#ffffff5e;
   bottom: 10px;
   right: 5px;
}

.btOnBottom {
   display: block;
   position: absolute;
   bottom: 12px;
   width: 36px;
   height: 36px;

   color: #ffffff5e;
   border: 2px solid #ffffff5e;
   border-radius: 10px;

   cursor: pointer;
   z-index: 100;
   transition: opacity 0.5s;

   -webkit-tap-highlight-color: transparent;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;

}
.btOnBottom.btWithOver:hover {
   background-color: #0000004a !important;
   color: #FFFFFF !important;
   border: 2px solid #FFFFFF !important;

}

#btOpenPage1 {
   font-size: 32px;
   left: calc( 24% - 18px );
   line-height: 35px;
}
#btOpenPage2 {
   font-size: 24px;
   left: calc( 37% - 18px );
   line-height: 36px;
}
#btOpenPage3 {
   font-size: 29px;
   left: calc( 50% - 18px );
   line-height: 35px;
}
#btOpenPage4 {
   font-size: 27px;
   right: calc( 36% - 18px );
   line-height: 35px;
}
#btOpenPage5 {
   font-size: 25px;
   right: calc( 23% - 18px );
   line-height: 33px;
}

/* ==================================================================================================================================
   WARNING
================================================================================================================================== */

#boxAreaFog {
	display: none;
	position:fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	backdrop-filter: blur(0.1rem);
	background-color: #00000041;
	z-index: 150;
}

#boxWarning {
	display: none;
	position:fixed;
	top:240px;
	top: calc(50% - 90px);
	padding: 20px 50px;
   left: calc( 50% - 200px) ;
	min-width: 320px;
   max-width: 320px;
	border: 1px solid #051a2a;
	background-color: #900e0e;
	border-radius: 8px;
	z-index: 151;
}
#boxWarningTit {
	font-size: 1.2em;
	color: #ffffff;
	margin: 0px 0px 10px 0px;
}
#boxWarningMsg {
	font-size: 1.9em;
	color: #ffffff;
	margin: 16px 0px 16px 0px;
}

.boxWarningBox {
	margin-top: 20px;
}
.boxWarningBox input {
	display: inline-block;
	width: 150px;
	max-width: 150px;
   margin: 10px 4px;
   padding: 8px 25px;
   font-size: 1.3em;
   font-weight: bold;
   border: none;
   outline: none;
   background: rgb(241, 241, 241);
   color: #014b84;
   border-radius: 5px;
   cursor: pointer;
}
.boxWarningBox input:hover{
   background: #031a3480;
   color: #ffffff;
}


/* ==================================================================================================================================
   BOTTONI BASE
================================================================================================================================== */

.RoundButton {
   width: 20vw;
   height: 20vw;
   min-width: 120px;
   min-height: 120px;
   max-width: 260px;
   max-height: 260px;

   padding: 10px 20px;
   margin: 10px;

   font-size: 18px;
   text-decoration: none;
   text-align: center;
   outline: none;

   color: #fff;
   border: solid 2px #ffffff;
   border-radius: 50%;
   background-color: rgba(4, 4, 15, 0.514);

   box-shadow: 0 1px 3px rgba(0,0,0,0.5);

   cursor: default;
}

.BigButton {
   position: relative;
   display: inline-block;
   /*
   width: 20vw;
   */
   width: calc( 100vw - 36px );

   height: 66px;
   min-width: 156px;
   min-height: 65px;
   max-width: 520px;
   max-height: 75px;

   padding: 10px 16px;
   margin: 6px;

   font-size: 18px;
   text-decoration: none;

   /*
   text-align: center;
   */
   text-align: left;

   outline: none;

   color: #fff;
   border: solid 2px #ffffff;
   border-radius: 10px;
   background-color: #04040f83;

   cursor: default;
}
.BigButton:hover {
   background-color: #27305183;
}

.MediumButton {
   display: inline-block;
   width: 30vw;
   height: 66px;
   /*
   min-width: 156px;
   min-height: 65px;
   max-width: 520px;
   max-height: 75px;
   */
   padding: 10px 16px;
   margin: 6px;
   font-size: 18px;
   text-decoration: none;
   text-align: center;
   outline: none;
   color: #fff;
   background-color: #04040f83;
   border: solid 2px #ffffff;
   border-radius: 10px;

   cursor: default;
}
.MediumButton:hover {
   background-color: #27305183;
}

.buttonHidden {
   visibility: hidden;
}

/* ==================================================================================================================================
   LIGHT
================================================================================================================================== */

.LightTit {
   display: block;
   height: 39px;
   font-size: 24px;
   margin-bottom: 26px;
}

.LightDesc {
   display: inline-block;
   font-size: 30px;
   font-weight: bold;
}

.LightButton {
   width: 140px;
   height: 140px;
   padding: 10px 6px;
   text-align: center;
   min-width: unset;
   min-height: unset;
   max-width: unset;
   max-height: unset;
   cursor: pointer;
}

.LightBlue {
   background-color: #002a62c9;
}
.LightBlue:hover {
   background-color: #00183aed;
}

.LightGreen {
   background-color: #006205c9;
}
.LightGreen:hover {
   background-color: #003503;
}

.LightRed {
   background-color: #7f0000bf;
}
.LightRed:hover {
   background-color: #530000;
}

@media (max-width: 648px) {
   .LightTit {
      font-size: 18px;
      margin-bottom: 9px;
   }
   .LightDesc {
      font-size: 22px;
   }
   .LightButton {
      width: 100px;
      height: 100px;
      margin: 3px;
   }
}

@media (max-width: 460px) {
   .LightTit {
      font-size: 16px;
      margin-bottom: 3px;
   }
   .LightDesc {
      font-size: 18px;
   }
   .LightButton {
      width: 82px;
      height: 84px;
      margin: 7px 1px;
   }
}


/* ==================================================================================================================================
   OPTIONS
================================================================================================================================== */

#PageOptions {
   display: block;
   color: #ffffff;
   background-color: #414a61;
   background-image: url('../img/BG/Options.jpg');
   z-index: 200;

   max-height: calc( 100vh - 60px );
   /* overflow: hidden; */

   transition: transform .35s;
   transform-origin: top;
   transform: translate(0vw, -100vh);
}

#btOptionsClose {
   top: 10px;
   right: 10px;
}


.OptionsTit {
   display: inline-block;
   font-size: 22px;
   font-weight: bold;
   margin-bottom:0px;
}
.OptionsDesc {
   display: inline-block;
   font-size: 22px;
   margin-bottom: 0px;
}
.OptionsMsg {
   text-align: right;
}

.OptionsButton {
   cursor: pointer;
   margin-top: 26px;
}

.OptionsButton.ButtonStart {
   background-color: #096e0ec0;
   cursor: pointer;
}

.OptionsButton.ButtonStart:hover {
   background-color: #003503;
}

.OptionsButton.ButtonStop {
   background-color: #b10e0ebf;
   cursor: pointer;
}

.OptionsButton.ButtonStop:hover {
   background-color: #530000;
}

.OptionsButton.ButtonRun {
   background-color: #c77913 !important;
}

#PageOptions .AppVersion {
   display: block;
   position: absolute;
   left: 20px;
   bottom: 10px;
   width: 200px;
   height: 30px;
   font-size: 16px;
   text-align: left;
}




/* ==================================================================================================================================
   SHIELD
================================================================================================================================== */

.btnShieldOFF {
   background-color: #006205c9;
   cursor: pointer;
}
.btnShieldOFF:hover {
   background-color: #003503;
}
.btnShieldON {
   background-color: #e71e1e75;
   cursor: pointer;
}
.btnShieldON:hover {
   background-color: #530000;
}

.ShieldTit {
   font-size: 21px;
   margin-bottom: 10px;
}
.ShieldDesc {
   font-size: 32px;
   font-weight: bold;
}


.btnStatus {
   position: relative;
   top: 55px;
   width: 6vw;
   height: 6vw;
   min-width: 40px;
   min-height: 40px;
   max-width: 70px;
   max-height: 70px;
   padding: 0px;
   margin: 0px;
   font-size: 18px;
   background-color: #69696959;
}

.btnStatusEnable {
   background-color: #99a100ed;
}


/* ==================================================================================================================================
   WEBCAM
================================================================================================================================== */

.WebCamTit {
   display: inline-block;
   font-size: 22px;
   font-weight: bold;
   margin-bottom:0px;
}
.WebCamDesc {
   display: inline-block;
   font-size: 22px;
   margin-bottom: 0px;
}
.WebCamMsg {
   text-align: right;
}

.WebCamButton {
   cursor: pointer;
}

.WebCamButton.ButtonStart {
   background-color: #00b3ef85;
   cursor: pointer;
}

.WebCamButtonOver.ButtonStart:hover {
   background-color: #00497e7d;
}

.WebCamButton.ButtonStop {
   background-color: #162353c9;
   cursor: pointer;
}

.WebCamButtonOver.ButtonStop:hover {
   background-color: #01479774;
}

.WebCamButton.ButtonRun {
   background-color: #c77913 !important;
}



/* ==================================================================================================================================
   BOX AUTO
================================================================================================================================== */

.BoxAutoMsg {
   font-size: 2.9em;   
   font-weight: bold;
}

.BoxAutoButton {
   background: #757575;
   width: 80vw;
   height: 80vw;
   margin: 115px 10px 10px 10px;
   border: solid 3px #ffffffb3;
   cursor: pointer;
}


.BoxAutoButton.ButtonStart {
   background: #006f05c9;
}

.BoxAutoButton.ButtonStart:hover {
   background: #008d06bf;
}

.BoxAutoButton.ButtonStop {
   background: #a30000c2;
}

.BoxAutoButton.ButtonStop:hover {
   background: #ce0100bf;
}

.BoxAutoButton.ButtonRun {
   background: #d07600c2 !important;
}



/* ==================================================================================================================================
   THERMOMETER
================================================================================================================================== */

.termBox {
   display: inline-block;
   margin: 10px 60px 13px 60px;
}

.termTitle {
   display: block;
   font-size: 26px;
   font-weight: bold;
   margin-top: 5px;
}

.termDisplay {
   display: block;
   min-width: 190px;
   padding: 12px 20px 7px 22px;
   font-family: 'Digital', sans-serif;
   font-weight: bold;
   color: #1c1c1c;
   background-color: #3b9c3b;
   border: 2px solid #e4e4e4;
   border-radius: 9px;
   box-shadow: inset 0px 4px 8px 2px #1b1b1b8d;
}

.termSymbol {
   font-size: 35px;
   color: #2d2d2d;
   position: relative;
   top: -10px;
}

.termValue {
   font-size: 70px;
   color: #000000;
   line-height: 70px;
   margin-right: 7px;
   margin-left: 9px;
   letter-spacing: -1px;
}

.termScale {
   font-size: 27px;
   position: relative;
   top: -24px;
}

@media (max-width: 880px) {
   .termBox {
      margin: 10px 30px 13px 30px;
   }
}

@media (max-width: 648px) {
   .termBox {
      margin: 10px 20px 0px 20px;
   }
   .termTitle {
      font-size: 24px;
   }
   .termDisplay {
      min-width: 160px;
      padding: 10px 10px 7px 12px;
   }
   .termSymbol {
      font-size: 30px;
      top: -7px;
   }
   .termValue {
      font-size: 58px;
      line-height: 53px;
   }
   .termScale {
      font-size: 26px;
      top: -18px;
   }

}

@media (max-width: 460px) {
   .termBox {
      margin: 10px 8px 0px 8px;
   }
   .termTitle {
      font-size: 22px;
   }
   .termDisplay {
      min-width: 136px;
   }
   .termSymbol {
      font-size: 26px;
      top: -6px;
   }
   .termValue {
      font-size: 50px;
      line-height: 42px;
   }
   .termScale {
      font-size: 19px;
      top: -18px;
   }
}


/* ==================================================================================================================================
   METEO
================================================================================================================================== */


.meteoBox {
   display: inline-block;
   margin: 10px 60px 13px 60px;
   min-width: 550px;
   max-width: 550px;
   height: 192px;
   padding: 0px 20px 7px 22px;
   font-weight: bold;
   color: #1c1c1c;
   background-color: #3b9c3b;
   border: 2px solid #e4e4e4;
   border-radius: 9px;
   box-shadow: inset 0px 4px 8px 2px #1b1b1b8d;
   overflow: hidden;
}
.meteoDisplay {
   display: inline-block;
   min-width: 32%;
   min-height: 70px;
}

.meteoDisplayDescr {
   font-size: 20px;
   color: #272727;
}
.meteoDisplayVal {
   font-family: 'Digital', sans-serif;
   font-weight: bold;
}

.meteoDisplayRow1 {
   margin-top: 0px;
}
.meteoDisplayRow2 {
   margin-top: 20px;
}
.meteoDisplayRow1 .meteoDisplayVal {
   font-size: 48px;   
   line-height: 64px;
}
.meteoDisplayRow2 .meteoDisplayVal {
   font-size: 65px;   
}

.meteoDisplay span img {
   position: relative;
   top: 12px;
   width: 72px;
}

.meteoDisplayPerc {
   font-family: 'Digital', sans-serif;
   font-weight: bold;
   font-size: 22px;
}

.meteoDisplay_GridVert {
   position: relative;
   top: -194px;
   left: 181px;
   width: 184px;
   height: 200px;
   border-left: 1px solid #4a8835;
   border-right: 1px solid #4a8835;

   border-left: 1px solid #78ab66;
   border-right: 1px solid #78ab66;
}
.meteoDisplay_GridHoriz {
   position: relative;
   top: -289px;
   left: -22px;
   width: 592px;
   height: 10px;
   border-top: 1px solid #4a8835;

   border-top: 1px solid #78ab66;
}

@media (max-width: 880px) {
   .meteoBox {
      margin: 10px 30px 13px 30px;
      min-width: 488px;
      max-width: 488px;
      height: 186px;
   }
   .meteoDisplay {
      min-width: 32%;
      min-height: 69px;
   }
   .meteoDisplayDescr {
      font-size: 18px;
   }
   .meteoDisplay span img {
      top: 12px;
      width: 68px;
   }
   .meteoDisplayRow1 .meteoDisplayVal {
      font-size: 44px;   
      line-height: 58px;
   }
   .meteoDisplayRow2 .meteoDisplayVal {
      font-size: 60px;   
   }
   .meteoDisplayPerc {
      font-size: 20px;
   }
   .meteoDisplay_GridVert {
      top: -188px;
      left: 158px;
      width: 167px;
      height: 194px;
   }
   .meteoDisplay_GridHoriz {
      top: -281px;
      left: -22px;
      width: 530px;
      height: 10px;
   }
}

@media (max-width: 648px) {
   .meteoBox {
      margin: 10px 20px 0px 20px;
      min-width: 388px;
      max-width: 388px;
      height: 178px;
      padding: 0px 10px 7px 12px;
   }
   .meteoDisplay {
      min-width: 32%;
      min-height: 70px;
   }
   .meteoDisplayDescr {
      font-size: 16px;
   }
   .meteoDisplay span img {
      top: 13px;
      width: 62px;
   }
   .meteoDisplayRow1 .meteoDisplayVal {
      font-size: 36px;   
      line-height: 52px;
   }
   .meteoDisplayRow2 .meteoDisplayVal {
      font-size: 50px;   
   }
   .meteoDisplayPerc {
      font-size: 18px;
   }
   .meteoDisplay_GridVert {
      top: -182px;
      left: 126px;
      width: 134px;
      height: 190px;
   }
   .meteoDisplay_GridHoriz {
      top: -276px;
      left: -12px;
      width: 410px;
      height: 10px;
   }
}

@media (max-width: 460px) {
   .meteoBox {
      margin: 10px 8px 0px 8px;
      min-width: 320px;
      max-width: 320px;
      height: 176px;
   }
   .meteoDisplay {
      min-width: 30%;
      min-height: 70px;
   }
   .meteoDisplayDescr {
      font-size: 15px;
   }
   .meteoDisplay span img {
      top: 14px;
      width: 60px;
   }
   .meteoDisplayRow1 .meteoDisplayVal {
      font-size: 34px;
      line-height: 47px;
   }
   .meteoDisplayRow2 .meteoDisplayVal {
      font-size: 43px;   
   }
   .meteoDisplayPerc {
      font-size: 16px;
   }
   .meteoDisplay_GridVert {
      top: -179px;
      left: 110px;
      width: 100px;
      height: 208px;
   }
   .meteoDisplay_GridHoriz {
      top: -292px;
      left: -12px;
      width: 342px;
      height: 10px;
   }
}



/* ==================================================================================================================================
   DISPOSITIVI
================================================================================================================================== */

.DevicesBox {
   position:sticky;
   display:inline-block;
   border: 1px solid transparent;
   border-radius: 14px;
   height: 2px;
   padding-top: 68px;
   margin-top: 20px;
   transition: height 0.3s, background-color 0.3s;
   overflow: hidden;
}
.DevicesBoxRow {
   display:block;
   width: 526px;
}

#DevicesBoxTV {   
   /* margin-top: 20px; */
}

#DevicesBoxCond {
   /* margin-top: 20px; */
}

#DevicesBoxStereoStudio {
   /* margin-top: 20px; */
}

/*
.DevicesBoxClose:hover {
   border: 1px solid #cccccc87;
   background-color: #0b0d1959;
}
*/

.DevicesBoxOpen {
   border: 1px solid #cccccc87;
   background-color: #1b2034b8;
}
.DevicesBoxOpen#DevicesBoxTV {
   height: 468px;
}
.DevicesBoxOpen#DevicesBoxCond {
   height: 236px;
}
.DevicesBoxOpen#DevicesBoxStereoStudio {
   height: 80px;
}

.DevicesBoxTitle {
   position:relative;
   display: inline-block;
   padding: 20px 10px;
   min-width: 294px;
   background-color: #04040f83;
   border: solid 2px #ffffff;
   border-radius: 10px;
   font-size: 27px;
   cursor: pointer;
}
.DevicesBoxTitle#DevicesBoxTVTitle {
   top:-536px;
}
.DevicesBoxTitle#DevicesBoxCondTitle {
   top: -302px;
}
.DevicesBoxTitle#DevicesBoxStereoStudioTitle {
   top: -146px;
}

.DevicesBoxTitle:hover {
   background-color: #27305183;
}
.DevicesBoxTitleOpen {
   color: #d0d0d0;
   background-color: transparent;
   border: solid 2px transparent;
}
.DevicesBoxTitleOpen:hover {
   color: #ffffff;
   background-color: transparent;
}

.DevicesButton {
   width: 90px;
   height: 66px;
   font-size: 28px;
   cursor: pointer;
}

.DevicesBtLarge {
   width: 248px;
}
.DevicesBtLarge .DevicesTit {
   position: relative;
   text-align: left;
   top: -5px;
   font-size: 23px;
}
.DevicesBtLarge .DevicesDesc {
   position: relative;
   text-align: right;
   top: -2px;
   font-size: 18px;
}

.DevicesButtonOpen {
   background-color: #0000033b;
}

.DevicesButton:hover {
   background-color: #7676948f;
}

@media (max-width: 880px) {
   .DevicesBox {
      padding-top: 58px;
   }
   .DevicesBoxRow {
      width: 468px;
   }
   .DevicesBoxOpen#DevicesBoxTV {
      height: 402px;
   }
   .DevicesBoxOpen#DevicesBoxCond {
      height: 202px;
   }
   .DevicesBoxOpen#DevicesBoxStereoStudio {
      height: 70px;
   }
   
   .DevicesBoxTitle {
      padding: 15px 10px;
      min-width: 255px;
      font-size: 27px;
   }
   .DevicesBoxTitle#DevicesBoxTVTitle {
      top:-460px;
   }
   .DevicesBoxTitle#DevicesBoxCondTitle {
      top: -259px;
   }
   .DevicesBoxTitle#DevicesBoxStereoStudioTitle {
      top: -124px;
   }

   .DevicesButton {
      width: 80px;
      height: 57px;
      padding: 4px 10px;
      margin: 5px;
   }
   .DevicesBtLarge {
      width: 222px;
   }
   .DevicesBtLarge .DevicesTit {
      top: -3px;
      font-size: 19px;
   }
   .DevicesBtLarge .DevicesDesc {
      top: 2px;
      font-size: 16px;
   }
}

@media (max-width: 648px) {
   .DevicesBox {
      padding-top: 54px;
   }
   .DevicesBoxRow {
      width: 414px;
   }
   .DevicesBoxOpen#DevicesBoxTV {
      height: 350px;
   }
   .DevicesBoxOpen#DevicesBoxCond {
      height: 350px;
   }
   .DevicesBoxOpen#DevicesBoxStereoStudio {
      height: 118px;
   }

   .DevicesBoxTitle {
      padding: 12px 10px;
      min-width: 225px;                                    
      font-size: 25px;
   }
   .DevicesBoxTitle#DevicesBoxTVTitle {
      top: -402px;
   }
   .DevicesBoxTitle#DevicesBoxCondTitle {
      top: -402px;
   }
   .DevicesBoxTitle#DevicesBoxStereoStudioTitle {
      top: -170px;
   }

   .DevicesButton {
      width: 72px;
      height: 50px;
      margin: 4px;
   }
   .DevicesBtLarge {
      width: 406px;
   }
   .DevicesBtLarge .DevicesTit {
      top: 1px;
      font-size: 21px;
   }
   .DevicesBtLarge .DevicesDesc {
      top: -7px;
      font-size: 18px;
   }
}

@media (max-width: 460px) {
   .DevicesBox {
      padding-top: 50px;
   }
   .DevicesBoxRow {
      width: 330px;
   }
   .DevicesBoxOpen#DevicesBoxTV {
      height: 325px;
   }
   .DevicesBoxOpen#DevicesBoxCond {
      height: 325px;
   }
   .DevicesBoxOpen#DevicesBoxStereoStudio {
      height: 110px;
   }

   .DevicesBoxTitle {
      padding: 11px 10px;
      min-width: 173px;                                    
      font-size: 23px;
   }
   .DevicesBoxTitle#DevicesBoxTVTitle {
      top: -374px;
   }
   .DevicesBoxTitle#DevicesBoxCondTitle {
      top: -374px;
   }
   .DevicesBoxTitle#DevicesBoxStereoStudioTitle {
      top: -158px;
   }

   .DevicesButton {
      width: 57px;
      height: 48px;
      margin: 3px;
   }
   .DevicesBtLarge {
      width: 324px;
   }
   .DevicesBtLarge .DevicesTit {
      top: 0px;
      font-size: 20px;
   }
   .DevicesBtLarge .DevicesDesc {
      top: -6px;
      font-size: 17px;
   }
}