/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */
::-moz-selection {
    background: #ffefd4;
    text-shadow: none;
}

::selection {
    background: #ffefd4;
    text-shadow: none;
}

html, body {width: 100%; height:100%; font-family: 'Lato', sans-serif;}
body {background: url('../images/bg4.png')}
h1, h2 {font-family: 'Amatic SC', cursive; text-align: center}
h1 {margin:20px 0 30px;}
.container-fullwidth          { position: relative; width: 100%; height: 100%; margin: 0 auto; padding: 0; }
.container-fullwidth .page    { width: 100%; height: 100% }
#menu {position: fixed; top: 0; width: 100%; height:40px; z-index: 9999; background: #fff; box-shadow: 0 0 10px #000; text-align: center}
#galeria {text-align: center}
#logo {position: fixed; top:20px; left:5%; padding: 0 20px 10px 20px; background: #fff; border-radius: 0 0 5px 5px; box-shadow:0 8px 6px -7px #000;}
#logo-mini {position: fixed; top:5px; left: 7%; }
.hidden {display: none}
iframe {width: 100%; display: block;}
#contact_form {width: 87%; margin:25px;}
#contact_form input, #contact_form textarea {width: 100%}
#enviar_form {margin:0; width:25% !important;}
.author {margin:0; text-align: center; font-size:10px;}
.iva {margin-top: -15px; text-align: center; font-size:14px;}
.menu {margin-top: -15px; margin-bottom: 30px; text-align: center; font-size:22px;}

/* #Page Styles
================================================== */
#page1 {background: url('../images/bg1.jpg')}
blockquote {font-family: 'Amatic SC', cursive; color:#fff; font-size: 4em; line-height: 1em; font-style: normal; position: absolute; right:20px; bottom:0; font-weight: 700; border-left:5px #000 dotted; text-shadow:1px 2px 2px #000;}
.card {background: #fff; box-shadow: 0 0 10px #ccc; margin-bottom: 20px; padding-bottom: 20px;}
.card dl {padding:10px 20px;}
.card dt, .card dd {padding: 5px 0} 
.card dt {width:79%; float:left; border-bottom: 1px #eee dotted;}
.card dd {width:13%; float:right}
.card dt.category { width: 100%; text-align: center; }
.card dt.category h4 { font-family: 'Amatic SC', cursive; }
.card h2 {margin-top:20px;}
.card p {margin: 20px; clear: both; font-style: italic;}
.normal p, .normal strong {font-style: normal !important; }
.normal p {margin-top:20px !important}
.contact { padding-top: 20px;}
.map { padding-bottom: 0 }
span.price {float:right;}
#menu a {font-family: 'Dosis', sans-serif; font-weight: 500; text-decoration: none; text-transform: uppercase; font-size:1.5em; line-height: 1.7em; margin: 0 0.2em; -o-transition:.5s; -ms-transition:.5s;-moz-transition:.5s;-webkit-transition:.5s;transition:.5s;}
#menu a.active {text-decoration: underline; color: #000}
#menu a:hover {color:#606060;}
.lnk-carta {position: absolute; bottom:45%; left:37%; text-align: center; text-transform: uppercase; font-weight: bold; color:#fff; font-size:2em; text-shadow:1px 2px 2px #000; }
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-16px);
    -moz-transform: translateY(-16px);
    -ms-transform: translateY(-16px);
    transform: translateY(-16px);
  }

  60% {
    -webkit-transform: translateY(-15px);
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-16px);
    -moz-transform: translateY(-16px);
    -ms-transform: translateY(-16px);
    transform: translateY(-16px);
  }

  60% {
    -webkit-transform: translateY(-15px);
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@-ms-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-16px);
    -moz-transform: translateY(-16px);
    -ms-transform: translateY(-16px);
    transform: translateY(-16px);
  }

  60% {
    -webkit-transform: translateY(-15px);
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-16px);
    -moz-transform: translateY(-16px);
    -ms-transform: translateY(-16px);
    transform: translateY(-16px);
  }

  60% {
    -webkit-transform: translateY(-15px);
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

.bounce {
  -webkit-animation: bounce 2s infinite;
  -moz-animation: bounce 2s infinite;
  -ms-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}

.thumb {position: relative; float:left; margin-right:5px; overflow: hidden}
.mask {background: #000 url('../images/mag.png') 50% 50% no-repeat; opacity: 0; position: absolute; top:0; right:0; display: inline; width:230px; height:230px;-o-transition:.5s; -ms-transition:.5s;-moz-transition:.5s;-webkit-transition:.5s;transition:.5s;}
.thumb:hover .mask { 
  opacity:0.6;
}

/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
    .card dd {width: 15%;}
  }

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
    #logo {left: 4%;}
    #menu {padding-left:80px;}
  }

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
    #page1 {background: url('../images/bg1-mobile.jpg')}
    #menu {height: 75px}
    #logo {display: none !important}
    #logo-mini {display: block; top:10px; left:0; position: relative; height: 38px}
    .lnk-carta {top: 120px !important; left:0 !important; line-height: 1em }

    .card {margin-bottom: 20px !important}
    .card dd {width: 18%}
    .card dt {width: 76%;}

    .thumb {width: 100%}
    .mask {display: none}
    .thumb img {width: 100%}
    #contact_form {width: 80%}
  }

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 500px) and (max-width: 767px) {
    #page1 {background: url('../images/bg1-mobile.jpg')}
    .lnk-carta {display: none}
    blockquote {font-size:4em;}
  }

  @media only screen and (min-width: 480px) and (max-width: 500px) {
    #page1 {background: url('../images/bg1-mobile.jpg')}
    .lnk-carta {display: none}
    blockquote {font-size:3em;}
  }

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 350px) {
    #page1 {background: url('../images/bg1-mobile.jpg')}
    #menu a {font-size: 1.2em}
    #menu {height: 70px}
    .lnk-carta {top: 100px !important; left:0 !important;}
    blockquote {font-size:3em;}
  }


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/