body{
    font-family: 'Montserrat', arial sans-serif;
}

/* Large Desktops and laptops */
@media only screen and (min-width:1200px){

	/*====================== logo ====================== */

	.navbar-brand{
		padding: 20px 20px;
	}

	/*====================== Vertical Middle Align ====================== */
	#fullpage{
		height: 100vh;
		overflow: hidden;
	}

	.site-wrapper {
		display: table;
		width: 100%;
		height: 100vh; /* For at least Firefox */
		min-height: 100%;
	}

	.site-wrapper-inner {
		display: table-cell;
		vertical-align: middle;
	}

	/*====================== Full page Background ====================== */

	#section0,
	#section1{
		background-position:center;
		background-size:cover;
		color: #fff;
	}
	
	#section0{
		background-image: url(../images/Banner-Portfolio.jpg);
	}

	#section1{
		background-image: url(../images/portfolio_bg.jpg);
	}

	/*====================== homepage - Section0====================== */

	#myVideo {
		position: fixed;
		right: 0;
		bottom: 0;
		min-width: 100%; 
		min-height: 100vh;
		opacity: .3;
		overflow: hidden;
		z-index: -1;
	}
	
	.bg{
		width: 100%;
		background: linear-gradient( #00c9ff, #92fe9d);
		position: fixed;
		height: 100vh;
		right: 0;
		bottom: 0;
		z-index: -3;
	}

	/*============= Portfolio Main Category - Section 1======== */

	.category{
		width: 100%;
		color: #fff;
	}

	#section1 h2{
		font-weight: 700;
		font-size: 30px;
		text-transform: uppercase;
		margin-bottom: 55px;
	}

	.category h1{
		font-weight: 800;
		line-height: 25px;
		font-size: 40px;
		position: absolute;
		z-index: 1;
		transition: top .5s ease;
		top: 220px;
	}

	.category .list1 h1{
		left: 80px;
	}

	.category .list2 h1{
		left: 60px;
	}

	.category .list3 h1{
		left: 60px;
	}

	.category .list4 h1{
		left: 25px;
	}

	.category .icon{
		margin-top: 70px;
		transition: all .5s ease;
	}

	.list1,.list2,.list3,.list4{
		/*width: 33.33333333333333%;*/
		width: 25%;
		/*height: 400px;*/
		height: 350px;
		padding: 50px 0 33px 0px;
		cursor: pointer; 
		position: relative;
		float: left;
	}

	.list1,.list2,.list3,.list4{
		border-top: 1px solid #fff;
		border-left: 1px solid #fff;
		border-bottom: 1px solid #fff;
	}

	/*.list3{
		border-right: 1px solid #fff;
	}*/

	.list4{
		border-right: 1px solid #fff;
	}

	.list1:hover h1{
		top: 180px;
	}

	.list1:hover .icon{
		margin-top: 50px;
	}

	.list2:hover h1{
		top: 180px;
	}

	.list2:hover .icon{
		margin-top: 50px;
	}

	.list3:hover h1{
		top: 180px;
	}

	.list3:hover .icon{
		margin-top: 50px;
	}

	.list4:hover h1{
		top: 180px;
	}

	.list4:hover .icon{
		margin-top: 50px;
	}
	/*====================== Offerings Button ====================== */

	.category .button{
		position: absolute;
		width: 80%;
		left: 60px;
		top: 270px;
		text-align: left;
		opacity: 0;
		transition: opacity .35s ease;
	}

	.category .button a{
		background: #fff;
		width: 200px;
		padding: 12px 20px;
		text-align: center;
		font-weight: 500;
		color: #2e353b;
		background: #fff;
		z-index: 1;	
	}

	.category .button a:hover{
		text-decoration: none;
	}

	.list1:hover .button{
		opacity: 1;
	}
	.list2:hover .button{
		opacity: 1;
	}
	.list3:hover .button{
		opacity: 1;
	}

	.list4:hover .button{
		opacity: 1;
	}
	
	/* Bottom Social Links */
	
	.social{
		display: none;
		visibility: hidden;
	}

	.terms{
		display: none;
		visibility: hidden;
	}
	
	
} /* Media query 1200px end */

/* Portrait phones and smaller */
@media only screen and (max-width:479px){
	
	#section0{
		background-image: url(../images/Banner-Portfolio-mobile.jpg);
		background-size:cover;
		background-position: center;
	}
	
	/* Portfolio Main Category - Section 1 */
	
	#section1{
		background-image: url(../images/m_portfolio_bg.jpg);
		background-position: center;
		background-size: cover;
		color: #fff;
		background-color: #fd628c;
		padding: 100px 0 50px;
	}
	
	#section1 h2{
		font-weight: 700;
		font-size: 20px;
		text-transform: uppercase;
	}
	
	.category h1{
		font-weight: 800;
		line-height: 22px;
		font-size: 40px;
	}
	
	.category .icon{
		margin-top: 40px;
		transition: all .5s ease;
	}
	
	.list1,.list2{
		border-bottom: 1px solid #fff;
		padding-bottom: 30px;
	}
	
	/* Category Button */

	.category .button {
		margin-top: 25px;

	}

	.category .button a {
		padding: 10px 20px;
		font-size: 13px;
		text-align: center;
		font-weight: 500;
		color: #2e353b;
		background: #fff;
		z-index: 1;	
	}

	.category .button a:focus, .category .button a:hover{
		text-decoration: none;
	}


	
}/* Media query 479px end */

/* Landscape phones and portrait tablets */
@media (min-width:480px) and (max-width:767px){
	
	#section0{
		background-image: url(../images/Banner-Portfolio.jpg);
		background-size:cover;
		background-position: center;
	}

	/* Portfolio Main Category */
	

	#section1{
		background-image: url(../images/portfolio_bg.jpg);
		background-size:cover;
		color: #fff;
		padding: 50px 0;
	}
	
	.category{
		width: 100%;
		color: #fff;
	}
	
	#section1 h2{
		font-weight: 700;
		font-size: 20px;
		text-transform: uppercase;
	}
	
	.category h1{
		font-weight: 800;
		line-height: 22px;
		font-size: 25px;
	}
	
	.category .icon{
		margin-top: 40px;
		transition: all .5s ease;
		width: 50px;
    	height: 50px;
	}

	.list1,.list2,.list3,.list4 {
		/*width: 33.33333333333333%;*/
		width: 25%;
		height: 230px;
		padding: 0 0 33px 0px;
		float: left;
	}

	.list1,.list2,.list3,.list4 {
		border-top: 1px solid #fff;
		border-left: 1px solid #fff;
		border-bottom: 1px solid #fff;
	}
	
	/*.list3{
		border-right: 1px solid #fff;
	}*/

	.list4{
		border-right: 1px solid #fff;
	}
	
	/* Category Button */

	.category .button {
		margin-top: 25px;

	}

	.category .button a {
		padding: 10px 20px;
		font-size: 10px;
		text-align: center;
		font-weight: 500;
		color: #2e353b;
		background: #fff;
		z-index: 1;	
	}

	.category .button a:focus, .category .button a:hover{
		text-decoration: none;
	}
	
}/* Media query 480px to 767px end */

/* Portait tablets and small desktops */
@media (min-width:768px) and (max-width:991px){
	
	/*====================== logo ====================== */

	.navbar-brand{
		padding: 20px 20px;
	}

	/*====================== Vertical Middle Align ====================== */
	
	#fullpage{
		height: 100vh;
		overflow: hidden;
	}

	.site-wrapper {
		display: table;
		width: 100%;
		height: 100vh; /* For at least Firefox */
		min-height: 100%;
	}

	.site-wrapper-inner {
		display: table-cell;
		vertical-align: middle;
	}

	/*====================== Video Banner ====================== */

	#section0{
		background-image: url(../images/Banner-Portfolio-mobile.jpg);
		background-size:cover;
		background-position: center;
	}
	
	/*====================== Full page Background ====================== */

	#section1{
		background-image: url(../images/m_portfolio_bg.jpg);
		background-size:cover;
		color: #fff;
	}
	
	.category{
		width: 100%;
		color: #fff;
	}
	
	#section1 h2{
		font-weight: 700;
		font-size: 35px;
		text-transform: uppercase;
		margin-bottom: 50px;
	}
	
	.category h1{
		font-weight: 800;
		line-height: 22px;
		font-size: 25px;
	}
	
	.category .icon{
		margin-top: 40px;
		transition: all .5s ease;
	}

	.list1,.list2,.list3,.list4{
		/*width: 33.33333333333333%;*/
		width: 25%;
		height: 230px;
		padding: 0 0 33px 0px;
		float: left;
	}

	.list1,.list2,.list3,.list4{
		border-top: 1px solid #fff;
		border-left: 1px solid #fff;
		border-bottom: 1px solid #fff;
	}
	
	/*.list3{
		border-right: 1px solid #fff;
	}*/

	.list4{
		border-right: 1px solid #fff;
	}
	
	/* Category Button */

	.category .button {
		margin-top: 25px;
	}

	.category .button a {
		padding: 10px 20px;
		font-size: 13px;
		text-align: center;
		font-weight: 500;
		color: #2e353b;
		background: #fff;
		z-index: 1;	
	}

	.category .button a:focus, .category .button a:hover{
		text-decoration: none;
	}
	
	/* Bottom Social Links */
	
	.social{
		display: none;
		visibility: hidden;
	}

	.terms{
		display: none;
		visibility: hidden;
	}
	
} /* Media query 768px to 991px */

/* Landscapes tablets and medium desktop */
@media (min-width:992px) and (max-width:1199px){
	
	/*====================== logo ====================== */

	.navbar-brand{
		padding: 20px 20px;
	}

	/*====================== Vertical Middle Align ====================== */
	
	#fullpage{
		height: 100vh;
		overflow: hidden;
	}

	.site-wrapper {
		display: table;
		width: 100%;
		height: 100vh; /* For at least Firefox */
		min-height: 100%;
	}

	.site-wrapper-inner {
		display: table-cell;
		vertical-align: middle;
	}

	/*====================== Video Banner ====================== */

	#section0{
		background-image: url(../images/Banner-Portfolio.jpg);
		background-size:cover;
		background-position: center;
	}
	
	/*====================== Full page Background ====================== */

	#section1{
		background-image: url(../images/m_portfolio_bg.jpg);
		background-size:cover;
		color: #fff;
	}
	
	.category{
		width: 100%;
		color: #fff;
	}
	
	#section1 h2{
		font-weight: 700;
		font-size: 35px;
		text-transform: uppercase;
		margin-bottom: 50px;
	}
	
	.category h1{
		font-weight: 800;
		line-height: 22px;
		font-size: 35px;
	}
	
	.category .icon{
		margin-bottom: 30px;
		transition: all .5s ease;
	}

	.list1,.list2,.list3,.list4{
		/*width: 33.33333333333333%;*/
		width: 25%;
		height: 300px;
		padding: 50px 0 33px 0px;
		float: left;
	}

	.list1,.list2,.list3,.list4{
		border-top: 1px solid #fff;
		border-left: 1px solid #fff;
		border-bottom: 1px solid #fff;
	}
	
	/*.list3{
		border-right: 1px solid #fff;
	}*/

	.list4{
		border-right: 1px solid #fff;
	}
	
	/* Category Button */

	.category .button {
		margin-top: 35px;
	}

	.category .button a {
		padding: 10px 20px;
		font-size: 13px;
		text-align: center;
		font-weight: 500;
		color: #2e353b;
		background: #fff;
		z-index: 1;	
	}

	.category .button a:focus, .category .button a:hover{
		text-decoration: none;
	}
	
	/* Bottom Social Links */
	
	.social{
		display: none;
		visibility: hidden;
	}

	.terms{
		display: none;
		visibility: hidden;
	}
	
} /* Media query 992px to 1199px end */