@charset "utf-8";
/* CSS Document for responsive DKemp Designs site for missing pages and subscription*/
    /* 
    Theme Name: DKemp Designs 
    Theme URI: http://www.dkempdesigns.com/ 
    Description: The main site for DKemp Designs graphics,
	   web design, animation, social media and blogging. 
    Author: Dorthea Kemp 
    Author URI: http://www.dkempdesigns.com 
    Version: 1.0 
    General comments/License Statement copyright 2014 DKemp Designs, all rights reserved. 
	All logos, taglines and graphics tradmark/copyright DKemp Designs, all rights reserved.
	google font collection http://www.google.com/webfonts#ChoosePlace:select/Collection:Forum|Dancing+Script:700,400|Jura|Paprika|Playfair+Display+SC|Cinzel|Cinzel+Decorative|Sofadi+One|Lemon|Spicy+Rice|Fredoka+One|Quando|Alice|Chewy|Overlock+SC|Titan+One|IM+Fell+DW+Pica+SC    */  
/*body style with reset*/
/*body background slideshow w/responsive images, mobile ready site*/

/*resets*/
header, section, footer, aside, nav, hgroup, menu,  article, figure, details, figcaption, footer
{ 
display: block; 
}
body {
	margin:0px;
	padding:0px;
	width: 100%;
	/* FORMAT  for multiple backgrounds 	    */
	background: url("http://www.dkempdesigns.com/assets/images/globeLG.png") , url("http://www.dkempdesigns.com/assets/images/DKempRedesign.jpg") #000000;
	background-repeat: no-repeat;
	background-position: right bottom,left top;
	font: #dbaa70;
	color: #dbaa70;
	font-family: Verdana, Geneva, sans-serif;
	font-family: 'Dancing Script', cursive;
	font-family: 'Open Sans', sans-serif;/*google font*/
	line-height: 120%;
}
	img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
	border: 0;
	align: left;
}
.headerWrap {
	max-width: 80%;
	min-height: 25%;
	overflow: auto;
	margin-top: 0%;
	margin-right: 5%;
	margin-left: 10%;
}
h1, h2, h3, h4, h5, h6{
	font-weight:normal;
	margin:0;
	padding:0; } 
	h1 {
	font-family: 'Dancing Script', cursive;
	font-weight:bold;
	font-size: 5.6em; /*90px;*/
	line-height: 120%;
	color: #f0be2a;
	text-shadow: 0px 3px 3px #FC0;
}
	h2{font-family: Verdana, Geneva, sans-serif 
		font-size:1.3em;
		color: #dbaa70;}
	h3{font-family:Georgia, "Times New Roman", Times, serif; 
		font-size:1.4em; /*20px;*/
	color: #dbaa70;}
	h3 a {
	color:#FC9;
	text-decoration:none;}
	h4 {color: #dbaa70;}
	title {color: #dbaa70;}
/* links */
a,
a:visited,
a:active {
	color:#C09;
	text-decoration:none;}
a:hover{color:#FC9;
	text-decoration:none;}
	ul li {
	display: inline;
	list-style-position: inside;
	list-style-type: none;
	padding-right: 5%;
	}
	ul li a:hover a:visited{
		color:#FC9;
		text-decoration:none;
}
/*slideshow*/
#display {
	max-width: 100%;
	min-height: 20%;
	overflow: auto;
	margin-top: 2%;
	margin-right: 10%;
	margin-left: 10%;
	padding: 1%;
	color: #dbaa70;
	-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; 
	background-color: rgba(38,10,31,0.4); border: solid 2px rgba(255,255,255,.10);
	font-family: Verdana, Geneva, sans-serif; font-size: 1.0em; color: #dbaa70;
}
.display_column {
	float:left;  
    width: 35%;  
	margin-top: 15%;
	margin-left: 5%;
    margin-right:2%;
	font-size: 1em;
 }
/*style for responsive slides*/
/* for tablet, phone */
@media screen and (max-width: 600px) {
	  h1 {
    font: 24px/50px "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
  .callbacks_nav {
    top: 47%;
    }
  }
/*responsive slide end*/
/*container*/
 #container {
	max-width: 80%;
	margin-top: 2%;
	margin-right: 10%;
	margin-left: 10%;
	padding: 2%;
	color: #D4A2C0; /*old #F5BCDE; #B58BA4; #745969;*/
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background-color: rgba(38,10,31,0.6);
	border: solid 2px rgba(255,255,255,.10);
	font-family: Verdana, Geneva, sans-serif;
	font-size: .9em;
	color: #D4A2C0;
 }
 #container ul li {
	display: inline;
	list-style-position: inside;
	list-style-type: none;
	padding-right: 3%;
	}
 .container_column {
	float:left;  
    width: 25%;  
    margin-right:2%;
	font-size: .8em;
 }
 .container_column ul li {
	 display: inline;
	list-style-type:none;}
 #container .social {
	width: 27%;
	list-style-type: none;
	 }
 #container .social ul li {
	display: inline;
	list-style-position: inside;
	list-style-type: none;
	padding-right: 5%;
	}
/*nav buttons shall turn to character animations upon hover*/
.headerWrap nav {
		max-width: 85%;
		margin: 4% 0 0 20%;/*top right bottom left*/
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		background-color: rgba(38,10,31,0.55);
		border: solid 2px rgba(255,255,255,.10);
		font-family:Arial, Helvetica, sans-serif;  
		font-family: 'Open Sans', sans-serif;
		font-size: 1.5em; /*24px;*/
		line-height: 1.3em;
		color:#bd92b2;
	}
	.headerWrap nav #menu li {
		color:#bd92b2;
	}
	ul#menu li {
	display: inline;
	list-style-position: inside;
	list-style-type: none;
	padding-right: 5%;
	}
	ul#menu li a:hover a:visited{
		color:#FC9;
		text-decoration:none;
}
/*banner area is for text description of services*/
banner {
	max-width: 60%;}
	/*resizing of images & video*/
video {
	max-width: 100%;
	height: auto;}
	.video embed,
.video object,
.video iframe {
	width: 100%;
	height: auto;
}
/*HTML5 video player*/
videoplayer {
}
#movie {}
.video1 {
}
.video2 {
	padding: 3px;
	text-align: center;
}
#footer {
	position: bottom;
	min-height: 20%;
	overflow: auto;
	margin-top: 2%;
	margin-right: 10%;
	margin-left: 10%;
    padding-top: 2%;  
    line-height:1.3em;
	font-size: .75em; /*12px;*/
	color: #B58BA4; /*#674f5d;*/
	max-width: 80%;
	-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; 
	background-color: rgba(38,10,31,0.55);/*#450027;*/ border: solid 2px rgba(255,255,255,.10);
	font-family:Arial, Helvetica, sans-serif;
	}
	.container {
	max-width: 100%;  
    margin:0 auto;  
    border:0;
	position: relative;
	}
    #footer img {  
        float:left;  
        margin-right:1%;  
    }  
	#footer a {  
        color:#C09;  
        text-decoration:none;  
    }  
    #footer a:hover { color:#ffffff; }
    .footer_column {  
    float:left;  
    width: 50%;  
    margin-right:2%;
}  
#footer .text { 
    width: 30%;  
}  
#footer h3 {  
    color:#dbaa70;  
    text-transform:uppercase;  
    font-size: .85em;  
}  
.footer_column ul li, .footer_column ul {  
    list-style:none;  
    margin:0px;  
    padding:0px;  
}  
/*for responsive sizing*/
@media screen and (min-width: 150px) and (max-width: 600px) {
	  body {
	background: url("assets/images/mascot-homeW-SM.png") ,url("assets/images/DKempRedesignSM.jpg") #000000;
	background-repeat: no-repeat;
	background-position: right bottom,left top;
	line-height: 125%;
}
p {
	font-size:.8em;}
	h1 {
	font-family: 'Dancing Script', cursive;
	font-weight:bold;
	font-size: 5.6em; /*90px;*/
	line-height: 125%;
	text-shadow: 0px 3px 3px #FC0;
}
	h2{	font-size:1.2em;}
	h3{	font-size: 1.3em; /*20px;*/}
	.headerWrap img {
		max-width: 40%;
		}
	.headerWrap {
		max-width: 90%;
		min-height: 25%;
		overflow: auto;
		margin-top: 0%;
		margin-right: 5%;
		margin-left: 5%;
	}
	.headerWrap nav {
		max-width: 55%;
		margin: 2% 0 0 40%;/*top right bottom left*/
		font-size: 1.0em; /*16px;*/
		line-height: 1.5em;
		}
	ul#menu li {
		display: block;
		padding: 1% 1%;
	}
	#display {
		margin-right: 5%;
		margin-left: 5%;
	}
	.display_column {
	float:left;  
    width: 90%;  
	margin-top: 5%;
	margin-left: 5%;
    margin-right:2%;
	 }
	.container_column {
		display: none;}
	#container .social {
		display: none; 
		}
	.footer_column img {
		max-width: 65%;
		height: auto;
		}
	.footer_column {  
		width: 100%;  
		}
	#footer .text { 
		display: none;  
}  
	}