:root {
    --primary: #F08100;
    --secondary: #753b2b;
}

@font-face {
  font-family: "Open Sans";
  font-display: swap;
  src: url(/assets/OpenSans-Light-300.woff2) format("woff2");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Open Sans";
  font-display: swap;
  src: url(/assets/OpenSans-Bold.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Open Sans";
  font-display: swap;
  src: url(/assets/OpenSans-Regular.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
}

body
{
  color: #404040;
  font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;;
  font-weight: 300;
  font-size: 1rem;
  line-height:35px;
}

h1 {
	font-size: 2rem;
	font-weight: 400;
    color: var(--primary);
    margin-bottom: 3rem;
}

h2 {
	font-size:2.5rem;
	font-weight: 400;
    color: var(--primary);

}
h4 {
	font-size:1.8rem;
	font-weight: 400;
    color: var(--secondary);
	margin-bottom:20px;
}

h5 {
	font-size:1.4rem;
	font-weight: 400;
    color: var(--primary);
	padding:10px 0;
}

.navbar-light {
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    padding-top:1rem;
    padding-bottom: 1rem;
    }

.navbar-light .navbar-nav .nav-link{ color: var(--secondary); font-weight:700;font-size: 1.5rem;}
.navbar-light .navbar-nav .nav-link.active { color: var(--primary);}
.navbar-light .navbar-nav .nav-link:hover{ color: var(--primary);}

.navbar-brand img { height:45px; }

.heroimage{
    background: url("/assets/images/heroimage.jpg");
    background-repeat: no-repeat;
    background-position: top 0px left -50px;
    height: 550px;
    border-bottom: 2px solid var(--secondary);
    background-size: cover;

 }

 .heroimage-portfolio{
    background: url("/assets/images/header_corn.jpg");
    background-repeat: no-repeat;
    background-position: top left -150px;
    height: 350px;
    border-bottom: 2px solid var(--secondary);
    background-size: cover;

 }

 .claim, .claim-portfolio {
    position:absolute;
    top:550px;
    width:auto;
    background-color: var(--primary);
    color: white;
    padding: 1.5rem 2.5rem;
    margin-left: -20px;
    font-weight: 700;
    font-size: 1rem;
	line-height:20px;
  }

 .claim-portfolio { top:400px; }

.footer {
    border-top:4px solid var(--primary);
    background-color: var(--secondary);
    color: white;
    padding-top:4rem;
    padding-bottom:2rem;
    margin-top:3rem;

 }

 .footermenu
 {

    background-color: var(--primary);
    color: var(--secondary);
    padding: 20px;
    text-align:right;
    font-weight:400;

  }

a .fab, a.fas { text-decoration:none; }


.copy { background-color: rgba(0, 0, 0, 0.05); }

.btn-outline-db { border-color: var(--secondary); color: var(--secondary); border-width: 2px;  }
.fs-2 {font-size:1.5rem;}
.btn-outline-db:hover { background-color: var(--secondary); color: #FFF; }




@media (min-width: 400px)
{
     .navbar-brand img { height:65px; }

     .heroimage-portfolio
     {
        background-position: top left -75px;
     }
}


@media (min-width: 760px)
{
     .heroimage-portfolio
     {
        background-position: top left;
     }
}
/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px)
{
   .navbar-brand img { height:auto; }

   .heroimage
    {
    background-position: center center;
    height: 650px;
    }

    .heroimage-portfolio
    {
    height: 350px;
    background-position: top -120px left;

    }

   .claim {
    top:550px;
    font-size: 2rem;
	line-height:50px;

    }

       .claim-portfolio {
    top:350px;
    font-size: 1.8rem;
	line-height:50px;

    }
}


/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px)
{

}

/*Extra large devices (large desktops, 1400px and up)*/
@media (min-width: 1400px)
{
    .heroimage
    {
    background-position: center center;
    height: 750px;
    }

    .heroimage-portfolio{
    height: 400px;
    background-position: top -200px left;

    }

   .claim {
    top:650px;
    font-size: 2rem;
	line-height:50px;

    }

    .claim-portfolio
    {
        top:350px;
        font-size: 2rem;
        line-height:50px;
    }
}



/*4K devices*/
@media (min-width: 1900px)
{
    .heroimage
    {
    background-position: top -150px left;
    height: 800px;
    background-size: cover;
    }

    .heroimage-portfolio{
    height: 800px;
    background-position: top -100px left;

    }

   .claim, .claim-portfolio {
    top:600px;
    font-size: 1.5rem;
	line-height:60px;

    }
}

@media (min-width: 2300px)
{
    .heroimage
    {
    background-position: top -200px center;
    height: 1000px;
    background-size: cover;
    }

    .claim, .claim-portfolio {
    top:850px;
    font-size: 3rem;
	line-height:60px;

    }
}