* {
    box-sizing: border-box;
}

html {
width:100%;
height:auto;
    background-image: url(../_images/poppy_large_bg.jpg);
    background-position:top right;
    background-size: cover;
    background-attachment: fixed;
}

body {
    width:100%;
    height:100%;
}


#headerLogoWrapper {
    margin:0 auto;   
}

#logo {
    margin:0 auto;
    width:80%;
    max-width: 960px;
    min-width:480px;
}

#logo img {
    margin:0 auto;
    width:100%;
}

#contentWrapper {
    margin:0 auto;
    position: relative;
    width:80%;
    height:auto;
    max-width: 960px;
    min-width:480px;
    background-color:#fff;
    box-shadow: 5px 5px 5px 0px rgba(154, 160, 170, 0.26);
    position: relative;
}

.personWrapper {
    padding:1%;
    width:100%;
    height:auto; 
    float:left;
    border-bottom:2px solid #b2a2a2;
    position: relative;
}

.personWrapper {
    border-bottom:none;
}

.personName {
    font-family: 'Oswald', sans-serif;
    padding:1%;
    width:100%;
}

.personDob {
    font-size: 0.7em;
    color:rgba(62, 60, 60, 0.99);
}

.personPhoto {
    margin-left:1%;
    width:25%;
    height:auto;
    float:left;
}
.personPhoto img {
    width:100%;
    height:auto;
}

.personWording {
    margin:0.5%;
    width:70%;
    text-align: justify;
    font-family: 'Roboto', sans-serif;
    color:#030202;
    float:left;  
}

.Lest {
margin-top:-2%;
float:right;
font-family: 'Oswald', sans-serif;
position:bottom;
}

span.banner {
position: relative;
left: 0;
width:50%;
height: auto;
margin-left:2%;
}

.banner img {
margin-top:1%;
max-width:30%;
height:auto;
}


#spacer {
    width:100%;
    height:100px;
    float:left;
}

#poppyBorderBottom {
    width:100%;
    height 67px;
    padding-bottom: 67px;
    background-image: url(../_images/poppyBorderBottom.png);
    position:absolute;
    bottom:-1px;
    z-index:0;
}

#borderWrapper {
    margin-bottom:0px;
    clear:both;
}

#copyright {
    right:1em;
   float:right;
   position: relative;
    color:#fff;
    font-size:0.8em;
}

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

html {
width:100%;
height:auto;
    background-image: url(../_images/poppy_large_bg.jpg);
    background-position:top right;
    background-size: cover;
    background-attachment: fixed;
    }
    
#contentWrapper {
}


.personName {
    font-size: 2em;
}

.personWording {
    text-align: justify;
    font-size:1.5em;
}


.Lest {
padding:2em;
float:right;
Font-size:2em;
font-weight:bold;
color: #c61a1a;
}

#borderWrapper {
    width: 100%;
    height:80px;
}

#poppyBorderBottom {
    margin-top:10px;
    width:100%;
    height 67px;
    padding-bottom: 67px;
    background-image: url(../_images/poppyBorderBottom.png);
    position:absolute;
    bottom:0px;
    left:-1px;
}
}

@media screen and (min-width: 481px) and (max-width: 1024px) {

html {
width:100%;
height:auto;
    background-image: url(../_images/poppy_small_bg.jpg);
    background-position:top right;
    background-size: cover;
    background-attachment: fixed;
    }
    
#contentWrapper {
    margin:0 auto 8em auto;
    padding:0%;  
}
.personName {
    font-size: 1.5em;
}


#borderWrapper {
    width: 100%;
    height:80px;
}

.personWording {
    margin-left:1%;
       margin-top:1%;
       font-size:0.85em;
    float:left;  
}

.Lest {
padding:1em 1em 0 0;
float:right;
Font-size:1.3em;
font-weight:bold;
color: #c61a1a;
}


#poppyBorderBottom {
    margin:0;
    width:100%;
    height 67px;
    padding-bottom: 67px;
    background-image: url(../_images/poppyBorderBottom.png);
    position:absolute;
    bottom:0px;
    left:-1px;
}

}

@media screen and (max-width: 480px) {

html {
width:100%;
height:auto;
    background-image: url(../_images/poppy_small_bg.jpg);
    background-position:top right;
    background-size: cover;
    background-attachment: fixed;
    }
    
#contentWrapper {
    margin:0 auto 1em auto;
    width: 480px;
}

#photoBoxWrapper {
    width:100%;
    height: auto;
}

.photoBox {
    width:100%;
    height:200px;
    float:left;
}

.photoBoxText {
    width:100%;
    height:auto;
    font-family: 'Nothing You Could Do', cursive;
    color:rgb(245, 245, 245);
    text-align: center;
    background-color:rgba(30, 4, 139, 0.77);
    position:absolute;
    bottom:0;
}

#borderWrapper {
    width: 100%;
    height:80px;
}

.personWording {
    margin-left:0.5%;
    font-size:.8em;
    line-height: 1.4em;
}

.Lest {
padding:1em 1em 0 0;
float:right;
Font-size:1em;
font-weight:bold;
color: #c61a1a;
}


#poppyBorderBottom {
    margin:0;
    width:100%;
    height 67px;
    padding-bottom: 67px;
    background-image: url(../_images/poppyBorderBottom.png);
    position:absolute;
    bottom:-0px;
    left:-1px;
}

span#spacer {
width:100%;
height:300px;

}



}




/* CLEARFIX --------- */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

/* CLEARFIX end --------- */