/*
Theme Name: Daniel Wiener using Bootstrap
Theme URI: http://danielwiener.com
Author: Daniel and Bootstrap
Author URI: https://wordpress.org/
Description: Trying to make artist site using bootstrap from scratch.
Version: 1.0
License: don't know
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: 
Text Domain: dw_bootstrap

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/


@font-face {
	font-family: 'HaringRegular';
	src: url('fonts/haring-webfont.eot');
	src: local('☺'), url('fonts/haring-webfont.woff') format('woff'), url('fonts/haring-webfont.ttf') format('truetype'), url('fonts/haring-webfont.svg#webfontrTig3GoJ') format('svg');
	font-weight: normal;
	font-style: normal;
	}


 /**
 * 14.0 Media
 */

.site .avatar {
	border-radius: 50%;
}

.page-content img.wp-smiley,
.entry-content img.wp-smiley,
.comment-content img.wp-smiley {
	border: none;
	margin-top: 0;
	margin-bottom: 0;
	padding: 0;
}

audio,
canvas {
	display: inline-block;
}

embed,
iframe,
object,
video {
	margin-bottom: 1.6em;
	max-width: 100%;
	vertical-align: middle;
}

p > embed,
p > iframe,
p > object,
p > video {
	margin-bottom: 0;
}

.wp-audio-shortcode,
.wp-video,
.wp-playlist.wp-audio-playlist {
	font-size: 15px;
	font-size: 1.5rem;
	margin-top: 0;
	margin-bottom: 1.6em;
}

.wp-playlist.wp-playlist {
	padding-bottom: 0;
}

.wp-playlist .wp-playlist-tracks {
	margin-top: 0;
}

.wp-playlist-item .wp-playlist-caption {
	border-bottom: 0;
	padding: 10px 0;
}

.wp-playlist-item .wp-playlist-item-length {
	top: 10px;
}


/**
 * 14.1 Captions
 */

.wp-caption {
	margin-bottom: 1em;
	max-width: 100%;
	margin-right: 1.6em;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin: 0;
}

.wp-caption-text {
	color: #707070;
	color: rgba(51, 51, 51, 0.7);
	font-family: "freight-sans-pro","Helvetica Neue", Helvetica, Arial, sans-serif;
	/* font-size: 12px; */
	font-size: 0.8rem;
	line-height: 1.5;
	padding: 0.5em 0;
}

.alignleft {
	float: left;
}

img.alignleft {
	margin-right: 1.6em;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

 .page-id-8 .wp-caption-text { /* for bio page */
	color: #fff;
	
	}

/**
 * 14.2 Galleries
 */

.gallery {
	margin-bottom: 1.6em;
}

.gallery-item {
	display: inline-block;
	padding: 1.79104477%;
	text-align: center;
	vertical-align: top;
	width: 100%;
}

.gallery-columns-2 .gallery-item {
	max-width: 50%;
}

.gallery-columns-3 .gallery-item {
	max-width: 33.33%;
}

.gallery-columns-4 .gallery-item {
	max-width: 25%;
}

.gallery-columns-5 .gallery-item {
	max-width: 20%;
}

.gallery-columns-6 .gallery-item {
	max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
	max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
	max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
	max-width: 11.11%;
}

.gallery-icon img {
	margin: 0 auto;
}

.gallery-caption {
	color: #707070;
	color: rgba(51, 51, 51, 0.7);
	display: block;
	font-family: "freight-sans-pro","Helvetica Neue", Helvetica, Arial, sans-serif;
	/* font-size: 12px; */
	font-size: 1rem;
	line-height: 1.5;
	padding: 0.5em 0;
}

.gallery-columns-6 .gallery-caption,
.gallery-columns-7 .gallery-caption,
.gallery-columns-8 .gallery-caption,
.gallery-columns-9 .gallery-caption {
	display: none;
}

/*Daniel Added*/
.content-area {
	padding-top: 60px; /*added for content to be below the menu*/
}

.home img {
	/* padding-top: 10px; */
}

.redbox {
	border: 1px solid red;
}

.greenbox {
	border: 1px solid green;
}

.dw_image_nav a:link, .dw_image_nav a:visited {
	color: #000;
}

.dw_image_nav a:hover, .dw_image_nav a:active {
	color: #999 !important;
	text-decoration: underline;
}

.site-main .thumbnail {
	border: none;
}

body {
	margin-top: 5rem; /* this gives room for the height of the navbar with logo might need to change if I change sizes of image for different devices */
	}
body nav .navbar, .navbar-expand-lg, .navbar-light {
	background-color: rgb(255, 153, 0)  !important;
	/* font-family: "freight-sans-pro","Helvetica Neue", Helvetica, Arial, sans-serif; */
	font-family: HaringRegular;
	font-size: 2.3em; /* this makes the text big in the menu. will have to change for different devices or a different font. #todo */
	font-weight: 300;
	border-bottom: 5px solid red;
	}
	
	.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
            background-image:none !important;
 }
 .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
            background-color:#fcdfc2;
 }

.container {
	/* border: 1px solid green; */
	/* align-items:baseline; */
	}
	
	.container, .container-sm, .container-md, .container-lg, .container-xl {
	max-width: 920px; /* this works it tells all the devices how to size text and images #todo */
	}
	
	.navbar .container, .navbar .container-fluid, .navbar .container-sm, .navbar .container-md, .navbar .container-lg, .navbar .container-xl {
	align-items:baseline; /* this does not works I want to move the button down... maybe #todo */
	}
	
.navbar-collapse {
	justify-content: flex-end;
	}
/* WORK ON THIS. GOOD GOOD GOOD  https://stackoverflow.com/questions/40178386/bootstrap-4-navbar-items-on-right-side */
 /* 
.navbar-nav {
      flex-direction: row;
    }
    
    .nav-link {
      padding-right: .5rem !important;
      padding-left: .5rem !important;
    }
 */
    
    /* Fixes dropdown menus placed on the right side */
    /* 
.ml-auto .dropdown-menu {
      left: auto !important;
      right: 0px;
    }
 */
/* END WORK ON THIS */
/* https://bootstrapstudio.io/forums/topic/cant-delete-caret-in-dropdown/ */
.dropdown-toggle::after{
	display:none
	} 


.navbar-brand {
	font-size: 1.5em !important;
	/*background: #FF9900 url(images/haringkids_logo.gif) no-repeat top left;*/
	align-items: baseline; /* this does not works I want to move the button down... maybe #todo */
	padding-top: 0; /* make sure the navbar is not too big, too much orange. */
 	padding-bottom: 0;
 	/* border: 1px solid red; */
}

.navbar-header {
	/* border: 1px solid blue; */
	}
	.dropdown-menu {
		background-color: #f9bf86;
		min-width: 5rem; /* not sure if this is working */
		border: none;
		border-radius: 0rem;
		margin-top: -10px;
		}
		
 	.nav-link {
		padding: 0rem 0 0 0;
	}
@media only screen and (min-width:992px) {	
	.navbar-expand-lg .navbar-nav .nav-link {
		padding-right: 0.5rem;
		padding-left: 1rem;
		}
	}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
font-family: "freight-sans-pro","Helvetica Neue", Helvetica, Arial, sans-serif !important;
font-weight: bold;	
}

h1.page-title {
	font-size: 26px;
	color: #666;
	font-weight: 300;
}


.home {
		background: #000 url('images/front_page_lrg.jpg') no-repeat scroll 0px 125px;
		background-size: 100% auto;
	}
	
	
.home .container {
	color: #fff;
	width: 800px;
}

.home .site-main {
	padding: 32% 0 0 0;
}

.home p {
	font-size: 18px;
}

.page-id-8 {
	background-color: #3300CC;
	color: #fff;
}

.page-id-8 p {
		font-size: 18px;
	}
	
.page-id-8 blockquote {
		font-style: italic;
		border: none;
		background-color: #09009D;
	/*	border: 3px solid #09009D;*/

	}
.page-id-8 blockquote p{ 
	font-size: 22px;
}


.page-id-20 {
	background-color: #CC0000;
	color: #fff;
	font-family: Courier, "New Courier", monospace;
	}
	
.page-id-20 p {
		font-size: 18px;
	}

.page-id-243 {
	background-color: #639c63;
	}	
	
.page-id-326 {
	background-color: #06b0f2;
	}	

img {
	max-width: 100%;
	height: auto;
}

.kh_slate {
	background-color: #336699;
}

.kh_pink {
	background-color: #FF00CC;
}

.kh_orange {
	background-color: #FF9900;
}

.kh_yellow {
	background-color: #FFFF33;
}

.kh_blue {
	background-color: #3300CC;
}
.kh_plum {
	background-color:#CC0066;
}

.kh_purple {
	background-color:#990099;
}

.kh_bright_green {
	background-color:#33CC33
}

.kh_light_blue {
	background-color:#66CCFF;
}

.kh_pink_purple {
	background-color:#CC3399;
}
.kh_violet {
	background-color:#6666CC;
}

.kh_salmon  {
	background-color:#FFCCCC;
}

.kh_bright_orange {
	background-color: #FF9933;
}

.kh_green_slate {
	background-color:#669999;
}

.kh_tomato {
	background-color:#CC0000;
}



.kh_slate, .kh_pink, .kh_orange, .kh_yellow, .kh_blue, .kh_plum, .kh_purple, .kh_bright_green, .kh_light_blue , .kh_pink_purple, .kh_violet, .kh_salmon, .kh_bright_orange, .kh_green_slate, .kh_tomato {
	padding: 60px 0px 80px 0px;
	margin: 0 -25px 0 -25px;
}


/*#fancybox-left-ico {
	background-position: -60px -30px;
}
*/

/**
 * 7.0 device styles
 */


@media only screen and (max-width:1023px) and (min-width:416px) { /* This is tablet */
	.home {
			background: #000 url('images/front_page_tablet.jpg') no-repeat scroll 0px 125px;
			background-size: 100% auto;
		}
	.home #primary.container  {
		width: 550px;
		/* border: 3px solid red; */
		}
	
	.home p {
		font-size: 1.2rem;
	}
	
	.mobile {
		display: none;
	}
	
	body nav .navbar, .navbar-expand-lg, .navbar-light {
	font-size: 1.2rem;
	}
	
	.dropdown-menu {
		margin-top: -5px;
		max-width: 10rem; /* This is for the width of the dropdown list of submenu items. tablet. */
		
		.site-footer {
	display: block;
	background-color: #666;
	color: #fff;
	font-size: 0.8rem;
	padding: 10px 0 10px 0;
	border-top: 1px solid red;
	}
		}
	
} /*@media 800 end*/

@media only screen and (max-width:415px) { /* This is phone */
.home {
		background: #000 url('images/front_page_phone.jpg') no-repeat scroll 0px 125px;
		background-size: 100% auto;
	}


.home .container {
	width: 100%;
	}	
.home .site-main {
	width: 60%;
	margin-right: auto;
	margin-left: auto;
	padding: 23% 0 0 0;				
	}
.home p {
	font-size: 16px;
}
.tablet {
	display: none;
}
.gallery img {
	width: 100%;
	height: auto;
	}

.kh_slate, .kh_pink, .kh_orange, .kh_yellow, .kh_blue,.kh_plum, .kh_purple, .kh_bright_green, .kh_light_blue, .kh_pink_purple, .kh_violet, .kh_salmon, .kh_bright_orange, .kh_green_slate, .kh_tomato  {
		padding: 40px 0px 80px 0px;
		margin: 0 -10px 0 -10px;
	}

#navbarNavAltMarkup .navbar-collapse {
	font-size: 1.3rem;
	line-height: 1;
	}
	
	.dropdown-menu {
		margin-top: -5px;
		max-width: 10rem; /* This is for the width of the dropdown list of submenu items. phone */
		}
		img.alignleft { /* for bio page only */
		max-width: 150px;
	}
	
} /*@media 415 end*/


/* 
@media only screen and (max-width:1100px) and (min-width:801px){
	.home .container {
		width: 750px;
	}

	.mobile {
		display: none;
	}
	
	
	}
 */ /*@media 1100 end*/
	
@media only screen and (min-width:1200px) { /* this is for getting the footer to the bottom on large screens. stupid I know but hey... solve the problem */

.home .entry-content h2 {
 font-size: 3rem;
}

.home .entry-content p {
 font-size: 2.3rem;
}
}


/**
 * 8.0 Accessibility
 */

/* Text meant only for screen readers */
.says,
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
}

/* must have higher specificity than alternative color schemes inline styles */
.site .skip-link {
	background-color: #f1f1f1;
	box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
	color: #21759b;
	display: block;
	font: bold 14px/normal "Noto Sans", sans-serif;
	left: -9999em;
	outline: none;
	padding: 15px 23px 14px;
	text-decoration: none;
	text-transform: none;
	top: -9999em;
}

.logged-in .site .skip-link {
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	font: bold 14px/normal "Open Sans", sans-serif;
}

.site .skip-link:focus {
	clip: auto;
	height: auto;
	left: 6px;
	top: 7px;
	width: auto;
	z-index: 100000;
}

/**
 * Footer
 */

.site-footer {
	display: block;
	background-color: #666;
	color: #fff;
	font-size: 0.8rem;
	padding: 10px 0 10px 0;
	border-top: 1px solid red;
	}