.row {
    margin: 0 auto;
    max-width: 85rem;
    width: 100%;
}
.contain-to-grid .top-bar {
    margin: 0 auto;
    margin-bottom: 0;
    max-width: 85rem;
}
.column + .column:last-child, .columns + .column:last-child, .column + .columns:last-child, .columns + .columns:last-child {
    float: left;
}
/*// Small screens*/
@media only screen { } /* Define mobile styles */

@media only screen and (max-width: 46.125em) {
  .top-bar .icc{float: none;
    background-size: 100%;
  width: 2.7em;
height: 2.7em;}
  .site-description{color:#fff;
      width: 100%;
      font-size: 2em;
      font-weight: 700;
      text-transform: uppercase;
      line-height: 1em;}
#banner-area{padding-bottom: 2em;}
  .banner-content{color:#fff;width: 100%;position: none; padding-top: 1.5em; padding-left: 1.5em;}
  .banner-content p{font-size: 1.2em;}

  .imaginelogo{
    height: 320px;
    background: url(images/imagine-invercargill-logo.png) no-repeat center center;
    background-size: 60%;}

  .footer-logo.icc{background-size: 78%;
    background-position-x: right;
    background-position-y: 1.1em;}
  .footer-logo {

      position: absolute;
      bottom: 0em;
      right: 1em;
  }
  } /* max-width 640px, mobile-only styles, use when QAing mobile issues */

// Medium screens
@media only screen and (min-width: 46.688em) {
  .top-bar .title-area {
      float: left;
      display: none;
  }

  .site-description{color:#fff;
      width: 75%;
      font-size: 2em;
      font-weight: 700;
      text-transform: uppercase;
      line-height: 1em;}

  .banner-content{color:#fff;width: 70%;position: absolute; top: 1em; left: 1.5em;}
  .banner-content p{font-size: 1.2em;}

  .imaginelogo{
    height: 320px;
    background: url(images/imagine-invercargill-logo.png) no-repeat center center;
    background-size: 60%;}


.footer-logo{position: absolute; bottom: 1em; right: 2em;}
.carousel-1{width: 18%;}
.carousel-2{width: 35%;}
.carousel-3{width: 52%;}
.carousel-4{width: 70%;}
.carousel-5{width: 90%;}

 } /* min-width 641px, medium screens */

 @media only screen and (min-width: 46.688em) and (max-width: 64em) and (orientation : portrait) {
   .medium-4 {
    width: 33.33333%;
}
.medium-8 {
    width: 64.66667%;
}
   .banner-content {
    color: #fff;
    width: 77%;
    position: absolute;
    top: 1em;
    left: 1.5em;
}

.top-bar .title-area {
  float: left;
  display: none;
}

.site-description{color:#fff;
  width: 75%;
  font-size: 2em;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1em;}


.banner-content p{font-size: 1.2em;}

.imaginelogo{
height: 320px;
background: url(images/imagine-invercargill-logo.png) no-repeat center center;
background-size: 60%;}

.footer-logo{position: absolute; bottom: 1em; right: 2em;}

}


@media only screen and (min-width: 46.688em) and (max-width: 64em) and (orientation:landscape) {
  .top-bar .title-area {
    float: left;
    display: none;
}

.site-description{color:#fff;
    width: 75%;
    font-size: 2em;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1em;}

.banner-content{color:#fff;width: 48%;position: absolute; top: 2em; left: 2.5em;}
.banner-content p{font-size: 1.2em;}

.imaginelogo{
  height: 320px;
  background: url(images/imagine-invercargill-logo.png) no-repeat center center;
  background-size: 60%;}

.footer-logo{position: absolute; bottom: 1em; right: 2em;}
.carousel-1{width: 18%;}
.carousel-2{width: 35%;}
.carousel-3{width: 52%;}
.carousel-4{width: 70%;}
.carousel-5{width: 90%;}
} /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */

// Large screens
@media only screen and (min-width: 64.063em) {
  .top-bar .title-area {
      float: left;
      display: none;
  }

  .site-description{color:#fff;
      width: 75%;
      font-size: 4.2em;
      font-weight: 700;
      text-transform: uppercase;
      line-height: 1em;}

  .banner-content{color:#fff;width: 50%;position: absolute; top: 4em; left: 4.5em;}
  .banner-content p{font-size: 1.4em;}

  .imaginelogo{
    height: 320px;
    background: url(images/imagine-invercargill-logo.png) no-repeat 7em 3em;
    background-size: 60%;}

.footer-logo{position: absolute; bottom: 1em; right: 2em;}
.carousel-1{width: 18%;}
.carousel-2{width: 35%;}
.carousel-3{width: 52%;}
.carousel-4{width: 70%;}
.carousel-5{width: 90%;}

} /* min-width 1025px, large screens */

@media only screen and (min-width: 64.063em) and (max-width: 90em) {
  .top-bar .title-area {
    float: left;
    display: none;
}

.site-description{color:#fff;
    width: 75%;
    font-size: 4.2em;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1em;}

.banner-content{color:#fff;width: 50%;position: absolute; top: 4em; left: 4.5em;}
.banner-content p{/*font-size: 1.4em;*/font-size: 1.2em;}
.banner-content .widget a{color:#EF7C08;}
.banner-content .widget a:hover{text-decoration:underline;}
.imaginelogo{
  height: 320px;
  background: url(images/imagine-invercargill-logo.png) no-repeat 7em 3em;
  background-size: 60%;}

.footer-logo{position: absolute; bottom: 1em; right: 2em;}
.carousel-1{width: 18%;}
.carousel-2{width: 35%;}
.carousel-3{width: 52%;}
.carousel-4{width: 70%;}
.carousel-5{width: 90%;}

 } /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */

// XLarge screens
@media only screen and (min-width: 90.063em) {
  .top-bar .title-area {
      float: left;
      display: none;
  }

  .site-description{color:#fff;
      width: 75%;
      font-size: 4.2em;
      font-weight: 700;
      text-transform: uppercase;
      line-height: 1em;}

  .banner-content{color:#fff;width: 50%;position: absolute; top: 4em; left: 4.5em;}
  .banner-content p{font-size: 1.4em;}

  .imaginelogo{
    height: 320px;
    background: url(images/imagine-invercargill-logo.png) no-repeat 7em 3em;
    background-size: 60%;}

.footer-logo{position: absolute; bottom: 1em; right: 2em;}
.carousel-1{width: 18%;}
.carousel-2{width: 35%;}
.carousel-3{width: 52%;}
.carousel-4{width: 70%;}
.carousel-5{width: 90%;}
 } /* min-width 1441px, xlarge screens */

@media only screen and (min-width: 90.063em) and (max-width: 120em) {
  .top-bar .title-area {
      float: left;
      display: none;
  }

  .site-description{color:#fff;
      width: 75%;
      font-size: 4.2em;
      font-weight: 700;
      text-transform: uppercase;
      line-height: 1em;}

  .banner-content{color:#fff;width: 50%;position: absolute; top: 4em; left: 4.5em;}
  .banner-content p{font-size: 1.4em;}

  .imaginelogo{
    height: 320px;
    background: url(images/imagine-invercargill-logo.png) no-repeat 7em 3em;
    background-size: 60%;}

.footer-logo{position: absolute; bottom: 1em; right: 2em;}
.carousel-1{width: 18%;}
.carousel-2{width: 35%;}
.carousel-3{width: 52%;}
.carousel-4{width: 70%;}
.carousel-5{width: 90%;}

 } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */

/*/ XXLarge screens*/
@media only screen and (min-width: 120.063em) {
  .top-bar .title-area {
    float: left;
    display: none;
}

.site-description{color:#fff;
    width: 75%;
    font-size: 4.2em;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1em;}

.banner-content{color:#fff;width: 50%;position: absolute; top: 4em; left: 4.5em;}
.banner-content p{font-size: 1.4em;}

.imaginelogo{
  height: 320px;
  background: url(images/imagine-invercargill-logo.png) no-repeat 7em 3em;
  background-size: 60%;}

.footer-logo{position: absolute; bottom: 1em; right: 2em;}
.carousel-1{width: 18%;}
.carousel-2{width: 35%;}
.carousel-3{width: 52%;}
.carousel-4{width: 70%;}
.carousel-5{width: 90%;}

} /* min-width 1921px, xxlarge screens */
body{font-family: 'Roboto Slab', serif; color:#444;}
h1, h2, h3, h4, h5, h6{color:#333; font-family: 'Roboto Slab', serif;}
h1{font-size: 1.7rem;
    font-weight: 600;}
h2{font-size: 1.3rem;}
.idea a, .idea a:visited{color:#333;}
a, a:visited {
    color: #131313;}
a:hover{color:#EF7C08;}
  .head.row {
      position: absolute;
      top: 20em;
  }

.site-header{background: #000;}

.site-logo{margin: .5em auto;
  display: inline;}

.icc{
float: right;
background: url(images/icc-logo.svg) no-repeat;
width: 100px;
height: 100px;}
.banner{position: relative;}


  .site-title a{color:#fff;
    font-size: 1.5em;
    font-weight: 600;}
    /*.top-bar-section li.signup:not(.has-form) a:not(.button) {
        background: #ef7c08;
        border-radius: 0.4em;
    }*/
  #banner-area{background: #012f47;}

#content{margin-top: 2em;}
/*.hentry {
    margin: 0 ;
}*/
#old-browser{}
  .tml {

    margin: 0 auto;
}
.error-404 {text-align: center;}
.e404{ width: 400px;
  height: 400px;
  margin: 0 auto;
background: url(images/404.png) no-repeat center;
background-size: 100%;


}
.comment-weight-container {float:left;}
.comment-date{float: left; margin: 0 1em; font-size: .9em;}
.comment-author.vcard{
  display: inline-block;
  margin: 0 1em 1.25rem 1em;
  border: 0;
  padding:0;}

.centered{text-align: center;}
  .vm{background: #e9e9e9;
      padding-top: 4em;
      padding-bottom: 4em;}
  .view-more {text-align: center; margin: 2em auto;}
  .view-more h2{margin: 0 auto; font-size: 1.8rem;}
    .view-more h2:hover{color: #ef7c08;}
    #introduction{background: #e9e9e9;  padding-top: 4em; padding-bottom:4em; margin-bottom: 4em;}
    .pop{ margin-bottom: 4em;}
.head-line{position: fixed; transform: rotate(2deg); top:0; left: 0; width: 100%;height:10em; background: #003745; overflow: hidden;}
  /*#masthead{transform: rotate(2deg);}
  .head.row, .contain-to-grid {
    transform: rotate(-2deg);
}*/



span.comment-author-link {
    font-weight: 600;
}
.comment-number-pop {
  float: right;
}

.kodex_likes_count {
    display: inline;
    color: #fff;
    line-height: 24px;
    height: 24px;
    float:right;
        margin-right: 1em;
}
.kodex_likes_count span {
    display:inline-block;
    float: left;
    font-weight: bold;
    font-size: 19px;
    padding-top: 0em;
}
.kodex_likes_count:before {
    font-family: "FontAwesome";
    content: "\f063";

    font-weight: normal;
    padding-right: 8px;
    float: left;
    padding-top: 0em;
}

.entry-meta{margin-bottom: .5em;    font-size: 0.8em;
    font-weight: 700;}
.kodex_buttons{padding-top: .5em; }
.cat-links{margin-right: .5em;
  font-size: 0.9em;
    font-weight: 700;}
.comments-link{margin-right: .5em;}

.single-entry-header {

}
.single-entry-meta {
    font-size: 1.1em;
    padding: 0.5em 1em 0.57em 1em;
}
.idea.columns {
    position: relative;
    padding-left: 0rem;
    padding-right: 0rem;
    margin-left: 0.9375rem;
    margin-right: 0.9375rem;}

.idea{ color:#333;  position: relative;}
.idea p{font-size: 0.9em;}
/*.info-footer {
    position: absolute;
    bottom: 0;
     left: 0;
}*/
.idea-container{border: 1px solid #939598;}
.idea .entry-title{font-size: 1.2em; margin-top: 0; padding: .5em 1em 0 1em; color:#fff; font-weight: 400; text-transform: uppercase;}

.idea .entry-header{border-bottom: 1px solid #939598;
}
.idea .entry-content{ padding: 0 1em;
  border-bottom: 1px solid #939598;
}
.idea .entry-header{min-height: 7em;}
.idea .entry-content{min-height:15em;}
.full{position: relative;
    padding-left: 0;
    padding-right: 0;
    float: left;}

    .the_champ_sharing_container.the_champ_horizontal_sharing {
        margin-top: 4em;
    }

.kodex_button{  width: 50%}
.kodex_buttons {

    text-align: center;
    padding: 0;
    vertical-align: top;
    margin: 0;
line-height:0;
}
.kodex_buttons button .icon:before {
    font-family: "FontAwesome";
    display: block;
}
.likes{border-right: 1px solid #939598;
    height: 2.8em;
    background: #fff;
    width: 100%;}
.kodex_likes_count{color:#333;
  margin: auto;
  padding: 0.3em 36% 0 0%;

}
.kodex_likes_count:before{  content: "\f004";}
.kodex_buttons button.kodex_like_button .icon:before {
    content: "\f062";
}

.kodex_buttons button.kodex_dislike_button .icon:before {
    content: "\f063";
}

.kodex_buttons button .icon {
    display: block;
    padding: 0 10px;
    float: left;
    text-align: center;
    font-size: 18px;
}
.kodex_buttons button{padding: .5rem 10%;}

#primary-single .kodex_buttons button{padding: .85rem 6%;}
.single-detials{
    width: 100%;
    border: 1px solid #939598;
    /*border-bottom: 1px solid #939598;*/
    margin: 1em 0;
  }
.single-detials .entry-meta  {margin-bottom: 0;}
.single-detials .kodex_buttons button .counter {
    display: block;
    float: left;
    padding-right: 10px;
    font-weight: bold;
}

.single-detials .embracing-technology-and-change{background-size: 50%;}
.comment-number i{margin: 0 auto}
.comment-number{ text-align: center ;padding: .3rem 10%;}
.category-bottom{    padding: 0.5em;border-top: 1px solid #939598; clear: left;}
button, .button {
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 0;
    border-style: solid;
    border-width: 0;
    cursor: pointer;
    font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
    font-weight: normal;
    line-height: normal;
    margin: 0;
    position: relative;
    text-align: center;
    text-decoration: none;
    display: inline-block;
     padding: 1rem 10% 1.0625rem 10%;
    font-size: 1rem;
    background-color: #fff;
    border-right: 1px solid;
    border-color: #939598;
    color: #333;
    transition: background-color 300ms ease-out;
}

button:hover, button:focus, .button:hover, .button:focus {
    background-color: #003745;
}

.preserve-its-character{background: #73b244 url(images/pattern.png); background-size: 95%; }
.enhance-our-city{background: #f38040 url(images/pattern.png); background-size: 95%; }
.embrace-technology-and-change{background: #02afef url(images/pattern.png); background-size: 95%;}
.preserve-its-character a, .preserve-its-character a:visited,
 .enhance-our-city a, .enhance-our-city a:visited,
.embrace-technology-and-change a, .embrace-technology-and-change a:visited {color:#fff;}
/*.category #content .category-urban .idea, .blog #content .category-urban .idea{background:#EE6C4D; border: 1px solid #db4a27;}
.category #content .category-economy .idea, .blog #content .category-economy .idea{background:#662C91;}
.category #content .category-the-arts .idea, .blog #content .category-the-arts .idea{background:#17A398;}*/

.single-detials.preserve-its-character{background: #73b244 url(images/pattern.png); background-size: 47%; }
.single-detials.enhance-our-city{background: #f38040 url(images/pattern.png); background-size: 47%; }
.single-detials.embrace-technology-and-change{background: #02afef url(images/pattern.png); background-size: 47%;}

.widget {
    margin: 0 0 3.5em;
}
.widget h1{font-size: 1.2em; font-weight: 600;}
.widget li{list-style: none; border-bottom: 1px solid #444;margin: 1em auto;}
.widget .gfield_checkbox{border: none;}
.gform_body li {
    border: none;
}
.widget ul{ margin-top: 1em; margin-left: 0;}
.widget a{color:#444;}
.widget a:hover{color:#EF7C08;}
.top-bar{
    background: #383839;}
.top-bar-section li:not(.has-form) a:not(.button){
  background: #383839;

}
.top-bar-section ul li {
    background: #383839;
}
.top-bar-section li.current-menu-item:not(.has-form) a:not(.button){color:#EF7C08; font-weight: 800;}
.top-bar-section ul li:hover:not(.has-form) > a{color:#EF7C08;}

.contain-to-grid {
    width: 100%;
    background: #383839;
}
.top-bar-section ul li > a{color:#fff; font-family: 'Roboto Slab', serif;}
.comment-body{border:1px solid #DDD; margin: 1em auto; padding:1em; background: #e9e9e9;}

.comment-weight-container .upvote a, .comment-weight-container .downvote a, .comment-weight-container span.upvote, .comment-weight-container span.downvote {
    color: #EF7C08 !important;
}
.site-footer{position: relative; background:#000; color:#fff; padding-top: 4em;}
.footer-widget ul{list-style: none; color:#fff; }
.footer-widget a{color:#fff;}

.copyright{font-size: .7em;}

ul.pagination li.current a:hover, ul.pagination li.current a:focus, ul.pagination li.current button:hover, ul.pagination li.current button:focus {
    background: #EF7C08;
}
ul.pagination li.current a, ul.pagination li.current button {
    background: #EF7C08;
    color: #FFFFFF;
    cursor: default;
    font-weight: bold;
}
ul.pagination li a, ul.pagination li button {
    border-radius: 0;
}


body .gform_wrapper .options-buttons li {
	float:left;
   }

body .gform_wrapper .options-buttons li input[type=checkbox]{display:none;}
body .gform_wrapper .options-buttons li label{
	padding: 1em;
    text-align: center; 
	
	color:#fff;
	font-size:0.9em;
	font-weight:700;
	 background: #f38040 url(images/pattern.png);
	background-size: 95%;
 -webkit-transition: all 0.5s ease-in-out; /* Safari */
    transition:  all 0.5s ease-in-out;
	border:1px solid #ff5b00;
	
}

body .gform_wrapper .options-buttons li input[type=checkbox]:checked+label{
background: #ff5b00 url(images/pattern.png);
    background-size: 160%;
}
.gform_wrapper .gfield_radio li input[type=radio]{margin-bottom:5px;}

body .gform_wrapper .elementor{
    border: 1px solid #DDD;
/*     background: #eee; */
}

body .gform_wrapper .elementor .elementor-tab-content .elementor{border:0;}
.banner-content .widget a{color:#EF7C08;}
.banner-content .widget a:hover{text-decoration:underline;}