body,
html {
    background-color: #fdfdfd;

    background-image: url('./img/01.png');
    background-attachment: fixed;
    background-position: left;
    background-position-y:100px;
    background-position-x: 100px;
    background-repeat: no-repeat;

    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}

a{
    text-decoration: none;

    font-size: 1.3em;

    color:#333;
}

a:visited{
    color:#333;
}

a:hover{
    text-decoration: underline;

    color:#666;
}

a:active{
    color:#666;
}

h2{
    color:#666;
}

.header {
    float: left;
    width: 100%;
}

.header img {
  
    margin: .1em;
 
    display: inline;

    float:left;

    height:100px;

}

.header h2{
    font-weight:300;
    font-size: .9em;
    margin:.1em;
    float:left;
}

.header-menu{
    
    width:60%;

    float:left;

    position: relative;

    right:100px;

    font-size: larger;
    font-weight: 400;
}


.header-menu ul{
    margin:0;

    float:right;
}

.header-menu li{
    list-style-type: none;

    float:left;

    padding: 1em;
}

.material-symbols-outlined {
  font-size: 32px !important;
  margin:10px;

  position:absolute;

  right:20px;
}

.splash{
    margin:auto;

    width:75%;

    clear: both;

    position: relative;

    top:100px;
}

.splash-content{
    margin:1em;

    width:80%;
    
    border-radius: 8px;

    background-color: #fff;

    /*box-shadow: 8px 8px 100px 5px rgba(0,0,0, .25);
*/
    float:left;
}

.splash-description{
    font-size: 2.6em;

    display: block;

    color:#555;

    width:65%;

    font-weight: 500;

    float:left;

}

.splash-subdescription{
    font-size: .8em;

    color:#555;

    font-weight: 300;

    float:left;

    margin: .5em 0;
}

.splash-img{
    float:right;

}

.splash-img img{

    width:300px;
}

.graphs{
    margin:auto;

    margin-bottom: 4.5em;

    width:75%;

    clear:both;

    padding-top:1.5em;

    position: relative;

    top:100px;

    font-size: x-large;
}

.graphs .material-symbols-outlined{
    font-size: 4em !important;
    font-weight: 700;
    float: left;
    position: relative;
    width: unset;
    margin:0;
}

.graph-content{
    margin:1em;
}

.graph-content div{
    width:100%;
    display:inline-block;
}

.graph-content span{
    font-size: 2em;
    font-weight: 600;

    float:left;

    color:#333;

    margin:.5em 0 .5em 0;
}

.tiles{

    margin:auto;

    width:75%;

    clear:both;

    padding-top:3em;

    position: relative;

    top:100px;
}

.tile{
    border-radius: 8px;
    
    background-color: #fff;

    color:rgb(186, 124, 9);

    float:left;

    width: 25%;

    height: 15em;

    margin: 1em;
    
    padding:1em;

    position:relative;
}

.tile div{
    margin: 1em 0 1em 0;
}

.tile span{
    margin-top: 30px;
    
    float:left;

    position: absolute;

    bottom:3em;
}

.tile a{
    font-size: larger;

    font-weight: 500;

    color: #fff;

    padding: .5em;

    background-color: #666;

    border-radius: 8px;

    text-decoration: none;

}

.tile h3{

    border-bottom:solid 3px rgb(186, 124, 9);

    padding-bottom:.8em;
}


.integrations-content{   
    border: double 1px #fff;

    z-index: 100;

    padding:1em;

    background-color: #404040;

    position: relative;
    top:100px;

    float:left;

    width:100%;

    color:#fefefe;

    font-size: 2em;
}

.integrations-content h3{
    font-size: 1.2em;

    text-align: center;
}

.integrations-content label{
    text-align: center;

    margin:1.5em;

    display:block;
}

.app-item{
    float:left;
    width:30%;

    text-align: center;

    margin-top:1.5em;
}

.app-item img{
    width:5em;
}

.app-item .large-image{
    width:8em;
}

.footer{

    float:left;

    width:90%;

    padding:3em;

    margin-top:3em;

    font-size: .5em;
}


.footer-menu ul{
    margin:0;
}

.footer-menu li{
    list-style-type: none;

    float:left;

    padding: 1em;
}