/* You'll need prefixes. @-ms-viewport, @-o-viewport, etc... */
@viewport {
    width: device-width;
}
 
@media (min-width: 600px) {
    body { font: 112.5%; /* 18px */  }
}

html, body {
    height: 100%;
	font: 120%; /* 16px */
}
body{
	min-width: 480px;
	min-height: 480px;
}

.container-fluid {
    margin: 0 0;
    height: 100%;
    padding: 0 0;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.columns {
    background-color: #C9E6FF;
    height: 100%;   
}

div.container-fluid.wrapper .leftPanel{
	height: 100%;
	background-image:url('../img/left-side-blue.jpg');
	padding-top: 5%;
	min-height: 525px;
}	


div.container-fluid.wrapper  .rightPanel{
	height: 100%;
	background-image:url('../img/rightPanel.jpg');
	background-size: cover;
	min-height: 500px;
	
}

@media (min-width: 1200px) {
	.row-fluid .leftPanel.span5{	
		width:40%;
	}
	label.companyTitle{
		font-size:1.8em;
	}

	.row-fluid .rightPanel.span7{
		margin-left: 0;
		width: 60%;
	}
	
	div.punchLine{
		margin-right:21%
	}
}

@media (min-width: 1010px) and (max-width: 1199px) {
	.row-fluid .rightPanel.span7{
		margin-left: 0;
		width: 60%;
	}
	label.companyTitle{
		font-size:1.5em;
	}
	div.punchLine{
		margin-right:5%
	}
}


@media (min-width: 768px) and (max-width: 1199px) {
	
	.row-fluid .leftPanel.span5{	
		width:40%;
	}
	.row-fluid .rightPanel.span7{
		margin-left: 0;
		width: 60%;
	}
	label.companyTitle{
		font-size:1.2em;
	}
	div.punchLine{
		margin-right:3%
	}
	


}

@media (max-width: 767px){
	label.companyTitle{
		font-size:2em;
	}
	div.punchLine{
		margin-right:26%
	}
	
	div.container-fluid.wrapper  .rightPanel{
		height: 500px;
	}
	
	div.container-fluid.wrapper .leftPanel{
		height: 550px;
	}	

	
	
}

div.container-fluid.wrapper div.logoRow{
	height: 55px;
}

div.container-fluid.wrapper div.companyTitleRow{
	margin-top: 15%;
	text-align:right;
}

div.container-fluid.wrapper  div.logo{
	background-image:url('../img/logo.jpg');
	height: 53px;
	width: 217px;
}	

div.container-fluid.wrapper div.introRow{
	margin-top: 15%;
}



div.punchLine{
	width: 270px;
	float: right;
	color: rgba(255, 255, 255, 0.85);
	text-align: left;
}

div.form{
	height: 466px;
	width: 406px;
	margin: auto;
	top: 50%;
	position: absolute;
	margin-top: -240px;
	left: 50%;
	margin-left: -220px;
	padding: 20px 31px 0 20px;
	background-color: rgba(31, 35, 37, 0.44);
}

div.full-height{
	position: relative;
	height: 100%;
}
label.thinFont{
	font-size: 26px;
	font-weight: 300;
	font-family: 'Roboto', sans-serif;
	letter-spacing: 1px;
	line-height: 28px;
}

span.dark{
	color:#fcfcfc;
}

label.companyTitle{
	font-family: 'Roboto', sans-serif;
	color: #F8F8F8;
	font-weight: 300;
	letter-spacing: 2px;
	margin-right: 5%;
	display: inline-block;
	width: auto;
	border: 1px solid #F8F8F8;
	padding: 10px;
	
		-webkit-transition: all 0.4s ease-out;
	-moz-transition: all 0.4s ease-out;
	-ms-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
}

label.shadowText{
	text-shadow: 0px 1px 1px #ababab;
}



div.punchLine .thinFont{
	line-height: 37px;
	letter-spacing: 4px;
	font-size: 27px;
}

div.punchLine .emphasis{
	color: #46bdff;
	font-size: 33px;
	font-weight: 400;
	letter-spacing: 3px;
}


.form input, .form textarea{
	border: none;
	border-radius: 0;
	width: 100%;
	box-shadow: none;
}

.form .submit{
	width: 103%;
	background-color: #00A4FF;
	color: #FFF;
	height: 43px;
}