* {
    box-sizing: border-box;
    
}
html {
    font-family: "Lucida Sans", sans-serif;
}
.wrapper {
  min-height: 100%;

  /* Equal to height of footer */
  /* But also accounting for potential margin-bottom of last child */
  margin-bottom: -30px;
}
.push {
  	height: 30px;
    width: 100%;

}
.fb-like {
	float: right;
}
.row {
    content: "";
    clear: both;
    display: block;
    height: 60%;
}
[class*="col-"] {
    float: left;
    padding: 10px;
}
.col-1 {width: 12%;}
.col-2 {width: 10%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 78%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

.centerfifth {
	width: 20%;
	margin-left: 40%;
	}
#drawing {
  top: 0;
  left: 0;
  position: absolute;
  height:100%;
  }
#drawing2 {
  float: left;	
  height:50%;
  }
.relform1 {
  top: 0;
  position: absolute;	
  text-align: center;
  width:350px;
  margin-left:calc(50% - 220px);*/
}
.relform2 {
  top: 0;
  float: left;	
  text-align: center;
  width:400px;
}
.relform3 {
  top: 0;
  float: left;	
  text-align: center;
  width:500px;
  margin-left:calc(50% - 250px);*/
}
.relform1 label 
{
  float: left;
  width: 180px;
  font-weight: bold;
  color: #000000;
  
}
.relform2 label 
{
  float: left;
  width: 180px;
  font-weight: bold;
  color: #000000;
  
}
.relform3 label 
{
  float: left;
  width: 200px;
  font-weight: bold;
  color: #000000;
}
.womanleft {
	position: relative;
	left: 25px;
}
.manright {
	position: relative;
	left: 64px;
}

.submenu {
    margin-top: -20px !important;
    margin-left: 10% !important; 
    vertical-align: middle;
    position: absolute;
	float:right;
}

.button 
{
  font-size: 2em;
}
 
.left 
{
  margin-left: 250px;
}
.text {
  width: 100%;
  clear:both; 
}
.text p {
  color: #ffff80;
  font-weight: bold;
  font-size: large;
	
}
.txtFormLegend 
{
  color: #ff80ff;
  font-weight: bold;
  font-size: large;
}

.txtSmall 
{
  color: #80ffff;
  font-size: smaller;
}

.hidden 
{
  display: none;
}

.error 
{
  display: block;
  margin-left: 150px;
  color: #ff0000;
}

label 
{
  float: left;
  width: 150px;
  font-weight: bold;
  color: #000000;
  
}

input, select 
{
  margin-bottom: 3px;
}

.imageleft {
	float:left;
	width:50px;
	margin-right:8px;
}

.iconleft {
	float:left;
	width:100px;
	margin-top:-30px;
	margin-right:10px;
}

.circle-container {
    position: relative;
    width: 40em;
    height: 40em;
    padding: 4.2em;
    /*2.8em = 2em*1.4 (2em = half the width of a link with img, 1.4 = sqrt(2))*/
    border: dashed 1px;
    border-radius: 50%;
    margin: 3em auto 0;
}
.circle-container a, .flipicon {
    display: block;
    position: absolute;
    top: 50%; left: 50%;
    width: 6em; height: 6em;
    margin: -3em;
}
.circle-container a {
    text-align: center;
    vertical-align: middle;
 	color: #ffff80;
  	font-weight: bold;
 }
.circle-container img { display: block; width: 100%; }
/* .center is no transform */

.clockcenter1 { transform: translate(-4em); }
.clockcenter2 { transform: translate(4em); }
.clock1 { transform: rotate(300deg) translate(20em) rotate(-300deg); }
.clock2 { transform: rotate(330deg) translate(20em) rotate(-330deg); }
.clock3 { transform: translate(20em); } /* 20em = half the width of the wrapper */
.clock4 { transform: rotate(30deg) translate(20em) rotate(-30deg); }
.clock5 { transform: rotate(60deg) translate(20em) rotate(-60deg); }
.clock6 { transform: rotate(90deg) translate(20em) rotate(-90deg); }
.clock7 { transform: rotate(120deg) translate(20em) rotate(-120deg); }
.clock8 { transform: rotate(150deg) translate(20em) rotate(-150deg); }
.clock9 { transform: translate(-20em); }
.clock10 { transform: rotate(210deg) translate(20em) rotate(-210deg); }
.clock11 { transform: rotate(240deg) translate(20em) rotate(-240deg); }
.clock12 { transform: rotate(270deg) translate(20em) rotate(-270deg); }

[class*="text"] {
  	color: #ffff80;
 	font-weight: bold;
	font-size: 1em; 
}.textcenter1 { transform: translate(-4em, -3em); }
.textcenter2 { transform: translate(4em, 6em); }
.text1 { transform: rotate(300deg) translate(20em) rotate(-300deg) translate(8em, 2em); }
.text2 { transform: rotate(330deg) translate(20em) rotate(-330deg) translate(8em, 2em); }
.text3 { transform: translate(28em, 2em); } /* 20em = half the width of the wrapper */
.text4 { transform: rotate(30deg) translate(20em) rotate(-30deg) translate(8em, 2em); }
.text5 { transform: rotate(60deg) translate(20em) rotate(-60deg) translate(8em, 2em); }
.text6 { transform: rotate(90deg) translate(20em) rotate(-90deg) translate(0em, -3em); }
.text7 { transform: rotate(120deg) translate(20em) rotate(-120deg) translate(-6em, 2em); }
.text8 { transform: rotate(150deg) translate(20em) rotate(-150deg) translate(-6em, 2em); }
.text9 { transform: translate(-26em, 2em); }
.text10 { transform: rotate(210deg) translate(20em) rotate(-210deg) translate(-7em, 2em); }
.text11 { transform: rotate(240deg) translate(20em) rotate(-240deg) translate(-6em, 2em); }
.text12 { transform: rotate(270deg) translate(20em) rotate(-270deg) translate(0em, 6em); }

div.boxed {
	background:#e1e3eb; 
	border-radius: 15px 15px 15px 15px;    
	border: 1px solid rgb(0, 0, 153);
	margin:0; 
	margin-bottom:10px;
	padding:1em; 
}
div.boxed p {color: #393a3c; padding: 0 1em 0 .3em; }