@font-face {
	font-family: 'Domine';
	font-style: normal;
	font-weight: normal;
	src: url("../../fonts/Domine-Regular.ttf") format("ttf");
}
/*Overrides*/
.wrapper-middle {
	/*moves the container down due to the fixed header overlapping it.*/
	margin-top: 130px;
}
/* HEADER */
#header { position: fixed; z-index:9999; top: 0; left: 0; right: 0; width: 100%; background: #fff;}
.header__topNav { display: flex; align-items: center; height: 82px; }
.header__topContainer { position:relative; z-index: 999; background: #fff; border-bottom: 1px solid #eae9f4; }
#header .container { width: auto; padding: 0 5px; margin-left: auto;	margin-right: auto;}
#header .row { margin: 0 7px; }

.header__logo { margin: 0; height: 40px; transform: scale(1.02); transform-origin: left center}

#header__nav { z-index: 999; position: initial; display: flex; width: 100%; height: 82px;align-items: center; }
#header__nav > ul { list-style-type: none; margin: 0 0 0 50px; padding: 0; display: flex; height: 100%; align-items: center;}
#header__nav > ul > li { padding: 0; margin: 0 15px 0; display: flex; height: 100%; align-items: center; font: normal 16px 'Open Sans', Helvetica, Arial, Sans serif;}
#header__nav > ul > li a { color: #000; padding: 5px 0; text-decoration: none; border-bottom: 2px solid transparent; line-height: 16px; font: normal 16px 'Open Sans', Helvetica, Arial, Sans serif;}
#header .header__services { margin: 0 34px 0 10px; cursor: default;}
.header__servicesText { display: block; position: relative; color: #000; border-bottom: 2px solid transparent; padding: 5px 0; font: normal 16px 'Open Sans', Helvetica, Arial, Sans serif;}
.header__servicesText:after { content: ''; display: block; position: absolute; right: -24px; width: 24px; height: 24px; top: -24px; bottom: -24px; margin: auto 0; background: url('https://graphics.web.com/wdc_201911_header1558/header-arrow.svg') no-repeat 100% 50%; }
#header__nav > ul.header__utils { margin: 0 0 0 auto;}

.header__servicesList { display: block; position: absolute; left: 0; top: 105px; width: 100%; height: auto; max-height: 0; overflow: hidden; background: #fff; }
.header__servicesList ul { display: block; width: 100%; padding: 35px 0; margin: 0;}
.header__servicesList .col { padding: 0; width: 50%; float: left; }
.header__servicesList li { display: block; width: 100%; padding: 0; margin: 0; }
.header__servicesList b { display: block; font-size: 16px; font-weight: 600; color: #000; margin: 0 0 10px; }
#header .header__servicesList a { display: block; width: 100%; line-height: 20px; color: #6a6a6a; font-size: 14px; position: relative; }
#header .header__servicesList a:before { content: ''; display: block; position: absolute; left: 60px; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; opacity: .4; }
#header .header__servicesList a.professionally-designed-website:before{background: url('https://assets.web.com/wcom_sf/Checkout/HeaderFooter/Solution/custom_website.svg') no-repeat 50% 50%;}
#header .header__servicesList a.ecommerce-website-builder:before{background: url('https://assets.web.com/wcom_sf/Checkout/HeaderFooter/Solution/ecommerce.svg') no-repeat 50% 50%;}
#header .header__servicesList a.professionally-built-wordpress-website:before{background: url('https://assets.web.com/wcom_sf/Checkout/HeaderFooter/Solution/wordpress.svg') no-repeat 50% 50%;}
#header .header__servicesList a.search-engine-optimization:before{background: url('https://assets.web.com/wcom_sf/Checkout/HeaderFooter/Solution/seo.svg') no-repeat 50% 50%;}
#header .header__servicesList a.start-advertising-on-facebook-and-instagram:before{background: url('https://assets.web.com/wcom_sf/Checkout/HeaderFooter/Solution/social_media_marketing.svg') no-repeat 50% 50%;}
#header .header__servicesList a.Pay-Per-Click-Advertising:before{background: url('https://assets.web.com/wcom_sf/Checkout/HeaderFooter/Solution/pay_per_click.svg') no-repeat 50% 50%;}
.header__servicesList a span { display: block; font-weight: 400; color: #bd2380; font-size: 16px; }

#header .header__utils { text-transform: uppercase; font: 700 16px 'Open Sans', Helvetica, Arial, Sans serif;}

#header .header__utils a, 
#header .header__utils a:hover { 
	border: none; 
	font-size: 14px; 
	font-weight: 400;
}

#header .header__utilsLogin a { padding: 10px 0 10px 24px; position: relative; }
#header .header__utilsLogin a:after { display: block; content: ''; position: absolute; left: 0; top: 11px; width: 16px; height: 16px; background: url('https://graphics.web.com/wdc_201911_header1558/header-login.svg') no-repeat 0 0; }

/* #header .header__utilsPhone a:before {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url(https://www.web.com/content/dam/webdotcom/nav2/header_phone2.svg) no-repeat 0 0;
  position: relative;
  right: 0px;
  top: 3px;
  padding-right: 10px;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
} */

#header .header__utilsPhone a span {
    margin-top: -12px;
}

@media screen and (min-width: 891px){
  #header .header__utilsPhone a span {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(https://www.web.com/content/dam/webdotcom/nav2/header-phone.svg) no-repeat 0 0;
    position: relative;
    right: 0px;
    top: 7px;
    padding-right: 5px;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
}
}
#header__menuIcon, .header__servicesBack.header__servicesText { display: none;  }

main { padding-top: 104px; }
.interior-page main { padding-top: 159px;}

/* SUBNAV */
header .subNav__header { display: block; }
#header__navScrim { opacity: 0; transition: all 170ms ease-out; position: relative; }
#header__navScrim.open { opacity: 1; display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: rgba(3,19,51,0.7);}
.header__navOpen .header__subNavigation { position: relative; z-index: 0;}

.header__subNavigation { background: #083ea8; color: #fff; position: relative; }
.header__subNavigation h2 { color: #fff; font-size: 24px; margin: 0; padding: 0; font-weight: 300; }
#header__subNavFlex { display: flex; align-items: center; height: 55px; position: relative; }
#header__subNavFlex ul { margin: 0 0 0 auto; list-style-type: none; font-size: 12px; text-transform: uppercase; padding: 0;  }
#header__subNavFlex li { display: inline-block; position: relative;   }
#header__subNavFlex li ul { display: none; position: absolute; top: 55px; right: 0; min-width: 200px; background: #083ea8;}
#header__subNavFlex li:hover ul { display: block;  }
#header__subNavFlex li ul li { display: block; }
#header__subNavFlex li ul li a { display: block; }
#header__subNavFlex a, #header__subNavFlex span { color: #fff; line-height: 55px; height: 55px; padding: 0 18px; display: inline-block; }
#header__subNavFlex a:hover, #header__subNavFlex li:hover { background: #083b9e; text-decoration: none; }

#header__subNavFlex .header__dropDown{ width: 100%; width: calc(100% + 30px); left: -15px; right: -15px; overflow-y: auto; }
#header__subNavFlex .header__dropDown li, #header__subNavFlex .header__dropDown li ul, #header__subNavFlex .header__dropDown li a { display: block; }
#header__subNavFlex .header__dropDown li ul { position: static;  }
#header__subNavFlex  .header__dropDown li li { padding: 0 0 0 20px; }
.header__subNavList { width: auto; }

.header__dropDown.closed { max-height: 0; overflow: hidden; background: transparent;}
.header__dropDown { position: absolute; top: 55px; right: 0; width: 50%; min-width: 300px; display: block; max-height: 1000px; background: #083b9e; border-top: 1px solid rgba(255,255,255,0.1);}
#header__subNavButton { width: 50px; height: 100%; margin: 0 0 0 auto; position: relative; cursor: pointer; }
#header__subNavButton:after { content: ''; display: block; position: absolute; left: 50%; top: 50%; width: 1px; height: 8px; border-top: 8px solid #fff; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid transparent; transform: translate(-8px, -4px); }


/* BREAKPOINTS */

@media screen and (min-width: 890px) {
    #header__nav > ul > li > a:hover { border-bottom: 2px solid #000; }
    .header__services:hover .header__servicesList { max-height: 1000px; overflow-y: auto;  }
    .header__services:hover .header__servicesText { border-bottom: 2px solid #000; }
    #header .header__servicesList a:hover:before { opacity: 1;}
    #header .header__servicesList a:hover { background: #f2f2f2}
    #header .header__servicesList a:hover span { font-weight: 700;}
    #header .header__servicesList a, .header__servicesList b {  padding-left: 135px; }
    .header__servicesList .col:first-of-type { border-right: 1px solid #d6d6d6;  }
}
@media screen and (max-width: 1200px) {
  
}
@media screen and (max-width:992px) {
  /* SUBNAV */
    .header__subNavigation h2 { font-size: 18px; }
    #header nav .subNav__links { height: auto; max-height: 0; overflow-y: hidden; }
    #header nav .subNav__links.open { max-height: 1000px; left: 0; }
    .subNav__header { cursor: pointer; }

}
@media screen and (max-width:890px) {
    .header__topNav { height: 64px; }
    #header__menuIcon { display: block; border: 0; height: 40px; width: 30px; font-size: 10px; margin: 0 0 0 auto; font-weight: 600; color: #0840a1;  text-transform: uppercase; }
    #header__menuIcon .header__menuIconBar { background: #000; border-radius: 0;  }
    #header__nav > ul { height: auto; display: block; margin: 0; }

    .header__navOpen #header__nav { height: auto; max-height: 1000px; }
    .header__navOpen #header__nav { display: block; overflow-y:auto; position: fixed; background: #fff; left: 0; top: 65px; bottom: 0; border-top: 1px solid transparent; padding: 10px 40px;  }
    #header__nav .header__navPrime li, #header .header__services { display: block; border-bottom: 1px solid #d4d4d4; margin: 0; height: auto; }
    #header__nav .header__navPrime li a, #header__nav .header__services { display: block; width: 100%; padding: 20px 0;}
    #header__nav .header__navPrime > li > a:hover, .header__navPrime > li.header__services > .header__servicesText:hover { color: #bd2380; font-weight: 700; cursor: pointer; }
    .header__servicesText { padding: 0; }
    .header__servicesText:after { right: 0; top: 0; bottom: 0; height: auto; transform: rotate(-90deg); width: 15px;}
    #header__nav .header__utils li { text-align: center; display: block; height: auto; padding: 15px 0;}

    #header .header__utilsPhone a,#header .header__utils a:hover { font-size: 14px; font-weight: 400; position: relative; display: inline-block; padding-left: 32px; }
    #header .header__utilsPhone a:before { content: ''; display: block; width: 24px; height: 24px; background: url('https://graphics.web.com/wdc_201911_header1558/header-phone.svg') no-repeat 0 0; position: absolute; left: 0; }

    .header__servicesList { z-index: 100; top: 0; left: 100%; transition: all 170ms ease-out; bottom: 0; padding: 0 25px; }
    .header__servicesList .col { width: 100%; float: none;}
    .header__servicesList b { font-weight: 400; margin: 0; }
    .header__navOpen.header__servicesOpen .header__servicesList { max-height: 1000px; left: 0; overflow-y: auto;}
    .header__navOpen.header__servicesOpen .header__servicesList ul { padding: 0; border-right: 0;}
    #header .header__servicesList a:before { display: none; }
    #header__nav .header__servicesList li { border: 0; }

    #header__nav .header__servicesList div > li { border: none; padding: 5px 15px; background: #efefef; }
    #header__nav .header__servicesList div > li:last-of-type { padding-bottom: 20px; border-bottom: 1px solid #d4d4d4;}
    #header__nav .header__servicesList div > li a span { color: #6a6a6a}
    #header__nav .header__servicesList li a { padding: 0; }
    #header__nav .header__servicesList li a:hover, #header__nav .header__servicesList li a:hover span { color: #bd2380;}
    #header__nav .header__servicesBack.header__servicesText { text-indent: 30px; padding: 20px 0; border-bottom: 1px solid #d4d4d4; cursor: pointer; }
    .header__servicesBack.header__servicesText:after { right: unset; left: 0; transform: rotate(90deg);}

    .header__services .closed { display: none; }
    .header__toggle { display: block; position: relative; border-bottom: 1px solid #d4d4d4; padding: 20px 0; cursor: pointer; }
    .header__toggle:before, .header__toggle:after { transition: all 170ms ease-out; }
    .header__toggle:before { content: ''; display: block; position: absolute; width: 14px; height: 2px; background: #666;right: 15px; top: 30px;}
    .header__toggle:after { content: ''; display: block; position: absolute; width: 2px; height: 14px; background: #666;right: 21px; top: 24px;}
    .header__toggle.open { background: #efefef; font-weight: 700; text-indent: 15px; border: 0; }
    .header__toggle.open:before, .header__toggle.open:after { transform: rotate(-90deg); }
    .header__toggle.open:before { opacity: 0; }
}

@media (max-width: 767px){
  #header .container {
    max-width: 100%;
  }
}

@media ( min-width : 768px) and (max-width: 979px) {
	#header .container {
		max-width: 768px;
		margin-left: auto;
		margin-right: auto;
	}
}

@media ( min-width : 980px) {
	#header .container {
		max-width: 960px;
		margin-left: auto;
		margin-right: auto;
	}
}

#header__menuIcon{border:0;height:40px;width:30px;font-size:10px;margin:0 0 0 auto;font-weight:600;color:#0840a1;text-transform:uppercase;background:0;cursor:pointer}
#header__menuIcon:focus {outline: none;}
.header__menuIconBar{width:24px;background-color:#0840a1;border-radius:2px;height:3px;display:block;margin:4px auto;-webkit-transition:all .175s ease-in-out;-o-transition:all .175s ease-in-out;transition:all .175s ease-in-out;}
.header__menuLink.open .header__menuIconBar:nth-child(2){opacity:0}
.header__menuLink.open .header__menuIconBar:nth-child(1){-webkit-transform:translateY(8px) rotate(45deg);-ms-transform:translateY(8px) rotate(45deg);-o-transform:translateY(8px) rotate(45deg);transform:translateY(8px) rotate(45deg)}
.header__menuLink.open .header__menuIconBar:nth-child(3){-webkit-transform:translateY(-6px) rotate(-45deg);-ms-transform:translateY(-6px) rotate(-45deg);-o-transform:translateY(-6px) rotate(-45deg);transform:translateY(-6px) rotate(-45deg)}

@media screen and (min-width: 320px) and (max-width: 380px) {
  #header__nav > ul > li {
    margin: 0;
  }
  #header .header__utilsPhone a,#header .header__utilsPhone a:hover {
    font-size: 12px;
  }
}