@charset "UTF-8";
/* CSS Document */

@media print, screen and (min-width: 769px) {
#topImage {
background-image: url("images/topImage.jpg");
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 200px;
padding-top: 150px;
}
#flow p.top {
text-align: left;
margin-bottom: 40px;
}
#flow .step {
margin-bottom: 100px;
}
#flow .box {
padding-top: 20px;
margin-bottom: 20px;
position: relative;
}
#flow .box span {
display: block;
position: absolute;
top: 0;
left: 0;
padding-right: 30px;
padding-bottom: 0px;
font-size: 72px;
color: #1050A7;
font-style: italic;
background-color: #fff;
}
#flow .box dl {
overflow: hidden;
margin: 0;
}
#flow .box dt {
font-size: 24px;
color: #1050A7;
padding-bottom: 5px;
margin-bottom: 10px;
padding-left: 100px;
border-bottom: solid 1px #4075A4;
text-align: left;
}
#flow .box dd {
padding-top: 20px;
padding-left: 20px;
}
#flow .box dd p {
width: 60%;
text-align: left;
float: left;
}
#flow .box dd img {
float: right;
width: 35%;
}

}

@media screen and (min-width: 521px) and (max-width: 768px) {

#topImage {
background-image: url("images/topImage.jpg");
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 120px;
padding-top: 100px;
padding-left: 16px;
padding-right: 16px;
}
#flow p.top {
text-align: left;
margin-bottom: 40px;
}
#flow .step {
margin-bottom: 100px;
}
#flow .box {
padding-top: 20px;
margin-bottom: 50px;
position: relative;
}
#flow .box span {
display: block;
position: absolute;
top: 0;
left: 0;
padding-right: 30px;
padding-bottom: 0px;
font-size: 72px;
color: #1050A7;
font-style: italic;
background-color: #fff;
}
#flow .box dl {
overflow: hidden;
margin: 0;
}
#flow .box dt {
font-size: 24px;
color: #1050A7;
padding-bottom: 5px;
margin-bottom: 10px;
padding-left: 100px;
border-bottom: solid 1px #4075A4;
text-align: left;
}
#flow .box dd {
padding-top: 20px;
padding-left: 20px;
}
#flow .box dd p {
width: 60%;
text-align: left;
float: left;
}
#flow .box dd img {
float: right;
width: 35%;
}

}

@media screen and (max-width: 520px) {

#topImage {
background-image: url("images/topImage.jpg");
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100px;
padding-top: 70px;
}
#flow p.top {
text-align: left;
margin-bottom: 40px;
}
#flow .step {
margin-bottom: 100px;
}
#flow .box {
padding-top: 20px;
margin-bottom: 50px;
position: relative;
}
#flow .box span {
display: block;
position: absolute;
top: 10;
left: 0;
padding-right: 20px;
padding-bottom: 0px;
font-size: 52px;
color: #1050A7;
font-style: italic;
background-color: #fff;
}
#flow .box dl {
overflow: hidden;
margin: 0;
}
#flow .box dt {
font-size: 24px;
color: #1050A7;
padding-bottom: 5px;
margin-bottom: 10px;
padding-left: 80px;
border-bottom: solid 1px #4075A4;
text-align: left;
}
#flow .box dd {
padding-top: 20px;
padding-left: 0px;
}
#flow .box dd p {
width: 100%;
text-align: left;
}
#flow .box dd img {
width: 100%;
}

}