@import url('https://fonts.googleapis.com/css?family=Nunito:400, 600, 700');


* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: 'Nunito', sans-serif;
  color: white;
}

body {  
  width: 100%;
  height: 100%;
  position: fixed;
  margin: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  background-image: url("background.png");
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;

  font-size: 100%;
}

body::before,
body::after {
  display: none;
  content: '';
  flex: 1;
  height: 100%;
}

h4 {
  color: #000;
  margin: 0;
  padding: 0;
}

#logo-fundo {
  
  background-color: #fff;
  border-radius:20px 20px 0px 0px;
  padding: 3rem 0rem 1rem 0rem;

}

#logo-fundo img{
  max-width: 70%;
}

#frame {
  
  flex: 1;
  height: 40%;

  text-align: center;
  vertical-align: middle;
  
  background-color: #000000;
  background-position: center center, center center;
  background-size: cover, cover;
  -webkit-box-shadow: 0 10px 64px rgba(0, 0, 0, 0.3);
     -moz-box-shadow: 0 10px 64px rgba(0, 0, 0, 0.3);
      -ms-box-shadow: 0 10px 64px rgba(0, 0, 0, 0.3);
          box-shadow: 0 10px 64px rgba(0, 0, 0, 0.3);
  
  -webkit-border-radius: 20px;
     -moz-border-radius: 20px;
      -ms-border-radius: 20px;
          border-radius: 20px;
  
  display: flex;
  flex-direction: column;
}
#endereco {
  text-decoration: none;
}


#content {
  flex: 1;
    
  padding: 1rem 1rem;
  line-height: inherit;
  height: 100%;
  
  position: relative;
  display: flex;
  flex-direction: column;

  background-image: url("bg-copo.jpg");
  
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;

  list-style-type: none;
  width: 100%;
}



#content h1 {
  font-size: 30px;
  text-align: center;
  margin-bottom: 3rem;
}

#content ul {
  padding: 0;
}

#content li {

  border: 0;

  
  -webkit-border-radius: 100px;
     -moz-border-radius: 100px;
      -ms-border-radius: 100px;
          border-radius: 100px;

  text-align: center;
  list-style-type: none;
  display: inline-block;
  vertical-align: middle;

  padding: .3rem .5rem .3rem .5rem;
  margin: 0rem 1rem 0rem 1rem;

  font-size: 0.9rem;
  color: #000;
}

#balao {
  border: 0;

  
  -webkit-border-radius: 100px;
     -moz-border-radius: 100px;
      -ms-border-radius: 100px;
          border-radius: 100px;

  text-align: center;
  list-style-type: none;
  display: inline-block;
  vertical-align: middle;

  padding: .3rem .5rem .3rem .5rem;
  margin: 0rem 0rem 0rem 0rem;

  font-size: .9rem;
  color: #000; 
}

#nome {
  font-weight: 700;
  color: #fff;
  font-size: 1.3rem;
}

#content div{
  background-color: #FFF;
  text-align: center;
  vertical-align: middle;

  border: 0px solid #fb3549;

  -webkit-box-shadow: 0 10px 20px rgba(120, 120, 120, 0.3);
     -moz-box-shadow: 0 10px 20px rgba(120, 120, 120, 0.3);
      -ms-box-shadow: 0 10px 20px rgba(120, 120, 120, 0.3);
          box-shadow: 0 10px 20px rgba(120, 120, 120, 0.3);
  
  -webkit-border-radius: 100px;
     -moz-border-radius: 100px;
      -ms-border-radius: 100px;
          border-radius: 10px;

  padding: 0;
  margin: .5rem;
  opacity:0.7;
}

#content a {
  height: 100%;
  width: 100%;
  color: #000000;
  text-decoration: none;
}


#rodape {

  list-style-type: none;
  overflow: hidden;
  text-align: center;
  margin: 0;
  padding: 0;

}

#rodape h4 {
  margin: 0rem 0rem 1.5rem 0rem;
  color: #fff;
}

#rodape li {
  display: inline-block;
  text-align: center;
  margin: 1.5rem 0rem 0rem 0rem;

}

#rodape a {
  display: block;
  color: #fff;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;

  padding: 1rem;
  border-radius: 100%;

  -webkit-transition:0.8s;
     -moz-transition:0.8s;
          transition:0.8s;

  width: 65px;
  height: 65px;

}

#rodape a:hover {
  color: #000;
  background-color: #fff;

 -webkit-box-shadow: 0 3px 10px rgba(120, 120, 120, 0.5);
    -moz-box-shadow: 0 3px 10px rgba(120, 120, 120, 0.5);
     -ms-box-shadow: 0 3px 10px rgba(120, 120, 120, 0.5);
         box-shadow: 0 3px 10px rgba(120, 120, 120, 0.5);
}

#rodape-c {
  text-align: center;
  border-radius:0px 0px 20px 20px;
  display: block;
  background-image: url(rodape.svg);
  background-repeat: no-repeat, repeat;
  background-size: cover, cover;

}


@media (min-width: 768px;) {
  body::before,
  body::after {
    display: block;
  }
  
  
  #frame {
    flex: 0 1 25em;
    height: 100%;
  }
}

@media (min-width: 200px) {
  #frame {
    flex: 0 1 25em;
    height: 100%;
  }
}

@media (min-width: 600px) {
  #frame {
    flex: 0 1 25em;
    height: 100%;
  }

}

@media (min-width: 700px) {
  #frame {
    flex: 0 1 35em;
    height: 100%;
  }
}

@media (max-width: 500px) {
  #frame {
    flex: 0 1 25em;
    height: 100%;
  }

  #content {
    padding: 0 .5rem;
  }

  #logo-fundo {
    border-radius:0px 0px 0px 0px;
}

  #rodape-c {
    border-radius:0px 0px 0px 0px;
}

  #content li {

    border: 0;

  
    -webkit-border-radius: 100px;
       -moz-border-radius: 100px;
        -ms-border-radius: 100px;
            border-radius: 100px;

    text-align: center;
    list-style-type: none;
    display: inline-block;
    vertical-align: middle;

    padding: 0rem .5rem 0rem .5rem;

    font-size: .9rem;
    color: #70373a;
}

}

@media (max-width: 325px) {
  #frame {
    flex: 0 1 25em;
    height: 100%;
  }

  #content li {

    border: 0;

  
    -webkit-border-radius: 100px;
       -moz-border-radius: 100px;
        -ms-border-radius: 100px;
            border-radius: 100px;

    text-align: center;
    list-style-type: none;
    display: inline-block;
    vertical-align: middle;

    padding: 0rem .5rem 0rem .5rem;

    font-size: .9rem;
    color: #70373a;
}

  #logo-fundo {
    border-radius:0px 0px 0px 0px;
}

  #rodape-c {
    border-radius:0px 0px 0px 0px;

}
  #content {
    padding: 0 .3rem;
  }
}