/* Block/Headings */
@import url('https://fonts.googleapis.com/css?family=Fjalla+One&subset=latin-ext');
@font-face {
font-family: 'Bodoni';
src: url('../fonts/bodoniflf-roman-webfont.ttf') format('ttf'),
url('../fonts/bodoniflf-roman-webfont.woff2') format('woff2'),
url('../fonts/bodoniflf-roman-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Homenaje';
src: url('../fonts/Homenaje-Regular.ttf') format('ttf'),
url('../fonts/Homenaje-Regular.woff') format('woff'),
url('../fonts/Homenaje-Regular.svg#Homenaje-Regular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Sign Painter';
src: url('../fonts/SignPainterHouseScript.eot');
src: url('../fonts/SignPainterHouseScript.svg') format('svg'),
url('../fonts/SignPainterHouseScript.woff') format('woff'),
url('../fonts/SignPainterHouseScript.ttf') format('ttf');
font-weight: normal;
font-style: normal;
}
@font-face { /* Block/Body Copy */
font-family: 'ProximaNova-Light';
src: url('../fonts/proximanova-light-webfont.eot');
src: url('../fonts/proximanova-light-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/proximanova-light-webfont.woff') format('woff'),
url('../fonts/proximanova-light-webfont.ttf') format('truetype'),
url('../fonts/proximanova-light-webfont.svg#proxima_nova_ltregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'ProximaNova-Regular';
src: url('../fonts/proximanova-regular-webfont.eot');
src: url('../fonts/proximanova-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/proximanova-regular-webfont.woff') format('woff'),
url('../fonts/proximanova-regular-webfont.ttf') format('truetype'),
url('../fonts/proximanova-regular-webfont#ProximaNovaBlRegular') format('svg');
font-weight: normal;
font-style: normal;
}
/* PRELOADERS
---------------------------------------- */
.square-spinner {
width: 55px;
display: block;
background-color: #03A9F4;
height: 55px;
-webkit-animation: 3s flip ease-in-out infinite;
animation: 3s flip ease-in-out infinite;
}
@-webkit-keyframes flip {
0% {
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
}
25% {
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
}
50% {
transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
}
75% {
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(-180deg);
transform: perspective(120px) rotateX(0deg) rotateY(-180deg);
}
100% {
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(-360deg);
transform: perspective(120px) rotateX(0deg) rotateY(-360deg);
}
}
@keyframes flip {
0% {
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
}
25% {
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
}
50% {
transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
}
75% {
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(-180deg);
transform: perspective(120px) rotateX(0deg) rotateY(-180deg);
}
100% {
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(-360deg);
transform: perspective(120px) rotateX(0deg) rotateY(-360deg);
}
}
/* HTML reset
---------------------------------------- */
html, body {
margin: 0px; padding: 0px;
height: 100%; width: 100%;
}
body {
font-size: 16px;
line-height: 120%;
font-family: "ProximaNova-Regular", Helvetica,Arial,Verdana,sans-serif;
-webkit-overflow-scrolling: touch;
text-align: center;
/*
color: #010101;
*/
color: #172a3a;
text-size-adjust: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
}
pre {
display: block; width: 100%; box-sizing: border-box;
line-height: 120%;
text-align: left;
}
code {
font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
font-size: 1rem !important;
}
sup,sub {
display: inline-block; font-size: 95%;
margin: 0px; padding: 0px; vertical-align: middle;
line-height: 100%;
position: relative;
}
sup {
top: 2%;
}
sub {
bottom: 2%;
}
h1,h2,h3,h4,h5,h6,h7,h8 {
/*
font-family: 'Fjalla One', Helvetica, Arial, "sans-serif";
*/
font-family: 'Homenaje', Helvetica, Arial, "sans-serif";
margin: 0px;
box-sizing: border-box;
line-height: 100%;
letter-spacing: -0.01rem;
position: relative;
padding: 15px 0px;
color: inherit;
font-weight: normal;
}
.font-bodini {
font-family: "Bodini", Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif" !important;
}
.font-homenaje {
font-family: "Homenaje", Helvetica, Arial, "sans-serif";
}
.font-fjalla {
font-family: 'Fjalla One', Helvetica, Arial, "sans-serif";
}
.font-sign-painter {
font-family: "Sign Painter", "cursive" !important;
}
.add-gradient {
-webkit-border-radius: 8px;
border-radius: 8px;
color: #2e0002;
padding: 10px;
background: #fbdc81; /* Old browsers */
background: -moz-linear-gradient(top, #fbdc81 0%, #ffb74c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbdc81), color-stop(100%,#ffb74c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fbdc81 0%,#ffb74c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fbdc81 0%,#ffb74c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fbdc81 0%,#ffb74c 100%); /* IE10+ */
background: linear-gradient(to bottom, #fbdc81 0%,#ffb74c 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbdc81', endColorstr='#ffb74c',GradientType=0 ); /* IE6-9 */
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 2.5rem;
}
.blue-title {
display: block; width: 100%; box-sizing: border-box;
color: #fff; background-color: #172a3a;
padding: 10px; line-height: 110%;
}
h3 {
font-size: 2rem;
}
span.hat {
display: block; width: 48px; height: 64px;
background: transparent url('../images/static/hat.png');
position: absolute; top: -10px; right: -17px;
}
hr {
display: table;
width: 100%; height: 1px;
background-color: #dedede;
border: 0px;
}
a, a:active, a:hover, a:visited {
color: #c22a3f;
text-decoration: none;
padding: 3px 0px;
border-bottom: 1px solid rgba(153,43,89,0);
-webkit-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
a:hover {
color: #c22a3f;
/*
border-bottom: 1px solid rgba(153,43,89,1);
*/
text-decoration: underline;
}
.responsive-table {
display: block; overflow-x: auto;
width: 100%; box-sizing: border-box;
}
table {
display: table;
width: 100%; clear: both;
border-collapse: collapse;
font-size: 1rem;
}
thead {
display: table-header-group;
}
thead, th {
font-family: 'Homenaje', Helvetica, Arial, "sans-serif";
font-size: 1.5rem;
line-height: 120%;
}
tfoot {
display: table-footer-group;
}
tbody {
display: table-row-group;
}
td, th {
display: table-cell;
padding: 5px;
}
tr {
display: table-row;
}
/* Helpers
---------------------------------------- */
.inner {
display: block;
width: 80vw;
max-width: 1280px;
height: 100%;
margin: 0px auto;
text-align: left; position: relative;
box-sizing: border-box;
}
.inner-800 {
display: block; margin: 0px auto;
max-width: 800px;
height: 100%; box-sizing: border-box;
text-align: left;
position: relative;
}
.inner-950 {
display: block; margin: 0px auto;
max-width: 950px;
height: 100%; box-sizing: border-box;
text-align: left;
position: relative;
}
.colgroup {
display: block; width: 100%; clear: both;
box-sizing: border-box; position: relative;
vertical-align: top;
font-size: 0;
}
.col {
display: inline-block;
font-size: 1rem;
width: 50%;
vertical-align: top;
box-sizing: border-box;
}
.colgroup::after,
.clear::after {
display: table;
width: 100%; height: 0px;
clear: both;
content:"";
}
a[onclick]{
text-decoration: underline;
cursor: pointer !important;
}
.tmk-logo {
display: inline-block;
width: 150px;
height: 75px;
background-size: contain;
background-image: url('../images/static/branding/tmk-logo-white.png');
background-position: center center;
background-repeat: no-repeat;
}
.green-text {
color: #0d9948;
}
.center { text-align: center; }
.left { text-align: left; }
.right { text-align: right; }
.text-underline {
text-decoration: underline;
}
.scrollable {
overflow: hidden; /* Set to :auto to debug */
}
.scroll-page {
position: absolute; top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
display: block; width: 30px; height: 30px;
z-index: 1000; box-sizing: normal;
box-sizing: border-box; padding: 0px; margin: 0px;
-webkit-appearance: none;
appearance: none;
}
.scroll-page.scroll-left {
left: 0px;
background-image: url('../images/static/chevron-white.svg');
background-size: 50%;
background-position: center center;
background-repeat: no-repeat;
-webkit-transform: translateY(-50%) rotate(-180deg);
transform: translateY(-50%) rotate(-180deg);
-webkit-transform-origin: center;
transform-origin: center;
}
.scroll-page.scroll-right {
right: 0px;
background-image: url('../images/static/chevron-white.svg');
background-size: 50%;
background-position: center center;
background-repeat: no-repeat;
}
.icon {
display: inline-block;
margin: 0px; padding: 0px;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
width: 30px; height: 30px;
}
.icon.facebook {
background-image: url('../images/static/icon-facebook.svg');
}
.icon.instagram {
background-image: url('../images/static/icon-instagram.svg');
}
.icon.youtube {
background-image: url('../images/static/icon-youtube.svg');
}
.icon.twitter {
background-image: url('../images/static/icon-twitter.svg');
}
.icon.facebook.white {
background-image: url('../images/static/icon-facebook-white.svg');
}
.icon.instagram.white {
background-image: url('../images/static/icon-instagram-white.svg');
}
.icon.youtube.white{
background-image: url('../images/static/icon-youtube-white.svg');
}
.icon.twitter.white {
background-image: url('../images/static/icon-twitter-white.svg');
}
.icon.mailbox {
background-image: url('../images/static/icon-mailbox.svg');
}
.icon.letters {
background-image: url('../images/static/icon-letters.svg');
}
.icon.mailbox.white {
background-image: url('../images/static/icon-mailbox-white.svg');
}
.icon.letters.white {
background-image: url('../images/static/icon-letters-white.svg');
}
.icon.magnifier {
background-image: url('../images/static/icon-maginfier.svg');
background-size: 55%;
}
.icon.magnifier.white {
background-image: url('../images/static/icon-maginfier-white.svg');
}
.icon.cart {
background-image: url('../images/static/icon-shopping-bag.svg');
}
.icon.cart.white {
background-image: url('../images/static/icon-shopping-bag-white.svg');
}
.icon.globe {
background-image: url('../images/static/icon-globe-v2.svg');
}
.icon.globe.white {
background-image: url('../images/static/icon-globe-v2-white.svg');
}
.icon.chevron-left {
background-image: url('../images/static/icons/chevron-white.svg');
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.icon.chevron-right {
background-image: url('../images/static/icons/chevron-white.svg');
}
.halo-black {
text-shadow: 0 0 10px rgba(0,0,0,0.25), 0 0 10px rgba(0,0,0,0.25);
}
.halo-white {
text-shadow: 0 0 25px rgba(255,255,255,1.0), 0 0 25px rgba(255,255,255,1.0);
}
/* Glyph, by Harry Roberts */
ins.horizontal-rule {
display: block; text-align: center; width: 100%; clear: both;
height: 40px; line-height: 100%;
}
ins.horizontal-rule hr {
overflow: visible; /* For IE */
padding: 0;
border: none;
border-top: medium double #735567;
color: #735567;
text-align: center;
background-color: transparent;
opacity: 0.5;
max-width: 80%;
display: inline-block;
position: relative;
}
ins.horizontal-rule hr::after {
content: "§";
display: inline-block;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
margin-top: -5px; /* little bit of an offset with the glyph */
font-size: 1.5em;
padding: 0 0.25em;
background: white;
}
pre.debug {
display: block; clear: both; width: 100%;
text-align: left !important;
font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
font-size: 10px;
border-top: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
}
.hamburger {
display: inline-block; width: 30px; height: 24px;
position: absolute;
top: 50%;
left: 20px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
cursor: pointer !important;
z-index: 30000;
visibility: hidden;
opacity: 0;
-webkit-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
.hamburger input {
display: none;
}
.hamburger label {
display: block;
width: 100%; height: 100%;
position: relative;
margin: 0px; padding: 0px;
cursor: pointer !important;
}
.hamburger label i {
display: block; width: 100%; height: 5px;
background-color: #fff;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
-webkit-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
margin: 0px; padding: 0px;
opacity: 1;
}
.hamburger label::before,
.hamburger label::after {
display: block; width: 100%; height: 5px;
background-color: #fff;
content: "";
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
.hamburger label::before {
top: 0px;
}
.hamburger label::after {
bottom: 0px;
}
.hamburger input:checked + label i {
opacity: 0;
}
.hamburger input:checked + label::before {
top: 50%; left: 50%;
-webkit-transform: translate(-50%,-50%) rotate(45deg);
transform: translate(-50%,-50%) rotate(45deg);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.hamburger input:checked + label::after {
top: 50%; left: 50%;
-webkit-transform: translate(-50%,-50%) rotate(-45deg);
transform: translate(-50%,-50%) rotate(-45deg);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.themed {
background-color: #bf3948; color: #fff;
padding: 20px; box-sizing: border-box;
position: relative;
margin-top: 80px;
}
.themed::after {
position: absolute;
top: -100px;
right: 0px; width: 100%; height: 100px;
background-image: url('../images/static/gift-banner.png');
background-repeat: no-repeat;
background-color: transparent;
background-size: auto;
background-position: right top;
content: "";
z-index: -1;
opacity: 1;
}
/* Social sharing
-------------------------------- */
.social-share {
display: block; width: 100%; box-sizing: border-box;
text-align: right;
clear: both;
line-height: 100%;
}
.social-share ul {
display: inline-block; width: 100%;
list-style-type: none; font-size: 0;
vertical-align: middle;
line-height: 100%;
padding: 20px;
box-sizing: border-box;
}
.social-share ul li {
font-size: 1rem;
display: inline-block;
margin-left: 10px;
line-height: 100%;
vertical-align: middle;
color: #65a08e;
}
.social-share ul li a {
display: block;
line-height: 100%;
vertical-align: middle;
cursor: pointer !important;
}
.social-share ul li:first-child {
margin-left: 0px;
font-weight: bolder;
color: #c22a3f;
}
.share-fb a,
.share-twtr a {
display: block;
width: 25px; height: 25px;
content: "";
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
/*
opacity: 0.65;
*/
padding: 0px;
}
.share-fb a {
background-image: url(../images/static/icon-facebook.svg);
}
.share-twtr a {
background-image: url(../images/static/icon-twitter.svg);
}
/* Global Layout
---------------------------------------- */
#viewport {
display: block;
width: 100%;
min-height: 100%;
min-width: 320px;
box-sizing: border-box;
position: absolute;
z-index: 10;
top: 0px;
left: 0px;
-webkit-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
background-color: #fff;
/*
background-image: url('../images/static/background.jpg');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
*/
}
#viewport::before {
/*
display: block; width: 100%; height: 100%;
content: ""; box-sizing: border-box;
background-color: #71a6b6;
position: absolute; top: 0px; left: 0px;
opacity: 0.5;
*/
}
#viewport.menu-active {
left: 295px;
}
#header {
display: block;
width: 100%;
height: 170px; /* #region-select + #primary-nav + #primary-sponsor */
position: fixed;
top: 0px;
left: 0px;
box-sizing: border-box;
text-align: center;
z-index: 10000;
-webkit-box-shadow: 0 0 20px 0 rgba(0,0,0,0.15);
box-shadow: 0 0 20px 0 rgba(0,0,0,0.15);
background-color: transparent;
-webkit-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
#header.has-alert {
height: 195px; /* 170px + .site-alert.height */
}
#primary-sponsor {
height: 70px;
width: 100%; box-sizing: border-box;
/*
padding: 5px;
*/
padding: 0px;
clear: both;
position: relative;
background-color: #fff;
}
#primary-sponsor img {
position: absolute; top: 50%; left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
width: auto; max-width: 100%;
height: auto; max-height: 100%;
}
#primary-sponsor iframe,
#primary-sponsor video {
width: 100%; max-width: 768px; height: 100%;
border: 0px;
}
#primary-sponsor .primary-sponsor-media {
}
ul.follow-us {
display: inline-block; border: 0px; padding: 0px; margin: 0px;
box-sizing: border-box;
vertical-align: middle;
height: auto !important;
}
ul.follow-us > li {
display: inline-block;
vertical-align: middle;
height: 40px !important;
}
ul.follow-us > li:first-child {
font-weight: bolder;
line-height: 40px; padding-right: 10px;
}
ul.follow-us > li a:hover {
padding: 0px;
}
#primary-sponsor ul.follow-us {
position: absolute; right: 10px; top: 15px;
}
#primary-sponsor ul.follow-us > li {
color: #c22a3f !important; font-weight: bolder;
font-size: 1.2rem;
}
#primary-sponsor ul.follow-us a.icon {
width: 40px !important; height: 40px !important;
}
#primary-nav ul.follow-us {
position: absolute; right: 10px; top: 5px;
display: none;
}
#primary-nav ul.follow-us > li {
color: #fff;
}
#header .inner {
text-align: center;
}
.site-alert {
display: block; width: 100%; box-sizing: border-box;
height: 25px; line-height: 25px; vertical-align: middle;
text-align: center; text-decoration: none; color: #fff;
font-weight: bolder; text-transform: uppercase;
background-color: #172a3a;
}
.site-alert a {
color: #fff;
text-decoration: none;
display: block; width: 100%; box-sizing: border-box;
padding: 0px; margin: 0px;
}
ul.navigation {
display: block;
width: 100%; box-sizing: border-box;
list-style-type: none;
padding: 0px; margin: 0px;
font-size: 0;
text-align: center;
}
ul.navigation li {
display: inline-block;
font-size: 1rem;
vertical-align: top;
box-sizing: border-box;
margin-left: 10px;
}
ul.navigation li:first-child {
margin-left: 0px;
}
ul.navigation li a:hover {
text-decoration: underline;
}
ul.navigation.active {
display: block;
width: 80vw;
max-width: 320px;
height: 100%;
position: fixed;
top: 0px; left: 0px;
z-index: 300;
background-color: #808080;
}
ul.navigation.active li {
display: block; width: 100%;
padding: 10px; box-sizing: border-box;
text-align: left;
}
li#cart {
}
li#cart i.icon {
position: relative; top: 2px;
}
#expo-select {
height: 50px;
}
#expo-select::after {
display: block; width: 100%; height: 100%;
background-color: #0d9948; opacity: 0.5;
content: "";
z-index: -1;
position: absolute;
top: 0px; left: 0px;
}
#expo-select select {
margin: 0px auto;
max-width: 100%; box-sizing: border-box;
position: absolute; top: 50%; left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
background-color: #fff; color: #000;
}
#expo-select select > option {
text-align: center;
display: block; width: 100%;
background-color: #fff; color: #000;
}
#primary-nav {
height: 50px;
position: relative;
z-index: 3;
background-color: #0d9948;
color: #fff;
box-sizing: border-box;
}
#header.suppress-regions #primary-nav {
-webkit-box-shadow: 0 0 20px 0 rgba(0,0,0,0.5);
box-shadow: 0 0 20px 0 rgba(0,0,0,0.5);
}
#primary-nav ul {
height: 50px;
}
#primary-nav ul li {
height: 100%;
vertical-align: middle;
margin-left: 0px;
}
#primary-nav ul li a {
display: block; width: 100%; height: 100%; box-sizing: border-box;
color: #fff;
font-size: 1.65rem;
padding: 0px 20px;
line-height: 50px;
-webkit-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
border-bottom: 0px;
position: relative;
}
#primary-nav ul li i.cart-count {
display: block; width: 30px; height: 30px; line-height: 26px; /* 30px - border */
vertical-align: middle;
color: #fff; box-sizing: border-box;
font-size: 1rem; font-style: normal;
border: 2px solid #fff; background-color: #c22a3f;
text-align: center;
font-weight: bolder;
position: absolute; top: -10px; right: -10px;
-webkit-border-radius: 30px;
border-radius: 30px;
}
#primary-nav ul li.active a,
#primary-nav ul li a:hover {
background-color: #172a3a;
text-decoration: none;
color: #fff;
}
/*
#primary-nav::after {
display: block; width: 100%; height: 100%;
background-color: #000; opacity: 0.25;
content: "";
z-index: -1;
position: absolute;
top: 0px; left: 0px;
}
*/
#primary-nav ul li.home-link {
position: absolute; top: 0px; left: 10px;
}
/*
li.home-link a.home-snowflake {
display: block;
width: 80px; height: 80px;
background-image: url('../images/static/snowflake.png');
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
background-color: transparent;
z-index: 3000;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 0px !important;
position: relative; top: 10px;
border-bottom: 0px;
line-height: 100%; font-size: 1rem;
}
li.home-link a.home-snowflake:hover {
border-bottom: 0px;
}
*/
#primary-nav.menu-active {
}
#progress-bar {
display: block; width: 100%; height: 5px;
box-sizing: border-box; border: 0;
-webkit-appearance: none; appearance: none;
position: absolute;
bottom: -5px;
left: 0px;
opacity: 0.75;
}
/*
#progress-bar::-webkit-progress-value,
#progress-bar::-moz-progress-bar,
*/
#progress-bar span.progress {
display: block; width: 0px; height: 100%;
position: absolute; left: 0px; top: 0px; box-sizing: border-box;
z-index: 10;
background-color: #0d9948;
}
#footer {
display: block;
width: 100%;
height: 200px;
box-sizing: border-box;
padding: 20px 0px;
position: absolute;
bottom: 0px;
left: 0px;
text-align: center;
z-index: 50;
border-top: 5px solid #0d9948;
color: #fff;
background-color: #172a3a;
}
#footer a {
color: #fff;
font-weight: bolder;
}
#footer a:hover {
text-decoration: underline;
}
#footer .colgroup {
position: relative;
z-index: 20;
display: block; width: 100%; clear: both; font-size: 0;
}
#footer .colgroup .col {
display: inline-block; width: 50%; font-size: 1rem;
}
#footer .col:nth-child(1){
text-align: left;
}
#footer .col:nth-child(2){
text-align: right;
}
#footer .tmk-logo {
display: block; text-align: left;
}
#footer ul {
display: inline-block;
list-style-type: none;
margin: 0px; padding: 0px;
vertical-align: middle;
}
#footer ul li {
display: inline-block;
vertical-align: middle;
margin-left: 10px;
}
#footer ul.social-channels > li a,
#footer ul.social-channels > li a:hover {
background-size: 100%;
padding: 0px;
}
#footer ul.social-channels > li:nth-child(2) {
display: block; clear: both;
width: 100%;
margin: 0px; margin-top: 10px;
}
#footer ul.social-channels > li:nth-child(2) ul {
display: inline-block;
margin: 0px; padding: 0px; list-style-type: none;
}
#content {
display: block;
box-sizing: border-box;
margin-top: 120px; /* 170px header.height - 50px = #primary-nav.height */
margin-bottom: 200px;
min-height: 550px;
position: relative;
z-index: 5000;
opacity: 1;
padding-bottom: 20px;
width: 100%;
}
#content-container {
-webkit-box-shadow: 0 0 20px 0 rgba(0,0,0,0.15);
box-shadow: 0 0 20px 0 rgba(0,0,0,0.15);
position: relative;
-webkit-border-radius: 10px;
border-radius: 10px;
margin-top: 20px;
padding: 20px;
/*
color: #686c70;
*/
z-index: 5000;
}
#content-container::before {
display: block; width: 100%; height: 100%;
content: "";
position: absolute; top: 0px; left: 0px;
box-sizing: border-box;
z-index: -1;
border: 1px solid #c6d8d9;
background-color: #fff;
opacity: 0.85;
-webkit-border-radius: 10px;
border-radius: 10px;
}
/*
#content-container::after {
display: block;
width: 100%; height: 100%;
padding: 10px;
border: 10px solid #6c010b;
-webkit-border-radius: 20px;
border-radius: 20px;
content: "";
position: absolute;
z-index: -1;
opacity: 0.5;
top: -20px; left: -20px;
}
*/
.page-features {
display: block; width: 100%; box-sizing: border-box; clear: both;
font-size: 0;
}
.page-features .col {
font-size: 1rem;
}
.page-features .col:nth-child(1){
width: calc(100% - 200px);
}
.page-features .col:nth-child(2){
width: 200px;
}
ul.crumbs {
display: block; text-align: left;
box-sizing: border-box;
list-style-type: none; margin: 0px; padding: 20px;
clear: both;
}
ul.crumbs li {
display: inline-block;
text-align: left;
margin-left: 15px;
position: relative;
}
ul.crumbs li:not(:last-child)::after {
content: "/";
display: inline-block;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
right: -10px;
}
ul.crumbs li:first-child {
margin-left: 0px;
}
.page-banner {
display: block; width: 100%;
height: 500px;
padding: 0px; margin: 0px;
box-sizing: border-box;
position: relative;
border-bottom: 5px solid #0d9948;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.page-banner .opacity {
display: block; width: 100%; height: 100%;
box-sizing: border-box; background-color: #fff;
content: ""; opacity: 0;
-webkit-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
.page-banner .page-banner-title {
display: inline-block;
box-sizing: border-box;
padding: 40px;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
left: 100px;
}
.page-banner .page-banner-title::after {
display: block; width: 100%; height: 100%; content: "";
box-sizing: border-box;
background-color: #fff;
opacity: 0.5;
position: absolute; top: 0px; left: 0px;
z-index: -1;
}
.page-banner-title span {
font-family: "Homenaje", Helvetica, Arial, "sans-serif";
color: #fff;
font-size: 2.4rem;
text-shadow: #000 1px 0 10px;
}
/* Badge/Logo */
#badge {
display: block; width: 350px; height: 350px;
-webkit-border-radius: 350px;
border-radius: 350px;
border: 5px solid #199847;
background-color: #e5e5e5;
text-transform: uppercase;
position: absolute;
top: 50%; right: 100px;
-webkit-transform: translateY(-45%);
transform: translateY(-45%);
z-index: 100;
-webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,0.5);
box-shadow: 0 0 15px 0 rgba(0,0,0,0.5);
text-align: center;
box-sizing: border-box; padding: 25px; padding-top: 50px;
}
#badge.is-image {
padding: 0px; border: 0px;
background-color: transparent !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
#badge.is-image img {
max-width: 100%;
}
#badge .primary-sponsor {
max-width: 80%;
margin: 0px auto;
}
#badge .primary-sponsor img {
max-width: 100%;
}
#badge h2 {
font-size: 2.2rem; font-weight: bolder;
display: block; text-align: center;
box-sizing: border-box; width: 100%; line-height: 120%;
}
#badge span {
display: inline-block !important; margin: 0px; padding: 0px;
line-height: 120%; clear: none !important; width: auto !important;
font-size: 1rem;
}
#badge span:nth-child(1){
font-weight: bolder;
}
#badge h2 span {
font-size: 2rem;
}
#badge h2 sub {
display: block; width: 100%; font-size: 1.4rem; line-height: 120%;
}
#badge h2 sub em {
font-style: normal;
}
.page-title {
font-family: "Homenaje", Helvetica, Arial, "sans-serif";
text-transform: uppercase;
color: #199847;
display: block; width: 100%; clear: both;
box-sizing: border-box;
line-height: 120%; padding: 10px;
text-align: center;
}
#debug-panel {
position: fixed;
overflow: auto;
height: 100%;
width: 30vw;
padding: 10px;
box-sizing: border-box;
top: 0px; right: 0px;
z-index: 10000;
}
#debug-panel::after {
display: block; width: 100%; height: 100%;
background-color: #fff;
opacity: 0.5;
content: "";
position: absolute;
top: 0px; left: 0px;
z-index: -1;
}
/* LAYOUT
------------------------------------------ */
/* Map Widget */
ul#directions-data {
display: block; width: 100%; clear: both; list-style-type: none;
margin: 0px; padding: 10px; box-sizing: border-box;
font-size: 0; vertical-align: middle;
}
ul#directions-data > li {
font-size: 1rem; display: inline-block;
vertical-align: middle;
margin-left: 10px;
}
ul#directions-data > li:first-child {
margin-left: 0px;
}
ul#directions-data > li input {
width: 400px;
}
ul#directions-data > li input[name=dir_to] {
display: none;
}
#dir-clear {
display: none;
color: #fff;
text-decoration: none;
font-size: 0.8rem; font-weight: bolder; text-transform: uppercase;
padding: 0px 10px;
background-image: url('../images/static/close-icon-white.svg');
background-size: contain;
background-position: center right;
background-repeat: no-repeat;
padding-right: 25px; line-height: 100%;
vertical-align: middle;
}
#dir-clear:hover {
text-decoration: none;
}
.directions-panel {
display: none;
text-align: left;
margin: 0px auto;
}
/* MODALS
------------------------------------------- */
.spinner {
width: 40px;
height: 40px;
position: relative;
/*
margin: 100px auto;
*/
}
.double-bounce1, .double-bounce2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #333;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
-webkit-animation: sk-bounce 2.0s infinite ease-in-out;
animation: sk-bounce 2.0s infinite ease-in-out;
}
.double-bounce2 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
@-webkit-keyframes sk-bounce {
0%, 100% { -webkit-transform: scale(0.0) }
50% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bounce {
0%, 100% {
-webkit-transform: scale(0.0);
transform: scale(0.0);
} 50% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
}
#modal-mask {
/* display: none; *//* Revealed with JS */
visibility: hidden;
width: 100%;
height: 100%;
position: fixed;
top: 0px; left: 0px;
background: rgba(255,255,255,0.75);
z-index: 300000000;
-webkit-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
.modal-show ~ #modal-mask {
visibility: visible;
opacity: 1;
}
.modal {
max-width: 90vw;
max-height: 90vh;
position: fixed;
z-index: 400000000;
top: 50%; left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1300px;
-moz-perspective: 1300px;
perspective: 1300px;
}
a.modal-close {
display: block;
width: 30px; height: 30px;
cursor: pointer !important;
position: absolute;
top: -35px;
right: 0px;
/*
right: 5px;
background-color: #1e94f9;
*/
-webkit-perspective: 30px;
perspective: 30px;
}
a.modal-close:hover {
border-bottom: 0px; text-decoration: none;
}
.bk-flip-fx {
display: block; width: 100%; height: 100%;
background-color: #4e574d;
-webkit-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
a.modal-close .bk-flip-fx {
background-color: #4e574d;
}
a.modal-close:hover .bk-flip-fx,
a.notify-close:hover .bk-flip-fx {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
#modal-jump a.modal-close {
right: 0px;
}
a.modal-close::before,
a.modal-close::after {
display: block;
width: 80%; height: 3px;
background-color: #fff;
position: absolute;
top: 50%; left: 50%;
-webkit-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
content: "";
}
a.modal-close::before{
-webkit-transform: translate(-50%,-50%) rotate(45deg);
transform: translate(-50%,-50%) rotate(45deg);
}
a.modal-close::after {
-webkit-transform: translate(-50%,-50%) rotate(-45deg);
transform: translate(-50%,-50%) rotate(-45deg);
}
a.modal-close:hover::before,
a.modal-close:hover::after {
-webkit-transform: translate(-50%,-50%) rotate(0deg);
transform: translate(-50%,-50%) rotate(0deg);
}
.modal.modal-show {
visibility: visible;
}
.modal-content-effect {
background-color: #fff;
-webkit-box-shadow: 0 0 80px 0 rgba(0,0,0,0.2);
box-shadow: 0 0 80px 0 rgba(0,0,0,0.2);
width: 100%;
height: 100%;
box-sizing: border-box;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
-moz-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
-ms-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
transform: translateZ(100px) translateX(-30%) rotateY(90deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
transform-origin: 0 100%;
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.modal-show .modal-content-effect {
-webkit-transform: translateZ(0px) translateX(0%) rotateY(0deg);
-moz-transform: translateZ(0px) translateX(0%) rotateY(0deg);
-ms-transform: translateZ(0px) translateX(0%) rotateY(0deg);
transform: translateZ(0px) translateX(0%) rotateY(0deg);
opacity: 1;
}
/* Specific Modals
-------------------------------------------------- */
#asotv-modal video {
width: 100%;
height: auto;
}
#asotv-modal .modal-content {
font-size: 0; line-height: 100%;
}
#hhh-modal {
}
#hhh-modal .modal-content {
display: block;
width: 90vw;
max-width: 550px;
max-height: calc(100vh - 75px);
box-sizing: border-box;
padding: 20px; text-align: left;
font-weight: bolder; font-size: 0.85rem;
line-height: 1.25rem;
letter-spacing: 0.0015rem;
overflow: auto;
}
#hhh-modal h3 {
display: block; width: 100%; clear: both;
box-sizing: border-box; padding: 10px 15px;
color: #fff; background-color: #0d9948;
}
#hhh-modal .headline {
font-size: 1.2rem;
}
.hhh-logo {
text-align: center;
display: block; box-sizing: border-box;
width: 100%;
max-width: 180px; margin: 0px auto;
padding: 20px;
}
.hhh-logo img {
max-width: 100%;
}
#devmode {
display: block; width: 100%; box-sizing: border-box; padding: 20px;
position: fixed; bottom: 0px; left: 0px; z-index: 10000;
margin: 0px;
text-align: center;
-webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);
box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);
}