/* Colors */


ul.nav, ul.how-to-steps {
  list-style-type: none;
  padding: 0;
}

ul.nav li, ul.how-to-steps li {
  display: inline-block;
}

ul.nav li {
  font-family: sans-serif;
}


html {
  box-sizing: border-box;
}

body {
	font-size: 16px;
	background-color: #E6E6E6;
	max-width: 1240px;
	margin: 0 auto;
}
  
h1 {
    font-size: 30px;
    display: inline;
}

h2, h3, h4, h5 {
  font-size: 20px;
  display: inline;
}

h1 {
  font-family: 'Open Sans Condensed', sans-serif, 'Luckiest Guy'; line-height:120%; font-weight: bold;
}

h2 {
  font-family: 'Open Sans Condensed', 'Luckiest Guy'; line-height:120%; font-weight: bold;
}


a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: #000000;
}

body, p {
  font-family: 'Open Sans Condensed', sans-serif; line-height:140%
}

.logo {
	font-family: sans-serif; font-size: 14px; line-height:100%;
}

.nyhedsbrev {
	font-family: sans-serif; font-size: 14px; color: #ffffff; text-align:center; line-height:150%;
}

.seNyhedsbrev {
	font-family: 'Open Sans Condensed', sans-serif; font-size: 14px; color: #000000; text-align:center; line-height:150%;
}

section.section_menu {
  background-color: #FFFFFF;
}
section.section_menu .nav {
  /* font-size: 1.3em; */
  text-align: left;
}
section.section_menu .nav li {
  padding-left: 2em;
}
section.section_menu .nav li:last-child {
  padding-right: 0;
}

section.section_menu .nav button {
  color: #f2f2f2;
  margin: 0;
  border: 3px solid #f2f2f2;
}


section.section_afstand_15 {
  background-color: #E6E6E6;
  padding-bottom: 15px;
}

section.section_afstand_30 {
  background-color: #E6E6E6;
  padding-bottom: 30px;
}

section.section_afstand_40 {
  padding-bottom: 40px;
}

section.section1 {
  background-color: #E6E6E6;
}

.section1.row {
	padding: 0;
}

section.section2 {
  background-color: #F00000;
}

.row {
  /* padding-left: 1em;
  padding-right: 1em; */
}

.rightPadding {
  padding-right: 1em;
  padding-bottom: 1em;
}

.leftPadding {
  padding-left: 1em;
  padding-bottom: 1em;
}

.blaaBaggrund {
	background-color: #336699;
	padding: 1em;
	text-align: center;
	color: #ffffff;
}

.afstand_20 {
  padding-bottom: 20px;
}

.afstand_40 {
  padding-bottom: 40px;
}


.knap1 {
  padding: 0.8em;
  background: none;
  font-family: sans-serif;
  text-align:center;
}

.knap1.graa {
  color: #FFFFFF;
  background-color: #5A5F6C;
  font-weight: bold;
}

.knap1-block {
  display:block;

}

.knap175 {
	background-color:#FFFFFF;
	border:1px solid #FFFFFF;
	display:inline-block;
	cursor:pointer;
	color:#000000;
	font-weight: bold
	font-family:arial;
	font-size:12pt;
	padding: 3px;
	text-decoration:none;
	width:175px;
	text-align:center;
	-moz-border-radius: 5px 5px 5px 5px;
	-webkit-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
}

button {
  margin: 1em;
  padding: 0.8em;
  padding-bottom: 0.5em;
  background: none;
  border: 3px solid #232323;
  border-radius: 1em;
  font-size: 1.3em;
  font-family: 'Luckiest Guy', sans-serif;
}
button.pink {
  color: #f2f2f2;
  border: 3px solid #f2f2f2;
  background-color: #f20ca2;
}
button.purple {
  color: #f2f2f2;
  border: 3px solid #f2f2f2;
  background-color: #a314ef;
}
button.grey {
  color: #f2f2f2;
  border: 3px solid #f2f2f2;
  background-color: #a6a6a6;
}

header {
  background-color: #f20ca2;
  color: #f2f2f2;
  padding-top: 2em;
}

header .logo {
  float: left;
}


img {
  max-width: 100%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
  padding-bottom: 0;
}

.col-1 {
  width: 8.33333%;
  float: left;
}

.offset-1 {
  margin-left: 8.33333%;
}

.col-2 {
  width: 16.66667%;
  float: left;
}

.offset-2 {
  margin-left: 16.66667%;
}

.col-3 {
  width: 25%;
  float: left;
}

.offset-3 {
  margin-left: 25%;
}

.col-4 {
  width: 33.33333%;
  float: left;
}

.offset-4 {
  margin-left: 33.33333%;
}

.col-5 {
  width: 41.66667%;
  float: left;
}

.offset-5 {
  margin-left: 41.66667%;
}

.col-6 {
  width: 50%;
  float: left;
}

.offset-6 {
  margin-left: 50%;
}

.col-7 {
  width: 58.33333%;
  float: left;
}

.offset-7 {
  margin-left: 58.33333%;
}

.col-8 {
  width: 66.66667%;
  float: left;
}

.offset-8 {
  margin-left: 66.66667%;
}

.col-9 {
  width: 75%;
  float: left;
}

.offset-9 {
  margin-left: 75%;
}

.col-10 {
  width: 83.33333%;
  float: left;
}

.offset-10 {
  margin-left: 83.33333%;
}

.col-11 {
  width: 91.66667%;
  float: left;
}

.offset-11 {
  margin-left: 91.66667%;
}

.col-12 {
  width: 100%;
  float: left;
}

.offset-12 {
  margin-left: 100%;
}

@media screen and (min-width: 641px) {
  .nav-mobile, .menu-icon {
    display: none;
  }
}
@media screen and (max-width: 640px) {
  [class*="col-"] {
    float: none;
    width: 100%;
  }

  [class*="offset-"] {
    margin-left: 0;
  }

  .plans.row {
    padding: 0;
  }

  .hide-on-mobile {
    display: none;
  }
  
  .noPadding-on-mobile {
	padding-left: 0;
  }
  
  .Padding-on-mobile {
  	padding-left: 1em;
	/*padding: 0 -1em 0 1em;*/
  }
  
  .lineFeed-on-mobile {
  	padding-top: 1em;
  }
  
  /* Tilføjelserne nedenfor bliver ikke nævnt i videoen
   * Det er vigtigt at gøre skriftstørrelsen større
   * på mobile devices, da skræmen er mindre og pixeltætheden højere. Derfor skal de også med i denne media query som bruges til mobile devices.
   */
 
  header p.tagline {
    text-align: center;
    font-size: 1em;
  }
}

.menu-icon {
  position: fixed;
  top: 5px;
  left: 5px;
}

.site-wrapper {
  position: absolute;

  width: 100%;
  max-width: 1240px;
}

aside.nav-mobile {
  background-color: #232323;
  color: #f2f2f2;
  font-weight: bold;
  min-height: 100%;
  width: 75%;
  position: fixed;
  left: -75%;
}
aside.nav-mobile ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
aside.nav-mobile li {
  padding: 1em;
  border-bottom: 1px solid #727372;
}
body.menu-active aside.nav-mobile {
  left: 0;
}
body.menu-active .site-wrapper {
  left: 75%;
}
body.menu-active .menu-icon {
  left: 76%;
}
.site-wrapper, aside.navigation, .menu-icon {
  transition-property: left;
  transition-duration: 0.2s;
}

.video {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}
.video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}