/* Large desktops and laptops */
@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;
}
	
/*====================== Full page Background ====================== */

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

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

#section2{
	background-image: url(../images/addonsbg.jpg);
}

#section3{
	background-image: url(../images/mastrokebg.jpg);
}

#section4{
	background-image: url(../images/graphicbg.jpg);
}

/*====================== Section 1 - Our Offerings ====================== */
	
.profile{
	margin-top: 100px;
	text-align: center;
}
	
div.col-md-offset-2 {
    margin-left: 0%;
}

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

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

/* custom add padding from top*/
div.padding-top-10 {
	padding-top: 10%;
}
	
/*
remove 2 divs
.creative, .adpro{
	border-bottom: 0;
}*/



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

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

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

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

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

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

/*====================== Offerings Button Know More ====================== */

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

.offerings .button a {
  	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;
}

/*===========================Down Arrow===========================*/

.scroll a {
  position: absolute;
  bottom: 5px;
  left: 50%;
  z-index: 1;
  display: inline-block;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  color: #fff;
  letter-spacing: .1em;
  text-decoration: none;
  transition: opacity .3s;
}

.scroll a:hover {
  opacity: .5;
}

.scroll a{
	padding-top: 50px;
}

.scroll a span{
	position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb05 1.5s infinite;
  animation: sdb05 1.5s infinite;
  box-sizing: border-box;
}

@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

/*====================== Section 2, 3, 4 - Know More Buttons ====================== */

.btn{
    padding: 12px 20px;
	display: inline-block;
}
    

.btn-primary {
    color: #171313;
    background-color: #fff;
    border-color: #fff;
    border-radius: 0;
    transition: .5s;
}

.btn-primary:focus{
    color: #fff;
    background-color: #171313;
    border-color: #171313;
}

.btn-primary:hover{
    color: #fff;
    background-color: #171313;
    border-color: #171313;
}

.btn-primary:active:hover{
	color: #fff;
    background-color: #171313;
    border-color: #171313;
}

/*====================== Section 2 - Add-Ons ====================== */
	
.social{
	display: none;
	visibility: hidden;
}
	
.terms{
	display: none;
	visibility: hidden;
}
	
 .txtbox{
    border: 1px solid #fff;
    color: #fff;
   /* custom padding: 60px 60px;*/
    padding: 40px 60px;
	-webkit-animation-duration: 2s;
	-webkit-animation-delay: 3s;
}

.txtbox h1{
    margin: 0 0 30px 0;
    font-size: 52px;
    line-height: 50px;
    font-weight: 800;
    text-transform: uppercase;
}

.txtbox p{
    font-size: 25px;
    font-weight: 500;
    margin-bottom: 30px;
}
	
}/*==================== media query min 1200px end ====================*/

/* Portrait Phones and Smaller */
@media only screen and (max-width: 479px){
	
	body{
	    font-family: 'Montserrat', arial sans-serif;
	}
	
	#section0{
		background-image: url(../images/Home-Page-Bannerm.jpg);
		background-position: center;
		background-size: cover;
		height: 100vh;
	}
	
	/* Our Offerings Section */
	
	#section1{
		background-image: url(../images/offeringsbgm.jpg);
		background-position: center;
		background-size: cover;
		color: #fff;
		background-color: #fd628c;
		padding-bottom: 20px;
		padding: 10% 0;
	}
	
	.profile{
		margin-bottom: 20px;
	}
	
	.profile h1{
		font-size: 20px;
		text-align: center;
	}
	
	.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: 25px;
	}
	
	/* 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;
	}
	
	/* Add Ons */
	
	#section2{
		background-image: url(../images/addonsbg.jpg);
		background-position: center;
		background-size: cover;
		color: #fff;
		padding: 50px 0;
	}

	/* Masterstroke */
	
	#section3{
		background-image: url(../images/mastrokebg.jpg);
		background-position: center;
		background-size: cover;
		color: #fff;
		padding: 50px 0;
	}
	
	/* Graphically */
	
	#section4{
		background-image: url(../images/graphicbg.jpg);
		background-position: center;
		background-size: cover;
		color: #fff;
		padding: 50px 0;
	}
	
	/* Add Ons - Masterstroke - Graphically */
	
	.txtbox h1{
		margin: 0 0 15px 0;
		font-size: 27px;
		line-height: 27px;
		font-weight: 800;
		text-transform: uppercase;
	}
	
	.txtbox p{
		font-size: 15px;
		font-weight: 500;
		margin-bottom: 15px;
	}
	
	.btn{
		padding: 10px 10px;
		font-size: 13px;
	}
	
	.btn-primary {
		color: #171313;
		background-color: #fff;
		border-color: #fff;
		border-radius: 0;
		transition: .5s;
	}
	
	.btn-primary:active{
		color: #fff;
		background-color: #171313;
		border-color: #171313;
	}
	
	.btn-primary:focus, .btn-primary:hover{
		color: #fff;
		background-color: #171313;
		border-color: #171313;
	}
	
}/*================================*/

/* Landscape phones and portrait tablets */
@media (min-width: 480px) and (max-width: 767px){
	
	body{
	    font-family: 'Montserrat', arial sans-serif;
	}
	
	.navbar-brand{
		margin-top: 00px;
	}
	
	#section0{
		background-image: url(../images/Home-Page-Banner.jpg);
		background-position: center;
		background-size: cover;
		height: 100vh;
	}
	
	
	/* Our Offerings Section */
	
	#section1{
		background-image: url(../images/offeringsbgm.jpg);
		background-position: center;
		background-size: cover;
		color: #fff;
		background-color: #fd628c;
		/*padding-bottom: 20px;*/
		padding: 20px;
	}
	
	.profile{
		margin-bottom: 20px;
	}
	
	.profile h1{
		font-size: 22px;
		text-align: center;
	}
	
	.offerings{
		width: 100%;
	}
	
	.creative, .adpro, .prepress, .digi{
		/*width: 25%;*/
		width: 50%;
		float: left;
		border: 1px solid #fff;
		padding: 0 0 20px 10px;
	}
	
	.creative, .adpro, .prepress{
		border-right: none;
	}

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

	.typo{
		font-size: 30px; 
		line-height: 25px;
	}
	
	/* 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;
	}
	
	/* Add Ons */
	
	#section2{
		background-image: url(../images/addonsbg.jpg);
		background-position: center;
		background-size: cover;
		color: #fff;
		padding: 50px 0;
	}
	
	/* Masterstroke */
	
	#section3{
		background-image: url(../images/mastrokebg.jpg);
		background-position: center;
		background-size: cover;
		color: #fff;
		padding: 50px 0;
	}
	
	/* Graphically */
	
	#section4{
		background-image: url(../images/graphicbg.jpg);
		background-position: center;
		background-size: cover;
		color: #fff;
		padding: 50px 0;
	}
	
	/* Add Ons - Masterstroke - Graphically */
	
	.txtbox h1{
		margin: 0 0 15px 0;
		font-size: 27px;
		line-height: 27px;
		font-weight: 800;
		text-transform: uppercase;
	}
	
	.txtbox p{
		width: 65%;
		font-size: 15px;
		font-weight: 500;
		margin-bottom: 15px;
	}

	.btn{
		padding: 10px 20px;
		font-size: 13px;
	}
	
	.btn-primary {
		color: #171313;
		background-color: #fff;
		border-color: #fff;
		border-radius: 0;
		transition: .5s;
	}
	
	.btn-primary:active{
		color: #fff;
		background-color: #171313;
		border-color: #171313;
	}
	
	.btn-primary:focus, .btn-primary:hover{
		color: #fff;
		background-color: #171313;
		border-color: #171313;
	}
	
}/*======================================*/

/* 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;
	}
	
	#section0{
		background-image: url(../images/Home-Page-Bannerm.jpg);
		background-position: center;
		background-size: cover;
		height: 100vh;
	}
	
	/*====================== 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{
		line-height: 0;
	}

	#section1,
	#section2,
	#section3,
	#section4{
		background-position:center;
		background-size:cover;
		color: #fff;
	}

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

	#section2{
		background-image: url(../images/addonsbgi.jpg);
	}

	#section3{
		background-image: url(../images/mastrokebgi.jpg);
	}

	#section4{
		background-image: url(../images/graphicbgmi.jpg);
	}
	
	/* Our Offerings Section */
	
	.profile{
		margin-bottom: 20px;
	}
	
	.profile h1{
		font-size: ;
		text-align: center;
	}
	
	.offerings{
		width: 100%;
	}
	
	.creative, .adpro, .prepress, .digi{
		width: 50%;
		float: left;
		border: 1px solid #fff;
		padding: 0 0 30px 40px;
	}
	
	.creative, .prepress{
		border-right: 0;
	}

	.creative, .adpro{
		/*border-bottom: 0;*/
	}
	
	.offerings h1{
		font-weight: 800;
		line-height: 25px;
		font-size: 27px;
		z-index: 1;
		margin-bottom: 15px;
	}
	
	.typo{
		font-size: 50px; 
		line-height: 43px;
	}
	
	/* Our Offerings Button */
			
	.offerings .button {
		width: 100%;
		left:20px;
		text-align: left;
	}

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

	.offerings .button a:focus, .offerings .button a:hover{
		text-decoration: none;
		color: #fff;
		background-color: #171313;
		border-color: #171313;
	}
	
	/* Add-Ons / Masterstroke / Graphically text format */
	.txtbox{
    border: 1px solid #fff;
    color: #fff;
    padding: 60px 60px;
	}
	
	.txtbox h1{
    margin: 0 0 30px 0;
    font-size: 50px;
    line-height: 45px;
    font-weight: 800;
    text-transform: uppercase;
	}
	
	.txtbox p{
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 30px;
	}
	
	/* Add-Ons / Masterstroke / Graphically Buttons */
	
	.btn{
    padding: 12px 20px;
	display: inline-block;
	}
    
	.btn-primary {
		color: #171313;
		background-color: #fff;
		border-color: #fff;
		border-radius: 0;
		transition: .5s;
	}

	.btn-primary:focus{
		color: #fff;
		background-color: #171313;
		border-color: #171313;
	}

	.btn-primary:hover{
		color: #fff;
		background-color: #171313;
		border-color: #171313;
	}

	.btn-primary:active:hover{
		color: #fff;
		background-color: #171313;
		border-color: #171313;
	}
	
	/* Bottom Social Links */
	
	.social{
		display: none;
		visibility: hidden;
	}

	.terms{
		display: none;
		visibility: hidden;
	}
	
	
}/*======================================*/

/* 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;
	}
	
	#section0{
		background-image: url(../images/Home-Page-Banner.jpg);
		background-position: center;
		background-size: cover;
		height: 50vh;
	}
	
	/*====================== 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 */
	#section1,
	#section2,
	#section3,
	#section4{
		background-position: center;
		background-size: cover;
		color: #fff;
	}
	
	#section1{
	background-image: url(../images/offeringsbgil.jpg);
	}
	
	#section2{
	background-image: url(../images/addonsbgil.jpg);
	}
	
	#section3{
	background-image: url(../images/mastrokebgil.jpg);
	}
	
	#section4{
	background-image: url(../images/graphicbgmil.jpg);
	}

	/*====================== Section 1 - Our Offerings ====================== */

	.profile{
		text-align: center;
		margin-bottom: 20px;
	}

	.offerings{
		width: 100%;
	}

	.creative, .adpro, .prepress, .digi{
		width: 50%;
		float: left;
		border: 1px solid #fff;
		padding: 0 0 33px 20px;
	}
	
	.creative, .adpro, .prepress{
		border-right: none;
	}

	.offerings h1{
		font-weight: 800;
		line-height: 25px;
		font-size: 27px;
		z-index: 1;
		margin-bottom: 20px
	}

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

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

	.offerings .button a:focus, .offerings .button a:hover{
		text-decoration: none;
		color: #fff;
		background-color: #171313;
		border-color: #171313;
	}
	
	/* Add-Ons / Masterstroke / Graphically text format */
	.txtbox{
    border: 1px solid #fff;
    color: #fff;
    padding: 50px 50px;
	}
	
	.txtbox h1{
    margin: 0 0 30px 0;
    font-size: 45px;
    line-height: 40px;
    font-weight: 800;
    text-transform: uppercase;
	}
	
	.txtbox p{
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 30px;
	}
	
	/* Add-Ons / Masterstroke / Graphically Buttons */
	
	.btn{
    padding: 12px 20px;
	display: inline-block;
	}
    
	.btn-primary {
		color: #171313;
		background-color: #fff;
		border-color: #fff;
		border-radius: 0;
		transition: .5s;
	}

	.btn-primary:focus{
		color: #fff;
		background-color: #171313;
		border-color: #171313;
	}

	.btn-primary:hover{
		color: #fff;
		background-color: #171313;
		border-color: #171313;
	}

	.btn-primary:active:hover{
		color: #fff;
		background-color: #171313;
		border-color: #171313;
	}
	
	/* Bottom Social Links */
	
	.social{
		display: none;
		visibility: hidden;
	}

	.terms{
		display: none;
		visibility: hidden;
	}
	
}/*============================================*/