/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Mar 12, 2016, 3:02:45 PM
    Author     : gustav
*/
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/zN7GBFwfMP4uA6AR0HCoLQ.ttf) format('truetype');
}

/* stolen from mdl */
html, body {
    font-family: "Helvetica", "Arial", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 20px; }

h1, h2, h3, h4, h5, h6, p {
    margin: 0;
    padding: 0; }

/**
  * Styles for HTML elements
  */
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    font-size: 56px;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: -0.02em;
    opacity: 0.54;
    font-size: 0.6em; }

h1 {
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    font-size: 56px;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: -0.02em;
    margin-top: 24px;
    margin-bottom: 24px; }

h2 {
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    font-size: 45px;
    font-weight: 400;
    line-height: 48px;
    margin-top: 24px;
    margin-bottom: 24px; }

h3 {
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    font-size: 34px;
    font-weight: 400;
    line-height: 40px;
    margin-top: 24px;
    margin-bottom: 24px;
}

h4 {
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    -moz-osx-font-smoothing: grayscale;
    margin-top: 24px;
    margin-bottom: 16px; }

h5 {
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.02em;
    margin-top: 24px;
    margin-bottom: 16px; }

h6 {
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.04em;
    margin-top: 24px;
    margin-bottom: 16px; }

p {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0;
    margin-bottom: 16px; }

a {
    color: rgb(178,255,89);
    font-weight: 500; 
    text-wrap: avoid;

}

blockquote {
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    position: relative;
    font-size: 24px;
    font-weight: 300;
    font-style: italic;
    line-height: 1.35;
    letter-spacing: 0.08em; }
blockquote:before {
    position: absolute;
    left: -0.5em;
    content: '“'; }
blockquote:after {
    content: '”';
    margin-left: -0.05em; }

mark {
    background-color: #f4ff81; }

dt {
    font-weight: 700; }

address {
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    font-style: normal; }

ul, ol {
    font-weight: 400;
    /* line-height: 24px; */
    letter-spacing: 0;
    padding-left: 0;
}




body {
    background-color: #F6F6F6;
    /*                font-family: arial, sans-serif;*/
    padding: 0;
    margin: 0;
    /*                font-family: "proxima_nova","Helvetica Neue",Helvetica,Arial,sans-serif; */
    font-size: 18;
    font-family: Roboto;
}
p, li {
    font-size: 18;
}
.sectioncontent {
    overflow: hidden;
    padding: 20 20 20 20;
}
main>.sectioncontent{
    padding: 64px 20px 20px 20px;
    min-width: 280px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;

}

section {
    display: block;
    width: 100%;

}
#followus {
    vertical-align: top;
    display: inline-block;
}
#followus .sectioncontent {
    background-color: #FFF;
}
#whoarewe {
}
#whoarewe .sectioncontent {
    background-color: #FFF;
}
#product-section {
    min-height: 900px;
    text-align: center;
}
#product .sectioncontent {
    background-color: #fff;
    color: black;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.productfeatures {
    /*                margin-left: auto;
                    margin-right: auto;*/
}
.productfeature {
    /*display: inline-block;*/
    vertical-align: top;
    margin: 10;
    padding: 10;
    min-width:280px;
    max-width:300px;
    text-align: left;
    margin-left: auto;
    margin-right: auto;

}
.productfeature-content {
    display: none;
}
#welcome-section {
    background-color: white;
}

#getstarted-section {
    background-color: white;
    display: table;
    height: 400px;
}
#getstartedtext {
    display: table-cell;
    vertical-align: middle;
    text-align: left;
    /*margin-top: 80px;*/
    /*height: 250px;*/
}
#getstartedtext .sectioncontent {
    background-color: white;
    color: #bdb8b8;
    text-align: center;
}
#welcome-section {
    background-color: black;
    display: table;
    height: 900px;
}
#welcometext {
    display: table-cell;
    vertical-align: middle;
    text-align: left;
    /*margin-top: 80px;*/
    /*height: 250px;*/
}
#welcometext .sectioncontent {
    background-color: #000;
    color: #bdb8b8;
    text-align: center;
}
#welcometext > .sectioncontent > div {
}
#download {
    vertical-align: middle;

}
#download .sectioncontent {
    background-color: #555;
    color: white;
    height: 400px;
}
#support-section {
    background-color: indianred;
}
#support {
    display: inline-block;
    height:339px;    
}
#supportimage {
    background-size: cover;
    background-color: white;
    background-clip: content-box;
    background-repeat: no-repeat;
    background-image: url('img/hotline_photo.jpg');
    height:339px;    
    width:100%;
    display: inline-block;
    vertical-align: top;
    min-width: 300px;
    max-width: 600px;
}
#support >.sectioncontent {
    background-color: transparent;
    color: white;
    height:299px;    
}
#faq .sectioncontent {
    background-color: whitesmoke;
    color: #333;
}
#about .sectioncontent {
    background-color: darkolivegreen;
    color: white;
    text-align: center;
    margin: 0px;
    padding: 0 0 20px 0;
}
#about >.sectioncontent >div{
    text-align: left;
    display: inline-block;
    vertical-align: top;
    margin: 0px 10px 0px 10px;
}
#pricing .sectioncontent {
    background-color: white;
    color: #222;
    padding: 0;
    min-height: 800px;
    padding-top: 44px;
}

#pricingtextbox > div {
    text-align: center;
}
.priceoption {
    display: inline-block;
    vertical-align: top;
    margin: 5;
    padding: 5;
    border: none;
    width: 300px;
    height:352px;
    border-radius: 7px;
    color: white;
}
#free {
    background-color: #8a74b9;
}
#startup {
    background-color: #4cb992;
}
#business {
    background-color: #3499e0;
}
#serious {
    background-color: #efb57c;
}
#pricingtextbox > h1, #pricingtextbox > h3 {
    text-align: center;
}
.priceoption > h2, .priceoption > h3 {
    text-align: center;
}
.priceoption > div {
    bottom: 0;
}
.priceoption > ul > li {
    text-align: left;
}
.priceoption > ul {
    padding-left: 20px;
    height: 164px;
    list-style-image: url('img/disc.png');

}

.header {
    position: fixed;
    height: 64px;
    width: 100%;
    background-color: #607D8B;
    z-index:10;
    /* vertical-align: middle; */
}
.header>div {
    height:64px;
    vertical-align: middle;
    display: block;
    overflow: hidden;
}
.header-content{
    color:#FFF;
    /*margin: 10px 0 auto 0;*/
}
.header-content a{
    font-style: normal;
    color:white !important;
    text-decoration: none !important;
}
/*.header-content ul {
    height: 24px;
    line-height: 1;
}*/
.header-content li {
    color:#424242;
    list-style-image: none;
    list-style-type: none;
    display: inline-block;

    margin-left: 20px;
    margin-right: 20px;
}
.footer {
    position: relative;
    margin: 0 0 0 0;
    bottom: 0;
    width: 100%;
    background-color: #000;
    display: block;
}
.footer-content{
    color: #FFF;
    font-size: 10;
    padding: 0px 10px 0px 10px;
}
.footer-content a{
    font-size: 14;
    color:#424242;
    text-decoration: none;
}
.footer-content li {
    color:#424242;
    list-style-image: none;
    list-style-type: none;
    display: block;
    font-size: 14;
}
.right {
    float: right;
    text-align: right;
}
.left {
    float: left;
}
.backgroundimg {
    top: 0px;
    left: 0px;
    position: fixed;
    overflow: hidden;
    z-index: -100;
}
.smbutton {
    margin: 10 0 0 0;
    padding: 10 0 0 0;
}
#productimage {
    /*                background-image: url('img/touchshopinhand.jpg');
                    background-size: contain;
                    background-repeat: no-repeat;*/
    background-color:black;
    margin-left:auto;
    margin-right:auto;
}
#producth1 {
    padding: 20;
    background-color: white;
    color: #444;
    text-align: center;
}
.question {
    font-weight: bold;
}
#companynamehomelink {
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    font-size: 20px;
    font-weight: 500;
    cursor: pointer;
}
#getstartedtext > div > div > div > h1 > span {
    white-space: nowrap;
}
.menuicon {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    word-wrap: normal;
    -moz-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased; 
    cursor: pointer;
}
#menulayer {
    width: 250px;
    display: none;
    top: 64px;
    height: 400px;
    padding:20px;
}
.menu {
    background-color: whitesmoke;
}
.menulink {
    display: block;
    margin: 10px 10px 0px 10px;
    color:#424242;
    text-decoration: none;
}