body{
    background-color:#181818 !important;
}

.xfinLogo{
    font-size:1rem;
}

.xfinGreyFont{
    color:#D8D8D8;
}

html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

.welcome-container {padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
	margin-top: -150px; /* negative value of footer height */
	height: 150px;
    clear:both;
    text-align:center;
    text-decoration: underline;
} 


.first-row{
    padding-top:260px;
    }

.welcome-container:after {
    content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    margin: 0 auto; /* This will center the border. */
    width: 10%; /* Change this to whatever width you want. */
    padding-top: 1px; /* This creates some space between the element and the border. */
    border-bottom: 2px solid #D8D8D8; /* This creates the border. Replace black with whatever color you want. */
}

.instructions-container{
    padding-top:20px;
}

.connected{
    font-size:18px;
}
.body-text{
    font-size:14px;
}

.button-container{
    padding-top:100px;
}

.sign-in{
    border: 1px solid #FFFFFF;
border-radius: 100px;
font-size: 14px;
color: #FFFFFF;
background:none;
letter-spacing: 0.16px;
width:85px;
height:40px;
}

@media (min-width: 1200px) {
    .nav-container{
        max-width: 100%;
    }
    
    html{
        height:100%;
        border: 1px solid transparent;
    }
    .welcome-container{
        background:none;
    }
    .first-row{
        
        }
    .instructions-container{
        max-width:700px;
    }
    .devices-container{
        max-width:750px;
    }
    .button-container{
        padding-top:0px;
    }
}

@media (min-width: 992px) and (max-width:1199px){
    .nav-container{
        max-width: 100%;
    }

    html{
        height:100%;
    }
    .welcome-container{
        background:none;
    }
    .first-row{
        
        }
    .instructions-container{
        max-width: 700px;
    }
    .devices-container{
        max-width: 550px;
    }
    .button-container{
        padding-top:0px;
    }
}
@media (min-width: 768px) and (max-width:991px){
    .nav-container{
        max-width: 100%;
    }

    html{
        height:100%;
    }
    .welcome-container{
        background:none;
    }
    .first-row{
        
        }
    .instructions-container{
        max-width: 700px;
    }
    .devices-container{
        max-width: 550px;
    }
    .button-container{
        padding-top:0px;
    }
}
@media (min-width: 576px) and (max-width:767px){
    body{
        
              
    }
    html{
        height:100%;
    }

}

@media (min-height: 0px) and (max-height:730px){
.xfinwelcome{
    font-size: 2rem !important;
}
.button-container{
    padding-top:0px !important;
}
.first-row{
    padding-top:175px !important;
    }
}

@media (min-width: 0px) and (max-width:575px){
    body{
        
              
    }
    html{
        height:100%;
    }
    
    .welcome-container{
        padding-right:25px;
        padding-left:25px;
    }
    .instructions-container{
        padding-right:25px;
        padding-left:25px;
    }
    .devices-container{
        padding-right:25px;
        padding-left:25px;
    }
    .first-row{
        padding-top:240px;
        }
}