*
{
    margin: 0;
    padding: 0;
}

body
{
    background-color: #F5F5F5;
    width: 100%;
    height: 100%;
}

h1
{
    font-size: 4em;
    font-family: 'Roboto', sans-serif;
}

h2
{
    font-size: 2em;
    font-family: 'Roboto', sans-serif;
}

h3
{
    font-size: 1.5em;
    font-family: 'Roboto', sans-serif;
}

p
{
    font-size: 1em;
}

main
{
    display: -webkit-box;    
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}


/* 
    Navigation 
*/

.navigationbar
{
    background-color: #000000;
    width: 100vw;
    border-bottom: .1em solid #00A99D;
    display: block;
    z-index: 9999;
}

.navigationbar ul
{
    list-style-type: none;
    overflow: hidden;
}

.navigationbar ul li
{
    color: #FFFFFF;
}

.navigationbar ul li a 
{
    display: block;
    color: #FFFFFF;
    text-align: center;
    text-decoration: none;
    padding: 1em;
    border-bottom: .1em solid transparent;
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
    font-weight: 700;
    float: left;
    height: 1.5em;
}

.navigationbar ul li a:hover
{
    background: #00A99D;
    color: #FFFFFF;
    border-bottom: .1em solid #000000;
}

.navigationbar ul li a:active
{
    background: #00A99D;
    color: #FFFFFF;
    border-bottom: .1em solid #000000;
}

.navigationbar .icon 
{
    display: none;
}

.navigationbar img
{
    float: left;
    max-width: 45px;
    max-height: 45px;
    padding-top: .3em;
}

@media screen and (max-width: 600px) 
{
    .navigationbar ul li a.icon { float: right; }
    .navigationbar ul li a { display: none; }
    .navigationbar a.icon 
    {
        float: right;
        display: block;
        padding-right: 1em;
    }
}
  
@media screen and (max-width: 600px) 
{
    .navigationbar.responsive 
    { 
        width: 50%;
    }
    .navigationbar.responsive a.icon 
    {
        position: absolute;
        right: 0;
        top: 0;
    }
    .navigationbar.responsive a 
    {
      float: none;
      display: block;
    }
    .navigationbar.responsive ul li:first-child 
    { 
        margin-top: 3.5em;
    }
    .navigationbar.responsive ul
    { 
        height: 100vh;
    }
}

.active 
{
    background-color: #0FF4C6;
    color: #FFFFFF;
}

.sticky 
{
    position: fixed;
    top: 0;
    width: 100%
}

.sticky + section 
{
    padding-top: 7.5em;
}

@supports ((position: -webkit-sticky) or (position: sticky)) 
{
    .sticky
    {
	    position: -webkit-sticky;
        position: sticky;
    }
    
    .header-padding
    {
        padding-top: 0em; /*Reset the ugly padding that was done without display sticky*/
    }
}

/* Sections */

.section-home
{
    width: 100%;
    width: 100vw;
    height: 100%;
    height: 100vh;
}

.section-pricing
{
    width: 100%;
    width: 100vw;
    height: 100%;
    min-height: 100vh;
    background-color: #F5F5F5;
    padding-top: 1em;
}

.section-themes
{
    width: 100%;
    width: 100vw;
    min-height: 95%;
    min-height: 95vh;
    /*background-color: #00A99D;*/
    background-color: #F5F5F5;
    padding-top: 1em;
}

.section-about
{
    width: 100%;
    width: 100vw;
    height: 100%;
    min-height: 100vh;
    background-color: #F5F5F5;
}

.section-contact
{
    width: 100%;
    width: 100vw;
    height: 82%;
    height: 82vh;
    background-color: #F5F5F5;
}

/* IE8 doesnt support either box-shadow or rgba therefore I use no fallback here*/
/*.shadow
{
    box-shadow: .5em .5em 1em 0 rgba(0,0,0,0.1);
}*/


/*
    Header
*/

.header-home
{
    background-color: #FFFFFF;
    background-image: url("../images/home-header.png");
    background-position: bottom; 
    background-repeat: no-repeat;
    width: 100%;
    height: 20%;
    padding-top: 3.5em;
    border-bottom: .1em solid #00A99D;
}

.header-black
{
    background-color: #000000;
    width: 100%;
    height: 10%;
    height: 10vh;
    border-top: .1em solid #00A99D;
    border-bottom: .1em solid #00A99D;
}

.header-padding
{
    padding-top: 3.5em;
}

/* 
    Don*t know how to solve this? display table fucked all up. 
    Quickest solution was a magical line-height according to can I use it have been supported since IE6 
*/
header
{
    width: 100%;
    line-height: 6em;
    vertical-align: middle;
}

header h2
{
    color: #FFFFFF;
    text-align: center;
}

/*Remove the ugly lineheight*/
@supports (display: -moz-flex) or (display: -ms-flexbox) or
((display: -webkit-box) or (display: flex)) 
{

    header 
    {
        display: -webkit-box;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        float: none;
        line-height: normal;
        vertical-align: baseline;
    }

    .header-black
    {
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }

}

header:focus
{
    outline: 0;
}

/*
    Home
*/


.home-bg
{
    background-color: #FFFFFF;
    background-image: url("../images/arboreal-bg.png");
    background-position: bottom; 
    background-repeat: no-repeat;
    width: 100%;
}

/* 
    Pricing 
*/

.pricing
{
    width: 100%;
}

.pricing-alternatives
{
    width: 100%;
    height: 100%;
    display: inline-block;
    text-align: center;
}

.pricing-columns 
{
    display: inline-block;
    width: 25%;
    padding: 1em;
    vertical-align: top;
}

.pricing-list 
{
    list-style-type: none;
    border: 1px solid #000000;
    margin: 0;
    padding: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.pricing-list:hover 
{
    -webkit-box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2);
            box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}

.pricing-list .header 
{
    background-color: #00A99D;
    color: #FFFFFF;
    font-size: 2em;
    border-bottom: 1px solid #000000;
}

.pricing-list li 
{
    border-bottom: 1px solid #EEEEEE;
    padding: 20px;
    text-align: center;
}


.pricing-list .grey {
    background-color: #EEEEEE;
    font-size: 1em;
    font-weight: 700;
}

.btn-purchase 
{
    border-radius: 10px;
    -webkit-box-shadow: 0px 1px 3px #666666;
    box-shadow: 0px 1px 3px #666666;
    color: #00A99D;
    background: #FFFFFF;
    padding: 10px 20px 10px 20px;
    border: solid #00A99D 2px;
    text-decoration: none;
  }
  
 .btn-purchase:hover 
 {
    background: #00A99D;
    color: #FFFFFF;
    text-decoration: none;
 }

@media only screen and (max-width: 768px) 
{
    .pricing-columns 
    {
        display: block;
        width: 50%;
        margin: auto;
    }
}

@supports (display: -moz-flex) or (display: -ms-flexbox) or
((display: -webkit-box) or (display: flex)) 
{

    .pricing-alternatives
    {
        display: -webkit-box;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        float: none;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;       
    }

    @media only screen and (max-width: 768px) 
        {
            .pricing-alternatives 
            {
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -ms-flex-direction: column;
                flex-direction: column;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
            }

        }
}

@supports (display: grid) 
{
    .test 
    {
        background-color: green;
    }

    @media screen and (max-width: 600px) 
    {
        .test 
        {
            background-color: yellow;
        }
    }
}

/* 
    Themes
*/

.themes
{
    width: 100%;
    height: 100%;
}

.themes-list ul
{
    list-style-type: disc ;
    padding: 1em;
}

.themes-list ul ul
{
    list-style-type: circle;
}

.themes-outercontainer
{
    position: relative;
    display: table;
    width: 100%;
    height: 90vh;
}

.themes-container
{
    width: 100%;
    height: 90vh;
    display: table-cell;
    vertical-align: middle;
}

.themes-whiteoverlay
{
    position: absolute;
    background-color: #FFFFFF;
    opacity: 0.8;
    height: 100%;
    width: 40%;
    top: 0;
    margin-left: 3em;
    padding: 1em;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.themes-whiteoverlay ul li 
{
    list-style: none;
}

.themes-alternative
{
    position: relative;
    background-color: #FFFFFF;
    background-position: bottom; 
    background-repeat: no-repeat;
    width: 100%;
    height: 20%;
    padding-top: 3.5em;
    border-top: .1em solid #00A99D;
    border-bottom: .1em solid #00A99D;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.themes-bg-aloha
{
    background-image: url("../images/theme-aloha.png");    
}

.themes-bg-nordic
{
    background-image: url("../images/theme-nordic.png");    
}

.themes-bg-siberia
{
    background-image: url("../images/theme-siberia.png");    
}

div:not(:last-child)
{
    margin-bottom: 2em;   
}

@supports (display: -moz-flex) or (display: -ms-flexbox) or
((display: -webkit-box) or (display: flex)) 
{

    .themes-container 
    {
        display: -webkit-box;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        float: none;
        padding-top: 0;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-direction: column;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
    }
}

@media screen and (max-width: 1150Px) and (min-width: 751px) 
{
    .themes-whiteoverlay
    {     
        width: 60%;
    }
}

@media screen and (max-width: 750px) and (min-width: 551px) 
{
    .themes-whiteoverlay
    {     
        width: 80%;
    }
}

@media screen and (max-width: 550px) and (min-width: 351px) 
{
    .themes-alternative
    {
        height: 25%;
    }
    .themes-whiteoverlay
    {     
        width: 90%;
    }
}

@media screen and (max-width: 350px) 
{
    .themes-alternative
    {
        height: 30%;
    }

    .themes-whiteoverlay
    {     
        margin-left: 0;
        width: 100%;
    }
}

/* 
    About 
*/

.about-container
{
    width: 100%;
    height: 100%;
    text-align: center;
    padding-top: 2em;
}

.about-mission
{
    width: 100%;
}

.about-us
{
    padding-top: 2em;
    width: 80%;
    margin: auto;
    display: -ms-flexbox; /* Fullösning för IE11 verkar inte tolka min support.*/
}

.about-text
{
    width: 40%;
    float: left;
    text-align: left;
    padding-left: 1em;
}

.about-missionslogan
{
    width: 100%;
}

.about-imagecontainer
{
    width: 100%;
    height: 80%
}

.about-imagecontainer img
{
    max-width: 80%;
    float: left;
}

@supports (display: -moz-flex) or (display: -ms-flexbox) or
(display: -webkit-box) or (display: flex)
{

    .about-us
    {
        display: -webkit-box;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        float: none;
        margin: 0;        
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .about-imagecontainer img
    {
        float: none;
    }
}

@media screen and (max-width: 900px)
{
    .about-us
    {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
    .about-imagecontainer img
    {
        max-width: 90%;    -ms-flex: 1;
    }

    .about-text
    {
        text-align: center;
    }
}

/* 
    Contact 
*/

.contact-container
{
    background: #F5F5F5;
    width: 100%;
}
.btn-submit 
{
    border-radius: 10px;
    -webkit-box-shadow: 0px 1px 3px #666666;
    box-shadow: 0px 1px 3px #666666;
    color: #00A99D;
    background: #FFFFFF;
    padding: 10px 10px 10px 10px;
    border: solid #00A99D 2px;
    text-decoration: none;
    font-size: 1em;
    font-weight: 700;
  }
  
  .btn-submit:hover 
  {
    background: #00A99D;
    color: #FFFFFF;
    text-decoration: none;
  }

fieldset
{
    border: .1em solid #000000;
    padding: 1em;
}

form  
{ 
    display: table;
    padding: 1em;
    margin: auto;
}

form p     
{ 
    display: table-row;  
}

label 
{ 
    width: 9em;
    display: table-cell; 
    vertical-align: middle;
}

input 
{ 
    display: table-cell;
    margin: .5em 0em;
}

textarea
{
    margin: .5em 0em;
    min-width: 10em;
    min-height: 5em;
    max-width: 50em;
    max-height: 20em;
    width: 100%;
}

input[type="text"], input[type="tel"], input[type="email"]
{
    background-color: #FFFFFF;
}

@media screen and (max-width: 520px) 
{
    form p 
    {
        display: block;
    }
}

@supports (display: -moz-flex) or (display: -ms-flexbox) or
((display: -webkit-box) or (display: flex)) 
{

    .contact-container 
    {
        display: -webkit-box;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        float: none;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    form
    {
        margin: 0;
    }
}


/* 
    Footer
*/

footer
{
    background-color: #000000;
    color: #FFFFFF;
    width: 100%;
    display: inline-block; 
    border-top: .1em solid #00A99D;
    padding: 1em;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align: top;
    position: relative;
}

footer ul
{
    font-family: 'Open Sans', sans-serif;
    list-style-type: none;
}

.footer-address
{
    float: left;
}

.footer-address a:link 
{
    color: #FFFFFF;
}

.footer-address a:visited 
{
    color: #FFFFFF;
}

.footer-address a:hover 
{
    color: #FFFFFF;
}

.footer-logos
{
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 1em;
}

/* Lazy floats */
.right
{
    float: right;
}

/* Legacy class */

.flex 
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.flex-parent,
.flex-child
{
    display: -webkit-box; 
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}