/* -------------------------------- 

Orchard House Website
2015
CSS VERSION 1.1


1 - TYPOGRAPHY

2 - LAYOUT

3 - LAYOUT MODULES

4 - BACKGROUND SLIDESHOWS

5 - MEDIA QUERIES

-------------------------------- */


/* -------------------------------- 

TYPOGRAPHY

-------------------------------- */

@font-face {
  font-family: 'Great Vibes';
  src: url('../fonts/GreatVibes-Regular.eot'); /* IE9 Compat Modes */
  src: url('../fonts/GreatVibes-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/GreatVibes-Regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/GreatVibes-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/GreatVibes-Regular.svg#45206ddb59cbd99a609ac10e32a55908') format('svg'); /* Legacy iOS */
       
  font-style:   normal;
  font-weight:  400;
}

@font-face {
  font-family: 'Crimson Text Roman';
  src: url('../fonts/CrimsonText-Roman.eot'); /* IE9 Compat Modes */
  src: url('../fonts/CrimsonText-Roman.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/CrimsonText-Roman.woff') format('woff'), /* Modern Browsers */
       url('../fonts/CrimsonText-Roman.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/CrimsonText-Roman.svg#13dc73e3781b936ac8184d25c72fae4c') format('svg'); /* Legacy iOS */
       
  font-style:   normal;
  font-weight:  400;
}

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

}

html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
    font-size: 100%;
    font-family: "Crimson Text Roman", Georgia, Palantino, "Times New Roman", serif;
}

nav {
    font-family: "Great Vibes", "Brush Script MT", cursive;
    text-align: center;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    height: 30px;
}

nav li {
    display: inline-block;
    font-size: 2.3em;
    padding: 0px 20px;
    text-align:center;
}

nav li a:link, nav li a:visited, nav li a:active {
    text-decoration: none;
    color: #fff200;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    /* ...and now for the proper property */
    transition:.5s;

}

nav .current-page a:link, nav .current-page a:visited, nav .current-page a:active {
    color: #fff;
}

nav li a:hover {
    text-decoration: none;
    color: #fff;
}

#home #title, #home #mob-title {
    text-align: center;
    font-size: 4.6em;
    font-family: "Great Vibes", "Brush Script MT", cursive;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
    color: #fff;
    
}

#home #title h1 {
    font-size: 2.4em;
}

#home #mob-title h1 {
    font-size: 2em;
}

#page #mob-title h1 {
    font-size: 2em;
}

#page #title {
    text-align: left;
    font-family: "Great Vibes", "Brush Script MT", cursive;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
    
}

#page #mob-title {
    text-align: center;
    font-family: "Great Vibes", "Brush Script MT", cursive;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
    
}

#page #title h1, #page #mob-title h1 {
    font-size: 4.5em;
    color: #fff200;
}

#main-text p{
    font-size: 0.85em;
    line-height: 18px;
    padding-bottom: 18px;
}

#main-text a:link, #main-text a:active, #main-text a:visited, #main-text a:hover {
    text-decoration: none;
    color: #fff200;
    
}


/* -------------------------------- 

LAYOUT

-------------------------------- */

html{}

body {
    background-color: #000;
}

header {
    position: absolute;
    top: 0;
    width: 100%;
    height: 80px;
    display: block;
    background-color: #000;
    border-bottom: 3px solid #fff200;
    z-index: 10000;
}

.logo {
    position:absolute;
    top: 15px; 
    left: 15px;
    z-index: 100000;
    
}

img.home-btn, object.home-btn {
    width:55px;
    height:auto;
}

main, main:after  {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: transparent;
    z-index: 1;
    
}

main:after { 
    content: '';
    xbackground: transparent url(../images/backgrounds/pattern3.png) repeat top left; 
}

#main-wrap {
    position: absolute;
    width: 100%;
    height: auto;
    bottom: 0px;
    color: #fff;
    z-index: 10;
}

#home #title {
    margin-bottom: -40px;
}

#home #mob-title {
    margin: auto;
    position: absolute;
    top: 0; left: 0; right: 0;
    padding-top: 20%;
    z-index: 1000;
    
}

#page #mob-title {
    margin: auto;
    position: absolute;
    top: 0; left: 0; right: 0;
    padding-top: 30%;
    z-index: 1000;
    
}

#page #title {
    margin-bottom: -20px;
    margin-left: 35px;
}

#main-text {
    background-color: #000;
    -moz-border-image:url("../images/repeating-flourish.png") 33.3% 33.3% repeat; /* Firefox */
    -webkit-border-image:url("../images/repeating-flourish.png") 33.3% 33.3% repeat; /* Safari */
    -o-border-image:url("../images/repeating-flourish.png") 33.3% 33.3% repeat; /* Opera */
    border-image:url("../images/repeating-flourish.png") 33.3% 33.3% repeat;
    border-width: 10px;
    border-style: solid;
    border-left:0;
    border-right:0;
}

footer {
    position: fixed;
    width: 100%;
    bottom: 15px;
    text-align: right;
    color: #fff;
    font-size: 0.2em;
    text-transform: uppercase;
    z-index: 100;
    
}

footer p {
    margin: 7px 7px 0px 7px;
}

footer a:link, footer a:active, footer a:visited, footer a:hover  {
    color: #fff;
    text-decoration: none;
    
}

/** Box-model - Border-box **/

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/** clear fix **/

.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;
}


/* -------------------------------- 

LAYOUT - MODULES

-------------------------------- */

.onehalf {
	width: 50%;
	padding: 17px 37px 0px 37px;
	float:left;
	}

.onethird {
	width: 33%;
	padding: 17px 17px 0px 17px;
	float:left;
	}

.mobile-visible {
    display: none;
}

.mobile-invisible {
    display: block;
}

/* -------------------------------- 

BACKGROUND SLIDESHOWS

-------------------------------- */

#slider li {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    
}

.oneslide #slider li {
    animation: oneslide 8s linear 0s forwards;
}

.threeslides #slider li {
    animation: threeslides 24s linear infinite 0s;
}

.fiveslides #slider li {
    animation: fiveslides 40s linear infinite 0s;
}

.sixslides #slider li {
    animation: sixslides 48s linear infinite 0s;
}

#home #slider li:nth-child(1) { 
    background-image: url(../images/backgrounds/home1.jpg); 
}
#home #slider li:nth-child(2) { 
    background-image: url(../images/backgrounds/home2.jpg);
    animation-delay: 8s; 
}
#home #slider li:nth-child(3) { 
    background-image: url(../images/backgrounds/home3.jpg);
    animation-delay: 16s;
}

.villa #slider li:nth-child(1) { 
    background-image: url(../images/backgrounds/villa1.jpg); 
}
.villa #slider li:nth-child(2) { 
    background-image: url(../images/backgrounds/villa2.jpg);
    animation-delay: 8s; 
}
.villa #slider li:nth-child(3) { 
    background-image: url(../images/backgrounds/villa3.jpg);
    animation-delay: 16s;
}

.villa #slider li:nth-child(4) { 
    background-image: url(../images/backgrounds/villa4.jpg);
    animation-delay: 24s;
}
.villa #slider li:nth-child(5) { 
    background-image: url(../images/backgrounds/villa5.jpg);
    animation-delay: 32s;
}
.villa #slider li:nth-child(6) { 
    background-image: url(../images/backgrounds/villa6.jpg);
    animation-delay: 40s;
}

.experience #slider li:nth-child(1) { 
    background-image: url(../images/backgrounds/services1.jpg); 
}
.experience #slider li:nth-child(2) { 
    background-image: url(../images/backgrounds/services2.jpg);
    animation-delay: 8s; 
}
.experience #slider li:nth-child(3) { 
    background-image: url(../images/backgrounds/services3.jpg);
    animation-delay: 16s;
}
.experience #slider li:nth-child(4) { 
    background-image: url(../images/backgrounds/services4.jpg);
    animation-delay: 24s;
}

.experience #slider li:nth-child(5) { 
    background-image: url(../images/backgrounds/services5.jpg);
    animation-delay: 32s;
}


.galle #slider li:nth-child(1) { 
    background-image: url(../images/backgrounds/galle1.jpg); 
}
.galle #slider li:nth-child(2) { 
    background-image: url(../images/backgrounds/galle2.jpg);
    animation-delay: 8s; 
}
.galle #slider li:nth-child(3) { 
    background-image: url(../images/backgrounds/galle3.jpg);
    animation-delay: 16s;
}

.contact #slider li:nth-child(1) { 
    background-image: url(../images/backgrounds/info1.jpg); 
}

.no-cssanimations #slider li {
	opacity: 1;
}

@keyframes oneslide { 
    0% { opacity: 0; animation-timing-function: ease-in; }
    10% { opacity: 1; animation-timing-function: ease-out; }
    33% { opacity: 1 }
    100% { opacity: 1 }
}

@keyframes threeslides { 
    0% { opacity: 0; animation-timing-function: ease-in; }
    10% { opacity: 1; animation-timing-function: ease-out; }
    33% { opacity: 1 }
    49% { opacity: 0 }
    100% { opacity: 0 }
}

@keyframes fiveslides { 
    0% { opacity: 0; animation-timing-function: ease-in; }
    7% { opacity: 1; animation-timing-function: ease-out; }
    20% { opacity: 1 }
    40% { opacity: 0 }
    100% { opacity: 0 }
}

@keyframes sixslides { 
    0% { opacity: 0; animation-timing-function: ease-in; }
    5% { opacity: 1; animation-timing-function: ease-out; }
    17% { opacity: 1 }
    30% { opacity: 0 }
    100% { opacity: 0 }
}


/* -------------------------------- 

MEDIA QUERIES

-------------------------------- */

@media only screen and (min-width: 768px) {}

@media only screen and (max-width: 1024px) {
    
    .onehalf, .onethird {
        float: none;
        width: 75%;
        display:block;
        margin: 0 auto;
        padding: 0px;
        font-size: 1em;
    }
    
    .mobile-visible {
        display: block;
    }

    .mobile-invisible {
        display: none;
    }
    
    nav {
        position: relative;
        height: 100%;
        min-height: 45px;
    }
    
    header {
        position: relative;
        height: 100%;
    }
    
    #main-wrap {
        position: relative;
    }
    
    main, main:after {
        
        position: relative;
        width: 100%;
        background-color: transparent;
        z-index: 1;
    }
    
    #slider {
        overflow: hidden;
        position: relative;
        padding-bottom: 66.66%;
        height: 0;
        overflow: hidden;
    }
    
    #slider ul {
        opacity: 0.99;
    }
    
    #main-text {
        padding: 37px 10px;
    }
    
    nav li {
        display: block;
        font-size: 2.3em;
        padding: 20px;
        text-align:center;
    }
    
    .menu-burger img {
        cursor: pointer;
        width: 20px;
        height: auto;
    }
    
    footer{
        position:relative;
        bottom: 0px;
    }
}
    


@media only screen and (max-width: 800px) {
    
    
     #home #mob-title h1 {
        font-size: 1.4em;
    }

}


@media only screen and (max-width: 600px) {
  
    .onehalf, .onethird {
        float: none;
        width: 95%;
        display:block;
        margin: 0 auto;
        font-size: 1em;
    }
    
    #home #mob-title h1 {
        font-size: 1.2em;
    }
    
    #home #mob-title p{
        font-size: 0.4em;
    }
    
    #page #mob-title {
        font-size: 0.6em;
    }
    

}

@media only screen and (max-width: 475px) {
    
    #home #mob-title {
        padding-top: 10%;
    
    }
    
    
}