/* ====================================================

 @company: Siteimprove
 @contributors: Rickard Andersson, @.com
 @content: reset, core layout, header, menu, footer, grid, cookie

======================================================= */

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

* { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,th,figcaption { font-size: 1em; font-weight: normal; font-style: normal; }
fieldset,iframe { border: none; } caption,th { text-align: left; } table { border-collapse: collapse; border-spacing: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, video, canvas, small { display: block; }
img, img a, img a:hover { border: 0; display: block; max-width: 100%; -ms-interpolation-mode: bicubic; }
object, embed, iframe { border: 0; display: block; max-width: 100%; }
::-moz-selection { background: #f5d027; background: rgba(245,208,39,0.9); color: #3c485e; text-shadow: none; }
::selection { background: #f5d027; background: rgba(245,208,39,0.9); color: #3c485e; text-shadow: none; }

/****************************************
  ==== CORE LAYOUT
****************************************/

html, body {
  height: 100%;
}
body {
  text-align: center; background: #f4f4f4; -webkit-tap-highlight-color: rgba(0,0,0,0);
}
div.master-wrap {
  width: 100%; min-height: 100%; margin: 0 auto; position: relative;
}
section.main-wrap {
  width: 100%; padding: 70px 30px 0 30px; position: relative; margin: 0 auto;
}
.main-content {
  width: 100%; background: #f4f4f4;
}

/****************************************
  ==== HEADER
****************************************/

header.main {
  width: 100%; height: 90px; background: #f4f4f4; padding: 0 30px; position: fixed; top: 0; left: 0; z-index: 10; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out;
}
header.main .wrap {
  height: 90px; position: relative; -webkit-box-shadow: 0 3px 0 rgba(60,72,94,0.1); -moz-box-shadow: 0 3px 0 rgba(60,72,94,0.1); box-shadow: 0 3px 0 rgba(60,72,94,0.1); -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out;
}
header.main .logo {
  height: 32px; display: block; position: absolute; top: 29px; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out;
}

/****************************************
  ==== FOOTER
****************************************/

footer.main {
  width: 100%; padding: 30px; position: absolute; bottom: 0; left: 0; z-index: 6; text-align: left;
}
footer.main .wrap {
  padding: 0 30px; background: #283142;
}
footer.main .wrap .grid {
  padding-bottom: 30px;
}
footer.main a.logo {
  width: 148px; height: 20px; float: left; margin: 11px 0 0 0; display: block; text-indent: -9999em; background: url(../images/sprites/si-core.png) 0 0 no-repeat;
}

/* Legal stuff */
footer.main div.wrap small {
  display: inline-block; margin: 0 15px 0 0; font-size: 1.6em; color: #f4f4f4;
}
footer.main div.wrap ul.legal {
  list-style-type: none; display: inline-block; margin: 0;
}
footer.main div.wrap ul.legal li {
  display: inline-block; margin: 0 15px 0 0; font-size: 1.6em; padding: 0; color: #f4f4f4;
}
footer.main div.wrap ul.legal li:last-child {
  margin: 0;
}
footer.main div.wrap ul.legal li a {
  color: #f4f4f4;
}
footer.main div.wrap ul.legal li:before {
  display: none;
}

/* Language selector */
footer.main div.m-lang {
  display: none;
}
footer.main div.language {
  width: 175px; display: inline-block; float: right; z-index: 20;
}
footer.main div.language div.trigger {
  line-height: 20px; padding: 10px 45px 10px 45px; color: #fff; font-size: 1.6em; background: #283142; border-color: #3c485e;
}
footer.main div.language div.trigger:after {
  height: 42px; line-height: 42px;
}
footer.main div.language div.trigger:hover {
  border-color: #4b5872;
}
footer.main div.language div.trigger:before {
  display: block; position: absolute; top: 12px; left: 15px; z-index: 9; font-size: 125%;
}
footer.main div.language ul.options {
  top: auto; bottom: 47px;
}
footer.main div.language ul.options li {
  font-size: 1.6em;
}
footer.main div.language ul.options li a {
  padding: 10px 15px; 
}

/****************************************
  ==== GRID
****************************************/

.g1, .g2, .g1-5, .g3, .g4, .g5, .g6, .g7, .g8, .g9, .g10, .g11, .g12 {
  padding: 30px; float: left;
}
.grid {
  max-width: 1660px; width: 100%; margin: 0 auto; padding: 60px 30px; text-align: left;
}
.grid:after {
  visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;
}
.grid.columns {
  padding: 30px;
}
.grid.full {
  max-width: none; padding-left: 0; padding-right: 0;
}
.grid.first-after-hero {
  position: relative; z-index: 5; padding-top: 0; padding-bottom: 0;
}
.nest {
  padding: 0 !important;
}
.g1.center, .g2.center, .g3.center, .g4.center, .g5.center, .g6.center, .g7.center, .g8.center, .g9.center, .g10.center, .g11.center, .g12.center {
  float: none; margin: 0 auto; clear: both;
}
.g1.center:after, .g2.center:after, .g3.center:after, .g4.center:after, .g5.center:after, .g6.center:after, .g7.center:after, .g8.center:after, .g9.center:after, .g10.center:after, .g11.center:after, .g12.center:after {
  visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;
}
.g1 { width: 8.33333333333% }
.g2 { width: 16.6666666667% }
.g1-5 { width: 20% }
.g3 { width: 25% }
.g4 { width: 33.3333333334% }
.g5 { width: 41.6666666667% }
.g6 { width: 50% }
.g7 { width: 58.3333333333% }
.g8 { width: 66.6666666667% }
.g9 { width: 75% }
.g10 { width: 83.333333333% }
.g11 { width: 91.666666667% }
.g12 { width: 100% }
.g1.center { width: 100%; max-width: 128px; }
.g2.center { width: 100%; max-width: 256px; }
.g1-5.center { width: 100%; max-width: 308px; }
.g3.center { width: 100%; max-width: 385px; }
.g4.center { width: 100%; max-width: 513px; }
.g5.center { width: 100%; max-width: 641px; }
.g6.center { width: 100%; max-width: 770px; }
.g7.center { width: 100%; max-width: 898px; }
.g8.center { width: 100%; max-width: 1026px; }
.g9.center { width: 100%; max-width: 1155px; }
.g10.center { width: 100%; max-width: 1283px; }
.g11.center { width: 100%; max-width: 1411px; }
.g12.center { width: 100%; max-width: 1540px; }

.group .g1, .group .g2, .group .g1-5, .group .g3, .group .g4, .group .g5, .group .g6, .group .g7, .group .g8, .group .g9, .group .g10, .group .g11, .group .g12 {
  padding: 15px;
}
.group, .group.nest {
  padding: 15px !important;
}
.grid > .g1, .grid > .g2, .grid > .g3, .grid > .g4, .grid > .g5, .grid > .g6, .grid > .g7, .grid > .g8, .grid > .g9, .grid > .g10, .grid > .g11, .grid > .g12 {
  padding-bottom: 0;
}
.grid > .g1:last-child, .grid > .g2:last-child, .grid > .g3:last-child, .grid > .g4:last-child, .grid > .g5:last-child, .grid > .g6:last-child, .grid > .g7:last-child, .grid > .g8:last-child, .grid > .g9:last-child, .grid > .g10:last-child, .grid > .g11:last-child, .grid > .g12:last-child {
  padding-bottom: 30px;
}
.g1 *:last-child, .g2 *:last-child, .g3 *:last-child, .g4 *:last-child, .g5 *:last-child, .g6 *:last-child, .g7 *:last-child, .g8 *:last-child, .g9 *:last-child, .g10 *:last-child, .g11 *:last-child, .g12 *:last-child {
  margin-bottom: 0;
}
.g1 h1:only-child:after, .g2 h1:only-child:after, .g3 h1:only-child:after, .g4 h1:only-child:after, .g5 h1:only-child:after, .g6 h1:only-child:after, .g7 h1:only-child:after, .g8 h1:only-child:after, .g9 h1:only-child:after, .g10 h1:only-child:after, .g11 h1:only-child:after, .g12 h1:only-child:after,
.g1 h2:only-child:after, .g2 h2:only-child:after, .g3 h2:only-child:after, .g4 h2:only-child:after, .g5 h2:only-child:after, .g6 h2:only-child:after, .g7 h2:only-child:after, .g8 h2:only-child:after, .g9 h2:only-child:after, .g10 h2:only-child:after, .g11 h2:only-child:after, .g12 h2:only-child:after {
  height: 0;
}

.g-ob {
  padding-bottom: 30px !important;
}

/****************************************
  ==== BREAKPOINT: 1024px
****************************************/

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

/* Header */
header.main {
  height: 60px; padding: 0 15px;
}
header.main .wrap {
  height: 60px;
}
header.main .logo {
  width: 157px; height: 22px; top: 21px !important; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); transform: translateX(-50%);
}
section.main-wrap {
  padding: 60px 15px 0 15px;
}

/* Footer */
footer.main {
  padding: 15px;
}
footer.main .wrap {
  padding: 0;
}
footer.main .links, footer.main .g4 {
  width: 100%;
}
footer.main .g4 .g12 {
  width: 33.3333333334%;
}
footer.main div.m-lang {
  display: block;
}
footer.main div.m-lang div.language {
  width: 100%;
}
footer.main div.footer-bottom .logo-wrap {
  width: 100%; text-align: center; padding-bottom: 0; padding-top: 60px;display: none;
}
footer.main div.footer-bottom .logo-wrap .logo {
  margin: 0 auto; float: none;
}
footer.main div.footer-bottom .legal-wrap, footer.main div.footer-bottom .lang {
  width: 100%;
}
footer.main div.footer-bottom .lang {
  display: none;
}
footer.main div.wrap small, footer.main div.wrap ul.legal li {
  line-height: 1.5;
}

/* Grid */
.grid {
  padding: 30px 15px;
}
.g1, .g2, .g1-5, .g3, .g4, .g5, .g6, .g7, .g8, .g9, .g10, .g11, .g12 {
  padding: 15px;
}
.group .g1, .group .g2, .group .g1-5, .group .g3, .group .g4, .group .g5, .group .g6, .group .g7, .group .g8, .group .g9, .group .g10, .group .g11, .group .g12 {
  padding: 15px;
}
.group, .group.nest {
  padding: 0 !important;
}
.grid > .g1:last-child, .grid > .g2:last-child, .grid > .g3:last-child, .grid > .g4:last-child, .grid > .g5:last-child, .grid > .g6:last-child, .grid > .g7:last-child, .grid > .g8:last-child, .grid > .g9:last-child, .grid > .g10:last-child, .grid > .g11:last-child, .grid > .g12:last-child {
  padding-bottom: 15px;
}
.g-ob {
  padding-bottom: 15px !important;
}

}

/****************************************
  ==== BREAKPOINT: 768px
****************************************/

@media only screen and (max-width: 767px){

footer.main .g4 .g12 {
  width: 50%;
}
footer.main div.footer-bottom .logo-wrap {
  padding-top: 30px;
}

/* Grid */
.g1 { width: 8.33333333333% }
.g2 { width: 16.6666666667% }
.g1-5 { width: 50% }
.g3 { width: 50% }
.g4 { width: 100% }
.g5 { width: 100% }
.g6 { width: 100% }
.g7 { width: 100% }
.g8 { width: 100% }
.g9 { width: 100% }
.g10 { width: 100% }
.g11 { width: 91.666666667% }
.g12 { width: 100% }

}

/****************************************
  ==== BREAKPOINT: 640px
****************************************/

@media only screen and (max-width: 640px){

footer.main .g4 .g12 {
  width: 100%;
}

}

/****************************************
  ==== BREAKPOINT: 480px
****************************************/

@media only screen and (max-width: 479px){

/* Header */
header.main {
  padding: 0 5px;
}
section.main-wrap {
  padding: 60px 5px 0 5px;
}

/* Footer */
footer.main {
  padding: 5px;
}

/* Grid */
.grid {
  padding: 15px 0;
}

}

/****************************************
  ==== RETINA: @2X
****************************************/

@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio:2){

footer.main a.logo {
  background-image: url(../images/sprites/si-core@2x.png); -webkit-background-size: 300px 300px; -moz-background-size: 300px 300px; -o-background-size: 300px 300px; background-size: 300px 300px;
}

}