/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-width : 320px) 
and (max-width : 480px) {
/* Styles */
#login-head h1{
    font-size: 2.3rem;
}
#login-box h3{
    font-size: 2.5rem;
}
.logo img{
    height:50px;    
}

.clock{
    font-size:1.7rem;
}

.dates{
    font-size:1rem;
}

#login-box{
    width:100%;
    border:none;
}
#content-box{
    width:100%;
    border:none;
}
.container{
    padding:0;
    margin:0;
}
#login-box h3{
    font-size: 1.4rem;   
}

#content-box h3{
    font-size: 1.4rem !important;
}
#content-box h2{
    font-size: 1rem !important;
}
#content-box .thanks-txt{
    font-size: 0.8rem !important;
}
#content-box .starter-txt{
    font-size: 0.8rem !important;
}
#button-menu{
    margin-top:10px;
    width:80%;
    left:0;
    right:0;
    height:45px;
    font-size: 1.1rem !important;
}
#closer-img{
    height:50px;
}
#button-starter{
    margin-top:20px;
    width:150px;
    height:30px;
    left:0;
    right:0;
    font-size: 1.1rem !important;
}
#stopwatch h1{
    font-size: 3.5rem !important;
}
#good{
    height:70px ;
}
#bad{
    height:70px ;
}
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
#login-head h1{
    font-size: 2rem;
}
#login-box h3{
    font-size: 2.5rem;
}
.logo img{
    height:35px;    
}

.clock{
    font-size:1.4rem;
}

.dates{
    font-size:0.9rem;
}

#login-box{
    /* width:240px; */
    width:100%;
    border:none;
    margin-bottom:100px;
}
#content-box{
    width:100%;
    border:none;
    margin-bottom:100px;
}
#login-box h3{
    font-size: 2.5rem;
}
#content-box h3{
    font-size: 1.4rem !important;
}
#content-box h2{
    font-size: 1rem !important;
}

#button-menu{
    margin-top:10px;
    width:80%;
    left:0;
    right:0;
    height:45px;
    font-size: 1.1rem !important;
}
#button-starter{
    font-size: 1.1rem !important;
}
#stopwatch h1{
    font-size: 3rem !important;
}
#good{
    height:60px ;
}
#bad{
    height:60px ;
}
}