/*   http://www.bypeople.com/oldschool-toggeler-in-css3-codepen/   */

*{ margin:0; padding:0; }
html, body{ height:100%; }
body {
    font:15px/1 arial;
    text-align:center;
    //width: 1000px;
}

header {
    display: flex;
    justify-content: center;
}

fieldset{ display:inline-block; vertical-align:middle; border:none; width:370px; }
    .legend{ color:rgba(0,0,0,.7); font-size:12px; margin-bottom:14px; height:15px; border-color:#2E6677; border-style:solid; border-width:1px 1px 0 1px; box-shadow:1px 1px 0 rgba(255,255,255,0.2) inset; text-shadow:0 1px rgba(255,255,255,.3); }
        .legend span{ text-transform:uppercase; position:relative; top:-5px; padding:0 10px; background:#509DAD; display:inline-block; }
    .checkboxGroup{ display:inline-block; vertical-align:middle; width:150px; border:none; }
/*------- Horizontal power swtich ---------*/
.checkboxControl{ 
    border:2px solid #102838; border-radius:7px; display:inline-block; width:100px; height:50px; padding-top:1px; position:relative; vertical-align:middle; margin:0 60px 10px 0; color:#297597;
    box-shadow: 0 0 5px rgba(255,255,255,.4), 
                0 2px 1px -1px rgba(255,255,255,.7) inset, 
                8px 0 5px -5px #02425C inset,
                -8px 0 5px -5px #02425C inset;
    -moz-user-select:none; -webkit-user-select:none; 
    background:#80DCE9;
}
    .checkboxControl input{ position:absolute; visibility:hidden; }
    .checkboxControl > div{ 
        background:-webkit-linear-gradient(left, #8FD9E4 0%,#A0F2FE 53%,#69DCF1 56%,#33AFCE 99%,#CEF5FF 100%);
        background:linear-gradient(to right, #8FD9E4 0%,#A0F2FE 53%,#69DCF1 56%,#33AFCE 99%,#CEF5FF 100%);
        box-shadow:-2px 0 1px 0 #A6F2FE inset;
        border-radius:5px; line-height:50px; font-weight:bold; cursor:pointer; position:relative; z-index:1; text-shadow:0 1px rgba(255,255,255,0.5);
        
        transform-origin:0 0; -webkit-transform-origin:0 0; 
        transform:scaleX(0.93); -webkit-transform:scaleX(0.93);
        transition:.1s; -webkit-transition:0.1s;
    }
    .checkboxControl div:first-letter{ letter-spacing:55px; }
    
    .checkboxControl :checked ~ div{ 
        transform-origin:100% 0; -webkit-transform-origin:100% 0;
        box-shadow:2px 0 1px 0 #A6F2FE inset;
        background:-webkit-linear-gradient(left, #CEF5FF 0%,#33AFCE 1%,#69DCF1 47%,#A0F2FE 50%,#8FD9E4 100%);
        background:linear-gradient(to right, #CEF5FF 0%,#33AFCE 1%,#69DCF1 47%,#A0F2FE 50%,#8FD9E4 100%);
    }
    /* bottom shadow of 'upper' side of the button */
    .checkboxControl > b{ position:absolute; bottom:0; right:0; width:50%; height:100%; border-radius:8px; -webkit-transform:skewY(5deg); transform:skewY(5deg); box-shadow: 0 6px 8px -5px #000; }
    .checkboxControl :checked ~ b{ right:auto; left:0; -webkit-transform:skewY(-5deg); transform:skewY(-5deg); }
    /* the light indicator to the right of the button */
    .checkboxControl .indicator{ position:absolute; top:14px; right:-20px; width:8px; height:25px; box-shadow:0 0 8px #000 inset; border:1px solid rgba(255,255,255,0.1); border-radius:15px; transition:0.2s; -webkit-transition:0.2s; }
    .checkboxControl .indicator:before{ content:''; display:inline-block; margin-top:8px; width:2px; height:8px; border-radius:10px; transition:0.5s; -webkit-transition:0.5s; }
    .checkboxControl :checked ~ .indicator:before{ box-shadow:0 0 7px 6px #BAFC58; width:6px; background:#F0F9E3; transition:0.1s; -webkit-transition:0.1s; }
    
    /*------- Vertical power swtich ---------*/
    .checkboxControl2{ 
        border:2px solid #102838;  /*1 and 0 text on switch*/
	border-radius:7px; 
	display:inline-block; 
	vertical-align:middle; 
	font-weight:bold;
        width:30px; 
	height:100px; /* height of switch. Must also change text to change height. */
	position:relative; 
	margin:10px 0px;
        color:#12678C; 
	box-shadow:0 0 5px rgba(255,255,255,.4);
    }
    .checkboxControl2 input{ position:absolute; visibility:hidden; }
    .checkboxControl2 > div{ 
        background:-webkit-linear-gradient(top, #002B44 0%, #777 11%, #AAA 14%, #FEFEFE 58%, #E7E7E7 96%, #E8E8E8 100%); 
        background:linear-gradient(to bottom, #002B44 0%, #777 11%, #AAA 14%, #FEFEFE 58%, #E7E7E7 96%, #E8E8E8 100%);
/*	background:-webkit-linear-gradient(top, #002B44 0%, #0690AC 11%, #038EAA 14%, #A0F2FE 58%, #91DBE7 96%, #B9E8E8 100%); 
        background:linear-gradient(to bottom, #002B44 0%, #0690AC 11%, #038EAA 14%, #A0F2FE 58%, #91DBE7 96%, #B9E8E8 100%);*/
        height:100%; border-radius:5px; line-height:50px; font-we0 0px 3px 0px #F95757 inset, 0 0 12px 6px #F95757tion:relative; z-index:1; cursor:pointer; text-shadow:0 1px rgba(255,255,255,0.5);
    }
    .checkboxControl2 > div:after{ 
        content:'Ο'; display:block; height:50%; line-height:4;
        transform-origin:0 0; -webkit-transform-origin:0 0;
    }
    .checkboxControl2 > div:before{ 
        content:'Ι'; display:block; height:50%; line-height:2.5;
        border-radius:80%/5px;
        box-shadow:0 8px 12px -13px #89DFED inset, 0 -2px 2px -1px rgba(255,255,255,0.8);
        transform-origin:0 100%; -webkit-transform-origin:0 100%; 
        transform:scaleY(0.7); -webkit-transform:scaleY(0.7);
    }
    
    .checkboxControl2 :checked ~ div{
/*	background:-webkit-linear-gradient(bottom, #002B44 0%, #0690AC 11%, #038EAA 14%, #A0F2FE 58%, #91DBE7 96%, #B9E8E8 100%);
        background:linear-gradient(to top, #002B44 0%, #0690AC 11%, #038EAA 14%, #A0F2FE 58%, #91DBE7 96%, #B9E8E8 100%);*/
/*        background:-webkit-linear-gradient(bottom, #002B44 0%, #0690AC 11%, #038EAA 14%, #A0F2FE 58%, #91DBE7 96%, #B9E8E8 100%);
        background:linear-gradient(to top, #002B44 0%, #0690AC 11%, #038EAA 14%, #A0F2FE 58%, #91DBE7 96%, #B9E8E8 100%);*/
	background:-webkit-linear-gradient(bottom, #002B44 0%, #777 11%, #AAA 14%, #FEFEFE 58%, #E7E7E7 96%, #E8E8E8 100%); 
        background:linear-gradient(to top, #002B44 0%, #777 11%, #AAA 14%, #FEFEFE 58%, #E7E7E7 96%, #E8E8E8 100%);
    }
    .checkboxControl2 :checked ~ div:before{ 
        border-radius:0; box-shadow:none;
        transform:none; -webkit-transform:none;
    }
    .checkboxControl2 :checked ~ div:after{ 
        border-radius:80%/5px;
        box-shadow:0 -8px 12px -5px #FFF inset, 0 2px 2px 0 #FFF;
        transform:scaleY(0.7); -webkit-transform:scaleY(0.7);
    }
    /* the light indicator to the top of the button */
    .checkboxControl2 .indicator{ position:absolute; top:-12px; left:2px; width:25px; height:8px; box-shadow:0 0 8px #000 inset; border:1px solid rgba(255,255,255,0.1); border-radius:15px; transition:0.2s; -webkit-transition:0.2s; }
    .checkboxControl2 .indicator:before{ content:''; display:block; margin:2px auto; width:8px; height:5px; border-radius:10px; transition:0.5s; -webkit-transition:0.5s; }
    .checkboxControl2 :checked ~ .indicator:before{ box-shadow:0 0 2px 0px #F95757 inset, 0 0 12px 6px #F95757; background:#FFF; transition:0.1s; -webkit-transition:0.1s; }

#logo_box {

/*    margin-left: -100px;
    margin-top: -10px;
    position: absolute;
    left: 50%;
    top: 50%;*/
    background-color: silver;
/*    color: #24E0FF;*/
    color: #1290FF;
    font-size: 50px;
    text-align: center;
    text-shadow: 0px 0 3px black;
/*    text-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #006 0 -1px 9px, #3F8CFF 0 2px 24px;
    text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;*/
/*    border-top: 5px solid #24E0FF;
    border-bottom: 5px solid #24E0FF;*/
/*  border-right: 2px solid black; 
    border-left: 2px solid black;*/
    width: 350px;
    height: 139px;
/*    font-size: 16px;*/
/*    padding: 4px;*/
/*    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;*/
/*    box-shadow: inset 0px 0px 8px #1290FF;
    -moz-box-shadow: inset 0px 0px 8px #1290FF;
    -webkit-box-shadow: inset 0px 0px 8px #1290FF;*/
    

}

#inside_box {
        padding-top: 10px;
    height: 109px;
}

#grad {
/*  background: red;  For browsers that do not support gradients 
   Safari 5.1 to 6.0 
  background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
   Opera 11.1 to 12.0 
  background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
   Firefox 3.6 to 15 
  background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
   Standard syntax 
  background: repeating-linear-gradient(red, yellow 10%, green 20%);*/
height: 10px;
    background: red; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(#1290FF, #24E0FF, #1290FF); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#1290FF, #24E0FF, #1290FF); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#1290FF, #24E0FF, #1290FF); /* For Firefox 3.6 to 15 */
  background: linear-gradient(rgba(192,192,192,.25), #1290FF, #24E0FF, #24E0FF, #1290FF, rgba(192,192,192,.25)); /* Standard syntax */
}

#logo_text_1 {
    float:right;
    margin-right: 75px;
/*    text-shadow: 0 0 3px silver;
    text-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #006 0 -1px 9px, #3F8CFF 0 2px 24px;
    text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;*/
/*    -webkit-animation: blinkBlueText 5s;
    -moz-animation: blinkBlueText 5s infinite;
    -ms-animation: blinkBlueText 5s infinite;
    -o-animation: blinkBlueText 5s infinite;
    animation: blinkBlueText .5s;
    animation-play-state: paused;
    animation-fill-mode: forwards;*/
}

.light_text_1 {
    -webkit-animation: blinkBlueText 5s;
    -moz-animation: blinkBlueText 5s infinite;
    -ms-animation: blinkBlueText 5s infinite;
    -o-animation: blinkBlueText 5s infinite;
    animation: blinkBlueText .5s;
    //animation-play-state: paused;
    animation-fill-mode: forwards;  
}

#logo_text_2 {
    
}

#logo_box1 { 
/*    outline: none;*/
    float:left;
    border: 3px solid #24E0FF;
    box-shadow: 0px 0px 8px #1290FF;
    -moz-box-shadow: 0px 0px 8px #1290FF;
    -webkit-box-shadow: 0px 0px 8px #1290FF;
}
/*********************************************************************/
/*http://codepen.io/fskirschbaum/pen/MYJNaj*/
.container {
	background-size: cover;
  background: rgb(226,226,226); /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(226,226,226,1)), color-stop(50%,rgba(219,219,219,1)), color-stop(51%,rgba(209,209,209,1)), color-stop(100%,rgba(254,254,254,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* IE10+ */
  background: linear-gradient(to bottom,  rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */
  padding: 20px;
}

.led-box {
  height: 30px;
/*  width: 25%;*/
  margin: 10px 10px;
  float: left;
}

.led-box p {
  font-size: 12px;
  text-align: center;
  margin: 1em;
}

.led-red {
  margin: 0 auto;
  width: 20px;
  height: 20px;
  background-color: #F00;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 12px;
  -webkit-animation: blinkRed 0.5s infinite;
  -moz-animation: blinkRed 0.5s infinite;
  -ms-animation: blinkRed 0.5s infinite;
  -o-animation: blinkRed 0.5s infinite;
  animation: blinkRed 0.5s infinite;
}

@-webkit-keyframes blinkRed {
    from { background-color: #F00; }
    50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
    to { background-color: #F00; }
}
@-moz-keyframes blinkRed {
    from { background-color: #F00; }
    50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
    to { background-color: #F00; }
}
@-ms-keyframes blinkRed {
    from { background-color: #F00; }
    50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
    to { background-color: #F00; }
}
@-o-keyframes blinkRed {
    from { background-color: #F00; }
    50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
    to { background-color: #F00; }
}
@keyframes blinkRed {
    from { background-color: #F00; }
    50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
    to { background-color: #F00; }
}

.led-yellow {
  margin: 0 auto;
  width: 20px;
  height: 20px;
  background-color: #FF0;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #FF0 0 2px 12px;
  -webkit-animation: blinkYellow 1s infinite;
  -moz-animation: blinkYellow 1s infinite;
  -ms-animation: blinkYellow 1s infinite;
  -o-animation: blinkYellow 1s infinite;
  animation: blinkYellow 1s infinite;
}

@-webkit-keyframes blinkYellow {
    from { background-color: #FF0; }
    50% { background-color: #AA0; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #FF0 0 2px 0; }
    to { background-color: #FF0; }
}
@-moz-keyframes blinkYellow {
    from { background-color: #FF0; }
    50% { background-color: #AA0; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #FF0 0 2px 0; }
    to { background-color: #FF0; }
}
@-ms-keyframes blinkYellow {
    from { background-color: #FF0; }
    50% { background-color: #AA0; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #FF0 0 2px 0; }
    to { background-color: #FF0; }
}
@-o-keyframes blinkYellow {
    from { background-color: #FF0; }
    50% { background-color: #AA0; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #FF0 0 2px 0; }
    to { background-color: #FF0; }
}
@keyframes blinkYellow {
    from { background-color: #FF0; }
    50% { background-color: #AA0; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #FF0 0 2px 0; }
    to { background-color: #FF0; }
}

.led-green {
  margin: 0 auto;
  width: 20px;
  height: 20px;
  background-color: #ABFF00;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #304701 0 -1px 9px, #89FF00 0 2px 12px;
}

.led-blue {
  margin: 0 auto;
  width: 20px;
  height: 20px;
  background-color: #24E0FF;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #006 0 -1px 9px, #3F8CFF 0 2px 14px;
  -webkit-animation: blinkBlue 1s infinite;
  -moz-animation: blinkBlue 1s infinite;
  -ms-animation: blinkBlue 1s infinite;
  -o-animation: blinkBlue 1s infinite;
  animation: blinkBlue 1s infinite;
}

@-webkit-keyframes blinkBlue {
    from { background-color: #24E0FF; }
    50% { background-color: #1290FF; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #1250FF 0 -1px 9px,  #FFF 0 2px 0;}
    to { background-color: #24E0FF; }
}
@-moz-keyframes blinkBlue {
    from { background-color: #24E0FF; }
    50% { background-color: #1290FF; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #1250FF 0 -1px 9px,  #FFF 0 2px 0;}
    to { background-color: #24E0FF; }
}
@-ms-keyframes blinkBlue {
    from { background-color: #24E0FF; }
    50% { background-color: #1290FF; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #1250FF 0 -1px 9px,  #FFF 0 2px 0;}
    to { background-color: #24E0FF; }
}
@-o-keyframes blinkBlue {
    from { background-color: #24E0FF; }
    50% { background-color: #1290FF; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #1250FF 0 -1px 9px,  #FFF 0 2px 0;}
    to { background-color: #24E0FF; }
}
@keyframes blinkBlue {
    from { background-color: #24E0FF; }
    50% { background-color: #1290FF; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #1250FF 0 -1px 9px,  #24E0FF 0 2px 0;}
    to { background-color: #24E0FF; }
}

@-webkit-keyframes blinkBlueText {
    from { background-color: #24E0FF; }
    50% { background-color: #1290FF; text-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #1250FF 0 -1px 9px, #FFF 0 2px 0; }
    to { background-color: #24E0FF; }
}
@-moz-keyframes blinkBlueText {
    from { background-color: #FF0; }
    50% { background-color: #AA0; text-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #FFF 0 2px 0; }
    to { background-color: #FF0; }
}
@-ms-keyframes blinkBlueText {
    from { background-color: #FF0; }
    50% { background-color: #AA0; text-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #FFF 0 2px 0; }
    to { background-color: #FF0; }
}
@-o-keyframes blinkBlueText {
    from { background-color: #FF0; }
    50% { background-color: #AA0; text-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #FFF 0 2px 0; }
    to { background-color: #FF0; }
}
@keyframes blinkBlueText {
    from { color: #1290FF; }
    to { color: #24E0FF; text-shadow: 1px 1px 2px #24E0FF, 0 0 25px #1250FF, 0 0 5px #1250FF; }
/*    to { color: #24E0FF; }*/
}

/***********************************text-shadow: 0 0 3px #1290FF;*********************************/

.main-title {
    margin-bottom: 10px;
}

.class-box {
/*    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;*/
    line-height: 20px;
    background-color: lightgray;/*#24E0FF */
    border-radius: 5px;
    border: black 1px solid;
    margin-bottom: 10px;
    padding: 5px 0px 5px 0px;
}