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

html, body {
    font-family:Arial, Helvetica, sans-serif !important;
}

body{
	margin:0;
	padding:0;
	font-size:12px;
	background:#fff;
}
img{
	border:none;
	}

.header_cnt{
	background:#fff;
    width:980px;
    margin:0 auto;
	}
	.header_cnt header{
		position:relative;
		width:980px; height:105px;
		margin:0 auto;
		color:#fff;
		}
		.header_cnt header .logo{
			position:absolute;
			left:0px; top:10px;
			}
			.header_cnt header .logo a{
				display:block;
				background:url('../images/harvard-logo.png') no-repeat 0 0;
                background-size: contain;
				width:80px; height:88px;
				text-indent:-1000000px;
				}
			.header_cnt header h1{
				position:absolute;
				right:10px; bottom:10px;
				color: black;
				font-size:28px;
				font-weight:bold;
				margin:0; padding:0;
				}

.container{
	width:980px;
	margin:0 auto;
	}
	.container section{
		background:url('../images/background_image_harvard.jpg') no-repeat 0 0;
		min-height:540px;
		}
		.container section .login_bar{
			/*background:url('../images/Login_bar.png') no-repeat top center;*/
            background: rgba(0,0,0,0.5);
			width:720px;
            height:64px;
            line-height: 64px;
            font-size: 24px;
			margin:40px auto 50px;
            text-align: center;
            color:#fff;
			}
		.container section .login_buttons_container{
			background:url('../images/gray_box_tp.png') repeat 0 0;
			width:720px; height:230px;
			margin:0 auto;
			position:relative;
			}
            .container section .login_buttons_container h1{
                color:#fff;
                margin:0; padding:0;
                font-size:30px;
                }
			.login_buttons_container a.button1, .login_buttons_container a.button2{
				width:178px; height:78px;
				padding-top:22px;
				position:absolute;
				top:50px;
				text-align:center;
				vertical-align:middle;
				display:table-cell;
				font-size:24px;
				text-decoration:none;
				border-radius:6px;
				-webkit-border-radius:6px;
				-moz-border-radius:6px;
				-webkit-box-shadow:  0px 0px 4px 4px rgba(0, 0, 0, .3);
				box-shadow:  0px 0px 4px 4px rgba(0, 0, 0, .3);
				}
			.login_buttons_container a.button1:hover, .login_buttons_container a.button2:hover{
				-moz-transform: scale(1.1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
				-webkit-transform: scale(1.1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
				-o-transform: scale(1.1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
				-ms-transform: scale(1.1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
				transform: scale(1.1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
				
				-webkit-transition: all .4s ease-out;
				-moz-transition: all .4s ease-out;
				-ms-transition: all .4s ease-out;
				-o-transition: all .4s ease-out;
				transition: all .4s ease-out;
				}
			.login_buttons_container a.button1{ left:120px; }
			.login_buttons_container a.button2{ right:120px; }

			.dark-blue{
				color:#fff;
				background: #a61c30; /* Old browsers */
				}
			.sky-blue{
				color:#fff;
				background: #22334d; /* Old browsers */
				}
            .harvard_key_link {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 10px;
                text-align: center;
                height: 40px;
                line-height: 40px;
                color: #fff;
                font-size: 16px;
            }
            .harvard_key_link a {
                color: #fff;
                text-decoration: none;
            }
            .harvard_key_link a:hover {
                text-decoration: underline;
            }

@media only screen and (max-width : 767px) {
    .header_cnt,
    .container,
    .header_cnt header,
    .container section .login_buttons_container {
        width: auto;
    }
    .container section {
        min-height: 500px;
    }
    .header_cnt header {
        height: 75px;
    }
    .header_cnt header .logo {
        left: 10px;
    }
    .header_cnt header .logo a {
        width: 50px;
        height: 60px;
    }
    .header_cnt header h1 {
        left: 75px;
        right: auto;
        bottom: auto;
        top: 20px;
        font-size: 16px;
    }
    .container section .login_bar {
        width: auto;
        height: 45px;
        line-height: 45px;
        font-size: 20px;
        margin: 40px 15px 50px 15px;
    }
    .container section .login_buttons_container {
        margin-left: 15px;
        margin-right: 15px;
    }
    .login_buttons_container a.button1,
    .login_buttons_container a.button2 {
        width: auto;
        display: block;
        position: static;
        font-size: 20px;
        height: auto;
        padding: 10px;
        margin-bottom: 20px;
    }
    .harvard_key_link {
        position: static;
    }
    .harvard_key_link a {
        font-size: 14px;
    }
}