@charset "utf-8";

h1, .h1 {

	font-size: 1.8rem;

	line-height:2.8rem;

	font-weight: bold;

	display: inline;

	color: #000000;

	text-transform: uppercase;

	background-color: #4eb2b7;

	padding: 4px;

	padding-top: 2px;

	padding-bottom: 2px;

}

h2 {

	font-size: 1.2rem;

	font-weight: bold;

	color: #4eb2b7;

	display: inline;

	line-height: normal;

}

h3 {

	font-size: 1.2rem;

	font-weight: bold;

	display: inline;

}

h4 {

	font-size: 1.0rem;

	font-weight: bold;

	color: #4eb2b7;

	display: inline;

}

h5 {

	font-size: 1.0rem;

	font-weight: bold;

	color: #dcdee2;

	display: inline;

}

h6 {

	font-size: 1.0rem;

	font-weight: bold;

	color: #ff2300;

	display: inline;

}

.s1 {

	font-weight: bold;

}

.s2 {

	font-weight: bold;

	color: #4eb2b7;

}

.s3 {

	font-weight: bold;

	color: #ff2300;

}

.s4 {

	color: #4eb2b7;

}

.s5 {

	color: #ff2300;

}

.s6 {

	font-style: italic;

}

.s7 {

	display: block;

	width: 100%;

	text-align: center;

}



.claim {

	font-size: 2rem;

	font-weight: bold;

	color: #000000;

	background-color: #ffffff;

	line-height: 3rem;

	text-transform: uppercase;

	padding-left: 8px;

	padding-right: 8px;

}

@media (max-width: 1100px) {.claim {font-size: 1.5rem;line-height: 2.5rem;}}

/* @media (max-width: 850px) {.claim {font-size: 1.3rem;line-height: 2.2rem;}}

@media (max-width: 767px) {.claim {font-size: 1.3rem;line-height: 2.1rem;}} */



ul {

    padding: 0px;

    margin: 0px;

	margin-left: 1.3rem;

	padding-left: 1.3rem;

    list-style-type: square;

	}



table {

	width: 100%;

	padding: 0px;

	margin: 0px;

	border-spacing: 0px;

	border-collapse: collapse;

}

td {

	margin: 0px;

	padding: 0.2%;

	padding-right: 0.5%;

	padding-left: 0px;

	vertical-align: top;

	border-bottom: 1px solid #dcdee2;

}

th {

	margin: 0px;

	padding: 0px;

	padding-right: 0.5%;

	padding-bottom: 0.5%;

	padding-top: 0.5%;

	font-weight: bold;

	vertical-align: top;

	border-bottom: 1px solid #4eb2b7;

}

input {

	margin: 0px;

	padding: 0px;

	overflow: visible;

    width: auto;

}

form {

	margin: 0px;

	padding: 0px;

}



.tags {

	color: #CCCCCC;

	font-size: 0.8rem;

	display: none;

	}



.anker {

	font-size: 0.1rem;

	height: 1px;

	overflow: hidden;

	float: left;

	}



a {

	color: #9ac8dc;

	text-decoration: none;

	border: none;

    }

a:link {

	color: #9ac8dc;

    }

a:active {

	color: #9ac8dc;

    }

a:visited {

/*	color: #9B489B; */

	color: #9ac8dc;

    }

a:hover {

	color: #4eb2b7;

	text-decoration: none;

    }

a:focus {

	color: #4eb2b7;

    }

	

.box input {

	margin: 0px;

    }



ul.menu {

float: left;

text-align: left;

background-color: transparent;

padding: 0px;

margin: 0px;

list-style-type: none;

width: 100%;

}



.li_nav {

	float: left;

    text-align: left;

	font-size: 1.2rem;

	font-weight: bold;

	margin-right: 4%;

    text-indent: 0;

    }

@media (max-width: 950px) {.li_nav {margin-right: 3%;font-size: 1.0rem;}}

@media (max-width: 850px) {.li_nav {margin-right: 2%;}}





.nav, a.nav:link, a.nav:active, a.nav:visited, a.nav:hover, a.nav:focus {

	color: #ffffff; 

	text-decoration: none;

	display: block;

	padding-bottom: 4px;

	border-bottom: 4px solid transparent;

    }

a.nav:hover, a.nav:focus {

	border-bottom: 4px solid #4eb2b7;

	color: #4eb2b7;

    }



.subnav, a.subnav:link, a.subnav:active, a.subnav:visited, a.subnav:hover, a.subnav:focus {

	color: #ffffff;

	text-decoration: none;

	font-size: 1.1rem;

	line-height: 1.5rem;

    }

a.subnav:hover, a.subnav:focus, .subnavactive, a.subnavactive:link, a.subnavactive:active, a.subnavactive:visited, a.subnavactive:hover, a.subnavactive:focus {

	color: #4eb2b7;

	text-decoration: none;

	font-size: 1.1rem;

	line-height: 1.5rem;

    }

.subnav:before, .subnavactive:before {

	content: ">> ";

    }



.toolnav, a.toolnav:link, a.toolnav:active, a.toolnav:visited, a.toolnav:hover, a.toolnav:focus {

	color: #0e57e7;

	text-decoration: none;

	display: block;

	padding-left: 0.5%;

	border-left: 2% solid #0e57e7;

	margin-top: 0.5%;

	margin-bottom: 0.5%;

    }

a.toolnav:hover, a.toolnav:focus {

	color: #f8260e;

	text-decoration: none;

	display: block;

	padding-left: 0.5%;

	border-left: 2% solid #f8260e;

    }



.footernav, a.footernav:link, a.footernav:active, a.footernav:visited, a.footernav:hover, a.footernav:focus {

	color: #000000;

	text-decoration: none;

    }



a.footernav:hover, a.footernav:focus {

	color: #ffffff;

	text-decoration: none;

    }



.pagenav, a.pagenav:link, a.pagenav:active, a.pagenav:visited, a.pagenav:hover, a.pagenav:focus {

	color: #5b5b5d;

	text-decoration: none;

    }



a.pagenav:hover, a.pagenav:focus {

	color: #cebf1a;

    }





ul.contentmenu {

padding: 0px;

margin: 0px;

list-style-type: none;

}

.li_toc {

	color: #cebf1a;

	line-height: 1.3rem;

    }



a.toc:link, a.toc:active, a.toc:visited, a.toc:hover, a.toc:focus {

	color: #cebf1a;

	text-decoration: none;

    }

a.toc:hover, a.toc:focus {

	color: #5b5b5d;

	text-decoration: none;

    }



.noborder, .noprintnoborder {

    border: none;

	}

img.noborder, img.noprintnoborder {

    border: none;

	width: 100%;

	}



.status {

	color: #f8260e;

}



.spacer {

	display: block;

	height: 0.7%;

}



.button, .button2 {

	font-family: 'Ruda', sans-serif;

	color: #FFFFFF;

	font-size: 1rem;

	font-weight: bold;

    border: none;

	line-height: normal;

	padding-left: 1%;

	padding-right: 1%;

	padding-top: 0.6%;

	padding-bottom: 0.6%;

	margin: 0px;

	background-color: #f8260e;

}

A.button:link {background: #f8260e; color: #FFFFFF; text-decoration: none; line-height: 1.5rem;}

A.button:active {background: #f8260e;  color: #FFFFFF; text-decoration: none; line-height: 1.5rem;}

A.button:visited {background: #f8260e; color: #FFFFFF; text-decoration: none; line-height: 1.5rem;}

A.button:hover {background: #FFFFFF; color: #f8260e; text-decoration: none; line-height: 1.5rem;}

A.button:focus {background: #FFFFFF; color: #f8260e; text-decoration: none; line-height: 1.5rem;}



.button2 {

	padding-left: 10px;

	padding-right: 10px;

	padding-top: 6px;

	padding-bottom: 6px;

	background-color: #4eb2b7;

}

A.button2:link {background: #4eb2b7; color: #FFFFFF; text-decoration: none; line-height: 1.5rem;}

A.button2:active {background: #4eb2b7;  color: #FFFFFF; text-decoration: none; line-height: 1.5rem;}

A.button2:visited {background: #4eb2b7; color: #FFFFFF; text-decoration: none; line-height: 1.5rem;}

A.button2:hover {background: #FFFFFF; color: #4eb2b7; text-decoration: none; line-height: 1.5rem;}

A.button2:focus {background: #FFFFFF; color: #4eb2b7; text-decoration: none; line-height: 1.5rem;}



.beschriftung {

	float: left;

	width: 25%;

	padding-top: 0.3%;

	font-weight: bold;

	}

.feld {

	float: left;

	width: 75%;

	padding-top: 0.3%;

	}

	

.beschriftung2 {

	float: left;

	width: 31%;

	padding-top: 0.5%;

	}

.feld2 {

	float: left;

	width: 69%;

	padding-top: 0.5%;

	}

	

.feldname, .feldname2 {

    float: left;

	clear: both;

    width: 22%; 

	padding: 0px;

	padding-bottom: 0.3%;

	padding-top: 0.3%;

	border: none;

	}

.feldname2 {

	width: 32%; 

	}

	

.daten, .daten2 {

    float: left;

	width: 77%; 

	padding: 0px;

	padding-bottom: 0.3%;

	padding-top: 0.3%;

	border: none;

	}

.daten2 {

	width: 67%; 

	}

	

.textfeld {

	font-family: 'Ruda', sans-serif;

	font-size: 1rem;

	color: #494641;

	background-color: #ffffff;

	border: 1px solid #e2e4e6;

	width: 97%;

	padding: 1%;

	margin-top: 1%;

	margin-bottom: 1%;

	max-width: 700px;

}



.textfeldreadonly {

	font-family: 'Ruda', sans-serif;

	font-size: 1rem;

	color: #494641;

	background-color: #f1f2f5;

	border: 1px solid #e2e4e6;

	width: 97%;

	padding: 1%;

	margin-top: 1%;

	margin-bottom: 1%;

	max-width: 700px;

}



.textfeld2 {

	font-family: 'Ruda', sans-serif;

	font-size: 1rem;

	color: #494641;

	background-color: #ffffff;

	border: 1px solid #e2e4e6;

	width: 25%;

	padding: 1%;

	margin-top: 1%;

	margin-bottom: 1%;

	max-width: 200px;

}



.textfeld3 {

	font-family: 'Ruda', sans-serif;

	font-size: 1rem;

	color: #494641;

	background-color: #ffffff;

	border: 1px solid #e2e4e6;

	width: 60%;

	padding: 1%;

	margin-top: 1%;

	margin-bottom: 1%;

	max-width: 500px;

	}

.textfeld4, .rbl {

	font-family: 'Ruda', sans-serif;

	font-size: 1rem;

	color: #494641;

	background-color: #ffffff;

	border: 1px solid #e2e4e6;

	width: 40%;

	padding: 1%;

	margin-top: 1%;

	margin-bottom: 1%;

	max-width: 400px;

}

@media (max-width: 950px) {.textfeld4 {width: 50%;}}

.rbl {

	color: #ffffff;

	background-color: transparent;

	border: none;

	width: auto;

	padding: 0;

	margin-top: 1%;

	margin-bottom: 0;

	max-width: auto;

	display: inline-block;

}

.status > .rbl {

	color: #f8260e;

}



.searchtextfeld {

	font-family: 'Ruda', sans-serif;

	font-size: 0.8rem;

	color: #494641;

	background-color: #ffffff;

	border: 1px solid #e2e4e6;

	width: 50%;

	padding: 0.3%;

	max-width: 170px;

	}



.textfeldcaptcha {

	font-family: 'Ruda', sans-serif;

	font-size: 1rem;

	color: #494641;

	background-color: #ffffff;

	border: 1px solid #e2e4e6;

	width: 40%;

	padding: 1%;

	margin-top: 1%;

	margin-bottom: 1%;

	max-width: 400px;

}



.ddl, .ddl2 {

	font-family: 'Ruda', sans-serif;

	font-size: 0.9rem;

	color: #494641;

	background-color: #FFFFFF;

	border: 1px solid #e2e4e6;

	padding: 0.3%;

}



.ddl3 {

	font-family: 'Ruda', sans-serif;

	font-size: 0.9rem;

	color: #494641;

	background-color: #FFFFFF;

	border: 1px solid #e2e4e6;

	padding: 1%;

	margin-top: 1%;

	margin-bottom: 1%;

}



.source {

	font-size: 0.8rem;

}







/* M O D UL E S */



.bildtext {

	font-family: 'Ruda', sans-serif;

	font-size: 0.8rem;

	font-weight: normal;

	padding: 0px;

	padding-top: 2%;

	padding-bottom: 4%;

}



.statetop {

	color: #f8260e;

	padding-bottom: 0.5%;

	padding-top: 1%;

	border-bottom: 1px solid #f8260e;

	margin-bottom: 4%;

    }



.boxcontainer {

	float: left;

	background-color: transparent;

	padding: 0px;

	width: 100%;

    }



.padborder {

	border-bottom: 1px solid #5b5b5d;

	margin-bottom: 1%;

	padding-bottom: 2%;

    }



.padbot10 {

	padding-bottom: 1%;

    }



.picbox2 {

	float: right;

	width: 100%;

	background-color: transparent;

	text-align: left;

	margin-left: 2%;

	margin-bottom: 2%;

	}

.picbox, .htmlbox {

	float: right;

	width: 30%;

	background-color: transparent;

	text-align: left;

	margin-left: 3%;

	margin-bottom: 3%;

	}

.picboxmobile {

	display: none;

	}



.leftbox1 {

	float: left;

	width: 50%;

	background-color: transparent;

	text-align: left;

	margin-right: 10%;

	}

.rightbox1 {

	float: left;

	width: 40%;

	background-color: transparent;

	text-align: left;

	display: block;

	}



.leftbox2 {

	float: left;

	width: 18%;

	background-color: transparent;

	text-align: left;

	margin-right: 10%;

	}

.rightbox2 {

	float: left;

	width: 72%;

	background-color: transparent;

	text-align: left;

	}



.leftbox3 {

	float: left;

	width: 30%;

	background-color: transparent;

	text-align: left;

	margin-right: 5%;

	}

@media (max-width: 850px) {.leftbox3 {width: 35%;margin-right: 2%;}}

.rightbox3 {

	float: left;

	width: 65%;

	background-color: transparent;

	text-align: left;

	}

@media (max-width: 850px) {.rightbox3 {width: 63%;}}





.pagingcontainer {

	float: left;

	padding: 0px;

	width: 100%;

	margin-top: 1%;

	padding-top: 1%;

    border-top: 1px solid #5b5b5d;

    }

.pagingleft, .pagingmiddle, .pagingright {

	float: left;

	width: 40%;

	background-color: transparent;

	float: left;

	}

.pagingmiddle {

	width: 20%;

	text-align: center;

	}

.pagingright {

	text-align: right;

	}



.statuscontainer {

	float: left;

	background-color: #FFFFFF;

	width: 100%;

	padding: 1%;

	margin-top: 10px;

	margin-bottom: 10px;

	voice-family: "\"}\""; 

	voice-family:inherit;

	width: 98%;

	}



.statuscontainer2, .statuscontainer3 {

	float: left;

	background-color: #4eb2b7;

	width: 100%;

	padding: 2%;

	margin-top: 10px;

	margin-bottom: 10px;

	voice-family: "\"}\""; 

	voice-family:inherit;

	width: 96%;

	}

.statuscontainer3 {

	background-color: #f8260e;

	}



.statuscontainer2 a, .statuscontainer3 a {

	color: #ffffff;

	text-decoration: underline;

	}



.listbox, .listbox2 {

	float: left;

	width: 100%;

	border-bottom: 1px solid #494641;

	padding-top: 0.5%;

	padding-bottom: 0.5%;

	}

.listbox2 {

	padding-top: 1%;

	padding-bottom: 1%;

	}

.lw1 {

	float: left;

	width: 38%;

	}

@media (max-width: 1180px) {.lw1 {width: 42%;}}

@media (max-width: 950px) {.lw1 {width: 49%;}}

.lw2 {

	float: left;

	width: 60%;

	margin-left: 2%;

	}

@media (max-width: 1180px) {.lw2 {width: 56%;}}

@media (max-width: 950px) {.lw2 {width: 49%;}}

.lw3 {

	float: left;

	width: 18%;

	padding-right: 2%;

	min-height: 150px;

	}

@media (max-width: 1150px) {.lw3 {width: 23%;}}

@media (max-width: 1050px) {.lw3 {width: 31%;}}

@media (max-width: 850px) {.lw3 {width: 48%;}}

.lw4 {

	float: left;

	width: 23%;

	padding-right: 2%;

	}

@media (max-width: 1050px) {.lw4 {width: 31%;}}

@media (max-width: 850px) {.lw4 {width: 48%;}}

.lw5 {

	float: left;

	width: 6%;

	padding-left: 0.2%;

	min-width: 25px;

	}

.padtop7 {

	padding-top: 0.7%;

	}

.margintop15 {

	margin-top: 1.5%;

	}

.lw6 {

	float: left;

	width: 90%;

	}

.box {

	float: left;

	width: 100%;

	padding-top: 0.5%;

	padding-bottom: 0.5%;

	}



.pagelogo {

   width: 25%;

   max-width:200px;

   max-height:120px;

}





.container {

	padding: 0px;

	margin: 0px;

	border: none;

	background-color: transparent;

	width: 100%;

	}



.galbox, .galbox2 {

	padding: 0px;

	margin-bottom: 15px;

	border: none;

	background-color: transparent;

	width: 230px;

	height: 255px;

	float: left;

    }

@media (max-width: 1070px) {.galbox {width: 225px;height: 245px;}}



.galbox2 {

	width: 225px;

	height: 270px;

    }

@media (max-width: 1000px) {.galbox2 {width: 200px;height: 215px;}}

@media (max-width: 900px) {.galbox2 {width: 170px;height: 185px;}}

	

.galpic {

	padding: 0px;

	margin-right: 10px;

	margin-bottom: 5px;

	border: none;

	background-color: transparent;

	}

@media (max-width: 1070px) {.galpic {margin-right: 5px;}}



a.gallink:link, a.gallink:active, a.gallink:visited, a.gallink:hover, a.gallink:focus, a.gallink2:link, a.gallink2:active, a.gallink2:visited, a.gallink2:hover, a.gallink2:focus {

	text-decoration: none;

	display: block;

	width: 220px;

	height: 220px;

    border: none;

	overflow: hidden;

	float: left;

    }

@media (max-width: 1070px) {a.gallink:link, a.gallink:active, a.gallink:visited, a.gallink:hover, a.gallink:focus {width: 220px;height: 220px;}}

a.gallink:hover, a.gallink:focus, a.gallink2:hover, a.gallink2:focus {

	text-decoration: none;

	display: block;

	width: 220px;

	height: 220px;

    border: none;

	overflow: hidden;

    background-color: white;

    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);

    opacity: 0.5;

	float: left;

    }

@media (max-width: 1070px) {a.gallink:hover, a.gallink:focus {width: 220px;height: 220px;}}



a.gallink2:link, a.gallink2:active, a.gallink2:visited, a.gallink2:hover, a.gallink2:focus {

	width: 215px;

	height: 215px;

    }

@media (max-width: 1000px) {a.gallink2:link, a.gallink2:active, a.gallink2:visited, a.gallink2:hover, a.gallink2:focus {width: 195px;height: 195px;}}

@media (max-width: 900px) {a.gallink2:link, a.gallink2:active, a.gallink2:visited, a.gallink2:hover, a.gallink2:focus {width: 165px;height: 165px;}}



.galnav, a.galnav:link, a.galnav:active, a.galnav:visited, a.galnav:hover, a.galnav:focus {

	color: #1d2d4e;

	text-decoration: none;

    }







.msg_head  {

float: left;

clear: both;

width: 98%;

padding-left: 2%;

padding-top: 10px;

padding-bottom: 10px;

margin-bottom: 10px;

cursor: pointer;

color: #4eb2b7;

background-color: #ffffff;

font-weight: bold;

font-size: 1.0em;

/*

background-image: url(../images/layout/pfeil.png);

background-position: 10px 12px;

background-repeat: no-repeat;

background-size: 2.2% auto;

*/

}



.msg_error {

color: #ffffff;

background-color: #ff2300;

}



.msg_head2 {

color: #ffffff;

background-color: #4eb2b7;

margin-top: 10px;

margin-bottom: 0px;

}



.msg_body {

float: left;

clear: both;

padding-top: 1%;

padding-bottom: 4%;

width:100%;

}



.msg_body2 {

	float: left;

	background-color: #4eb2b7;

	width: 100%;

	padding: 2%;

	voice-family: "\"}\""; 

	voice-family:inherit;

	width: 96%;

}



.msg_body2 strong {

color: #000000;

}







.startcontainer {

float: left;

width: 104%;

margin-left: -2%;

margin-right: -2%;

}



.startbox {

float: left;

width: 29.48%;

min-height: 39.42%;

margin-left: 1.925%;

margin-right: 1.925%;

margin-bottom: 4%;

}



.startbox2 {

float: left;

width: 46%;

min-height: 39.42%;

margin-left: 2%;

margin-right: 2%;

margin-bottom: 4%;

}



.startpic {

float: left;

width: 100%;

height: 100%;

background-image: url(../images/layout/trans.gif);

background-position: center center;

background-repeat: no-repeat;

background-size:contain;

}



.startpic2 {

float: left;

width: 25%;

height: 210px;

background-image: url(../images/layout/trans.gif);

background-position: center center;

background-repeat: no-repeat;

background-size:contain;

}

@media (max-width: 1000px) {.startpic2 {height: 230px;width: 30%;}}

@media (max-width: 767px) {.startpic2 {width: 100%;height: 100%;background-size:contain;}}



.starttexthead a {

float: left;

width: 100%;

height: 36px;

padding: 5%;

background-color: #cebf1a; 

color: #ffffff;

display: block;

text-decoration: none;

font-weight: bold;

voice-family: "\"}\""; 

voice-family:inherit;

width: 90%;

}

.starttexthead a {

float: left;

width: 100%;

height: 36px;

padding: 5%;

background-color: #cebf1a; 

color: #ffffff;

display: block;

text-decoration: none;

font-weight: bold;

voice-family: "\"}\""; 

voice-family:inherit;

width: 90%;

}

@media (max-width: 1100px) {.starttexthead a {height: 48px;}}

@media (max-width: 1000px) {.starttexthead a {height: 60px;}}

@media (max-width: 900px) {.starttexthead a {height: 72px;}}



.starttexthead a:hover {

text-decoration: underline;

}



a.startpiclink:link, a.startpiclink:active, a.startpiclink:visited, a.startpiclink:hover, a.startpiclink:focus {

	text-decoration: none;

	display: block;

	width: 100%;

	padding-top: 85%;

    border: none;

	overflow: hidden;

	float: left;

    }

a.startpiclink:hover, a.startpiclink:focus {

	text-decoration: none;

	display: block;

	width: 100%;

	padding-top: 85%;

    border: none;

	overflow: hidden;

    background-color: white;

    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);

    opacity: 0.5;

	float: left;

    }



a.startpiclink2:link, a.startpiclink2:active, a.startpiclink2:visited, a.startpiclink2:hover, a.startpiclink2:focus {

	text-decoration: none;

	display: block;

	width: 100%;

    min-height: 210px;

    border: none;

	overflow: hidden;

	float: left;

    }

a.startpiclink2:hover, a.startpiclink2:focus {

	text-decoration: none;

	display: block;

	width: 100%;

    min-height: 210px;

    border: none;

	overflow: hidden;

    background-color: white;

    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);

    opacity: 0.5;

	float: left;

    }

@media (max-width: 1000px) {a.startpiclink2:link, a.startpiclink2:active, a.startpiclink2:visited, a.startpiclink2:hover, a.startpiclink2:focus {min-height: 230px;}}









/* E N D   M O D UL E S */



.fbimg {

	max-width: 2%;

}



.mobileonlyblock, .mobileonlyinline, .picboxmobile, .galboxmobile, .tabletonlyblock, .tabletonlyinline, .tabletmobileonlyblock, .tabletmobileonlyinline {

	display: none;

}





/* ===  Toggle Switches ===  */

div.tog{border-radius:16px;display:block;box-shadow:inset 0 0 4px rgba(0,0,0,.6);margin:0 0;height:30px;width:51px;position:relative;cursor:pointer;font:12px/12px arial;background:#ccc; -webkit-transition: all .2s ease;-moz-transition: all .2s ease;-o-transition: all .2s ease;transition: all .2s ease;}

div.tog:after{content:'';box-shadow: 0px 2px 2px rgba(0,0,0,.6);border-radius:16px;display:block;height:23px;width:23px;background:#fff;position:absolute;top:3px;left:3px; -webkit-transition: all .2s ease;-moz-transition: all .2s ease;-o-transition: all .2s ease;transition: all .2s ease;}

div.tog:before{content:'';position:absolute;right:11px;top:12px;color:#fff;}

div.tog:hover:after{left:3px;}

div.tog.on:before{content:'';right:10px;}

div.tog.on{background:#0c0;}

div.tog.on:after{left:25px;}

div.tog.on:hover:after{left:25px;}

/* ===  Toggle Switches ===  */