/*
=======================================================================
 Primary Styles
=======================================================================
*/

@font-face {
    font-family:'Arial Black'; 
    src: url("arial-black.ttf") format("truetype");
}

:root {
    --primaryone:#0F2039;
    --primarytwo:#CC0000;
}
    
body {width:100%; height:auto; font-family:Arial; font-size:16px; color:#000; margin:0; padding:0; text-align:center; background:#FFF;}
.wrapper {position:relative; top:0; left:0; width:96%; max-width:1880px; height:auto; margin:0 auto; text-align:left; box-sizing:border-box; overflow:hidden;}
h1 {font-family:Arial Black; font-size:54px; margin:0; text-transform:uppercase;}
.button a {display:block; background:var(--primarytwo); color:#FFF; font-weight:bold; text-align:center; text-decoration:none; border-radius:12px; text-transform:uppercase; box-sizing:border-box; text-shadow:none; transition:all 0.3s ease 0s;}
.button a:hover {background:var(--primaryone);}
.spacer {position:relative; top:0; left:0; width:100%; height:60px;}
table {background:#3D4154;}
tr {text-align:center;}
th {border:1px solid #4B5064; line-height:20px;}
td {border:1px solid #4B5064;}
input[type=text], input[type=password] {width:100%; padding:8px; border:1px solid #CCC; box-sizing:border-box; appearance:none;}
#mobilevisitor {display:none;}

/*
=======================================================================
 Website Header
=======================================================================
*/

#topheader {position:fixed; top:0; left:0; width:100%; height:130px; color:#FFF; font-weight:bold; background:#FFF; z-index:5;}
.logo {float:left; width:48%; height:auto;}
#topheader .column {float:left; width:26%; height:auto;}
#mobilenavigation {display:none;}
.headericon {float:left; width:15%; height:auto; font-size:50px; color:var(--primarytwo); padding-top:38px;}
.logoicon {float:left; width:18%; height:auto; padding-top:35px;}
.logotext {float:left; width:80%; height:auto; font-family:Arial Black; font-size:37px; padding-top:35px; text-transform:uppercase; line-height:30px; color:var(--primaryone);}
.logotext span {font-size:22px; color:var(--primarytwo);}
.logotext a {text-decoration:none; color:#FFF;}
.icontext {float:right; width:84%; height:auto; font-size:20px; line-height:30px; padding-top:35px; color:var(--primaryone); font-family:Arial Black;}

/*
=======================================================================
  Navigation Section
=======================================================================
*/

#topnavbar {position:fixed; top:130px; left:0; width:100%; height:60px; background:var(--primaryone); box-shadow:0 4px 20px 0 rgba(0, 0, 0, 0.5); z-index:5;}
#navigation {position:relative; top:0; left:0; width:96%; max-width:1880px; height:100%; margin:auto; box-sizing:border-box;}
#navigation ul {display:flex; text-align:center; margin:0; padding:0; list-style:none; justify-content:space-between;}
#navigation ul li {width:auto;}
#navigation ul li a {display:inline-block; width:100%; line-height:60px; padding-left:48px; padding-right:48px; color:#FFF; font-size:16px; font-weight:bold; text-decoration:none; text-transform:uppercase; transition:all 0.3s ease 0s; box-sizing:border-box;}
#navigation ul li a:hover {background:var(--primarytwo);}

/*
=======================================================================
 Slider Section
=======================================================================
*/

#slider {position:relative; top:0; left:0; width:100%; height:auto; margin-top:190px; color:var(--primaryone); padding-top:30px; padding-bottom:30px;}
#slider .wrapper {display:flex; flex-wrap:wrap; align-items:center;}
#slider span {color:var(--primarytwo);}
#slider .button {width:40%; height:56px; line-height:56px; margin-top:40px; margin-left:30%; margin-right:30%; font-size:22px;}
.sliderphoto {width:40%; height:auto;}
.slidertext {width:60%; height:auto; text-align:center;}
#slider p {font-size:32px; text-align:center; margin-top:20px; margin-bottom:0; text-transform:none; line-height:45px; font-family:Arial Black;}

/*
=======================================================================
 Footer Section
=======================================================================
*/

#contact {position:relative; top:0; left:0; width:100%; height:auto; color:#FFF; background:var(--primaryone);}
#contact .columnone, #contact .columnthree {float:left; width:32%; height:auto;}
#contact .columntwo {float:left; width:32%; height:auto; margin-left:2%; margin-right:2%;}
#contact h3 {font-family:Arial Black; color:#FFF; font-size:26px; margin-top:20px; margin-bottom:20px; text-transform:uppercase;}
#contact h3 span {font-size:26px; color:var(--primarytwo);}
#contact span {font-size:20px; padding-right:15px; color:var(--primarytwo);}
#contact p {margin-top:5px; margin-bottom:15px;}
#contact a {text-decoration:none; color:#FFF;}
.copyright {position:relative; top:0; left:0; width:100%; height:auto; font-size:13px; text-align:center; margin-top:30px; margin-bottom:20px; line-height:25px; text-transform:uppercase;}

/*
=======================================================================
 Content Sections
=======================================================================
*/

/* COMPONENT 1 */
.component-1 {display:grid; grid-template-areas:'column-1 column-2 column-3 column-4'; grid-template-columns:1fr 1fr 1fr 1fr; color:#FFF;}
.component-1 h3 {font-size:24px; margin:0; text-transform:uppercase; font-family:Arial Black;}
.component-1 p {font-size:18px; margin-top:15px; margin-bottom:0;}
.component-1 .column-1 {grid-area:column-1; background:var(--primaryone); padding:20px; transition:all 0.3s ease 0s;}
.component-1 .column-1:hover {background:var(--primarytwo);}
.component-1 .column-2 {grid-area:column-2; background-repeat:no-repeat; background-position:center center; background-attachment:local; background-size:cover;}
.component-1 .column-3 {grid-area:column-3; background:var(--primarytwo); padding:20px; transition:all 0.3s ease 0s;}
.component-1 .column-3:hover {background:var(--primaryone);}
.component-1 .column-4 {grid-area:column-4; background-repeat:no-repeat; background-position:center center; background-attachment:local; background-size:cover;}

/* COMPONENT 2 */
.component-2 {display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:10px;}
.component-2 .column {color:#FFF; background:var(--primaryone); padding:20px; text-align:center; box-sizing:border-box; transition:all 0.3s ease 0s;}
.component-2 .column:hover {background:var(--primarytwo);}
.component-2 .columntwo {color:#FFF; background:var(--primarytwo); padding:20px; text-align:center; box-sizing:border-box; transition:all 0.3s ease 0s;}
.component-2 .columntwo:hover {background:var(--primaryone);}
.component-2 span {font-size:60px; margin:0;}
.component-2 h4, .component-2 b {font-size:22px; margin-top:15px; margin-bottom:15px; text-transform:uppercase;}
.component-2 p {font-size:18px;}
.component-2 .rating span {font-size:20px; margin:0; color:#F6AD01;}

/* COMPONENT 3 */
.component-3-left {float:left; width:48%; height:auto; margin:0;}
.component-3-right {float:right; width:48%; height:auto; margin:0;}
.component-3-left .container {display: grid; min-height:600px; grid-template-columns:20px 50px 200px 1fr repeat(2, 100px); grid-template-rows:20px 1fr 100px 1fr repeat(2, 50px); grid-column-gap:0;
grid-row-gap:0;}
.component-3-left .shape {grid-area: 1 / 1 / 3 / 4; border-radius:10px 0 0 0; background:var(--primarytwo); clip-path:polygon(0 0, 0 100%, 100% 0);}
.component-3-left .photo {grid-area: 2 / 2 / 6 / 7; background-repeat:no-repeat; background-position:center center; background-attachment:local; background-size:cover; border-radius:10px; z-index:1;}
.component-3-left .spotlight {grid-area: 5 / 3 / 7 / 4; padding:20px; color:#FFF; font-size:16px; font-weight:bold; border-radius:10px; background:var(--primarytwo); line-height:34px; text-align:center; box-sizing:border-box; z-index:2;}
.component-3-left .spotlight span {display:block; font-size:40px; color:#FFF;}
.component-3-right h2 {font-size:40px; margin-top:15px; margin-bottom:0; text-transform:uppercase; font-family:Arial Black; color:var(--primaryone);}
.component-3-right h2 span {color:var(--primarytwo);}
.component-3-right p {font-size:18px; margin-top:15px; margin-bottom:0;}
.component-3-right p span {font-size:22px; color:var(--primarytwo); padding-right:10px;}
.component-3-right .title {position:relative; top:0; left:0; width:100%; height:auto; font-size:20px; color:var(--primarytwo); font-weight:bold; margin-top:20px; margin-bottom:0; text-transform:uppercase;}
.component-3-right .bullet {color:#000;}
.component-3-right a.button {display:block; width:40%; height:50px; line-height:50px; margin-top:30px; color:#FFF; background:var(--primarytwo); font-size:18px; font-weight:bold; border-radius:10px; text-align:center; text-decoration:none; transition:all 0.3s ease 0s; text-transform:uppercase;}
.component-3-right a.button:hover {background:var(--primaryone);}

/* COMPONENT 4 */
.component-4 {display:grid; grid-template-columns:repeat(8, 1fr); grid-template-rows: 100px repeat(2, 1fr) 80px; grid-column-gap:0; grid-row-gap:0;}
.component-4 .left {grid-area: 1 / 1 / 5 / 5; background-repeat:no-repeat; background-position:center center; background-attachment:local; background-size:cover;}
.component-4 .right {grid-area: 1 / 5 / 5 / 9; background:var(--primaryone); color:#FFF; padding:40px; box-sizing:border-box; transition:all 0.3s ease 0s;}
.component-4 .topspot {grid-area: 1 / 1 / 2 / 2; min-width:200px; padding:20px; font-size:16px; color:#FFF; font-weight:bold; background:var(--primarytwo); line-height:34px; text-align:center; box-sizing:border-box;}
.component-4 .topspot span {display:block; font-size:40px; color:#FFF;}
.component-4 .bottomspot {grid-area: 4 / 1 / 5 / 4; font-size:20px; color:#FFF; font-weight:bold; font-style:italic; text-align:center; line-height:75px; background:var(--primarytwo); text-transform:uppercase;}
.component-4 .bottomspot span {color:#F6AD01;}
.component-4 h3 {font-size:40px; margin:0; text-transform:uppercase; text-align:left; font-family:Arial Black;}
.component-4 .right h3 span {font-size:40px; color:var(--primarytwo);}
.component-4 h4 {font-size:24px; margin-top:15px; margin-bottom:15px; text-transform:uppercase; font-family:Arial Black;}
.component-4 .title {position:relative; top:0; left:0; width:100%; height:auto; font-size:20px; font-weight:bold; margin-top:15px; margin-bottom:30px; text-align:left;}
.component-4 p {font-size:18px; margin:0;}
.component-4 .right span {font-size:60px; margin:0; color:var(--primarytwo);}
.component-4 .right a.button {display:block; width:70%; margin-left:15%; height:50px; line-height:50px; margin-top:30px; color:#FFF; background:var(--primarytwo); font-size:18px; font-weight:bold; border-radius:10px; text-align:center; text-decoration:none; transition:all 0.3s ease 0s; text-transform:uppercase;}
.component-4 .right a.button:hover {background:#FF0000;}
.component-4 .column-1 {display:inline-block; width:48%; margin-right:2%; text-align:center;}
.component-4 .column-2 {display:inline-block; width:48%; text-align:center;}

@media (max-width: 1680px)
{
    h1 {font-size:44px;}
    #navigation ul li a {padding-left:44px; padding-right:44px;}
    #slider p {font-size:28px;}
    #slider .button {width:50%; margin-left:25%; margin-right:25%;}
    #contact {font-size:15px;}

    /* COMPONENT 1 */
    .component-1 h3 {font-size:23px;}
    .component-1 p {font-size:17px;}

    /* COMPONENT 2 */
    .component-2 h4, .component-2 b {font-size:21px;}
    .component-2 p {font-size:17px;}
    .component-2 a.button {width:55%; font-size:17px;}

    /* COMPONENT 3 */
    .component-3-right h2 {font-size:39px;}
    .component-3-right p {font-size:17px;}
    .component-3-right .title {font-size:19px;}
    .component-3-right a.button {width:50%; font-size:17px;}

    /* COMPONENT 4 */
    .component-4 h3, .component-4 .right h3 span {font-size:39px;}
    .component-4 h4 {font-size:23px;}
    .component-4 .title {font-size:19px;}
    .component-4 p {font-size:17px;}
    .component-4 .right a.button {font-size:17px;}
}

@media (max-width:1480px)
{
    .logo {width:46%;}
    #topheader .column {width:27%;}
    .headericon {font-size:46px;}
    .logoicon {padding-top:45px;}
    .logotext {font-size:32px;}
    .logotext span {font-size:19px;}
    .icontext {font-size:18px;}
    h1 {font-size:38px;}
    #navigation ul li a {font-size:15px; padding-left:34px; padding-right:34px;}
    #slider p {font-size:24px;}
    #slider .button {font-size:20px;}
    #contact h3 {font-size:24px;}
    #contact h3 span {font-size:24px;}

    /* COMPONENT 1 */
    .component-1 h3 {font-size:22px;}
    .component-1 p {font-size:16px;}

    /* COMPONENT 2 */
    .component-2 h4, .component-2 b {font-size:20px;}
    .component-2 p {font-size:16px;}
    .component-2 a.button {width:60%; font-size:16px;}

    /* COMPONENT 3 */
    .component-3-right h2 {font-size:38px;}
    .component-3-right p {font-size:16px;}
    .component-3-right .title {font-size:18px;}
    .component-3-right a.button {font-size:16px;}

    /* COMPONENT 4 */
    .component-4 h3, .component-4 .right h3 span {font-size:38px;}
    .component-4 h4 {font-size:22px;}
    .component-4 .title {font-size:18px;}
    .component-4 p {font-size:16px;}
    .component-4 .right a.button {font-size:16px;}
}

@media (max-width:1280px)
{
    .headericon {font-size:40px; padding-top:40px;}
    .logoicon {padding-top:45px;}
    .logotext {font-size:28px; line-height:26px;}
    .logotext span {font-size:17px;}
    .icontext {font-size:15px; line-height:26px;}
    h1 {font-size:33px;}
    #navigation ul li a {font-size:14px; padding-left:22px; padding-right:22px;}
    #slider p {font-size:21px; line-height:30px;}
    #slider .button {font-size:18px;}
    #contact .columnone {display:none;}
    #contact .columntwo {width:58%; margin-left:0; margin-right:2%;}
    #contact .columnthree {width:40%;}

    /* COMPONENT 1 */
    .component-1 h3 {font-size:21px;}
    .component-1 p {font-size:15px;}

    /* COMPONENT 2 */
    .component-2 h4, .component-2 b {font-size:19px;}
    .component-2 p {font-size:15px;}
    .component-2 a.button {width:65%; font-size:15px;}

    /* COMPONENT 3 */
    .component-3-right h2 {font-size:37px;}
    .component-3-right p {font-size:15px;}
    .component-3-right .title {font-size:17px;}
    .component-3-right a.button {font-size:15px;}

    /* COMPONENT 4 */
    .component-4 h3, .component-4 .right h3 span {font-size:37px;}
    .component-4 h4 {font-size:21px;}
    .component-4 .title {font-size:17px;}
    .component-4 p {font-size:15px;}
    .component-4 .right a.button {font-size:15px;}
}

@media (max-width:1080px)
{
    #topheader {height:80px; box-shadow:0 4px 20px 0 rgba(0, 0, 0, 0.5);}
    #topheader .column {display:none;}
    .logo {width:86%;}
    .logoicon {width:16%; padding-top:15px;}
    .logotext {width:82%; font-size:24px; padding-top:18px; line-height:20px;}
    .logotext span {font-size:14px;}
    #topnavbar {height:auto; display:none; top:80px; background:var(--primaryone); max-height:calc(100% - 80px); overflow-x:hidden; overflow-y:scroll;}
    #navigation {width:100%; height:auto;}
    #navigation ul {flex-direction:column;}
    #navigation ul li {width:100%; margin:0;}
    #navigation ul li a.nav {font-size:16px; width:100%; padding:0 0 0 20px; text-align:left; border-bottom:1px solid var(--primarytwo);}
    #mobilenavigation {display:block; float:right; width:40px; height:40px; font-size:24px; line-height:40px; text-align:center; margin-top:20px; box-sizing:border-box;}
    #mobilenavigation a {display:block; width:100%; height:100%; background:var(--primarytwo); color:#FFF; text-decoration:none;}
    h1 {font-size:26px;}
    #slider {margin-top:80px;}
    #slider p {font-size:16px; line-height:30px;}
    #slider .button {font-size:16px; width:60%; margin-top:30px; margin-left:20%; margin-right:20%;}
    #contact {font-size:14px;}

    /* COMPONENT 1 */
    .component-1 h3 {font-size:20px;}
    .component-1 p {font-size:14px;}
    .component-1 {grid-template-areas:'column-1 column-2' 'column-4 column-3'; grid-template-columns:1fr 1fr;}

    /* COMPONENT 2 */
    .component-2 {grid-template-columns:repeat(auto-fit, minmax(400px, 1fr));}
    .component-2 .columntwo {background:var(--primaryone);}
    .component-2 .columntwo:hover {background:var(--primarytwo);}
    .component-2 h4, .component-2 b {font-size:18px;}
    .component-2 p {font-size:14px;}

    /* COMPONENT 3 */
    .component-3-left {width:100%;}
    .component-3-right {width:100%;}
    .component-3-left .photo {grid-area: 2 / 2 / 7 / 6;}
    .component-3-left .spotlight {grid-area: 3 / 5 / 4 / 7;}
    .component-3-right h2 {font-size:36px;}
    .component-3-right p {font-size:14px;}
    .component-3-right .title {font-size:16px;}

    /* COMPONENT 4 */
    .component-4 {grid-template-columns: repeat(4, 1fr);}
    .component-4 .left {min-height:300px;}
    .component-4 .right {grid-area: 5 / 1 / 9 / 5; padding:30px;}
    .component-4 h3, .component-4 .right h3 span {font-size:36px;}
    .component-4 h4 {font-size:20px;}
    .component-4 .title {font-size:16px;}
    .component-4 p {font-size:14px;}
}

@media (max-width:880px)
{
    h1 {font-size:34px;}
    #slider {padding-bottom:50px;}
    #slider p {font-size:20px;}
    #slider .wrapper {flex-direction:column;}
    #slider .sliderphoto, #slider .slidertext {width:100%;}
    #contact .columnone {display:block; width:100%;}
    #contact .columntwo {width:100%; margin-left:0; margin-right:0;}
    #contact .columnthree {width:100%;}

    /* COMPONENT 1 */
    .component-1 h3 {font-size:19px;}

    /* COMPONENT 2 */
    .component-2 {grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));}
    .component-2 h4, .component-2 b {font-size:17px;}

    /* COMPONENT 3 */
    .component-3-left .container {min-height:400px;}
    .component-3-left .shape {grid-area: 1 / 1 / 4 / 4;}
    .component-3-right h2 {font-size:35px;}
    .component-3-right .title {font-size:15px;}
    .component-3-right a.button {margin-left:25%;}

    /* COMPONENT 4 */
    .component-4 h3, .component-4 .right h3 span {font-size:35px;}
    .component-4 h4 {font-size:19px;}
}

@media (max-width:680px)
{
    .logotext {font-size:20px;}
    .logotext span {font-size:12px;}
    .logoicon {padding-top:25px;}
    h1 {font-size:22px;}
    #slider p {font-size:14px; line-height:20px;}
    #slider .button {width:70%; margin-left:15%; margin-right:15%;}

    /* COMPONENT 1 */
    .component-1 h3 {font-size:18px;}
    .component-1 {grid-template-areas:'column-2' 'column-1' 'column-4' 'column-3'; grid-template-columns:1fr;}
    .component-1 .column-2, .component-1 .column-4 {height:250px;}

    /* COMPONENT 2 */
    .component-2 h4, .component-2 b {font-size:20px;}
    .component-2 .columntwo {background:var(--primarytwo);}
    .component-2 .columntwo:hover {background:var(--primaryone);}

    /* COMPONENT 3 */
    .component-3-left .container {grid-template-columns:20px 50px 200px repeat(3, 1fr); min-height:300px;}
    .component-3-left .photo {grid-area: 2 / 2 / 7 / 7;}
    .component-3-left .spotlight {display:none;}
    .component-3-right h2 {font-size:26px;}
    .component-3-right a.button {width:70%; margin-left:15%;}
    .component-3-right p span {font-size:15px;}

    /* COMPONENT 4 */
    .component-4 h3, .component-4 .right h3 span {font-size:30px;}
    .component-4 h4 {font-size:18px;}
    .component-4 .right {padding-left:10px; padding-right:10px; padding-top:20px; padding-bottom:40px;}
    .component-4 .bottomspot {font-size:16px;}
    #roofingestimate {font-size:15px;}
}