.maincontent {
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    border: none;
}

.intro-portfolio {
display: flex;
flex-direction: row;
overflow-x: scroll;
gap: 12px;
}
.intro-portfolio-title {
display: flex;
flex-direction: row;
gap: 20px;
justify-content: center;
align-items: center;
}

.intro-portfolio-title .site_button {
height: 42px!important;
display: inline;
}

/***** Gaf Home Viewer *****/
.brava-global {
    padding: 50px 15px;
    background-color: #eee;
    background-image: linear-gradient(120deg, #ffffff 0%-80%, #ffffffd4 80%-100%), url(/imageserver/UserMedia/bulldog/brava-bg.jpg);
    background-size: cover;
    background-position: center 65%;
    background-repeat: no-repeat;
    text-align: center;
    color: #3a3a3a;
}

.brava-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 25px;
}

.brava-content {
    position: relative;
    flex-basis: 380px;
flex-grow: 1;
    text-align: start;
    padding-inline: 20px;
margin-inline: auto;
align-items: center;
}

.brava-content .h2-heading {
    color: #444444;
}

.brava-image {
    flex-basis: 500px;
flex-grow: 2;
}

.brava-image img{
max-width: 97%;
width: 100%;
margin-inline: auto;
}

.site_button .material-symbols-outlined {
vertical-align: middle;
}

/* ===== brava roof system =======*/
 .my-header{
    text-align: center;
    margin:30px;
  }

  #roof-system-image-container{
    max-width:768px;
    margin:0 auto;
    position: relative;
  }

  .roof-system-button{
    position: absolute;
    height:30px;
    width:30px;
    border-radius:50%;
    border:2px solid #fff;
    background-color:red;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.3s;
  }

  .roof-system-button:hover{
    transform:scale(1.5);
    transition:.3s;
  }
  .btn-number{
    font-size:14px;
    font-weight:700;
  }

  .roof-system-content{
    display:grid;
    max-width:768px;
    margin:0 auto;
  }

  .content-item{
    grid-column:1/2;
    grid-row:1/2;
text-align:left;
  }

  .roof-system-content img{
    max-width:150px;
    float:right;
    clear:both;
  }
  #btn1{
    top:35%;
    left:8.5%;
  }
  #btn2{
    top:46%;
    left:23.5%;
  }
  #btn3{
    top:17%;
    left:28.5%;
  }
  #btn4{
    top:4.5%;
    left:46.5%;
  }
  #btn5{
    top:10.5%;
    left:67%;
  }
  #btn6{
    top:30.5%;
    left:77%;
  }
  #btn7{
    top:51%;
    left:82%;
  }
  #btn8{
    top:50%;
    left:75.5%;
  }
  #btn9{
    top:67%;
    left:87.5%;
  }
  #btn10{
    top:88%;
    left:90.5%;
  }
  #btn11{
    top:57%;
    left:54.5%;
  }
  #btn12{
    top:49.5%;
    left:42.5%;
  }
  #btn13{
    top:61%;
    left:22.5%;
  }

  .brava-auth-image{
	width: 100%;
	max-width: 300px;
	
  }

  /* Financing section */

  .home-financing{
    padding: 50px 20px;
    text-align: center;
    background-image: url("/imageserver/AdminMedia/Paralax_Backgrounds/shingles-bg-lighter.jpg");
    background-attachment: fixed;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
    color: var(--accent-color);
    display: flex;
justify-content: center;
align-items: center;
  }

.home-financing div{
width: 45%;
}

.financing-left img{
max-width: 100%;
}

.financing-right{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.financing-right .site_button{
margin: 0 auto;
}

@media(max-width: 650px){
.home-financing{
flex-direction: column;
}

.home-financing div{
width: 100%;
}
}