@media(min-width: 1111px){
html {
  background-color: #15638d;
}

body {
  position: relative;
  margin: 0 auto;
  background-color: #15638d;
}
	
.main {
  position: relative;
  left: 10%;
  width: 80%;
  max-width: 1200px;
  background-color: #f1f2f2;
}

.header {
  position: relative;
  text-align: center;
  color: white;
  background-color: #0097c4;
}

.headerimage {
  position: relative;
  background-image: url("header.jpg");
  background-color: #0097c4; /* Used if the image is unavailable */
  height: 180px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover;
  text-align: center;
}

.headertext {
  position: relative; 
  text-align: center;
  color: white;
  background-color: #0097c4;
  overflow: auto;
  clear: both; 
  min-height: 0vh;
  height: auto;
  font-family: Arial;
  font-size: x-large;
  font-weight: bold;
}

.H1 {
  position: relative;
  left: 13%;
  width: 75%;
  color:  #15638d;
  font-family: Arial;
  font-size: large;
  font-weight: bold;
  background-color: #f1f2f2;
}

.H2 {
  position: relative;
  left: 13%;
  width: 75%;
  color:  black;
  font-family: Arial;
  font-size: normal;
}

.H3 {
  position: relative;
  left: 10%;
  width: 80%;
  color:  black;
  font-family: Arial;
  font-size: normal;
}

.widgetdiv {
  position: relative;
  left: 10%;
  width: 80%;
  background-color: white;
}

.widget {
  position: relative;
  left: 2%;
  width: 96%;
}

/* Bottom left text */
.bottom-left {
  position: absolute;
  bottom: 5px;
  left: -20px;
  width: 30%;
}

/* Top left text */
.top-left {
  position: absolute;
  top: 8px;
  left: 1px;
}

/* Top right text */
.top-right {
  position: absolute;
  top: -8%;
  right: -12%;
  color: white;
  font-size: small;
  font-weight: normal;
}

/* Bottom right text */
.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

/* Centered text */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: Arial;
  font-size: x-large;
  font-weight: bold;
}

/* Centered bottom text */
.centeredbottom {
  position: absolute;
  top: 90%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%); 
  font-family: Arial;
  font-size: x-large;
  font-weight: bold;
}

#openSchedulingFrame.keepshown {
	max-width: 700px;
	left: 10%;
	width: 80%;
	height: 500px;
}

ul {
	display: table;
	margin: 0 auto;
}

body.embeded .stepContainer {
	height: 500px;
}
.img {
  background-image: url(header.png);
}
}

@media(min-width: 600px) and (max-width: 1111px) {
html {
  background-color: #15638d;
}

body {
  position: relative;
  margin: 0 auto;
  background-color: #15638d;
}
	
.main {
  position: relative;
  left: 10%;
  width: 80%;
  max-width: 1200px;
  background-color: #f1f2f2;
}

.header {
  position: relative;
  text-align: center;
  color: white;
  background-color: #0097c4;
}

.headerimage {
  position: relative;
  background-image: url("header_medium.jpg");
  background-color: #0097c4; /* Used if the image is unavailable */
  height: 180px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover;
  text-align: center;
}

.headertext {
  position: relative; 
  text-align: center;
  color: white;
  background-color: #0097c4;
  overflow: auto;
  clear: both; 
  min-height: 0vh;
  height: auto;
  font-family: Arial;
  font-size: x-large;
  font-weight: bold;
}

.H1 {
  position: relative;
  left: 13%;
  width: 75%;
  color:  #15638d;
  font-family: Arial;
  font-size: large;
  font-weight: bold;
  background-color: #f1f2f2;
}

.H2 {
  position: relative;
  left: 13%;
  width: 75%;
  color:  black;
  font-family: Arial;
  font-size: normal;
}

.H3 {
  position: relative;
  left: 10%;
  width: 80%;
  color:  black;
  font-family: Arial;
  font-size: normal;
}

.widgetdiv {
  position: relative;
  left: 10%;
  width: 80%;
  background-color: white;
}

.widget {
  position: relative;
  left: 2%;
  width: 96%;
}

/* Bottom left text */
.bottom-left {
  position: absolute;
  bottom: 5px;
  left: -20px;
  width: 30%;
}

/* Top left text */
.top-left {
  position: absolute;
  top: 8px;
  left: 1px;
}

/* Top right text */
.top-right {
  position: absolute;
  top: -8%;
  right: -12%;
  color: white;
  font-size: small;
  font-weight: normal;
}

/* Bottom right text */
.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

/* Centered text */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: Arial;
  font-size: x-large;
  font-weight: bold;
}

/* Centered bottom text */
.centeredbottom {
  position: absolute;
  top: 90%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%); 
  font-family: Arial;
  font-size: x-large;
  font-weight: bold;
}

#openSchedulingFrame.keepshown {
	max-width: 700px;
	left: 10%;
	width: 80%;
	height: 500px;
}

ul {
	display: table;
	margin: 0 auto;
}

body.embeded .stepContainer {
	height: 500px;
}
.img {
  background-image: url(header.png);
}
}

@media(min-width: 0px) and (max-width: 600px ){
	html {
  background-color: #15638d;
}

body {
  position: relative;
  margin: 0 auto;
  background-color: #15638d;
}
	
.main {
  position: relative;
  left 10%
  width: 80%;
  min-width: 400px;
  background-color: #f1f2f2;
}

.header {
  position: relative;
  text-align: center;
  color: white;
  background-color: #0097c4;
}

.headerimage {
  position: relative;
  background-image: url("header_small.jpg");
  background-color: #0097c4; /* Used if the image is unavailable */
  height: 80px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover;
  text-align: center;
}

.headertext {
  position: relative; 
  text-align: center;
  color: white;
  background-color: #0097c4;
  overflow: auto;
  clear: both; 
  min-height: 0vh;
  height: auto;
  font-family: Arial;
  font-size: x-large;
  font-weight: bold;
}

.H1 {
  position: relative;
  left: 13%;
  width: 75%;
  color:  #15638d;
  font-family: Arial;
  font-size: large;
  font-weight: bold;
  background-color: #f1f2f2;
}

.H2 {
  position: relative;
  left: 13%;
  width: 75%;
  color:  black;
  font-family: Arial;
  font-size: normal;
}

.H3 {
  position: relative;
  left: 10%;
  width: 80%;
  color:  black;
  font-family: Arial;
  font-size: normal;
}

.widgetdiv {
  position: relative;
  left: 10%;
  width: 80%;
  background-color: white;
}

.widget {
  position: relative;
  left: 2%;
  width: 96%;
}

/* Bottom left text */
.bottom-left {
  position: absolute;
  bottom: 5px;
  left: -10px;
  width: 200px;
}

/* Top left text */
.top-left {
  position: absolute;
  top: 8px;
  left: 1px;
}

/* Top right text */
.top-right {
  position: absolute;
  top: -8%;
  right: -12%;
  color: white;
  font-size: small;
  font-weight: normal;
}

/* Bottom right text */
.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

/* Centered text */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: Arial;
  font-size: x-large;
  font-weight: bold;
}

/* Centered bottom text */
.centeredbottom {
  position: absolute;
  top: 90%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%); 
  font-family: Arial;
  font-size: x-large;
  font-weight: bold;
}

#openSchedulingFrame.keepshown {
	max-width:700px;
	left: 0%;
	width: 100%;
	height: 500px;
}

ul {
	display: table;
	margin: 0 auto;
}

body.embeded .stepContainer {
	height: 500px;
}

}