//@import url('https://fonts.googleapis.com/css?family=Mitr|Oswald');
//@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');

@font-face {
  font-family: myriadpro;
  src: font-url('myriadpro.eot');
  src: local('myriadpro'), font-url('myriadpro.ttf') format('truetype');
}

body {
  font-family: "myriadpro";
}

h1,
h2 {
  font-family: "myriadpro";
  color: #fff;
}

h1{
  font-size: 24px;
  font-weight: bold;
  margin-top: 30px;
  text-shadow: 1px 1px #333;
}
h2{
  font-size: 20px;
  font-weight: bold;
  color: #222;
  text-align: center;
}

.header{
  background: #2589cc !important;
  min-height: 180px;
  .logo{
    margin-top: 20px;
    a{
      img{
        display: block;
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
      }
    }
  }
  .slogan{
    padding: 5px 15px;
    text-align: center;
  }
}

.alert{
  padding: 3px 10px;
  background: #ffbdbd;
  border: 1px solid #ff8484;
  margin-bottom: 10px;
  border-radius: 5px;
  ul{
    list-style: none;
  }
}

.photo{
  display: none;
}

.footer{
  background-color: #fff !important;
  padding-top: 20px;
  .logo{
    text-align: center;
    line-height: 1.5;
    font-weight: normal;
    margin: 0 auto 20px;
    a{
      img{
        display: block;
        margin: 0 auto 15px;
        width: 100%;
        max-width: 250px;
      }
    }
  }
}

textarea{
  height: 100px !important;
}

.content{
  min-height: 325px;
}

#image-preview{
  margin: 0 auto;
  width: 200px;
  height: 200px;
  border: 5px solid #ccc;
  line-height: 0;
  text-align: center;
  overflow: hidden;
  img{
    width: 200px;
  }
}

.error-wrap{
  margin-top: 10px;
  background: #ffbdbd;
  border: 1px solid #ff8484;
  padding-top: 3px;
  border-radius: 5px;
  border: 1px solid #ff8484;
  label.error{
    color: #aa0000;
  }
}

.clear{
  clear: both;
}

.shareApp{
  margin: 15px auto;
  a{
    background-color: #2770B1;
    border-radius: 5px;
    color: #FFFFFF;
    display: table !important;
    font-size: 20px;
    font-weight: normal;
    margin: 0 auto;
    padding: 20px 40px;
    text-align: center;
    text-decoration: none;
    width: 200px;
    text-shadow: 1px 1px #666;
  }
  a:hover, a:visited{
    color: #fff;
    text-decoration: underline;
  }
}

.new-denounce{
  margin: 40px auto 15px;
  a{
    background: #92c03a; /* Old browsers */
    background: -moz-linear-gradient(top, #92c03a 0%, #7aa132 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#92c03a), color-stop(100%,#7aa132)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #92c03a 0%,#7aa132 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #92c03a 0%,#7aa132 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #92c03a 0%,#7aa132 100%); /* IE10+ */
    background: linear-gradient(to bottom, #92c03a 0%,#7aa132 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#92c03a', endColorstr='#7aa132',GradientType=0 ); /* IE6-9 */
    border-radius: 5px;
    color: #FFFFFF;
    display: table !important;
    font-size: 20px;
    font-weight: normal;
    font-family: "myriadpro";
    margin: 0 auto;
    padding: 20px 40px;
    text-align: center;
    text-decoration: none;
    width: 200px;
    text-shadow: 1px 1px #666;
  }
  a:hover, a:visited{
    color: #fff;
    text-decoration: underline;
  }
}

button.save-icon{
  background: #2589cc !important;
  color: #eee !important;
  text-shadow: none !important;
  font-weight: bold;
  font-style: italic;
  padding: 12px 60px;
  text-transform: uppercase;
}

.plate{
  position: relative;
  .plate-mask{
    display: block;
    font-size: 18px;
    font-weight: bold;
    height: 35px;
    left: 22%;
    line-height: 2;
    position: absolute;
    text-align: center;
    top: 0;
    width: 28px;
  }
  #denouncement_plate{
    padding-left: 30px;
  }
}


@media only screen and (max-width: 767px) {
  h1 {
    font-size: 20px;
    text-align: center;
    margin-top: 15px;
  }

  h2 {
    font-size: 16px;
    text-align: center;
  }
  .footer{
    .logo{
      text-align: center;
      line-height: 2;
      font-weight: normal;
      font-size: 12px;
      margin: 0 auto;
      padding: 10px;
      a{
        img{
          display: block;
          margin: 0 auto 15px;
        }
      }
    }
  }
}

@media screen and (max-width: 320px) {
  .plate{
    position: relative;
    .plate-mask{
      display: block;
      font-size: 18px;
      font-weight: bold;
      height: 35px;
      left: 0% !important;
      line-height: 2;
      position: absolute;
      text-align: center;
      top: 45% !important;
      width: 28px;
    }
  }
}

@media screen and (max-width: 450px) {
  .plate{
    position: relative;
    .plate-mask{
      display: block;
      font-size: 18px;
      font-weight: bold;
      height: 35px;
      left: 0% !important;
      line-height: 2;
      position: absolute;
      text-align: center;
      top: 45% !important;
      width: 28px;
    }
  }
}
