/* Fonts
–––––––––––––––––––––––––––––––––––––––––––––––––– */
main p, main h1, main h2, main h3, main a, main p_font, main p.link {font-family: HelveticaNeue, Arial, sans-serif}
main p_font {font-size: 12px;font-weight: 100;color: black; padding-left: 2px; letter-spacing: 3px; display: inline!IMPORTANT}
main p_link {text-align:left; font-size:16px; color:#007bc5; padding-left: 2px;text-decoration: underline; }	
main p {font-size: 16px; line-height:25px;font-weight: 300;color: #000; padding-left: 2px;}
main h3 {font-size: 26px; line-height:30px;font-weight: 100;margin-top: 20px}
main h1 {font-size: 90px;font-weight:600;margin-bottom: -10px; color: #000; margin-left: 0%; margin-right: 0%; text-align: center; line-height: 100px}
main h2 {font-size: 50px;font-weight:100;margin-bottom: 10px;line-height: 50px;margin-top: 16px}


/* Farver
–––––––––––––––––––––––––––––––––––––––––––––––––– */
main .blue {color: #007bc5;}
main .white {color: #fff;}
main .red {color: #c93a56}
main .green {color: #229373}




/* Standard
–––––––––––––––––––––––––––––––––––––––––––––––––– */
main .section {padding: 0rem 0 5rem 0;text-align: center;}
main .container {padding: 20px; margin-top: 20px }
main .container_appstore {padding: 10px; margin-top: -10% }
main .header {padding: 0px; margin-top: 0px }
main .header1 {padding: 0px; margin-top: 15% }
main .header2 {padding: 0px; margin-top: 15% }
main .header3 {padding: 0px; margin-top: 15% }
main .header4 {padding: 0px; margin-top: 15% }
main .header5 {padding: 0px; margin-top: 15% }
main .header6 {padding: 0px; margin-top: 15% }
main img {max-width: 100%;margin-bottom: 5%;margin-top:5%}
main .imageleft {max-width: 100%;margin-bottom: 5%;margin-top:5%}
main .imageright {max-width: 100%;margin-bottom: 5%;margin-top:5%}
main .center {text-align: center; margin: 0 auto;}
main .left {text-align: left;}
main .right {text-align: right;}

main .container-flex.reverse {flex-direction: row-reverse;}
main .container-flex {display:flex; align-items: center;}
main .container-flex > div {width:50%}


/* Blink
–––––––––––––––––––––––––––––––––––––––––––––––––– */

#blink {
      background: url(../images/Chat_indikator_10px.svg); 
      width: 10px; 
      height: 10px;
      display: inline-block;
      float: top;
      background-repeat: no-repeat;
      animation: blink 2s steps(5, start) infinite;
      -webkit-animation: blink 1s steps(5, start) infinite;}
 @keyframes blink {0% {opacity: 1;}50% {opacity: 0;}100% {opacity: 1;}
}



/* Knapper
–––––––––––––––––––––––––––––––––––––––––––––––––– */
main .buttonblack {background-color: transparent;border: 1px solid #fff;border-radius: 5px;font-size: 16px;color: #FFFFFF;padding: 10px 30px;width: 210px;text-align: center;-webkit-transition-duration: 0.4s; /* Safari */transition-duration: 0.6s;overflow: hidden;cursor: pointer;font-family: helvetica, arial, sans-serif;}
main .buttonblack:hover {background: #fff;color: #000}

main .buttongreen {background-color: transparent;border: 1px solid #fff;border-radius: 5px;font-size: 16px;color: #FFFFFF;padding: 10px 30px;width: 210px;text-align: center;-webkit-transition-duration: 0.4s; /* Safari */transition-duration: 0.6s;overflow: hidden;cursor: pointer;font-family: helvetica, arial, sans-serif;}
main .buttongreen:hover {background: #fff;color: #448975}


main .buttonblue {background-color: transparent;border: 1px solid #fff;border-radius: 10px;font-size: 16px;color: #fff;font-weight: 100;padding: 15px 30px;width: 210px;text-align: center;-webkit-transition-duration: 0.4s; /* Safari */transition-duration: 0.6s;overflow: hidden;cursor: pointer;font-family: helvetica, arial, sans-serif;display: block; align-content: center}
main .buttonblue:hover {background: #fff;color: #007bc5}


main .buttongrey {background-color: transparent;border: 1px solid darkgrey;border-radius: 10px;font-size: 16px;color: #000;font-weight: 100; padding: 15px 30px;width: 210px;text-align: center;-webkit-transition-duration: 0.4s; /* Safari */transition-duration: 0.6s;overflow: hidden;cursor: pointer;font-family: helvetica, arial, sans-serif; display: block; align-content: center}
main .buttongrey:hover {background: #000;color: #fff}


main .buttonred {background-color: transparent;border: 1px solid #fff;border-radius: 10px;font-size: 16px;color: #FFFFFF;font-weight: 100;padding: 15px 30px;width: 210px;text-align: center;-webkit-transition-duration: 0.4s; /* Safari */transition-duration: 0.6s;overflow: hidden;cursor: pointer;font-family: helvetica, arial, sans-serif;display: block; align-content: center}
main .buttonred:hover {background: #fff;color: grey}




/* Background 
–––––––––––––––––––––––––––––––––––––––––––––––––– */
main .blueback {align-items: center; margin-bottom: 10px;margin-top: 20px; display: block; width: 100%; margin-left: auto; margin-right: auto; background-color: #007bc5}
main .redback {align-items: center; margin-bottom: 40px;margin-top: 20px; width: 100%; height: 480px !IMPORTANT; margin-left: auto; margin-right: auto; background-color: #c93a56}
main .greenback {align-items: center; margin-bottom: 10px;margin-top: 20px; display: block; width: 100%; margin-left: auto; margin-right: auto; background-color: #448975}
main .redback_music {align-items: center; margin-bottom: 10px;margin-top: 20px; display: block; width: 100%; margin-left: auto; margin-right: auto; background-color: #c93a56}
main .greyback {align-items: center; margin-bottom: 10px;margin-top: 20px; width: 100%; margin-left: auto; margin-right: auto; background-color: #efefef}
main .darkgreyback {align-items: center; margin-bottom: 10px;margin-top: 20px; width: 100%;  margin-left: auto; margin-right: auto; background-color: #8b8b93}




/* MOBILE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width: 1025px) {
{padding: 11rem 0 11rem; width: 100%; text-align: left}
main .container_appstore {margin-top: -10%; margin-bottom: 10% ;max-width: 80%; align-items: left!IMPORTANT; }
main .reverse-columns {display: flex;flex-direction: column-reverse;}
main .products-container {padding: 0rem 0 0rem;}
main .section {padding: 0rem 0 5rem 0;text-align: left;}

/* Fonts
–––––––––––––––––––––––––––––––––––––––––––––––––– */
main h1 {font-size: 50px;font-weight:600;margin-bottom:-10px;text-align: left; line-height: 50px}
main h2 {font-size: 42px;font-weight:600;margin-bottom:10px;text-align: left; line-height: 50px;}
main h3 {font-size: 22px;font-weight:100;text-align: left; line-height: 30px}
main p {font-size: 20px; line-height:25px;font-weight:300;color:#000;text-align: left}
main .imageleft {max-width: 100%;margin-bottom: 8%; margin-top: 8%; display: block; margin-left: -10%; margin-right: -10%}
main .imageright {max-width: 100%;margin-bottom: 8%; margin-top: 8%; display: block; margin-left: 10%; margin-right: 10%}
}


@media (max-width: 799px) {
{padding: 11rem 0 11rem; width: 100%; text-align: left}
main .container {padding: 20px; margin-top: 10px; width: 100%; }
main .container_appstore {margin-top: -10%; margin-bottom: 18% ;max-width: 100%; align-items: left!IMPORTANT; }
main .reverse-columns {display: flex;flex-direction: column-reverse;}
main .products-container {padding: 0rem 0 0rem;}
main .section {padding: 0rem 0 5rem 0;text-align: left;}

/* Fonts
–––––––––––––––––––––––––––––––––––––––––––––––––– */
main h1 {font-size: 45px;font-weight:100;margin-bottom:-10px;text-align: left; line-height: 45px}
main h2 {font-size: 45px;font-weight:100;margin-bottom:10px;text-align: left; line-height: 45px;}
main p {font-size: 18px; line-height:25px;font-weight:300;color:#000;text-align: left}
main h3 {font-size: 22px;font-weight:100;text-align: left; line-height: 30px}
main p_font {font-size: 12px;font-weight: 100;color: black; padding-left: 2px; letter-spacing: 3px; display: inline!IMPORTANT}
main p_link {text-align:left; font-size:18px; color:#007bc5; padding-left: 2px;text-decoration: underline; }	
main .imageleft {max-width: 100%; float: left; align-items: left!IMPORTANT; margin-left: -10%}
main .imagesize {max-width: 80%;align-items: center!IMPORTANT;}
main .imageright {max-width: 100%; float: right;align-items: right!IMPORTANT; margin-right: -10%; position: relative}
main .imageappstore {max-width: 100%; float: left; align-items: left!IMPORTANT;margin-left: -20%; position: relative}

}


@media (max-width: 650px) {
      main .container-flex.reverse {flex-direction: row;}
      main .container-flex.mobile-reverse {flex-direction: row-reverse;}
}