*{margin:0px; padding:0px;  box-sizing: content-box; line-height: 1.5;}

.home-text {margin: 0 auto; background-color: rgb(217, 208, 199); text-align: left; padding: 25px 0px; max-width: 770px; font-weight: normal;
    }
	 
/***************FOR THE ANIMATED BACKGROUND IN TOP SECTION ************************/

    .header {
        display: block; 
        width: 62.5%;
        height: 31.25%; 
        margin: 0 auto;
        padding-top: 4%;
    } 

    @keyframes cloudzoom {
        0%   {background: url(../images/cloud_zoom_01.jpg) 50% 0/100% no-repeat  #DDCCBA;}
        100% {background: url(../images/cloud_zoom_01.jpg) 50% 0/200% no-repeat  #DDCCBA;}
    }

    #cloudz {
        width: 100%;
        padding: 25% 0 25% 0;
        background: url(../images/cloud_zoom_01.jpg) 50% 0/100% no-repeat  #DDCCBA;    
        margin-bottom: 20px;
        animation-name: cloudzoom; 
        animation-duration: 4s;
    }

/******************************/

body{    
    background-color: #A49180;
    font-weight:bold; 
}

ul.bulleted {list-style-type: circle; padding-left: 2em; text-align: left; margin-left: 16%; line-height: 1.5;}

.vertical-list {float: none;}

h1 {font-size: 4em; text-shadow:5px 5px 40px #A49180;}

h2 {font-size: 1.2em; text-shadow:5px 5px 40px purple;}

h3 {font-size: 1.5em; text-shadow:5px 5px 40px purple;}

h5 {color: black; text-shadow:3px 3px 2px white;}

/*********TITLES***********/

.artform-title {margin: 3.75% auto 3.75% auto; width: 100%; font-size: 1.25em;}

/*********WINDOWS************/

.window1 {
    margin: 0 auto; 
    width: 100%;
    padding: 6% 0 30% 0;  
}

.window2 { 
    margin: 0 auto;
    width: 100%;
    padding: 4% 0 28% 0;
}

.window2-div {
    text-align: left; 
    padding-top: 12%; 
    padding-left: 12%; 
    max-width: 50%;
}

/********************BACKGROUNDS*************************/

.division {
    width: 100%;
    background-color: #DDCCBA;
}

.division1-2 {
    padding: 4% 0 5% 0;
}

.div-h4 {
    margin: 0 auto;
    max-width: 50%; 
    line-height: 1.5;
}

.division3 {  
    margin: 0 auto;
    padding: 2.3% 0 3.2% 2em;
    max-width: 74.4%;
}

.div3-h4 {
    margin-left: 10%;
    max-width: 50%; 
    text-align: left;
	padding-bottom: 1.25rem;
}



#windo1 { 
    background: url(../images/pearly_gates.jpg) 50% 0 / cover no-repeat fixed #A49180;
}

#urumara { 
    background: url(../images/john_henry_fuseli_nightmare_1781_small2.jpg) 50% 0 / auto 100% no-repeat fixed #A49180;
}

#contact { 
    background: url(../images/noise_background2.jpg) center bottom no-repeat fixed #A49180;
}

/****BIG MENU WITH PICTURES FOR LINKS****/

.biglinks {
/*     padding-bottom: 112%; */
	padding-bottom: 62%;
}

.caption-parent-height {height: 3.2rem;}
.vert-align {position: relative; top: 50%; transform: translateY(-50%);}

.linkfigs {
 
    float: left; 
    border: solid 1px black; 
    padding: 1px;
    /* margin: .5rem;  */
	margin-left: 7.5%;
	width: 15%;
    /* width: 30%; */
}

.square300px {width: 100%; height: 100%;}

/************FOR LINK TO MY OTHER WEBSITES, DELETE THIS SECTION WHEN NO LONGER NEEDED*****************/

#topstrip {    
    background-color: #052391;
    width: 100%;
    height: auto;
}

#prehover2 {
    width: 600px; height: 75px;
    background: url(../images/acalink.png);
    margin: 0 auto; padding: 0;
    position: relative;}
#prehover2 li {
    margin: 0; padding: 0; list-style: none;
    position: absolute; top: 0;}
#prehover2 li, #prehover2 a {
    height: 75px; display: block;}    
    
    /*BEFORE IMAGE*/    
        
    #shifty {left: 0; width: 600px;}

    /*AFTER IMAGE*/

/*     #shifty a:hover {
        background: transparent url(../images/acalink.png)
        0 -75px no-repeat;} */
    
/***************/ 

/***********RESPONSIVE******************/

@media screen and (max-width: 1150px){
    .biglinks {padding-bottom: 120%;}
    .linkfigs {margin: .5rem; width: 30%;}
}

@media screen and (max-width: 1050px){
    .biglinks {padding-bottom: 120%;}
    .linkfigs {margin: .5rem; width: 30%;}
}

@media screen and (max-width: 950px){
    .biglinks {padding-bottom: 120%;}
    .linkfigs {margin: .5rem; width: 30%;}
}

@media screen and (max-width: 900px){
    .biglinks {padding-bottom: 110%;}
    .linkfigs {margin: .5rem; width: 25%;}
}

@media screen and (max-width: 800px){
    .biglinks {padding-bottom: 100%;}
    .linkfigs {margin: .5rem; width: 20%;}
}

@media screen and (max-width: 700px){
    .biglinks {padding-bottom: 110%;}
    .linkfigs {margin: .5rem; width: 20%;}
}

@media screen and (max-width: 600px){
    .biglinks {padding-bottom: 120%;}
    .linkfigs {margin: .5rem; width: 20%;}
}

@media screen and (max-width: 500px){
    .biglinks {padding-bottom: 130%;}
    .linkfigs {margin: .5rem; width: 20%;}
}

@media screen and (max-width: 450px){
    .biglinks {padding-bottom: 135%;}
    .linkfigs {margin: .5rem; width: 20%;}
}

@media screen and (max-width: 420px){
    .biglinks {padding-bottom: 140%;}
    .linkfigs {margin: .5rem; width: 20%;}
}

@media screen and (max-width: 370px){
    .biglinks {padding-bottom: 150%;}
    .linkfigs {margin: .5rem; width: 20%;}
}

/********/

@media screen and (max-width: 765px){
    #windo1 {background: url(../images/pearly_gates.jpg) 50% 0 / 100% no-repeat fixed #A49180;}
    #urumara {background: url(../images/john_henry_fuseli_nightmare_1781_small.jpg) 50% 0 / 100% no-repeat fixed #A49180;}
}

@media screen and (max-width: 500px) {
    .window2-div {max-width: 98%; padding: 12% 2% 0 2%;}
    .div-h4 {max-width: 98%;}
    h1 {font-size: 1.75em;}
    h5 {font-size: 1.0em;}
    h3 {font-size: .75em;}
    ul.bulleted {padding-left: 1em; margin-left: 8%;}
}

@media screen and (max-width: 320px) {
    .biglinks {padding-bottom: 325%;}
    .linkfigs {margin: .5rem; width: 30%;}
}