body { background: url("login_deloitte_background.jpg") repeat scroll 0 0 #f4f4f4; font-family: Arial; font-size: 9pt !important; margin: 0px; background-color: #E8EAE9;}
a { color: #0076A8; }
a:link { text-decoration: none; }

.world_map { background-repeat: no-repeat; background-position: center center; background-image: url('../img/world_map.png'); text-align: center; height: 100%; }

.world_map div.flag { display: inline; display: -webkit-inline-box; text-align: left; vertical-align: top; width: 167px; font-weight: bold; height: 45px; }
.world_map div.flag a { width: 167px; display: inline-block; }
.world_map div.flag img { margin: 5px; padding:  0px; vertical-align: middle; border: 0px; width: 50px; height: 35px; }
.world_map div.flag span {     margin-right: -2px; }
.world_map div.flag a div.theFlag { float: left; }
.world_map div.flag a div.theName { padding-top: 10px; }

.message { font-size: 1.4em; font-weight: bold; color: #0679B8; box-sizing: border-box; }

.row { clear: both; width: 100%; display: inline-block; vertical-align: top; box-sizing: border-box; }
.cell { display: inline-block; box-sizing: border-box; vertical-align: top;}
.cell_100 { width: 100%; }
.cell_66 { float: left; width: 67%; padding: 5px; }
.cell_33 { float: left; width: 33%; padding: 5px; }

.container {
	background-color: white;
	padding: 5px;
	width: 100%;
	box-sizing: border-box;
}

.deloitteLogo { height: 100%; color: white; font-weight: bold; }
.deloittePersonaLogo { margin-top: 8px; text-align: center; background-position: center top; background-repeat: no-repeat; background-image: url('../img/logo_dp.jpg'); background-size: 220px; height: 75%; }
.deloittePersonaLogo img { max-height: 200px; }

.deloittePersonaCustomizeCookies { text-align: center; height: 25%; width: 100%; margin-bottom: 8px; }

.container.headerContainer { background-color: black; height: 100%; }
.wrapper.headerWrapper { margin: 0px; height: 70px; }
.logo.deloitte { width: 145px; margin-top: 2px; }
.row.flags { padding: 5px; }

@media only screen and (min-width: 831px) { .flags .container { height: 400px; } .message { padding-top: 60px;  } }
@media only screen and (min-width: 1047px) { .flags .container { height: 400px; } .message { padding-top: 60px;  } }

/***** Tablet (Smaller than 959px) *****/
@media only screen and (min-width: 831px) and (max-width: 1045px) {
	.flags .container { height: 505px; }
	.header .wrapper { margin: 0px; }
	.header .deloitteLogo { padding: 25px; }
	.header .container { box-shadow: none; border-radius: 0px; padding: 0px; margin-bottom: 10px; }
	.logo.deloitte { margin-top: -20px; }
}

/***** Phone (portrait 300px) *****/
@media only screen and (max-width: 830px) {
	.wrapper { margin: 15px; margin-bottom: 5px; }
	
	.row { display: inline-table; }
	.cell { display: inline-table; }

	.cell_66 { width: 100%; }
	.cell_33 { width: 100%; }

	.deloitteLogo { padding: 5px; text-align: center; }
	.deloittePersonaLogo { height: 80px; background-size: 75px; }

	div.separator { width: 100% !important; height: 10px !important; }
	
	.message { padding: 20px 10%; } 
	.logo.deloitte { margin-top: -5px; }
}

/***** Phone (landscape 420px) *****/
@media only screen and (min-width: 480px) and (max-width: 767px) {
	.wrapper { margin: 15px; margin-bottom: 5px; }
	
	.row { display: inline-table; }
	.cell { display: inline-table; }
	
	.cell_66 { width: 100%; }
	.cell_33 { width: 100%; }
	
	.deloitteLogo { padding: 5px; text-align: center; }
	.deloittePersonaLogo { height: 80px; background-size: 75px; }

	div.separator { width: 100% !important; height: 10px !important; }
	.logo.deloitte { margin-top: -5px; }
}

/***** Phone portrait 380px) *****/
@media only screen and (max-width: 393px) {
	.world_map div.flag { width: 90%; }
	.world_map div.flag a { width: 200px; }
	.logo.deloitte { margin-top: -5px; }
}