/* ================================ +
   			 Quatre Bras
 + ================================ */



/* 
** Made by: Thomas Lievestro
** Email:	info@lievestro.com
** Website:	www.lievestro.com
*/



/* ================================ +
               STANDARDS 
+  ================================ */

/* start RESET DEFAULT styles */
*{ 
	margin:					0;
	padding:				0; 
	border: 				0;
	-webkit-box-sizing: 	border-box;
	-moz-box-sizing: 		border-box;
	box-sizing: 			border-box;
	-webkit-user-select: 	none;
	-webkit-tap-highlight-color: transparent;
    font-family:            'Open Sans', sans-serif !important;
}

*:focus { 
	outline: 				0; 
}

::-webkit-input-placeholder {
   color: #fff;
}

:-moz-placeholder { /* Firefox 18- */
   color: #fff;
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #fff;
}

:-ms-input-placeholder {  
   color: #fff;
}

html {
	width:					100%;
    background:             #111;
}

body { 
	width:					100%;
	color:					#fff;
}
	
	
img { 
	border:					0px; 
}	

ul { 
	list-style:				none; 
	white-space: 			nowrap; 
}

li a {
	height:					1%; /* geen whitespace tussen link list items */
}

input {
    -webkit-appearance: none;
    border-radius: 0;
	-webkit-user-select: 	auto;
}

a { 
	text-decoration:		none; 
	color:					#fff
}

a:hover{ 
	text-decoration:		none; 
	color:					#fff;
}

a img {
	border: 				0px;	
}

.clear {
	clear:					both;
}

p {
	margin-top:				12px;
	margin-left:			2px;
	
}

address{
	font-style:				normal;
}

textarea {	
	overflow:				auto;
}

/* end RESET DEFAULT styles */


/* Tell old browsers to render HTML 5 elements as block */  
header, footer, aside, nav, article, section {  
  display: block;  
}  



/* ================================ +
             GLOBAL LAYOUT
+  ================================ */

/*#bg {
	width:					100%;
	height:					100%;
	position:				fixed;
    overflow:               hidden;
}*/
#page_stats #bg {
	width:					100%;
	height:					100%;
	position:				fixed;
    background:		        #111;
}

#page_home #bg {
    width:                  100%;
    height:                 100%;
    position:               fixed;
    background:             #111;
}

html.login {
    background:		        #DA2820;
}

#wrapper {	
	width: 					100%;
	margin:					0 auto;
}

.page_stats #wrapper {  
    position:               absolute;
    width:                  100%;
    height:                 100%;
    margin:                 0 auto;
    overflow:               hidden;
    background:             transparent !important;
}

.ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper {
	background:	    		transparent !important;
}

#header {
    position:               fixed; 
    top:                    0;
	width:					100%;
	height:					100px;
	overflow:				hidden;
    background:             #DA2820;
    z-index:                5000;
    -webkit-box-shadow:     0 2px 3px 0 rgba(0, 0, 0, 0.2);
    box-shadow:             0 2px 3px 0 rgba(0, 0, 0, 0.2);
}

#iphone-x-fix {
    position:               absolute;
    background:             #DA2820;
	width:					100%;
	height:					50px;
	top:					-50px;
}

.fixfixed #header { 
    position: absolute; 
} 

#header h1 {
    font-size:              17px;
    font-weight:            600;
    text-transform:         uppercase;
    cursor:                 pointer;
    margin:                 35px 0 0;
}

#header h1 .arrow_down,
#header h1 .arrow_up {
    position:               absolute;
    margin:                 0px 0 0 3px;
}

#header h1 .arrow_up{
    display:                 none;
}

#header h1.isDown .arrow_down{
    display:                 none;
}

#header h1.isDown .arrow_up{
    display:                 inline;
}

nav {
    position:               fixed;
    width:                   100%; 
    background:             #DA2820;
    z-index:                4999;
    top:                    100px;
    margin-top:             -300px;
}

nav li {
    width:                  100%;
    height:                 50px;
    text-align:             center;
    border-bottom:          1px solid rgba(255, 255, 255, 0.2); 
}

nav li a {
	display:                block;
    height:                 50px;
    padding:                15px 0 0;
    width:                  100%;
    font-weight:            600;
}

#container {
	margin:                 80px 0 0 0;
}


div[id^="roundshot_container_"], div[id*=" roundshot_container_"] {
    position:               absolute !important;
    width:                  100% !important;
    z-index:                -1 !important;
    margin:                 -80px 0 0 0;
}


h1 {
	font-size:				45px ;
	font-weight:			100 ;
	color:					#fff ;
	text-align:				center;
	margin:					80px 0 0;
}

h2 {
    margin:                 20px 0;
	font-size:				30px ;
	font-weight:			100 ;
	color:					#fff ;
	text-align:				center;
}

h3 {
	font-size:				22px;
	font-weight:			100;
	color:					#fff;
	text-shadow: 			none ;
	text-align:				center;
}

h4 {
    font-size:              20px;
    font-weight:            100;
    color:                  #fff;
}



/* ================================ +
                LOGIN
+  ================================ */

#flag_cross {
	width:					140px;
	height:					140px;
	margin:					80px auto 60px;
}
	
#flag_cross .small {
	display:				none;
}

#flag_cross .middle {
	display:				block;
}

.login h1 {
	display:				block;
	position:				fixed;
	width:					100%;
	bottom:					7%;
	font-size:				45px;
	font-weight:			100;
	text-align:				center;
    margin:                 15px 0 0;
}

.login h1 span {
	display:                block;
	font-size:             13px;
}

.error_container {
    width:                  80%;
    margin:                 5px 10%;
}

.login #wrapper, #login_form_container {
    display:               none;
}



input{
	display: 				block;
	width: 					80%;
	border-bottom:			1px solid rgba(255, 255, 255, 0.5);
	background:				transparent;
	padding: 				9px 10px;
	font-size:				20px;
	color: 					#fff;
	margin:					0 10% 20px 10%;
	
}

input[type="text"]:focus{
    border-bottom:          1px solid rgba(255, 255, 255, 1);   
}

input[type="submit"] {
	width:					80%;
	height:					50px;
	margin:					0 10% 20px 10%;
	border:					1px solid #fff;
	border-radius:			2px;
}


input[type="submit"]:hover {
	background:				#fff;
    color:		    	    #DA2820;
}

input[type="submit"]:active {
	background:				#fff;
    color:		    	    #DA2820;
}


#logout {
    display:                block;
    width:                  300px;
    margin:                 300px auto 50px;
    padding:                15px 0;
    border:                 1px solid #fff;
    border-radius:          2px;
    text-align:             center;
}


#days {
x	width: 					784px;
x	margin: 				10px auto;
	
}

#days > li {
	width: 					100%;
	height: 				64px; 
	padding:				0 8%;
	-webkit-user-select: 	none;
	-moz-user-select: 		none;
	-ms-user-select: 		none;
	user-select: 			none;
} 

body:not(.touch_device) #days > li:hover {
    background:             #2a2a2a;
} 

#days .status_button {
    position:               absolute;
	display:				block;
	width:					38px;
	height:					38px;
	margin:                 13px 0 0;
    z-index:                4;
}

#days .status_button.editable {
    cursor:                 pointer;
}

#days .loader {
    display:                none;
    position:               absolute;
    margin:                 14px 0 0 1px ; 
    z-index:                5;
}

#days .info {
	position:				absolute;
	width:					60%;
	margin:					20px 0 0 50px;
}

#days .info h2 {
    margin: 0;

}

#days .hr_container {
    position:               absolute;
    width:                  92%;
    margin:                 63px 0 0 0;
    padding:                0 0 0 19px;
}

#days .hr_container hr {
	width:					100%;
	border:					0px;
    border-bottom:          1px solid rgba(255, 255, 255, 0.1); 
}



#days > li span {
	position:				relative;
	z-index:				1;
}

#days > li.fade * {
	opacity: 				0.5;
}

#days > li .vertical_line_start {
    position:              absolute;
    margin:                0 0 0 0;
}

#days > li .vertical_line_end {
	position:              absolute;
	margin:                51px 0 0 0;
}

#days > li .persons {
    position:               absolute;
    right:                  10%;
    margin:                 15px 0 0 ;
    opacity:                0.8;
}

#days > li .persons span{
    margin:                 -10px 0 0;
}

#days > li .persons .edit {
    display:               none;
    position:              absolute;
    margin:                0 0 0 -30px;
}

#days > li .persons .edit svg {
    cursor:                pointer;
}

#days > li .persons .edit svg path:active {
    fill: #da2820;
}

#days > li .school_vacations {
    position:               absolute;
    margin:                 10px 0 0 -4px;
    z-index:                3;
}

#days > li .vacation_region {
    position:               absolute;
    left:                  8%;
    width:                 9px;
    height:                31px; 
    margin:                 19px 0 0 -20px;
    padding:               0px 0 0  2px; 
    border:                 1px solid #fff;
    opacity:                0.6;
}

#days > li .vacation_region li {
    position:              absolute;
    width:                 3px;
    height:                7px;
    margin:                2px 0 0 0px;    
    background:            #fff;    
}

#days > li .vacation_region li.middle {
    margin:                11px 0 0 0px;  
}

#days > li .vacation_region li.south {
    margin:                20px 0 0 0px;  
}




.hover {
    -webkit-user-select: none;
    -webkit-touch-callout: none;        
 }

#days > li .persons .edit .plus_button {
	position:              absolute;
    margin:                0 0 0 83px;
}

.touch_device #days > li .persons .edit,
#days > li .persons .edit.active {
    display:               block;
}


#days > li h4.tiny {
	display:               none;
}


.stats {
	width:		100%;
	margin:		30px 0 0 0;
}

.stats li {
	width:		100%;
	height:		250px;
	float:		left;
	overflow:	hidden;
	white-space: normal;
}

.stats .total {
    position: absolute;
    text-align: center;
    width:      50%;
    margin:     66px auto 0 ;
    color:      #666;
}

#statistieken li h2 {
	width:		100%;
	overflow:	hidden;
	color:		#fff;
	
}

#statistieken li h3 {
	color:		#fff !important;
	
}

#total_overnights span {
    position:   absolute;
}


#total_overnights svg {
    position:   relative;
    left:       50%;    
    margin:     0 0 10px -75px;
}

#statistieken li .canvas {
	position:	relative;
	left:	50%;	
	margin: 0 0 10px -150px;
}



.swiper-nav .swiper-wrapper {
	display:none;
}

.swiper-nav {
	display:none;
	background:	transparent !important;
	height:	50px;
	height:	0px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
}

.swiper-scrollbar {
    display: none;
}


#basisschema #container {
	display: flex;
	width: 100vw;
	overflow: hidden;
	flex-direction: row;
   margin:                     150px 0 0;
}

#week_numbers {
	width:                     40px;
	margin:                    0 0 0 6%;
}


#week_numbers li {
    width:                     40px;
    height:                     40px;
    padding:                    11px 0 0 ;
}

.weeks {
    width:                      65px;
    float:                     left;
}

.weeks li {
    width:                      65px;
    height:                     40px;
    border-bottom:              1px solid rgba(255, 255, 255, 0.1); 
    text-align:                 center;
}

#week_numbers li.year_header,
.weeks li.year_header {
    position:                   fixed;
    height:                     50px;
    margin:                     -50px 0 0;
    padding:                    15px 0 0 ;
    background:                 #111;
    border-bottom:              1px solid rgba(255, 255, 255, 0.1); 
}






/* ================================ +
          ENERGY CONSUMPTION
+  ================================ */

#energy > li {
    width:                  100%;
    height:                 155px; 
    -webkit-user-select:    none;
    -moz-user-select:       none;
    -ms-user-select:        none;
    user-select:            none;
} 

#energy > li.new-year-div {
  background:             #2a2a2a;
}

body:not(.touch_device) #energy > li:hover {
    background:             #2a2a2a;
} 


#energy > li > hr {
    position:               absolute;
    width:                  100%;
    border:                 0px;
    border-bottom:          1px solid rgba(255, 255, 255, 0.1); 
    margin:                 154px 0 0 0;
}

#energy > li > ul {
	float:                  left;
}

#energy .period_title {
	width:                  35px;
    margin:                 0 0 0 8%;
	padding:                15px 0 0 0;
}

#energy .family_1 .period_title {
  color:                  #BC7416;  
}

#energy .family_2 .period_title {
  color:                  #1887A8;  
}

#energy .family_3 .period_title {
  color:                  #0BCE59;  
}

.meter_1 span, .meter_2 span {
font-size:  12px;
}

#energy .family_1.title {
color:                  #BC7416;  
opacity: 1 !important;
}

#energy .family_2.title {
color:                  #1887A8;  
opacity: 1 !important;
}

#energy .family_3.title {
color:                  #0BCE59;  
opacity: 1 !important;
}

#energy .period_title li {
    width:                  35px;
    overflow:               hidden;
    text-align:             center;
    margin-bottom:          8px;
}

#energy .period_title .day {
	display:               block;
	font-size:             25px;
	line-height:           25px;
	font-weight:           100;
}

#energy .period_title .month {
    display:               block;
    font-size:             11px;
    font-weight:           500;
    text-transform:         uppercase;
}

#energy .period_title .year {
    display:               block;
    font-weight:           400;
    font-size:             11px;
}

#energy .period_title hr {
    position:               static;
    width:                  50%;
    margin:                 0 0 0 25%;
    border:                 0px;
    border-bottom:          1px solid rgba(255, 255, 255, 0.1); 
} 


#energy .new-year-div .departure,
#energy .new-year-div .total {
	margin:                0 0 0 6.2%;
}

#energy .meter {
    margin:                0 0 0 12%;
}



#energy .arival,
#energy .departure,
#energy .total {
	margin:                0 0 0 8%;
}


#energy .meter li,
#energy .arival li,
#energy .departure li,
#energy .total li {
	height:                 24px;
    margin:                 0 0 9px 0;
    font-weight:            100;
    line-height:            35px;
    font-size:              18px;
}

#energy .meter li {
	text-align:            center;
    opacity:                0.3;
    font-size:              12px;
    font-weight:            600;
}

#energy .meter li.title,
#energy .arival li.title,
#energy .departure li.title,
#energy .total li.title {
    margin:                5px 0 6px 0;
    opacity:                0.3;
    font-size:              12px;
    font-weight:            600;
}

#energy .edit {
	cursor:                pointer;
}



/* ================================ +
                LOGBOOK
+  ================================ */

#logboek #container {
    margin: 50px 0 0;
}

#logbook_buttons li{
	width:                  50%;
    height:                 180px;
    padding:                90px 0;
    float:                  left;
    text-align:             center;
    cursor:                 pointer;
    background:             #222;
}

#logbook_buttons li#separator {
	position:               absolute;
	left:                   50%;
	width:                  0px;
    height:                 30px;
    margin:                 85px 0 0 0;
    padding:                0;
	border-left:            1px solid rgba(255, 255, 255, 0.2);
}

#logbook_entries {
 x   border-top:             1px solid rgba(255, 255, 255, 0.2); 
}

#logbook_entries li {
    width:                  100%;
}

.bubble
{
position: relative;
width: 520px;
height: 120px;
padding: 2px;
background: #FFFFFF;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;
border: #7F7F7F solid 1px;
margin:0 auto;
}

.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 7px 11px 7px 0;
border-color: transparent #FFFFFF;
display: block;
width: 0;
z-index: 1;
left: -11px;
top: 79px;
}

.bubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 7px 11px 7px 0;
border-color: transparent #7F7F7F;
display: block;
width: 0;
z-index: 0;
left: -12px;
top: 79px;
}


.apprise-overlay {
  background-color: rgb(0,0,0);
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
        z-index: 5001;
}

div.apprise {
    background: #fff;
    border: 1px solid #aaa;
    box-shadow: 0px 2px 15px rgba(0,0,0,0.2);
        -mox-box-shadow: 0px 2px 15px rgba(0,0,0,0.2);
        -webkit-box-shadow: 0px 2px 15px rgba(0,0,0,0.2);
    color: #111;
    display: none;
    font-family: Arial, sans-serif;
    font-size: 19px;
    left: 40%;
    max-height: 90%;
    overflow: hidden;
    position: fixed;
    top: -100%;
    width: 20%;
        z-index: 5002;
}

div.apprise .apprise-inner {
    padding: 20px;
}

div.apprise .apprise-input {
    margin-top: 10px;
    padding: 10px 0;
}

div.apprise .apprise-input input {
    border: 1px solid rgba(0,0,0,0.3);
    border-radius: 2px;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
    box-shadow: inset 0px 0px 5px rgba(0,0,0,0.1);
        -mox-box-shadow: inset 0px 0px 5px rgba(0,0,0,0.1);
        -webkit-box-shadow: inset 0px 0px 5px rgba(0,0,0,0.1);
    display: block;
    color:  #111;
    font-size: 13px;
    margin: 0 auto;
    padding: 5px 10px;
    width: 90%;
}

div.apprise .apprise-input input:focus {
x    border-color: #01AEF0;
x    outline: none;
}

div.apprise .apprise-buttons {
    background: #eee;
    border-top: 1px solid #aaa;
    box-shadow: inset 0px 1px 0px #fff;
        -moz-box-shadow: inset 0px 1px 0px #fff;
        -webkit-box-shadow: inset 0px 1px 0px #fff;
    padding: 10px 20px;
    text-align: right;
}

div.apprise .apprise-buttons button {
    background: #ededed;
    border: 1px solid rgba(0,0,0,0.5);
    border-radius: 2px;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
    box-shadow: inset 0px 1px 0px rgba(255,255,255,0.5);
        -mox-box-shadow: inset 0px 1px 0px rgba(255,255,255,0.5);
        -webkit-box-shadow: inset 0px 1px 0px rgba(255,255,255,0.5);
    cursor: pointer;
    font-size: 13px;
    margin: 0 2px;
    overflow: hidden;
    padding: 5px 12px;
    text-shadow: 0px 1px 0px rgba(255,255,255,0.8);
}

div.apprise .apprise-buttons button.blue {
    background: #01AEF0;
}

div.apprise .apprise-buttons button.red {
    background: #D23A30;
}

div.apprise .apprise-buttons button.blue, div.apprise .apprise-buttons button.red {
    color: #fff;
    text-shadow: 0px -1px 0px rgba(0,0,0,0.4);
}

div.apprise .apprise-buttons button:hover {
    box-shadow: inset 0px 1px 0px rgba(255,255,255,0.5), 0px 1px 3px rgba(0,0,0,0.4);
        -moz-box-shadow: inset 0px 1px 0px rgba(255,255,255,0.5), 0px 1px 3px rgba(0,0,0,0.4);
        -webkit-box-shadow: inset 0px 1px 0px rgba(255,255,255,0.5), 0px 1px 3px rgba(0,0,0,0.4);
}

div.apprise .apprise-buttons button:active {
    box-shadow: inset 0px 1px 2px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.8);
        -moz-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.8);
        -webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.8);
}






.swiper-slide .page-inner {
    padding-top: 50px;
}












/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

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

	#flag_cross {
		width:					60px;
		height:					60px;
		margin:					20px auto 15px;
	}
	
	#flag_cross .small {
		display:				block;
	}
	
	#flag_cross .middle {
		display:				none;
	}
	
	.login h1 {
	    display:                 none;
		bottom:					5%;
		font-size:				30px;
	}
    
    .stats li {
        width:      50%;    
    }  
    
    .stats .total {
        width:      50%;
    }
      
    .weeks {
        display:                    none;   
	}
	
    .weeks:nth-child(n+8) {
        display:                    block;   
    }  
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 420px) {
	
    #flag_cross {
		width:					120px;
		height:					120px;
		margin:					50px auto 50px;
	}
	
	#flag_cross .small {
		display:				none;
	}
	
	#flag_cross .middle {
		display:				block;
	}
	
	.login h1 {
		margin:					70px 0 0;
		font-size:				45px;
	}
    
    .stats li {
        width:      100%;    
    }   
    
    .stats .total {
        width:      100%;
    }
    
    #days > li h4.tiny {
        display:               block;
    }
    
    #days > li h4.normal {
        display:               none;
    }
    
    #days > li .persons {
        right:                  6%;
    }
    
    .touch_device #days > li .persons .edit,
    #days > li .persons .edit {
        display:                none;
    }
    
    #days > li .vacation_region {
        display:                none;
    }

	#energy .total {
	    display:                none;
	}

	#energy .meter_1 span,
  #energy .meter_2 span {
	    display:                none;
	}
	  
	.weeks {
	    display:                    none;   
	}  

	.weeks:nth-child(n+8) {
        display:                    block;   
    }  
}

/* iPads (portrait and landscape) ----------- */
@media only screen  and (max-device-width : 1024px) {
     #flag_cross {
		width:					140px;
		height:					140px;
		margin:					70px auto 70px;
	}
	
	#flag_cross .small {
		display:				none;
	}
	
	#flag_cross .middle {
		display:				block;
	}
    
  .weeks:nth-child(n+1) {
      display:                    block;   
  }

      
  .new-year-div .meter_1,
  .new-year-div .meter_2 {
    font-size:  12px;
  }
  
  .meter_1 span, .meter_2 span {
    font-size:  9px;
  }



  #energy .new-year-div .arival
  {
    margin:                0 0 0 3.2%;
  }


  #energy .new-year-div .meter
  {
    margin:                0 0 0 6.2%;
  }


  #energy .new-year-div .departure, 
  #energy .new-year-div .total {
    margin:                0 0 0 3.2%;
  }
}



/* All Portraits ----------- */
@media only screen and (orientation : portrait) {
	    
	#header {
	    height:                 100px;
        display: flex;
        justify-content: center;
        align-content: center;
        flex-direction: column;
	}

	nav {
	    top:                    100px;
	}
    
    #basisschema #container {
       margin:                     150px 0 0;
    }
    
	#container {
	    margin:                 150px 0 0 0;
	}
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    .stats li {
        width:      33%;    
    }   
    
    .stats .total {
        width:      33%;
    }
        
    #header {
        height:                 100px;
        padding:                20px 0 0 ;
    }

    nav {
        top:                    100px;
    }
    
    #basisschema #container {
       margin:                     170px 0 0;
    }
    
    #container {
        margin:                 150px 0 0 0;
    }
    
    .login h1 {
        display:                block;
    }
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    .stats li {
        width:      50%;    
    }   
    
    .stats .total {
        width:      50%;
    }
    
    .login h1 {
        display:                block;
    }
}


/* iPad 3 (landscape) ---------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
     .stats li {
        width:      33%;    
    } 
    
    .stats .total {
        width:      33%;
    }
        
    #header {
        height:                 100px;
        padding:                20px 0 0 ;
    }

    nav {
        top:                    100px;
    }
    
	#basisschema #container {
	   /* margin:                     120px 0 0; */
	}
    
    #container {
        margin:                 100px 0 0 0;
    }
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
    .stats li {
        width:      50%;    
    } 
    
    .stats .total {
        width:      50%;
    }
}


/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
	
    #flag_cross {
		width:					140px;
		height:					140px;
		margin:					70px auto 70px;
	}
	
	#flag_cross .small {
		display:				none;
	}
	
	#flag_cross .middle {
		display:				block;
	}
	
	.login h1 {
		margin:					70px 0 0;
		font-size:				45px;
	}
	
    .stats li {
        width:      33%;    
    }   
    
    .stats .total {
        width:      33%;
    }
    
    .weeks:nth-child(n+1) {
        display:                    block;   
    }
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
    .stats li {
        width:      25%;  
    }
    
    .stats .total {
        width:      25%;
    }   
    
    .weeks:nth-child(n+1) {
        display:                    block;   
    }
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
    .stats li {
        width:      50%;    
    } 
    
    .stats .total {
        width:      50%;
    }
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
    .stats li {
        width:      100%;    
    } 
    
    .stats .total {
        width:      100%;
    }
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
    .stats li {
        width:      50%;    
    } 
    
    .stats .total {
        width:      50%;
    }
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
    .stats li {
        width:      100%;    
    } 
    
    .stats .total {
        width:      100%;
    }
}

/* iPhone 6 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
    

	#flag_cross {
		width:					60px;
		height:					60px;
		margin:					20px auto 35px;
	}
	
	#flag_cross .small {
		display:				block;
	}
	
	#flag_cross .middle {
		display:				none;
	}
	
	.login h1 {
		bottom:					5%;
		font-size:				30px;
	}
    
    .stats li {
        width:      50%;    
    }  
    
    .stats .total {
        width:      50%;
    } 
    
    .weeks:nth-child(n+1) {
        display:                    block;   
    }
      
    .weeks:nth-child(n+11) {
        display:                    none;   
    }     
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
    
    #flag_cross {
		width:					140px;
		height:					140px;
		margin:					70px auto 50px;
	}
	
	#flag_cross .small {
		display:				none;
	}
	
	#flag_cross .middle {
		display:				block;
	}
	
	.login h1 {
       display:                 block;
		margin:					70px 0 0;
		font-size:				45px;
	}
	
    .stats li {
        width:      			100%;    
    }  
    
    .stats .total {
        width:      			100%;
    }
    
    #days > li h4.tiny {
        display:               block;
    }
    
    #days > li h4.normal {
        display:               none;
    }
    
    #days > li .persons {
        right:                  6%;
    }
    
    .touch_device #days > li .persons .edit,
    #days > li .persons .edit {
        display:                none;
    }
    
    #days > li .vacation_region {
        display:                none;
    }

    #energy .total {
        display:                none;
    }
      
    .weeks:nth-child(n+6) {
        display:                    none;   
    }  
}

/* iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
    .stats li {
        width:      50%;    
    } 
    
    .stats .total {
        width:      50%;
    }
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
    .stats li {
        width:      100%;    
    } 
    
    .stats .total {
        width:      100%;
    }
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
    .stats li {
        width:      50%;    
    } 
    
    .stats .total {
        width:      50%;
    }
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
    .stats li {
        width:      100%;    
    } 
    
    .stats .total {
        width:      100%;
    }
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
    .stats li {
        width:      50%;    
    } 
    
    .stats .total {
        width:      50%;
    }
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
    .stats li {
        width:      100%;    
    } 
    
    .stats .total {
        width:      100%;
    }
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
    .stats li {
        width:      50%;    
    } 
    
    .stats .total {
        width:      50%;
    }
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
    .stats li {
        width:      100%;    
    } 
    
    .stats .total {
        width:      100%;
    }
}