@charset "UTF-8";
/* CSS Document */


/************************************************************** viewport >1401 **************************************************************/
@media only screen and (min-width: 1400px) {
.wrapper {width:1380px; margin:0 auto;}
.container {width:100%;}
.profileHeader {height: 95px}
    
.totalStats {display: flex; justify-content: flex-end; align-items: center;}    
.totalStats h3 {font-size: 5em; font-weight: bold; margin:0 0 -10px 0;}
.totalStats span {font-size: 1.2em; }
.totalStats > div:first-child {margin-right: 5rem!important; }

.workout-slider {height: 200px!important;}
    
#login .bg-signin {height: 500px}

}




/************************************************************** viewport 1301 to 1399 **************************************************************/
@media only screen and (min-width: 1301px) and (max-width:1399px) {
.wrapper {width:1280px; margin:0 auto; }
.container {width:100%;}
.profileHeader {height: 95px}

.totalStats {display: flex; justify-content: flex-end; align-items: center;}    
.totalStats h3 {font-size: 5em; font-weight: bold; margin:0 0 -10px 0;}
.totalStats span {font-size: 1.2em; }
.totalStats > div:first-child {margin-right: 5rem!important; }

.columnProfile h3 {font-size: 1.8em}
.columnProfile p {font-size: 1.1em;}
    
#login .bg-signin {height: 400px}

}




/************************************************************** viewport 1201 to 1300 **************************************************************/
@media only screen and (min-width: 1201px) and (max-width:1300px) {
.wrapper {width:1180px; margin:0 auto; }
.container {width:100%;}
.profileHeader {height: 95px}

.totalStats {display: flex; justify-content: flex-end; align-items: center;}    
.totalStats h3 {font-size: 5em; font-weight: bold; margin:0 0 -10px 0;}
.totalStats span {font-size: 1.2em; }
.totalStats > div:first-child {margin-right: 5rem!important; }

.columnProfile h3 {font-size: 1.8em}
.columnProfile p {font-size: 1.1em;}
    
#login .bg-signin {height: 400px}
}



/************************************************************** viewport 980 to 1200 **************************************************************/
@media only screen and (min-width: 980px) and (max-width:1200px) {
.wrapper {width:980px; margin:0 auto;}
.container {width:100%}
.profileHeader {height: 95px}
    
.totalStats {display: flex; justify-content: flex-end; align-items: center;}    
.totalStats h3 {font-size: 5em; font-weight: bold; margin:0 0 -10px 0;}
.totalStats span {font-size: 1.2em; }
.totalStats > div:first-child {margin-right: 5rem!important; }

.columnProfile h3 {font-size: 1.6em}
.columnProfile p {font-size: 1em;}
    
#login .bg-signin {height: 400px}

}



/************************************************************** viewport 980 to 992 - ac **************************************************************/
@media only screen and (min-width: 980px) and (max-width:992px) {

.totalStats {display: flex; justify-content: flex-end; align-items: center;}    
.totalStats h3 {font-size: 3.8em; font-weight: bold; margin:0 0 -10px 0;}
.totalStats span {font-size: 1.1em; }
.totalStats > div:first-child {margin-right: 5rem!important; }

/* #actDetails .info .number {font-size: 2.4em;} */
    
.columnProfile h3 {font-size: 1.6em}
.columnProfile p {font-size: 1em;}

    
}





/***************************** viewport 941 to 979 *****************************/
@media only screen and (min-width: 941px) and (max-width: 979px) {
.wrapper {width:100%;}
.container {width:100%}
.profileHeader {height: 95px}

.tab-pane canvas {margin-top:-40px!important}
.totalStats {display: flex; justify-content: flex-end; align-items: center;}    
.totalStats h3 {font-size: 3.8em; font-weight: bold; margin:0 0 -10px 0;}
.totalStats span {font-size: 1.1em; }
.totalStats > div:first-child {margin-right: 5rem!important; }
    
/* #actDetails .info .number {font-size: 2.4em;} */

.columnProfile h3 {font-size: 1.6em}
.columnProfile p {font-size: 1em;}
    
#login .bg-signin {height: 400px}
	
}



/************************************************************** viewport 768 to 940 **************************************************************/
@media only screen and (min-width: 768px) and (max-width: 940px) {
.wrapper {width:100%;}
.container {width:100%}
    
.profileHeader {height: 95px}
    
.tab-pane canvas {margin-top:-30px!important}
.totalStats {display: flex; justify-content: flex-end; align-items: center;}    
.totalStats h3 {font-size: 3.8em; font-weight: bold; margin:0 0 -10px 0;}
.totalStats span {font-size: 1.1em; }
.totalStats > div:first-child {margin-right: 5rem!important; }

/* #actDetails .info .number {font-size: 2.4em;} */

.columnProfile h3 {font-size: 1.6em}
.columnProfile p {font-size: 1em;}
    
#login .bg-signin {height: 400px}


}
	
	

/************************************************************** viewport 480 to 767 **************************************************************/
@media only screen and (min-width: 480px) and (max-width: 767px) {
.wrapper {width:100%;}
    
main.signed {padding-bottom:30px!important;}

.profile { width: 80px; height: 80px;}
.profileHeader {height: 75px}

.tab-pane canvas {margin-top:-10px!important}
    
.footer-icon-container {padding:5px 15px;}
.footer-icon {font-size: 17px}
.footer-icon-container a div:nth-child(2) {font-size: .8em}
.add-button {font-size: 23px; width: 65px; height: 65px ;margin-top:-50px}
.gradient {bottom: 70px}
    
.totalStats {display: flex; justify-content: flex-end; align-items: center;}    
.totalStats h3 {font-size: 2em; font-weight: bold; margin:0 0 -10px 0;}
.totalStats span {font-size: .8em; }
	
#actDetails .chartDetails {flex-wrap: wrap; }
#actDetails .info {flex-basis: 50%; margin-bottom:20px;}
    
#login .bg-signin {height: 400px}

}





/************************************************************** viewport 400 to 479 **************************************************************/
@media only screen and (min-width: 400px) and (max-width: 479px) {
.wrapper {width:100%;}
    
main.signed {padding-bottom:30px!important;}
    
.profile { width: 80px; height: 80px;}
.profileHeader {height: 75px}
    
.tab-pane canvas {margin-top:0px!important}
.dateSelection {width: 120px; margin-left:5px;}
    
.totalStats {display: flex; justify-content: flex-end; align-items: center;}    
.totalStats > div {text-align: right; width:inherit!important;}    
    
.totalStats h3 {font-size: 1.8em; font-weight: bold; margin:0 0 -10px 0}
.totalStats span {font-size: .8em; }
    
.footer-icon-container {padding:5px 15px;}
.footer-icon {font-size: 17px}
.footer-icon-container a div:nth-child(2) {font-size: .8em}
.add-button {font-size: 23px; width: 65px; height: 65px ;margin-top:-50px}
.gradient {bottom: 70px}
    
#actDetails .chartDetails {flex-wrap: wrap; }
#actDetails .info {flex-basis: 50%; padding-bottom:40px; line-height: 1.2em}
#actDetails .info .number {font-size: 2.2em;}
#actDetails .info .unit {font-size: 1.3em;}
    
.tns-controls button {padding: 10px 15px; border-radius:50%;}
}





/************************************************************** viewport 321 to 300 **************************************************************/
@media only screen and (min-width: 321px) and (max-width: 399px) {
.wrapper {width:100%;}
    
main.signed {padding-bottom:30px!important;}

.profile { width: 80px; height: 80px;}
.profileHeader {height: 75px}
    
.tab-pane canvas {margin-top:-80px}
.dateSelection {width: 120px; margin-left:5px;}
.totalStats > div {text-align: right; width:100%; padding:0 20px 10px}    
.totalStats h3 {font-size: 1.8em; font-weight: bold; margin:0 0 -10px 0;}
.totalStats span {font-size: .8em; }

.footer-icon {font-size: 18px}
.add-button {font-size: 25px; width: 65px; height: 65px;}
        
#actDetails .chartDetails {flex-wrap: wrap; }
#actDetails .info {flex-basis: 50%; padding-bottom:30px; line-height: 1.2em}
#actDetails .info .number {font-size: 1.5em;}
#actDetails .info .unit {font-size: 1.3em;}
    
.tns-controls button {padding: 8px 12px; border-radius:50%;}


	
}


/************************************************************** viewport <320 **************************************************************/

@media only screen and (max-width: 320px) {
.wrapper {width:100%}
	
.profile { width: 60px; height: 60px;}
.profileHeader {height: 75px}
    
.tab-pane canvas {margin-top:-80px}
.dateSelection {width: 120px; margin-left:5px;}
.totalStats > div {text-align: right; width:100%; padding:0 20px 10px}    
.totalStats h3 {font-size: 1.8em; font-weight: bold; margin:0 0 -10px 0;}
.totalStats span {font-size: .8em; }
    
.footer-icon {font-size: 18px}
.add-button {font-size: 25px; width: 65px; height: 65px;}

#actDetails .chartDetails {flex-wrap: wrap; }
#actDetails .info {flex-basis: 50%; padding-bottom:30px; line-height: 1.2em}
#actDetails .info .number {font-size: 1.5em;}
#actDetails .info .unit {font-size: 1.3em;}

.tns-controls button {padding: 8px 12px; border-radius:50%;}




}