@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap');
@font-face {
  font-family: 'Source Sans Pro';
  src:  url('../fonts/Source_Sans_Pro/SourceSansPro-Light.ttf')
}


* {margin:0;padding:0;} 

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body {height: 100%;}
h1,h2,h3,h4,h5{line-height:160%;}

#wrap {min-height: 100%;}

#content {padding-bottom: 30px;}  /* must be same height as the footer */

#footer {position: relative;
	margin-top: -30px; /* negative value of footer height */
	height: 30px;
	clear:both;
	text-align:center;
	line-height:30px;} 

/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}

body{font-family:"Raleway",sans-serif;font-weight:100;font-size:16px;line-height:36px;padding:10px 30px;background:url('../images/brand-repeat-youds.png');}
h1,h2,h3,h4,h5{margin-top:30px;margin-bottom:11px;font-weight:100;}
h1{font-size:37px;}
h2{font-size:31px;}
h3{font-size:25px;}
h4{font-size:19px;}
h5{font-size:19px;}
ul{margin-left:30px;}
img{border:none;}
p{margin:10px 0;}
a,a:active,a:visited,a:hover{text-decoration-style: dashed;color:black;}
.center{text-align:center;margin:auto;}
.large{font-size:140%;}
.spacer{margin-top:15px;margin-bottom:20px;}
div#wrap{max-width:1956px;margin:20px auto 10px;}
div#center{}
div#header{margin-top:55px;}
div#header img {width:300px;}
div#header div#navigation{
	
	 /* Box Shadow */
    z-index: -1; 
    -webkit-box-shadow: 0 0px 11px rgba(0, 0, 0, 0.06);
    -moz-box-shadow: 0 0px 11px rgba(0, 0, 0, 0.06);
    box-shadow: 0 0px 11px rgba(0, 0, 0, 0.06);
	
    margin-top:12px;background:#fafafa;height:50px;border-bottom:3px solid #666;}
div#header div#navigation a,div#header div#navigation a:active,div#header div#navigation a:visited{height:50px;line-height:50px;padding:0px 12px;text-decoration:none;color:#000;}
div#leftBar{width:280px;float:left;background:url('../images/brand-2005.png') no-repeat bottom center;}
div#infoGraphic{background:url('../images/brand-repeat.png');height:285px;padding:8px 0 10px}
div#onThisPage h3{text-align:center;margin:0px 15px 8px;font-size:16px;}
div#onThisPage {
	background:#fafafa;
	border:1px solid #fcfcfc;
	width:200px;
	margin:41px 20px 10px 0;
	padding:13px 18px;
	font-size:12px;
	line-height:20px;
	text-align:justify;
}

div#tags{margin:15px 0px;padding:13px 0px;width:256px;text-align:center;line-height:34px;}
div#tags h3{text-align:center;margin:0px 15px 8px;font-size:16px;line-height:22px;}
div#tags div.tag {display:none;}

div#tags a,div#tags a:active,div#tags a:hover {
	background:#fafafa;
	border:1px solid #fcfcfc;
	margin:3px 4px 7px;
	padding:6px 7px;
	font-size:11px;
	color:black;
	text-decoration:none;
	display:inline;
}
div#tags div.tag{font-size:12px;line-height:24px;text-align:left;}
div#content {margin:10px 30px;margin-left:280px;}
div#webAppLibrary{margin-top:28px;}
div#webAppLibrary img{
	
 	/* Box Shadow */
   z-index: -1; 
   -webkit-box-shadow: 0 0px 10px rgba(0, 0, 0, 0.30);
   -moz-box-shadow: 0 0px 10px rgba(0, 0, 0, 0.30);
   box-shadow: 0 0px 10px rgba(0, 0, 0, 0.30);
	
	margin-left:12px;}
	
div.serviceProvision {width:650px;margin:auto;margin-bottom:40px;margin-top:25px;}
div.serviceProvision a,div.serviceProvision a:link, div.serviceProvision a:visited,div.serviceProvision a:hover{display:block;margin:auto;width:500px;text-align:center;}
div.serviceProvision {position:relative;}
div.serviceProvision div.serviceProvisionText {float:left;position:relative;color:white;padding:17px 21px;width:600px;line-height:20px;font-size:14px;}
div.serviceProvision div.serviceProvisionText h5 {font-size:21px;font-weight:bold;margin-top:6px;}
div.serviceProvision div.serviceProvisionText a,div.serviceProvision div.serviceProvisionText a:active,div.serviceProvision div.serviceProvisionText a:visited {z-index:999;color:white;text-decoration:none;}
div.serviceProvision div.image {opacity:1;border-radius:17px;position:absolute;top:0;left:0;overflow:hidden;z-index:100;width:650px;height:100%;}
div.serviceProvision div.serviceProvisionPlaceholder {width:70px;float:right;height:250px;}
p#graphic { 
	
	/* Text Shadow */
    -webkit-text-shadow: 0 0px 3px rgba(0, 0, 0, 0.35);
    -moz-text-shadow: 0 0px 3px rgba(0, 0, 0, 0.35);
    text-shadow: 0 0 1px #888, 0 0 1px #fff; 
	width:50%;margin-left:2%;letter-spacing:2px;float:left;margin-top:5px;font-family:sans-serif;font-size:50px;color:#cacaca;line-height:70px;margin-bottom:30px;}
p#afterGraphic {clear:both;}

img#graphicLogo{box-shadow:none;width:200px;float:right;margin-top:50px;margin-bottom:25px;margin-right:2%;}
div#webDesignConsultancy {background:url('../images/brand/backgroundWebSiteDesignConsultancy.png');}
div#webDesignConsultancyRight img {padding-bottom:25px;}
div#webAppLibrary div{height:300px;width:100%;background:url('../images/customers/customer-1.png');background-attachment:fixed;}
label {margin-top:20px;display:inline;}
label.checkbox {position:relative;top:-23px}
textarea.uk-textarea {height:120px;}
input.uk-button{margin-top:25px;display:inline;margin-left:30px;margin-bottom:75px;float:right;}
div#messageSent {padding:10px 20px;width:80%;text-align:center;background:#333;max-width:380px;margin:auto;color:white;}

div#pricingMockup {position:relative;width:100%;}
div#pricingMockup video {margin:auto;width:100%;}
div#pricingMockup video, div#pricingMockup img {position:absolute;top:0;width:100%;max-width:768px;display:none;}
div#pricingMockup {display:block!important;}
div#pricing h3{clear:both;padding-top:250px;max-width:768px;text-align:center;}

@media only screen and (max-width: 1060px) {
	div#pricing h3{clear:both;padding-top:160px;}
	
}
@media only screen and (max-width: 900px) {
	div#pricing h3{clear:both;padding-top:100px;}
	
}
@media only screen and (max-width: 800px) {
	body{padding:5px 15px}
	div#content{margin:5px 15px;}
	div#wrap{width:auto;}
  	div#center{width:auto;margin:auto;left:auto;position:auto;}
  	div#header {text-align:center;}
  	div#header div#navigation {height:auto;padding:10px 20px;}
  	div#header div#navigation a{padding:0 20px;width:300px;}
  	div#center div#leftBar {clear:both;display:none;}
  	div#center div#infoGraphic{display:none;}
  	div#center div#webAppLibrary {text-align:center;}
	div#pricingMockup {height:520px}
	div#pricingMockup img{width:100%;margin:auto;}
}


@media only screen and (max-width: 520px) {
	div#pricingMockup {height:300px}
	div#pricing h3{clear:both;padding-top:0px;}
	
}

@media only screen and (max-width: 400px) {
	div#pricingMockup {height:200px}
	div#pricing h3{clear:both;padding-top:0px;}
	
}