div {border:0px solid red;}
div.container {border:0px solid green;}

  
    .jumbotron {
    margin-top:2px;
    margin-bottom:0;
    padding: 0px;
    height:100%;
    min-width:100%;
    position:relative;           
    background-color:#e7cfc8;
    font-size:60px;
    font-family: Rouge Script,cursive;
    font-weight: 400;
    font-style: normal;
    color: white;    
    }
    .jumbotron p {
    margin-top: 15px;    
    margin-bottom: 0px;
    }
    h2{
    font-size: 60px;
    margin-bottom: 0px;
    }
    .container-fluid {
    padding-right:10px;
    padding-left:10px;
    }
    .container text-center{
    font-size:60px;
    
    }
    .navbar-light .navbar-nav .nav-link {
    color:#17a2b8;
    }
    .navbar-brand{
    padding-top:18px;
    padding-left: 5%;
    }
    .navbar-toggler{
    border:0px;
    }
    #navbarSupportedContent{
    padding-top: inherit;
    padding-left: 35%;
    padding-bottom: inherit;
    padding-right: 1.5%;
    }
    .dropdown-menu.show {
    background-color: #e7cfc8;
    padding-right: 40%;
    float:left;
    }
    
    #contact{
    list-style-type: none;
    float:right;
    }
    
    .col-sm-3 {
    box-sizing: border-box;
    padding: 10px 1.5% 10px 1.5%;
    }
    #logo img {
    max-width: 95%;
    float:left;
    padding-left: 25px;
    padding-top: 50px;
    }
    .img-thumbnail {
    align-content: center;
    vertical-align: middle;
    padding: 0px;
    background-color: transparent;
    border:0px;
    }
    #button{
    display:none;
    }

    #okanagan {
    padding: 10px 2% 10px 2%;
    border-radius: 1px;
    float:none;
    overflow: auto;
    background-color: transparent;
    }
    #laptop{
    padding: 25px 2%;
    border-radius: 1px;
    float:none;
    overflow: auto;
    background-color: transparent; 
    }

    #laptop2{
    padding: 25px 8%;
    border-radius: 1px;
    float:none;
    overflow: auto;
    background-color: transparent; 
    }
    #note2 {
    background-color: #e7cfc8;
    padding-left: 5%;
    padding-right: 0px;
    padding-top: 25px;
    }
    .col-sm-6{
    float: none;
    font-family: Raleway,sans-serif;
    font-size: 18px;
    font-weight: 400;
    padding: 24px 10%;
    box-sizing: border-box;
    }
    #puppy{
    padding: 130px 10% 120px 5%;
    box-sizing: border-box;
    
    }
    #pieces{
    padding-top:120px;
    }
    #engine{
    padding: 25px 4%;
    border-radius: 1px;
    float:none;
    overflow: auto;
    background-color: transparent; 
    }
    #main {
    font-family: Raleway,sans-serif;
    font-size: 20px;
    font-weight: 400;
    box-sizing: border-box;
    padding: 35px 3% 27px 3%;
    }
    #develop{
    padding-left: 6%;
    padding-right: 2%;
    padding-bottom: 10px;
    padding-top: 5px;    
    text-align: center;
    }
    #develop h1{
    font-size: 28px;
    }
    #asset h1{
    padding-bottom: 15px;
    }
    body {
    background-color: #e7cfc8;
    align-content: center;
    }
    #difference{
    padding-left: 28%;
    padding-right: 2%;
    padding-bottom: 5px;
    padding-top: 15px;    
    text-align: center;
    }
    hr{
    height:10px;
    background-color: #e8aca0;
    
    }
    #goals {
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px;
    box-sizing: border-box;
    background-color: #e8aca0;
    }
    #contact2 {
    padding-bottom: 10px;
    }
    #photo {
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px;
    box-sizing: border-box;
    background-color: #e8aca0;
    padding-top: 10px;
    }
    .col-sm-12{
    float: none;   
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px;
    box-sizing: border-box;
    background-color: #e8aca0;
    }
    #presence{
    text-align: center;
    padding:10px 2%;
    }
    #impression{
    padding-top: 10px;
    }
    #triple{
    padding-top: 30px;
    padding-left: 3%;
    }
    #response{
    padding-top: 30px;
    }
    #business p{
    font-family: Raleway,sans-serif;
    font-size: 18px;
    font-weight: 400;
    }
    #logo2 {
    max-width: 50%;
    align-content:center;
    padding:60px 5%;
    }
    .col-sm-7 {
    padding: 20px 5% 20px 5%;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px;
    box-sizing: border-box;
    background-color: #e7cfc8;
    }
    #video {
    padding-top: 45px;
    }
    #gallery{
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 8px;
    padding-top: 15px;    
    text-align: center;
    }
    #photogallery{
    font-family: Raleway,sans-serif;
    }
    #notes{
    padding-top: 5px;
    padding-bottom: 5px;
    }

/* ---- grid ---- */

.grid {
    box-sizing:inherit;
  background: #e8aca0;
    padding-left: 10%;
}
.row {
    display: -ms-flexbox;
    align-content: center;
    -ms-flex-wrap: nowrap;
    }
/* clearfix */
    .grid:after {
  content: '';
  display: block;
  clear: both;   
    }

/* ---- grid-item ---- */

    .grid-item {
  width: 200px;
  height: 120px;
  float: left;
  background: #e7cfc8;
   /* vertical gutter */
  margin-bottom: 20px;
  border: 10px solid #fff;
  border-color: #fff(0, 0%, 0%, 0.5);
  border-radius: 10px;
  font-family: Raleway,sans-serif;  
    }

    .grid-item--width2 { width: 320px; }
    .grid-item--width3 { width: 480px; }
    .grid-item--width4 { width: 640px; }

    .grid-item--height2 { height: 200px; }
    .grid-item--height3 { height: 260px; }
    .grid-item--height4 { height: 360px; }


    #asset{
    padding-top: 20px;
    padding-left: 0px;
    padding-right: 0px;
    }
    #project{
    padding-left: 10%;
    
    }

    #left {
    background-color: #e7cfc8;
    padding: 14px 5% 14px 5%;
    overflow: auto;  
    }
   
    #business-img{
    padding-top:20px;
    }

    #footer{
    clear: both;
    padding-top: 15px;  
    }
    #footer p{
    text-align: center;   
    font-size: small;   
    }
    .col-sm-5{
    float: none;
    align-content: center;
    font-family: Raleway,sans-serif;
    font-size: 18px;
    font-weight: 400;
    padding: 20px;
    box-sizing: border-box;
    }
    #section-one{
    padding-top:24px; 
    }
    #address {
    padding-top: 35px;
    padding-bottom: 80px;   
    }
    #phone{
    padding:15px 1%;
    }
    .col-sm-4{
    padding-top:25px;
    font-family: Raleway,sans-serif;
    font-size: 18px;
    font-weight: 400;    
    }   
    #business{
    font-family: Raleway,sans-serif;
    font-size: 30px;
    font-weight: 400;
    }
    #facebook{
    font-size: 30px;
    color: #3B5998;
    }
    #google {
    padding: 10px; 
    }
    .gsc-control-cse {
    background-color: #e7cfc8;
    }
    #media {
    font-size: 30px;
    padding-left: 35%;
    padding-right: 30%;    
    align-content: center;
    
    }
    #facebook2{
    font-size: 30px;
    padding-left: 35%;
    padding-right: 30%;    
    align-content: center;
    }
    #ending{
    padding:0px;
    
    }
    #copyright{
    background-color: #e8aca0;
    box-sizing: border-box;
    padding: 6px 30% 4px 40%; 
    }
@media screen and (max-width:425px){
    
    .row {
    display: -ms-flexbox;
    align-content: center;
    -ms-flex-wrap: nowrap;
    }
    .jumbotron{
    font-size:2.5rem;
    padding: 0px;
    }
    .jumbotron p {
    margin-top: 15px;    
    margin-bottom: 15px;
    font-size:28px;
    font-weight: 400;
    }
    .jumbotron h1{
    font-size: 30px;
    }
    h2{
    font-size: 28px;
    }
   .col-sm-3 {
    width: 30%;
    padding-top:0px;
    padding-bottom: 0px;
    }

    #logo img {
    max-width: 80%;
    align-content: center;
    vertical-align: middle;
    padding-top: 15px;
    }
    .img-thumbnail {
    align-content: center;
    vertical-align: middle;
    padding-bottom: 15px;
    background-color: transparent;
    border:0px;
    }
    .navbar{
    padding-top:0px;
    padding-bottom: 0px;
    }
    #button{
    display:flow-root;
    text-align: center;
    color: white;
    padding-top:2px;
    padding-left:25%;
    padding-right:25%;
    border:none;
    } 
    #main {
    font-family: Raleway,sans-serif;
    font-size: 12px;
    font-weight: 400;
    box-sizing: border-box;
    padding: 10px 8% 10px 8%;
    }
    #main h1{
        font-size:1.5rem;
    padding:3px 3%;
    }
    #develop{
    padding-left: 4%;
    padding-right: 4%;
    padding-bottom: 8px;
    padding-top: 5px;    
    text-align: center;
    }
    .col-sm-12{
    align-content: center;
    width:100%;
    }
    #gallery{
    padding-left: 2%;
    padding-right: 3%;
    padding-bottom: 8px;
    padding-top: 15px;    
    text-align: center;
    }
    #asset h1{
    font-size: 24px;
    text-align: center;
    padding-bottom: 1rem;
    padding-left: 2%;
    padding-right: 2%;
    }
    #facebook3{
    padding-top: 10px;
    padding-left:39%;
    font-size: 28px
    }
    #develop h1{
    font-size: 20px;
    }
    #presence h1{
    font-size: 28px;   
    }
    .container text-center{
    padding: 20px 5%;     
    }
    #difference {
    padding-left:4%;
    }
    #difference h1{
    font-size: 25px;
    }
    #section-one{
    padding-top:24px;
    }
    #note2{
    padding-left: 20%;
    padding-right: 0px;
    padding-top: 25px;
    } 
    #pieces{
    padding-top:60px;
    padding-bottom: 35px;
    padding-left: 50px;
    }
    .col-sm-5{
    float: none;
    align-content: center;
    font-family: Raleway, sans-serif;
    font-size: 12px;
    font-weight: 400;
    padding-top: 20px;
    box-sizing: border-box;
    }
    .col-sm-7 {
    padding-top:10px;
    }
    #puppy{
    width:100%;
    padding: 20px 5% 20px 22%;
    box-sizing: border-box;
    }
   
    #left {
    list-style-type: none;
    }
    .col-sm-4{
    font-family: Raleway,sans-serif;
    font-size: 14px;
    font-weight: 400;    
    }
    #business{
    font-family: Raleway,sans-serif;
    font-size: 12px;
    font-weight: 400;
    }
    #info {
    padding-top:50px;
    padding-bottom: 2px;
    padding-left: 18%;
    padding-right: 15%;
    }
    #footer{
    clear: both;
    padding-top: 15px;
    box-sizing: inherit;
    }
    #footer p{
    text-align: center;   
    font-size: x-small;   
    }
    #address {
    padding-top: 20px;
    padding-bottom: 40px;
    padding-right: 2%;
    font-size: 14px;
    }
    #connect {
    padding-left:30%;
    padding-right: 5%;
    width:auto;
    font-size:16px;
    }
    #google {
    padding: 10px 15%; 
    }
    
    .grid {
    box-sizing:inherit;
    background: #e8aca0;
        padding-left: 3%;
    }
    .grid-item {
        align-content: center;   
    border-color: #fff;
    margin-bottom: auto;
    }
    .grid-item--width2 { width:300px;
    float:none;
       }
    .grid-item--width3 { width: 400px;

        }
    .grid-item--width4 { width: 400px;
         }

    .grid-item--height2 { height: 200px;
         }
    .grid-item--height3 { height: 260px;
        }
    .grid-item--height4 { height: 300px;
         }

    figure{
    align-content: center;
    margin:0px;   
    }
    #gmap {
    padding-top:20px;
    padding-bottom:15px;
    padding-left:2%;
    padding-right:0px; 
    }
    #map {
    padding-top:20px;
    padding-bottom:15px;
    padding-left:1%;
    padding-right:0px; 
    }
    #media {
    padding-left:44%;
    padding-right:10%;
    }
    #facebook2{
    padding-left:42%;
    padding-right:10%;    
    }
    #copyright{
    padding-left:33%;
    padding-right: 15%;
    font-size: 12px;    
    }
    
}
                    
@media(min-width:576px){
    .row {
    display: -ms-flexbox;
    align-content: center;
    -ms-flex-wrap: nowrap;
    }
    .jumbotron h1{
    font-size:50px;
    padding-left: 16%;
    }
    .jumbotron p {
    margin-top: 0px;    
    margin-bottom: 0px;
    font-size:45px;
    font-weight: 400;
    }
    #main {
    font-family: Raleway,sans-serif;
    font-size: 16px;
    font-weight: 400;
    box-sizing: border-box;
    padding: 15px 2% 10px 3%;
    }
    #main h1{
    padding:3px 10%;text-align: center;
    }
    #logo img {
    max-width: 80%;
    align-content: center;
    vertical-align: middle;
    padding: 20px 2%;
    }
    #summary p{
    font-size: 14px;     
    }
    #phone{
    padding:65px 1%;
    }
    #facebook{
    padding-left: 3%;  
        
    }
    #business p{
    font-family: Raleway,sans-serif;
    font-size: 12px;
    font-weight: 400;
    }
    #business img{
    padding-top:20px;
    }
    .col-sm-4{
    width:auto;
    }
    .container text-center{
    font-size:40px;
    padding-top:20px;            
    }

    #button{
    display:flow-root;
    align-self: center;
    color: white;
    padding-top:10px;
    padding-left:10%;
    padding-right:10%;
    border:none;
    } 
    .col-sm-5{
    float: none;
    align-content: center;
    font-family: Raleway, sans-serif;
    font-size: 18px;
    font-weight: 400;
    padding: 20px 5%;
    box-sizing: border-box;
    }
    #presence h1{
    font-size: 28px;   
    }
    .col-sm-6{
    float: none;
    font-family: Raleway, sans-serif;
    font-size: 18px;
    font-weight: 400;
    padding: 15px 2%;
    box-sizing: border-box;
    }
    #laptop2 {
    padding: 40px 3%;
    border-radius: 1px;
    float:none;
    overflow: auto;
    background-color: transparent; 
    }
    #puppy{
    width:100%;
    padding: 20px 5% 20px 10%;
    box-sizing: border-box;
    }
    #triple{
    padding-top: 40px;
    }
    #engine{
    padding: 25px 2%;
    border-radius: 1px;
    float:none;
    overflow: auto;
    background-color: transparent; 
    }
    #difference{
    padding-left: 10%;
    padding-right: 2%;
    padding-bottom: 5px;
    padding-top: 15px;    
    text-align: center;
    }
    #aspect{
     font-size: 1rem;   
    }
    #unsplash{
    padding-top:80px;    
        
    }
    .grid-item--width2 { width: 320px; }
    .grid-item--width3 { width: 480px; }
    .grid-item--width4 { width: 640px; }

    .grid-item--height2 { height: 200px; }
    .grid-item--height3 { height: 260px; }
    .grid-item--height4 { height: 360px; }

    #asset{
    padding-top: 20px;
    padding-left: 0px;
    padding-right: 2%;
    }
    #asset h1{
    font-size: 28px;
    }
    #pieces{
    padding-top:80px;
    }
    #info {
    padding-top:100px;
    padding-bottom: 35px;      
    }
    #address {
    padding-top: 35px;
    padding-bottom: 80px;
    }
    #map {
    padding-top:40px;
    padding-bottom:15px;   
    }
    #facebook3{
    padding-left: 42%;
        font-size:24px;
    }
    #connect {
    padding-top: 38px;
    padding-left:5%;
    padding-right: 5%;
    width:auto;
    font-size:15px;
    }
    h2{
    font-size: 45px;   
    }
    #base p{
    margin-top:15px;
    margin-bottom: 15px;
    font-size:45px;
    }
    #base h2{
    margin-top: 15px;    
    }
    #copyright{
    padding-left:40%;
    padding-right:25%;
    font-size: 12px;    
    }
    
}

@media(min-width:992px){
    .row {
    display: -ms-flexbox;
    align-content: center;
    -ms-flex-wrap: nowrap;
    }
    .col-sm-3 {
    box-sizing: border-box;
    }
    #logo img {
    align-content: center;
    vertical-align: middle;
    max-width: 80%;
    padding-top: 25px;
    padding-bottom: 20px;
    }
    .jumbotron{
    padding: 0px;
    }
    .jumbotron h1{
    font-size: 60px;
    }
    .jumbotron p {
    margin-top: 0px;    
    margin-bottom: 0px;
    font-size:60px;
    font-weight: 400;
    }
    h2{
    font-size: 60px;
    }
    #base p{
    font-size:60px;
    }
    #navbarSupportedContent{
    padding-top: inherit;
    padding-left: 28%;
    padding-bottom: inherit;
    padding-right: 1.5%;
    
    }
    .btn-info {
    display:none;
    color: white;
    padding-left:15%;
    padding-right:15%;
    border:none;
    }
    
    #main {
    font-family: Raleway,sans-serif;
    font-size: 20px;
    font-weight: 400;
    box-sizing: border-box;
    padding: 15px 5% 10px 5%;
    }
    #main h1{
    padding:3px 10%;
    }
    
    #logo2 {
    max-width: 50%;
    padding:80px 5%;
    }
    #section-one{
    padding-top:24px;
    font-size: 19px;
    }
    #develop{
    padding-left: 4%;
    padding-right: 4%;
    padding-bottom: 8px;
    padding-top: 5px;    
    text-align: left;
    }
    .col-sm-5 {
    float: none;
    font-family: Raleway, sans-serif;
    font-size: 20px;
    font-weight: 400;
    padding-top: 24px;
    padding-left:2%;
    padding-right:2%;
    box-sizing: border-box;
    }
    #summary p{
    font-size: 14px;
    padding-top: 35px;    
    }
    .col-sm-6 {
    float: none;
    font-family: Raleway, sans-serif;
    font-size: 18px;
    font-weight: 400;
    padding: 45px 5%;
    box-sizing: border-box;
    }
    #puppy{
    width:100%;
    padding: 20px 5% 20px 15%;
    box-sizing: border-box;
    }
    #triple{
    padding-top: 20px;
    padding-left: 3%;
    padding-bottom: 15px;
    }
    #facebook{
    padding-left:10%;
    padding-right:10%       
    }
    #laptop {
    padding-top: 40px;
    padding-left: 12%;
    border-radius: 1px;
    float:none;
    overflow: auto;
    background-color: transparent; 
    }
    #laptop2 {
    padding: 40px 8%;
    border-radius: 1px;
    float:none;
    overflow: auto;
    background-color: transparent; 
    }
    #phone{
    padding-top: 40px;
    padding-bottom: 85px;    
    }
    #engine{
    padding: 40px 5%;
    border-radius: 1px;
    float:none;
    overflow: auto;
    background-color: transparent; 
    }
    #unsplash{
    padding-top: 35px;
    }
    #aspect{
    padding-top:45px;
    font-size:18px;
    }
    #presence{
    text-align: left;
    font-size: 24px;
    }
    #pieces{
    padding-top:100px;
    }
    #address {
    padding-top: 35px;
    padding-bottom: 50px;
    }
    .col-sm-7{
    align-content: center;   
    }
    #business p{
    font-family: Raleway,sans-serif;
    font-size: 16px;
    font-weight: 400;
    padding-left: 5%;
    }
    #business img{
    padding-top:10px;
    }
    #facebook2{
    padding-left:35%;
    font-size: 25px;
    }
    #facebook3{
    padding-top:15px;    
    padding-left:40%;
    font-size: 25px;
    }
    #info {
    padding-top:100px;
    padding-bottom: 35px;        
    }
    #difference{
    padding-left: 26%;
    padding-right: 2%;
    padding-bottom: 5px;
    padding-top: 15px;    
    text-align: center;
    }
    #iframe {
    padding:10px 30%; 
    width: 100%;
    height: 200px;
    }
    #copyright{
    padding-left:40%;
    padding-right:25%;
    font-size: 16px;
    }
    }
    @media(min-width:1440px){
    .row {
    display: -ms-flexbox;
    align-content: center;
    -ms-flex-wrap: nowrap;
    }
    .jumbotron {    
    padding: 0px;
    margin: 0px;
    }
    #logo img {
    padding-left: 10%;
    padding-top: 25px;
    padding-bottom: 15px;
    }
    #summary p{
    font-size: 14px;
    padding-top: 40px;    
    }
    #presence h1{
    font-size: 24px;
    }
    #difference{
    padding-left: 28%;
    padding-right: 2%;
    padding-bottom: 5px;
    padding-top: 15px;    
    text-align: center;
    }
        
    #phone{
    padding-top: 40px;
    padding-bottom: 85px;    
    }
    #facebook{
    padding-left: 0px;  
    }
        
    #facebook2{
    padding-left:45%;
    font-size: 30px;
    }    
    }