@charset "UTF-8";
body {
    background-color: rgb(11, 12, 16);
    background-color: black;
    background-size: 100%;
    background-repeat: no-repeat;
    /*padding-top: 20px;*/
}
body,td,th {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    line-height: 20px;
    text-align: left;
    color: white;

    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;

}
b {
    font-weight:bold;
}
bold {
    font-weight:bold;
}
p {
    margin-bottom:24px;
    font-size: 14px;
    line-height: 20px;
    /*line-height: 25px;
    font-weight: lighter;*/
    padding-top: 5px;
    padding-top: 5px;
}
.small-text p {
  font-size: 12px;
  margin-bottom:12px;
  line-height: 18px;
}
h1,h2,h3,h4,h5,h6 {
    font-family:  Helvetica, Arial, sans-serif;
    /*letter-spacing:0.1px;*/
    font-weight:normal;
    font-style:normal;
    /*padding-top: 5px;*/
    padding-bottom: 10px;


}
h1 {
  /*text-transform:uppercase;*/
  font-size: 30px;
  line-height: 28px;
}
h2 {
  font-size: 23px;
}
h4 {
    font-size: 24px;
    color: #FFF;
    font-weight: bold;
}
a {
    color: #333;
}
a:hover {
    text-decoration: none;
    color: #000000;
}
.wrapper {
  width: 960px;
  margin: 0 auto;
  height: auto;
  min-height: 1px;
}





.row{
  border-top: 4px solid white;
  width: 100%;
  height: auto;
  float: left;
  min-height: 1px;
  padding: 10px 0 10px 0;
}

.col_1-1, .col_1-2, .col_1-3, .col_1-4 {
  float: left;
  margin: 10px;
  background-color: rgba(0, 0, 0, 0.0);
  height: auto;
  min-height: 200px;
  border: 8px solid rgba(0, 0, 0, 0.0);
  border-radius: 3px;
  padding: 10px
}
.col_1-1{
  width: calc(100% - 20px);
}
.col_1-2{
  width: calc(50% - 20px);
}
.col_1-3{
  width: calc(75% - 20px);
}
.col_1-4{
  width: calc(25% - 20px);
}
.col_clear {
  /*color: white;*/
  margin: 0 20px 20px 0;
  background-color: rgba(0, 0, 0, 0.0);
  border: 8px solid rgba(0, 0, 0, 0.0);
}
.bg_img {
  background-image: url(img/etheremin.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  min-height: 330px;
}



#menu {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 300px;
  height: 300px;
  font-size: 28px;
  -ms-transform: rotate(90deg); /* IE 9 */
  -webkit-transform: rotate(90deg); /* Safari */
  transform: rotate(90deg); /* Standard syntax */
  z-index: 100;

  font-size: 18px;

}

#menu a {
  color: white;
  margin-right: 7px;
  line-height: 21px;
}
#menu a:hover {
  color: red;
}















/*Top*/
#logo {
    background-image: url(img/logo.jpg);
    height: 122px;
    width: 91px;
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 888;
}
#product {
    background-image: url(img/et_mki.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
/*
    position: absolute;
    bottom: 60px;
    top: 60px;
    left: 60px;
    right: 60px;
*/
    position: relative;
    float: left;
    width: 100%;
    height: 500px;
    margin-top: 100px;
    margin-bottom: 100px;
    background-color: black;

}
#info {
    position: absolute;
    top:200px;
    left: 20px;
    right: 20px;
    padding: 20px;
    min-height: 326px;
    background-color: black;
    font-family: monospace;
}
#foot {
    height: 40px;
    position: absolute;
    bottom: 10px;
    left: 20px;
    right: 20px;
    color: #FFF;
}
.icon {
    height: 21px;
    width: 20px;
    background-color: #222;
    background-image: url(img/icons.jpg);
}
.icon-box {
    margin: 1px;
    padding: 6px;
    height: 32px;
    width: 32px;
    background-color: #222;
    float: left;
}

a:hover .icon-box {
    background-color: #666;
}
a:hover .icon-box .icon {
    background-color: #666;
}
#app-store {
    width: 135px;
    height: 40px;
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 999;
    background-image: url(img/app-badge.png);
    background-repeat: no-repeat;
}
#play-store {
    width: 135px;
    height: 40px;
    position: absolute;
    bottom: 10px;
    right: 155px;
    z-index: 999;
    background-image: url(img/play-badge.jpg);
    background-repeat: no-repeat;
}
#google_translate_element {
	right: 7px;
	top: 7px;
	position: relative;
	float: right;
}

/*        #header {
            width:auto;
            display: grid;
            grid-template-columns:repeat(5, 1fr);
            grid-gap: 3em;
            height: 43px;


        }
        #header > div {
            height: 18px;
            font-size: 1.5em;
            padding-left: 1.2em;
        }


        .grid {
            padding: 2em;
            margin: 0 auto;
            width:100%;
            display: grid;
            grid-template-columns:repeat(4, 1fr);
            grid-gap: 3em;
            grid-auto-rows: minmax(100px, auto);
        }
        .grid > div {
            padding: 0.5em;
            padding-bottom: 2em;
            color: #999;

        }
        .grid > div > h2 {
            padding-top: 0.4em;
            font-weight: 100;
            
        }
        .grid >div:nth-child(odd) {
        }

        .tag span {
            color: #999;
            font-size: 0.8em;
            font-weight: bold;
            background-color: #222;
            border-radius: 20px;
            padding: 0.3em 0.5em 0.3em 0.5em;
        }
        .grid-column2_4 {
          grid-column:2/4;
        }*/





/*--------------------*/



        body,td,th {
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            font-size: 12px;
            line-height: 16px;
            text-align: left;
            color: #353535; 
            text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
            text-rendering: optimizeLegibility !important;
            -webkit-font-smoothing: antialiased !important;
        }
        body {
            background-color: #eee;
            /*background-image: url("img/baseline.jpg");*/
            background-repeat: repeat;
            background-size: 64px;
            /*padding-top: 16px; */
        }
        #header {
            width:auto;
            display: grid;
            grid-template-columns:repeat(5, 1fr);
            grid-gap: 3em;
            height: 43px;


        }
        .grid {
            padding: 32px;
            display: grid;
            grid-template-columns:repeat(4, 1fr);
            grid-gap: 16px;
        }
        .big {
            grid-column: span 2;
        }
        .full {
            grid-column: span 4;
        }
        .grid > div {
            padding: 16px;
            padding-bottom: 12px;
            /*padding: 0.0em;*/
            /*padding-bottom: 0em;*/
            /*background-color: #111;*/
            color: #999;
            overflow: none;
            min-height: 79px;

            position: relative; /* so we can position the logo based on this container */
  /*text-align: center;  so the skyline image is horizontally centered */
        }
        .grid > div > img {
            padding-top: 7px;
        }
        /*.grid > div > h2 {
            padding-top: 0.6em;
            font-weight: 100;
            
        }*/
        h1, h2, p {
            color: #353535;
        }
        h1 {
            font-weight: 500;
            font-size: 32px; 
            letter-spacing: -1px;
            line-height: 32px;
            padding-top: 3px;
        }
        h2 {
            font-size: 24px;
            line-height: 24px;
            padding-top: 10px;
            padding-bottom: 19px;
        }
        h3 {
            color: #333;
            font-size: 12px;
            font-kerning: 2px;
        }

        .barline {
            border-bottom: 4px solid #353535;
            margin: 16px;
            margin-bottom: -22px;
        }


        .button:hover {
            color: black;
            background-color: white;
            cursor: pointer;
            box-shadow: 1px 1px 5px black;
        }
        .button {
            height: 32px;
            width: 32px;
            border-radius: 16px;
            border: solid 4px white;
            padding: 0px 0px 0px 1px;
            /*margin: 4px;*/
            text-align: center;
            font-size: 32px;
            font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
            font-weight: bold;
            color: white;
            z-index: 999;
            /*margin-top: -195px;*/

            position: absolute; /* these 4 lines will center the logo */
            top: 80%;
            left: 80%;
            transform: translate(-50%, -50%);

        }



h2 {
    font-size: 21px;
    line-height: 24px;
    padding-top: 13px;
    font-weight: bold;
}
h1 {
    font-weight: bold;
    font-size: 27px;
    letter-spacing: -1px;
    line-height: 32px;
    padding-top: 3px;
}
.menus {
    font-size: 16px;
    font-weight: bold;
}

#blackbar {
    color: white;
    position: absolute;;
    width: 100%;
}
#logos {
    display: block;
    width: 80px;
    height: 80px;
    background-image: url(../DBP_Logo_bits.svg);
    background-size: 80px 80px;   
    margin: 16px;
    margin-bottom: 0px; 
}
#blackbar #logos {
    display: block;
    width: 80px;
    height: 80px;
    background-image: url(../DBP_Logo_bits_white.svg);
    background-size: 80px 80px;    
}

#blackbar a:link {color: white; text-decoration: none;}
#blackbar a:visited {color: white; text-decoration: none;}
#blackbar a:hover {color: white;}
#blackbar a:active {color: white; text-decoration: none;}

#news {
    background-color: #655bbb;
    color: white;
    border-radius: 10px;
    padding: 30px 33px 0px 33px;
}