@import url('https://fonts.googleapis.com/css?family=Muli|Open+Sans')

$fuenteTitulos: 'Muli'
$fuentePrincipal: 'Open Sans'

*
  box-sizing: border-box

html, body
  margin: 0
  padding: 0
  font-family: $fuentePrincipal, sans-serif

header
  background-color: #44A
  box-shadow: 0 5px 5px #999999

nav
  background-color: #3d3d7c
  color: white

section
  overflow: hidden
  transition: height 150ms ease-out
  height: auto

footer
  background-color: #333
  color: #EEE
  box-shadow: inset 0 5px 5px #999999
  padding: 40px

.contenedor
  max-width: 1200px
  width: 80%
  margin: auto

.col-1
  width: 8.33%

.col-2
  width: 16.66%

.col-3
  width: 25%

.col-4
  width: 33.33%

.col-5
  width: 41.66%

.col-6
  width: 50%

.col-7
  width: 58.33%

.col-8
  width: 66.66%

.col-9
  width: 75%

.col-10
  width: 83.33%

.col-11
  width: 91.66%

.col-12
  width: 100%

[class*="col-"]
  float: left

.row::after
  content: ""
  clear: both
  display: table

.center
  text-align: center

#tituloP
  padding: 30px
  color: white
  font:
    size: 50px
    family: $fuenteTitulos

#tituloP--descripcion
  padding: 10px
  font:
    size: large
    family: $fuentePrincipal

.center
  text-align: center

.boton
  display: inline-block
  margin: 20px
  border-radius: 3px
  box-shadow: 1px 1px 3px #090909
  padding: 10px 30px
  cursor: pointer
  text-decoration: none

.mySeccion
  overflow: hidden
  transition: height 150ms ease-out
  height: auto

#botonRegistro
  background-color: green
  color: white
  font-size: large
  transition: transform 200ms, box-shadow 200ms

#botonRegistro:hover
  transform: translate(-1px, -1px)
  box-shadow: 2px 2px 7px #050505

#botonInicioSesion
  background-color: white
  transition: transform 200ms, box-shadow 200ms

#botonInicioSesion:hover
  transform: translate(-1px, -1px)
  box-shadow: 2px 2px 7px #050505

#botonInicioSesion:visited
  color: black

.contenido
  margin: 40px 0

.image
  padding: 0 20px
  width: 100%
  height: auto

.descripcionComida
  padding: 0 30px
  text-align: center
  font-size: large

.inicio_registro
  color: white

input
  min-width: 80%
  min-height: 40px
  padding: 10px
  color: #44A
  font-size: large

.botonEnviarForm
  background-color: white
  box-shadow: 1px 1px 2px gray
  cursor: pointer
  border: none
  transition: background-color 250ms, color 250ms, transform 250ms, box-shadow 250ms

.botonEnviarForm:hover
  background-color: #4949e2
  color: white
  transform: translate(-1px, -1px)
  box-shadow: 2px 2px 2px gray

.google-button
  height: 40px
  border-width: 0
  background: white
  color: #737373
  border-radius: 5px
  white-space: nowrap
  box-shadow: 1px 1px 0 1px rgba(0, 0, 0, 0.05)
  transition-property: background-color, box-shadow
  transition-duration: 150ms
  transition-timing-function: ease-in-out
  padding: 0
  cursor: pointer

.google-button:focus, .google-button:hover
  box-shadow: 1px 4px 5px 1px rgba(0, 0, 0, 0.1)

.google-button:active
  background-color: #e5e5e5
  box-shadow: none
  transition-duration: 10ms

.google-button__icon
  display: inline-block
  vertical-align: middle
  margin: 8px 0 8px 8px
  width: 18px
  height: 18px
  box-sizing: border-box

.google-button__text
  display: inline-block
  vertical-align: middle
  padding: 0 24px
  font-size: 14px
  font-weight: bold
  font-family: 'Roboto', arial, sans-serif

.unseen
  visibility: hidden

.botonAddCart
  background-color: white
  padding: 5px
  color: #4444aa
  box-shadow: 0.1px 0.1px grey
  border-radius: 2px
  cursor: pointer
  font-size: large
  transition: background-color 250ms, color 250ms
  user-select: none

.botonAddCart:hover
  background-color: #4444AA
  color: white

.caja
  border-radius: 4px
  box-shadow: 1px 1px 2px gray
  padding: 15px

.botonPayPal
  background-color: #0070ba
  color: white
  font-size: large
  padding: 10px
  border: none
  border-radius: 5px
  cursor: pointer
  margin: 0 5px

.botonVisa
  @extend .botonPayPal
  background-color: #1a1f5e

.linksNavBar
  margin: 0
  li
    list-style: none
    float: left
    transition: background-color 250ms
    a
      cursor: pointer
      display: inline-block
      padding: 15px
      color: white
      text-decoration: none
    &:after
      clear: both
    &:hover
      background-color: #35356a

.plato--Titulo
  font:
    size: x-large
    weight: bold
    family: $fuenteTitulos
  color: #3d3d7c

.plato--Descripcion
  font:
    size: large
  color: #333333

.plato--Precio
  font-size: large
  &:before
    color: green
    content: "Precio unitario: "
  &:after
    content: " S/."

.plato--Cantidad
  font:
    size: large
    weight: bold
  display: inline-table
  padding: 15px

.plato--Cantidad--Icon
  display: table-cell
  vertical-align: top
  cursor: pointer
  transition: color 250ms
  -webkit-user-select: none
  -moz-user-select: none
  -ms-user-select: none
  user-select: none
  &:hover
    color: #4444aa

.carrito
  text-align: left

#carrito--elementos, #carrito--precio
  padding: 0 10px

.carritoElem
  &:after
    clear: both

.carritoElem--img
  float: left
  margin: 10px 20px
  width: 200px

.carrito--subTotal
  text-align: right
  font:
    weight: bold
    family: $fuenteTitulos, sans-serif
    size: x-large
  &:before
    content: "Subtotal: "
  &:after
    content: " S/."

.carrito--precio--contenido--titulo
  text-align: center
  font:
    family: $fuenteTitulos, sans-serif
    size: x-large
    weight: 900

.carrito--precio--contenido--botonPagar
  display: inline-block
  width: 100%
  text-align: center
  padding: 10px
  background-color: #4444aa
  color: white
  border-radius: 3px
  cursor: pointer
  &:hover
    background-color: #3d3d7c

#carrito--boton--seguircomprando
  margin: 10px 0
  padding: 10px 20px
  background-color: green
  color: white
  text-decoration: none
  border-radius: 4px
  &:visited
    color: white

#carrito--tituloprincipal
  text-align: center
  font:
    size: xx-large
    family: $fuenteTitulos, sans-serif
    weight: 900
  margin: 10px 0