/* CSS for phones 

body {
   background-image:url(../images/bg-3.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
*/

body {
    background-color:#FDFAEB;
}

.home body {
background-image:url(../images/bg-3.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


.row:before, .row:after {display: none !important;}

.navbar {
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	font-size: 1.25em;
	font-weight: bold;
    background-color: #FFA73D !important;
	/*background-color:  #F6D93A !important;*/
}

.display-1 {
    font-family:"abril-fatface";
    text-shadow: 2px 2px #000000;
    font-size: 4.50rem;
    line-height: 1.75;
    color: #39F64C;
    font-style: normal;
}

.display-2 {
  font-family:"abril-fatface";
  color:#39F64C;
  font-size: 3.75rem;
  line-height: 1.00;
  font-style: italic;
  text-shadow: 2px 2px #000000;		
}

.display-4 {
align-content: center;
text-align: center;
font-family:"abril-fatface";
font-style: normal;
color: #ffffff;
text-shadow: 2px 2px #000000;
font-size: 2.75rem;
line-height: 2.00;
font-weight: bolder;
margin-bottom: 40px;
}

.bodygallery {
  background-image:url(../images/bg-3-opacity-66.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.photo {
    align-content: center;
    text-align: center;
    background-color: none;
    margin: auto;
	width: auto;
}

.commentstitle {
	margin-top: -20px;
}

.commentstitle h4 {
align-content: center;
text-align: center;
font-family:"abril-fatface";
font-style: normal;
color: #ffffff;
text-shadow: 2px 2px #000000;
font-size: 2.25em;
font-weight: bolder;
margin-bottom: 40px;
}

.comments {
text-align: left;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
font-size: 1.00em;
color: rgba(246,217,58,1.00);
text-shadow: 2px 2px #000000;
}

.comments h4 {
	align-content: center;
	color: #ffffff;
	text-shadow: 2px 2px #000000;
	font-size: 1.25em;
	font-weight: lighter;
	font-family: Braggadocio;
}

.comments p {
	text-align: left;
	color: #FFFFFF;
	font-size: 2.00rem;
	font-weight:300;
	text-shadow: 2px 2px #000000;
	margin-left: 6px;
	margin-right: 6px;
	font-family:"alegreya";
	font-style:normal;
}

.comments li {
	text-align: left;
	color: #ffffff;
	font-size: 2.00rem;
	font-weight: 100;
	margin-left: 6px;
	text-shadow: 2px 2px #000000;
	font-family:"alegreya";
	font-style: normal;
}

.bgindex {
background-color: #958C53;
}

.glyphicon-chevron-left:before {
  content: "\e079";
	font-size:1.25em;
	color:#BDB5B3;
	text-align:center;
	text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
    font-family: 'Glyphicons Halflings';
  font-style:normal;
  font-weight:bold;
  line-height: 1; 
}

.glyphicon-chevron-right:before {
  content: "\e080";
	font-size:1.25em;
	color:#FFFFFF;
	text-align:center;
	text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
    font-family: 'Glyphicons Halflings';
  font-style:normal;
  font-weight:bold;
  line-height: 1; 
}

.caption-box{
	width: 300px;
    height: 80px;
    padding: 4px;
	margin: auto;
    background-color: #D6D6D6;
}

.carousel {
  /* any dimensions are fine, it can be responsive with max-width */
  max-width: 900px;
  height: 640px;
}

.carousel-inner {
  /* make sure your .items will get correct height */
  height: 100%;
}

.carousel-control, .carousel-control.left, .carousel-control.right  {
background-color:none;
background-image:none;
color: #FFFFFF;

}
/* This puts the caption below the image
.carousel-caption {
    position: relative;
    left: auto;
    right: auto;
}

/* This puts the caption at top of the image
.carousel-caption {
    top: 0;
    bottom: auto;
}
*/
/* This puts the caption at the top of the image */
.carousel-caption {
   position: absolute;
   top:-20px;
}

.carousel-caption p{
	font-size:1.25em;
	color:#FFFFFF;
	text-align:center;
	text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}


/*
.carousel-caption :nth-child(2) {
  data-interval: 20s;
}
*/


.item {
  background-size: cover;
  background-position: 50% 50%;
  width: 100%;
  height: 100%;
}

.item img {
  visibility: visible;
  max-width:100%;
max-height:100%;
height: auto;
width:auto;
}



.bodygallery {
	background-color: antiquewhite;
}

.center-block {
	float:none;
}

.hero-unit {
    background-image:url(../images/bg-3.jpg);
    background-size:cover;
    background-color: #EEEEEE;
    height:300px; 
  }
 
 .img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  /*width: 100%;
  height: 100%;
*/  margin: auto;
} 
 
.hero-unit h1 {
    color: #FFFFFF;
    font-size: 60px;
}


h1 {
    font-family:"abril-fatface";
    text-shadow: 2px 2px #000000;
    font-weight: 400;
    font-size: 2.50em;
    line-height: 1.4;
    color: #F6D93A;
    padding-top: 5px;
    font-style: normal;
}

.gallery h2{
    font-family:"abril-fatface";
    text-shadow: 1px 1px #000000;
	font-style: normal;
    font-weight: bold;
    font-size: 3.00em;
    text-align: center;
    color:darkorange;
    padding-left: 0px;
}
/*  
h2 {
font-family:"abril-fatface";
  color:#000000;
  text-align:left;
  padding-left: 100px;
  padding-bottom:1px;
  padding-top:1px;
  font-size:2.75em;
  font-style: italic;
  text-shadow: 2px 2px #000000;
}
*/
h2 {
font-family:"abril-fatface";
  color:darkorange;
  text-align:left;
  padding-left: 100px;
  padding-bottom:1px;
  padding-top:1px;
  font-size:2.25em;
  font-style: italic;
  text-shadow: .5px .5px #000000;
}

h2 a {
	color: rgba(246,217,58,1.00);
	text-decoration: underline;
}	

h2
a:hover,
a:focus {
	color: #FAEFAD;
	text-decoration: underline;
}

h3 {
	font-size:2.00em;
	color:#FFFFFF;
	text-align:center;
	text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

.about {
    font-size: 1.10em;
    text-align: justify;
    padding-left: 5px;
    padding-top: 15px;
    background-color: #FFDBB3;
    color: rgba(51,51,51,1.00);
}

.listleft {
	text-align:left;
}

.listcentered {
	text-align:center;
	font-size:1.50em;
	color:rgba(246,223,91,1.00);
	padding-bottom:60px;
}

.listbooks {
	text-align:justify;
	list-style:none;
	font-weight:bold;
}

footer {
	color:#FFFFFF;
}

.wellfooter {
    font-family:cuprum;
    min-height: 5px;
    padding-top: 3px;
    padding-right: 3px;
    padding-left: 3px;
    padding-bottom: 3px;
    margin-bottom: 1px;
    color: darkorange;
    /*color: rgba(246,223,91,1.00);*/
	font-size: 1.50rem;
	font-weight:bolder;
    background: none;
	text-align: center;
}

.well-old {
	min-height: 5px;
	padding: 10px;
	margin-bottom: 1px;
	border: 1px solid #e3e3e3;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
	color: rgba(246,223,91,1.00);
	background-color: rgba(68,60,115,1.00);
}

.well a {
	color: rgba(246,223,91,1.00);
}

.dropdown-menu .divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #000000;
}

.jumbotron {
  padding-top: 2px;
  padding-bottom: 1px;
  margin-bottom: 1px;
  background-color:transparent;  
}

.jumbotron h1,
.jumbotron .h1 {

}

.footer {
	display: table-row;
	height: 5px;
	margin-bottom: 20px;
	text-align: center;
	font-weight: normal;
	color: rgba(232,216,188,1.00);
}

.imagecontainer{
    display: flex;
    justify-content: center;
    align-items: center;
}

/* END OF UNIVERSAL SETTINGS */

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {

	h1 {
    font-family:"fascinate-inline";
    text-shadow: 2px 2px #000000;
    font-weight: 400;
    font-size: 1.50em;
    line-height: 1.4;
    color: #F6D93A;
    padding-top: 5px;
    font-style: normal;
}

h2 {
font-family:"abril-fatface";
  color:#000000;
  text-align:left;
  padding-left: 100px;
  padding-bottom:1px;
  padding-top:1px;
  font-size:1.75em;
  text-shadow: 2px 2px #000000;
}
	  
}


/*@media (min-width: 320px) and (max-width: 649px) 

@media only screen and (min-width: 768px) {

}

@media (max-width: 649px) {
 	
}


@media screen and (min-width:650px) and (max-width:959px){
	
}

@media screen and (min-width:1200px){

}
*/