html {-webkit-animation: safariSelectorFix infinite 1s; }
@-webkit-keyframes safariSelectorFix {
0% {zoom:1;} 
100% {zoom:1;}
}
body {background-color:#ffffff; font-family: Georgia, "Times New Roman", Times, serif; font-size:18px; color:#000000; margin: 2px; behavior:url("csshover.htc"); }
.title {font-family: Georgia, "Times New Roman", Times, serif; font-size:40px;  font-weight:normal;  position:absolute;left:60px;top:30px; margin-top:auto; }
.title2 {font-family: Georgia, "Times New Roman", Times, serif; font-size:28px;  font-weight:normal; position:absolute;left:100px;top:78px; margin-top:auto; }
pre {
    display: block;
    font-family: Georgia, "Times New Roman", Times, serif;
    white-space: pre; margin: 1em 0;
}
#contents { position:absolute;left:63px;top:160px; font-size:20px;}
li {  list-style-type: none; }
a:link  {text-decoration: none; color:#000000; outline: none;}
a:visited  {text-decoration: none; color:#000000;}
a:hover  {text-decoration: none; color:#000000;}
a:active  {text-decoration: none; color:#000000}
#apDiv1  {position: absolute;left:400px;top:140px;width:640px;z-index:0;}/*all other content*/
.contact  {font-size:18px; position:absolute;left:800px;top:30px;}
.home {position: absolute;left: 0px;top:30px;}
.request {font-size: 20px;}
.Wtitle1 {font-size: 20px;}
/*home page*/
.hp1 {width: 190px; position:absolute; left:-60px;top:20px;}/*flower*/
        .hp2 {width: 190px; position:absolute; left:340px;top:20px;}/*Sweet pea*/
        .hp3 {width: 190px; position:absolute; left:140px;top:220px;}/*gray*/
        .hp4 {width: 190px; position:absolute; left:140px;top:20px;}/*rose*/
        .hp5 {width: 190px; position:absolute; left:-60px;top:220px;}/*dahlia*/
        .hp6 {width: 190px; position:absolute; left:340px;top:220px;}/*hydrangea*/
        .hp7 {width: 190px; position:absolute; left:140px;top:420px;}/*other*/
        .hp8 {width: 190px; position:absolute; left:-60px;top:420px;}/*many*/
        .T1 {font-size:25px; font-weight:normal; position:absolute; left:-65px; top:0px}
         .T2 {position:relative; left:-80px; top:65px}
        .T3 {position:absolute; left:-80px; top:253px}
.T4 {position: absolute; left: -80px; top: 200px;}
.hp1t {position: absolute; left:32px;top: 210px;}
.hp2t {position: absolute; left:458px;top: 210px;}
.hp3t {position:absolute; left:247px; top:430px;}
.hp4t {position: absolute; left:245px;top: 210px;}
.hp5t {position: absolute; left:33px;top: 430px;}
.hp6t {position: absolute; left:400px;top: 430px;}
.hp7t {position: absolute; left:224px;top: 648px;}
.hp7t {position: absolute; left:242px;top: 648px;}
.hp8t {position: absolute; left:42px;top: 648px;}
       
/*gallery*/
.box {position:absolute;top: 5px;left: -115px;}
.lb-album{width: 700px; /*control width of gallery*/margin: 0 auto;}
.lb-album li{ /*Thumbs control*/float: left;margin: 6px;position: relative;list-style-type: none;}
.lb-album li > a,
.lb-album li > a img{display: block;}
.lb-album li > a{width: 160px;height: 160px;position: relative;}/*thumb nails*/
.lb-overlay{width: 0px;height: 0px;position: fixed;overflow: hidden;left: 0px;top: 0px;padding: 0px;z-index: 99;text-align: center;background: rgb(128,128,128);}/*overlay background*/
.lb-overlay > div{position: relative;color: #fff;width: 650px;height: 80px;margin: 10px auto 0px auto;}/*text box*/
.lb-overlay div h3,
.lb-overlay div p{padding: 0px 0px;width: 600px;height: 60px;}/*text box*/
.lb-overlay div h3{font-size: 24px;float: left;text-align: center;}/*Image title*/
.lb-overlay div p{font-size: 14px;text-align: left;float: left;width: 300px;}/*Describation text*/
.lb-overlay a.lb-close{background: rgb(128,128,128);z-index: 1001;color: #fff;position: absolute;top: 43px;right: 10px;font-size: 25px;line-height: 26px;text-decoration: none;overflow: hidden;margin-left: -25px;opacity: 0;}/*close button*/
.lb-overlay img{max-height: 100%; max-width:100%;position: relative;opacity: 0;border:0px solid #fff;
 filter: alpha(opacity=0); /* internet explorer */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
	-webkit-transition: opacity 0.5s linear;
	-moz-transition: opacity 0.5s linear;
	-o-transition: opacity 0.5s linear;
	-ms-transition: opacity 0.5s linear;
	transition: opacity 0.5s linear;}/* height: 100%; For Opera max-height does not seem to work IMage control*/
.lb-prev, .lb-next{text-indent: -9000px;position: absolute;top: -10px;width: 24px;height: 25px;left: 50%;opacity: 0.8;
	filter: alpha(opacity=80); /* internet explorer */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=80)"; /*IE8*/}/*control arrows*/
.lb-prev:hover, .lb-next:hover{opacity: 1;}
.lb-prev{margin-left: -30px;background: transparent url(../Images/arrows.png) no-repeat top left;}
.lb-next{margin-left: 6px;background: transparent url(../Images/arrows.png) no-repeat top right;}
.lb-overlay:target {width: auto;height: auto;bottom: 0px;right: 0px;padding: 80px 100px 120px 100px;}
.lb-overlay:target img,
.lb-overlay:target a.lb-close{opacity: 1;
	filter: alpha(opacity=99); /* internet explorer */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/}
/* 100% Height for Opera as the max-height seems to be ignored, not optimal for large screens 
	http://bricss.net/post/11230266445/css-hack-to-target-opera */
x:-o-prefocus, .lb-overlay img {height: 100%;}

/*Home page test
*/
.picture-container {
    width: 100%;
    max-width: 1000px;
    max-height: 1000px;
    margin: 10px auto;
    overflow: hidden;
    position: absolute;
    left: -70px;
    top: 10px;
}

.picture-slide::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: url(picture/bg-grid.png);
    background-position: fixed;
}

.picture-wrapper {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    position: relative;
}

.picture-slide {
    position: absolute;
    left: 100%;
    top: 0;
    width: 100%;
    height: 100%;
}

    .picture-slide picture {
        display: block;
        width: 100%;
    }

        .picture-slide picture img {
            display: block;
            width: 100%;
        }

.picture-wrapper .picture-slide:nth-of-type(1) {
    animation: autoplay1 20s infinite -1s;}
.picture-wrapper .picture-slide:nth-of-type(2) {
    animation: autoplay1 20s infinite 4s;}
.picture-wrapper .picture-slide:nth-of-type(3) {
    animation: autoplay1 20s infinite 9s;}
.picture-wrapper .picture-slide:nth-of-type(4) {
    animation: autoplay1 20s infinite 14s;}
@keyframes autoplay1 {
    0% {left: 100%;}
    5% {left: 0;}
    25% {left: 0;}
    30% {left: -100%;}
    100% {left: -100%}
}
/*
.text-slide {
    position: absolute;
    left: -100%;
    top: 0;
    width: 100%;
    height: 100%;
}

    .text-slide section {
        display: block;
        width: 100%;
        text-align: center;
        color: #fff;
    }

        .text-slide section h1 {
            margin: 0;
            padding: 0;
            color: #fff;
            font: 300 8vmin/15vmin 'Lato', sans-serif;
        }

        .text-slide section p {
            margin: 0;
            padding: 0;
            color: #fff;
            font: 400 20px/25px 'Lato', sans-serif;
            position: absolute;
            bottom: 20px;
            left: 0;
            width: 100%;
        }

.picture-wrapper .text-slide:nth-of-type(5) {
    animation: autoplay2 20s infinite -1s;
}

.picture-wrapper .text-slide:nth-of-type(6) {
    animation: autoplay2 20s infinite 4s;
}

.picture-wrapper .text-slide:nth-of-type(7) {
    animation: autoplay2 20s infinite 9s;
}

.picture-wrapper .text-slide:nth-of-type(8) {
    animation: autoplay2 20s infinite 14s;
}

@keyframes autoplay2 {
    0% {
        left: -100%;
    }

    5% {
        left: 0;
    }

    25% {
        left: 0;
    }

    30% {
        left: 100%;
    }

    100% {
        left: 100%
    }
}
*/
@media only screen and (max-width: 640px) {
    .picture-wrapper {
        padding-bottom: 150%;
    }
}

@media only screen and (max-width: 1024px) and (orientation: landscape) {
    .picture-container {
        max-width: 480px;
    }

    .picture-wrapper {
        padding-bottom: 62.5%;
    }
}

@media only screen and (max-width: 480px) and (orientation: portrait) {
    .picture-wrapper {
        padding-bottom: 150%;
    }
}