body,
h1,
h2,
h3,
h4 {
   font-family: 'Titillium Web', sans-serif;
}
body {
   background-color: #fff !important;
}
.hideInput {
   width: 0px;
   height: 0px;
   overflow: hidden;
   display: none;
}
.hideInput input#file {
   width: 200px;
   display: none;
}
body {
   background-color: #fff;
   background-size: cover;
   background-repeat: no-repeat;
}

input#textInsert {
   font-color: #333;
   display: inline-block;
   width: 220px;
}
.input-group {
  width: 75%;
}
h1,
h2,
h3,
h4 {
   text-align: center;
}
input:focus {
   color: #000;
}
a {
   color: #000;
}
a.white {
   /*color: #fff;*/
}
p.controls {
  margin-top: 5px !important;
  text-align: center;
}
.controls a {
  /*color: #fff;*/
}
.controls img {
  width: 25px;
  height: 25px;
}
.zoomControls {
   /*position: absolute;*/
/*   top: 1px;
   right: 0;*/
}
.zoomControls a {
   background-color: rgba(0, 0, 0, 0.8);
   padding: 3px 10px;
   margin: 0 0 0 1px;
   color: #fff;
}
.step2 {
  margin-top: 15px;
}
.button {
    font-size: 18px;
    padding: 10px 25px;
}
.button i {
   font-size: 20px;
   margin-right: 8px;
}
.blackLogo {
   margin-right: 50px;
}
.blackLogo.active,
.whiteLogo.active {
   text-decoration: underline;
}
.topSection {
  padding: 50px 0 70px;
/*   background-image: url('../images/background-photo.jpg');
   background-repeat: no-repeat;
   background-position: top center;
   background-size: cover;*/
   min-height: 300px;
  border-bottom-color: #34487a;
  border-bottom-width: 4px;
  border-bottom-style: solid;
  margin: 0;
}
.topSection h1,
.topSection p,
.topSection h4 {
  /*color: #fff;*/
  margin: 0;
}
.header {
   /*height: 640px;*/
   /*background-image: url('../images/background1.jpg');*/
   /*background-size: 960px;*/
   /*background-repeat: no-repeat;*/
   /*background-position: top center;*/
   margin: 50px 0;
}
.header h1,
.header h3 {
   /*color: #fff;*/
}
.header h1 {
   font-size: 44px;
}
.header h3 {
   font-size: 19px;
   margin-top: 0;
}
.header p {
  margin: 0 auto 5px auto;
  max-width: 600px;
  /*color: #fff;*/
}
/*.bottomSection {
  background-color: #fff;
  padding: 50px 0 70px;
  min-height: 300px;
  border-top-color: #f05e3f;
  border-top-width: 4px;
  border-top-style: solid;
  margin: 0;
}
.bottomSection h1,
.bottomSection p,
.bottomSection h4 {
  margin: 0;
}
.bottomSection p {
  max-width: 600px;
  margin: 0 auto;
}
.bottomSection p a {
  text-decoration: underline;
  color: #f05e3f;
}*/
.tool {
   /*position: relative;*/
/*   background-image: url('../images/celebrate.jpg');
    background-repeat: no-repeat;
    background-size: contain;*/
   /*text-align: center;*/
   margin: 0px auto;
   width: 320px;
   min-height: 352px;
/*   border-style: solid;
   border-color: #fff;
   border-width: 2px;*/
   /*background-color: #efefef;*/
}

.hide {
   display: none;
}
p.done {
  color: #6da743;
}
.center {
   text-align: center;
}
hr {
  height: 1px;
  border-width: 2px;
  margin: 20px 0 30px 0;
}
a.downloadButton.disabled {
}
a.downloadButton:hover {
  /*text-decoration: underline;*/
}

::-webkit-input-placeholder {
   color: #666;
}
:-moz-placeholder {     
   color: #666;
}
::-moz-placeholder {     
   color: #666;
}
:-ms-input-placeholder {
   color: #666;
}

.step1,
.step2,
.step3 {
  min-height: 100px;
}
a.startOver {
  /*color: #fff;*/
  text-decoration: underline;
}

.changePhoto,
.next2,
.step3,
.startOver,
.controls {
  display: none;
}

/* Small */
@media only screen and (max-width: 40em) {
   .header h1 {
       font-size: 30px;
       text-align: left;
       margin: 80px auto 0 auto;
   }
   .header {
       padding: 0 10px;
       /*margin-top: -90px;*/
   }
   .header h3 {
       font-size: 17px;
       text-align: left;
       width: 320px;
       margin: 0 auto;
   }
   .tool {
    margin-left: -10px;
   }
}

@media only screen and (min-width: 320px) and (max-width: 324px) {

}

/* Medium */
@media only screen and (min-width: 40.063em) and (max-width: 64em) {

}

/* Large */
@media only screen and (min-width: 64.063em) and (max-width: 90em) {

}