﻿/*body, h1, h2, h3, h4, h5, h6 {
    font-family: "Lato", sans-serif;
}*/

body, html {
    height: 100%;
    color: #777;
    line-height: 1.8;
}

html, body {
    font-family: Verdana,sans-serif;
    font-size: 15px;
    line-height: 1.5
}

html {
    overflow-x: hidden
}

/* Create a Parallax Effect */
.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5, .bgimg-6, .bgimg-7, .bgimg-8 {
    opacity: 0.7;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* First image (Logo. Full height) */
.bgimg-1 {
    background-image: url('../images/office-opt.jpg');
    min-height: 100%;
}

/* Second image (Portfolio) */
.bgimg-2 {
    background-image: url('../images/woodenblinds.jpeg');
    min-height: 400px;
}

/* Third image (Contact) */
.bgimg-3 {
    background-image: url('../images/rollerblinds.jpeg');
    min-height: 400px;
    /*background-size: 100%;*/
}
.bgimg-4 {
    background-image: url('../images/office2-opt.jpg');
    min-height: 400px;
}
.bgimg-5 {
    min-height: 400px;
    background-image: url('../images/school-header-img.png');
}
.bgimg-6 {
    min-height: 400px;
    background-image: url('../images/awnings-filtered.png');
    background-repeat: no-repeat;
    /*background-size: 100%;*/
}
.bgimg-7 {
    min-height: 400px;
    background-image: url('../images/BackMain-opt.jpg');
}
.bgimg-8 {
    min-height: 400px;
    background-image: url('../images/BackMain-opt.jpg');
}


.w3-wide {
    letter-spacing: 10px;
}

.w3-hover-opacity {
    cursor: pointer;
}

.inner-div {
    margin: auto;
    width: 100px;
    height: 100px;
}


#googleMap {
    width: 100%;
    height: 400px;
    -webkit-filter: grayscale(90%);
    filter: grayscale(90%);
}

/* Turn off parallax scrolling for tablets and mobiles */
@media only screen and (max-width: 1024px) {
    .bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5, .bgimg-6, .bgimg-7, .bgimg-8 {
        background-attachment: scroll;
    }
    .no-mobile {
        display: none;
        
    }
}

/* Navbar

    /* Dropdown Button */

.dropbtn {
    background: none;
    color: #3a3a3a;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    min-width: 160px;
}

    .dropbtn:hover {
        background-color: black;
        /*border-bottom: 3px solid transparent;
                -webkit-transition: border-bottom .3s;
                transition: border-bottom .3s;*/
    }

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
    min-width: 160px;
}

.dropdown1 {
    position: relative;
    display: inline-block;
    width: 100%;
    background-color: white;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    background-color: dimgray;
}

    /* Links inside the dropdown */
    .dropdown-content a {
        color: white;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

        /* Change color of dropdown links on hover */
        .dropdown-content a:hover {
            background-color: rgba(0,0,0,0.2);
        }

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
    width: 100%;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #f1f1f1;
}

#telno {
    float: right;
    padding-right: 30px;
    padding-top:20px;
    font-size: 14px;
}

    #telno span {
        font-size: 16px;
        font-weight: bold;
    }

a {
    text-decoration: none;
    text-align: center;
}
.headl {
    width: auto;
    
}
.filler{

    height: 60px;
}

.filler2 {
    height: 80px;
}


h1 {
    font-size: 48px;
    font-weight:bolder;
}

h2 {
    font-size: 30px
}

h3 {
    font-size: 24px;
    
}

h4 {
    font-size: 20px
}

h5 {
    font-size: 18px
}

h6 {
    font-size: 16px
}

.w3-serif {
    font-family: "Times New Roman",Times,serif
}



.w3-wide {
    letter-spacing: 4px
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    font-weight: inherit
}

hr {
    height: 0;
    border: 0;
    border-top: 1px solid #eee;
    margin: 20px 0
}

.bulleted {
    list-style-position: inside;
}
.white{
    color:white;
}

@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5){

  html,
  body{
    width:100%;
    overflow-x:hidden;
  }

}
