html, body {
  height: 100%;
  margin:0;
/*background: #ffffff;*/
  background-color:#eeeef3;
  
}
body {
  display: flex;
  flex-direction: column;
  font-family:Arial, Verdana, serif;
  background-image: url("assets/map_v4.jpg");
  //background-position: bottom;
  background-position: bottom;
  /*background-size: auto;*/
  //background-size: 50% 50%;
  background-size: 400px 271px;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.header {
  width:100%;
  background-color:#eeeef3;
  background-image: url(assets/shade.jpg); 
  background-repeat: repeat-x;
  background-position: bottom;
}
.footer {
  background-color: #2a295c;
  padding:10px;
}
.content {
  /*background: #ffffff;*/
  flex-grow: 1;
  display: flex;
  justify-content: center;
//  margin-left: auto; 
//  margin-right: auto; 
}
.box {
  width:100%;
}
.title {
  padding-top:15px;
  padding-bottom:5px;
  font-size:30px;
  color:#2a295c;
  font-weight:normal;
}
.date {
  font-size:24px;
  color:#fa1a19;
  font-weight:normal;
}
.info {
  color:#2a295c;
  font-size:20px;
}
.infoBar{
  color:#ffffff;
  font-size:12px;
  font-weight:bold;
}
label {
  font-weight:bold;
//  width: 300px;
  display:inline-block
}
.reqd {
  color:#fa1a19;
}

input[type=text], select {
/*  width:92%;*/
  width: calc(98% - 110px);
  padding: 6px 10px;
  margin: 2px 0;
  display: inline-block;
  border: 1px solid #2a295c;
  border-radius: 4px;
  box-sizing: border-box;
  font-size:16px;
}

input[type=button] {
 width: 98.5%;
 background-color: #2a295c;
 color: #ffffff;
 padding: 14px 20px;
 margin: 8px 0;
 border: none;
 border-radius: 4px;
 cursor: pointer;
 -webkit-appearance: none;
 -webkit-transition-duration: 0s; /* Safari */
}

.smallLabel {
 width:110px;
}

input, select {
 outline:0;
 outline-color: #fa1a19;
}

select {
  color:#2a295c;
}
input, select:focus {
    background-color: #ffffff;
    color:#2a295c;
}

input[type=text]:focus {
    border: 1px solid #fa1a19;
//    -webkit-box-shadow: 0px 0px 5px rgba(42, 41, 92, 1);
//    -moz-box-shadow: 0px 0px 5px rgba(42, 41, 92, 1);
//    box-shadow: 0px 0px 5px rgba(42, 41, 92, 1);
}


input[type=select]:focus {
    border: 1px solid #fa1a19;
    color:#fa1a19;
//    -webkit-box-shadow: 0px 0px 5px rgba(42, 41, 92, 1);
//    -moz-box-shadow: 0px 0px 5px rgba(42, 41, 92, 1);
//    box-shadow: 0px 0px 5px rgba(42, 41, 92, 1);
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  font-size:15px;
  color:#aaaaaa;
}
::-moz-placeholder { /* Firefox 19+ */
  font-size:15px;
  color:#aaaaaa;
}
:-ms-input-placeholder { /* IE 10+ */
  font-size:15px;
  color:#aaaaaa;
}
:-moz-placeholder { /* Firefox 18- */
  font-size:15px;
  color:#aaaaaa;
}

input[type=button]:hover {
    background-color: #474674;
}

a.regPageLinks {color:#ef2327;}
a.regPageLinks:link { text-decoration:underline;}
a.regPageLinks:hover { text-decoration:none; }
a.regPageLinks:visited {text-decoration:underline;}
a.regPageLinks:visited:hover {text-decoration:underline;}
.languagesText {
  color:#ff0000;
}
.languagesTextWebcast {
  color:#FFFFFF;
}
a.languagesButtons {
  cursor:hand;
  color:#ffffff;
}
a.languagesButtons:link { text-decoration:underline;}
a.languagesButtons:hover { text-decoration:none; }
a.languagesButtons:visited {text-decoration:underline;}
a.languagesButtons:visited:hover {text-decoration:underline;}

.languagesReg {
  background-color:#2a295c;
  padding:10px;
  position:fixed;
  left:00px;
  bottom:0px;
  width:100%;
}

#container {
    width: 100%;
    height: 100%;
    
}

#left_panel {
    position: absolute;
    left: 0px;
    top: 116px;
    bottom: 37px;
    right: 15%;
    min-width: 995px;
    background: #EEEEF3;
    overflow: hidden;
}

#right_panel {
    position: absolute;
    padding-left:13px;
    right: 0px;
    top: 116px;
    bottom: 37px;
    width: 15%;
    background: #EEEEF3;
    overflow: hidden;
}

#drag {
    position: absolute;
    left: 0px;
    top: 0;
    bottom: 0;
    width: 23px;
    cursor: w-resize;
    background-image: url("assets/handle_v2.png");
    background-color: #EEEEF3;
    background-repeat: no-repeat;
    background-position:center;
    
}

.theForm {
    width:50%;
    margin-left: auto; 
    margin-right: auto; 
}
.title, .date, .info {
    width:50%;
    margin-left: auto; 
    margin-right: auto; 
}


/*@media only screen and (max-width: 600px) and (min-width: 400px)*/
@media (max-width : 770px) {
    .footer {padding:0px; text-align:center;}
    .languagesTextWebcast {color:#ffffff;font-size:12px;}
    a.languagesButtons { cursor:hand; color:#ffffff; font-size:12px;}
    .languagesReg { padding:0px; width:100%; position:fixed; bottom:0px; text-align:center; }
    
    .theForm {
        width:70%;
        margin-left: auto; 
        margin-right: auto; 
    }
    .title, .date, .info {
        width:70%;
        margin-left: auto; 
        margin-right: auto; 
    }
}

@media (max-width : 670px) {
    .footer {padding:0px; text-align:center;}
    .languagesTextWebcast {color:#ffffff;font-size:12px;}
    a.languagesButtons { cursor:hand; color:#ffffff; font-size:12px;}
    .languagesReg { padding:0px; width:100%; position:fixed; bottom:0px; text-align:center; }
    
    .theForm {
        width:85%;
        margin-left: auto; 
        margin-right: auto; 
    }
    .title, .date, .info {
        width:85%;
        margin-left: auto; 
        margin-right: auto; 
    }
}

@media (max-width : 600px) {
    .footer {padding:0px; text-align:center;}
    .languagesTextWebcast {color:#ffffff;font-size:12px;}
    a.languagesButtons { cursor:hand; color:#ffffff; font-size:12px;}
    .languagesReg { padding:0px; width:100%; position:fixed; bottom:0px; text-align:center; }
    
    .theForm {
        width:100%;
        margin-left: auto; 
        margin-right: auto; 
    }
    .title, .date, .info {
        width:100%;
        margin-left: auto; 
        margin-right: auto; 
    }
}