/* 
    Created on : 10.05.2016, 11:08:28
    Author     : Heuchreck Dominik
*/

body {
    opacity:0;
    background-image: url(../img/wood-bg.jpg);
    background-attachment: fixed;
}
html, body {
    height:100%;
    color:#555;    
    font-family: 'Josefin Sans', sans-serif;
    font-size: 16px;
    text-align: justify;
}
#page,#background-page {
    height:100%;
    transition:all ease .3s;    
}

.pageTransform {
    transform: translateZ(0px) translateX(-30%) rotateY(30deg) ;
    webkit-transform: translateZ(0px) translateX(-30%) rotateY(30deg);
    moz-transform: translateZ(0px) translateX(-30%) rotateY(30deg);
}

#background-page {
    background-attachment: fixed;
}

h1 { 
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 100;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 50px;
    margin-top:0px;
    margin-bottom:10px;    
}

h2 {
    font-family: 'Reenie Beanie', cursive;
    font-size:33px;
    margin-top:0px;
    margin-bottom:20px;
}

h3 {      
    letter-spacing: 2px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 25px;  
    margin:15px 0;
}
h4 {
    margin-bottom: 20px;
    margin-top:0px;
    font-size: 20px;
    font-style: italic;
}

.engraved {
    text-shadow: #fff 0px 1px 2px;
}

.content-container {
    padding-top:70px;
    padding-bottom:70px;
}

.content-container-no-row {
    padding-top:70px;
}

.content-container-no-row::after {
    clear:both;
    display: table;
    content: " ";
}

.overlay {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    height:100%;
    width:100%;
    background:#555;
    z-index:5;
}

a {
    color:goldenrod;
    position: relative;
}
a:hover {
    text-decoration: none;
    color:goldenrod;
}
 a::after {
    content:"";
    position:absolute;
    bottom:-1px;
    left:0px;
    height:1px;
    width:100%;
    background-color:goldenrod;
    transform:scale(0);
    -webkit-transform:scale(0);
    transition:all .2s ease-in-out;
}
a:hover:after {
    transform:scale(1);
    -webkit-transform:scale(1);
}

::selection {
  background: #555; /* WebKit/Blink Browsers */
  color:goldenrod;
}
::-moz-selection {
  background: #555; /* Gecko Browsers */
  color:goldenrod;
}


/* head */

#languages {
    position: fixed;
    left:50%;
    margin-left:-20px;
    z-index: 3;
    top:25px;
}

.header {
    height:100%;
    width:100%;
    background-image: url(../img/hotel.jpg);
}


.little-header {
    height:30%;
    width:100%;
    background-image: url(../img/mountain.jpeg);
    background-position: 50% 70%;
}

.little-header2 {
    background-image: url(../img/mountain3.jpg);
    background-position: 50% 40%;
}

.little-header3 {
    background-image: url(../img/pay.jpeg);
    background-position: 50% 60%;
}

.header-text {
    text-shadow: #000 0px 0px 10px;
    text-align: center;
    padding:15px;
    color:#fff;
}

.centered-content {
    position:absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
}

.quick-link {
    position: fixed;
    left:0px;
    bottom:50%;
    margin-bottom:-52px;
    min-width: 140px;
    text-align: center;    
    font-family: 'Reenie Beanie', cursive;
    font-size: 30px;    
    z-index:3;
    color:#555;   
    transition:all ease .3s;  
}

.quick-link a {
    display: block;
    color:#555;
    padding:5px;
    background:#fff;
    box-shadow: 1px 1px 5px #888;
}

.quick-link a:first-child {
    margin-bottom: 10px;
}

.quick-link a::after {
    height: 0px;
}

.quick-link a:hover {
    color:#fff;
    text-decoration: none;
    background:goldenrod;
}
.quick-link a:focus {
    text-decoration: none;
}

#logo {
    position:fixed;
    top:15px;
    left:40px;
    background-image: url(../img/logo.png);
    background-size: cover;
    width:158px;
    height:40px;
    z-index:4;
}


/* menu button */


.menu-button {
    width:50px;
    position:fixed;
    top:10px;
    right:40px;
    cursor:pointer;
    z-index:4;
}
.menu-button .line {
    width: 100%;
    display: block;
    margin-top:10px;
    border-top:3px solid #555;
    transition:all ease .3s;
}
.menu-button:hover .line {
    border-color: #888;
}
.white-border {
    border-color:#fff !important;
}

.line1-animation {
    transform:rotate(45deg);
    margin-top:20px !important;
}

.line3-animation {
    transform:rotate(-45deg);
    margin-top:-3px !important;
}

/* menu */

#menu-overlay {
    position:fixed;
    top:0px;
    left:0px;
    right:0px;
    width:100%;
    height:70px;
    background:#fff;
    z-index: 3;
    box-shadow: 0 1px 5px #888;
    display: none;
}

#menu {
    position: fixed;
    top:50%;
    transform:translateY(-50%);
    right:18%;
    z-index:3;
    display:none;
    text-align: center;
    font-size: 45px;
    margin-top:.5em;
}
#menu a {
    display:block;
    font-family: 'Anton', sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 45px;
    color:#fff;
    margin-bottom:.5em;
    transition:all ease .3s;
    text-decoration:none;
    position:relative;
}

#menu a::after {
    content:"";
    position:absolute;
    bottom:-1px;
    left:0px;
    height:5px;
    width:100%;
    background-color:#fff;
    transform:scale(0);
    -webkit-transform:scale(0);
    transition:all .2s ease-in-out;
}
#menu a:hover:after {
    transform:scale(1);
    -webkit-transform:scale(1);
}





/* text */

.rough-bg {
    background-image: url(../img/bg-rough.png);
   
}


/* three-point */


.sand-bg {
    background-image: url(../img/sandpaper.png);
    border-top:1px solid #ccc;
    border-bottom:1px solid #ccc;
    box-shadow: inset 0 1px 0 #fff;
}

.three-point {
    text-align: center;
}

.image {
    width:100%;
}

.sand-bg h1 {
    margin-bottom:40px;
}

.button {
    display: block;
    text-align: center;
    font-family: 'Reenie Beanie', cursive;   
    font-size: 25px;
    border:1px solid #888;
    width:100%;
    background:rgba(0,0,0,0);
    height:45px;
    line-height:45px;
    text-decoration: none;
    color:#555;
    cursor:pointer;
    transition:all ease .3s;
}
.button:hover {
    border-color:goldenrod;
    background:goldenrod;
    color:#ddd;
    text-decoration: none;
}

/* clients-gallery */


#clients-gallery-outer {
    overflow: hidden;
    width:100%;
    position: relative;
    min-height:320px;    
}
#clients-gallery {
    padding:0;
    margin:0;  
    position:absolute;
    left:0;
    top:10px;
    transition:all ease .3s;
}
#clients-gallery li {
    list-style: none; 
    float:left;
    text-align: center;
    padding:30px;
    min-height:200px; 
}
#clients-gallery li .tab {
    padding:15px;
    transition:all ease .3s;
}

.client-pic {
    border-radius:100%;
    display:block;
    margin:0 auto;
    margin-bottom: 15px;
    border:2px solid #888;
}
#clients-gallery span {
    color: goldenrod;
    margin-top:15px;
    display:block;
}
.glyphicon-menu-left, .glyphicon-menu-right {
    font-size:20px;
    cursor: pointer;
    position:absolute;
    top:50%;   
    z-index:2;
}
.glyphicon-menu-left:hover, .glyphicon-menu-right:hover {
    text-shadow: 0 0 8px #888;
}
.glyphicon-menu-left {
    left:0;
}
.glyphicon-menu-right {
    right:0;
}


/* kontakt */

#kontakt , #contatto {
    border-top:1px solid #ccc;
    box-shadow: inset 0 1px 0 #fff;
}

#kontakt .nl-input, #contatto .nl-input {
    margin-bottom: 30px;
}
#kontakt label, #contatto label {
    line-height: 45px;
}


textarea:hover, 
input:hover, 
textarea:active, 
input:active, 
textarea:focus, 
input:focus,
button:hover
{
    outline: none;
    box-shadow:0 0 2px goldenrod !important;
    border:1px solid goldenrod !important;
}
button:focus,
button:active {
    outline: none;
    box-shadow:none!important;
    border:1px solid #888 !important;
}




/* imagePart/ textPart */

.imagePart , .textPart {
    height:500px;
    background-position: 50%;
}
.imagePart1 {
    background-image: url(../img/luxus.jpg);
}
.imagePart2 {
    background-image: url(../img/room2.jpg);
}


/* footer  */

.footer {
    padding-top:40px;
    padding-bottom:40px;
    line-height: 1.8em;    
}
.prefooter {
    line-height: 1.5em;
}
.prefooter a {
    color:#555;
}
.prefooter a::after {
    background:#555;
}

/* newsletter */

.nl-input {
    height:45px;
    line-height:45px;
    border-radius: 0px;
    background: transparent;
    border:1px solid #888;
}



.giveSpace {
    margin-bottom: 15px;
}



#intro a::after
{
    display:none;
}
#intro h1 {
    text-align: center;
}

.big-button {
    min-height:200px;
    min-width: 200px;
    background-color:#fff;
    line-height:200px;
    color:#555;
    text-align:center;
    margin-top:15px;
    box-shadow: 0 0 5px #888;
    transition:all ease .3s;
    font-size: 25px;
}
.big-button:hover {
    background-color: goldenrod;
    color:#fff;
    box-shadow: 0 0 8px #888;
}



@media all and (max-width:768px) {
    #clients-gallery li {
        width:255px;
    }
    #clients-gallery-outer {
        width:255px;
        margin:0 auto;
    }
    .sand-bg .col-sm-4 {
        margin-bottom: 70px;
    }
    .sand-bg .col-sm-4:last-child {
        margin-bottom: 0px;
    }
    .footer, .footer .text-right, .prefooter, .prefooter .text-right  {
        text-align: center;
        line-height: 1.8em;
    }
    .quick-link {
        bottom:40px;
        left:0px;
        width:100%;
    }
    .quick-link a {
        width:50%;        
        float: left;
    }
    h1 {
        font-size: 30px;
    }
    h3 {
        font-size: 20px;
    }
    .footer {
        padding-bottom: 80px;
    }
    .footer .nl-input {
        margin-bottom: 15px;
    }
    
}


@media all and (min-width:769px) {
    #clients-gallery li {
        width:388px;
    }
    .no-padding {
        padding:0px;
    }
    
}


@media all and (min-width:992px) {
    #clients-gallery li {
        width:332px;
    }
    
}


@media all and (min-width:1200px) {
    #clients-gallery li {
        width:390px;
    }
}


@media all and (max-width:1700px) {
    #menu  {
        right:14%;
    }
}

@media all and (max-width:1200px) {
    #menu  {
        right:10%;
    }
}


@media all and (max-width:992px) {
     #menu  {
        right:8%;
    }
    #menu a {
        font-size: 40px;
    }
}

@media all and (max-width:720px) {
    
    #menu a {
        font-size: 27px;
    }
    #languages {
        margin-left: 20px;
    }
}

@media all and (max-width:560px) {
    #menu  {
        right:6%;
    }
   
}

@media all and (max-width:420px) {
    #menu  {
        right:5%;
    }
    #menu a {
        font-size: 25px;
        margin-bottom: 1em;
    }
    #menu a::after {
        height:1px;
    }
    #logo {
        left:15px;
    }
    .menu-button {
        right:15px;
    }
    .glyphicon-menu-right {
        padding-right:5px;
    }
    .glyphicon-menu-left {
        padding-left:5px;
    }
    .pageTransform {
    transform: translateZ(0px) translateX(-40%) rotateY(40deg) ;
    webkit-transform: translateZ(0px) translateX(-40%) rotateY(40deg);
    moz-transform: translateZ(0px) translateX(-40%) rotateY(40deg);
    }
}