html {
  --color-0:#2b2b2b;
  --color-1:#ffffff;
  --color-2:#00a5c5;
  --color-3:#005874;
}


@font-face {
  font-family: "ProximaNova-Light";
  src: url('../fonts/ProximaNova-Light.otf') format('opentype');
}

@font-face {
  font-family: "ProximaNova-Regular";
  src: url('../fonts/ProximaNova-Regular.otf') format('opentype');
}

@font-face {
  font-family: "ProximaNova-Semibold";
  src: url('../fonts/ProximaNova-Semibold.otf') format('opentype');
}

@font-face {
  font-family: "ProximaNova-Bold";
  src: url('../fonts/ProximaNova-Bold.otf') format('opentype');
}

@font-face {
  font-family: "foundation-icons";
  src: url("../fonts/foundation-icons.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}



/*helper classes*/

.sup {
  position: relative;
  top: -7px;
  left: 0px;
  font-size: 75%;
}

.hide {display: none;}
.show {display: block;}
.center {
  text-align: center;
}

body{
  font-family: 'ProximaNova-Regular', sans-serif;
  color:#fff;
}

h2 {
  font-family: 'ProximaNova-Regular', sans-serif;
  font-size:22px;
  line-height:1 ;
  color:#fff;
  margin-top:0;
}

p {
  font-family: 'ProximaNova-Regular', sans-serif;
  font-size: 21px;
  line-height: 33px;
  color:#fff;
}

a, 
a:hover,
a:focus{
    font-size: inherit;
    color: inherit;
    text-decoration: underline;
}

button, .button {
    cursor: pointer;
    font-size: 26px;
    line-height: normal;
    font-size: 1rem;
    color: #FFF;
    background-color: #e6e6e6;
    border-color:#fff;
    padding: .35rem 1em .40rem 1rem; 
    margin:0;
}

button:hover, button:focus, .button:hover, .button:focus {background-color: #fff;}

button.radius, .button.radius {border-radius: 6px;}
#submitBtn {}

.wrapper {
	max-width:640px;
  height:400px;
  padding:0;
  border:1px solid #3f3f3f;
  margin:0 auto;
  overflow: hidden;
}

header{
  background-color: #fff;
  width:100%;
  height:75px;
  padding: 0;
}

.header-left {
  margin-top: 6px;
  margin-left: 13px;
}

.header-left img {
  max-width: 330px;
}

.sub-header {
  background-color:#3e3e3e;
  padding:8px 15px;
  min-height: 34px;
}

.sub-header h2{
  text-align: center;
  margin-bottom:0;
  font-size: 18px;
}

nav {
  margin-top: 15px;
  margin-left: 20%;
}

nav img {
  display:inline-block;
  margin-right:10px;
}

ul.nav-status {
  margin-top:18px;
  margin-left:5%;
  line-height: 1;
}

ul.nav-status li {
  display:inline-block;
  margin-right:4px;
}

ul.nav-status li.status {
  background-color: #fff;
  width:20px;
  height:20px;
  border-radius: 50%;
  border:1px solid transparent;
}

ul.nav-status li.status.active {
  background-color: #005874;
  border:1px solid #fff;
}

.main {
  background: #00a7c7 url(../img/background-question.png) no-repeat 0 0;
  background:#00a7c7;
  height: 229px;
  position: relative;
}

.main.main-alt {background: #005874;}

.main p {
  font-family:"ProximaNova-Regular", sans-serif;
  font-size:19px;
  line-height: 23px;
  color: #fff;
  margin: 20px 20px 0px 0;
}

.main p.summary-disc {
  font-size:1rem;
  line-height: 1.2;
  margin: 0 2rem;
}

.main h3 {
  font-family:"ProximaNova-Regular", sans-serif;
  font-size:21px;
  line-height: 1;
  color: #fff;
  text-align: center;
}

.main h3 span {
  font-family:"ProximaNova-Bold", sans-serif;

}

button.btn-main {
  background-color: #a6e2ef;
  color:#515151;
  border-radius:15px;
  font-size:24px;
  line-height: 1;
  text-transform:uppercase;
  height:35px;
  width:188px;
  padding:0;
}

/*intro screen for desktop*/
#intro-screen{
  display: block;
  width: 640px;
  height: 323px;
  background:#005874 url(../img/background-question.png)no-repeat 0 0 ;
  z-index: 1000;
  position: absolute;
  top:-34px;
}

.intro-text {
  position: relative;
  margin:2rem auto 1rem;
  width:90%

}

.intro-text p {
  margin:0;
  margin-bottom:1rem;
  font-size:21px;
  line-height: 1.4;
  font-family: "ProximaNova-SemiBold", sans-serif;
}

#intro-screen .intro-text button {
  border:3px solid #fff;
  font-size:21px;
  line-height: 1;
  font-family: "ProximaNova-SemiBold", sans-serif;
  background-color:transparent;
  padding: .75rem 2rem;
  position: relative;
}

#intro-screen .intro-text button:hover {background-color:rgba(255,255,255,0.3);}

/*summary page specific*/
.expenses-ctr {
  margin-left:2rem;
  margin-top:1rem;
}


.expenses-hdr img{
  max-width: 200px;
}
.expenses-list ul {margin-bottom:0;}
.expenses-list ul li  {
  font-size:1rem;
  line-height:1.4;
}
/* .expenses-list ul li span  {
  font-size:1rem;
  line-height:1.4;
} */

/* info page specific*/
.information-box {
  margin:1rem 2rem;
}

.information-box p {
  margin:0;
  margin-bottom: .5rem;
  font-size:1rem;
  line-height:1.2
}

/* / info page specific*/
footer {
  background-color: #3e3e3e;
  min-height: 60px;
}

/*drag and drops*/
#dropBox1bg {
  background: url(../img/drop-eligible.png)0 0 no-repeat;
  background-size: 150px auto
}
#dropBox2bg {
  background: url(../img/drop-ineligible.png)0 0 no-repeat;
  background-size:150px auto
}

#submitBtn {z-index: 100;}

/*Rotate to Landscape message*/
/* for all screens */
#rotate {
  display: none;
  position: absolute;
  width:90%;
  height:90%;
  background-color: rgba(0,0,0, 0.8);
  z-index: 2000;
  margin: 5% auto;
  left: 5%;
}

#rotate p {
  font-size:2.5rem;
  line-height: 1.5;
  color: #FFF;
  text-align: center;
  position: relative !important;
  top: 50% !important;
  transform: translateY(-50%);
  margin-left:15px;
  margin-right:15px;
}


/* only when orientation is in portrait mode */
@media all and (orientation:portrait) and (max-device-width: 767px) {
   #rotate {
         display: block;
    }
}

/* / Rotate to Landscape message*/

.dragItem img {
  max-width:175px;
}