@media only screen and (min-width: 1200px){
	
body{
    font-family: 'Montserrat', arial sans-serif;
}
	
.navbar-brand{
	padding: 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;
}

.cover-heading h1{
	text-transform: uppercase;
	color: #fff;
	font-size: 50px;
	line-height: 1;
	text-align: center;
	font-weight: 800;
}

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

#section0,
#section1,
#section2{
	background-position:center;
	background-size:cover;
}

#section0{
	background-image: url(../images/2Our-Offerings-bg.jpg);
}

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

/*====================== Offerings ====================== */

.offerings{
	width: 100%;
	height: 540px;
	color: #fff;
}

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

.typo{
    font-size: 52px; 
    line-height: 45px;
}

.creative, .adpro, .prepress, .digi{
	width: 50%;
	height: 50%;
	border: 1px solid #fff;
	padding: 0 0 33px 33px;
	cursor: pointer; 
	position: relative;
	float: left;
}

.creative:hover h1{
	top: 30px;
}

.adpro:hover h1{
	top: 30px;
}

.prepress:hover h1{
	top: 30px;
}

.digi:hover h1{
	top: 30px;
}
	
.creative, .prepress{
		border-right: 0;
	}

	.creative, .adpro{
		border-bottom: 0;
	}


/*====================== Offerings Button ====================== */

.offerings .button{
	position: absolute;
	width: 80%;
	left: 33px;
	top: 201px;
	text-align: left;
	opacity: 0;
	transition: opacity .35s ease;
}

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

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

.creative:hover .button{
	opacity: 1;
}

.adpro:hover .button{
	opacity: 1;
}

.prepress:hover .button{
	opacity: 1;
}

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

}/*==================== media query min 1200px end ====================*/

/* Portraits Phones and Smaller */
@media only screen and (max-width:479px){
	
	body{
	    font-family: 'Montserrat', arial sans-serif;
	}
	
	div.site-wrapper:nth-last-child(3){
		display: table;
		width: 100%;
		height: 100vh; /* For at least Firefox */
		min-height: 100%;
	}

	div.site-wrapper-inner:nth-child(1){
		display: table-cell;
		vertical-align: middle;
	}
	
	.cover-heading h1{
		text-align: center;
		text-transform: uppercase;
		font-size: 25px;
		font-weight: 800;
		margin: 0;
	}
	
	#section0{
		background-image: url(../images/2Our-Offerings-bg.jpg);
		background-position: center;
		background-size: cover;
		color: #fff;
		background-color: #fd628c;
	}
	
	/* Offerings Services */
	
	#section1{
		background-image: url(../images/offeringsbgm.jpg);
		background-position: center;
		background-size: cover;
		color: #fff;
		background-color: #fd628c;
		padding: 100px 0;
	}
	
	.offerings{
		width: 100%;
	}
	
	.creative, .adpro, .prepress, .digi{
		width: 50%;
		float: left;
		border: 1px solid #fff;
		padding: 0 0 20px 10px;
	}
	
	.creative, .prepress{
		border-right: 0;
	}

	.creative, .adpro{
		border-bottom: 0;
	}
	
	.offerings h1{
		font-weight: 800;
		line-height: 17px;
		font-size: 19px;
		z-index: 1;
		margin-bottom: 15px;
	}

	.typo{
		font-size: 30px; 
		line-height: 27px;
	}
	
	/* Our Offerings Button */
			
	.offerings .button {
		width: 100%;
		left:20px;
		text-align: left;
	}

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

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

	div#section3 p {
	    color: #fff;
	    font-size: 3vw;
	}
	
	
}/*==============================*/

/* Landscape phones and portrait tablets */
@media (min-width: 480px) and (max-width: 767px){
	
	body{
	    font-family: 'Montserrat', arial sans-serif;
	}
	
	div.site-wrapper:nth-last-child(3){
		display: table;
		width: 100%;
		height: 100vh; /* For at least Firefox */
		min-height: 100%;
	}

	div.site-wrapper-inner:nth-child(1){
		display: table-cell;
		vertical-align: middle;
	}
	
	.cover-heading h1{
		text-align: center;
		text-transform: uppercase;
		font-size: 25px;
		font-weight: 800;
		margin: 0;
	}
	
	#section0{
		background-image: url(../images/2Our-Offerings-bg_ml.jpg);
		background-position: center;
		background-size: cover;
		color: #fff;
		background-color: #fd628c;
		
	}
	
	/* Offerings Services */
	
	#section1{
		background-image: url(../images/offeringsbgm.jpg);
		background-position: center;
		background-size: cover;
		color: #fff;
		background-color: #fd628c;
		padding: 100px 0;
	}
	
	.offerings{
		width: 100%;
	}
	
	.creative, .adpro, .prepress, .digi{
		width: 50%;
		float: left;
		border: 1px solid #fff;
		padding: 0 0 20px 10px;
	}
	
	.creative, .prepress{
		border-right: 0;
	}

	.creative, .adpro{
		border-bottom: 0;
	}
	
	.offerings h1{
		font-weight: 800;
		line-height: 17px;
		font-size: 19px;
		z-index: 1;
		margin-bottom: 15px;
	}

	.typo{
		font-size: 30px; 
		line-height: 27px;
	}
	
	/* Our Offerings Button */
			
	.offerings .button {
		width: 100%;
		left:20px;
		text-align: left;
	}

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

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

	div#section3 p {
	    color: #fff;
	    font-size: 3vw;
	}
	
}/*==============================*/

/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px){
	
	body{
		font-family: 'Montserrat', arial sans-serif;
	}
	
	/*====================== 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;
	}

	.cover-heading h1{
		text-transform: uppercase;
		color: #fff;
		font-size: 50px;
		line-height: 1;
		text-align: center;
		font-weight: 800;
	}
	
	/*====================== Full page Background ====================== */

	#section0,
	#section1,
	#section2{
		background-position:center;
		background-size:cover;
	}

	#section0{
		background-image: url(../images/2Our-Offerings-bg.jpg);
	}

	#section1{
		background-image: url(../images/offeringsbg.jpg);
	}
	
	/*====================== Offerings ====================== */

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

	.offerings h1{
		font-weight: 800;
		line-height: 25px;
		font-size: 27px;
		z-index: 1;
		transition: top .5s ease;
	}

	.typo{
		font-size: 52px; 
		line-height: 45px;
	}

	.creative, .adpro, .prepress, .digi{
		width: 50%;
		height: 50%;
		border: 1px solid #fff;
		padding: 10px 0 45px 33px;
		cursor: pointer; 
		float: left;
	}
	
	.creative, .prepress{
		border-right: 0;
	}

	.creative, .adpro{
		border-bottom: 0;
	}
	
	/*====================== Offerings Button ====================== */

	.offerings .button{
		width: 80%;
		left: 33px;
		text-align: left;
		transition: opacity .35s ease;
		margin-top: 30px;
	}

	.offerings .button a{
		background: #fff;
		width: 200px;
		padding: 12px 20px;
		text-align: center;
		font-weight: 500;
		color: #2e353b;
		background: #fff;
		z-index: 1;	
	}
	
	.offerings .button a:hover{
		text-decoration: none;
	}
	
	.social{
		display: none;
		visibility: hidden;
	}

	.terms{
		display: none;
		visibility: hidden;
	}

	div#section3 p {
	    color: #fff;
	    font-size: 3vw;
	}

}/*==============================*/

/* Landscape tabletts and medium desktops */
@media (min-width: 992px) and (max-width:1199px){
	
	body{
		font-family: 'Montserrat', arial sans-serif;
	}
	
	/*====================== 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;
	}

	.cover-heading h1{
		text-transform: uppercase;
		color: #fff;
		font-size: 45px;
		line-height: 1;
		text-align: center;
		font-weight: 800;
	}
	
	/*====================== Full page Background ====================== */

	#section0,
	#section1,
	#section2{
		background-position:center;
		background-size:cover;
	}

	#section0{
		background-image: url(../images/2Our-Offerings-bg.jpg);
	}

	#section1{
		background-image: url(../images/offeringsbgil.jpg);
	}
	
	.offerings{
		width: 100%;

		color: #fff;
	}

	.offerings h1{
		font-weight: 800;
		line-height: 25px;
		font-size: 27px;
		z-index: 1;
		transition: top .5s ease;
	}

	.typo{
		font-size: 52px; 
		line-height: 45px;
	}

	.creative, .adpro, .prepress, .digi{
		width: 50%;
		height: 50%;
		border: 1px solid #fff;
		padding: 10px 0 45px 33px;
		cursor: pointer; 
		float: left;
	}
	
	.creative, .prepress{
		border-right: 0;
	}

	.creative, .adpro{
		border-bottom: 0;
	}
	
	/*====================== Offerings Button ====================== */

	.offerings .button{
		width: 80%;
		left: 33px;
		text-align: left;
		transition: opacity .35s ease;
		margin-top: 30px;
	}

	.offerings .button a{
		background: #fff;
		width: 200px;
		padding: 12px 20px;
		text-align: center;
		font-weight: 500;
		color: #2e353b;
		background: #fff;
		z-index: 1;	
	}
	
	.offerings .button a:hover{
		text-decoration: none;
	}
	
}/*==============================*/