* {
    box-sizing: border-box;
}

*{margin:0;padding:0;}

html {
    font-family:Trebuchet MS, Arial, sans-serif;
	color:#555555;
}

body {
   background:#ffffff;
   text-align:center;
   }
.row:after {
    content: "";
    clear: both;
    display: block;
}
a{
text-decoration:none;
}

img {
max-width: 100%;
height: auto;
border:none;
}

h1{
padding:1% 0;
color:#d11f49;
}
.header{
border-top:10px solid #008cba;
}

.logo{
margin:5px;
}
.con1{
color:#ffffff;
font-size:120%;
line-height:1.8em;
background:#008cba;
padding:2% 0;
}

.con3 div{
max-width:680px;
margin:0 auto;
}
ul{
text-align:left;
}

ul li{
list-style-type:none;
}

a.demo{
font-weight:bold;
color:#ffffff;
padding:10px 20px;
margin:4% 0;
background-color:#5bb50b;
}
.con2 img{
padding:1% 0;

}

.con3{
background:#cd5159;
padding:2% 0;
color:#ffffff;
}

.con4{
margin-top:3%;
background:#cccddd;
}


.con4 div{
max-width:680px;
margin:0 auto;
}
 h3{
padding:10px 0;
}
.con4 p{
font-size:80%;
}

.msg{
color:#cd5159;
}
label{
float:left;
font-weight:bold;
margin-left:2px;
}

input{
float:left;
width:100%;
border:none;
padding:10px 2px;
border:1px solid #cccccc;
}

.sub{
color:#ffffff;
margin:10px 0;
font-weight:bold;
font-size:110%;
background:#008cba;
cursor:point;
cursor:hand;
}


textarea{
float:left;
width:100%;
padding:10px 2px;
border:1px solid #cccccc;
}


@media screen and (max-height: 680px) {
.logo{
max-width:50%;
height:auto;
}
.con2 img{
max-width:80%;
height:auto;
}
h1{
font-size:95%}

.con3{
font-size:80%;
line-height:1.5em;
}
.con3 div{
width:90%;
}

.con4 div{
width:90%;
}


}