@charset "UTF-8";

*{
	border:0;
	padding:0;
	margin:0;
	text-decoration:none;
	font-weight:normal;
	-moz-box-sizing: border-box;
  	-webkit-box-sizing: border-box;
 	box-sizing: border-box;
}

.clearfix{
	clear: both;
	float: none;
}

body{
	width: 100%;
    background-color: #f9f9f9;
}

header{
	width: 100%;
	padding: 100px 10px;
}

header h1{
	font-family: 'Cardo', "Times New Roman", Times, serif;
	font-size: 19px;
	font-weight: normal;
	letter-spacing: 9px;
	color: #3f3f3f;
	text-align: center;
	text-transform: uppercase;
}

header h1 a{
	color: #3f3f3f;
}

.content{
    max-width: 1000px;
    width: 100%;
    margin: auto;
}

.top{
    position: relative;
	max-width: 1000px;
	width: 100%;
    height:402px;
	margin: auto;
    background-image: url(../images/gardenOne1.jpg);
    background-position: center;

}

.top h1{
	color: #fff;
	text-align: center;
	font-family: 'NNormal', Helvetica, Arial, sans-serif;
    font-size: 16px;
    letter-spacing: 7px;
    line-height: 32px;
    padding: 170px 0 28px 0;
    text-transform: uppercase;

}

.arrow-down {
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 5px solid #fff;
    margin: auto;
    -webkit-animation-name: bounce;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: bounce;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -o-animation-name: bounce;
    -o-animation-duration: 1s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
    animation-name: bounce;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.top h2{
    color: #fff;
    text-align: center;
    font-family: 'NNormal', Helvetica, Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 5px;
    padding-top: 32px;
    text-transform: uppercase;

}

.top h2 a{
    color: #fff;
    padding-bottom: 4px;
    border-bottom: dotted 1px rgba(255,255,255,0.6);
}

.top h2 a:hover{
    border-bottom: dotted 1px rgba(255,255,255,1);
}

.about{
    margin: 50px 0;
    padding: 50px 0 100px;
    width: 100%;
    position: relative;
    background-image: url(../images/border1.png), url(../images/border1.png), url(../images/border2.png), url(../images/border2.png);
    background-position: left top, left bottom, right top, right bottom;
    background-repeat: no-repeat;
}

.about h3{
    color: #3f3f3f;
    text-align: center;
    font-family: 'NMedium', Helvetica, Arial, sans-serif;
    font-size: 14px;
    letter-spacing: 5px;
    padding-bottom: 60px;
    text-transform: uppercase;
}


.left{
    width: 50%;
    float: left;
    padding: 0 30px 0 20px;
}

.right{
    width: 50%;
    float:left;
    padding: 0 20px 0 30px;
}

.left p, .right p{
    color: #4c4c4c;
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    line-height: 25px;
    text-align: justify;

}

.right p a{
    color: #4c4c4c;
    border-bottom: dotted 1px rgba(0,0,0,0.3);
    padding-bottom: 2px;

}

.right p a:hover{
    color: #4c4c4c;
    border-bottom: dotted 1px rgba(0,0,0,0.8);
    padding-bottom: 2px;

}

.imgleft{
    max-width: 480px;
    width: 100%;
    height: 211px;
    float: left;
    text-align: center;
    background-image: url(../images/gardens1.jpg);
    background-position: center;
}

.imgright{
    max-width: 480px;
    width: 100%;
    height: 211px;
    float: right;
    text-align: center;
    background-image: url(../images/contact1.jpg);
    background-position: center;
}

.imgleft h4, .imgright h4{
    font-family: 'NMedium', Helvetica, Arial, sans-serif;
    font-size: 14px;
    letter-spacing: 5px;
    color: #fff;
    padding-top: 105px;
    padding-bottom: 10px;
    text-transform: uppercase;
}

.imgleft h5, .imgright h5{
    font-family: 'NMedium', Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #fff;
    text-transform: uppercase;

}

.imgleft h4 a, .imgright h4 a, .imgleft h5 a, .imgright h5 a{
    color: #fff;
}


.imgright:hover .rotate, .imgleft:hover .rotate
{
    -webkit-animation-name: rotate;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: rotate;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
}

footer{
    background-color: #fff;
    margin-top: 60px;
    padding: 30px 0;

}

.footerleft{
    max-width: 480px;
    width: 100%;
    float:left;
}

.footerright{
    max-width: 480px;
    width: 100%;
    float:right;
    text-align: right;
}

footer h5{

    color: #4c4c4c;
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    line-height:24px;
}

footer .footerright h5{
    padding-top: 10px;
}

footer h5 a{
    color: #4c4c4c;
}

footer h5 a:hover{
    border-bottom: dotted 1px #4c4c4c;
}


/* Gardens Page Styles */

.gardens{
    width: 100%;
    position: relative;
    padding-bottom: 40px;
}

.one, .two, .three{
    width: 33.3%;
    float: left;
}

.one{
    padding: 0 20px 0 0;
}

.two{
    padding: 0 10px;
}

.three{
    padding: 0 0 0 20px;
}

.gardens .gardenimg{
    width: 100%;

     -webkit-transition-property: opacity;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-timing-function: ease-in-out;

    -moz-transition-property: opacity;
    -moz-transition-duration: 0.2s;
    -moz-transition-timing-function: ease-in-out;

    -0-transition-property: opacity;
    -0-transition-duration: 0.2s;
    -0-transition-timing-function: ease-in-out;

    transition-property: opacity;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
}

.gardens h5{
    color: #3f3f3f;
    text-align: center;
    font-family: 'NMedium', Helvetica, Arial, sans-serif;
    font-size: 14px;
    letter-spacing: 5px;
    padding: 30px 0 80px;
    text-transform: uppercase;
}

.imgwrap{
    position: relative;
}

.imgwrap:hover .gardenimg{
    opacity: 0.3;
}


.plus{
    position: absolute;
    top: 50%;
    left: 50%;
    margin:-4px 0 0 -4px;
    opacity: 0;
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-in-out;

    -moz-transition-property: opacity;
    -moz-transition-duration: 0.5s;
    -moz-transition-timing-function: ease-in-out;

    -0-transition-property: opacity;
    -0-transition-duration: 0.5s;
    -0-transition-timing-function: ease-in-out;

    transition-property: opacity;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
}

.imgwrap:hover .plus{
    -webkit-animation-name: rotate;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: rotate;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;

    opacity: 1;


}

.arrow-down-dark {
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 5px solid #3f3f3f;
    margin: auto;
    -webkit-animation-name: bounce;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: bounce;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -o-animation-name: bounce;
    -o-animation-duration: 1s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
    animation-name: bounce;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}


.contact h4{
    color: #3f3f3f;
    text-align: center;
    font-family: 'NMedium', Helvetica, Arial, sans-serif;
    font-size: 14px;
    letter-spacing: 5px;
    padding: 40px 0 20px;
    text-transform: uppercase;

}

.contact h4 a{
    color: #3f3f3f;
    border-bottom: dotted 1px rgba(0,0,0,0.3);
    padding-bottom: 5px;
}

.contact h4 a:hover{
    color: #3f3f3f;
    border-bottom: dotted 1px rgba(0,0,0,8);
}

.ProjectTop{
    position: relative;
    max-width: 1000px;
    width: 100%;
    height:293px;
    margin: auto;

}

.ProjectTop h1{
    color: #fff;
    text-align: center;
    font-family: 'NNormal', Helvetica, Arial, sans-serif;
    font-size: 16px;
    letter-spacing: 7px;
    line-height: 32px;
    padding: 140px 0 28px 0;
    text-transform: uppercase;
    text-shadow: rgba(0,0,0,0.6) 0 1px 2px;

}

.ProjectTopOne{
    background-image:url(../images/gardens/garden1/top.jpg);
    background-position: center;
}

.ProjectTopTwo{
    background-image:url(../images/gardens/garden2/top.jpg);
    background-position: center;
}

.ProjectTopThree{
    background-image:url(../images/gardens/garden3/top.jpg);
    background-position: center;
}

.ProjectTopFour{
    background-image:url(../images/gardens/garden4/top.jpg);
    background-position: center;
}

.ProjectTopFive{
    background-image:url(../images/gardens/garden5/top.jpg);
    background-position: center;
}

.ProjectTopSix{
    background-image:url(../images/gardens/garden6/top.jpg);
    background-position: center;
}


.spacer{
    height: 40px;
}

.before{
    max-width: 480px;
    width: 48%;
    float: left;
    text-align: center;
}

.before img, .after img{
    width: 100%;
}

.after{
    max-width: 480px;
    width: 48%;
    float: right;
    text-align: center;
}

.before h5, .after h5{
    color: #3f3f3f;
    text-align: center;
    font-family: 'NMedium', Helvetica, Arial, sans-serif;
    font-size: 14px;
    letter-spacing: 5px;
    padding: 20px 0 20px;
    text-transform: uppercase;
}

.more{
    width: 100%;
    position: relative;
    padding-top: 150px;
}

.more h2{
    color: #3f3f3f;
    text-align: center;
    font-family: 'NMedium', Helvetica, Arial, sans-serif;
    font-size: 14px;
    letter-spacing: 5px;
    padding: 30px 0 50px;
    text-transform: uppercase;

}

.project{
    margin-bottom: 20px;
}


#sticky_navigation_wrapper{
    width: 100%;
    height: 100px;
    position: relative;
    margin-top: -30px;
}

#sticky_navigation{
    width: 100%;
    background-color: rgba(249,249,249,0.8);
    position: relative;
    z-index: 1001;
    padding: 20px 0;
    -webkit-transition-property: background-color;
    -webkit-transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-in-out;

    -moz-transition-property: background-color;
    -moz-transition-duration: 0.5s;
    -moz-transition-timing-function: ease-in-out;

    -0-transition-property: background-color;
    -0-transition-duration: 0.5s;
    -0-transition-timing-function: ease-in-out;

    transition-property: background-color;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;

}

#sticky_navigation:hover{
    background-color: rgba(249,249,249,1);
}

.center{
    width: 100%;
    max-width: 1000px;
    margin: auto;
    position: relative;
}

.arrow-left-dark {
    width: 0;
    height: 0;
    border-bottom: 3px solid transparent;
    border-top: 3px solid transparent;
    border-right: 5px solid #3f3f3f;
    float: left;
    margin: 3px 10px 0 0;
}

.arrow-right-dark {
    width: 0;
    height: 0;
    border-bottom: 3px solid transparent;
    border-top: 3px solid transparent;
    border-left: 5px solid #3f3f3f;
    float: right;
    margin: 3px 0 0 10px;
}

.previous{
    position: relative;
    float: left;
}

.previous a{
    float: left;
    color: #3f3f3f;
    text-align: center;
    font-family: 'NMedium', Helvetica, Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 5px;
    text-transform: uppercase;
}

.previousInactive{
    position: relative;
    float: left;
    opacity: 0.4;
}

.previousInactive p{
    float: left;
    color: #3f3f3f;
    text-align: center;
    font-family: 'NMedium', Helvetica, Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 5px;
    text-transform: uppercase;
    cursor: default;
}

.middle{
    position: absolute;
    left:50%;
    margin-left: -71px;
    color: #3f3f3f;
    font-family: 'NMedium', Helvetica, Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 5px;
    text-transform: uppercase;
}

.middle a{
    color: #3f3f3f;
}

.next{
    position: relative;
    float: right;
}

.next a{
    float: right;
    color: #3f3f3f;
    text-align: center;
    font-family: 'NMedium', Helvetica, Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 5px;
    text-transform: uppercase;
}

.next a:hover, .middle a:hover, .previous a:hover{
    opacity: 0.6;
    }

.nextInactive{
    position: relative;
    float: right;
    opacity: 0.4;
}

.nextInactive p{
    float: right;
    color: #3f3f3f;
    text-align: center;
    font-family: 'NMedium', Helvetica, Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 5px;
    text-transform: uppercase;
    cursor: default;
}

.hidetwo{
    display: none;
}


@font-face {
    font-family: 'NBold';
    src: url('../fonts/novecentowide-bold-webfont.eot');
    src: url('../fonts/novecentowide-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/novecentowide-bold-webfont.woff') format('woff'),
         url('../fonts/novecentowide-bold-webfont.ttf') format('truetype'),
         url('../fonts/novecentowide-bold-webfont.svg#NovecentowideBoldBold') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'NBook';
    src: url('../fonts/novecentowide-book-webfont.eot');
    src: url('../fonts/novecentowide-book-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/novecentowide-book-webfont.woff') format('woff'),
         url('../fonts/novecentowide-book-webfont.ttf') format('truetype'),
         url('../fonts/novecentowide-book-webfont.svg#NovecentowideBookRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'NDemiBold';
    src: url('../fonts/novecentowide-demibold-webfont.eot');
    src: url('../fonts/novecentowide-demibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/novecentowide-demibold-webfont.woff') format('woff'),
         url('../fonts/novecentowide-demibold-webfont.ttf') format('truetype'),
         url('../fonts/novecentowide-demibold-webfont.svg#NovecentowideDemiBoldRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'NLight';
    src: url('../fonts/novecentowide-light-webfont.eot');
    src: url('../fonts/novecentowide-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/novecentowide-light-webfont.woff') format('woff'),
         url('../fonts/novecentowide-light-webfont.ttf') format('truetype'),
         url('../fonts/novecentowide-light-webfont.svg#NovecentowideLightRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'NMedium';
    src: url('../fonts/novecentowide-medium-webfont.eot');
    src: url('../fonts/novecentowide-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/novecentowide-medium-webfont.woff') format('woff'),
         url('../fonts/novecentowide-medium-webfont.ttf') format('truetype'),
         url('../fonts/novecentowide-medium-webfont.svg#NovecentowideMediumRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'NNormal';
    src: url('../fonts/novecentowide-normal-webfont.eot');
    src: url('../fonts/novecentowide-normal-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/novecentowide-normal-webfont.woff') format('woff'),
         url('../fonts/novecentowide-normal-webfont.ttf') format('truetype'),
         url('../fonts/novecentowide-normal-webfont.svg#NovecentowideNormalRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

::selection      { background:#4e4e4e; color:#FFF;}
::-moz-selection  { background:#4e4e4e; color:#FFF;}


@-webkit-keyframes rotate {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}

@-moz-keyframes rotate {
    from {-moz-transform: rotate(0deg);}
    to {-moz-transform: rotate(360deg);}
}

@-o-keyframes rotate {
    from {-moz-transform: rotate(0deg);}
    to {-moz-transform: rotate(360deg);}
}

@keyframes rotate {
    from {-moz-transform: rotate(0deg);}
    to {-moz-transform: rotate(360deg);}
}


@-webkit-keyframes bounce {
    0%, 100% {-webkit-transform: translateY(0);}
    50% {-webkit-transform: translateY(-8px);}
}

@-moz-keyframes bounce {
    0%, 100% {-webkit-transform: translateY(0);}
    50% {-webkit-transform: translateY(-8px);}
}

@-o-keyframes bounce {
    0%, 100% {-webkit-transform: translateY(0);}
    50% {-webkit-transform: translateY(-8px);}
}
@keyframes bounce {
    0%, 100% {-webkit-transform: translateY(0);}
    50% {-webkit-transform: translateY(-8px);}
}

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

    .more{
    width: 660px;
    position: relative;
    padding-top: 150px;
    margin: auto;
    }


    .one, .two, .three{
        width: 50%;
        max-width: 320px;
        float: left;
        padding: 7px 0;
    }

    .project{
    margin-bottom: 0;
    }

    .gardenimg img{
        width: 100%;
    }

    .releft{
        float:left;
    }

    .reright{
        float:right;
    }

    .gardens{
        width: 660px;
        position: relative;
        padding-bottom: 40px;
        margin: auto;
    }

    .footerleft{
        max-width: 480px;
        width: 100%;
        float:none;
        margin: auto;
        text-align: center;
    }

    .footerright{
        max-width: 480px;
        width: 100%;
        float:none;
        text-align: center;
        margin: auto;
    }

    .top{
        height:300px;

    }

    .top h1{
        color: #fff;
        text-align: center;
        font-family: 'NNormal', Helvetica, Arial, sans-serif;
        font-size: 12px;
        letter-spacing: 5px;
        line-height: 26px;
        padding: 110px 0 28px 0;
        text-transform: uppercase;

    }

    .imgleft{
        max-width: 100%;
        height: 211px;
        float: none;
        text-align: center;
        background-image: url(../images/gardens1.jpg);
        background-position: center center;
        background-repeat: no-repeat;
        margin-bottom: 30px;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

    .imgright{
        max-width: 100%;
        height: 211px;
        float: none;
        text-align: center;
        background-image: url(../images/contact1.jpg);
        background-position: center center;
        background-repeat: no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

    .imgleft h4, .imgright h4{
        font-family: 'NMedium', Helvetica, Arial, sans-serif;
        font-size: 14px;
        letter-spacing: 5px;
        color: #fff;
        padding-top: 105px;
        padding-bottom: 10px;
        text-transform: uppercase;
    }

    .arrow-left-dark {
        margin: 3px 10px 0 10px;
    }

    .arrow-right-dark {
        margin: 3px 10px 0 10px;
    }
}


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

    .more{
        max-width: 320px;
        width: 100%;
        position: relative;
        padding-top: 150px;
        margin: auto;
    }

    .gardens{
        max-width: 320px;
        width: 100%;
        position: relative;
        padding-bottom: 40px;
        margin: auto;
    }


    .one, .two, .three{
        width: 100%;
        padding: 7px 0;
    }

    .project{
    margin-bottom: 0;
    }

    .gardenimg img{
        width: 100%;
    }

    .releft{
        float:none;
    }

    .reright{
        float:none;
    }

    .imgwrap{
        margin: auto;
    }

    .left{
        width: 100%;
        float: left;
        padding: 5px 20px;
    }

    .right{
        width: 100%;
        float:left;
        padding: 5px 20px;
    }

    .before{
        max-width: 480px;
        width: 100%;
        float: none;
        text-align: center;
        margin: auto;
    }


    .after{
        max-width: 480px;
        width: 100%;
        float: none;
        text-align: center;
        margin: auto;

    }

    .gardens h5{
        padding: 30px 0 30px;
    }

    .top h1{
        color: #fff;
        text-align: center;
        font-family: 'NNormal', Helvetica, Arial, sans-serif;
        font-size: 10px;
        letter-spacing: 3px;
        line-height: 26px;
        padding: 110px 0 28px 0;
        text-transform: uppercase;

    }

     .hide{
        display: none;
    }

    .hidetwo{
        display: inline;
    }

    .middle{
    margin-left: -21px;


}



}