*{
	padding: 0;
	margin: 0;
	text-decoration: none;
	border: none;
}

body, html{
	height: 100%;
}

body{
	font-family: 'Open Sans', sans-serif;
	width: 100%;
	overflow-x:hidden;
}

body ul{
	list-style: none;
}

header{
	position: fixed;
	top: 0;
	left: 0;
	max-height: 80px;
	box-shadow: 3px 3px 3px #CCC;
	z-index: 9999;
	background: #FFF;
	width: 100%;
}

#headerWrapper{
	max-width: 1024px;
	margin: auto;
	padding: 0px 20px;
}

h1,h2,h3,h4,h5{
	font-family: 'Roboto', sans-serif;
	font-weight:100;
}

header .logo{
	height: 3.3vw;
	padding: 0.5vw;
}

header .logoLink{
	float: left;
}

header .mainMenu{
	float: right;
	margin: 1.5vw 0px;
	background: #FFF;
}

.clearFloat{
	clear: both;
}

header .mainMenu ul li{
	display: inline-block;
	margin-left: 1.8vw;
}

header .mainMenu ul li a{
	font-size: 16px;
	font-family: 'Roboto', sans-serif;
	font-weight:300;
	color: #583C89;
}

header .mainMenu ul li a:hover{
	color: gray;
}

#section1 .product{
	float: left;
	transition:transform ease-out 2s;
}

#section1 h1{
	font-size: 50px;
	color: #583C89;
	margin-top: 45px;
}

#section1{
	height: 100%;
	position: relative;
}

#section1 .mainParagraph{
	color: #808080;
	font-size: 20px;
	margin-top: 55px;
	margin-bottom: 65px;
	font-family: 'Roboto', sans-serif;
	font-weight:100;
	line-height: 30px;
}

.sectionWrapper{
    margin: auto;
    max-width: 1024px;
    padding: 25vh 0vh;
	height: 50%;
    width: 100%;
}

.paragraphContainer{
	float: right;
}

#section1 .orderNow{
	color: #583C89;
	font-family: 'Roboto', sans-serif;
	font-weight:300;
	padding: 9px 20px;
	border: 1px solid rgba(0,0,0,0.1);
	vertical-align: top;
}

#purpleContainer p{
	display: inline-block;
	margin-left: 10px;
}

#purpleContainer i{
	font-size: 30px !important;
}

#purpleContainer ul li{
	color: #FFF;
	font-size: 12px;
	vertical-align: baseline;
}

/*
margin-right: 56px;
*/

.browser{
	width: 33px;
	border-radius: 3px;
}

#purpleContainer{
	background: #583c89 none repeat scroll 0 0;
    bottom: 0;
    padding: 10px 0;
    position: absolute;
    width: 100%;
}


.arrow{
	height: 40px;
	margin-top: -9px;
}

#section2{
	height: 100%;
	position: relative;
	background: #FFF;
}


#section2 h1{
	color: #583C89;
	font-family: 'Roboto', sans-serif;
	font-weight:100;
	margin-top: 27px;
	margin-bottom: 20px;
	font-size: 50px;
	line-height: 1.3;
}

#section2 .title1, #section2 .title3{
	font-size: 21px;
	color: #583C89;
	font-family: 'Roboto', sans-serif;
	font-weight:100;
	text-transform: uppercase;
	display: inline-block;
}

#section2 .title2, #section2 .title4{
	font-size: 21px;
	color: #808080;
	font-family: 'Roboto', sans-serif;
	font-weight:100;
	text-transform: uppercase;
	display: inline-block;
}

.titleContainer .icon1, .titleContainer .icon3{
	font-size: 21px !important;
	color: #583C89;
=	display: inline-block;
}

.titleContainer .icon2, .titleContainer .icon4{
	font-size: 21px !important;
	color: #808080;
	display: inline-block;
}

.titleContainer{
	background: #FFF;
	border: 1px solid rgba(0,0,0,0.1);
	padding: 20px 30px;
	cursor: pointer;
}

.info{
	background: #f2f2f2;
	padding: 20px 15px;
	color: #FFF;
	color: #583C89;
	font-size: 14px;
	display: none;
}

.editTitle{
	display: block;
	cursor: pointer;
	transition:transform ease-out 2s;
}

.imageWrapper{
	float: right;
	position: relative;
} 


.feature1{
	float: left;
}

.sectionWrapper2{
	max-width: 1024px;
	width: 100%;
	padding: 18vh 0vh;
	margin: auto;
	height: 50%;
}


#section3, #section4{
	height: 100%;
	position: relative;
	background: #FFF;
}

.sectionWrapper3{
	max-width: 1024px;
	width: 100%;
	margin: auto;
	padding: 18vh 0vh;
	height: 50%;
}

.sectionWrapper3 .feature2{
	transition: transform ease-out 2s;
	cursor: pointer;
	float: left;
}

#section3 .paragraphContainer2{
	float: right;
}

#section3 h2, #section4 h2, #section5 h2, #section6 h2, #section7 h2, #section8 h2{
	font-size: 50px;
	line-height: 1.3;
	color: #583C89;
	font-family: 'Roboto', sans-serif;
	font-weight:100;
	margin-bottom: 20px;
}

.eyeContainer p{
	margin-bottom: 25px;
}

#section3 .paragraph, #section4 p, #section5 p,  #section6 p, #section7 p, #section8 p{
	color: #808080;
	font-size: 20px;
	margin-top: 55px;
	margin-bottom: 65px;
	font-family: 'Roboto', sans-serif;
	font-weight:100;
	line-height: 30px;
}

.sectionWrapper4 .feature3{
	transition: transform ease-out 2s;
	cursor: pointer;
}

.sectionWrapper4{
	max-width: 1024px;
	width: 100%;
	margin: auto;
	padding: 18vh 0vh;
	height: 50%;
}

.sample{
	margin-top: 0px !important;
}

#section4 .paragraphContainer3{
	float: left;
}

 #section5,  #section7{
	height: 100%;
	position: relative;
	background: #F6F6F6;
}

#section5 .paragraphContainer2, #section7 .paragraphContainer2{
	float: right;
}

 #section6, #section8 {
	height: 100%;
	position: relative;
	background: #FFF;
}

#section6 .paragraphContainer3, #section8 .paragraphContainer3{
	float: left;
}

#section5 h2, #section6 h2, #section7 h2, #section8 h2{
	margin-top: 30px;
}


.package2, .package4{
	transition: transform ease-out 2s;
}

.package1, .package3{
	transition: transform ease-out 2s;
}


#section8 .paragraphContainer3, #section6 .paragraphContainer3{
	float: left;
}

.packageTitle1{
	font-size: 14px;
	color: #FFF;
	padding: 8px 15px;
	width: 46px;
	margin-top: -5px;
}

.packageTitle2{
	color: #FFF;
	padding: 8px 15px;
	width: 80px;
}

#section5 .packageTitle1{
	background: #4B3B77;
}

#section7 .packageTitle1{
	background: #486A34;
	width: 64px;
}

#section6 .packageTitle2{
	background: #4F7278;
}

#section8 .packageTitle2{
	background: #BC2C0A;
}

#section9{
	height: 100%;
	position: relative;
	background: #FFF;
}

.sectionWrapper9{
	max-width: 1024px;
	width: 100%;
	margin: auto;
	padding: 18vh 0vh;
	height: 50%;
}

#section9 h1{
	color: #583C89;
	font-family: 'Roboto', sans-serif;
	font-weight:100;
	margin-top: 27px;
	margin-bottom: 20px;
	font-size: 50px;
	line-height: 1.3;
}

#section9 .title1, #section9 .title3,  #section9 .title5{
	font-size: 19px;
	color: #583C89;
	font-family: 'Roboto', sans-serif;
	font-weight:100;
	text-transform: uppercase;
	display: inline-block;
}

#section9 .title2, #section9 .title4{
	font-size: 19px;
	color: #808080;
	font-family: 'Roboto', sans-serif;
	font-weight:100;
	text-transform: uppercase;
	display: inline-block;
}

#section9 .titleContainer{
	padding: 20px 60px !important;
}

.info2{
	background: #f2f2f2;
	padding: 20px 15px;
	color: #FFF;
	color: #583C89;
	font-size: 14px;
	display: none;
}

#section9 .symbol1, #section9 .symbol3, #section9 .symbol5{
	color: #583C89 !important;
	margin-right: 10px;
}

#section9 .symbol2, #section9 .symbol4{
	color: #808080 !important;
	margin-right: 10px;
}

#section10{
	min-height: 100%;
	background: #F6F6F6;
}

#section10 h1{
	color: #583C89;
	font-family: 'Roboto', sans-serif;
	font-weight:100;
	margin-bottom: 20px;
	font-size: 50px;
	line-height: 1.3;
}

#section10 p{
	color: #808080;
	font-size: 20px;
	margin-top: 55px;
	margin-bottom: 65px;
	font-family: 'Roboto', sans-serif;
	font-weight:100;
	line-height: 30px;
}

.sectionWrapper10{
	max-width: 1024px;
	width: 100%;
	margin: auto;
	padding-top: 150px;
}

input, textarea{
	border: 1px solid rgba(0,0,0,0.1);
	display: block;
	float: left;
}

input{
	padding: 10px 0px 10px 10px;
	margin-bottom: 15px;
}

#extension{
	margin-left: 33%;
}

button{
	color: #583C89;
	font-family: 'Roboto', sans-serif;
	font-weight:300;
	padding: 9px 20px;
	border: 1px solid rgba(0,0,0,0.1);
	background: #FFF;
	font-size: 14px;
	display: block;
	position: relative;
	margin-top: 20px;
	margin-bottom: 100px;
}

button img{
	position: absolute;
	right: -22px;
	top: 8px;
}

textarea{
	height: 90px;
	color: #808080;
	font-family: 'Roboto', sans-serif;
	FONT-WEIGHT: 300;
	font-size: 12px;
	padding: 10px 0px 10px 10px;
	max-width: 95.8%;
}

label{
	color: #583C89;
	font-family: 'Roboto', sans-serif;
	font-weight:100;
	margin-top: 27px;
	font-size: 20px;
}

select{
	vertical-align: top;
	border: 1px solid rgba(0,0,0,0.1);
	padding: 15px 29px;
	color: #808080;
	font-family: 'Roboto', sans-serif;
	FONT-WEIGHT: 300;
	font-size: 12px;
	display: block;
}

.selectContainer{
	float: right;
}


.buttonContainer{
	float: right;
}

#packages{
    margin-top: 10px;
}

.buttonContainer2{
	float: right;
	margin-right: 37px;
}

#send{
	cursor: pointer;
}

#shadow{
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	z-index:10;
	background:rgba(0,0,0,0.6);
	display:none;
}

#colorbox{
	display:none;
	position:fixed;
	z-index:100000000;
	width: 400px;
	height: 400px;
	padding:20px;
	border-radius: 300px;
	background:#FAFAFA;
	top:55%;
	left:50%;
	transform:translate(-50%, -50%);
	-webkit-transform:translate(-50%, -50%);
}

.close{
	color: white;
    font-size: 30px !important;
    position: absolute;
    top: -12px;
    right: 15px;
    z-index: 1000000001;
}

.close:hover{
	cursor: pointer;
}

.bigImage{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	border-radius: 100px;
	width: 390px;
}

.eyeContainer1{
	z-index: 566666;
	transition:opacity 1s ease-out;
}

.eye1, .eye2, .eye3{
	color: #4D3C79;
	font-size: 26px !important;
}

.eyeContainer p{
	font-family: 'Roboto', sans-serif !important;
	font-weight:300 !important;
	display: inline-block !important;
	font-size: 20px !important;
	color: #4D3C79 !important;
}

.eyeContainer2{
	color: #4D3C79;
	left: 20px;
	transition:opacity 1s ease-out;
}

.eyeContainer3{
	transition:opacity 1s ease-out;
}


/*** Tablets ***/
@media screen and (max-width:1024px){
	.logoLink{
		margin-top: 10px;
	}
	#section3 h2, #section4 h2, #section5 h2, #section6 h2, #section7 h2, #section8 h2{
		font-size: 4.8vw;
	}
	
	#section2 h1{
		font-size: 4.8vw;
	}
	
	#section9 h1{
		font-size: 4.8vw;
	}

	#section10 h1{
		font-size: 4.8vw;
	}
	
	#section1 h1{
		font-size: 4.8vw;
	}
}

/*** Mobiles ***/
@media screen and (max-width:640px){
	.mobileMenu{
		color: #583c89 !important;
   		float: left;
    	font-size: 18px !important;
   		margin-left: 20px !important;
   		margin-top: 7px;
   		width: 20px;
	}
	header .mainMenu{
		display: none;
		height: 100%;
		position: fixed;
		top: 0;
		right: 0;
		background: #f6f6f6;
		margin: 0vw 0vw;
	}
	.mainMenu li{
		border-bottom: 1.5px solid white;
		padding:30px;
	}
	.sectionWrapper{
		padding: 5vh 0vh;
	}
	header .logo{
		height: 25px;
	}
	#section1 .product{
		display: block;
		float: none;
		margin: auto;
	}
	.paragraphContainer{
		float: none;
		margin: auto;
	}
	#section1{
		height: initial;
		position: relative;
	}
	#section2{
		height: initial;
		position: relative;
	}
	
	#section3, #section4{
		height: initial;
		position: relative;
	}
	
	#section5, #section7{
		height: initial;
		position: relative;
	}
	
	#section6, #section8{
		height: initial;
		position: relative;
	}
	
	#section9{
		height: initial;
		position: relative;
	}
	
	#section3 .paragraphContainer2{
		float: none;
		margin: auto;
	}
	#section4 .paragraphContainer3{
		float: none;
		margin: auto;
	}
	#section5 .paragraphContainer2{
		float: none;
		margin: auto;
	}
	.imageWrapper5{
		margin: auto;
		float: none !important;
	}
	#section6 .paragraphContainer3{
		float: none;
		margin: auto;
	}
	#section7 .paragraphContainer2{
		float: none;
		margin: auto;
	}
	#section8 .paragraphContainer3{
		float: none;
		margin: auto;
	}
	#section9 .column{
		float: none !important;
		margin: auto;
	}
	#section9 .clientsWrapper{
		float: none !important;
		margin: auto;
		margin: auto;
	}
	.selectContainer{
		float: left;
		margin-top: 20px;
	}
	#section3 h2, #section4 h2, #section5 h2, #section6 h2, #section7 h2, #section8 h2{
		font-size: 50px;
	}
	
	#section2 h1{
		font-size: 50px;
	}
	
	#section9 h1{
		font-size: 50px;
	}
	#section10 h1{
		font-size: 50px;
	}
	
	#section1 h1{
		font-size: 50px;
	}
}