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

/* ==========================================================================
   RESET
   ========================================================================== */

html {
  color: rgb(56, 57, 56);
  font-size: 1rem;
  line-height: 1.4;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  overflow-x: hidden;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

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

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid rgb(204, 204, 204);
  margin: 1em 0;
  padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: top;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

textarea {
  resize: vertical;
}

img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

sup {
	line-height: 0; 
	vertical-align: 1px;
	font-size: 54%;
}


/* ==========================================================================
   UNIVERSAL
   ========================================================================== */

.flex-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: 100vh;
}

.header-container {
  width: 100%;
  padding: 0 6% 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.header-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  border-bottom: 20px solid rgb(182, 134, 45);
  padding: 0 0 40px;
}

.watermarked {
    font-size: 16px;
    color: red;
}

.logo-container {
  -webkit-box-flex: 1;
  -ms-flex: auto;
  flex: auto;
  padding: 40px 26px 0;
}

nav {
  visibility: hidden;
  padding: 0 26px;
}

nav a {
  display: block;
  text-align: center;
  text-decoration: none;
  padding: 26px 14px 0;
}

.main-container {
  width: 100%;
  max-width: 350px;
}

.main-container header {
  font: bold 17.25px/normal Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.main-container header h1 {
  font-size: 37.25px;
  margin: 0;
}

.main-container h1+span {
  display: block;
  text-align: center;
  font-size: 20px;
  color: rgb(255, 255, 255);
  line-height: 1.25;
  text-transform: uppercase;
  padding: 16px;
}

td {
  vertical-align: top;
}

input[type="text"],
input[type="tel"],
input[type="email"],
.input-style,
select,
.select-style {
  width: 100%;
  border: 1px solid rgb(204, 204, 204);
  padding: .625rem;
}


/* Language BTN: .login input#btnLan
   Preview Email BTN: .btn-container a.button */

input[type="submit"],
.submit-style,
button,
.btn-container a.button,
.login input#btnLan {
  font-size: 16px;
  border: none;
  color: rgb(255, 255, 255);
}

.btn-container {
  text-align: right;
}

.btn-container-center {
  text-align: center;
}

.text-btn,
.btn-container a.button,
.login input#btnLan {
  text-decoration: none;
  font-weight: bold;
  min-width: 176px;
  padding: .625rem;
}

.btn-container a.button,
.login input#btnLan {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  text-align: center;
}

.icon-btn {
  font-size: 20px;
  line-height: 22px;
  width: 60px;
  padding: 0.4em;
}

.warning-email {
  font-weight: bold;
  color: rgb(227, 0, 5);
}

i {
  padding: 0 0 .15em .2em;
}

i.fail {
  padding-left: .5em;
  color: rgb(227, 0, 5);
}

.footer-container {
  width: 100%;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.footer-legal,
.footer-legal a {
  font: normal 10px/1.4 Arial, "Helvetica Neue", Helvetica, sans-serif !important;
}

.footer-legal {
  padding: 20vh 10% 5vh;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}


/* ==========================================================================
   LOGIN
   ========================================================================== */


/* For language button */

.login .flex-container>div:first-child {
  width: 100%;
  text-align: right;
}

.login input#btnLan {
  margin: .5em 10% 0;
}

.login .main-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-flex: 1;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  margin: 16vh auto;
}

.login .logo-rp {
  margin: 48px auto;
}

.login-box {
  border: 3px solid rgb(182, 134, 45);
  padding: 48px 9%;
}

.login-box h1 {
  text-align: center;
  font-size: 37px;
  margin: 0 0 32px;
}

.login-form label {
  display: block;
  text-align: center;
  margin: 0 0 1rem;
}

.login-form p {
  font-size: 11px;
}

.login .text-btn {
  margin: 5px 0 0;
}

.referer.login .footer-container {
  text-align: center;
}


/******** REFEREE ********/

.referee.login .main-container {
  max-width: 400px;
}

.referee.login .logo-rp {
  margin: 16px auto 40px;
}

.referee .login-box {
  padding-left: 10%;
  padding-right: 10%;
}

.referee.login .login-box h1 {
  margin: 0 0 16px;
}

.referee.login .login-box h2 {
  font-size: 20px;
  line-height: 1.25;
  text-align: center;
  font-style: normal;
  margin: 0 0 36px;
}


/* ==========================================================================
   CONFIRM
   ========================================================================== */

.confirm .main-container {
  max-width: 366px;
  padding: 5vh 0;
}

.confirm .main-container h1 {
  margin: 0 0 13px;
}

.confirm .main-container h1+p {
  margin: 0 0 32px;
}

.customer-info tr td:first-child {
  width: 23%;
  font: bold 15px/2.6666 Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.customer-info input,
.customer-info .input-style {
  margin: 0 0 14px;
}

/*
.customer-info input#province,
.customer-info .input-style#ddlProvince {
  width: 54%;
}

.customer-info input#postal,
.customer-info .input-style#txtPostalCode {
  width: 42%;
}
*/

.customer-opt {
  margin: 28px 0 0;
}

.customer-opt tr td:first-child {
  width: 5% !important;
  line-height: 1.4;
}

.customer-opt label {
  display: inline-block;
  width: 100%;
  font: normal 11px/1.4 Arial, "Helvetica Neue", Helvetica, sans-serif;
  padding: 2px 0 12px;
}

.customer-opt label a {
  font-size: inherit;
}

.customer-opt label span {
  font-weight: bold;
}

.confirm .icon-btn {
  margin: 26px 0 0;
}


/******** REFEREE ********/

.referee.confirm .main-container {
  max-width: 684px;
}

.referee.confirm .main-container header {
  text-transform: none;
}

.referee.confirm .main-container h1 {
  margin: 0 0 16px;
}

.referee.confirm .main-container h1~p {
  margin: 0 0 13px;
}

.referee.confirm .main-container h1~p.text-small {
  font-size: 13px;
  font-weight: normal;
  font-style: normal;
  margin-bottom: 55px;
}

.referee.confirm .customer-info tr td:first-child {
  width: 12%;
  text-transform: none;
}

.referee.confirm input#first-name,
.referee.confirm input#last-name,
.referee.confirm input#city,
.referee.confirm .input-style#txtFirstName,
.referee.confirm .input-style#txtlastName,
.referee.confirm .input-style#txtCity,
.referee.confirm .width-half {
  width: 49%;
}

.referee.confirm .customer-info .table-phone {
  width: 40%;
}

.referee.confirm .customer-info .table-email {
  width: 55%;
}

.referee.confirm .customer-info tr td.td-phone {
  width: 30.375%;
}

.referee.confirm .customer-info tr td.td-email {
  width: 21.75%;
}

.referee.confirm .survey {
  display: block;
  padding: 13px;
  margin-top: 26px;
  background-color: rgb(246, 246, 246);
}

.referee.confirm .survey tr td:first-child {
  width: 57.375%;
  line-height: normal;
  padding: 12px 0;
}

.referee.confirm .survey tr td:last-child {
  padding-bottom: 12px;
}

.referee.confirm .survey p {
  margin-top: .1em;
  line-height: 1.4;
}

.referee.confirm .survey label~p {
  font-weight: normal;
}

.referee.confirm .survey select,
.referee.confirm .survey .select-style {
  -webkit-appearance: none;
  -moz-appearance: none;
}

.referee.confirm .survey select::-ms-expand,
.referee.confirm .survey .select-style::-ms-expand {
  display: none;
}

.referee.confirm .survey select,
.referee.confirm .survey .select-style {
  margin-bottom: 2px;
  background: url(https://www.gmcontent.ca/HostedHTMLEmails/zakStatic/N103722/img/select-arrow.png) top right no-repeat rgb(255, 255, 255);
  background-size: contain;
}

.referee.confirm .survey select[id="interest-1-model"],
.referee.confirm .survey .select-style[id="ddlFutureModel1"] {
  margin-bottom: 14px;
}


/* ==========================================================================
   REFERER: PREVIEW
   ========================================================================== */

.preview .main-container {
  max-width: 576px;
  padding: 5vh 0;
}

.preview .main-container p {
  text-align: center;
}

.preview-email {
  padding: 12px 0 32px;
}


/* ==========================================================================
   REFERER: INVITATION & THANK YOU
   ========================================================================== */

.invite .header-container {
  padding: 0;
}

.invite .header-container,
.invite .main-container {
  max-width: 1210px;
}

.invite .header-nav {
  border: none;
}

.invite .main-container header p {
  font-size: 16.25px;
  margin-top: 48px;
  margin-bottom: 48px;
}

.invite .main-container header p,
.invite-box {
  max-width: 670px;
  margin-left: auto;
  margin-right: auto;
}

.invite .customer-info tr td:first-child {
  width: 15%;
}

.invite .customer-info i.pass,
.invite .customer-info p.revoke {
  color: rgb(182, 134, 45);
}

.invite .customer-info p.revoke {
  float: right;
}

.invite .customer-info input[id^="friend-name"] {
  float: left;
  width: 49%;
}

.invite .customer-info input[id^="friend-email"] {
  float: right;
  width: 49%;
}

.confirm .customer-info td p,
.invite .customer-info td p {
  font-size: 11px;
  line-height: 1;
  margin: 0 0 26px;
  float: left
}

.invite .customer-opt {
  margin: 0;
}

.invite .disclaimer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 16px 0;
  margin: 52px 0 0;
  background-color: rgb(246, 246, 246);
}

.invite .disclaimer p {
  width: 100%;
  max-width: 402px;
  padding: 0 50px;
  border-right: 1px solid rgb(64, 64, 64);
}

.invite .disclaimer p:last-child {
  border: none !important;
}

.invite .disclaimer img {
  max-width: 270px;
  padding: .5em 0 0;
}


/* Thank You */

.thankyou .main-container h1+span {
  font-size: 40px;
  line-height: 1;
}

.thankyou .main-container header p {
  text-transform: none;
  font: normal 15.375px/1.55 Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.thankyou .footer-legal {
  padding: 25vh 10% 5vh;
}


/******** REFEREE ********/

.referee.thankyou .main-container h1+span {
  font-size: 38px;
}

.referee.thankyou .cert-box {
  width: 100%;
  max-width: 852px;
  margin: 46px auto 0;
  border: 3px solid rgb(182, 134, 45);
  background-color: rgb(246, 246, 246);
}

.referee.thankyou .cert-box-inner {
  border: 10px solid rgb(255, 255, 255);
  text-align: center;
  padding: 32px 10px;
}

.referee.thankyou .cert-box-inner h1 {
  font-size: 46px;
}

.referee.thankyou .cert-box-inner p {
  margin-top: 38px;
  margin-bottom: 0;
}

.referee.thankyou .cert-box+p {
  text-align: center;
  margin-top: 32px;
  margin-bottom: 32px;
}

.referee.thankyou .invite-box {
  max-width: 420px;
  text-align: center;
}


/* ==========================================================================
   CHEVROLET
   ========================================================================== */

.chev,
.chev a {
  color: rgb(56, 57, 56);
  font: normal 16px/normal Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.chev input[type="submit"],
.chev .submit-style,
.chev button,
.chev .btn-container a.button,
.chev.login input#btnLan {
  background-color: rgb(182, 134, 45);
}

.chev .logo-rp {
  max-width: 288px;
  font: normal bold 26px/normal Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.chev .text-btn,
.chev .btn-container a.button,
.chev.login input#btnLan,
.chev .main-container header,
.chev .customer-info tr td:first-child {
  font-style: normal;
}

.chev .main-container h1+span {
  background-color: rgb(136, 136, 136);
  padding: 10px;
}

.chev.referee.thankyou .main-container header {
  text-transform: none;
}


/* ==========================================================================
   GMC
   ========================================================================== */

.gmc,
.gmc a {
  color: rgb(0, 0, 0);
  font: normal 16px/normal Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.gmc input[type="submit"],
.gmc .submit-style,
.gmc button,
.gmc .btn-container a.button,
.gmc.login input#btnLan {
  background-color: rgb(206, 32, 47);
}

.gmc .logo-rp {
  max-width: 350px;
  font: bold 26px/normal "Rajdhani", Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.gmc .login-box,
.gmc .header-nav,
.gmc.referee.thankyou .cert-box {
  border-color: rgb(206, 32, 47);
}


/*
.gmc .customer-info tr td:first-child {
  text-transform: uppercase;
}
*/

.gmc .text-btn,
.gmc .main-container header,
.gmc .btn-container a.button,
.gmc.login input#btnLan {
  font-size: 19.75px;
  text-transform: uppercase;
  font-family: "Rajdhani", Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.gmc .text-btn,
.gmc .btn-container a.button,
.gmc.login input#btnLan {
  line-height: 18px;
}

.gmc .main-container h1 {
  font-size: 48px;
}

.gmc .main-container h1+span {
  background-color: rgb(206, 32, 47);
  max-width: 1210px;
  font-size: 19px;
}

.gmc.invite .customer-info i.pass,
.gmc.invite .customer-info p.revoke {
  color: rgb(87, 87, 87);
}

.gmc.referee.login .login-box h2 {
  font: normal bold 23px/1.25 "Rajdhani", Arial, "Helvetica Neue", Helvetica, sans-serif;
}


/* ==========================================================================
   BUICK
   ========================================================================== */

.buick,
.buick a {
  color: rgb(63, 63, 56);
  font: normal 16px/normal Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.buick nav a {
  padding-bottom: 12px;
}

.buick input[type="submit"],
.buick .submit-style,
.buick button,
.buick .btn-container a.button,
.buick.login input#btnLan {
  outline: 1px solid rgb(63, 63, 56);
  outline-offset: -1px;
  color: rgb(63, 63, 56);
  background: url(https://www.gmcontent.ca/HostedHTMLEmails/zakStatic/N103722/img/buick_cutted-corner.png) top right no-repeat rgb(255, 255, 255);
  clip-path: polygon(0 0, calc(100% - 5.75px) 0, 100% 5.75px, 100% 100%, 0 100%);
  /* background-color: rgb(153, 153, 153); */
}

.buick .logo-rp {
  max-width: 350px;
  font: 500 26px/normal Futura, "Trebuchet MS", Arial, sans-serif;
}

.buick .login-box,
.buick .header-nav,
.buick.referee.thankyou .cert-box {
  border-color: rgb(153, 153, 153);
}

.buick .text-btn,
.buick .main-container header,
.buick .btn-container a.button,
.buick.login input#btnLan {
  font-weight: 500;
  text-transform: uppercase;
  font-family: Futura, "Trebuchet MS", Arial, sans-serif;
}

.buick .main-container h1 {
  letter-spacing: 6px;
  font-weight: 500;
}

.buick .main-container h1+span {
  background-color: rgb(153, 153, 153);
  letter-spacing: 1px;
}

.buick.invite .customer-info i.pass,
.buick.invite .customer-info p.revoke {
  color: rgb(138, 21, 56);
}

.buick.referee.login .login-box h2 {
  font: normal normal 20px/1.25 Futura, "Trebuchet MS", Arial, sans-serif;
}

.buick.referee.thankyou .main-container header {
  text-transform: none;
}

.buick.referee.confirm .main-container header h1,
.buick.referee.thankyou .main-container header h1 {
  letter-spacing: 3px;
}

.buick.invite .main-container header p {
  font-size: 16px;
  margin-top: 48px;
  margin-bottom: 48px;
}


/* ==========================================================================
   CADILLAC
   ========================================================================== */

.cad,
.cad a {
  color: rgb(75, 75, 75);
  font: normal 16px/normal Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.cad nav {
  visibility: visible;
}

.cad nav a {
  padding: 16px 14px 40px;
}

.cad.login nav a {
  visibility: hidden;
}

.cad.login .main-container header {
  display: none;
}

.cad.login .flex-container>div:first-child {
  width: 100%;
  text-align: right;
  margin-right: -5%;
}

.cad input[type="submit"],
.cad .submit-style,
.cad button,
.cad .btn-container a.button,
.cad.login input#btnLan {
  background-color: rgb(138, 21, 41);
}

.cad .logo-rp {
  max-width: 258px;
  font: normal 26px/normal "Rajdhani", Arial, "Helvetica Neue", Helvetica, sans-serif;
  margin: 0 !important;
}

.cad .logo-cad {
  max-width: 98px;
  margin: 26px 0 0;
}

.cad .login-box,
.cad .header-nav,
.cad.referee.thankyou .cert-box {
  border-color: rgb(200, 200, 200);
}

.cad .header-nav {
  border-width: 7px;
}

.cad .text-btn,
.cad .main-container header,
.cad .btn-container a.button,
.cad.login input#btnLan {
  font-size: 19.75px;
  font-weight: normal;
  text-transform: uppercase;
  font-family: "Rajdhani", Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.cad .text-btn,
.cad .btn-container a.button,
.cad.login input#btnLan {
  line-height: 18px;
}

.cad .main-container h1 {
  font-weight: normal;
  font-size: 48.125px;
}

.cad.login .main-container h1 {
  padding-top: 16px;
}

.cad.invite .customer-info i.pass,
.cad.invite .customer-info p.revoke {
  color: rgb(75, 75, 75);
}

.cad.referee.login .login-box h2 {
  font: normal normal 23.625px/1.25 "Rajdhani", Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.cad.referee.confirm .customer-info tr td:first-child {
  font-weight: normal;
}

.cad.referee.confirm i.fail,
.cad.referee.confirm .warning-email {
  color: rgb(138, 21, 41);
}

.cad .main-container h1+span {
	display: none;
}

.cad.invite .main-container header p {
  font-size: 17.25px;
  margin-top: 48px;
  margin-bottom: 48px;
}


/* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */

@media (max-width: 744px) {
  .header-nav .logo-container {
    padding-left: 0;
    padding-right: 0;
  }
  .header-nav .logo-rp,
  .header-nav nav {
    margin: 0 auto;
  }
  .header-container,
  .main-container {
    padding-left: 5% !important;
    padding-right: 5% !important;
  }
  .main-container header h1 {
    font-size: 40px !important;
  }
  .main-container h1+span {
    font-size: 16px !important;
    letter-spacing: 0;
  }
  .customer-info tr td {
    width: 100% !important;
    float: left;
  }
  .customer-opt tr td:first-child {
    width: 6% !important;
  }
  .customer-opt tr td:last-child {
    width: 94% !important;
  }
  /* Login */
  .login .main-container {
    margin: 0 auto;
  }
  .login .logo-rp {
    margin-top: 40px !important;
  }
  /* Invite */
  .invite .disclaimer {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .invite .disclaimer p {
    border: none;
  }
  /* Brands */
  .chev .main-container header h1 {
    font-size: 33px !important;
  }
  .buick .main-container header h1 {
    letter-spacing: 0;
  }
  .cad.login .logo-rp {
    margin-top: 0 !important;
  }
  /******** REFEREE ********/
  .referee .main-container header h1 {
    font-size: 33px !important;
  }
  .referee.thankyou .invite-box button,
  .referee.thankyou .invite-box a {
    float: none;
    margin-bottom: 12px;
  }
}