/* Custom made stylesheet for Hotel Hospitality.
Stylesheet was created by KB-Webdevelopment. */


/* Styling for Body */
html, body{
  width:100%;
  font-family: 'Titillium Web', sans-serif;
}
/* HeadLogo Container */
.headLogo{
}

.headLogo, img {
  height:18em;
  margin: 0 auto;
  display: block;
}

@media screen and (max-width:  300px) {
  .headLogo, img {
    height:auto;
    width:15em;
  }
}

@media screen and (max-width:  375px) {
  .headLogo {
text-align: center;
padding-left:0;
  }
}

p {
  font-size:1.2em;
}

@media screen and (max-width:  375px) {
  p {
    font-size:2em;
  }

  h3 {
    font-size:3em!important;
  }
}

li {
  list-style-type: none;
}

.fa-plus-circle {
  color:rgba(160,196,9,1);
}

/* Navigation Bar */
.navbar-default{
    border-top:none!important;
    border-bottom:none!important;
    box-shadow: none!important;
    border-radius: 0!important;
    background-image: none!important;
    background-color:rgba(255,255,255,1);
    margin-top:0;
    margin-bottom:1em;
}

.navbar-nav {
  /*  position: absolute;*/
    width: 100%;
    left: 0;
    text-align: center;
    margin:0 auto;
}

.navbar-nav li{
    font-size: 1.5em;
    float:none;
    display:inline-block;
    /**display:inline;  ie7 fix */
    /**zoom:1; /* hasLayout ie7 trigger */
    vertical-align: top;
}

.navbar-nav li a{
  color:#518ec7!important;
}

.navbar-nav li a:hover{
  color:#e3af37!important;
}
/*.navbar-nav a:hover::after{
 content:"";
 /*position:absolute;*/
 left:20%;
 right:25%;
 bottom:0;
 /*border:1px solid #e3af37!important;*/
/*}*/

.dropdown-menu {
margin-top:0.8em;
}

@media screen and (max-width:  375px) {
  .nav-wrapper, .navbar-collapse {
    width: 100%;
  /*  height: 3em;*/
  }
}

/* Navigation bar fixed to top after scrolling */
.affix {
    margin-top:0;
    margin-bottom:1em;
    top: 0;
    width: 100%;
    background-color:#fff;
    z-index:150;
    text-decoration: none!important;
}


.nav-wrapper {
  min-height:3.5em;
}

/* Container head text */
.name {
  margin-top:2em;
  padding-bottom:1em;
  margin-bottom:1em;
  height:7em;
  font-family:;
  text-align: center;
  color:#bbb!important;
  border-bottom:1px solid #ccc;
}

.name, h1 {
  color:#e3af37;
}

/* First div  */
.firstDiv {
  background-repeat:none;
  background-size:cover;
  width:70%;
  height:auto;
  min-height: 50em;
  margin-bottom:2.5em;
  margin-bottom:10em;
}

.firstDivFirst {
  height:100%;
  background-image:linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)), url("../image/DSC_6777k.jpg");
}

.firstDivSecond {
  height:100%;
  background-image:linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)), url("../image/conservatorium.jpeg");
}

.introText{
  background:rgba(255,255,255, 0.9);
  height:90%;
  margin-top:2em;
  margin-bottom:2em;
  margin-right:0em;
}

.introHead{

}

.introHeadText{
  margin-top:3em;
  background-color:#518ec7!important;
  text-align: center;
  opacity:1!important;
}

.introHeadText h3 {
  color:#fff!important;
  font-size:1.5em;
}

.introInner {
  padding:2.5em;
  padding-top:3em;
  margin-top:2em;
}

@media screen and (max-width:  375px) {
  .introInner {
    padding:1em;
  }
}

/*.list {
  margin-left: 6em;
}
@media screen and (max-width:  375px) {
  .list {
    margin-left:25%;
  }
}
@media screen and (max-width:  470px) {
  .list {
    margin-left:0;
  }
}*/


/* Scale for devices 960 */


/* Second div */
.secondDiv {
  background-repeat:none;
  background-size:cover;
  width:70%;
  height:auto;
  margin-bottom:2.5em;
  background-image:linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)), url("../image/pexels-photo-299550.jpeg");
  margin-bottom:10em;
}

.secondDiv img{
  width:90em;
}

/* Third div */
.thirdDiv {
  background-repeat:none;
  background-size:cover;
  width:70%;
  height:auto;
  margin-bottom:2.5em;
  background-image:linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)), url("../image/pexels-photo-40120.jpeg");
  margin-bottom:10em;
}

.thirdDiv img{
  width:90em;
    max-width: 3em;
    max-height: 3em;
}


/* Fifth div */

.fifthDiv {
  background-repeat:none;
  background-size:cover;
  width:70%;
  height:auto;
  margin-bottom:2.5em;
  background-image:linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)), url("../image/pexels-photo-31161.jpg");
  margin-bottom:10em;
  text-align: center;
}

.fifthDiv img {
  max-width:30%;
  height:auto;
  display: inline;
}

.fifthDiv .cons {
  padding-left:10%;
  max-width:45%;
}

.fifthDiv .vdvalk {
  max-width:25%;
}


/* Fourth div */
.fourthDiv {
  background-repeat:none;
  background-size:cover;
  width:70%;
  height:auto;
  margin-bottom:2.5em;
  background-image:linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)), url("../image/pexels-photo.jpg");
  margin-bottom:10em;
  object-fit: scale-down;
}

.fourthDiv img{
  width:90em;
}

@media screen and (max-width:  960px) {
  .firstDiv, .secondDiv, .thirdDiv, .fourthDiv, .fifthDiv {
    width:100%;
  }
}
/* Contact form */


.contactInner {
  margin:0 auto;
  text-align:center;
}

.contact-name {
  background-color:#5bacc1!important;
  height:2.5em;
  text-align: center;
  opacity:1!important;
}

.contact-name h3 {

  color:#fff!important;
  font-size:1.5em;
  padding-top:0.25em;
}

.contact-mail {
  background-color:#5bacc1!important;
  height:2.5em;

  opacity:1!important;
}

.contact-mail h3 {

  color:#fff!important;
  font-size:1.5em;
  padding-top:0.25em;
}

.contact-message {
  background-color:#5bacc1!important;
  height:2.5em;
  opacity:1!important;
}

.contact-message h3 {

  color:#fff!important;
  font-size:1.5em;
  padding-top:0.25em;
}

.submit {
  background-color:#5bacc1!important;
  height:2em;
  opacity:1!important;
}

input {
  width: 100%;
  height:2.5em;
  border:none;
  outline:none;
  background:rgba(200,200,200,0.4);
}

input:focus, input:active, textarea:focus, textarea:active {
  border:2px solid #5bacc1;
}

textarea {
  width: 100%;
  height:8em;
  border:none;
  resize: none;
  background:rgba(200,200,200,0.4);
  outline:none;
}
input[type=submit] {
  font-size: 2em;
  background:#eee;
  outline:0;
}
input[type=submit]:hover {
  background:#ddd;
}
@media screen and (max-width:  375px) {
.fourthDiv {
  margin-bottom:2.3em;
}
}

@media screen and (max-width:  375px) {
  .contactInner {
    padding: 0;
    margin-left: 1em;
    padding-right: 2em;
    height: auto;
    text-align: center;
    width: 100%;
  }

  .contactInner h3 {
    font-size:2em!important;
  }

  .contact-name, .contact-mail, .contact-message, input {
    width:100%;
    height:3.5em;
    padding:0;
    margin:0;
  }

  textarea {
    height:12em;
  }
}

.contactError {
  color:rgba(200,20,20,1);
}

.succes {
  color:rgba(40,200,40,1);
}


/* footer  */
.footer {
  background-color:#fff;
  height:1em;
  z-index: 150;
  width:100%;
}

.row-footer {
  height:3em;
  padding-top:0.5em!important;
  margin-top:0!important;
}

.row-footer a {
  text-decoration: none;
}

.center {
  padding-top:0.6em;
  color:#999;
  height:1em;
  text-align:center;
  text-decoration: none!important;
}
.right{
  color:#999;
  height:1em;
  float:right;
  text-decoration: none!important;
  width:auto;
}
.left{
  color:#cccccc;
  height:1em;
  float:left;
  text-decoration: none!important;
  width:auto;
}

@media screen and (max-width:  630px) {
.footer .left p, .footer .right p {
  font-size: 0.9em !important;
}

.fa-facebook-square:hover{
  color:#e3af37!important;
}
.fa-twitter-square:hover{
  color:#e3af37!important;
}
.fa-linkedin-square:hover{
  color:#e3af37!important;
}

@media screen and (max-width:  375px) {
.footer {
  margin:0 auto;
  padding:0;
}

.row-footer {
  width:100%;
  height:auto;
  margin:0 auto;
  padding: 0;
}

.left, .right, .center, {
  width:70%;
  padding-left:0;
  margin:0 auto;
}


.left, .right, .center{
  margin-top:1.4em;
  font-size: 0.9em;
  text-align: center;
}

.row-footer p{
  font-size: 0.9em;
}

}