.wrapper{
    display:block;
    overflow:hidden;
    position:relative;
    width:100%
}
.wrapper .container{
    max-width:80rem
}
.wrapper>.container{
    padding-bottom:7.5rem;
    padding-top:7.5rem
}
.header{
    background-color:#f4f5f6;
    padding-top:1rem
}
@media(min-width:40rem){
    .header{
        padding-top:5rem
    }
}
.header+section{
    border-top:0
}
.header .container{
    border-top:0;
    padding-bottom:7.5rem;
    padding-top:7.5rem;
    position:relative;
    text-align:center
}
.header .title{
    font-family:Gotham Rounded A,Gotham Rounded B,Helvetica Neue,Arial,sans-serif
}
.header .img{
    height:15rem;
    margin-bottom:2rem
}
.header .img path{
    animation:7s a forwards;
    fill:#9b4dca;
    stroke:#9b4dca;
    stroke-dasharray:38321;
    stroke-miterlimit:10;
    stroke-width:15px
}
.header .button{
    margin-bottom:4rem;
    margin-top:2rem
}
@media(min-width:40rem){
    .header .button{
        margin-bottom:4rem;
        margin-top:2rem
    }
}
@keyframes a{
    0%{
        fill-opacity:0;
        stroke-dashoffset:38321
    }
    25%{
        fill-opacity:0;
        stroke:#9b4dca
    }
    to{
        fill-opacity:1;
        stroke-dashoffset:0
    }
}
.navigation{
    background:#f4f5f6;
    border-bottom:.1rem solid #d1d1d1;
    display:block;
    height:5.2rem;
    left:0;
    max-width:100%;
    position:fixed;
    right:0;
    top:0;
    width:100%;
    z-index:1
}
.navigation .container{
    padding-bottom:0;
    padding-top:0
}
.navigation .navigation-list{
    list-style:none;
    margin-bottom:0;
    margin-right:5rem
}
@media(min-width:80rem){
    .navigation .navigation-list{
        margin-right:0
    }
}
.navigation .navigation-item{
    float:left;
    margin-bottom:0;
    margin-left:2.5rem;
    position:relative
}
.navigation .img{
    fill:#9b4dca;
    height:2rem;
    position:relative;
    top:.3rem
}
.navigation .navigation-title,.navigation .title{
    color:#606c76;
    font-family:Gotham Rounded A,Gotham Rounded B,Helvetica Neue,Arial,sans-serif;
    position:relative
}
.navigation .navigation-link,.navigation .navigation-title,.navigation .title{
    display:inline;
    font-size:1.6rem;
    line-height:5.2rem;
    padding:0;
    text-decoration:none
}
.navigation .navigation-link.active{
    color:#606c76
}
.octocat{
    border:0;
    color:#f4f5f6;
    fill:#9b4dca;
    height:5.2rem;
    position:fixed;
    right:0;
    top:0;
    width:5.2rem;
    z-index:1
}
.octocat:hover .octocat-arm{
    animation:b .56s infinite;
    transform-origin:13rem 10.6rem
}
.octocat .octocat-arm,.octocat .octocat-body{
    fill:#f4f5f6
}
@keyframes b{
    0%,50%{
        transform:rotate(0)
    }
    25%,75%{
        transform:rotate(-25deg)
    }
}
.button-large{
    font-size:1.4rem;
    height:4.5rem;
    line-height:4.5rem;
    padding:0 2rem
}
.button-small{
    font-size:.8rem;
    height:2.8rem;
    line-height:2.8rem;
    padding:0 1.5rem
}

/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked:enabled + .slider {
    background-color: #0082fc;
}

input:focus + .slider {
    box-shadow: 0 0 1px #0082fc;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.row.row-head {
    border-bottom: 0.1rem solid #e1e1e1;
    padding: 1.2rem 1.5rem;
    text-align: left;
    font-weight: bold;
}

.device {
    border-top: 0.1rem solid #e1e1e1;
    padding: 1.2rem 1.5rem;
    text-align: left;
}

.device:first-of-type {
    border-top: none;
}

.device.connected:hover {
    cursor: pointer;
    background-color: #d4e9fe;
}

.device.connected * .arrow {
    display: block;
}

.arrow {
    width: 42px;
    height: 42px;
    font-size: 32px;
    display: none;
}

.collapsible {
    display: none;
    overflow: hidden;
}

.service {
    padding: 0 18px;
    background-color: white;
    display: none;
    overflow: hidden;
}

.device.connected + .panel {
    /*display: block;*/
}

.device.connected:not(.collapsed) + .service {
    display: block;
}

#connect-modal {
    float: right;
}

input[type='password'][disabled],
input[type='text'][disabled] {
    background-color: rgb(235, 235, 228);
}

dialog {
    border-radius: 0.6rem;
    box-shadow: 0 0 1em black;
    border-style: none;
}

.error {
    color: red;
}