/*-------------------------------------
| Imported Fonts
-------------------------------------*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans|Maven+Pro|Questrial);

/*-------------------------------------
| Core
-------------------------------------*/
body { 
		font-family: Verdana, Arial, sans-serif;
		margin: 0px; 
		font-family: 'Questrial', sans-serif;
}

#container {
 	/*background-color: #F26768;*/
 	font-family: 'Questrial', sans-serif;
}

#main { font-family: 'Questrial', sans-serif; }

	
.inset {
		 max-width: 1440px;
		 min-width: 320px;
		 width: 100%;
		 margin: auto;
		 position: relative;
}


.logo { /*float: left;*/
		padding: 10px; 
		opacity: 0;
		display: block;
		margin-right: auto;
		margin-left: auto;
}
	
.linkhome-logo {
    padding-top: 10px;
    display: block;
    margin-right: auto;
    margin-left: auto;
}
	
.name { color: #F5F5F5; font-size: 20px;  text-align: center; padding-top: 20px; }
.title { color: #F5F5F5; font-size: 11px; text-align: center; padding-top: 5px; }	

/*-------------------------------------
| Mainmenu 
-------------------------------------*/
#masthead { background-color: #beadc7; height: 300px; padding-top: 15px; }
#masthead #mainmenu { text-align: center; font-size: 0px; display: inline-block; margin-right: auto; }
#masthead #mainmenu a { 
						display: inline-block;
						font-weight: 600;
						text-decoration: none;
						color: #F5F5F5;
						height: 70px;
						line-height: 70px;
						padding: 0px 20px; 
						font-size: 15px;
						margin-top: 30px;
						width: 186px;
}

#about-masthead { background-color: #beadc7; height: 320px; padding-top: 15px; }
#about-masthead #about-mainmenu { text-align: center; font-size: 0px; display: inline-block; margin-right: auto; }
#about-masthead #about-mainmenu a { 
									display: inline-block;
									font-weight: 600;
									text-decoration: none;
									color: #F5F5F5;
									height: 70px;
									line-height: 70px;
									padding: 0px 20px; 
									font-size: 15px;
									margin-top: 40px;
									width: 124px;
}


#masthead #mainmenu a.chosen { 
	color: #6B6E70;
	font-weight: bold;
	font-size: 14px;
}

#about-masthead #about-mainmenu a.chosen { 
	color: #6B6E70;
	font-weight: bold;
	font-size: 17px;
}

#mybtn  { background-color: white;/*background-color: #E5E5E5;*/ width: 100%;  padding-bottom: 40px; outline: none; border-style: none; display: block; margin-left: auto; margin-right: auto; }
#mybtn2 { background-color: white;/*background-color: #D3D3D3;*/ width: 100%; padding-bottom: 60px; outline: none; border-style: none; display: block; margin-left: auto; margin-right: auto; }

#mybtn:active { background-color: #beadc7; }
#mybtn2:active { background-color: #beadc7; }

#closebtn1 { width: 20px; height: 20px; margin-top: 10px; }
#closebtn2 { width: 20px; height: 20px; margin-top: 10px; }

#clickhere { margin-top: 30px; margin-bottom: 20px; }


/*-------------------------------------
| landing page css
-------------------------------------*/
#heading { color:#beadc7;
		   text-align: center;
		   margin-top: 35px;
		   font-size: 25px;
		   margin-bottom: -50px;
}				

#web-masthead { background-color: #92CAD3; height: 100px; }



#webicon { width: 220px;
		   height: 290px;



	       display: block;
		   margin-right: auto;
		   margin-left: auto; 

		   padding-top: 65px;



}	



#designicon { width: 220px;
		      height: 290px;
	          display: block;
		      margin-right: auto;
		      margin-left: auto; 

		      padding-top: 65px;
}	


#brandingicon { width: 220px;
		      	height: 290px;
	          	display: block;
		      	margin-right: auto;
		      	margin-left: auto; 
	
		      	padding-top: 80px;

		      	border-top: 4px #beadc7 solid;
}	

#camicon { width: 220px;
		      	height: 290px;
	          	display: block;
		      	margin-right: auto;
		      	margin-left: auto; 
	
		      	padding-top: 65px;
		      	border-top: 4px #beadc7 solid;
}

/*-------------------------------------
| Web Design page css
-------------------------------------*/

#web-masthead { background-color: #92CAD3; height: 100px; }

#sectiontohide {width: 110%; margin-left: -14px; }

#sectiontohide2 {width: 110%; margin-left: -14px; }

.websites { 
			display: none;
			width: 320px;
			background-color: white; 
			margin-left: -6px;
			padding-bottom: 20px;
}	

#mobile-site { width: 320px; }			

#mobile-site1 { width: 320px; padding-bottom: 50px; }	

#tab-site { display: none; }	 

#dsk-site { display: none; }

#web-heading { color:#beadc7;
		       text-align: center;
	  	       padding-top: 50px;
	  	       font-size: 20px; 
}

#desc 	{  color:#6B6E70;
		   text-align: center;
	  	   margin-top: 2px;
	  	   font-size: 15px;
	  	   padding: 5px 5px 5px 5px; 
}

/*-------------------------------------
| Design page css
-------------------------------------*/

#design-masthead { background-color: #B9DEB6; height: 100px; }

.design { display: none;
		  width: 320px;
		  background-color: white; 
		  margin-left: -6px;
		  padding-bottom: 20px;

}	

#design-work { width: 320px; }				

#design-work1 { width: 320px; 
				padding-bottom: 50px;
	           
}		                 		 

#design-heading { color:#beadc7;
		          text-align: center;
	  	          padding-top: 50px;
	  	         font-size: 20px; 
}

#desc 	{  color:#6B6E70;
		   text-align: center;
	  	   margin-top: 2px;
	  	   font-size: 15px;
	  	   padding: 5px 5px 5px 5px; 
}	

/*-------------------------------------
| Branding section css
-------------------------------------*/


#branding-design { width: 320px;
			      height: 400px;

			      background-color: #92cad3; 
}

/*#brandicon { display: block;
		     margin-right: auto;
		     margin-left: auto; 

		     padding-top: 65px;
}
*/
#branding-heading { color:#beadc7;
		            text-align: center;
	  	            padding-top: 50px;
	  	            font-size: 20px; 
}

#branding { width: 320px;
			background-color: white; 
}	

#branding-work { width: 320px; }				

#branding-work1 { width: 320px; 
				padding-bottom: 20px;
	           
}	   

#returntotop { float: right; padding: 10px 10px 10px 10px; margin-top: -55px; }          


/*-----------------------------------
|  about page css
---------------------------------*/

#about-heading { color:#beadc7;
		   		 display: block;
		   		 margin-right: auto;
		   		 margin-left: auto;
		   		 margin-top: 35px;
		   		 font-size: 20px;
}

#about-heading-sv { color:#beadc7;
		            display: inline-block;
		            margin-top: 35px;
		            font-size: 20px;
}	

#about-p {  width: 301px; font-size: 14px; color: #6b6e70; margin-top: 10px; }

#serviceimg { width: 220px; height: auto; display: block; margin-right: auto; margin-left: auto; }


.contact { padding-bottom: 30px; }


/*-------------------------------------
| Footer
-------------------------------------*/
#closing { 
		  height: 300px;
		  background-color: #beadc7;
		  text-align: center;
		  color: #F5F5F5;
		  line-height: 300px;

}

#closing .inset {

}

#closing h1 {
			  font-size: 0px;
			  background-image: none;
			  width: 271px;
			  height: 82px;
			  margin: auto;
}






@media screen and ( min-width: 400px) 
{


	#sectiontohide {width: 103%; margin-left: -6px; }
	
	#sectiontohide2 {width: 103%; margin-left: -6px; }

	.logo { /*float: left;*/
			padding: 10px; 
			opacity: 0;
			display: block;
			margin-right: auto;
			margin-left: auto;
	}	

	.linkhome-logo {
	    padding-top: 10px;
	    display: block;
	    margin-right: auto;
	    margin-left: auto;
	}
		
	.name { color: #F5F5F5; font-size: 20px;  text-align: center; padding-top: 20px; }
	.title { color: #F5F5F5; font-size: 11px; text-align: center; padding-top: 5px; }	

	#masthead { background-color: #beadc7; height: 330px; padding-top: 25px; }	

	#masthead #mainmenu { text-align: center; font-size: 0px; display: inline-block; margin-right: auto; }

 	#masthead #mainmenu a { 
 							display: inline-block;
 							font-weight: 600;
 							text-decoration: none;
 							color: #F5F5F5;
 							height: 70px;
 							line-height: 70px;
 							padding: 0px 20px; 
 							font-size: 15px;
 							margin-top: 40px;
 							width: 200px;
 	}		

	#about-masthead { background-color: #beadc7; height: 320px; padding-top: 18px; }

	#about-masthead #about-mainmenu { text-align: center; font-size: 0px; display: inline-block; margin-right: auto; }	

	#about-masthead #about-mainmenu a { 
							display: inline-block;
							font-weight: 600;
							text-decoration: none;
							color: #F5F5F5;
							height: 70px;
							line-height: 70px;
							padding:0px 20px; 
							font-size: 15px;
							width: 133px;
							font-family: 'Questrial', sans-serif;
	}	

 	#masthead #mainmenu a.chosen { 
 									color: #6B6E70;
 									font-weight: bold;
 									font-size: 14px;
 	}	

 	#about-masthead #about-mainmenu a.chosen { 
 												color: #6B6E70;
 												font-weight: bold;
 												font-size: 15px;
 	}

	#about-heading { color:#beadc7;
			   		 display: block;
			   		 margin-right: auto;
			   		 margin-left: auto;
			   		 margin-top: 35px;
			   		 font-size: 20px;
			   		 font-family: 'Questrial', sans-serif;
	}
	
	#about-heading-sv { color:#beadc7;
			            display: inline-block;
			            margin-top: 35px;
			            font-size: 20px;
			            font-family: 'Questrial', sans-serif;
	}

	#about-p {  width: 375px; font-size: 12px; color: #6b6e70; margin-top: 10px; font-family: 'Questrial', sans-serif;}

	#about-p1 {  width: 375px; font-size: 12px; color: #6b6e70; margin-top: 10px; margin-bottom: 30px; font-family: 'Questrial', sans-serif;}	

}






@media screen and ( min-width: 414px) 
{

	.logo { /*float: left;*/
			padding: 10px; 
			opacity: 0;
			display: block;
			margin-right: auto;
			margin-left: auto;
	}	

	.linkhome-logo {
	    padding-top: 10px;
	    display: block;
	    margin-right: auto;
	    margin-left: auto;
	}
		
	.name { color: #F5F5F5; font-size: 20px;  text-align: center; padding-top: 20px; }
	.title { color: #F5F5F5; font-size: 11px; text-align: center; padding-top: 5px; }	
	
	#masthead { background-color: #beadc7; height: 330px; padding-top: 25px; }	

	#masthead #mainmenu { text-align: center; font-size: 0px; display: inline-block; margin-right: auto; }

 	#masthead #mainmenu a { 
 							display: inline-block;
 							font-weight: 600;
 							text-decoration: none;
 							color: #F5F5F5;
 							height: 70px;
 							line-height: 70px;
 							padding: 0px 20px; 
 							font-size: 14px;
 							width: 207px;
 	}		

	#about-masthead { background-color: #beadc7; height: 330px; padding-top: 18px; }

	#about-masthead #about-mainmenu { text-align: center; font-size: 0px; display: inline-block; margin-right: auto; }	

	#about-masthead #about-mainmenu a { 
							display: inline-block;
							font-weight: 600;
							text-decoration: none;
							color: #F5F5F5;
							height: 70px;
							line-height: 70px;
							padding:0px 20px; 
							font-size: 14px;
							margin-top: 40px;
							width: 138px;
	}	

 	#masthead #mainmenu a.chosen { 
 									color: #6B6E70;
 									font-weight: bold;
 									font-size: 14px;
 	}	

 	#about-masthead #about-mainmenu a.chosen { 
 												color: #6B6E70;
 												font-weight: bold;
 												font-size: 19px;
 	}


	#sectiontohide { width: 107%; margin-left: -13px; /*width: 414px;*/ }

	#sectiontohide2 { width: 107%; margin-left: -13px; /*width: 414px;*/ }

	#about-p {  width: 375px; font-size: 15px; color: #6b6e70; margin-top: 10px; font-family: 'Questrial', sans-serif; }

}


@media screen and (min-width: 768px) {
	/*-------------------------------------
	|  Top of page
	-------------------------------------*/

	.linkhome-logo {
	    padding-top: 10px;
	    display: block;
	    margin-right: auto;
	    margin-left: auto;
	}
		
	.name { color: #F5F5F5; font-size: 30px;  text-align: center; padding-top: 20px; }
	.title { color: #F5F5F5; font-size: 20px; text-align: center; padding-top: 5px; }	

	#masthead { width: 100%; background-color: #beadc7; height: 400px; padding-top: 25px; }	

	#masthead #mainmenu { text-align: center; font-size: 0px; display: inline-block; margin-right: auto; }

 	#masthead #mainmenu a { 
 							display: inline-block;
 							font-weight: 600;
 							text-decoration: none;
 							color: #F5F5F5;
 							height: 70px;
 							line-height: 70px;
 							padding: 0px 20px; 
 							font-size: 20px;
 							width: 384px;
 	}		

	#about-masthead { background-color: #beadc7; height: 400px; padding-top: 3px; }

	#about-masthead #about-mainmenu { text-align: center; font-size: 0px; display: inline-block; margin-right: auto; }	

	#about-masthead #about-mainmenu a { 
							display: inline-block;
							font-weight: 600;
							text-decoration: none;
							color: #F5F5F5;
							height: 70px;
							line-height: 70px;
							padding:0px 20px; 
							font-size: 20px;
							margin-top: 50px;
							width: 256px;
	}	

 	#masthead #mainmenu a.chosen { 
 									color: #6B6E70;
 									font-weight: bold;
 									font-size: 14px;
 	}	

 	#about-masthead #about-mainmenu a.chosen { 
 												color: #6B6E70;
 												font-weight: bold;
 												font-size: 19px;
 	}

 	/*-------------------------------------
	|  Btn & Section Styles
	-------------------------------------*/	

	#mybtn  {  background-color: white; width: 101%; padding-bottom: 40px; outline: none; border-style: none; display: block; margin-left: auto; margin-right: auto; }	
	#mybtn2  { background-color: white ; width: 101%; padding-bottom: 40px; outline: none; border-style: none; display: block; margin-left: auto; margin-right: auto; }

	#clickhere { margin-top: 100px; margin-bottom: 20px; }

	#closebtn1 { width: 30px; height: 30px; margin-top: 10px; }
	#closebtn2 { width: 30px; height: 30px; margin-top: 10px; }	

	#web-heading { color:#beadc7;
			       	text-align: center;
		  	       	padding-top: 50px;
		  	       	font-size: 25px; 
	}

	#webicon { width: 300px;
			    height: 373px;


	
		        display: block;
			    margin-right: auto;
			    margin-left: auto; 
			    
	
			    padding-top: 65px;
	}

	#designicon {  width: 300px;
			       height: 373px;
		           display: block;
			       margin-right: auto;
			       margin-left: auto; 
			        
			       padding-top: 65px;
	}

	#sectiontohide { width: 104%; margin-left: -14px; }

	.websites { 
			display: none;
			background-color: white; 
			margin-left: -6px;
			padding-bottom: 20px;
	}

 	#mobile-site { display: none; }
	
 	#tab-site { display: inline-block; width:379px; margin-top:-23px; }	

	#desc {    color:#6B6E70;
			   width: 600px;
			   text-align: center;
		  	   margin-top: 2px;
			   font-size: 20px;
			   display: block;
			   margin-right: auto;
			   margin-left: auto;
	} 	

	#sectiontohide2 { width: 104%; margin-left: -14px; }

 	.design { 
 			   background-color: white; 
 			   padding-bottom: 20px;
 	}

	#design-heading { color:#beadc7;
			           text-align: center;
		  	           padding-top: 50px;
		  	           font-size: 25px; 
	} 	
	
 	#branding-heading { color:#beadc7;
 			             text-align: center;
 		  	             padding-top: 50px;
 		  	             font-size: 25px; 
 	}	

 	/*-------------------------------------
	|  About Page Styles
	-------------------------------------*/	 	

	#about-p {  width: 700px; font-size: 17px; color: #6b6e70; margin-top: 10px; }  

	#serviceimg { width: 350px; height: auto; display: block; margin-right: auto; margin-left: auto; }		
}

@media screen and (min-width: 992px) 
{

	.logo { width: 150px;
			height: 150px;
			padding: 10px;
 	}

	.linkhome-logo {
	    padding-top: 10px;
	    display: block;
	    margin-right: auto;
	    margin-left: auto;
	}
		
	.name { color: #F5F5F5; font-size: 30px;  text-align: center; padding-top: 20px; }
	.title { color: #F5F5F5; font-size: 20px; text-align: center; padding-top: 5px; }	

	#mobile-site { display: none; }
	
 	#tab-site { display: inline-block; width:379px; margin-top:-23px; }	

	#masthead { width: 100%; background-color: #beadc7; height: 415px; padding-top: 25px; }	

	#masthead #mainmenu { text-align: center; font-size: 0px; }
	#masthead #mainmenu a { 
							display: inline-block;
							font-weight: 600;
							text-decoration: none;
							color: #F5F5F5;
							height: 70px;
							line-height: 70px;
							padding: 0px 20px; 
							font-size: 19px;
							width: 496px;
	}

	#about-masthead { background-color: #beadc7; height: 410px; padding-top: 3px; }

	#about-masthead #about-mainmenu { text-align: center; font-size: 0px; display: inline-block; margin-right: auto; }

	#about-masthead #about-mainmenu a { 
										display: inline-block;
										font-weight: 600;
										text-decoration: none;
										color: #F5F5F5;
										height: 70px;
										line-height: 70px;
										padding:0px 20px; 
										font-size: 19px;
										width: 330px;
	}
	
	#masthead #mainmenu a:hover { border-bottom: 5px solid #beadc7; }

	{ 
									color: #6B6E70;
									font-weight: bold;
									font-size: 35px;
	}	
	
	#about-masthead #about-mainmenu a.chosen { 
		color: #6B6E70;
		font-weight: bold;
		font-size: 18px;
	}	



}



@media screen and (min-width: 1200px) {

 	.logo { width: 150px;
			height: 150px;
			padding: 10px;
 	}


	.linkhome-logo {
	    padding-top: 10px;
	    display: block;
	    margin-right: auto;
	    margin-left: auto;
	}
		
	.name { color: #F5F5F5; font-size: 25px;  text-align: center; padding-top: 20px; }
	.title { color: #F5F5F5; font-size: 15px; text-align: center; padding-top: 5px; }

	#masthead { width: 100%; background-color: #beadc7; height: 440px; padding-top: 25px; }		

	#masthead #mainmenu { text-align: center; font-size: 0px;  }
	#masthead #mainmenu a { 
							display: inline-block;
							font-weight: 600;
							text-decoration: none;
							color: #F5F5F5;
							height: 70px;
							line-height: 70px;
							padding: 0px 20px; 
							font-size: 15px;
							margin-top: 40px;
							width: 600px;
	}

	#about-masthead { background-color: #beadc7; height: 420px; padding-top: 3px; }
	#about-masthead #about-mainmenu { text-align: center; font-size: 0px; display: inline-block; margin-right: auto; }
	#about-masthead #about-mainmenu a { 
							display: inline-block;
							font-weight: 600;
							text-decoration: none;
							color: #F5F5F5;
							height: 70px;
							line-height: 70px;
							padding:0px 20px; 
							font-size: 15px;
							width: 400px;
	}
	
	#masthead #mainmenu a:hover { border-bottom: 5px solid #beadc7; }
	#masthead #mainmenu a.chosen { 
		color: #6B6E70;
		font-weight: bold;
		font-size: 14px;
	}	
	
	#about-masthead #about-mainmenu a.chosen { 
		color: #6B6E70;
		font-weight: bold;
		font-size: 18px;
	}		

	#mobile-site { display: none; }

	#tab-site {  display: none; }

	#dsk-site { display: inline-block; width: 700px; padding-bottom: 100px; }

	#design-work { width: 700px; }				

	#design-work1 { width: 700px; 
					padding-bottom: 20px;
		           
	}

	#branding-work { width: 700px; }				

	#branding-work1 { width: 700px; 
					padding-bottom: 20px;
		           
	}	

	#about-p {  width: 950px; font-size: 17px; color: #6b6e70; margin-top: 10px; }

	#about-p1 {  width: 970px; font-size: 17px; color: #6b6e70; margin-top: 10px; margin-bottom: 30px; } 

}


@media screen and (min-width: 1280px) {

 	.logo { width: 150px;
			height: 150px;
			padding: 10px;
 	}


	.linkhome-logo {
	    padding-top: 10px;
	    display: block;
	    margin-right: auto;
	    margin-left: auto;
	}
		
	.name { color: #F5F5F5; font-size: 25px;  text-align: center; padding-top: 20px; }
	.title { color: #F5F5F5; font-size: 15px; text-align: center; padding-top: 5px; }

	#masthead { width: 100%; background-color: #beadc7; height: 440px; padding-top: 25px; }		

	#masthead #mainmenu { text-align: center; font-size: 0px;  }
	#masthead #mainmenu a { 
							display: inline-block;
							font-weight: 600;
							text-decoration: none;
							color: #F5F5F5;
							height: 70px;
							line-height: 70px;
							padding: 0px 20px; 
							font-size: 15px;
							margin-top: 40px;
							width: 640px;
	}

	#about-masthead { background-color: #beadc7; height: 420px; padding-top: 3px; }
	#about-masthead #about-mainmenu { text-align: center; font-size: 0px; display: inline-block; margin-right: auto; }
	#about-masthead #about-mainmenu a { 
							display: inline-block;
							font-weight: 600;
							text-decoration: none;
							color: #F5F5F5;
							height: 70px;
							line-height: 70px;
							padding:0px 20px; 
							font-size: 15px;
							width: 426px;
	}
	
	#masthead #mainmenu a:hover { border-bottom: 5px solid #beadc7; }
	#masthead #mainmenu a.chosen { 
		color: #6B6E70;
		font-weight: bold;
		font-size: 14px;
	}	
	
	#about-masthead #about-mainmenu a.chosen { 
		color: #6B6E70;
		font-weight: bold;
		font-size: 18px;
	}		

	#mobile-site { display: none; }

	#tab-site {  display: none; }

	#dsk-site { display: inline-block; width: 700px; padding-bottom: 100px; }

	#design-work { width: 700px; }				

	#design-work1 { width: 700px; 
					padding-bottom: 20px;
		           
	}

	#branding-work { width: 700px; }				

	#branding-work1 { width: 700px; 
					padding-bottom: 20px;
		           
	}	

	#about-p {  width: 950px; font-size: 17px; color: #6b6e70; margin-top: 10px; }

	#about-p1 {  width: 970px; font-size: 17px; color: #6b6e70; margin-top: 10px; margin-bottom: 30px; } 

}