@font-face {
	font-family: 'FontNormal';
	src: url('../fonts/titilliumweb-regular-webfont.eot');
	src: url('../fonts/titilliumweb-regular-webfont.eot?#iefix') format('embedded-opentype'),
	url('../fonts/titilliumweb-regular-webfont.woff2') format('woff2'),
	url('../fonts/titilliumweb-regular-webfont.woff') format('woff'),
	url('../fonts/titilliumweb-regular-webfont.ttf') format('truetype'),
	url('../fonts/titilliumweb-regular-webfont.svg#titillium_webregular') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'FontBold';
	src: url('../fonts/titilliumweb-semibold-webfont.eot');
	src: url('../fonts/titilliumweb-semibold-webfont.eot?#iefix') format('embedded-opentype'),
	url('../fonts/titilliumweb-semibold-webfont.woff2') format('woff2'),
	url('../fonts/titilliumweb-semibold-webfont.woff') format('woff'),
	url('../fonts/titilliumweb-semibold-webfont.ttf') format('truetype'),
	url('../fonts/titilliumweb-semibold-webfont.svg#titillium_websemibold') format('svg');
	font-weight: normal;
	font-style: normal;

}

body { font-family: 'FontNormal', Arial, sans-serif; padding-top: 100px; background: url('../img/webmail-bg.jpg') center center #fff fixed no-repeat; background-size: cover; }

.box-shadow { -webkit-box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1); }

h1 { font-family: 'FontBold', Arial, sans-serif; display: block; padding: 18px; margin: 0; background: #1b1c20; text-transform: uppercase; }
h1:before { font-family: 'FontAwesome', serif; content: "\f003"; padding-right: 8px; font-size: 1.1em; font-weight: normal; }

.holder { padding: 30px 20px; background: white; }
.holder label.hide { display: none; }
.holder .radios label { display: inline-block; margin: 25px 10px 15px; }

.inputs { margin-bottom: 10px; background: url('../img/user-icons.png') #f5f5f5 no-repeat; }
.inputs.username { background-position: 0px 4px; }
.inputs.password { background-position: 0px -38px; }

.sync_box {
	margin-top: 10px;
}

.sync_box iframe {
	width: 100%;
	height: 100%;
	font-family: monospace;
	background-color: white;
}

.sync_box .title {
	background-color: black;
	color: white;
	padding: 5px;
}

input[type="password"],
input[type="text"] { width: 100%; height: 50px; line-height: 50px; font-size: 16px; border: 1px solid #e3e3e3; padding: 0 10px 0 40px; background-color: transparent; }
input[type="submit"] { font-family: 'FontBold', Arial, sans-serif; font-size: 1.2em; border: none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); background: #f28e00; text-transform: uppercase; color: #fff; padding: 15px 30px; transition: all 0.3s ease; }
input[type="submit"]:hover { padding: 15px 50px; opacity: 0.8; }
select { width: 100%; height: 50px; line-height: 50px; font-size: 16px; border: 1px solid #e3e3e3; padding: 0 10px 0 40px; background-color: transparent; }

#errormsg { height: 1em; font-weight: bold; color: #f00; }

footer { padding-top: 10px; opacity: 0.4; }
footer .mail-providers { display: inline-block; padding: 10px 0; }
footer .mail-providers img { padding: 0 5px; }


@media (max-width: 768px) {
	body { padding-top: 75px; }
}

@media (max-width: 512px) {
	body { padding-top: 50px; }
}

@media (max-width: 320px) {
    body { padding-top: 20px; }
    .holder .radios label { margin: 5px 10px; }
}

@media (min-width: 1024px) {
	.container { width: 860px; }
	#source-panel { 
		width: 49%;
		display: inline-block;
		padding-right: 10px;
       	}
	#destination-panel { 
		vertical-align: top; 
		width: 50%;
	       	display: inline-block;	
	}
}