/*************************************************
**************************************************

Website Name: Gibbs Immigration
Website Author: Cassie


/************************************************
*************************************************
0. CSS Reset
1. Universal styles (typography, etc.)
2. Header & Nav styles
3. Banner Content
4. Level1
5. Level2
6. Level3
7. Footer Content
*************************************************
************************************************/

/*----------------------------------------------
------------------------------------------------
0. CSS Reset
------------------------------------------------
----------------------------------------------*/


/****************************
*****************************
1. Universal Styles
*****************************
****************************/
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700);

h2{
	font-family: Roboto;
color:  #1e1e1e;
font-size: 24px;/* Approximation due to font substitution */
font-weight: 400;}

p{font-family: Roboto;
color:  #000000;
font-size: 15px;/* Approximation due to font substitution */
font-weight: 300;}

a,a:hover{
	font-family: Roboto;
color:  #00a3e3;
font-size: 20px;/* Approximation due to font substitution */
font-weight: 700;}

.container {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}
.img-responsive {
	display: inline-block !important;
}
/****************************
*****************************
2. Header & Nav Styles
*****************************
****************************/



#Header {
	border-top:solid 5px #00a3e3;
	padding-top:5px;
	min-height:97px;
}

#Header .wrapper.top .navbar-brand {
	padding-top: 0px;
	padding-left: 0;
	height:85px;
	float:none;
}
#Header .wrapper.top  .phone p{
	font-family: Roboto;
color:  #1e1e1e;
font-size: 20px;
font-weight: 300;
margin-top:20px;
    background: url("../images/phone.png") left top no-repeat;
    padding: 8px;
    padding-left: 47px;
	
	}
#Header .wrapper.top  .phone p a,#Header .wrapper.top  .phone p a:hover{	
	font-family: Roboto;
color:  #00a3e3;
font-size: 20px;
font-weight: 700;
text-decoration:none;
}
/****************************
*****************************
3. Banner
*****************************
****************************/

#FeatureBanner {
	background: url("../images/banner-bg.jpg") top center;
	background-size:cover;
	min-height:510px;
	padding-bottom:40px;
}
#FeatureBanner .left{
	padding-top:110px;
	}
#FeatureBanner .left p{
	font-family: Roboto;
color:  #1e1e1e;
font-size: 40px;
font-weight: 300;
margin-bottom:0;}

#FeatureBanner .left h1{
	font-family: Roboto;
color:  #00a3e3;
font-size: 40px;
font-weight: 700;
margin-top:0;}
#FeatureBanner .left span{
font-family: Roboto;
color:  #1e1e1e;
font-size: 24px;
font-weight: 300;}

#FeatureBanner .left .btn{
	
	height:56px;
	font-family: Roboto;
color:  #ffffff;
font-size: 20px;
font-weight: 300;
margin-top:20px;
background:#00a3e3;
border:none;
border-radius:0;
    padding: 15px 20px;}

#FeatureBanner .right {
	padding-top:80px;}

#FeatureBanner .right .form{
	width:269px;
	background:url("../images/form-bg.png") top center;
	background-size:100% 100%;
	padding:20px;
	padding-bottom:46px;}
	
#FeatureBanner .right .form h1{
	font-family: Roboto;
color:  #ffffff;
font-size: 33px;
font-weight: 700;
margin-top:0;}


#FeatureBanner .right .form form input[type="text"] {
   font-family: Roboto;
color:  #232323;
font-size: 15px;/* Approximation due to font substitution */
font-weight: 400;
    border: none;
    margin: 6px 0;
    width: 100%;
    padding: 8px 10px;
    background-color: #fff;
}

#FeatureBanner .right .form form textarea{
	   font-family: Roboto;
color:  #232323;
font-size: 15px;/* Approximation due to font substitution */
font-weight: 400;
    border: none;
    margin: 6px 0;
    width: 100%;
    padding: 8px 10px;
    background-color: #fff;}
	
#FeatureBanner .right .form form input[type="submit"] {
	font-family: Roboto;
color:  #ffffff;
font-size: 15px;/* Approximation due to font substitution */
font-weight: 400;
    width: 100%;
    background: black;
    color: white;
    text-align: center;
    padding: 10px 0;
    border:none;
    overflow: hidden;
    float: none;
    height: auto;
    margin: 0;
}

/****************************
*****************************
    4. ContentMain
*****************************
****************************/

#ContentMain {
	background:#ededed;
	padding-bottom:60px;
}

#ContentMain .main-block{
	background:#fff;
	margin-top:60px;
	padding-bottom:20px;
	min-height:381px;}
	
	#ContentMain .main-block h2,#ContentMain .main-block p{
		padding:0 18px;}
		
		#ContentMain .col-md-3:nth-of-type(1) .main-block{
			border-bottom:solid 5px #00a3e3;}
			
			#ContentMain .col-md-3:nth-of-type(2) .main-block{
			border-bottom:solid 5px #009797;}
			#ContentMain .col-md-3:nth-of-type(3) .main-block{
			border-bottom:solid 5px #dd2b18;}
			#ContentMain .col-md-3:nth-of-type(4) .main-block{
			border-bottom:solid 5px #27ae60;}
			
		
/****************************
*****************************
    7. form
*****************************
****************************/

.step1 .infusion-field label{
	width:auto;}

.infusion-field label{
	width:250px;
	padding-right:30px;
	display:inline-table;
	font: 15px/1.5 'Open Sans', Helvetica, Arial, sans-serif;
    color: #222;
}

.infusion-radio .infusion-option{
	display:block;
	
	}
	
.infusion-field{
	margin-top:10px;}

.step1 .termsandconditions label{
	width:auto;}

.step1 .infusion-radio{
	width:200px;
	display:inline-table;}
	
 #condition{
	width:auto;}
	
.step2 .infusion-field input,.step2 .infusion-field select,.step2 .infusion-field table{
		width:350px;
		display:inline-block;}
		
.step2 .infusion-field table img{
	display:none;}
	
	.step2 .infusion-field select{
		height:27px;}
.step2 .infusion-option input{
	width:auto;
	margin-left:254px;}

.step2 .infusion-option label{
	width:auto;
	max-width:290px;}
.infusion-submit input{
	    color: #fff;
    background: #444;
    background: -webkit-gradient(linear, left top, left bottom, from(#888888), to(#555555));
    background: -moz-linear-gradient(top, #888888, #555555);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#555555');
    text-decoration: none;
	width: 146px;
    border: none;
    border-radius: 4px;
    height: 29px;
    font-size: 16px;
	    margin-left: 253px;
    margin-top: 20px;
}

.form-block .dropdown-list{
	display:none;}
	
.infusion-field label.error{
	color:red;
	width:auto;
	padding-left:10px;}	
	
.step2 .infusion-option{
	position:relative;}
	
.step2 .infusion-option label.error{
	    position: absolute;
    right: -145px;}

/****************************
*****************************
    7. Footer
*****************************
****************************/

#Footer .wrapper.top {
	background: #232323;
	min-height: 155px;
}

#Footer .wrapper.top .navbar-brand img{
	padding-top:30px;}
	
	#Footer .wrapper.top .phone p{
		font-family: Roboto;
color:  #ffffff;
font-size: 20px;/* Approximation due to font substitution */
font-weight: 300;
margin-top:64px;
background:url("../images/phone.png") left top no-repeat;
padding:8px;
padding-left:47px;
		}

#Footer .wrapper.bottom {
	background:#1e1e1e;
	min-height: 79px;
}

#Footer .wrapper.bottom p,#Footer .wrapper.bottom a,#Footer .wrapper.bottom a:hover{
	font-family: Roboto;
color:  #5a5a5a;
font-size: 15px;/* Approximation due to font substitution */
font-weight: 300;
margin-bottom:0;
line-height:79px;}



/* Main Navbar */

@media (min-width: 768px) {
}




/****************************
*****************************
min-width: 992px
*****************************
****************************/

@media (min-width: 992px) {


}




/****************************
*****************************
max-width: 992px
*****************************
****************************/

@media (max-width: 991px) {
#ContentMain .main-block img{
	display:block !important;
	margin:auto;}
	

}



/****************************
*****************************
max-width: 768px
*****************************
****************************/

@media (max-width: 767px) {
	
	#Header .wrapper.top .navbar-brand img{
		display:block !important;
		margin:auto;}
		#Header .wrapper.top .phone{
			float:none !important;
			width:320px;
			margin:auto;}
			#Header .wrapper.top .phone p,#Header .wrapper.top .phone p a,#Header .wrapper.top .phone p a:hover{
				font-size:18px;}
				
				#Header .wrapper.top .phone p{
					margin-top:0;}
#FeatureBanner,#ContentMain,#Footer{
	text-align:center;}
	
	#FeatureBanner .left {
    padding-top: 30px;
}
#FeatureBanner .right {
    padding-top: 30px;
}

#FeatureBanner .right .form{
	width:100%;}
	
	#ContentMain .main-block{
		min-height:0;
		margin-top:30px;}
		
		#Footer .wrapper.top .navbar-brand{
			float:none;}
			#Footer .wrapper.top .phone{
				float:none !important;
				max-width:488px;
				margin:auto;}
			#Footer .wrapper.top .phone p{
				margin-top:28px;}
				#Footer .wrapper.bottom p, #Footer .wrapper.bottom a, #Footer .wrapper.bottom a:hover{
					line-height:45px;}
					
					#Footer .wrapper.bottom .right .pull-right{
						float:none !important;}
}




/****************************
*****************************
max-width: 430px
*****************************
****************************/