/* Little Cottage Daycare Page Stylesheet */

/* Start GLOBAL RULES */

html{
    background-image: url(../images/hands.jpg);
    background-size: cover;
}
div.wrapper{
    background-color:#DC143C;
    width:80%;
    margin:auto; /* if this is smaller than its parent HTML, then center it within the parent */
    overflow:auto; /* Be aware of any floated objects and expand to include them */
}

.cottage {
    color:white;
    margin-top: 5%;
    text-shadow: 1px 1px #ccc;
    font-size:1.25em; 

  
}

.logo {
    margin: 0 auto;
    margin-top: 5%;
    max-width: 850px;
    width: 80%;
    display: block;
}


section {
    background-color: white;
    margin: 2%;
}
        
aside {
    color: crimson;
    background-color: white;
    margin: 2%;
}

.inside{
    margin: 0 auto;
    max-width: 450px;
    width: 100%;
    display: block;
    height: 30%;
}
.outside{
    margin: 0 auto;
    max-width: 450px;
    width: 100%;
    display: block;
}
.playdoh{
    margin: 0 auto;
    max-width: 450px;
    width: 100%;
    display: block;
}
.cooking{
    margin: 0 auto;
    max-width: 450px;
    width: 100%;
    display: block;
}
.breakfast{
    margin: 0 auto;
    max-width: 450px;
    width: 100%;
    display: block;
}

.fireman{
    margin: 0 auto;
    max-width: 450px;
    width: 100%;
    display: block;
}
p {
    color:purple;
    font-size: large;
    margin-left:1em; 
    margin-right:1em;
    margin-bottom: 1em;
}
p1{
    color:black;
    font-size: small;
    margin:1em; 
}  
i {
    color:brown;
    margin-left:1em; 
    margin-right:1em;
}

h1, h2, h3 {
    margin-left:1.5em;
    margin-right:1em;
    font-size: 1.7em;
    text-shadow: 0 0 2px #0000cc; 
}

h4 {
    margin-left:1em;
    font-size: 1.4em;
    font-family: cursive; 
    color: purple;
    text-shadow: 0 0 2px #0000cc; 
}
.pageID {
    color:crimson;
}
a {
    color:black;
    text-decoration: none;
    font-weight: bold;
}
h1>a {
    color:purple;
   /* border-color: #0000cc;*/
}

a:hover {
    color:plum;
    text-decoration:overline;
}

.selected {
    color: white;
   background-color: grey;
}
h1>a:hover {
    text-decoration: none;
}
.fa-facebook {
    background: #0066ff;
    color: white;
    margin-left: 2em;
    padding: 20px;
    font-size:3em;
    width: 50px;
    text-align: center;
    text-decoration: none;
   /* opacity: 0.7; */
    
}
div.gallery {
    text-align:center;
    background-color:greenyellow;
}

figure {
    display: inline-block;
    margin:.25em;
}

div.gallery img {
    -moz-border-radius: 30px 30px 30px 30px;
    -webkit-border-radius: 30px 30px 30px 30px;
    border-radius: 30px 30px 30px 30px;
    border:1px solid #000; /* width style color */
}
/* using on the elements.html page to get one column 100% because not using two columns on that page */
.fullwidth {
    width:100%;
}

/* START EMBEDRESPONSIVELY.COM RULES */
.embed-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	max-width: 100%; 
} 

.embed-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%; 
}
/* END EMBEDRESPONSIVELY RULES */


footer {
    text-align: center;
    clear:both;
    color: black;
}

/* End GLOBAL RULES */

/* Start RESPONSIVE RULE */

/* Desktop */
@media all and (min-width:700px){

   /* left column*/
section {
        float:left;
        width:55%;
        padding-bottom: 3em;
        
}

    /* right column*/
aside {
    float:right;
    width:36%; 
    margin-top: 2%;
    margin-right: 2%;
    color:crimson;
    background-color: white;
    height: auto;
/*    margin: 2%;*/
}
    
}

/* Phone */
@media all and (max-width:699px) {
    
    div.wrapper {
        width:100%;
    }
    aside{
        background-color: white;
        margin:1em; 
    }
    h3 {
        color:crimson;
        margin-left:1em;
        margin-right:auto;
        font-size: 1.7em;
        text-shadow: 0 0 2px #0000cc; 
    }
}
    
    

/* End RESPONSIVE RULE */