/*
 * Spacewood Furnishers
 * Referral Form
 * Responsive Media File.
 */

/*---For Small Desktop----*/
@media only screen and (max-width:1024px){
    .bannerTitle img {
	    width: 350px;
	}
}

@media only screen and (max-width: 991px){
	#referalSection{
	    margin: -100px 40px 0;
	}
	.referSectionDiv{
	    margin: 15px;
	}
	.referFormArea .input-group-addon{
		width: 35px;
	    padding: 5px;
	}
	.referralBottomDiv{
		padding: 30px 265px 0 0;
	}
}

@media only screen and (max-width:768px) {
	#bannerArea .container {
    	padding-top: 50px;
    	padding-bottom: 150px;
	}
	.bannerTitle img {
    	width: 300px;
	}
	.referSectionDiv:before {
    	width: 200px;
    	height: 160px;
    	right: -20px;
    	top: -20px;
	}
	.referSectionDiv:after {
		width: 160px;
		height: 115px;
		left: -18px;
		bottom: -15px;
	}
	.referHederDiv h2 {
    	font-size: 35px;
	}
	.referFormArea form {
    	margin-top: 20px;
	}
	.datePicker .C.today {
    	font-size: 14px;
	}
	.datePicker .dayArea {
    	width: 260px;
	}
	.datePicker .dateRow.th { 
    	height: 35px;
	}
	.datePicker .C {
	    width: 35px;
	    height: 35px;
    	line-height: 35px;
	}
	.chairImg img {
	    position: absolute;
	    width: 250px;
	}
	.referralBottomDiv {
    	padding: 30px 230px 0 0;
	}
}

/*-- Mobile --*/
@media only screen and (max-width: 767px) {
	#bannerArea .container {
    	padding-top: 40px;
    	padding-bottom: 140px;
	}
	.referSectionDiv {
    	padding: 15px 0;
	}
	.referFormArea{
		margin: 30px 0 15px 0;
	}
	.referFormArea h4 {
    	margin-bottom: 15px;
	}
	.chairImg img {
	    width: 200px;
	    bottom: -30px;
	    right: -30px;
	}
	.referralBottomDiv {
	    padding: 5px 170px 0 0;
	}
}

/*-- Mobile media for a width of 480px --*/
@media only screen and (max-width: 480px){
	p {
    	font-size: 14px;
    	margin-bottom: 8px;
	}
	ul li{
		font-size: 14px;
	}
	#bannerArea .container {
    	padding-top: 40px;
    	padding-bottom: 110px;
	}
	.bannerTitle img {
    	width: 200px;
	}
	#referalSection {
    	margin: -80px 15px 0;
	}
	.datePicker .nav {
    	top: 10px;
    	left: 0;
    	margin: 0;
	}
	.datePicker .dayArea {
    	width: 100%;
	}
	.datePicker .head .title {
    	font-size: 14px;
    	margin-top: 35px;
	}
	.referFormArea .input-group-addon {
    	width: 30px;
    	height: 30px;
	}
	.datePicker .C {
	    width: 30px;
	    height: 30px;
	    line-height: 30px;
	}

	.referSectionDiv:before {
	    width: 130px;
	    height: 100px;
	    right: -15px;
    	top: -15px;
	}
	.referSectionDiv:after {
	    width: 110px;
	    height: 80px;
	    left: -13px;
	    bottom: -10px;
	}
	.referSectionDiv {
    	margin: 10px;
	}
	.referHederDiv h2 {
    	font-size: 25px;
    	letter-spacing: 2px;
    	padding-bottom: 10px;
	}

	.referFormArea{
		padding: 10px;
	    border-left: 1px solid #fff000;
	    border-right: 1px solid #ffb300;
	    -webkit-background-size: 100% 1px;
		    -moz-background-size: 100% 1px;
		    	background-size: 100% 1px;
	}
	.referFormArea {
    	margin: 20px 0 15px 0;
	}
	#boxHeader {
    	margin-top: -20px;
	}
	#boxHeader h3 {
	    padding: 5px 15px;
	    font-size: 18px;
	}
	.referFormArea .form-group {
    	margin-bottom: 20px;
	}
	.referFormArea .input-group-addon{
	    font-size: 10px;
		padding: 5px 10px;
		line-height: 20px;
	}
	.referFormArea .input-group input{
		height: 30px;
		padding: 5px 15px 5px 45px;
	}
	.referFormArea button {
    	width: 100%;
    	font-size: 18px;
		padding: 5px 5px;
		letter-spacing: 2px;
	}
	.chairImg img {
	    width: 150px;
	    bottom: -25px;
	    right: -15px;
        padding: 10px;
	}
	.referralBottomDiv {
	    padding: 5px 130px 0 0;
        margin-bottom: 60px;
	}

	.requiredDiv p{
		font-size: 10px;
		margin-top: 15px;
	}
	.requiredDiv p i {
    	font-size: 8px;
	}

	.scrollToTop {
    	right: 10px;
    	width: 30px;
    	height: 30px;
    	line-height: 30px;
	}
	.scrollToTop i {
    	font-size: 22px;
    	line-height: 35px;
	}
	footer {
    	margin-top: 30px;
	}
}

@media only screen and (max-width: 360px){
	.referralBottomDiv {
    	padding: 5px 60px 0 0;
	}
	.requiredDiv{
		z-index: 10;
    	position: relative;
	}
	.chairImg img {
    	width: 140px;
	}
}

@media only screen and (max-width: 320px){

}