body{
 margin:0;
 background-color:rgba(225,255,255,1);
 /*
 background-image:url(../bg_1020.png);
 background-repeat:repeat-y;
 background-position:center;
 */
}
div{text-align:center;}
table{border:0;border-spacing:0;border-collapse:0;}
td{padding:0;}
/* Reihenfolge für Border: 1-top 2=right 3=bottom 4=left */
.bg-container{
 margin:0 auto;
 width:100%;
 background:linear-gradient(to top,rgba(47,207,207,1)0%,rgba(103,255,255,1)20%,rgba(225,255,255,1)80%,rgba(242,255,255,1)100%);
 /* background-image:linear-gradient(to top,rgba(0,66,11,0.4)0%,rgba(255,255,0,0.4)5%,rgba(0,0,255,0.4)55%,rgba(0,0,255,0.4)75%,rgba(0,0,0,0.4)100%); */
 background-repeat:no-repeat;
 position:absolute;top:0;bottom:0;
}
.wrapper{
 margin:10px auto;
 max-width:1000px;min-width:600px;
 background-color:rgba(225,255,255,0.5);
 padding:5px;
 border-radius:15px;
 -webkit-box-sizing:border-box;
 -moz-box-sizing:border-box;
 -o-box-sizing:border-box;
 box-sizing:border-box;
 -webkit-box-shadow:0 0 10px 0 rgba(0,0,0,0.75);
 -moz-box-shadow:0 0 10px 0 rgba(0,0,0,0.75);
 -o-box-shadow:0 0 10px 0 rgba(0,0,0,0.75);
 box-shadow:0 0 10px 0 rgba(17, 158, 168, 0.75);
}
.frametop{
 background-color:rgba(225,255,255,1);
 max-width:976px;min-width:576px;
 height:calc(100vh - 44px);
 border:7px solid rgba(245,224,167,1);
 border-radius:10px;
}
.frameborder{
 position:relative;top:-5px;left:-5px;
 max-width:980px;min-width:580px;
 width:calc(100% + 4px);
 height:calc(100vh - 40px);
 border:3px solid rgba(255,194,80,1);
 border-radius:8px;
 -webkit-box-shadow:inset 0 0 15px 0 rgba(190,90,10,0.8);
 -moz-box-shadow:inset 0 0 15px 0 rgba(190,90,10,0.8);
 -o-box-shadow:inset 0 0 15px 0 rgba(190,90,10,0.8);
 box-shadow:inset 0 0 20px 0 rgba(190,90,10,0.8);
}
.header{
 padding:10px;padding-top:40px;
 /*position:relative;top:10px;left:10px;*/
 /*width:calc(100% - 20px);height:180px;*/
 background-color:transparent;
 border-radius:5px;
}
.title{
 margin:0 auto;
 width:320px;height:70px;
 background-image:url(../electrix_ch2.png);
 background-repeat:no-repeat;
}
.title1{margin:0 auto;width:320px;height:70px;}
.shadow{text-shadow:10px 10px 10px rgba(0,0,0,0.4);}
.filter-shadow{filter:url(#shadow);}

.main{
 position:relative;top:10px;left:10px;
 width:calc(100% - 20px);
 background-color:transparent;
 overflow-y:scroll;
}
.main::-webkit-scrollbar{width:10px;padding-bottom:20px;}
.main::-webkit-scrollbar-track{box-shadow:inset 0 0 6px rgba(0,0,0,0.4);}
.main::-webkit-scrollbar-thumb{background-color:darkgrey;outline:1px solid slategrey;}
.button{
 padding:10px;
 border:2px solid black;
 border-radius:15px;
}
.button:hover{background-color:orange;cursor:pointer;}
.img_me{
 margin:0 auto;
 width:200px;
 height:200px;
 border-radius:100%;
 background-size:cover;
 background-image:url("https://www.electrix.ch//me_firma/me_logo.png");
 cursor:pointer;
}
.img_me:hover{
 -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 0, 0, 0.1) inset, 0 5px 10px #ccc;
 -ms-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 0, 0, 0.1) inset, 0 5px 10px #ccc;
 -o-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 0, 0, 0.1) inset, 0 5px 10px #ccc;
 box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 0, 0, 0.1) inset, 0 5px 10px #ccc;

}


/**************************/
/* Logo Firma in Subotica */
/**************************/
#svg_clock{
 border:1px solid;
 border-radius:50%;
 --accent:#c32e04;
 }
#timer{
	fill:none;
	stroke:var(--accent);
	stroke-width:100;
	stroke-dasharray:0 314;
	transform:rotate(-90deg);
}
#controls{width:100px;text-align:center;}


.me_svg{fill:#ccc;}
.me_header{
 margin:0;
 padding:20px;
 background-color:chartreuse;
 max-width:100%;
 text-align:center;
}
.me_logo{
 margin:0;
 padding:20px;
 background-color:gold;
 width:auto;
 text-align:center;
}
.me_main{
 margin:0;
 padding:20px;
 background-color:transparent;
 max-width:100%;
 text-align:center;
}
.me_circle{
 margin:0;
 padding:20px;
 background-color:transparent;
 width:auto;
 text-align:center;
}