body { margin: 0px; 
       font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
/*       font-weight: 100;*/
       color: #fff;
       font-size: 20px;
       text-shadow: 1.5px 1.5px 1.5px #000;
       
      
}
body > div{
    display: -webkit-flex;
    display: flex;
     -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
/*    background: url('//tantalushomes.co.uk/images/Image_01c.3.jpg') no-repeat center center ;*/
    background: url('//tantalushomes.co.uk/images/Grosvenor-Court-55-1600-40p.jpg') no-repeat center center fixed ;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 100vh;
/*    background-attachment: scroll;    */
/*    background-position-x: 100%;
    background-position-y: 80%;
    -webkit-animation: zoomin 5s 1;
background-position: right 100px;*/
 width: 100%;
 height: 100%;
   
}

/*body > div:after{
   
    content:"";
    position: fixed;
    top: 0;
    height: 100vh;
    left: 0;
    right: 0;
    z-index: -1;
    background: url('//tantalushomes.co.uk/images/Image_01c.3.jpg') center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
   width: 100%;
 height: 100%;
}*/


/*@-webkit-keyframes zoomin {
   100% {
        -webkit-transform: scale(1);
    }
   0% {
        -webkit-transform: scale(0.8);
    }

}*/


a{
    text-decoration: none;
    color: #fff;
}
div.login a{
    color:#000;
}
h1{
    font-size: 1.5em;
    
}
h2{
    font-size:1em;
}
h3{
    text-align: center;
}
p{
/*    text-align:justify;*/
 }
.bullet1{
    text-align: center;
}

body > div > header,nav,main,aside,footer {
      border-radius: 0px; margin:0px; padding: 15px; border-style: solid; border-width: 0px; border-color: #fff; }
body > div > header { order: 1;  display: -webkit-flex; display: flex;-webkit-flex-flow: row nowrap; flex-flow: row nowrap;
 -webkit-flex: 0 1 100%; flex: 0 1 100%; background: #e4e4e4; height: 80px;  }
body > div > nav     { order: 2;  width: 125px;  -webkit-flex: 0 1 125px;flex: 0 1 125px; display: none; }
body > div > main { order: 3; min-width: 450px;  -webkit-flex: 1;flex: 1; padding: 0% 10% 0%; }
body > div > aside   { order: 4; width: 125px;  -webkit-flex: 0 1 125px;flex: 0 1 125px; display: none; }
body > footer { order: 5; display: -webkit-flex; display: flex; -webkit-flex: 0 1 100%; flex: 0 1 100%; -webkit-flex-flow: column nowrap; flex-flow: column nowrap;  color: #1b75bc; text-shadow:none; background: #e4e4e4; padding:2em; }
/* padding to flatspec ajax div */
body > div > main > div{ padding: 0.25% 0.5%; }
div#logo{
    text-shadow:none;
}
nav ul {
/*    display: flex;
    flex-flow:column nowrap;
    justify-content:flex-start;*/
  margin-right:  0px;
  padding:0px;
  list-style: none;
/*  position: fixed;*/
 
}
.nav button{
  display:block; 
  color: #fff; 
  text-decoration: none;
  font-size: 18px;
  position: relative;
/*  background: #e8f4ee;*/
/*  background: rgb(193,14,25);*/
/*  background: linear-gradient(#620713, #C10E25);*/
  
  background: #1b75bc; 
/*  background: -webkit-linear-gradient(#000046, #1b75bc);
  background: -moz-linear-gradient(#000046,#1b75bc);
  background: linear-gradient(#000046, #1b75bc);*/
  
  
/*  background:#FFF;*/
  margin:1px;
  padding:8px;
/*  -moz-border-radius:10px; 
  border-radius:12px; */
  min-width: 150px;
}
.nav button:hover {
/*background: #BCD2EE;*/
box-shadow: inset 0 0 0 5px #1b75bc;
background:#fff ;
border:rgb(66, 245, 69) 1px solid; 

color: #000000;
}
/* for floor plan submenu buttons*/
.nav ul {
  position: absolute;
  white-space: nowrap;
  z-index: 1;
  /* hides the ul nav off the page*/
  left: -99999em;
/*  background:#e8eef4;*/
}
.nav > li:hover > ul {
  left: 5%;
 
/*  position:relative;*/
/*  top:1px;*/
/*  min-width: 100%;*/
}
/*.nav > li li:hover > ul { 
  left: 100%;
  top: -1px;
}*/

/* END for floor plan submenu buttons*/

#img1{
  display: -webkit-flex;
  display: flex;
  min-height: 200px;
 
}
#projects{
          display: -webkit-flex;
          display: flex;
           -webkit-flex-flow:row wrap;
          flex-flow: row wrap;
          -webkit-justify-content:space-around;
          justify-content:space-around;
        }
        #projects h2{
            width: 100%;
            text-align: center;
        }
/* div#location{
            display: -webkit-flex;
            display: flex;
             -webkit-flex-flow: row wrap;
            flex-flow: row wrap;
   
            -webkit-justify-content:space-around;
            justify-content: space-around;
    
    
        }*/
        div#gal,.site{
            display: -webkit-flex;
            display: flex;
             -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
   
    -webkit-justify-content:space-around;
          justify-content:space-around;
    
    
        }
div.photos{
    display: -webkit-flex;
    display: flex;
     -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    text-align: center;
/*    width: 300px;*/
/*    height: 200px;*/

    
/*    width: 250px;
   height: 167px;*/
/*    margin:5%;*/
    margin:5px;
    border:1px solid ;
/*    -moz-box-shadow:5px 5px 2px #888;
    -webkit-box-shadow:5px 5px 2px #888;
    box-shadow:5px 5px 2px #888;*/

    
}
div.photos img{
    width: 300px;
    height: 200px;
/*    width: 400px;
    height: 267px;*/
/*width: 600px;
height: 400px;*/
/*display: -webkit-flex;
    display: flex;*/
}
/*Get images to enlarge */
div.photos img:hover { 
    z-index: 10;
   -webkit-transition: all 1000ms ease-in;
    -webkit-transform: scale(1.7);
    -ms-transition: all 1000ms ease-in;
    -ms-transform: scale(1.7);   
    -moz-transition: all 1000ms ease-in;
    -moz-transform: scale(1.7);
    transition: all 1000ms ease-in;
    transform: scale(1.7);

}
#location,#avail,#plans,#spec,#login,#key,#gal,#flatSpec{
    margin-top: -8000px;
  
        }
#home,#location,#avail,#plans,#spec,#key,#gal,#flatSpec{
   padding:3%;
   background-color: rgba(0,0,0,0.4);
   -moz-box-shadow:0px 0px 3px rgba(0,0,0,0.3);
-webkit-box-shadow:0px 0px 3px rgba(0,0,0,0.3);
box-shadow:0px 0px 3px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px; 
}
        .mittel{
              

            overflow: hidden;
        }
        /* Size of text under location photos*/
        .text{
            font-size: 14px;
            width: 250px;
        }   
div.plans{
    display: -webkit-flex;
    display: flex;
     -webkit-flex-flow: column nowrap;
    flex-flow: column nowrap;
    
/*    text-align: center;*/
   
/*    min-width: 150px;*/
/*    height: 130px;*/
    margin:5%;
    margin-bottom:15px;
    border:0px solid;
     
/*    -moz-box-shadow:15px 15px 10px #888;
    -webkit-box-shadow:15px 15px 10px #888;
    box-shadow:15px 15px 10px #888;*/

}
div.plans img{
    /* width: 100%; to get the image to shrink and enlarge in correct ratio*/
      width: 100%;
/*    Width of picture- don't forget to set same width in js responsive image map code']*/
     max-width: 479px;
/*      -webkit-flex: 0 1 100%;
     flex: 0 1 100%;*/
    
     border: solid #808080 5px;
     opacity: 0.9;
}

div.site{
/*    display: -webkit-flex;
    display: flex;
     -webkit-flex-flow: column nowrap;
    flex-flow: column nowrap;*/
    text-align: center;
    margin:5%;
    margin-bottom:15px;
    border:0px solid;
    opacity: 0.9;
    width: 100%;
   
}
/* get plans to zoom with mouse over*/
div.site img {
   
  
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
   
  
}
div.site:hover img {
  -moz-transform: scale(1.15);
  -webkit-transform: scale(1.15);
  transform: scale(1.15);
 
}
 

main ul{
    list-style-type: none;
    padding-left:1em;
}


main ul.btl {
/*    list-style: inside;
    list-style-type: disc;
    text-indent: -1em;
    padding-left: 1em;
padding-right: 1.28571429em;
text-indent: -1.28571429em;*/
padding-left: 40px;
list-style-position: outside;
list-style-type: disc;
 
}

aside ul{
    list-style-type: none;
    padding-left:0;
    
}
aside li{
     margin: 10px 0;
}
aside li.open{
    color: red;
}
ul span.tip {
        background-color: rgba(243,249,221, 0.8);
        border: 2px solid rgba(0,102,255,.5);
        border-radius: 10px;
        color: #620713;
        text-shadow:none;
        display: none;
        padding: 7px 7px 7px ;
        position: absolute;
        
    }

li:hover + span.tip {
    display: inline-block;
    margin: 0px 0 0 10px
}
#logo{
   display: -webkit-flex;
    display: flex;
     -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    align-content: space-between;
    margin-right: 30px;
}
#logo div{
    margin: 0 10px 0;
    
}
.gmap{
     display: -webkit-flex;
    display: flex;
     -webkit-flex-flow: column nowrap;
    flex-flow: column nowrap;
    
/*    align-content: space-around;*/

}
.gmap span{
    margin-top: 20px;
}

div#flatSpec{
    display: -webkit-flex;
    display: flex;
     -webkit-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -webkit-align-items:center;
    align-items: center;
    -webkit-justify-content:center;
    justify-content: center;
    
}
div#flatSpec div img {
    display: -webkit-flex;
    display: flex;
/*    -webkit-flex: 0 1 100%;
    flex: 0 1 100%;*/
/*    opacity: 0.8;*/
    border: black solid 2px;
    max-width:100%;
   

}

/* to style the large floor plan */
/*div#plans{
    display: -webkit-flex;
    display: flex;
}*/


/* to style the availability table */
#avail div{
    font-size: 14px;
}
#avail div table{
    width:100%; border-collapse:collapse;
    padding:8px;
/*    border:#999 1px solid;*/
/* last figure sets opacity of background so text is not effected */
/*    background:rgba(193, 14, 37, 0.7);*/
/*    opacity:0.7;*/
}
#avail div table td{
   padding:8px;
   border:#999 1px solid;
}
div#login form#loginform input{
width: 200px;
height: 25px;
padding: 3px;
background: #FFF;
border: 1px solid;
}
div#login form#loginform #loginbtn {
font-size:15px;
padding: 10px;
}
div#login form#loginform #loginbtn a{
    color: #000;
    text-decoration: none;
}
/*no text deoration on register interest button*/
/*a#ebtn{
    text-decoration: none;
    color: red;
}*/
blink {
    display: inline;
    text-justify: none;
    animation: blink 0.5s steps(1) 10;
    -webkit-animation: blink 0.5s steps(1) 10;
}
@keyframes blink { 50% { color: red; } }
@-webkit-keyframes blink { 50% { color: red; } }

/* page layout specification*/

#spec{
     display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap ;
    justify-content: flex-start;
    /* Stops images stretching*/
    align-items: flex-start;
    
}
#spec span.text1{
    width: 100%;
    text-align: left;
   
}
.pic{
    
    border: black solid 2px;
    width: 400px; 
    margin: 1%;
}

/*new specification pics/layout*/
.picy img{
    
    width: 750px;
}

/* make google map display properly*/
#map{
        position: relative;
        
        min-height: 400px;
            color: #000;
        text-shadow:none; 
    }
 
  /* background for ajax response text applicant*/
  .respond{
       background-color: rgba(0,0,0,0.3);
       padding: 3%;
       
  }
  /* terms box on register form*/
  #terms{
/*      text-decoration: none;*/
      color: #000;
      font-style: italic;
      text-justify: none;
      font-size: 14px;
  }

  /* Register form css*/
  aside form#signupform1{
      display: none;
  }  
form#signupform1 input,textarea{
width: 180px;
padding: 3px;
height: 25px;
font-size: 16px;
margin-top:7px;;
}
form#signupform1 textarea{
   height:  75px; 
   width: 190px;
   overflow-x: hidden;
   overflow-y: auto;
}
button#signupbtn1 {
font-size:18px;
padding: 5px;
position: absolute;
margin: 20px 25px 0px;

}
form#signupform1 a{
    text-decoration: none;
    color: #000;
}

span.source{
    font-size:10px;
}
span#homeP{
    margin-bottom: 10px;
    font-style: italic;
}
span.noMobile{
/*    display: none;*/
}
/*svg css */
/*stop plans overflowing on very large screens */
svg image{
    max-width: 825px;
}
/* mouse over on floor plans */
rect.pln{
            fill:#000;
            opacity: 0;
            transition: 0.6s opacity;
        }
     rect.pln:hover{
           fill:#000;
           opacity:0.4;
        } 
        rect.pln2{
           fill:#000;
            opacity:0.6;  
        }
         rect.pln2:hover{
           fill:#000;
            opacity:0.6;  
        }
/*Show flat pictures svg icons etc */
rect.kit{
            fill:#000;
            opacity: 1;
            transition: 0.6s opacity;
        }
        rect:hover{
           fill:#000;
            opacity:0.2;
        } 
        
circle.kit{
            fill:#000;
            opacity: 0.5;
            transition: 0.6s opacity;
        }
        circle.kit:hover{
           fill:#000;
            opacity:0.2;
        } 
        circle.kit1{
            
            opacity: 1;
            transition: 0.6s opacity;
        }
        circle.kit1:hover{
           
            opacity:0.2;
        }   
line{
/*            fill:#000;
            opacity: 1;*/
            transition: 0.6s opacity;
        }
        line:hover{
/*            fill:#000;*/
            opacity:0.2;
        }     
        
        
ul.share-buttons{
  list-style: none;
  padding: 0;
}

ul.share-buttons li{
  display: inline;
}

/*ul.share-buttons .sr-only{
  position: absolute;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}*/
 a.navLink{
        font-family: sans-serif;
        font-size: 14px;
        text-shadow:none;
/*        color: #1cb5e0;*/
        color:#1B75BC;
        padding: 1%;
        margin-top: 60px;
    }
    
    footer .btl2    {
        padding: 19px;
/*        margin: 0;*/

    }
    footer .divider{
        display: block;
        position: relative;
        content: "";
        bottom: 10px;
        width: 140px;
        height: 2px;
        left: 50%;
        -webkit-transform : translateX(-50%);
        transform: translateX(-50%);
        background: #1b75bc;
        box-shadow: 0 30px 0 #1b75bc;
    }
    
    /* position footer logos*/

html > body > footer > #htbLogo{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap ;
   
} 
footer > #htbLogo #htbBox{
    width: 300px;
    height: 150px;
}
footer > #htbLogo #seymoursBox{
    width: 400px;
    height: 150px;
}
    
   .ribbon-banner {
   display: block;
   position: absolute;
   top: 189px;
   left: -3px;
   width: 228px;
   height: 64px;
   line-height: 32px;
   text-align: center;
     opacity: 1;
   -webkit-transform: rotate(-45deg);
   -moz-transform:    rotate(-45deg);
   -ms-transform:     rotate(-45deg);
   transform:         rotate(-45deg);
   font-size: 24px;
/*   font-weight: 700;
   color: white;
   background-color: yellow;
   border: 1px solid white;
   z-index: 500;*/
    text-transform: uppercase;
    font-weight: bold;
    color: red;
    border: 6px double red;
    padding: 10px 7px;
    border-radius: 10px;
        
   }
   /* hide ribbon-banner*/
   .ribbon-banner {
    -moz-animation: cssAnimation 0s ease-in 7s forwards;
       -webkit-animation: cssAnimation 0s ease-in 7s forwards;
        -o-animation: cssAnimation 0s ease-in 7s forwards;
      animation: cssAnimation 0s ease-in 7s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
div#home1 h1,h2{
/*     -moz-animation: cssAnimation 2s ease-in 5s forwards;
       -webkit-animation: cssAnimation 2s ease-in 5s forwards;
        -o-animation: cssAnimation 2s ease-in 5s forwards;
      animation: cssAnimation 2s ease-in 5s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;*/
}

@keyframes cssAnimation {
    to {
        width:0;
        height:0;
        overflow:hidden;
        border:0;
    }
}
@-webkit-keyframes cssAnimation {
    to {
        width:0;
        height:0;
        visibility:hidden;
      
    }
}
/*slideshow CSS */
/*#slideshow {
  overflow: hidden;
  height: 510px;
  width: 728px;
width: 750px;
  margin: 0 auto;
}

.slide-wrapper {
  width: 3750px;
  -webkit-animation: slide 18s ease infinite;
}

.slide {
  float: left;
  height: 510px;
  width: 728px;
width: 750px;
}

.slide:nth-child(1) {
  background: #D93B65;
}

.slide:nth-child(2) {
  background: #037E8C;
}

.slide:nth-child(3) {
  background: #36BF66;
}

.slide:nth-child(4) {
  background: #D9D055;
}

.slide-number {
  color: #000;
  text-align: center;
  font-size: 10em;
}

@-webkit-keyframes slide {
  20% {margin-left: 0px;}
  30% {margin-left: -728px;}
  50% {margin-left: -728px;}
  60% {margin-left: -1456px;}
  70% {margin-left: -1456px;}
  80% {margin-left: -2184px;}
  90% {margin-left: -2184px;}
  20% {margin-left: 0px;}
  30% {margin-left: -750px;}
  50% {margin-left: -750px;}
  60% {margin-left: -1500px;}
  70% {margin-left: -1500px;}
  80% {margin-left: -2250px;}
  90% {margin-left: -2250px;}
}*/
/* specification re-style*/

header >img{
   position: relative;
    margin-left: 10px;
    align-self: flex-end;
}
#home1 >  #htbBox1{
    width: 134px;
    height: 150px;
    float: right;
}