/**********************************
 * Fonts
 **********************************/
@font-face{font-family:'freelandregular';src:url('../fonts/trial_by_cupcakes_-_freeland-webfont.eot');src:url('../fonts/trial_by_cupcakes_-_freeland-webfont.eot?#iefix') format('embedded-opentype'),url('../fonts/trial_by_cupcakes_-_freeland-webfont.woff2') format('woff2'),url('../fonts/trial_by_cupcakes_-_freeland-webfont.woff') format('woff'),url('../fonts/trial_by_cupcakes_-_freeland-webfont.ttf') format('truetype'),url('../fonts/trial_by_cupcakes_-_freeland-webfont.svg#freelandregular') format('svg');font-weight:normal;font-style:normal;}


/**********************************
 * Basic Elements
 **********************************/
*{position:relative;margin:0;padding:0;outline:none!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-font-smoothing:subpixel-antialiased;text-rendering:optimizeLegibility;}
/**:hover{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}*/
html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
body{background:#fffbfb;color:#000;margin:0;padding:0;font-family:'raleway',sans-serif;font-size:16px;line-height:1.5em;font-weight:500;}
body.noscroll{overflow:hidden;}
html,body{width:100%;height:100%;min-height:100%;}
pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word;}
small{font-size:80%;}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup{top:-.5em;}
sub{bottom:-.25em;}
/*article,footer,header,nav,section{display:block;overflow-x:hidden;}*/
/*article::after,footer::after,header::after,nav::after,section::after{content:'';display:block;clear:both;}*/

a{color:#e43d8a;text-decoration:none;-webkit-transition:all .1s ease-out;-moz-transition:all .1s ease-out;-ms-transition:all .1s ease-out;-o-transition:all .1s ease-out;transition:all .1s ease-out;font-weight:400;}
a:hover{color:#e43d8a;text-decoration:underline;}

a:focus{outline:dotted thin;text-decoration:underline;}
a:active,a:hover{outline:0;text-decoration:underline;}
b,strong{font-weight:800;}
b span,strong span{font-size:125%;color:#e43d8a;}
.clear{clear:both;}
p{font-size:100%;line-height:1.5em;margin:0 0 1.5em;}

blockquote{font-size:100%;border:none;margin:0 2em 1em;padding:0;}

.btn{position:relative;font-family:'raleway',sans-serif;font-weight:500;font-size:100%;border-radius:0;margin:0 .5em 0 0;padding:.6em 1.5em;color:#fff;background:#000;border:solid 1px #000;cursor:pointer;display:inline-block;z-index:1;overflow:hidden;}
.btn:active,.btn:focus,.btn:hover{background:#e43d8a;border:solid 1px #e43d8a;color:#fff;}

.vertical-align{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-align-items:center;-moz-align-items:center;-ms-align-items:center;align-items:center;-webkit-justify-content:center;-moz-justify-content:center;-ms-justify-content:center;justify-content:center;-webkit-flex-direction:center;-moz-flex-direction:center;-ms-flex-direction:center;flex-direction:row;}

h1,h2,h3,h4,h5,h6{font-family:'raleway',sans-serif;margin:0;padding:0;color:#000;font-weight:900;font-style:normal;}
/*h1{font-size:225%;margin:0 0 1em;}*/
/*h2{font-size:225%;margin:0 0 1em;}*/
/*h3{font-size:125%;margin:0 0 1em;}*/
h4{font-size:88.88%;margin:0 0 1em;}



/***********************
 * Project Settings
 ***********************/
html { font-size: 16px; }
body { text-align: center; }
p { margin-bottom: 0.5em; }

h1 { font-family: "freelandregular", cursive; color: #e43d8a; font-size: 3.5rem; font-weight: 400; margin: 0 0 0.2em; }
h2 { font-size: 2rem; margin: 0 0 0.4em; }
h3 { font-size: 1.5rem; margin: 0 0 0.4em; }

h1 span, h2 span, h3 span { color: #e43d8a; }

@media all and (min-width: 1200px) {
  h1 { font-size: 4.5rem; margin: 0 0 0.2em; }
  /* h2 { font-size: 2.25rem; margin: 0 0 0.4em; } */
  h3 { font-size: 1.5rem; margin: 0 0 0.4em; }
}

@media all and (min-width: 1450px) {
  h1 { font-size: 4.5rem; margin: 0 0 0.2em; }
  h2 { font-size: 2.25rem; margin: 0 0 0.4em; }
  h3 { font-size: 1.5rem; margin: 0 0 0.4em; }
}

/*h1.title, h2.title { position:absolute;top:-.2em;left:-.2em;z-index:1;width:110%;text-align:left;font-family:'freelandregular',script;font-weight:400;font-size:937.5%;letter-spacing:0;color:#f980b3;opacity:.5;}*/

img { max-width: 100%; }

.container { width:100%; max-width:1200px; }

.fadeInBlock { opacity: 0; }

.scrollTo { display: block; background: #000; color: #fff; width: 2.5rem; height: 2.5rem; font-size: 1.5rem; padding: 0.25rem 0.5rem 0.75rem; }
.scrollTo:hover, .scrollTo:active, .scrollTo:focus { color: #e43d8a; text-decoration: none; }


/************************
 * Content Sections
 ************************/

header section { display: flex; justify-content: center; align-items: center; padding: 2rem; }
header section { min-height: 50%; min-height: calc(50%); min-height: 50vh; }
header #title { background: url('/images/title-bg.jpg') no-repeat top center / cover; align-self: stretch; color: #fff; }
header #title h2 { color: #fff; font-family: "freelandregular", cursive; font-size: 6rem; line-height: 1; font-weight: 400; margin: 0; }
header #title h2::after { content: ".com.au"; position: absolute; bottom: 0.5rem; right: 1.5em; font-family: 'raleway'; font-size: 1.25rem; font-weight: 800; }
header #stat { background: #fef0f4; }
header #stat img { max-width: 50%; flex-basis: 35%; }
header #intro { background: #fce8ef; padding-bottom: 3rem; flex-direction: column; }

@media all and (max-width: 479px) {
  header #stat { flex-direction: column; }
  header #stat img { margin-bottom: 1rem; }
}

@media all and (min-width: 640px) {
  header #title h2 br { display: none; }
}

@media all and (max-width: 767px) {
  header .scrollTo { display: none; }
}

@media all and (min-width: 768px) {
  header { display: flex; flex-flow: row wrap; justify-content: center; align-items: stretch; min-height: 100%; min-height: calc(100%); min-height: 100vh; }
  header section { flex: 1 0 50%; }
  header #title h2 { font-size: 3.75rem; }
  header #title h2::after { bottom: 0rem; right: 1em; font-size: 1.125rem; }
  header .scrollTo { position: absolute; bottom: 0; left: 50%; margin-left: -1.25rem; }
}

@media all and (min-width: 768px) and (max-width: 991px) {
  header #stat { flex-direction: column; }
  header #stat img { margin-bottom: 1rem; }
}

@media all and (min-width: 992px) {
  header #title h2 { font-size: 5rem; }
  header #title h2::after { bottom: 0.25rem; right: 1.5em; font-size: 1.25rem; }
}

@media all and (min-width: 1200px) {
  header #title h2 { font-size: 6rem; }
  header #stat h2 { margin: 0 0 0 1rem; }
}

@media all and (min-width: 1450px) {
  header #title h2 { font-size: 8rem; }
  header #title h2::after { bottom: 1rem; right: 2em; }
}

/* #content { border-top: 5px solid #e43d8a; } */

#state-list { font-size: 0.875rem; background: #fff; }
#state-list span, #state-list li { display: block; padding: 0.5rem 2rem; white-space: nowrap; cursor: pointer; }
#state-list span { background: #e43d8a; color: #fff; }
#state-list span::after { content: "\00fe40"; line-height: 0; vertical-align: sub; margin-left: 1rem; }
#state-list ul { margin-bottom: 0; max-height: 100vh; overflow: auto; }
#state-list li { background: #fdadca; margin-top: 0.125rem; list-style: none; }
#state-list li.active { background: #000; color: #fff; }

#state-list.fixed { position: fixed; top: 0; left: 0; width: 100%; z-index: 5; }

/* @media all and (max-width: 1199px) {
  #state-list { margin-left: -15px; margin-right: -15px; }
}

@media all and (min-width: 1550px) {
  #state-list { position: absolute; left: 100%; }
} */


.listing { padding-top: 2rem; padding-bottom: 2rem; }
.listing.feature { padding-top: 3rem; }
#listings { margin-left: -1rem; margin-right: -1rem; margin-left: -15px; margin-right: -15px; }
#listings .listing { padding-left: 1rem; padding-right: 1rem; }
.listing h2, .listing h3 { color: #e43d8a; }
.listing img { margin-bottom: 1rem; }
.listing .image { border-radius: 50%; }
.listing .logo { max-width: 60%; }
.listing .btn { margin: 1em 0 0; }


@media all and (max-width: 767px) {
  #listings .listing:nth-child(2n+1) { background: #fde2ec; }
  #listings .listing.visible { background: #fff; }
  #listings .listing.visible.odd { background: #fde2ec; }
}

@media all and (min-width: 768px) {
  .listing.feature { text-align: left; }
  .listing.feature img { margin-bottom: 0; }
  #listings { display: flex; flex-wrap: wrap; }
  #listings .listing { flex: 0 0 50%; }
  /* #listings .listing h3 { min-height: 2.2em; } */
}

@media all and (min-width: 992px) {
  .listing.feature { padding-top: 9rem; }
  #listings .listing { flex-basis: 33.33%; }
}


#content .scrollTo { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 1; }

@media all and (min-width: 768px) {
  #content .scrollTo { bottom: 2.5rem; right: 2.5rem; }
}


/* Footer bar */
footer { background: #e43d8a; color: #fff; font-size: 0.875rem; padding: 1rem 0; }
footer a, footer a:hover, footer a:focus { color: #fff; }

@media all and (max-width: 767px) {
  footer span { display: block; }
}

@media all and (min-width: 768px) {
  footer { margin-top: 5rem; }
  footer span + span { margin-left: 1em; }
}
