@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}


*	{ 
margin:0;
padding:0;
border:0;	

}

#basic-website-package	{ 
margin-left:10px;
border-bottom: 2px #000000 solid;
margin-bottom:20px;

}

#premium-website-package	{ 
border-bottom:2px #000000 solid;
margin-bottom:20px;	

}

#basic-e-commerce-website-package	{ 
margin-left:10px;
margin-bottom:20px;
border-bottom:2px #000 solid;	

}

.homepage-image	{	
					margin: 8px;
					padding: 9px;
					border: 1px #000000 solid;	
					}
					



/* Music Gallery */

body	{ 
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;

}



/*End of Music Gallery */


ul	{ 
list-style:none;

}

body	{ 
font-family:Arial, Helvetica, sans-serif;
background-image: url(images/background%20images/HD-wallpaper-matrix-in-blue-code-reloaded-matrix.jpg);
background-attachment:fixed;
color:#000;
padding:0 auto;

}




h1	{ 
margin-left:20px;
margin-top:20px;
margin-bottom:20px;	

}


p	{
	margin-bottom: 10px;
	line-height: 150%;
	margin-left: 10px;
	font-size: 18px;
	margin-right:10px;

}

a	{	}

a:visited	{ 
color:#000;	

}  

a:active	{ 
color:#00F;	

}

a:focus	{	
color:#00F;
}

a:hover	{
	color: #00F;
	font-size: 24px;
}

.product-small-img img	{ 
height:92px;
margin:10px 0;
cursor:pointer;
display:block;	
opacity:.9;
}

.product-small-img img:hover	{ 
opacity:1;	

}

.product-small-img	{ 
float:left;	

}

.image-container	{ 
top:50%;
left:50%;
transform:translate(-50%,-50%);
position:absolute;	

}

.image-container	{ 
float:right;
padding:10px;
	

}

.img-container img	{ 
height:500px;	

}

/* containers */


#outer	{ 
width:940px;
margin:0 auto;
background-color:#C1F2FF;
opacity:0.8;	

}

#wrapper	{	

}

#video	{ 
margin-top:20px;	

}

#logo	{ 
margin-top:10px;	

}

#social-media	{ 
clear:both;	

}

#social-media ul li	{ 
display:inline;
padding:0 2px;	

}

#navigation	{ 
font-size:18px;
border-top: 2px #000000 solid;
border-bottom: 2px #000000 solid;
padding:5px 0;
}

#navigation ul li	{ 
display:inline;
padding:10px 5px;

	

}

#navigation ul li a	{ 
text-decoration: none;
color:#000;	

}

#navigation a:hover	{
	background-color: #F00;
	font-weight: bold;
	font-size: 18px;
	font-family: Georgia, "Times New Roman", Times, serif;
}


#banner	{ 
width:880px;
height:300px;
margin:0 auto;
overflow:hidden;
margin-bottom:20px;
margin-top:20px;
padding:0 10px;	

}


#content	{	

}

#footer	{ 
border-top: 2px #000000 solid;

}

#footer p	{ 
font-style:italic;	

}

/* End of Containers */

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	10;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/


#footer		{ 
margin-bottom:40px;
margin-top:40px;	

}

#logo	{  
margin-bottom:50px;	

}

/* Parallax */

body {
  padding: 0;
  margin: 0;
}

.navbar .navbar-brand {
  color: #7200da;
}

.parallax {
  /* The image used */
  background-image: url(images/parallax%20images/web.jpg);
  /* Set a specific height */
  height: 100vh; 
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.parallax h1 {
  font-family: Verdana;
  font-size: 4vw;
  color: #FFF;
  margin: 40vh 0px 0px 100px;
  font-weight: lighter;
  text-shadow: 1px 1px 2px #444;
}
.comp {
  font-size: 2.2vw;
}

.btn-primary {
  width: 140px;
  margin: auto;
  background: #7200da;
  border: none;
  transition: 0.3s ease-in-out;
  cursor: pointer;
}

.btn-primary:hover {
  background: #6C49B8;
}

.moving-div {
  height:50vh;
  background-color:#FFF;
  margin: auto;
  display: flex;
  justify-content: center;
}

.moving-div h1 {
  font-family: Verdana;
  margin: auto;
  font-weight: lighter;
  color: #444;
}


.parallaxTwo {
    /* The image used */
    background-image: url(images/parallax%20images/web-design-tips.jpg);

    /* Set a specific height */
    height: 100vh; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.work-ex {
  width: 100%;
  height: 100vh;
  background: #ddd;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: px;
}

.work-ex .pics {
  margin: auto;
  height: 45vh;
  background: #FFF;
}

.pics:nth-child(1) {
  background-image: url(images/parallax%20images/gdvbd.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex-basis: 70%;
}

.pics:nth-child(2) {
  background-image: url(images/parallax%20images/OIP.jpg) ;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex-basis: 30%;
}

.pics:nth-child(3) {
  background-image: url(images/parallax%20images/web-development-application-design-coding-and-programming-on-laptop-and-smartphone-concept-with-programming-language-and-program-code-and-layout-on-screen-vector.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex-basis: 30%;
}

.pics:nth-child(4) {
  background-image: url(images/parallax%20images/website-design.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex-basis: 70%;
}

.project-name {
  text-align: center;
  font-size: 3em;
  color: #EEE;
  font-family: Verdana;
  transition: 0.4s ease-in-out;
}

/* Parallax End */

#banner {
  clear: both;
  float: left;
  margin-left: 0;
  width: 100%;
  display: block;
}

#video {
  clear: both;
  float: left;
  margin-left: 0;
  width: 100%;
  display: block;
}

#paypal {
  clear: both;
  float: left;
  margin-left: 0;
  width: 100%;
  display: block;
}

#video-container {
  clear: both;
  float: left;
  margin-left: 0;
  width: 100%;
  display: block;
}

#audio-container {
  clear: both;
  float: left;
  margin-left: 0;
  width: 100%;
  display: block;
}

#image-container {
  clear: both;
  float: left;
  margin-left: 0;
  width: 100%;
  display: block;
}

#music-container {
  clear: both;
  float: left;
  margin-left: 0;
  width: 100%;
  display: block;
}

#collage {
  clear: both;
  float: left;
  margin-left: 0;
  width: 100%;
  display: block;
}

#contact-form {
  clear: both;
  float: left;
  margin-left: 0;
  width: 100%;
  display: block;
}

#hero {
  clear: both;
  float: left;
  margin-left: 0;
  width: 100%;
  display: block;
}

#contact-us {
  clear: both;
  float: left;
  margin-left: 0;
  width: 100%;
  display: block;
}




/* ========= MEDIA QUERIES ========= */

@media screen and (max-width: 1100px) {
  .parallax h1 {
    margin-left: 40px;
    font-size: 6vw;
  }
  .comp {
    font-size: 4vw;
  }
  .work-ex .pics {
    flex-basis: 50%;
    padding: 20px;
  }
  #banner {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
  }
  #video {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
  }
  #paypal {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
  }
  #video-container {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
  }
  #audio-container {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
  }
  #image-container {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
  }
  #music-container {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
  }
  #collage {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
  }
  #contact-form {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
  }
  #hero {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
  }
  #contact-us {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
  }
}

@media screen and (max-width: 520px) {
  .parallax h1 {
    margin: auto;
    text-align: center;
    font-size: 9vw;
  }
  .comp {
    font-size: 6vw;
  }
  .work-ex .pics {
    flex-basis: 100%;
    padding: 20px;
  }
  #banner {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
  }
  #video {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
  }
  #paypal {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
  }
  #video-container {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
  }
  #audio-container {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
  }
  #image-container {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
  }
  #music-container {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
  }
  #collage {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
  }
  #contact-form {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
  }
  #hero {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
  }
  #contact-us {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
  }
}



/* End of parallax */


/* Mobile Layout: 480px and below. */

.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 87.36%;
	padding-left: 1.82%;
	padding-right: 1.82%;
}
#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#outer {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#wrapper {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#logo {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#social-media {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#navigation {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#content {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#footer {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#parallax {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {
.gridContainer {
	width: 90.675%;
	padding-left: 1.1625%;
	padding-right: 1.1625%;
}
#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#outer {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#wrapper {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#logo {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#social-media {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#navigation {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#content {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#footer {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#parallax {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {
.gridContainer {
	width: 88.2%;
	max-width: 1232px;
	padding-left: 0.9%;
	padding-right: 0.9%;
	margin: auto;
}
#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#outer {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#wrapper {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#logo {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#social-media {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#navigation {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#content {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#footer {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#parallax {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
}