@charset "utf-8";
/*
Theme name: DKemp Designs HTML5/CSS3
	Date: May 2016
	Description: Full width responsive HTML5/CSS3 LAYOUT especially FOR 
	DKemp Designs CUSTOM CODED
	  with slider, background video and content boxes, animations
	  and fixed background image
	Version: 2.0
	Author: Dorthea Kemp
	Author URL: http://www.dkempdesigns.com/webmaster.html
	all contents copyright DKemp Designs, do not use without explicit permission
*/

/*resets*/
body, header, section, footer, aside, nav, ul, li, hgroup, menu, article, figure, details, figcaption, footer, p
{ 
display: block; 
margin: 0;
padding: 0;
}
/*main styles for site*/
/* ====== x-tra large screens 120em = 1920px large laptops & desktops ====== */

@font-face {
    font-family: 'blackjackregular';
    src: url('fonts/webfontkit-20160406-blackjack/blackjar-webfont.eot');
    src: url('fonts/webfontkit-20160406-blackjack/blackjar-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/webfontkit-20160406-blackjack/blackjar-webfont.woff2') format('woff2'),
         url('fonts/webfontkit-20160406-blackjack/blackjar-webfont.woff') format('woff'),
         url('fonts/webfontkit-20160406-blackjack/blackjar-webfont.ttf') format('truetype'),
         url('fonts/webfontkit-20160406-blackjack/blackjar-webfont.svg#blackjackregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'heroregular';
    src: url('fonts/webfontkit-20160406-hero/hero-webfont.eot');
    src: url('fonts/webfontkit-20160406-hero/hero-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/webfontkit-20160406-hero/hero-webfont.woff2') format('woff2'),
         url('fonts/webfontkit-20160406-hero/hero-webfont.woff') format('woff'),
         url('fonts/webfontkit-20160406-hero/hero-webfont.ttf') format('truetype'),
         url('fonts/webfontkit-20160406-hero/hero-webfont.svg#heroregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
body {
	background-color: #000000;
	width: auto;
	background-image: url(assets/img/2015bkg.jpg);
	background-repeat: no-repeat;
	background-attachment: fixed;
	-webkit-background-size: cover;
	background-size: cover;
}
content {
}
h1, h2, h3, h4 {
	font-family : BlackJack;
	margin: 0;
}
h1 {
  font-size: 5.3em;/*85px*/
  color: #00A4B8;
  color: rgb(0, 164, 184);
  text-shadow: 5px 5px 3px rgba(0, 0, 0, 0.85);
}
h2 {
  font-size: 4.5em;/*72px*/
  color: #00A4B8;
  color: rgb(0, 164, 184);
  text-shadow : 5px 5px 3px rgba(0, 0, 0, 0.85);
}
h2 a:hover {
	border-bottom: 1px dotted #00A4B8;
}
h3 {
  font-size: 2.3em;/*36px*/
  color: #DBAE3E;
  color: rgb(219, 174, 62);
  text-shadow : 5px 5px 1px rgba(0, 0, 0, 0.80);
}
h4 {
  font-size: 2.3em;/*36px*/
  color: #DBAE3E;
  color: rgb(219, 174, 62);
}
h5 {
  font-family : Century Gothic;
  font-size : 1.2em;/*18px*/
  line-height: 1.3em;
  margin: 0;
  padding: 0;
  color: #DBAE3E;
  color: rgb(232, 185, 220);
}
header {
	width: 100%;
	background : #640b6c;
    background: rgba(100, 11, 108, .6);
  	height : 8.125em;
	margin: 0;
	z-index:200;
}
header img {
	max-width: 100%;
	padding: .5em 1em 0 1em;
	z-index: 400;
}
p  {
  font-family: Century Gothic;
  font-size: 1.2em;/*on 16px base*/
  line-height: 1.7em;
  color: #E8B9DC;
  color: rgb(232, 185, 220);
  z-index: 50;
}
p a:link, p a:visited {
	color: #DBAE3E;
	border-bottom: 1px dotted #00A4B8;
	text-decoration: none;
}
p a:hover {
	color: #fff;
	border-bottom: 1px dotted #fff;
}
a {
	text-decoration:none;
}
p a:link a:hover a:visited {
	text-decoration: none;
}
/* main nav styles w/bkg img and text */
nav {
	display: block;
	width: 100%;
	height: 125px;
	font-family: Hero;
	padding: 1em .8em 0 25em;
	color: #c30083;
	text-transform: uppercase;
	font-size: 1.5em;
	font-weight: 400;
}
nav ul {
	float: left;
    list-style:none; /*gets rid of dots*/
    height:50px;
	}
nav ul li {
	width: 90px;
	height: 90px;
	border-radius: 50%;
	background-color: #c30083;
	margin: 0 0 0 20px;
	padding: 80px 0 0 0;
	background-position:center;
	background-repeat:no-repeat;
	}
ul li a {
	
	}
.home {
	background-image: url('assets/img/home.png');
	box-sizing: border-box;
	text-align: center;
	float: left;
}
.work {
	background-image: url('assets/img/services.png');
	box-sizing: border-box;
	text-align: center;
	vertical-align: middle;
	float: left;
}
.about {
	background-image: url('assets/img/about.png');
	box-sizing: border-box;
	text-align: center;
	vertical-align: middle;
	float: left;
}
.news {
	background-image: url('assets/img/news.png');
	box-sizing: border-box;
	text-align: center;
	vertical-align: middle;
	float: left;
}
.tech {
	background-image: url('assets/img/blog.png');
	box-sizing: border-box;
	text-align: center;
	vertical-align: middle;
	float: left;
}
.contact {
	background-image: url('assets/img/contact.png');
	box-sizing: border-box;
	text-align: center;
	vertical-align: middle;
	float: left;
}
.graphics {
	width: 25px;
	font-size: .8em;
	font-weight: 200;
	display: block;
}
.web {
	width: 25px;
	font-size: .8em;
	font-weight: 200;
	display: block;
}
.media {
	width: 25px;
	font-size: .8em;
	font-weight: 200;
	display: block;
}
nav a, nav a:visited {
	color: #00A4B8;/*#C09 or #c30083; #e61ff6*/
	transition: 2s background-color;
	}
nav ul li a:hover, nav ul li a:active {
	color: #eea0ff;/*#FC9*/
	padding-top: 35px;
	background-color: #00A4B8;
	text-decoration: none;
}
	/*  ========== home page styles ========== */
.video_wrapper {
	background: url('assets/img/designcity-rocket-header.gif');
	background-size: 100%;
	background-repeat: no-repeat;
	max-width: 100%;
	height: 48.75em;
	padding: 1% 0 0 0;
	}
video#hero {
	position: fixed;
	top: 50%;
	left:50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -100;
	-ms-transform:
		translateX(-50%)
		translateY(-50%);
	-moz-transform:
		translateX(-50%)
		translateY(-50%);
	-webkit-transform: 
		translateX(-50%)
		translateY(-50%);
	transform: 
		translateX(-50%)
		translateY(-50%);
	background: url(assets/img/designcity2.jpg) no-repeat;
	background-size: cover;
}
video#hero {
    transition: 1s opacity;
}
.stopfade { opacity: .5; 
}
#vidpause {
	position: absolute;
	top: 100;
	right: 800;
	}
.herocircle {
  background : #d9098b;
  background: rgba(217, 9, 139, .62); /*#d9098b*/
  width : 60%/*659px*/;
  height : 90%;
  margin: 0 0 2% 5%;
  padding: 2%;
  text-align: center;
  border-radius: 50%;
  z-index: 100;
}
.herocircle img {
	float: left;
	padding: 0 5% 0 25%;
	}
.herocircle a:hover h2, .herocircle a:active h2 {
	color: #eea0ff;
	}
.btn_cta1
{
  float:left;
  font-family : Hero;
  font-size : 3em;/*50px*/
  color : #DBAE3E;
  color : rgb(219, 174, 62);
}
.btn_cta1 a, a:visited {
	color : #DBAE3E;
    color : rgb(219, 174, 62);
  }
.btn_cta1 a:hover  {
	color: #eea0ff;
	border-bottom: 1px dotted #eea0ff;
	text-decoration: none;
	}
#Stage {
	width: 66%;
	max-width: 820px;
	box-sizing: border-box;
	overflow: hidden;
	}
.anim1 {
	box-sizing: border-box;
	background-color: #B10253;
	width: 66%;
	height:37.5em;
	float: left;
	background: url(assets/img/darkcitybkg.jpg);
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	padding: 12.5em 0 0 0;
	text-align: center;
}
.anim1_cta {
	font-family : BlackJack;
	font-size: 4em;/*85px*/
	color: #00A4B8;
	color: rgb(0, 164, 184);
	text-shadow: 5px 5px 3px rgba(0, 0, 0, 0.85);
	padding: 200px 0 0 0;
}
.anim1_cta a:hover {
	color: #eea0ff;
}
.anim1-home {
	box-sizing: border-box;
	width: 65%;
	height:600px;
	float: left;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
}
.center-wrapper {
	width:66%;
	height: 600px;
	}
.welcome {
	width: 34%;
	height: 600px;
	float: left;
	padding: 2%;
	box-sizing: border-box;
	background-color: #E81DB4;
	clear: right;
}
.welcome-overlay {
  background-color: #640b6c;
  background-color: rgba(100, 11, 108, .6);
  padding: 2%;
  position: relative;
  right: 0;
  top: 0;
  z-index: 20;
}
.btn_call {
	width: 45%;
	padding: 2% 2%;
	margin: auto;
	font-family: Hero;
	font-size : 2em;
	text-align: center;
	color: #eea0ff;
	border: 1px solid #fff;
	background-color: #DBAE3E;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
    border-radius: 5px;
}
.btn_call:hover, .btn_call:active, .btn_call:focus {
	width: 45%;
	padding: 2% 2%;
	color: #00A4B8;
	border: 1px solid #e80c7a;
    background-color: #000000;
	background-color:rgba(0, 0, 0, 0.3);
    transition: 2s background-color;
}

.twitter-feed {
	display: block;
	background-color: #E81DB4;
	width: 35%;
	height: 600px;
	padding: 2%;
	box-sizing: border-box;
	float: left;
}
.twitter-feed h3 {
	text-align: center;
	margin: -1% 0 10px 0;
}
.twitter-overlay {
  background-color: #000000;
  background-color: rgba(0, 0, 0, .6);/*rgba(100, 11, 108, .6); */
  padding: 2%;
  height: 80%;
  position: relative;
  right: 0;
  top: 0;
  z-index: 20;
}
.anim2 {
	width: 65%;
	height: 37.5em;
	padding: 2em 0 0 0;
	box-sizing: border-box;
	float: left;
	background-color: #B10253;
	background:url(assets/img/darkcitybkg.jpg);
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	clear: right;
}
/* ==== footer full size  ===== */
footer { 
	position: bottom;
	width: 100%;
	min-height: 8em;
	padding: 1.5625em 0 !important;
    background: #640b6c;
	background: rgba(100, 11, 108, .6);
	clear: both;
}
footer .social {
	font-family: Hero;
	font-size: 1.6em;
	text-transform: uppercase;
	width: 60%;
	box-sizing: border-box;
	display: inline;
}
footer .social a, a:hover {
	display:inline;
	transition: 2s background-color;
}
footer a:link, a:visited {
	color: #DBAE3E;
	border-bottom: none;
	text-decoration: none;
}
footer .social a:hover {
	color: #E8B9DC;
	background-color: #00A4B8;
}
footer .twitter {
	width: 2em;
	height: 2em;
	margin-left: 25px;
	padding: 20px 10px 0 10px;
	border-radius: 50%;
	background-color: #c30083;
	text-align: center;
	vertical-align: middle;
	float: left;
}
footer .linkedin {
	width: 2em;
	height: 2em;
	margin-left: 25px;
	padding: 20px 10px 0 10px;
	border-radius: 50%;
	background-color: #c30083;
	text-align: center;
	vertical-align: middle;
	float: left;
}
footer .pinterest {
	width: 2em;
	height: 2em;
	margin-left: 25px;
	padding: 20px 10px 0 10px;
	border-radius: 50%;
	background-color: #c30083;
	text-align: center;
	vertical-align: middle;
	float: left;
	}
footer .youtube {
	width: 2em;
	height: 2em;
	margin-left: 25px;
	padding: 20px 10px 0 10px;
	border-radius: 50%;
	background-color: #c30083;
	text-align: center;
	vertical-align: middle;
	float: left;
	}
footer .facebook {
	width: 2em;
	height: 2em;
	margin-left: 25px;
	padding: 20px 10px 0 10px;
	border-radius: 50%;
	background-color: #c30083;
	text-align: center;
	vertical-align: middle;
	float: left;
}
footer .googlep {
	width: 2em;
	height: 2em;
	margin-left: 25px;
	padding: 20px 10px 0 10px;
	border-radius: 50%;
	background-color: #c30083;
	text-align: center;
	vertical-align: middle;
	float: left;
	}
/* footer nav from imagine template */
.col-xs-12 .col-sm-7 {
	min-height:2em;
}
footer .s-menu {
	display: inline;
	margin-left:4em;
	font-family:Hero;
	float: left;
	}
footer .s-menu ul {
    margin: 2em 0px; 
	}
footer .s-menu li {
    margin-right: 5px;
	display:inline;
		}
footer .s-menu li a {
      padding-right: 6px;
      border-right: 1px solid white; 
}
footer .s-menu li:last-child a {
      border-right: medium none;
      padding-right: 4em; }
/* === media queries for footer nav only ====*/
@media all and (max-width: 767px) {
  footer .s-menu {
    overflow: hidden;
    display: table;
    margin: 0 auto; }
  footer .copyright {
    text-align: center; } 
}
.copyright {
	margin: 2.8em 0 0 83em;
	font-family: Hero;
	color: #c30083;
	font-size: .8em;
	font-weight: 400;
	line-height: 1.2em;
	}
.copyright a:link, .copyright a:visited {
	color: #DBAE3E;
	border-bottom: 1px dotted #00A4B8;
	text-decoration: none;
}
.copyright a:hover {
	color: #00A4B8;
	border-bottom: 1px solid #DBAE3E;
	background-color:none;
}
   /* ============= privacy policy ========= */
   .privacy {
        margin: 2% 4%;
        background: rgba(217, 9, 139, .62);
   }
		/* ======= about page full ========  */
.bkgPink {
	display:block;
	position: absolute;
	top: 130px;
	min-height: 35%;
	min-width: 100%;
    background: #d9098b;
	background: rgba(217, 9, 139, .62); /*#d9098b*/
	padding: 2% 0;
	z-index: -10;
}
.bkgPink h2 {
	text-align: center;
	}
a:hover {
	color: #00A4B8;
	border-bottom: 1px solid #DBAE3E;
}
a:link a:hover a:visited {
	text-decoration: none;
}
	/*  ========== about us full size =============== */
.geeks {
	margin: 0 0 0 2%;
	width: 100%;
	/*-webkit-columns: 30% 3;
   -moz-columns: 30% 3;
        columns: 30% 3; */
	}
.webgeek, .mediageek, .musicgeek {
	margin: 1% 1% 2% 1%; /*top right bottom left*/
	box-sizing: border-box;
	}
.webgeek {
	margin-left:3%;
	width: 30%;
	float: left;
	}
.mediageek {
	width: 30%;
	float: left;
	}
.musicgeek {
	width: 30%;
	float: left; 
	clear: right;
	}
.webgeek img, .mediageek img, .musicgeek img {
	background: #00a4b8;
    background: rgba(0, 164, 184, .62);
	border: 0;
	padding: 3px 0 0 0;
	width: 340px; 
	height: 340px; 
	float: left;
	-webkit-border-radius: 50%; 
	-moz-border-radius: 50%; 
	border-radius: 50%;
	}
.whyus {
	display:block;
	position: relative;
	top: 0;
	margin: 47.65em 0 0 0;
	max-width: 100%;
	min-height: 10em;
	color: #dbaa70;
	font-size: 1.2em;
	letter-spacing: 1px;
	float:left;
    background: #00a4b8;
	background: rgba(0, 164, 184, .62);
	border: 0;
	padding: 2% 4%;
	float: left;
	clear: right;
	}
.whyus h3 {
	font-family: Hero;
	font-weight: 100;
	padding: 0 0 .7em 0;
	text-shadow : none;
	}
.legal h3 {
	font-size: 1.2em;
	font-weight: 100;
	text-shadow : 2px 2px 1px rgba(0, 0, 0, 0.80);
}
.legal {
	font-size: .8em;
}
		/* ======== work styles full ========= */
.web1, .graphics1, .media1 {
	padding: 16px 20px 0 20px;
	box-sizing: border-box;
	text-align: center;
	}
.web1 {
	margin: 1% 2% 2.5% 6%; /*top right bottom left*/
	width: 350px; 
	height: 350px; 
	float: left;
	-webkit-border-radius: 50%; 
	-moz-border-radius: 50%; 
	border-radius: 50%;
    background: #00a4b8;
    background: rgba(0, 164, 184, .62); 
	border: 0;
	color: #bd92b2;
		}
.graphics1 {
	margin: 1% 2% 2% 3%; /*top right bottom left*/
	width: 350px; 
	height: 350px; 
	float: left;
	-webkit-border-radius: 50%; 
	-moz-border-radius: 50%; 
	border-radius: 50%;
	background: #00A4B8;
    background: rgba(0, 164, 184, .62);
	border: 0; 
	color: #bd92b2;
		}
.media1 {
	margin: 1% 0 2% 3%; /*top right bottom left*/
	width: 350px; 
	height: 350px; 
	float: left;
	-webkit-border-radius: 50%; 
	-moz-border-radius: 50%; 
	border-radius: 50%;
	background: #00A4B8;
    background: rgba(0, 164, 184, .62); 
	border: 0; 
	color: #bd92b2;
}
.circle1 h3, .circle2 h3, .circle3 h3 {
	text-align: center;
	}
.portfolio {
	position: relative;
	top: 0;
	margin: 35em 0 0 0;
	width: 100%;
	min-height: 42em;
    background: #00a4b8;
	background: rgba(0, 164, 184, .62);
}
.portfolio h2 {
	text-align: center;
	font-size: 2.5em;
	color: #DBAE3E;
	padding: .5em 0 0 0;
}
.portfolio p {
	margin: 0 0 0 4em;
	}
.box-wrapper {
	margin-left: 6em;
}
.box {
	width: 22em;
	margin: 2em 0 1em 0;
	float: left;
	clear: right;
}
.box img {
	max-width: 95%;
}
.samples {
	position: relative;
	top: 0;
	margin: 0 0 0 0;
	padding: 2% 3%;
	width: 100%;
	min-height: 42em;
    background: #d9098b;
	background: rgba(217, 9, 139, .62); /*#d9098b*/
}
.samples a {
	padding-left: 2%;
}
.samples h2 {
	text-align: center;
	font-size: 2.5em;
	padding: .5em 0 0 0;
	}
section .engine {
	margin: 45% 0 0 0;
	width: 100%;
	min-height: 25%;
    background: #00a4b8;
	background: rgba(0, 164, 184, .62);
}
		/* ========  contact full size =========== */
.title {
	font-family: 'dancing script';
	font-size: 4em;
	color: #f0be2a;
	text-align: center;
	padding: 0 0 2% 0;
	}
.circle1, .circle2, .circle3 {
	padding: 1.5em 1.75em 0 1.75em;
	box-sizing: border-box;
	text-align: center;
	}
.circle1 {
	margin: 1% 3% 6% 5%; /*top right bottom left*/
	width: 20em; 
	height: 20em; 
	float: left;
	-webkit-border-radius: 50%; 
	-moz-border-radius: 50%; 
	border-radius: 50%;
	background: #00A4B8;
    background: rgba(0, 164, 184, .62); 
	border: 0;
	color: #bd92b2;
}
.circle2 {
	margin: 1% 3% 2% 3%; /*top right bottom left*/
	width: 20em; 
	height: 20em; 
	float: left;
	-webkit-border-radius: 50%; 
	-moz-border-radius: 50%; 
	border-radius: 50%;
	background: #00A4B8;
    background: rgba(0, 164, 184, .62);
	border: 0; 
	color: #bd92b2;
		}
.circle3 {
	margin: 1% 5% 2% 3%; /*top right bottom left*/
	width: 20em; 
	height: 20em; 
	float: left;
	-webkit-border-radius: 50%; 
	-moz-border-radius: 50%; 
	border-radius: 50%;
	background: #00A4B8;
    background: rgba(0, 164, 184, .62); 
	border: 0; 
	color: #bd92b2;
}
.circle1 h3, .circle2 h3, .circle3 h3 {
	text-align: center;
	font-size: 2.5em;/*40px*/
    text-shadow : 2px 2px 1px rgba(0, 0, 0, 0.80);
}
.intro  {
	position: relative;
	top: 0;
	margin: 27.7em 0 0 0;
	max-width: 100%;
	min-height: 10em;
	color: #dbaa70;
	font-size: 1.2em;
	letter-spacing: 1px;
    background: #00a4b8;
	background: rgba(0, 164, 184, .62);
	border: 0;
	padding: 2% 4%;
	float: left;
}
.intro h3 {
	font-size: 1.8em;/*28.8px*/
    text-shadow : 2px 2px 1px rgba(0, 0, 0, 0.80);
	}
.map {
	margin: 2% 0 3% 15%;
	width: 35%;
	height: 450px;
	float: left;
	background: #00A4B8;
    background: rgba(0, 164, 184, .62); 
	border: 0;
	padding: 5px 8px;
}
.maptitle {
	margin: 2% 0 0 15%;
	width: 35%;
	text-align: center;
	float: left;
	font-family: BlackJack;
	font-size: 3em;
	color: #00A4B8;
    color: rgb(0, 164, 184);
    text-shadow : 5px 5px 1px rgba(0, 0, 0, 0.80);
}
.map iframe {
	overflow: hidden;
	}
			/* ======== form styles full size ======== */
@import url(http://fonts.googleapis.com/css?family=Oswald);
@import url(http://fonts.googleapis.com/css?family=Muli:300);

/* Centres the page (this could be container)*/
.form {
    display:block;
    margin: 2% 0 2% 5%;
    width:35%;
    font-family: 'Muli', sans-serif;
    font-size: 16px;
    color: #999;
	float: left;
}
.formtitle {
	font-family: BlackJack;
	font-size: 3em;
	color: #00A4B8;
    color: rgb(0, 164, 184);
    text-shadow : 5px 5px 1px rgba(0, 0, 0, 0.80);
	text-align: center;
	padding: 0;
	}
/* Labels are titles for the text fields. You can use a placeholder instead if you like*/
label 
{
    display:block;
    margin-top:20px;
    letter-spacing:2px;
}
/* Centres the form within the page */
form 
{
    margin:0 auto;
    width:459px;
}
/* Styles the text boxes */
input, textarea, file {
	width:439px;
	height:27px;
	background-color:#efefef;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
    border-radius:5px;
	border:1px solid #dedede;
	padding:10px;
	margin-top:3px;
	font-size:0.9em;
	color:#3a3a3a;
}
	input:focus, textarea:focus {
		border:1px solid #97d6eb;
	}
/* Styles the text area boxes (message field) */	
textarea 
{
	height:213px;
	background-color: #efefef;
}
/* Styles the submit button */
#submit {
	/* background:url(images/submit.png); */
	background-color: #216182;
	width:127px;
	height:48px;
	color: #DBAE3E;
	text-align: center;
	/* text-indent:-9999px; */
	border:none;
	margin-top:20px;
	cursor:pointer;
}
/* Styles the submit hover */	
#submit:hover {
	color:#fff;
	background-color: #c30083;
	opacity:0.9;
}
/* Styles the cancel button*/	
#cancel {
	/* background:url(images/cancel.png); */
	width:127px;
	height:28px;
	text-align: center;
	/* text-indent:-9999px; */
	border:none;
	margin-top:20px;
	cursor:pointer;
}
/* Styles the cancel hover */
#cancel:hover {
	color:#fff;
	background-color: #000;
	opacity:0.9;
} /*end form --------------------------*/

           /* ============= end of regular size screen ============= */

		/* -------------========== media queries ------------- */

				/* ====== x-tra large screens 120em = 1920px large laptops & desktops ====== */
@media only screen and (min-width: 120em) {
header img {
	max-width: 100%;
	padding: .5em 1em 0 1em;
	z-index: 400;
}
nav {
	padding: 1em .8em 0 30em;
}
.video_wrapper {
	height: 52.75em;
	padding: 1% 0 0 0;
}
.herocircle {
  width : 43%/*659px*/;
  height : 90%;
  margin: 0 0 2% 5%;
  padding: 3em;
  text-align: center;
  border-radius: 50%;
  z-index: ;
}
.btn_cta1 {
  padding: 1em 0 0 0;
}
.webgeek img, .mediageek img, .musicgeek img {
	border: 0;
	padding: 3px 0 0 0;
	width: 30em; 
	height: 30em; 
	float: left;
}
.whyus {
	position: relative;
	top: 0;
	margin: 51.7em 0 0 0;
}
.intro  {
	position: relative;
	top: 0;
	margin: 31em 0 0 0;
}
.copyright {
	margin: 2.1em 0 0 83em;
}
}
		/* ====== x-tra large screens 85.375em = 1366px large laptops & desktops ====== */
@media only screen and (min-width: 83em) and (max-width: 100em) {
header img {
	max-width: 100%;
	padding: .5em 1em 0 1em;
	z-index: 400;
}
nav {
	padding: 1em .8em 0 22em !important;
}
.intro  {
	position: relative;
	top: 0;
	margin: 27.8em 0 0 0;
}
.webgeek img, .mediageek img, .musicgeek img {
	background: #00a4b8;
    background: rgba(0, 164, 184, .62);
	border: 0;
	padding: 3px 0 0 0;
	width: 21.25; 
	height: 21.25; 
	float: left;
	-webkit-border-radius: 50%; 
	-moz-border-radius: 50%; 
	border-radius: 50%;
}
.whyus {
	position: relative;
	top: 0;
	margin: 47.3em 0 0 0;
}
.copyright {
	margin: 2.1em 0 0 40em;
	padding-left: 40em;
}
}
/* ====== x-tra large screens 80em = 1280px large laptops & desktops ====== */
@media only screen and (min-width: 80em) and (max-width: 82em){
header img {
	max-width: 100%;
	padding: .5em 1em 0 1em;
	z-index: 400;
}
nav {
	padding: 1em .8em 0 20em;
}
.welcome {
	width: 34%;
	height: 44em;
	font-size: .955em;
	float: left;
	padding: 2%;
	box-sizing: border-box;
	clear: right;
}
.anim1 {
	box-sizing: border-box;
	width: 66%;
	height:42em;
	text-align: center;
}
	/* ====== about 1280px ====== */
.webgeek img, .mediageek img, .musicgeek img {
	background: #00a4b8;
    background: rgba(0, 164, 184, .62);
	border: 0;
	padding: 3px 0 0 0;
	width: 21.25; 
	height: 21.25; 
	float: left;
	-webkit-border-radius: 50%; 
	-moz-border-radius: 50%; 
	border-radius: 50%;
}
.whyus {
	position: relative;
	top: 0;
	margin: 48.7em 0 0 0;
}
		/* ===== contact 1280px ======== */
.intro  {
	position: relative;
	top: 0;
	margin: 27.3em 0 0 0;
}

}
		/* ====== large screens  68.75em =1100px  media queries for tablets & laptops ====== */
@media only screen and (min-width: 68.75em) and (max-width: 78em) {
header img {
	max-width: 100%;
	padding: .5em 1em 0 1em;
	z-index: 400;
}
nav {
	padding: 1em .8em 0 15em;
}
p {
  font-size : 1em;/*on 16px base*/
}
.herocircle {
  width : 60%/*659px*/;
  height : 85%;
  line-height: 3.5em;
  padding: 2%;
  text-align: center;
  z-index: ;
}
.herocircle img {
	max-width: 20%;
	float: left;
	padding: 0 0 0 15%;
	}
.btn_cta1 {
  float:left;
  margin-top: -5%;
  padding-right: 2%;
  font-family : Hero;
  font-size : 2em;/*32px*/
  line-height: 1em;
  color : #DBAE3E;
  color : rgb(219, 174, 62);
}
.video_wrapper {
	background: url(assets/img/designcity-christmas.gif.gif);
	background-size: 100%;
	background-repeat: no-repeat;
	width: 100%;
	height: 400px;
}
.video_wrapper {
	background: url(assets/img/designcity-christmas-gif.gif);
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
	height: 380px;
}
			/* ---- about page 1100px -----  */
.bkgPink {
	position: absolute;
	top: 130px;
	min-height: 35%;
	min-width: 100%;
    background: #d9098b;
	background: rgba(217, 9, 139, .62); /*#d9098b*/
	padding: 2% 0;
	z-index: -10;
}
.bkgPink h2 {
	margin: 1% 0;
	text-align: center;
	}
.geeks {
	margin: 0 0 0 2%;
	width: 100%;
	float: left;
}
.webgeek, .mediageek, .musicgeek {
	margin: 1% 2% 2% 1%; /*top right bottom left*/
	float: left;
	}
.webgeek img, .mediageek img, .musicgeek img {
	background: #00a4b8;
    background: rgba(0, 164, 184, .62);
	border: 0;
	padding: 3px 0 0 0;
	width: 21.25; 
	height: 21.25; 
	float: left;
	-webkit-border-radius: 50%; 
	-moz-border-radius: 50%; 
	border-radius: 50%;
}
.webgeek {
	width: 30%;
	float: left;
	}
.mediageek {
	width: 30%;
	float: left;
	}
.musicgeek {
	width: 30%;
	float: left;
	}
.whyus {
	position: relative;
	top: 0;
	margin: 41em 0 0 0;
	max-width: 100%;
	min-height: 10em;
	color: #dbaa70;
	font-size: 1.2em;
	letter-spacing: 1px;
	background: #00a4b8;
    background: rgba(0, 164, 184, .62);
	border: 0;
	padding: 2% 4%;
	float: left;
	clear: right;
	}
.whyus h3 {
	font-family: Hero;
	font-weight: 100;
	padding: 0 0 .7em 0;
	text-shadow : none;
	}
		/* ========= contact page 1100px ==========  */
.circle1 {
	margin: 1% 3em 6% 6em; /*top right bottom left*/
	width: 20em; 
	height: 20em; 
	float: left;
	-webkit-border-radius: 50%; 
	-moz-border-radius: 50%; 
	border-radius: 50%;
	background: #00A4B8;
    background: rgba(0, 164, 184, .62); 
	border: 0;
	color: #bd92b2;
}
.circle2 {
	margin: 1% 3em 2% 1%; /*top right bottom left*/
	width: 20em; 
	height: 20em; 
	float: left;
	-webkit-border-radius: 50%; 
	-moz-border-radius: 50%; 
	border-radius: 50%;
	background: #00A4B8;
    background: rgba(0, 164, 184, .62);
	border: 0; 
	color: #bd92b2;
		}
.circle3 {
	margin: 1% 2% 2% 1%; /*top right bottom left*/
	width: 20em; 
	height: 20em; 
	float: left;
	-webkit-border-radius: 50%; 
	-moz-border-radius: 50%; 
	border-radius: 50%;
	background: #00A4B8;
    background: rgba(0, 164, 184, .62); 
	border: 0; 
	color: #bd92b2;
}
}
		/* ====== standard screens  min-width 61.25em 980px ====== */
@media only screen and (min-width: 61.25em) and (max-width: 75em){
header img {
	max-width: 100%;
	padding: .5em 1em 0 1em;
	z-index: 400;
}
nav {
	padding: 1em .8em 0 9em;
}
.video_wrapper {
	background: url("assets/img/designcity-christmas-gif.gif");
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	width: 100%;
	height: 48.75em;
	padding: 1% 0 0 0;
}
.herocircle {
  width : 60%/*659px*/;
  height : 80%;
  margin: 0 0 2% 5%;
  padding: 2.5em;
  text-align: center;
  border-radius: 50%;
  z-index: ;
}
.welcome {
	width: 34%;
	height: 46.7em;
	font-size: .9em;
	float: left;
	padding: 2%;
	box-sizing: border-box;
	clear: right;
}
.anim1 {
	box-sizing: border-box;
	width: 66%;
	height:42em;
	text-align: center;
}
.twitter-feed {
	width: 35%;
	height: 37.5em;
	padding: 2%;
	box-sizing: border-box;
	float: left;
}
.twitter-overlay {
  height: 22em;
 }
		/*  ========== about 980px ==========  */
.webgeek img, .mediageek img, .musicgeek img {
	border: 0;
	padding: 3px 0 0 0;
	width: 16em; 
	height: 16em; 
	float: left;
	-webkit-border-radius: 50%; 
	-moz-border-radius: 50%; 
	border-radius: 50%;
	}
.whyus {
	position: relative;
	top: 0;
	margin: 51.3em 0 0 0;
	max-width: 100%;
	min-height: 10em;
	font-size: 1.2em;
	letter-spacing: 1px;
	padding: 2% 4%;
	float: left;
}
.copyright {
	margin: 6.8em 0 0 53em;
}
			/* ===== contact 980px ======= */
.intro  {
	position: relative;
	top: 0;
	margin: 23em 0 0 0;
}
.circle1, .circle2, .circle3 {
	padding: 1.5em 1.25em 0 1.25em;
	box-sizing: border-box;
	text-align: center;
	font-size: .9em;
	}
.circle1 {
	margin: 1% 1em 6% 3em; /*top right bottom left*/
	width: 18.5em; 
	height: 18.5em; 
	float: left;
}
.circle2 {
	margin: 1% 1em 6% 1em; /*top right bottom left*/
	width: 18.5em; 
	height: 18.5em; 
	float: left;
}
.circle3 {
	margin: 1% 1em 6% 1em; /*top right bottom left*/
	width: 18.5em; 
	height: 18.5em; 
	float: left;
}
.circle1 h3, .circle2 h3, .circle3 h3 {
	text-align: center;
	font-size: 2em;/*32px*/
    text-shadow : 2px 2px 1px rgba(0, 0, 0, 0.80);
}
}
/* ====== tablet screens  min-width 50em 800px ====== */
@media only screen and (min-width: 50em) and (max-width: 60em) {
header img {
	max-width: 100%;
	padding: .5em 1em 0 1em;
	z-index: 400;
}
nav {
	padding: .7em .3em 0 6.8em;
	font-size: 1.4em;
	font-weight: 400;
}
nav ul li {
	width: 2.9em;
	height: 2.9em;
	margin: 0 0 0 1em;
	padding: 2.9em 0 0 0;
	}
.intro  {
	position: relative;
	top: 0;
	margin: 22.6em 0 0 0;
}
.circle1, .circle2, .circle3 {
	padding: 1.5em 1.25em 0 1.25em;
	box-sizing: border-box;
	text-align: center;
	font-size: .8em;
	}
.circle1 {
	margin: 1% 1em 6% 1em; /*top right bottom left*/
	width: 17em; 
	height: 17em; 
	float: left;
}
.circle2 {
	margin: 1% 1em 6% 1em; /*top right bottom left*/
	width: 17em; 
	height: 17em; 
	float: left;
}
.circle3 {
	margin: 1% 1em 6% 1em; /*top right bottom left*/
	width: 17em; 
	height: 17em; 
	float: left;
}
.circle1 h3, .circle2 h3, .circle3 h3 {
	text-align: center;
	font-size: 2em;/*32px*/
    text-shadow : 2px 2px 1px rgba(0, 0, 0, 0.80);
}
.map {
	margin: 2% 0 3% 1em;
	width: 40%;
	height: 15em;
	overflow: hidden;
	float: left;
	border: 0;
	padding: 5px 8px;
}
.maptitle {
	margin: 2% 0 0 1em;
	width: 30%;
	text-align: center;
	float: left;
	font-size: 3em;
	text-shadow : 5px 5px 1px rgba(0, 0, 0, 0.80);
}
.map iframe {
	overflow: hidden;
	}
			/* ======== form styles full size ======== */
@import url(http://fonts.googleapis.com/css?family=Oswald);
@import url(http://fonts.googleapis.com/css?family=Muli:300);

/* Centres the page (this could be container)*/
.form {
    display:block;
    margin: 2% 1em 2% 2em;
    width:45%;
    float: left;
}
.formtitle {
	font-size: 3em;
	text-shadow : 5px 5px 1px rgba(0, 0, 0, 0.80);
	text-align: center;
	padding: 0;
	}
/* Labels are titles for the text fields. You can use a placeholder instead if you like*/
label 
{
    display:block;
    margin-top:20px;
    letter-spacing:2px;
}
/* Centres the form within the page */
form  {
    margin:0 auto;
    width:22em;
}
/* Styles the text boxes */
input, textarea, file {
	width:20em;
	height:27px;
	background-color:#efefef;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
    border-radius:5px;
	border:1px solid #dedede;
	padding:10px;
	margin-top:3px;
	font-size:0.9em;
	color:#3a3a3a;
}
	input:focus, textarea:focus {
		border:1px solid #97d6eb;
	}
/* Styles the submit button */
#submit {
	/* background:url(images/submit.png); */
	background-color: #216182;
	width:127px;
	height:48px;
	color: #DBAE3E;
	text-align: center;
	/* text-indent:-9999px; */
	border:none;
	margin-top:20px;
	cursor:pointer;
}
/* Styles the cancel button*/	
#cancel {
	/* background:url(images/cancel.png); */
	width:127px;
	height:28px;
	text-align: center;
	/* text-indent:-9999px; */
	border:none;
	margin-top:20px;
	cursor:pointer;
}
/*end form --------------------------*/
    footer .copyright {
	margin: 6.8em 0 0 10em;
	font-size: .8em;
}

/* ---- hero video fallback ---- */
@media screen and (max-device-width: 800px) {
    html {
         background: url(assets/img/designcity2.jpg) #000 no-repeat center center fixed;
		 }
    #hero {
        display: none;
}
	#vidpause {
		display: none;
}
}
		/* ====== tablet screens  min-width 48em 768px ====== */
@media only screen and (min-width: 48em) and (max-width: 49em){
header img {
	max-width: 100%;
	padding: .5em 1em 0 1em;
	z-index: 400;
	}
nav {
	display: block;
	width: 100%;
	height: 7.8125em;
	padding: .7em .5em 0 4em;
	font-size: 1.1em;
	font-weight: 400;
}
nav ul {
	float: left;
    list-style:none; /*gets rid of dots*/
    height:50px;
	}
nav ul li {
	width: 4.1em;
	height: 4.1em;
	margin: 0 0 0 1em;
	padding: 4.5em 0 0 0;
	}
ul li a {}
h1 {
  font-size : 4.5em;/*72px*/
  }
h2 {
  font-size : 3em;/*32px*/
}
h3 {
  font-size : 1.6em;/*25px*/
  text-shadow: 3px 3px 1px rgba(0, 0, 0, .80)
}
h4 {
  font-size : 1.6em;/*25px*/
}
h5 {
  font-size : 1.2em;/*18px*/
}
p {
  font-size : 1em;/*on 16px base*/
}

.herocircle {
  width : 38em; /*659px*/
  height : 85%;
  line-height: 4em;
  margin: 0 0 0 5%;
  padding: 3em 2em;
  text-align: center;
  border-radius: 50%;
  z-index: 500;
}
.herocircle img {
	max-width: 5em;
	float: left;
	padding: 1em 0 0 15%;
	}
.btn_cta1 {
  float:left;
  padding: 3em 0 0 .8em;
  font-family : Hero;
  font-size : 2.2em;/*50px*/
  line-height: 1.5em;
  color : #DBAE3E;
  color : rgb(219, 174, 62);
}
.video_wrapper {
	background: url(assets/img/designcity-christmas-gif.gif);
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
	height: 40.625em;
}
.anim1 {
	box-sizing: border-box;
	background-color: #B10253;
	width: 64%;
	height:37.5em;
}
.btn_call {
	width: 55%;
	padding: 2% 2%;
	margin: auto;
}
.btn_call {
	width: 55%;
	padding: 2% 2%;
	margin: auto;
}
.btn_call:hover, .btn_call:active, .btn_call:focus {
	width: 55%;
}
.welcome {
	width: 36%;
	height: 600px;
	float: left;
	padding: 1%;
	box-sizing: border-box;
	background-color: #E81DB4;
	clear: right;
}
.welcome-overlay {
  background-color: #640b6c;
  background-color: rgba(100, 11, 108, .6);
  padding: 1%;
  position: relative;
  right: 0;
  top: 0;
  z-index: 20;
}
.twitter-feed {
	width: 35%;
	height: 28em;
	padding: 1em;
	box-sizing: border-box;
	float: left;
}
.twitter-feed h3 {
	text-align: center;
	margin: -1% 0 .5em 0;
}
.twitter-overlay {
  padding: 2%;
  height: 85%;
  position: relative;
  right: 0;
  top: 0;
  z-index: 20;
}
.anim2 {
	width: 65%;
	height: 28em;
	padding: 2em 0 0 0;
	box-sizing: border-box;
	float: left;
	clear: right;
}
		/*  ====  copyright for 768px ==== */
footer .copyright {
	margin: 6.8em 0 0 10em;
	font-size: .8em;
}	
		/* ---- about page 768px -----  */
.bkgPink {
	position: absolute;
	top: 8.13em;
	min-height: 35%;
	min-width: 100%;
    background: #d9098b;
	background: rgba(217, 9, 139, .62); /*#d9098b*/
	padding: 2% 0;
	z-index: -10;
}
.bkgPink h2 {
	text-align: center;
	font-family: 1.5em;
	}
.geeks {
	margin: 0 0 0 2%;
	width: 100%;
	float: left;
}
.webgeek, .mediageek, .musicgeek {
	margin: 1% 2% 2% 1%; /*top right bottom left*/
	}
.webgeek img, .mediageek img, .musicgeek img {
	background: #00a4b8;
    background: rgba(0, 164, 184, .62);
	border: 0;
	padding: 3px 0 0 0;
	width: 15em; 
	height: 15em; 
	float: left;
	-webkit-border-radius: 50%; 
	-moz-border-radius: 50%; 
	border-radius: 50%;
	}
.webgeek {
	width: 30%;
	float: left;
	}
.mediageek {
	width: 30%;
	float: left;
	}
.musicgeek {
	width: 30%;
	float: left;
}
.whyus {
	position: relative;
	top: 0;
	margin: 43em 0 0 0;
	max-width: 100%;
	min-height: 10em;
	font-size: 1.2em;
	letter-spacing: 1px;
	padding: 2% 4%;
	float: left;
}
.whyus h3 {
	font-weight: 100;
	padding: 0 0 .7em 0;
}
		/* =========== contact 768px ============= */
.circle1, .circle2, .circle3 {
	padding: 1.5em 1.25em 0 1.25em;
	box-sizing: border-box;
	text-align: center;
	font-size: .9em;
	}
.circle1 {
	margin: 1% 1em 6% 1em; /*top right bottom left*/
	width: 15em; 
	height: 15em; 
	float: left;
}
.circle2 {
	margin: 1% 1em 6% 1em; /*top right bottom left*/
	width: 15em; 
	height: 15em; 
	float: left;
}
.circle3 {
	margin: 1% 1em 6% 1em; /*top right bottom left*/
	width: 15em; 
	height: 15em; 
	float: left;
}
.circle1 h3, .circle2 h3, .circle3 h3 {
	text-align: center;
	font-size: 2em;/*32px*/
    text-shadow : 2px 2px 1px rgba(0, 0, 0, 0.80);
}
.intro  {
	position: relative;
	top: 0;
	margin: 17.9em 0 0 0;
	max-width: 100%;
	font-size: 1.2em;
}
.intro h3 {
	font-size: 1.8em;/*28.8px*/
    text-shadow : 2px 2px 1px rgba(0, 0, 0, 0.80);
	}
.map {
	margin: 2% 0 3% 1em;
	width: 40%;
	height: 15em;
	overflow: hidden;
	float: left;
	color: #00A4B8;
    border: 0;
	padding: 5px 8px;
}
.maptitle {
	margin: 2% 0 0 1em;
	width: 30%;
	text-align: center;
	float: left;
	font-family: BlackJack;
	font-size: 3em;
	color: #00A4B8;
    color: rgb(0, 164, 184);
    text-shadow : 5px 5px 1px rgba(0, 0, 0, 0.80);
}
.map iframe {
	overflow: hidden;
	}
			/* ======== form styles full size ======== */
@import url(http://fonts.googleapis.com/css?family=Oswald);
@import url(http://fonts.googleapis.com/css?family=Muli:300);

/* Centres the page (this could be container)*/
.form {
    display:block;
    margin: 2% 1em 2% 2em;
    width:45%;
    font-family: 'Muli', sans-serif;
    font-size: 16px;
    color: #999;
	float: left;
}
.formtitle {
	font-family: BlackJack;
	font-size: 3em;
	color: #00A4B8;
    color: rgb(0, 164, 184);
    text-shadow : 5px 5px 1px rgba(0, 0, 0, 0.80);
	text-align: center;
	padding: 0;
	}
/* Labels are titles for the text fields. You can use a placeholder instead if you like*/
label 
{
    display:block;
    margin-top:20px;
    letter-spacing:2px;
}
/* Centres the form within the page */
form 
{
    margin:0 auto;
    width:22em;
}
/* Styles the text boxes */
input, textarea, file {
	width:20em;
	height:27px;
	background-color:#efefef;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
    border-radius:5px;
	border:1px solid #dedede;
	padding:10px;
	margin-top:3px;
	font-size:0.9em;
	color:#3a3a3a;
}
	input:focus, textarea:focus {
		border:1px solid #97d6eb;
	}
/* Styles the submit button */
#submit {
	/* background:url(images/submit.png); */
	background-color: #216182;
	width:127px;
	height:48px;
	color: #DBAE3E;
	text-align: center;
	/* text-indent:-9999px; */
	border:none;
	margin-top:20px;
	cursor:pointer;
}
/* Styles the cancel button*/	
#cancel {
	/* background:url(images/cancel.png); */
	width:127px;
	height:28px;
	text-align: center;
	/* text-indent:-9999px; */
	border:none;
	margin-top:20px;
	cursor:pointer;
}
 /*end form --------------------------*/

		/* ====== small tablet screens  min-width 37.5em 600px ====== */
@media only screen and (min-width: 37.5em) {
}
		/* ====== @media only screen and (min-width:30em) small screens 30em = 480px ====== */
@media only screen and (min-width: 20em) and (max-width: 30em) {

h1 {
  font-size : 4.5em;/*72px*/
  }
h2 {
  font-size : 2em;/*28px*/
}
h3
{
  font-size : 1.6em;/*25px*/
}
h4
{
  font-size : 1.6em;/*25px*/
}
h5
{
  font-size : 1.2em;/*18px*/
}
p 
{
  font-size : 1em;/*on 16px base*/
}
header {
	width: 100%;
	background : #640b6c;
    background: rgba(100, 11, 108, .6);
  	height : 8em;
	margin: 0;
	z-index:200;
}
header img {
	max-width: 28%;
	padding: .5em 1em 0 1em;
	z-index: 400;
	}
nav {
	display: block;
	width: 60%;
	height: 80px;
	font-family: Hero;
	padding: .8em .5em 0 0;
	color: #c30083;
	text-transform: uppercase;
	font-size: 1em;
	font-weight: 400;
	float: left;
}
nav ul {
	float: left;
    list-style:none; /*gets rid of dots*/
    height:50px;
	/*padding-top: 10px;*/
	}
nav ul li {
	width: 45px;
	height: 45px;
	border-radius: 50%;
	background-color: #c30083;
	margin: 0 0 0 15px;
	padding: 30px 0 0 0;
	background-position:center;
	background-repeat:no-repeat;
	}
ul li a {
	
	}
nav a, nav a:visited {
	color: #00A4B8;/*#C09 or #c30083; #e61ff6*/
	transition: 2s background-color;
	}
nav ul li a:hover, nav ul li a:active {
	color: #fff;/*#FC9*/
	padding-top: 1em;
	background-color: #00A4B8;
	text-decoration: none;
}			/* end main nav */
content {
	box-sizing: border-box;
	}
.video_wrapper {
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
	height: 17.5em;
}
.herocircle {
  width : 67%/*659px*/;
  height : 85%;
  line-height: 2em;
  margin: 0 0 0 15%;
  padding: 1.2em;
}
.herocircle img {
	max-width: 20%;
	float: left;
	padding: 0 0 0 10%;
	}
.btn_cta1 {
  float:left;
  margin-top: .7em;
  padding-right: 1px;
  font-size : 1.5em;/*50px*/
  font-weight: 400;
  line-height: 1.3em;
  }

.anim1 {
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
	height:20.3125em;
	float: left;
}
.anim1_cta {
	font-size: 3em;/*85px*/
	text-shadow: 5px 5px 3px rgba(0, 0, 0, 0.85);
	padding: 100px 0 0 0;
}
.welcome {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
    box-sizing: border-box; /*adds borders and padding inside box dimensions*/
	width: 100%;
	height:35em;
	padding: 3%;
}
.welcome-overlay {
  padding: 4%;
  position: relative;
  right: 0;
  top: 0;
  z-index: 20;
}
.twitter-feed {
	display:none;
}
.twitter-overlay {
	display: none;
}
.anim2 {
	width: 100%;
	height: 18.75em;
	padding: .5em 0 0 0;
	float: left;
	background-size: cover;
	background-repeat: no-repeat;
	clear: right;
}
		/*----  contact 480px   ----*/
.bkgPink h2 {
	margin: 2% 0 0 0;
	}
.title {
	font-family: 'dancing script';
	font-size: 4em;
	color: #f0be2a;
	text-align: center;
	margin: 2% 0 0 0;
	padding: 0 0 2% 0;
	}
		/* control for contact page for 360px */
.circle1, .circle2, .circle3 {
	margin: 2% 2em;
	padding: 1em 1.25em .5em 1.25em;
	box-sizing: border-box;
	text-align: center;
	}
.circle1 {
	width: 18.75em; 
	height: 18.75em; 
	float: left;
	-webkit-border-radius: 50%; 
	-moz-border-radius: 50%; 
	border-radius: 50%;
	background: #00A4B8;
    background: rgba(0, 164, 184, .62); 
	border: 0;
	color: #bd92b2;
}
.circle2 {
	width: 18.75em; 
	height: 18.75em; 
	float: left;
	-webkit-border-radius: 50%; 
	-moz-border-radius: 50%; 
	border-radius: 50%;
	background: #00A4B8;
    background: rgba(0, 164, 184, .62);
	border: 0; 
	color: #bd92b2;
		}
.circle3 {
	width: 18.75em; 
	height: 18.75em; 
	float: left;
	-webkit-border-radius: 50%; 
	-moz-border-radius: 50%; 
	border-radius: 50%;
	background: #00A4B8;
    background: rgba(0, 164, 184, .62); 
	border: 0; 
	color: #bd92b2;
}
.circle1 h3, .circle2 h3, .circle3 h3 {
	text-align: center;
	}
.intro  {
	position: absolute;
	top: 0;
	margin: 71.2em 0 0 0;
	max-width: 100%;
	min-height: 10em;
	font-size: 1em;
	letter-spacing: 1px;
	padding: 2% 4%;
	float: left;
}
.map {
	margin: 2em 0 2em 4%;
	width: 90%;
	height: 18.75em;
	overflow: hidden;
	float: left;
	background: #00A4B8;
    background: rgba(0, 164, 184, .62); 
	border: 0;
	padding: 5px 8px;
}
.maptitle {
	margin: 2% 0 0 15%;
	width: 35%;
	text-align: center;
	float: left;
	font-family: BlackJack;
	font-size: 3em;
	color: #00A4B8;
    color: rgb(0, 164, 184);
    text-shadow : 3px 3px 1px rgba(0, 0, 0, 0.80);
}
.map iframe {
	overflow: hidden;
	}
/*--- form styles ---*/
@import url(http://fonts.googleapis.com/css?family=Oswald);
@import url(http://fonts.googleapis.com/css?family=Muli:300);

/* Centres the page (this could be container)*/
.form {
    display:block;
    margin: 90em 0 2% 5%;
    width:90%;
    font-family: 'Muli', sans-serif;
    font-size: 1em;
    color: #999;
	float: left;
}
.formtitle {
	font-family: BlackJack;
	font-size: 3em;
	color: #00A4B8;
    color: rgb(0, 164, 184);
    text-shadow : 3px 3px 1px rgba(0, 0, 0, 0.80);
	text-align: center;
	padding: 0;
	}
/* Labels are titles for the text fields. You can use a placeholder instead if you like*/
label 
{
    display:block;
    margin-top:20px;
    letter-spacing:2px;
}
/* Centres the form within the page */
form 
{
    margin:0 auto;
    width:90%;
}
/* Styles the text boxes */
input, textarea, file {
	width:90%;
	height:27px;
	background-color:#efefef;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
    border-radius:5px;
	border:1px solid #dedede;
	padding:10px;
	margin-top:3px;
	font-size:0.9em;
	color:#3a3a3a;
}
	input:focus, textarea:focus {
		border:1px solid #97d6eb;
	}
/* Styles the text area boxes (message field) */	
textarea 
{
	height:213px;
	background-color: #efefef;
}
/* Styles the submit button */
#submit {
	/* background:url(images/submit.png); */
	background-color: #216182;
	width:127px;
	height:48px;
	color: #DBAE3E;
	text-align: center;
	/* text-indent:-9999px; */
	border:none;
	margin-top:20px;
	cursor:pointer;
}
/* Styles the submit hover */	
#submit:hover {
	color:#fff;
	background-color: #c30083;
	opacity:0.9;
}
/* Styles the cancel button*/	
#cancel {
	/* background:url(images/cancel.png); */
	width:127px;
	height:28px;
	text-align: center;
	/* text-indent:-9999px; */
	border:none;
	margin-top:20px;
	cursor:pointer;
}
/* Styles the cancel hover */
#cancel:hover {
	color:#fff;
	background-color: #000;
	opacity:0.9;
} /*end form --------------------------*/
footer { 
	width: 100%;
	min-height: 9.375em;
	padding: 1em 0;
	clear: both;
}
footer .social {
	width: 100%;
	margin: 0 auto;
	font-size: 1em;
}
footer .twitter, footer .linkedin, footer .pinterest, footer .youtube,
footer .facebook, footer .googlep {
	margin-left: .6em;
	width: 2em;
	height: 2em;
	padding: 7px 4px 0 4px;
	border-radius: 50%;
}
.copyright {
	margin: 1.5em 0 0 3em;
	font-family: Hero;
	color: #c30083;
	font-size: .8em;
	font-weight: 400;
	line-height: 1.2em;
	}
.col-xs-12 .col-sm-7 {
	min-height:2em;
}
footer .s-menu {
	display: inline;
	margin-left:1em;
	line-height: 1.5em;
	font-family:Hero;
	float: left;
	}
footer .s-menu ul {
    margin: 1.5em 0 1.5em .5em; 
	}
footer .s-menu li {
    margin-right: 5px;
	display:inline;
		}
footer .s-menu li a {
      padding-right: 4px;
      border-right: 1px solid white; 
}
footer .s-menu ul li a {
	padding-top: .5em;
	}

footer .s-menu li:last-child a {
      border-right: medium none;
      padding-right: 2em; }

@media all and (max-width: 767px) {
  footer .s-menu {
    overflow: hidden;
    display: table;
    margin: 0 auto; }
  footer .copyright {
    text-align: left; } 
}
       /* ---- about page 480px   -----  */
.bkgPink {
	position: absolute;
	top: 160px;
	min-height: 35%;
	min-width: 100%;
	background: #d9098b;
    background: rgba(217, 9, 139, .62); /*#d9098b*/
	padding: 2% 0;
	z-index: -10;
}
.bkgPink h2 {
	margin: 1% 0;
	}
.geeks {
	margin: 0 auto;
	width: 100%;
	float: left;
}
.webgeek, .mediageek, .musicgeek {
	margin: 1% 2%; /*top right bottom left*/
	}
.webgeek img, .mediageek img, .musicgeek img {
	padding: 3px 0 0 0;
	margin: 2em auto;
	width: 340px; 
	height: 340px; 
	float: left;
	-webkit-border-radius: 50%; 
	-moz-border-radius: 50%; 
	border-radius: 50%;
	}
.webgeek, .mediageek, .musicgeek {
	width: 100%;
	float: left;
	}
.whyus {
	position: relative;
	top: 69.3em;
	margin: 90% 0 0 0;
	max-width: 100%;
	min-height: 10em;
	color: #dbaa70;
	font-size: 1.2em;
	letter-spacing: 1px;
	background: #00a4b8;
	background: rgba(0, 164, 184, .62);
	border: 0;
	padding: 2% 4%;
	float: left;
	}
.whyus h3 {
	font-weight: 100;
	padding: 0 0 .7em 0;
	}
.web1, .graphics1, .media1 {
	padding: 16px 20px 0 20px; /*top right bottom left*/
	box-sizing: border-box;
	text-align: center;
	margin: 1em 2em;
	}
.web1 {
	width: 18em; 
	height: 18em; 
	float: left;
}
.graphics1 {
	width: 18em; 
	height: 18em; 
	float: left;
}
.media1 {
	width: 18em; 
	height: 18em; 
	float: left;
}
.portfolio {
	position: relative;
	top: 0;
	margin: 64.1em 0 0 0;
	width: 100%;
	min-height: 100em;
}
.portfolio h2 {
	text-align: center;
	font-size: 2em;
	color: #DBAE3E;
	padding: .5em 0 0 0;
}
.portfolio p {
	margin: 0 0 0 .5em;
	}
.box-wrapper {
	margin: 0;
}
.box {
	width: 100%;
	margin: .3em;
	float: left;
	clear: right;
}
.box img {
	max-width: 100%;
}
.samples {
	position: relative;
	top: 0;
	margin: 0 0 0 0;
	padding: 0;
	width: 100%;
	min-height: 102em;
	background: #d9098b;
    background: rgba(217, 9, 139, .62); /*#d9098b*/
}
.samples a {
	padding-left: 2%;
}
.samples h2 {
	text-align: center;
	font-size: 2.5em;
	padding: .5em 0 0 0;
	}
}

/* ====== x-tra small screens 360px min-width 22.5em ====== */
@media screen and (min-width: 22.5em) and (max-width: 29em) {
.bkgPink {
	position: absolute;
	top: 7.85em;
	min-height: 35%;
	min-width: 100%;
	padding: 2% 0;
	z-index: -10;
}
.whyus {
	position: relative;
	top: 0;
	margin: 112.4em 0 0 0;
	max-width: 100%;
	min-height: 10em;
	font-size: 1.2em;
	letter-spacing: 1px;
	padding: 2% 4%;
	float: left;
	}
.web1, .graphics1, .media1 {
	padding: 16px 20px 0 20px; /*top right bottom left*/
	box-sizing: border-box;
	text-align: center;
	margin: 1em 2em;
	}
.web1 {
	width: 18em; 
	height: 18em; 
	float: left;
}
.graphics1 {
	width: 18em; 
	height: 18em; 
	float: left;
}
.media1 {
	width: 18em; 
	height: 18em; 
	float: left;
}
.portfolio {
	position: relative;
	top: 0;
	margin: 64.1em 0 0 0;
	width: 100%;
	min-height: 100em;
}
.portfolio h2 {
	text-align: center;
	font-size: 2em;
	color: #DBAE3E;
	padding: .5em 0 0 0;
}
.portfolio p {
	margin: 0 0 0 .5em;
	}
.box-wrapper {
	margin: 0;
}
.box {
	width: 100%;
	margin: .3em;
	float: left;
	clear: right;
}
.box img {
	max-width: 100%;
}
.samples {
	position: relative;
	top: 0;
	margin: 0 0 0 0;
	padding: 0;
	width: 100%;
	min-height: 102em;
	background: #d9098b;
    background: rgba(217, 9, 139, .62); /*#d9098b*/
}
.samples a {
	padding-left: 2%;
}
.samples h2 {
	text-align: center;
	font-size: 2.5em;
	padding: .5em 0 0 0;
	}
}

/* ====== x-tra small screens  280px-320px min-width 15em max-width 20em ====== */
@media screen and (min-width: 15em) and (max-width: 20em) {

header {
	max-width: 100%;
	height : 8.75em;
	margin: 0;
	z-index:200;
}
header img {
	max-width: 35%;
	padding: .7em 1em 0 1em;
	z-index: 400;
	}
/* main nav styles w/bkg img and text */
nav {
	display: block;
	width: 50%;
	height: 125px;
	padding: .5em .5em 0 0;
	font-size: .9em;
	font-weight: 400;
	/*line-height: 86.667px;*/
}
nav ul {
	float: left;
    list-style:none; /*gets rid of dots*/
    height:3.125em;
}
nav ul li {
	width: 2.9em;
	height: 2.9em;
	border-radius: 50%;
	background-color: #c30083;
	margin: .3em 0 0 .5em;
	padding: 2em 0 0 0;
	background-position:center;
	background-repeat:no-repeat;
	}
ul li a {
	padding-top: 1em;
	}
nav a, nav a:visited {
	color: #00A4B8;/*#C09 or #c30083; #e61ff6*/
}
nav ul li a:hover, nav ul li a:active {
	color: #fff;/*#FC9*/
	padding-top: 1em;
	text-decoration: none;
}			/* end main nav small screen */
.video_wrapper {
	background: url(assets/img/designcity-gif.gif);
	background-size: 100%;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	width: 100%;
	height: 14.5em;
}
.btn_cta1 {
  float:left;
  margin-top: .7em;
  padding-right: 1px;
  font-size : 1.1em;/*50px*/
  font-weight: 200;
  line-height: 1.1em;
}
.herocircle {
  width : 70%/*659px*/;
  height : 92%;
  line-height: 1.8em;
  margin: 0 0 0 15%;
  padding: 1.1em;
  box-sizing: border-box;
  text-align: center;
}
.anim1 {
	background-color: #B10253;
	background: url(assets/img/darkcitybkg.jpg);
	background-size: 100%;
	background-repeat: no-repeat;
	width: 100%;
	height:9.375em;
	float: left;
}
.anim1_cta {
	font-size: 2em;/*85px*/
	text-shadow: 5px 5px 3px rgba(0, 0, 0, 0.85);
	padding: -7em 0 0 0;
	z-index: 800;
}
.welcome {
	width: 100%;
	height:37.25em;
	float: left;
	background-color: #E81DB4;
	clear: right;
}
.twitter-feed {
	display: none;
}
.twitter-overlay {
	display: none;
}
.anim2 {
	padding: .5em 0 0 0;
}

footer a, a:hover {
	display:inline;
	}
footer a:hover {
	color: #E8B9DC;
	background-color: #00A4B8;
    }

	/* ---- about page 320px -----  */
.bkgPink {
	position: absolute;
	top: 8.75em;
	min-height: 35%;
	min-width: 100%;
	background: #d9098b;
    background: rgba(217, 9, 139, .62); /*#d9098b*/
	padding: 2% 0;
	z-index: -10;
}
.webgeek, .mediageek, .musicgeek {
	margin: 1% 1em; /*top right bottom left*/
	}
.webgeek img, .mediageek img, .musicgeek img {
	width: 18em; 
	height: 18em; 
	float: left;
	-webkit-border-radius: 50%; 
	-moz-border-radius: 50%; 
	border-radius: 50%;
	}
.webgeek, .mediageek, .musicgeek {
	width: 100%;
	float: left;
	}
.whyus {
	position: relative;
	top: 0;
	margin: 109.8em 0 0 0;
	max-width: 100%;
	min-height: 10em;
	font-size: 1.2em;
	letter-spacing: 1px;
	padding: 2% 4%;
	float: left;
	}
.whyus h3 {
	font-family: Hero;
	font-size: 1.4em;
	font-weight: 100;
	padding: 0 0 .7em 0;
	text-shadow : none;
	}
		/* control for contact page for 320px */
.circle1, .circle2, .circle3 {
	margin: 2% 1em;
	padding: 1em 1.25em .5em 1.25em;
	box-sizing: border-box;
	text-align: center;
	}
.circle1, .circle2, .circle3 {
	width: 18em; 
	height: 18em;
}
.intro  {
	position: absolute;
	top: 0;
	margin: 69.1em 0 0 0;
}
.form {
    margin: 92em 0 2% 5%;
	}
	/* ----------portfolio 320px -------------- */
.web1, .graphics1, .media1 {
	padding: 16px 20px 0 20px;
	box-sizing: border-box;
	text-align: center;
	}
.web1 {
	margin: 1% 2% 2.5% 6%; /*top right bottom left*/
	width: 18em; 
	height: 18em; 
	float: left;
}
.graphics1 {
	margin: 1% 2% 2% 3%; /*top right bottom left*/
	width: 18em; 
	height: 18em; 
	float: left;
}
.media1 {
	margin: 1% 0 2% 3%; /*top right bottom left*/
	width: 18em; 
	height: 18em; 
	float: left;
}
.portfolio {
	position: relative;
	top: 0;
	margin: 60.1em 0 0 0;
	width: 100%;
	min-height: 90em;
}
.portfolio h2 {
	text-align: center;
	font-size: 2em;
	color: #DBAE3E;
	padding: .5em 0 0 0;
}
.portfolio p {
	margin: 0 0 0 .5em;
	}
.box-wrapper {
	margin: 0;
}
.box {
	width: 100%;
	margin: .3em;
	float: left;
	clear: right;
}
.box img {
	max-width: 100%;
}
.samples {
	position: relative;
	top: 0;
	margin: 0 0 0 0;
	padding: 0;
	width: 100%;
	min-height: 92em;
	background: #d9098b;
    background: rgba(217, 9, 139, .62); /*#d9098b*/
}
.samples a {
	padding-left: 2%;
}
.samples h2 {
	text-align: center;
	font-size: 2.5em;
	padding: .5em 0 0 0;
	}
}