*{
  margin:0px;
  padding:0px;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Raleway', sans-serif;
  color: #0d3b6b;
  color: #686868;
  background: white;
  font-size:16px;
  margin: 0px;
}

h1{
  margin: 0 0 20px;
  font-size: 2.5em;
  font-weight: 900;
}

h2{
  margin-bottom: 10px;
  text-transform: uppercase;
  font-size: 1.5em;
  color: #0d3b6b;
}

h3{
  margin:0 0 20px 0;
  font-size: 1.33em;
}

h4{
  font-size: 1.2em;
}

h1,h2,h3,h4{
  font-family: 'Roboto', sans-serif;
}

p{
  margin: 0 0 20px;
  line-height: 1.5em;
}

a{
  text-decoration: none;
  transition: .4s;
  color: inherit;
}

ul,
ol{
  padding-left: 40px;
  margin-bottom: 20px;
}

ul li,
ol li{
  margin-bottom: 5px;
  text-align: left;
}

.subpage-hero h1{
  text-align: center;
}

.subpage-content{
  color: #101010;
}

.subpage-content h3{
  color: #101010;
  color: #0d3b6b;
  text-transform: uppercase;
}

.subpage-content p a{
  border-bottom: 1px solid #e96c17;
  font-weight: bold;
}

.subpage-content p a:hover{
  color:#e96c17;
}

/*.subpage-content span{
  color: #e96c17;
}*/

.subpage-content p img{
  width: 100%;
  height: auto;
  max-width: 600px;
  display: block;
  margin:0 auto 40px;
}

.center-text{
  text-align: center;
}

.blue-box{
  padding: 20px 0;
  border-top:1px solid #0d3b6b;
  border-bottom:1px solid #0d3b6b;
  margin-bottom: 20px;
}

.blue-box h4{
  color: #e96c17;
}

@media (min-width: 1100px) {

  .container {
    width:1100px;
    margin:0 auto;
  }

  .content{
    padding: 80px 0;
  }

  /*** HEADER DESKTOP STYLES ***/

  #mobile-social{
    display: none;
  }

  #navContainer{
    background: transparent;
    width: 100%;
    position: fixed;
    top: 0;
    min-height: fit-content;
    z-index: 100;
    font-weight: bold;
    transition: .2s;
  }

  #navContainer .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
  }

  /*#navContainer .container:last-of-type{
    box-shadow: 0px 8px 16px 2px rgba(0,0,0,0.3);
    transition: .3s;
  }*/

  #top-header{
    padding:5px 20px;
    background: #0d3b6b;
    width: calc(100% - 40px);
    color: white;
    font-size: .9em;
    font-weight: 400;
  }

  #top-header p{
    margin-bottom: 0px;
  }

  #top-header i{
    color: #e96c17;
  }

  .top-header-icon{
    float: left;
    margin-right:20px;
  }

  #top-header a:hover{
    color: #e96c17;
  }

  #top-header-social{
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    float: right;
    width: 150px;
  }

  #top-header-social i{
    color: inherit;
  }

  #headerLogo {
    width: 200px;
    transition: .4s;
    margin-left:20px;
  }

  #headerLogo img{
    width: 100%;
    height: auto;
    display: block;
  }

  #headerLogo a{
    display: block;
    max-height:96px;
  }

  .topnav{
    width: 700px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right:20px;
  }

  .topnav a{
    color: #777777;
    padding: 25px 4px;
    border-bottom: 4px solid transparent;
    text-transform: uppercase;
  }

  .topnav a:hover{
    color: #101010;
    border-bottom: 4px solid #e96c17;
  }

  #myTopnav a.icon{
    display: none;
  }

  .dropdown {
    position: relative;
    display: inline-block;
  }

  .hidden {
    display: none;
    position: absolute !important;
    z-index: 1;
    margin: -18px 0 0 -30px;
    background: #f9f8f4;
    background: white;
    padding:10px 12px;
    box-shadow: 1px 8px 16px 1px rgba(0,0,0,0.3);
  }

  .hidden a {
    padding: 8px 12px;
    text-decoration: none;
    display: block;
    font-size: .9em;
    width: 340px;
    font-weight: 600;
    text-transform: none;
    transition: .2s;
    color: #686868;
    border-bottom: 1px solid #e96c17;
  }

  .hidden a:hover{
    background-color: #e96c17;
    color:#fff;
    display: block;
    opacity: 1;
    border-bottom: 1px solid #e96c17;
  }

  .dropdown:hover .hidden {
    display: block;
  }

  .dropbtn{
    cursor: default;
    padding:25px 4px;
    display: block;
    border-bottom: 4px solid transparent;
  }

  a.dropbtn:hover{
    border-bottom: 4px solid transparent;
  }

  .hidden:hover{
      opacity: 1;
  }

  .hidden {
      animation: fadeIn .4s;
      -webkit-animation: fadeIn .4s;
      -moz-animation: fadeIn .4s;
      -o-animation: fadeIn .4s;
      -ms-animation: fadeIn .4s;
    }
    @keyframes fadeIn {
      0% {opacity:0;}
      100% {opacity:1;}
    }

    @-moz-keyframes fadeIn {
      0% {opacity:0;}
      100% {opacity:1;}
    }

    /*SIDE NAV DESKTOP*/

    .sidenav {
      height:70%;
      width: 0;
      position: fixed;
      z-index: 1001;
      top: 15%;
      left: 0;
      background-color: #0d3b6b;
      overflow-x: hidden;
      transition: 0.5s;
      padding-top: 60px;
    }

    .sidenav-open{
      position: fixed;
      z-index: 1000;
      cursor: pointer;
      border-radius: 5px 5px 0 0;
      top:50%;
      left:-45px;
      padding: 10px 20px;
      background:#0d3b6b;
      color: white;
      transform: rotate(90deg);
      transition: .3s;
    }

    .sidenav-open:hover{
      background: #e96c17;
    }

    .sidenav .closebtn {
      position: absolute;
      top: 0;
      right: 25px;
      font-size: 36px;
      margin-left: 50px;
      color: white;
    }

  /***HERO DEKSTOP STYLES***/

  #homepage-hero{
    height: 500px;
    color: white;
    background: url(images/homepage-hero.webp) no-repeat right center;
    padding: 160px 0 120px;
    background-size:  cover;
    z-index: 0;
    position: relative;
    overflow: hidden;
  }

  #homepage-hero .container{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 40px;
    z-index: 2;
    position: relative;
  }

  #homepage-hero h1{
    font-size:3.75em;
    margin-bottom: 60px;
    text-align: left;
    color: #0d3b6b;
    width: 800px;
  }

  #homepage-hero a{
    padding:14px 30px;
    width: 100px;
    text-align: center;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
  }

  #homepage-hero a:first-of-type{
    margin-right:10px;
    background: #e96c17;
    border:2px solid #e96c17;
  }

  #homepage-hero a:first-of-type:hover{
    background: white;
    color: #e96c17;
  }

  #homepage-hero a:last-of-type{
    background: #0d3b6b;
    border:2px solid #0d3b6b;
  }

  #homepage-hero a:last-of-type:hover{
    color: #0d3b6b;
    background: white;
  }

  /*MAIN BODY DESKTOP STYLES*/

  #compare-rates{
    background: #0d3b6b;
    padding:40px;
    color: white;
  }

  #compare-rates .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  #compare-rates h3{
    margin-bottom: 0px;
    width: 290px;
    text-transform: uppercase;
  }

   #compare-rates img{
    height: 30px;
    width: auto;
   }

   img.img-height{
    height: 50px !important;
   }

   .image-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
   }

   .image-row:first-of-type{
    margin-bottom: 80px;
   }

   .image-row img{
    width: 540px;
    height: auto;
    margin:0 80px 0 0;
   }

   .image-row h1{
    color: #0d3b6b;
    font-size: 3em;
   }

   .image-row:last-of-type img{
    margin:0 0 0 80px;
   }

   .image-row a,
   #get-protected a{
    display: inline-block;
    color: white;
    padding:14px 40px;
    font-weight: bold;
    border-radius: 5px;
    background: #0d3b6b;
    border:2px solid #0d3b6b;
   }

   .image-row a:hover,
   #get-protected a:hover{
    background: white;
    color: #0d3b6b;
   }

   .image-row a{
    float: right;
   }

   #get-protected{
    box-shadow: 1px 8px 16px 1px rgba(0,0,0,0.3);
    width: 90%;
    border-radius: 5px;
    padding:30px 20px;
    margin-top:80px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: #0d3b6b;
   }

   #get-protected h3{
    margin-bottom: 0px;
    font-size: 1.5em;
   }

   #testimonials{
    background: #F5F5F5;
    background: #e6e6e6;
   }

   #testimonials h1, 
   #testimonials h2{
    text-align: center;
   }

   #testimonials h1{
    color: #121212;
   }

   #testimonials h2{
    color: #0d3b6b;
    font-size: 1.1em;
    font-weight: bold;
   }

  .testimonials-home-slick{
    margin-top: 60px;
  }

  .testimonials-slick{
    background: white;
    width: 300px;
    margin: 0 auto;
    padding:20px;
    border-radius: 5px;
  }

  .testimonials-text h4{
    margin-bottom: 0px;
    color: #0d3b6b;
  }

  .testimonials-text h3{
    color: #121212;
    margin-bottom: 10px;
    font-size: 1.5em;
  }

  .testimonials-text p{
    margin-bottom: 10px;
  }

  .testimonials-text img{
    width: 35px;
    height: auto;
  }

  /*SUBPAGE DESKTOP STYLES*/

  .subpage-hero{
    height: 200px;
    background-image: linear-gradient(to bottom, rgb(204, 204, 204, .6), rgb(204, 204, 204, .6)), 
    url("images/office-hero.webp");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    color: #0d3b6b;
    padding-top:140px;
  }

  .subpage-hero .container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
  }

  .subpage-hero h1{
    margin-bottom: 0px;
  }

  /*LEARN MORE DESKTOP STYLES*/

  .image-right img{
    width: 200px;
    float: right;
    margin: 0 0 40px 20px;
  }

  /*ARTICLES DESKTOP STYLES*/

  .row-fluid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .article{
    width: 310px;
    margin-bottom: 40px;
  }

  .article img{
    display: block;
    width: 260px !important;
    height: auto;
    margin-bottom: 10px;
  }

   /*FOOTER DESKTOP STYLES*/

   footer{
    background: #0d3b6b;
    padding:60px 20px 40px;
    color: #bdbdbd;
   }

   #sub-footer{
    padding:20px;
    background: #1c2025;
    text-align: center;
    color: #bdbdbd;
   }

   footer a{
    border-bottom: 1px solid transparent;
   }

   #sub-footer a{
    border-bottom: 1px solid #e96c17;
   }

   footer a:hover, #sub-footer a:hover{
    color: white;
    border-bottom: 1px solid #e96c17;
   }

   footer .container{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
   }

   .footer-col:first-of-type{
    width: 300px;
   }

   footer h3{
    color: white;
    padding:0 40px 10px 0;
    border-bottom: 2px solid #e96c17;
   }

   a.home-link{
    border-bottom: none !important;
    display: inline-block;
    margin-bottom: 20px;
   }

   #footer-social{
    display: flex;
    margin-top: 30px;
   }

   #footer-social i{
    color: inherit;
   }

   #footer-social a{
    margin-right:12px;
    border-bottom: none;
    padding:5px;
    border-radius: 5px;
    border:1px solid #fff;
   }

   #footer-social a:hover{
    color: #e96c17;
    background: white;
  }

  .footer-col i{
    color: #e96c17;
  }

}

@media (max-width: 1090px) {

  .container {
    width: 100%;
    margin:0 auto;
  }

  .content{
    padding: 60px 20px;
  }

  h1{
    font-size: 2.3em;
  }

  /***** HEADER MOBILE STYLES *****/

  #top-header{
    display: none;
  }

  #navContainer{
    width: 100%;
    background-color: #fff !important;
    transition: 0.4s;
    position: fixed;
    top: 0;
    z-index: 100;
    padding:10px 0px 0 !important;
    color: #777777;
    margin-top: 0px !important;
    border-bottom: 1px solid lightgray;
    max-height: 600px;
/*    overflow-x: hidden;*/
    overflow-y: scroll;
  }

  #nav{
    height: fit-content;
  }

  #headerLogo a{
    display: block;
    width: fit-content;
  }

  #navContainer img{
    width: 170px !important;
    height: auto;
    display: block;
    margin:0 0 10px 10px;
  }

  #navBorder{
    transition: .3s;
  }

  /* Links inside the navbar */
  .topnav a { 
    float: left;
    font-weight: 500;
    text-align: center;
    padding: 14px 16px;
    text-transform:uppercase;
  }

  /* Add a background color to navbar links on hover */
  .topnav a:hover{
    background-color: #EBEBEB;
    color:#e96c17 !important;
  }

  /* When the screen is less than 1099 pixels wide, hide all links. 
  Show the link that should open and close the topnav (.icon) */
  .topnav a{
    display:none;
  }

  .topnav a.icon {
    display: block;
    position: absolute;
    color: #405148;
    font-size: 30px;
    padding: 14px 16px !important;
    top: -3px;
    right: -4px;
    float: right;
    margin: 0px 10px 10px 0 !important;
    transition: unset;
  }

  .topnav a.icon:hover{
    background-color:transparent;
    color: #405148 !important;
  }

   /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. 
  This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
  .topnav.responsive {
    position: relative; 
    clear:both;
    padding:5px 20px 0px;
    border-bottom:1px solid gray;
  }
    .topnav.responsive a.icon {
      position: absolute;
      right: -4px;
      top: -70px;
      border-bottom:none;
      transition: unset;
      font-weight: normal;
    }

    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
      border-bottom:1px solid lightgray;
      padding:12px 16px;
      font-weight: 600;
    }

    .topnav.responsive .dropdown {float: none;}
    .topnav.responsive .dropdown-content {position: relative;}
    .topnav.responsive .dropdown .dropbtn {
      display: block;
      text-align: left;
    }

    /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
    .show {display:block;}

    .topnav.responsive,
    #nav {
      animation: fadeIn .5s;
      -webkit-animation: fadeIn .5s;
      -moz-animation: fadeIn .5s;
      -o-animation: fadeIn .5s;
      -ms-animation: fadeIn .5s;
    }
    @keyframes fadeIn {
      0% {opacity:0;}
      100% {opacity:1;}
    }

    @-moz-keyframes fadeIn {
      0% {opacity:0;}
      100% {opacity:1;}
    }

    /* DROPDOWN MENU */

    .topnav.responsive .dropdown {float: none;}
    .topnav.responsive .dropdown-content {position: relative;}
    .topnav.responsive .dropdown .dropbtn {
      display: block;
      text-align: left;
    }

    /* Dropdown Content */
    .hidden{
      display: none;
      margin: 10px 0;
    }

    .hidden a{
      margin-left: 25px !important;
      font-size: .9em;
/*      border-bottom: none !important;*/
      font-weight: 500 !important;
    }

    /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
    .show {display:block;}

     .topnav.responsive,
    .hidden {
      animation: fadeIn .5s;
      -webkit-animation: fadeIn .5s;
      -moz-animation: fadeIn .5s;
      -o-animation: fadeIn .5s;
      -ms-animation: fadeIn .5s;
    }
    @keyframes fadeIn {
      0% {opacity:0;}
      100% {opacity:1;}
    }

    @-moz-keyframes fadeIn {
      0% {opacity:0;}
      100% {opacity:1;}
    }

    #mobile-social{
      display: flex;
    }

    #mobile-social a{
      border-bottom: none;
    }

    /*SIDE NAV MOBILE*/

    .sidenav {
      height:70%;
      width: 0;
      position: fixed;
      z-index: 1001;
      top: 15%;
      left: 0;
      background-color: #0d3b6b;
      overflow-x: hidden;
      transition: 0.5s;
      padding-top: 60px;
    }

    .sidenav-open{
      position: fixed;
      z-index: 1000;
      cursor: pointer;
      top:80%;
      left:-45px;
      padding: 10px 20px;
      background:#0d3b6b;
      color: white;
      transform: rotate(90deg);
      transition: .3s;
    }

    .sidenav-open:hover{
      background: #e96c17;
    }

    .sidenav .closebtn {
      position: absolute;
      top: 0;
      right: 25px;
      font-size: 36px;
      margin-left: 50px;
      color: white;
    }


  /***HERO MOBILE STYLES***/

  #homepage-hero{
    background: url('images/homepage-hero.webp') no-repeat  center;
    background-size: cover;
    height: 400px;
    margin-top: 67px;
    text-align: center;
    font-size: 1.15em;
  }

  #homepage-hero .container{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  #homepage-hero h1{
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: center;
    color: #0d3b6b;
    font-size: 2em;
  }

  .hero-btns{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin-bottom: 30px;
  }

  .hero-btns a{
    color: white;
    padding:10px 20px;
    font-weight: bold;
    margin:0 auto 10px;
  }

  #homepage-hero a:first-of-type{
    margin-right:10px;
    background: #e96c17;
    border:2px solid #e96c17;
  }

  #homepage-hero a:first-of-type:hover{
    background: white;
    color: #e96c17;
  }

  #homepage-hero a:last-of-type{
    background: #0d3b6b;
    border:2px solid #0d3b6b;
  }

  #homepage-hero a:last-of-type:hover{
    color: #0d3b6b;
    background: white;
  }

  /***MAIN BODY MOBILE STYLES***/

  #compare-rates{
    background: #0d3b6b;
    padding:40px;
    color: white;
  }

  #compare-rates .container{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    width: 100%;
  }

  #compare-rates h3{
    width: 100%;
    text-transform: uppercase;
    text-align: center;
  }

   #compare-rates img{
    height: 30px;
    width: auto;
    margin:10px;
   }

   img.img-height{
    height: 50px !important;
   }

   .image-row{
    display: flex;
    flex-direction: column;
    align-items: center;
   }

   .image-row:first-of-type{
    margin-bottom: 60px;
   }

   .image-row img{
    width: 100%;
    height: auto;
    max-width: 400px;
    margin-bottom:30px;
   }

   .image-row h1{
    color: #0d3b6b;
    text-align: center;
   }

   .image-row:last-of-type{
    flex-direction: column-reverse;
   }

   .image-row a,
   #get-protected a{
    display: block;
    border-radius: 5px;
    width: fit-content;
    color: white;
    padding:14px 40px;
    font-weight: bold;
    background: #0d3b6b;
    border:2px solid #0d3b6b;
    margin:40px auto 20px;
   }

   .image-row a:hover,
   #get-protected a:hover{
    background: white;
    color: #0d3b6b;
   }

   #get-protected{
    box-shadow: 1px 8px 16px 1px rgba(0,0,0,0.3);
    width: 90%;
    border-radius: 5px;
    padding:20px;
    margin:60px 0 20px;
    text-align: center;
    color: #0d3b6b;
   }

   #testimonials{
    background: #e6e6e6;
   }

   #testimonials h1, 
   #testimonials h2{
    text-align: center;
   }

   #testimonials h1{
    color: #121212;
   }

   #testimonials h2{
    color: #0d3b6b;
    font-weight: bold;
    font-size: 1.1em;
   }

   .testimonials-home-slick{
    margin-top:40px;
   }

   .testimonials-slick{
    background: white;
    max-width: 320px;
    margin: 0 auto;
    padding:20px;
    border-radius: 5px;
  }

  .testimonials-text h4{
    margin-bottom: 0px;
    color: #0d3b6b;
  }

  .testimonials-text h3{
    color: #121212;
    margin-bottom: 10px;
    font-size: 1.5em;
  }

  .testimonials-text p{
    margin-bottom: 10px;
  }

  .testimonials-text img{
    width: 35px;
    height: auto;
  }

  /*SUBPAGE MOBILE STYLES*/

  .subpage-hero{
    height: 200px;
    background-image: linear-gradient(to bottom, rgb(204, 204, 204, .6), rgb(204, 204, 204, .6)), 
    url("images/office-hero.webp");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    color: #0d3b6b;
    margin-top: 67px;
  }

  .subpage-hero .container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
  }

  .subpage-hero h1{
    margin
  }

  /*LEARN MORE MOBILE STYLES*/

  .image-right img{
    width: 200px;
    height: auto;
    display: block;
    margin: 10px auto 20px;
    display: none;
  }

  /*ARTICLES MOBILE STYLES*/

  .row-fluid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .span4{
    width: 32%;
  }

  .article{
    margin-bottom: 40px;
    width: 100%;
  }

  .article img{
    display: block;
    width: 100% !important;
    height: auto;
    margin-bottom: 10px;
  }

  /*FOOTER MOBILE STYLES*/

   footer{
    background: #0d3b6b;
    padding:60px 20px 40px;
    color: #bdbdbd;
   }

   #sub-footer{
    padding:20px;
    background: #1c2025;
    text-align: center;
    color: #bdbdbd;
   }

   footer a{
    border-bottom: 1px solid transparent;
   }

   #sub-footer a{
    border-bottom: 1px solid #e96c17;
   }

   footer a:hover, #sub-footer a:hover{
    color: white;
    border-bottom: 1px solid #e96c17;
   }

   footer .container{
    display: flex;
    flex-direction: column;
    align-items: center;
   }

   .footer-col{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-bottom: 40px;
   }

   .footer-col:nth-of-type(2){
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
   }

   .footer-col:nth-of-type(2) p{
    margin:0 10px 20px;
   }

   .footer-col:last-of-type{
    margin-bottom: 0px;
   }

   footer h3{
    color: white;
    padding:0 20px 10px;
    border-bottom: 2px solid #e96c17;
    text-align: center;
    width: calc(100% - 40px);
   }

   a.home-link{
    border-bottom: none !important;
    display: inline-block;
    margin-bottom: 20px;
   }

   #footer-social{
    display: flex;
    margin: 20px 0 30px;
   }

   #footer-social i{
    color: inherit;
   }

   #footer-social a{
    margin:0 8px;
    border-bottom: none;
    padding:5px;
    border-radius: 5px;
    border:1px solid #fff;
   }

   #footer-social a:hover{
    color: #e96c17;
    background: white;
  }

  .footer-col i{
    color: #e96c17;
  }
  
}

@media (max-width: 700px) {

  .row-fluid{
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .span4{
    width: 100%;
  }

}