/* Reset and "Base" styles */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}header,nav,section,article,aside,footer,hgroup{display:block;}a:hover,input[type=submit]:hover{cursor:pointer;}em{font-style:italic;}sup{font-size:0.9em;line-height:normal;vertical-align:super;}strong { font-weight: bold; }
body > section  { min-width: 960px; position:relative;}
section{width:100%;display:block;*zoom:1;clear:both;}section:before,section:after{content:"";display:table;}section:after{clear:both;}
h1{font-size:3em;}h2{font-size:2em;}h3{font-size:1.5em;}h4{font-size:1.35em;}

.clear{clear:both;}
.narrow{width:38%;display:block;}
.wide{width:58%;display:block;}
.half{width:45%;margin-right:5%;display:block;}
.third{width:30.333333%;margin-right:3%;display:block;}
.onethird{width:30.333333%;margin-right:3%;display:block;}
.twothirds{width:63.333333%;margin-right:3%;display:block;}
.half.right,.onethird.right,.wide.right{margin-right:0;}
.content{width:960px;margin:0 auto;padding:1em 0;*zoom:1;color:white; position:relative;}
.content:before,.content:after{content:"";display:table;}.content:after{clear:both;} /*Clearfixed */
.left{float:left;}
.right{float:right;}

/** Customizations for this page **/
body{ font-size:14px;font-family:"ProximaNova",Calibri,Helvetica,Arial,sans-serif;}

img.full { min-width: 100%; min-height:100%; top:0; right:0; bottom: 0; left: 0; position:absolute; display:block; z-index:0;}

.headline {width: 540px; text-align: center; position: absolute; left: 50%; margin-left: -270px; top: 85px; font-size: 36px; font-family: georgia, serif; color: white;}
.headline span {color: #fbb024;}
.approach {width: 530px; text-align: center; position: absolute; left: 50%; margin-left: -265px; top: 190px; color: white;}

section.seals{background:white;padding:0.5em 0;}
section.seals p { color: #999; font-size: 11px; text-align: center;}
div#form-seals{display:block;width:500px;height:76px;margin:0 auto;}div#form-seals li{display:block;float:left;margin:20px 40px 0 60px;}
div#form-seals li.first{margin:20px 0 0 40px;}
div#form-seals li.last{margin:0;width:125px;height:74px;overflow:hidden;}



#footer a{color:#fff;}
.copyright,.patent{color:#fff;font-size:12px;}
#footer{width:100%;background:#0e0f11;}
#footer #more ul{width:15%;margin-right:5%;margin-bottom:10px;padding:0;float:left;font-size:12px;line-height:15px;}
#footer a{text-decoration:none;color:#fff;}
#footer a:hover{text-decoration:underline;}
#inlinks{background: #0e0f11; padding:8px 0;font-size:14px;}
#inlinks a{height:2em;line-height:2em;text-decoration:none; color:white;}
#inlinks .content{height:32px;line-height:32px;padding:10px 0;}
#inlinks .left a{margin-right:30px;}
#inlinks .right span{margin-right:10px;float:left;height:2em;line-height:2em;}
#inlinks .right a{vertical-align:middle;background:url(../images/flip/sprite.light.jpg) no-repeat;height:33px;width:32px;display:block;float:left;margin-right:2px;}
#inlinks .right a.fb{background-position:-678px -90px;}
#inlinks .right a.tw{background-position:-710px -90px;}
#inlinks .right a.yt{background-position:-742px -90px;}

.gender-overlay{height:255px!important;width:432px!important;background:#2F2F2F;text-align:center;margin:0 auto;padding:40px 45px 0;border-radius:.3em;border: 4px solid #C6C6C8;box-shadow:0px 0px 8px #222}
.gender-overlay button,.gender-overlay a{display:block;cursor:pointer;border:none;padding:4px;}
.gender-overlay .btn-confirm,.gender-overlay .btn-cancel{color:white;font-weight:bold;}
.gender-overlay .btn-confirm{background:#38889F; width: 272px; margin: 20px auto; font-size: 18px; padding: 8px 0px; height:36px;text-align: center;position: relative; overflow:visible;}
.gender-overlay .btn-confirm:after { content: ""; border: 18px solid transparent;border-left-color: #38889f; display:block; position:absolute;top:0;right:-36px;}
.gender-overlay .btn-cancel{ width: 24px; background:none; position:absolute;top: 20px; right: -50px; font-size: 20px;}
.gender-overlay h1, .gender-overlay h2{font-size:26px;color:#FAB023;margin:0;padding:0;text-align:center;}
.gender-overlay h1{font-size:36px; border-bottom:1px dotted white;padding:0 0 20px; margin-bottom: 20px;}
.gender-overlay p{font-size:18px; line-height: 18px; margin:0 0 30px; color:#fff;}
.ui-widget-overlay,.overlay{height:100%;width:100%;background:#fff;left:0;opacity:0.6;position:fixed;top:0;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);filter:alpha(opacity=50);}


/*=====================================
=            TECATE STYLES            =
=====================================*/

/*==========  CONTENTS  ==========*/
/*
    1. Helper Classes

    2. Logo
    3. Login
    4. Header
    5. Form

    6. @media 1024px
    7. @media 1400px
    8. @media 1920px
    */

/*=========================================
=            1. HELPER CLASSES            =
=========================================*/

.animate-headline {
    position: absolute;
    left: 50%;
    z-index:10;
    /*top: 15%;*/
    margin-top: 96px;
    margin-left: -305px;
    animation-duration: 1s;
    animation-name: pushdown;
    animation-direction: normal;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 1s;
    -webkit-animation-name: pushdown;
    -webkit-animation-direction: normal;
    -webkit-animation-fill-mode: forwards;
}

@keyframes pushdown {
    from {
        top: -300px;
        opacity: 0;
    }
    to {
        top: 96px;
        opacity: 1;
    }
}

@-webkit-keyframes pushdown {
    from {
        top: -300px;
        opacity: 0;
    }
    to {
        top: 96px;
        opacity: 1;
    }
}

.button {
    color: #fff;
    font-family:"ProximaNova",arial,helvetica,sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;

    
}

.img-replacement {
  border: 0;
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
}

/*===============================
=            2. LOGO            =
===============================*/

.logo {
    background: url('../images/ko/logo-white.png');
    display: inline-block;
    left: 44px;
    position: absolute;
    top: 21px;
}

.logo a {
    display: inline-block;
    height: 36px;
    width: 178px;
}

/*================================
=            3. LOGIN            =
================================*/

.login {
    color: #fff;
    position: absolute;
    right: 45px;
    width: 240px;
    top: 30px;
}

.login a.button {
    padding: 7px 15px;
    border: 1px solid white;
    font-weight: 300;
    position: absolute;
    right: 0; 
    margin-top: -6px;
}

.login span {
    margin-right: 15px;
    font-size: 14px;
}

/* Language Toggle
============================================================== */
#language-selector {position: absolute; top: 2px; font-size: 14px; left: 73px; transition: all .2s ease;}
nav ul li {width: 75px;}
#language-selector li.opener{background: url(../images/espanol/caret.png) no-repeat center right; background-size: 15%; background-position: 100% 3px;}
#language-selector li a {display: block; width: 100%; transition: all .2s ease; text-transform: uppercase; text-decoration: none; color: #ace1f7;}
nav ul ul {display: none; transition: all .2s ease;}
nav ul ul li {width: 63px; background: #ace1f7; padding: 2px 4px; margin-left: -4px;}
nav ul li:hover > ul {display: block;}
#language-selector ul ul a {transition: all .2s ease; color: #333;}

/*=================================
=            4. HEADER            =
=================================*/

.tecate-headline {
    background-image: url('../images/tecate/headline-low.png');
    height: 82px;
    margin-top: 0;
    width: 610px;
}

#top {
    z-index: 11;
    display: block;
    min-height: 748px;
    overflow: hidden;
}

/*===============================
=            5. FORM            =
===============================*/

.form-container {
    height: 450px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 258px;
    padding: 0 15px 18px;
    position: relative;
    width: 515px;
}

.form-container .shadow-1,
.form-container .shadow-2,
.form-container .regform {
    border-radius: 10px;
    position: absolute;
}

.form-container .regform {
    background: #fff;
    border: 1px solid #afa9a7;
    height: 345px;
    padding: 20px 40px 30px;
    width: 435px;
    z-index: 3;
}

.form-container .shadow-1,
.form-container .shadow-2 {
    top: 18px;
    width: 515px;
}

.form-container .shadow-2 {
    background: rgb(0, 89, 99);
    height: 392px;
    right: 0;
    z-index: 2;
}

.form-container .shadow-1 {
    background: rgba(0, 89, 99, 0.2);
    height: 400px;
    left: 0;
    z-index: 1;
}

.form-container .ribbon {
    background: url('../images/tecate/form-ribbon.png') no-repeat center center;
    height: 57px;
    width: 440px;
}

.form-container h3 {
    margin-bottom: 15px;
}

.form-container .frame {
    float: left;
    padding-left: 58px;
    padding-top: 5px;
    width: 330px;
}

.form-container h5 {
    font-weight: bold;
    color: #514A3E;
    font-size: 14px;
    margin: 0 0 12px 12px;
}

.form-container form {
    overflow: hidden;
}

.form-container.tall .regform { height: 420px;}
.form-container.tall .shadow-1 { height: 485px;}
.form-container.tall .shadow-2 { height: 475px;}


.frame-container {
    width: 200%;
}

/*==========  RegForm  ==========*/

.regform .text {
    width: 100%;
    border: 1px solid transparent;
}

.regform .half .text {
    max-width: 130px;
    overflow: hidden;
}

.regform .text select {
    margin-left: -2px;
    background: transparent;
    border: 0;
    color: inherit;
    font-size: inherit;
    width: 100%;
    height: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    outline: 0;
}


.regform select {
    margin: 0;
}

.regform section {
    margin-bottom: 15px;
}


.regform section div.text {
    overflow:hidden;
    background:url(../images/ft/updownarrow.png) no-repeat 97% center #ffffff;
}

.regform .button {
    background: transparent url(../images/sweetwater/form-button.png) no-repeat;
    border: none;
    box-shadow: none;
    display: block;
    font-size: 1.1em;
    height: 45px;
    line-height: 45px;
    margin: 10px auto 0;
    position: relative;
    text-transform: none;
    width: 228px;
}

.regform .frame {
    transition: all 0.4s ease-in-out;
}
.regform .frame.hidden {
    visibility: hidden;
}
.regform #frame1.frame.hidden {
    margin-left:-400px;
}

.regform .text.invalid { 
    border: 1px solid #bf202f;
    color: #bf202f;
    background: #FCF9CF !important;
    -moz-transition:background 0.4s ease;
    -webkit-transition:background 0.4s ease;
    -ms-transition:background 0.4s linear;
}


.regform .tip {
    font-size: 11px;
    color: #bf202f;
    height: 1em;
    margin: 2px 0 -1em 8px;
    font-weight: bold;
    display: block;
    clear: both;
}

.regform .submitbox {
    text-align: center;
    margin-top: -35px;
}

.regform .submitbox p {
    font-size: 11px;
    color: #999;
    margin-top: 23px;
    font-family: "ProximaNova", sans-serif;
}

.regform hr.dotted {
    border: 2px dotted #ccc;
    border-width: 2px 0 0 0;
    margin: 0 0 14px 0;
}

#regsubmit {
    line-height: 0px;
}

#frame2 .button {
    display:inline-block;
    margin-left: 30px;
}
#frame2 .submitbox a {
    text-decoration: underline;
    color: #1F86A5;
}

/*==========  inline form  ==========*/

.inline-form {
    font-family: Georgia;
    font-size: 16px;
}

.inline-form .button {
    margin-top: 40px;
}

.inline-input .text.select-wrapper {
    background: url(../images/tecate/dd-arrow.png) no-repeat right -1px #ffffff;
    height: 22px;
}
.regform .inline-input .text select { padding-left: 4px; }

.inline-form .inline-input {
    display: inline-block;
    position: relative;
    vertical-align: bottom;
}

.inline-form .inline-input.large {
    width: 160px;
}

#frame2 .inline-input.large {
    width: 170px;
}

.tecate-frame#frame2 [name="emailAddress"],
.tecate-frame#frame2 [name="password"],
.tecate-frame#frame2 #foundcontainer {
    width: 100%;
}

#frame2 [name="emailAddress"] {
    width: 286px;
}

#frame2 [name="password"] {
    width: 167px;
}

#frame2 #foundcontainer {
    width: 213px;
}

.inline-form .medium,
.inline-form .medium .select-wrapper {
    width: 100px;
}


.inline-form .paragraph {
    color: #666666;
    margin-bottom: 30px;
    line-height: 22px;
}

.inline-form .small {
    width: 60px;
}

.inline-form .small select {
    width: 70px;
}

.inline-form select {
    background: transparent;
    border: none;
    border-bottom: 1px solid #8c8c8c;
    border-radius: 0;
    color: inherit;
    font-family: Georgia, serif;
    font-size: 14px;
    height: 100%;
    text-align: center;
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    outline: 0;
    text-indent: 0.01px;
    text-overflow: '';
}

#country-container {
    width: 125px;
}

#country-container .select-wrapper {
    width: 100%;
}

.inline-form select[name="country"] {
    text-align: left;
    width: 100%;
}

.inline-form select[name="gender"],
.inline-form select[name="gender2"] {

}

.inline-form input.text {
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid #8c8c8c;
    font-family: Georgia, serif;
    font-size: 14px;
    /*height: 30px;*/
    padding-left: 0;
    text-align: center;
}

.inline-form .text.invalid {
    background: #ffffcc;
    border-color: #ff3333;
    color: #ff3333;
}

.inline-form .text.valid {
    border-bottom: 1px solid #8c8c8c;
}

.inline-form  .frame {
    padding-left: 0;
    padding-top: 15px;
    width: 435px;
}

.inline-form #frame1.frame.hidden {
    margin-left: -435px;
}

.inline-form .tip {
    color: #ff0000;
    font-family: "ProximaNova", serif;
    font-weight: lighter;
    margin-left: 0;
    text-transform: lowercase;
    line-height: 1em;    
}

.inline-form .select-wrapper {
    border-bottom: 1px solid #8c8c8c;
}

/*==========  COVER IMAGE CSS  ==========*/
/* Ignore img.full when background-size property is supported */
.backgroundsize #top .full {
  display: none;
}

.backgroundsize #top,
.no-backgroundsize #top .full {
  background-size: cover;
}

.backgroundsize .tecate-page#top {
  background: url(../images/sweetwater/sweetwater-couples.jpg) no-repeat top center;
  background-size: cover;
}

/* Fallback img.full when background-size property is not supported */
.no-backgroundsize #top .full {
  display: block;
  height: 100%;
  width: 100%;
}

/*========================================
=            6. Dogfish Tests            =
========================================*/
.ehplus {
    width: 100%;

}

.dogfish-active {
    height: 410px!important;
}

.shadow-height {
    height: 465px!important;
}
/*========================================
=            6. @media 1024px            =
========================================*/

@media screen and (min-width: 1024px) {
    

}

/*========================================
=            7. @media 1400px            =
========================================*/

@media screen and (min-width: 1400px) {

    .tecate-headline {
        margin-top: 28px;
    }

    .login {
        right: 105px;
        top: 44px;
    }
    
    .logo {
        top: 30px;
        left: 100px;
    }

    .form-container {
        margin-top: 237px;
    }
}

/*========================================
=            8. @media 1920px            =
========================================*/

@media screen and (min-width: 1920px) {

    .tecate-headline {
        background-image: url('../images/tecate/headline-high.png');
        height: 111px;
        margin-left: -381px;
        margin-top: 68px;
        width: 762px;
    }

    .login {
        right: 203px;
        top: 45px;
    }
    
    .logo {
        top: 30px;
        left: 100px;
    }

    .form-container {
        margin-top: 326px;
    }
}

/* Tooltip 
============================================================== */
.tooltip {
  background:#1e5969;
  color:#FFF;
  display:none;
  font-family:"ProximaNova", sans-serif;
  font-size:13px;
  margin-top:-42px;
  padding:15px 28px;
  position: absolute;
  right:-260px;
  width:230px;
}
.tooltip::before {
  content:" ";
  display:block;
  left:-14px;
  position:absolute;
  top:18px;
  width: 0; 
  height: 0; 
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;  
  border-right:14px solid #1e5969; 
}

/* Sweetwater Data CSS
============================= */
#data-area{ text-align: center; color: white; box-sizing: border-box;}
.data-ribbon{ height: 45px; line-height: 48px; width: 160px; margin: 0 auto -8px; position: relative; background: url(../images/sweetwater/data-ribbon.png); font-size: 28px; text-shadow: 1px 1px 0px #be851b;}
.in-your-area { width: 385px; margin: 0 auto; height: 40px; line-height: 48px; font-size: 18px; text-transform: uppercase; background: #a12847;}