/* RACQ AGM - Base Styles
Blue: 00539a
light Blue: 47B0AE
*/

/* Base
*/


@import url('/FormBuilder/_Resource/_module/plugin/normalize.css');
@import url('/FormBuilder/_Resource/_module/plugin/skeleton.css');
@import url('/FormBuilder/_Resource/_module/plugin/font-awesome.min.css');

html { font-size: 62.5%; height: 100%; }
body { font-size: 14px; font-family: Arial, Helvetica, sans-serif; font-weight:400; color: #444444; height: 100%; line-height:1.5em; background: #FFFFFF; height: 100%; }
#wrapper { width: 100%px; margin: 0 auto;}

/* Classes
-------------------------------------------------- */
.active { border-top-color: #003478 !important; }
.nav-active { background: #003478 !important; }
.mobile-active { -ms-transform: translateX(271px); -webkit-transform: translateX(271px); transform: translateX(271px); }
.gradient-active { -moz-opacity: 1 !important;
-khtml-opacity: 1 !important;
opacity: 1 !important;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100) !important;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100) !important;
filter:alpha(opacity=100) !important;
visibility:visible; }

/* Typography
--------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {  margin: 0 0 0.5em 0; padding: 0; font-weight: 900; line-height: 1.2; }
h1 { font-size: 35px; color: #47B0AE; }
h2 { font-size: 32px; color: #003478; font-weight: normal; font-family: Arial, Verdana, Helvetica, sans-serif; line-height: 1; }
h3 { color: #003478; font-size: 24px; font-family: Arial, Verdana, Helvetica, sans-serif; font-weight: normal; }
h4 { font-size: 17px; border-bottom:1px solid #4d4d4d; padding-bottom: 5px; font-family:arial, Verdana, Helvetica, sans-serif; font-weight: normal; color:#003478; }
h5 { font-size: 15px; }
h6 { font-size: 10px; }
p { margin-top: 0; }

/* Links */
a { color: #003478; outline: none; text-decoration: underline;  text-decoration: none; -webkit-transition-duration: 250ms; -moz-transition-duration: 250ms; -o-transition-duration: 250ms; transition-duration: 250ms; -webkit-transition-property: color, background-color, border-color; -moz-transition-property: color, background-color, border-color; -o-transition-property: color, background-color, border-color; transition-property: color, background-color, border-color; -webkit-tap-highlight-color: rgba(0,0,0,0); }
a:hover { color: #006eff; }
a span { display: none; }


/* Primary Header - branding
--------------------------------------------------------*/
#mobileMenuBtn {display: none; position: absolute; cursor: pointer; top:0; height: 100%; left: 0; width: 50px; background: white; }
#mobileMenuBtn span { display: none;}
#mobileMenuBtn:after { content: "\f0c9"; font-family: 'FontAwesome'; font-size: 25px; position: absolute; top: 50%; margin-top: -10.5px; margin-left: -10.5px; color: #003478; left: 50%; }
#mobileMenuBtn:hover { background:#003478; }
#mobileMenuBtn:hover:after { color: white; }
div#mobileMenuBtn:before { content: ' '; display: block; position: absolute; z-index: 1; left: 49px; top: 50%; width: 1px;height: 30px; margin-top: -15px;  background-color: #b2c2d6; }
div#mobileMenuBtn:hover:before { display:none; }
.nav-active.selected:after { color: white !important; }
.nav-active.selected:before { display: none !important; }

.branding { box-sizing: border-box; position: relative; z-index: 999; width: 100%; }
.branding .logo-row { padding: 17.5px 53px; *width: 250px !important; position: relative; }
.row.logo-row.four.columns { height: 78px; }
#logo { background: url(/FormBuilder/_Resource/_module/BZjt4-8LEU6ESDjG0Z9DvQ/images/logo.png) no-repeat 0 0px; display: block; height:39px; margin-top: 4px; margin-bottom: 3px; width: 100%; min-width: 149px; }

.row.logo-row .eight.columns { text-align: right; position: absolute; right: 54px; top: 50%; margin-top: -17.5px; }
.row.logo-row .eight.columns span { color: #003478; font-size: 35px; font-family: Arial, Verdana, Helvetica, sans-serif; font-weight: normal; line-height: 1; }

/* Primary Header - Main Navigation
--------------------------------------------------------*/
.navigation { background: #FFFFFF; }
.nav { float: left; margin: 0; text-align:left; background: #ffe600; display:block; width: 100%; padding: 0; }
.nav li { float: left; list-style: none; margin: 0; padding: 0; cursor: pointer;  zoom: 1; margin-left: 30px; }
.nav li.menu-first { margin-left: 53px; }
.nav li a { color: #003478; text-decoration: none; padding: 13px 0 20px 0; z-index: 999; display: block; cursor: pointer; border-top: 7px solid transparent; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 17px;}
.nav li a:hover {/* border-top-color:#003478; */}
li.menu-first a { padding-left: 0; }
a.nav-item:hover {color:#003478;/* border-top: 7px solid #003478; */}

/* Mobile Navigation
--------------------------------------------------------*/
.wrap { position: relative; -webkit-transition: -webkit-transform 400ms ease; -moz-transition: -moz-transform 400ms ease; -o-transition: -o-transform 400ms ease; transition: transform 400ms ease; padding-bottom: 75px; }
.mobile-nav { display: none; position: absolute; width: 270px; padding: 0; margin: 0; z-index: 100; top: 0; height: 100%; bottom: 0; border-right: 1px solid #d9d9d9; -ms-transform: translateX(-271px); -webkit-transform: translateX(-271px); transform: translateX(-271px); }
.mobile-nav ul.nav { padding: 0; height: 100%; text-align: left; background: #fff; }
.mobile-nav ul li { margin:0;  border-top: 1px solid #e5e5e5; }
.mobile-nav ul li a { margin:0; border: none; padding: 0; color: #003478; border-left: 5px solid transparent; padding: 14px; }

/* Primary Page content
--------------------------------------------------------*/
.gradient-bg { display: none; position: absolute; top:0; bottom: 0; width: 100%; z-index: 100; -moz-opacity: 0.00;
-khtml-opacity: 0.00;
opacity: 0.00;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=0);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
filter:alpha(opacity=0); /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.8+0,0.8+100 */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjgiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjgiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -moz-linear-gradient(top,  rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.8) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.8)), color-stop(100%,rgba(0,0,0,0.8))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.8) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.8) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.8) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.8) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc000000', endColorstr='#cc000000',GradientType=0 ); /* IE6-8 */
-webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-transition: opacity 400ms;
  -moz-transition: opacity 400ms;
  -o-transition: opacity 400ms;
  transition: opacity 400ms; }
.page-content { background: #FFF; width: 100%; }
.page-content .container { padding-bottom: 75px;  }
.columns.no-margin { margin: 0;}
.hero {width: 100%;margin-bottom: 10px;margin-top: -5%;}
.banner {position: relative;max-width:1410px;margin: 0 auto;max-height: 350px;overflow: hidden;}
.gradient { float: left; width: 100%; height: 100%; position: absolute; }
 h1.banner-h1 { position: absolute; bottom: 0; left:0; z-index: 5; padding: 40px 54px; margin-bottom: 0; font-family: Arial, Verdana, Helvetica, sans-serif; font-weight: normal; -webkit-font-smoothing: antialiased; font-size:45px; color: white; text-shadow: 1px 1px 3px rgba(0,0,0,0.62); }

/* Container styles
--------------------------------------------------------*/
.container { max-width: 1410px; }
.four.columns.u-pull-right { margin-bottom: 40px; }
.row.content-row { padding: 40px 53px;  }
.content-wrapper { min-height: 100%; }


/* Footer
--------------------------------------------------------*/
.page-footer{ background: #e6edf2; box-sizing: border-box; font-size: 0.8em; color: #4b5869; padding-top: 1.5em; text-align: center; position: relative; height: 75px; margin-top: -75px; clear: both; /* sticky footer */ }
p.copyright { margin: 0;}
p.copyright a { color: #4b5869;}


/* HIPPO Forms */

/******************* Forms **********************/
.step .row {clear: both; margin: 1em 0;}
.row label {display:inline-block; *display: inline;zoom: 1;width: 150px;padding:5px 10px 0 0;font-weight:bold;vertical-align: top;}
.row .inputFields { display:inline-block; *display: inline; zoom: 1;}
    .inputFields label { display: inline; float: none; padding: 0 20px 0 0; text-align: left; width: auto;}
/*.row .inputFields input {margin:5px;float:left;}*/
.row select, .row input.text {padding:5px;margin:0;width:250px;display:inline-block; *display: inline;zoom: 1;border-radius: 3px;border: 1px solid #cdcfd1;background: #f2f2f2;padding: 9px 50px 9px 15px;}
.row input.text:focus {border-color: #003478;}
.row select { width: 262px;}
.row input.text.tiny {width:150px;}
.row strong {font-weight:bold;}
.row .hint {display:block; margin-left:0px;color:#666;clear:both;font-size: 12px;}
.row .text { display:inline-block; *display: inline; zoom: 1;}

.row .inputFields input.checkbox {margin:0px 7px 0 0;padding:0;}
.row .SelectApplicationType2, .row .SelectApplicationType3 {*display:inline;}
.row.checkboxFullWidth {padding:2% 0; background: #FFFFFF; border-top: 1px solid #CCC}
.row.checkboxFullWidth .inputFields {width:100%;}
.row.checkboxFullWidth label {width: auto;}


.formNav {padding:20px 0;clear:both;}

/******************* Buttons **********************/

input.next {/* float:right; *//* margin-left: 10px; */}

input.next,
input.back,
.btn {position: relative;display:block;font-weight: bold;padding: 5px 30px;font-size: 15px;color: #fff;border: none;cursor: pointer;background: #ffe600;line-height: 35px;border-radius: 3px;text-decoration: none;color: #003478;transition: background-color 250ms, color 250ms, border-color 250ms;}

input.next:hover,
input.back:hover,
.btn:hover,
.home-btn:hover {text-decoration:none;color: #003478;background-color: #eec22b;}


/* Homepage buttons
a[data-icon="button"]:after { content: "\f138"; position:absolute; font-family: FontAwesome; top:25px; right:20px; font-size: 35px }*/
.home-btn { padding: 20px;}
.home-btn h2 { color: #FFFFFF; margin: 10px 0; padding: 0; display: block; width: 100%;}
.btn-wrap { margin-bottom: 40px; border-radius: 0; }
a.btn.home-btn { border-left: 5px solid transparent; background: #ffe600; color: #003478; font-size: 24px; font-family: Arial, Verdana, Helvetica, sans-serif; font-weight: normal; text-align: center; border-radius: 5px; }
a.btn.home-btn:hover {/* border-left: 5px solid #003478; */background-color: #eec22b;}
a.btn.home-btn:after { content: "\f054"; font-family:FontAwesome; font-size: 19px; position: absolute; right: 15px; }
.four.columns.u-pull-right .btn.home-btn:after { display: none; }
.key-dates-wrap { margin-bottom: 40px; display: none; }
.google-map { display: none; }

/******************* Errors **********************/
.error {clear:both;color:#ee2d24;padding: 20px 0px 20px 50px;position:relative;background: rgba(238, 45, 36, 0.2);margin-bottom: 1em;border-radius: 3px;}
.error h6 { font-size: 16px;}
div.error:before {content: "\f06a";position:absolute;font-family: FontAwesome;font-size: 25px;top:18px;left: 20px;}
div.error ul {margin:0;font-family: Arial, sans-serif;padding-left: 14px;}
div.error li {list-style-type: disc;list-style: disc outside;background:none;padding: 0px;/* margin: 10px 0px 10px 20px; */}
span.error {clear: none;background: none;padding: 0;vertical-align: top;}


/******************* Icons **********************/
.iconLink {background:#eee; padding:10px 0;margin: 15px 0; -webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;}
.iconLink a { background-image: none !important; padding: 10px 15px 10px 70px !important; display:block; position:relative; text-decoration: none; color: #003478;}
    .iconLink a[href*="/DocumentDownload"]:before { content: "\f1c1";  position:absolute; font-family: FontAwesome; top:10px; left:20px; font-size: 35px } /* for PDF icons */
    .iconLink a[href*="print"]:before { content: "\f02f";  position:absolute; font-family: FontAwesome; top:10px; left:20px; font-size: 35px } /* for PDF icons */
    .iconLink:hover a {
  color: #006eff !important;
}
/*** BPAY ***/
#bpayBox { margin: 2em 0;}
#bpayBox label { padding: 0;}
.text { padding: 5px 0;}


/*** Content table ***/
.tablestyle { width:100%; margin: 0 0 1em 0 }
.tablestyle th {background:#003478; font-weight:bold; color:#FFF; padding:10px; text-align:left}
.tablestyle td {padding:10px; border-bottom:1px solid #CCC}

.confirmation { padding:20px 0;}
.confirmation table { width: 80%;}
.confirmation table td {border-bottom:1px solid #CCC; padding:5px;}

.entitlementGrid { margin:0 0 20px 0; width: 80%;}
.entitlementGrid td {border-bottom:1px solid #CCC; padding:5px;}

td.label{font-weight:bold;width: 250px;vertical-align: top;}

/*** FAQ ***/
.QAViewer {margin-bottom:5px;background: #e6ecf0;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.QAViewer .QALink {position:relative;padding:10px 15px 10px 40px !important;display:block;text-decoration: none;color: #003478;}
    .QALink:before { content: "\f054";  position:absolute; font-family: 'FontAwesome'; top:10px; left:10px; font-size: 18px;}
    .open .QALink:before { content: "\f078";  position:absolute; font-family: 'FontAwesome'; top:10px; left:10px; font-size: 18px;}
.QAViewer.open .QALink {}
.QAViewer .QALink:hover {color: #006eff;-webkit-transition: color 0.175s ease-in-out;-moz-transition: color 0.175s ease-in-out;-o-transition: color 0.175s ease-in-out;transition: color 0.175s ease-in-out;}
.QAViewer .answer {padding:10px 10px 10px 40px;}
.QAViewer .answer p {margin:0 0 10px 0;}

/** Confirmation **/
.importantNote { border: 1px solid #ee2d24; padding: 20px; margin: 20px 0; color: #ee2d24; text-transform: uppercase}
.importantNote .fa { font-size: 25px; margin-right: 10px; }
.importantNote strong { display: inline-block; *display: inline; zoom: 1;}



/* Print Styles */
@media print {
    .branding { height: auto !important;}
    .branding .logo-row { padding: 5px 0px !important}
    .branding .logo-row #logo { background-size: 50%}
    .confirmation { padding: 0 0 5px 0 !important}
    .iconLink, a.btn { display: none;}

}




/* Media Queries */

@media (max-width: 767px) {

    /* general */
    #wrapper { width: 100%; margin: 0 auto;}
    .container { clear: both; display: block; margin: 0; width: 100%; padding: 0 4%;}
    .column, .columns { float: none; width: 100% !important; display: block; margin: 0; }
    .page-content { margin: 20px 0;}
    .content-wrap { padding: 0; }
    .gradient-bg { display: block; visibility: hidden; }
    .gradient-bg.gradient-active { visibility: visible; }
    .row.content-row { padding: 0; }
    .eight.columns.no-margin { width: 100% !important; }
    .mobile-nav { display: block; }
    .page-content { box-sizing: border-box; padding: 0 4%; }
    /* Header */

    #mobileMenuBtn { display:block; }
    .branding { padding: 0; border: 0; position:relative; border-bottom: 1px solid #b2c2d6;}
    .branding .logo-row { padding:0; }
    .branding .logo { margin: 0; padding: 25px;}
    #logo { margin:0; background-size: 90px; background-position: center; padding: 5px 0; }

      /* main-nav */
    .navigation { width: 100%; margin: 0; display: none;}
    .nav { position: relative; width: 100%; text-align:center; background: #47B0AE; top: 0px; margin: 0; padding: 1em 0px }
    .nav li {  display: block; width: 100%; margin: 0 !important; }
    .nav li a { border-top: 1px solid #ABABAB; margin: 2px 5px; color: #FFFFFF; text-transform:capitalize }
    .nav li a:hover { border-left-color: #003478; border-top: none; color: #003478 }


    /* page-content */
    .main-col h1, .step h3 { font-size: 35px;}
    .inputFields { width: 100% !important; }

      /*footer*/
    p.copyright { text-align:center}

}

@media (max-width: 420px) {
    h1.banner-h1 { font-size: 30px; }
}