@charset "UTF-8";
/* CSS Document */

@font-face {
  font-family: "Proxima Nova Bold";
  src: url('/assets/fonts/ProximaNova-Sbold.ttf');
}
@font-face {
  font-family: "Proxima Nova";
  src: url('/assets/fonts/ProximaNova.ttc');
}
@font-face {
  font-family: "Proxima Nova Black";
  src: url("/assets/fonts/ProximaNova-Xbold.ttf");
}
/*======= COLORS CSS ========*/

.white-text {color:#ffffff;}
.black-text {color:#000000;}
.blue-text {color:#3498d4;}
.azul-text {color:#77c4f7;}
.orange-text {color:#ff7a59;}


/*======= animation ========*/
.reveal{
  position: relative;
  transform: translateY(150px);
  opacity: 0;
  transition: 2s all ease;
}
.reveal.active{
  transform: translateY(0);
  opacity: 1;
}

/*======end animation 
===============================================================
===============================================================
==============================================================*/

body {
	background-size: 100% 100% !important; background: url("/assets/images/greyphin-bg.png") fixed no-repeat; font-family: Helvetica, Arial, "sans-serif"; line-height: normal;}
p {
	line-height: 25px;
}
p.small-text {
	font-size:small; 
	color:#cccccc; 
	margin:10px 0 0 0;
}
.body-text a, .body-text a:visited {
		color:#2e99df;
}
.site-map a, .site-map a:visited {
		color:#2e99df;
}
.container-top a, .container-top a:visited {color:#2e99df;}

/*--------HEADER Styles ----------------------*/

h1 {font-size:6em; font-family: "Proxima Nova Bold", "PT Sans", Tahoma, sans-serif; margin:0 0 0px 0; padding:0; line-height: 100%; font-weight:bold;}
h2 {font-size:4em; font-family: "Proxima Nova Black", "PT Sans", Tahoma, sans-serif; margin:0 0 0px 0; padding:0; line-height: 100%;font-weight:bold; }
h3 {font-size:1.5em; padding:0; margin:0 0 0px 0; line-height: 130%; font-weight:bold;}

.light h3 {font-size:1.5em; font-weight:300; color:#000000; padding:0; margin:0 0 20px 0; line-height: 130%;}
.blue h2 {font-size:4em; color:#000000; padding:0; margin:0 0 20px 0; line-height: 100%;}

.core-values h3, .core-values h2 {margin:0;}
.core-values h2 {font-size:3em; margin-bottom:20px;}
.core-values h3 {font-size:3em;}

.small-col h3 {font-size:1.7em; margin-bottom:20px;}
.hero-content h3 {font-size:1.5em; margin:0;}


/*============ container css ================*/

.container-top {width:100%; padding:2% 10% 7% 10%; margin-top:-2px; background:#eeeeee; color:#000000;}
.container-top .small-col {width:50%; border:none; padding:0;}
.container {width:100%; padding:5% 10%;}
.container strong {font-size:1.4em;}
.two-column {display:flex; width:100%; gap:40px;}
.large-col {width:70%;}
.large-col strong {font-size:1.2em;}
.small-col{width:30%; flex-direction: column; border-left:2px solid #ffffff; padding:2% 0 0 3%; justify-content: center;}
.number {width:100%; display:inline-block; diplay:flex; align-content: center; margin-bottom:1%;}
.number img {width:30%; float:left; margin-right:20px;}
.number-desc {width:100%; display:inline-block;}

.dark {background:url("/assets/images/dark-greyphin-bg.jpg") no-repeat fixed; color:#cccccc; padding-top:4%; padding-bottom:3%; display:inline-block;}
.light {background:#eeeeee; color:#000000; padding-top:4%; padding-bottom:3%; display:inline-block;}
.white {background:#ffffff; color:#000000; padding-top:4%; padding-bottom:3%; display:inline-block;}
.blue {background:#3498d4; color:#ffffff; padding-top:4%; padding-bottom:3%; display:inline-block;}


.center-text {text-align:center;}
.center-text img {height:3%; margin-bottom:20px;}

.tools-text {text-align:center; position:relative; margin-bottom:20px;}
.tools-text img {width:10%; min-width:120px; margin-bottom:20px; position:absolute center; margin-top:-7%;}

.tools-we-love {
	width:100%; display:flex; gap:40px;
}
.tools-we-love h3 {
	font-size:2.2em;
	color:#3498d4;
	margin-bottom:15px;
	display:inline-block;
}
.tools {
	border:1px solid #cccccc; 
	border-radius:15px; 
	padding:2%;
    width:100%;
	text-align:center;
	margin:20px 0px;}
.tools img {
	width:30%;
	display:inline-block;
	min-width:200px;
	padding:0 1%;
}


/*==========services page css ==============*/
.reckless-optimism {width:100%;  display:inline-block;}
.reckless-optimism .large-col p {font-size: 1.2em;  display: inline-block; }
.reckless-optimism .small-col {width:30%; display: inline-block; vertical-align: middle; margin-right:50px; padding:0;}
.reckless-optimism .large-col {display:inline-block; width:60%; vertical-align: middle;}
.reckless-optimism .small-col img {width:100%; }


.expand {width:100%; display:inline-block;}
.expand .small-col img {width:100%; }
.expand .small-col {border:none;width:45%; padding:0; display:inline-block; vertical-align:top; }
.expand .large-col {width:65%}
.expand .large-col  h2 {font-size:3.5em;margin:0;}
.expand .large-col  h3 {font-size:2em; font-weight:bold;}

.inbound {width:100%; display:inline-block;}
.inbound .small-col img {width:100%;  }
.inbound .small-col {border:none;width:30%; padding:0; display:inline-block; margin-right:30px;}
.inbound .large-col {width:65%; display:inline-block; vertical-align: top;}
.inbound .large-col  h2 {font-size:3.5em;margin:0;}
.inbound .large-col  h3 {font-size:2em; font-weight:bold;}
.inbound button:hover {cursor:pointer;}
.inbound button a {color:#000000;}
.inbound button a:hover {color:#ffffff; }

.seo {width:100%; display:inline-block;}
.seo .small-col img {width:100%;  }
.seo .small-col {border:none;width:35%; padding:0; display:inline-block; margin-right:30px; }
.seo .large-col {width:60%; display:inline-block; vertical-align: top;}
.seo .large-col  h2 {font-size:3.5em;margin:0;}
.seo .large-col  h3 {font-size:2em; font-weight:bold;}
.dark.seo button:hover {cursor:pointer; background:#ffffff;}
.dark.seo button a {color:#ffffff;}
.dark.seo button a:hover {color:#000000; }

.hubspot-marketing {width:100%; display:inline-block;}
.hubspot-marketing .small-col img {width:100%;  }
.hubspot-marketing .small-col {border:none;width:35%; padding:0; display:inline-block; margin-right:30px;}
.hubspot-marketing .large-col {width:60%; display:inline-block; vertical-align: top;}
.hubspot-marketing .large-col  h2 {font-size:3.5em;margin:0;}
.hubspot-marketing .large-col  h3 {font-size:2em; font-weight:bold;}
.light.hubspot-marketing button:hover {cursor:pointer; background:#000000;}
.light.hubspot-marketing button a {color:#000000;}
.light.hubspot-marketing button a:hover {color:#ffffff; }

@media (max-width: 768px) {
	
	.hubspot-marketing .small-col, .seo .small-col, .inbound .small-col, .expand .small-col, .reckless-optimism .small-col {width:100%;display:inline-block; margin:0 0 15px 0; }
	.hubspot-marketing .large-col, .seo .large-col, .inbound .large-col, .expand .large-col, .reckless-optimism .large-col {width:100%;display:inline-block; margin:0 0 15px 0;}
	
}

/*===========end services page css ===========*/


.hubspot-section {background:#ffffff; margin-top:-5px;}

.hubspot-section .center-text img {
	width:50%;
	min-width:250px;
	
}
.hubspot-tools {
	display:flex; gap:30px; 
	margin:20px 0;
	
}
.hubspot-wave {display:inline-block; width:100%;margin:-160px 0 0 0; padding:0;}
.hubspot-wave img {width:100%; }
.hubspot-div {
	display:block;
	text-align:center;
	width:100%;
}
.hubspot-btn {width:100%; display:block; background:#ffffff; padding-bottom:2%;}
.hubspot-btn button {border:2px solid #ff7a59;}
.hubspot-btn button:hover {cursor:pointer; background:#ff7a59;}
.hubspot-btn button a {color:#ff7a59;}
.hubspot-btn button a:hover {color:#ffffff;}


.container.dark button {
	border:1px solid #ffffff;
	margin-top:20px;
}
.bottom-btn {
	padding-bottom:120px;
}
.dark button a {color:#ffffff;}

.core-values img {width:10%;}
.values {text-align:justify;width:70%;display:inline-block;}
.values p {font-size:1.2em; line-height: 1.5em; font-weight:lighter;}

.follow-us {display:inline-block; width:100%;}
.follow-us img {width:10%;}
.follow-us img:hover {opacity:.5; -webkit-transition: all .5s ease; transition: all .5s ease;}
/*============ end container css ================*/

/*=========form css========================*/

.large-col input[type=text] {
	border-radius:5px; border:2px solid #aaaaaa; font-size:1.2em; padding:1%; width:100%; margin:15px 0;
}
.large-col label {
	font-size:1.2em; font-weight: bold; color:#3498d4;
}
.large-col textarea {
	border-radius:5px; border:2px solid #aaaaaa; font-size:1.2em; padding:1%; width:100%; margin:15px 0px; 
}
.large-col input[type=submit] {background:#000000; color:#3498d4; border-radius:5px; border:none; padding:2%; font-size:1.2em; font-weight:bold; margin-top:15px;}
.large-col input[type=submit]:hover {background:#3498d4; color:#ffffff; -webkit-transition: all .5s ease; transition: all .5s ease; cursor:pointer;}

/*========= end form css ==================*/

/*======= responsive header sizes =============*/

@media (max-width: 768px) {
	
	h1 {font-size:4em;}
	h2 {font-size:2.5em;}
	h3 {font-size:1.2;}
	.light h3 {font-size:1.5em;}
	.blue h2 {font-size:3em;}

      /*============ container css ================*/
	.two-column {flex-direction: column;}
	.large-col {width:100%;}
	.small-col{width:100%; flex-direction: column; border:none; padding:0 0 0 3%; justify-content: center;}
	
	
	.number img {width:10%; float:left; margin-right:20px; margin-bottom:10px;}
	
	.tools-we-love {flex-direction: column;}
	.hubspot-tools {flex-direction: column;}
}

/*--------END HEADER Styles ----------------------*/

/*--------START BUTTON Styles ----------------------*/

.center {text-align:center; width:100%;}
.container.blue button {border:3px solid #ffffff; background:none; color:#ffffff; padding:1% 2%; border-radius:10px; margin:0 0 15px 0;}
.container.blue button:hover {background:#ffffff; color:#3498d4; -webkit-transition: all 1s ease; transition: all 1s ease;}

.container-top button {border:3px solid #000;  font-size:1.5em; font-weight:bold; cursor: pointer;}
.container-top button:hover {background:#000000; color:#ffffff; -webkit-transition: all 1s ease; transition: all 1s ease;}
.container button {border:3px solid #000;  font-size:1.5em; font-weight:bold; cursor: pointer;}
button {border:3px solid #000; background:none;  font-size:1.5em; padding:1% 2%; border-radius:10px; margin:0 0 15px 0; font-weight:bold; cursor: pointer;}
button:hover {background:#000000; color:#ffffff; -webkit-transition: all 1s ease; transition: all 1s ease;}

/*--------end BUTTON Styles ----------------------*/

/*--------PARAGRAPH Styles ----------------------*/

p {margin:0 0 20px 0;}
.hero p {color:#ffffff; font-size:1.3em; line-height: 150%;}

/*--------END PARAGRAPH Styles ----------------------*/

/*--------HERO Styles ----------------------*/

.hero {color:#ffffff; width:100%; display:inline-block; padding:1% 10% 10% 10%; }
.hero-content {width:70%; display:inline-block; }

.arrow-down {width:4%; margin-bottom: 5%; }
.arrow-down img {width:100%;}

/*--------end HERO Styles ----------------------*/

.big-caption {
	border-top:10px solid #000;
	border-bottom:10px solid #3498d4;
	color:#3498d4;
	margin-bottom:1.5%;
	padding:1.5% 0 0 0;
}
.big-caption h2 {
	color:#3498d4;
}

:root{
    --white: #f9f9f9;
    --black: #36383F;
    --gray: #85888C;
} /* variables*/

/* Reset */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a{
    text-decoration: none;
	
}
ul{
    list-style: none;
}

.body-text h2 {
	color:#2e99df;
	margin:20px 0px;
	font-size:30px;
	line-height: 120%;
}
.site-map {
	display:flex;
	width:100%;
	
}
.site-map div {
	width:100%;
	margin-bottom:25px;
}
.site-map h2 {
	color:#2e99df;
	margin:20px 0px;
	font-size:30px;
	line-height: 120%;
}
.site-map li {
	margin-bottom:10px;
}
.site-map li a, .site-map li a:visited{
	color:#666666;
}
.site-map li a:hover {
	color:#2e99df;
}


.header {
	display:flex;
	width:100%;
	padding:0% 0% 70px 0%;
	margin-top:20px;
	margin-bottom:30px;
	align-items: center;
	justify-content: space-between;
}

.logo {
	width:20%;
	display:block;
	min-width:250px;
	
}/* Logo */

.logo img {
	width:100%;
}

/* Nav menu */
.nav{
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: var(--black);
    overflow: hidden;

}
.menu a{
    display: block;
    padding: 0px 10px;
    color: var(--white);
}
.menu a:hover{
    background-color: var(--gray);
}
.nav{
    max-height: 0;
    transition: max-height .5s ease-out;
}
/* Toggle menu icon */
.side-menu:checked ~ nav{
    max-height: 100%;
}
.side-menu:checked ~ .hamb .hamb-line {
    background: transparent;
}
.side-menu:checked ~ .hamb .hamb-line::before {
    transform: rotate(-45deg);
    top:0;
}
.side-menu:checked ~ .hamb .hamb-line::after {
    transform: rotate(45deg);
    top:0;
}

/* Menu Icon =============================*/

.hamb{
    cursor: pointer;
    float: right;
    padding: 10px 20px;
}

.hamb-line {
    background: var(--white);
    display: block;
    height: 2px;
    position: relative;
    width: 24px;

} 

.hamb-line::before,
.hamb-line::after{
    background: var(--white);
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
}
.hamb-line::before{
    top: 5px;
}
.hamb-line::after{
    top: -5px;
}

.side-menu {
    display: none;
} /* Hide checkbox */

/* Nav menu =============================*/

.nav{
    width: 90%;
    height: 100%;
    position: fixed;
    background-color: #000000;
    overflow: hidden;

}
.menu a{
    display: block;
    padding: 10px;
    color: var(--white);
	border:0;
	text-transform:uppercase;
}
nav li {list-style:none;}
.menu a:hover{
    background-color: var(--gray);
}
a.collaborate-btn {
	color:#2e99df;
	border:2px solid #2e99df;
	border-radius:5px;
	padding:5px 12px;
	margin-top:1px;
}

a.collaborate-btn:hover {
	color:#ffffff;
	border:2px solid #2e99df;
	border-radius:5px;
	background:#2e99df;
}
.nav{
    max-height: 0;
    transition: max-height .5s ease-out;
}


@media (min-width: 768px) {
    .nav{
        max-height: none;
        top: 0;
        position: relative;
        float: right;
        width: fit-content;
        background-color: transparent;
		align-items: center;

    }
    .menu li{
        float: left;
    }
    .menu a:hover{
        background-color: transparent;
        color: var(--gray);

    }

    .hamb{
        display: none;
    }
	
}
/*======end general CSS 
===============================================================
===============================================================
==============================================================*/



/*** Hero ==================================================***/

.hero {
	color:#ffffff;
	width:100%;
	display:inline-block;
	padding:1% 10%;
}

.home {background:url("/assets/images/wave.png") no-repeat bottom;background-size:102% 88%;}
.collaborate {background:url("/assets/images/wave.png") no-repeat bottom;background-size:100%;}
.culture {background:url("/assets/images/hero-culture.png") no-repeat bottom;background-size:100%;}
.site-map-head {background:url("/assets/images/wave.png") no-repeat bottom;background-size:100%;}
.privacy {background:url("/assets/images/privacy-wave.png") no-repeat bottom;background-size:100%;}
.fully-remote {background:url("/assets/images/fully-remote-globe.png") #eee no-repeat right fixed;background-size:40%;}
.boost {background:url("/assets/images/boost-image.png") #2e99df no-repeat left bottom;}
.resources {background:url("/assets/images/resources-wave.png") no-repeat bottom;background-size:101%; }
.services-head {background:url("/assets/images/services-wave.png") no-repeat bottom; background-size:100%;}




/*** End Hero Section  ==================================================***/

/*** Homepage Services***/

.page {
	background:#eeeeee;
	margin:-5px 0 0 0;	
}

.services {
	background:#eeeeee;
}
.services-drivers {
	background:#eeeeee;
	display: flex;
	color:#666;
	width:100%;
	margin-top:2%;

}
.services h2 {
	color:#666666;
	margin:20px 0px;
}
.services h3 {
	margin-bottom:25px;
}
.driver {
	display:inline-block; 
	position:relative;
	text-align:center; 
	width:100%;
	padding:15px 15px 60px 15px; 
	margin:1%; 
	background:#ffffff; 
	border-radius:10px;
}
.driver:hover {
	filter: invert(100%); -webkit-transition: all 1s ease; transition: all 1s ease;
}
.driver img {
	width:80%;
	margin:0 0 15px 0;
}
.blue-arrow {
	width:70px; 
	position:absolute;
	left:40%;
	bottom:0;
	display:inline-block;
	margin:25px 0 0 0;
}

.privacy-table {
	background:#ffffff;
	border-radius:10px;
	padding:2%;
}
.privacy-table p {
	margin-bottom:25px;
}
.privacy-table h3 {
	margin:0px 0px 10px 0px;
	font-size:20px;
	font-weight: bold;
}
.privacy-table ul {
	margin-left:20px;
}
.privacy-table li {
	list-style:circle;
	margin-bottom:10px;
	font-size:small;
}

/* //// MARKETING TIPS CSS HOME PAGE /////////////////////////////
////////////////////////////////////////////////////////////////*/

.marketing-tips {
	display:inline-block;
	width:100%;
	text-align:center;
}
.marketing-tips h1 {
	color:#ffffff;
	text-align:center;
	display:inline-block;
	width:100%;
	font-size:70px;
}
.color-blue {
	color:#2e99df;
}
.tip-posts {
	width:100%; 
	display:flex;
	flex-direction: row;
	color:#000000;
	margin-bottom:20px;

}
.tip {
	width:100%;
	background:#ffffff;
	padding:20px;
	margin:1%;

}
.tip:hover {
	background:#cccccc; cursor: pointer;
	

}
.tip h2 {
	font-size:25px;
	margin-bottom:10px;
}
.tip img {
	width:100%;
	height:150px;
	margin:0 0 15px 0;
	object-fit: cover;
}

/* //// SUBSCRIPTION CSS HOME PAGE /////////////////////////////
////////////////////////////////////////////////////////////////*/

.subscription {
	display:flex;
	width:100%;
	gap:40px;
	
}
.subscription-title {
	display:inline-block;
	color:#ffffff;
	width:100%;
}
.subscription-title h1 {
	font-size:55px;
	width:100%;
	text-align:center;
}
.sub-form {
	vertical-align: top;
	width:100%;
	
}

/*ul.hs-error-msgs, 
label.hs-main-font-element,  */
label#label-email-5695fdb9-2ad0-4315-816e-16930ba9458b {
    display: none;
}

.submitted-message {
    font-size: 21px;
    color: #fff;
}

.hs_error_rollup, ul.hs-error-msgs {
    color: #fff;
    display: inline-grid;
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
}


input.email,
input.hs-input {
	padding:1.5%; 
	font-size:30px;
	display:inline-block;
	vertical-align: top;
	border:#ffffff solid 2px;
	background:none;
	border-radius:5px;
	color:#666666;
	float:left;
	margin-right:10px;
	width:75%;
}
input.submit-button,
.submit-button,
.hbspt-submit-button {
	display:inline-block;
	vertical-align: top;
	background:#2e99df;
	border-radius:5px;
	color:#ffffff;
	font-weight:bolder;
	padding:0% 3%;
	font-size:45px;
	width:15%;
	border:none;
	float:left;

}
form {
	display:inline-block;
	width:100%;
}
.sub-form a {color:#2e99df;
}


/* //// HUBSPOT CSS HOME PAGE /////////////////////////////
////////////////////////////////////////////////////////////////*/


.hubspot {
	width:100%;
	background:#2e99df;
	color:#ffffff;
	padding:5% 10% 0% 10%;
	margin-top:-5px;
	
}
.hubspot-head {
	display:flex; 
	gap:20px;
	padding:0% 0 2% 0;
	border-bottom:1px solid #fff;
}
.hubspot p {
	color:#ffffff;
}
.hubspot-logo {
	display:inline-block;
	width:100%;
}
.hubspot-logo img {
	width:100%;
}
.hubspot-details {
	display:inline-block;
}
.hubspot-buttons {
	display: flex;
    flex-flow: row wrap;	
	width:100%;
	background:#2e99df;
	color:#ffffff;
	gap:20px;
	padding:2% 10% 5%;
	align-items: center;
    justify-content: center;
}
.hubspot-buttons div {
	background:#106aa5;
	padding:2% 2%;
	border-radius:10px;
	font-size:20px;
	text-align:center;
	width:30%
}
.divider {
	display:inline-block;
	background:#106aa5;
	color:#ffffff;
	width:100%;
	height:1px;
}

.blue-wave {
	background:url(/assets/images/blue-wave-short.png) no-repeat;
	background-size:100%;
	background-position:bottom;
	display:inline-block;
	width:100%;
	padding:180px 0 0 0;
	margin-top:-50px;
}
	
/* //// COLLABORATE CSS HOME PAGE /////////////////////////////
////////////////////////////////////////////////////////////////*/

.collaborate-section {
	display:inline-block;
	width:100%;
	padding:5% 5%;
	background:url("/assets/images/collaborate-bg.png") no-repeat fixed;
	background-size:100%;
	text-align:center;
}
.collaborate-section h1 {
	font-size:50px;
}
.collaborate-section button {
	font-size:30px;
	background:#000000;
	border-radius:10px;
	color:#2e99df;
	padding:1% 3%;
	text-transform: uppercase;
	border:none;
	margin-top:20px;
}
.collaborate-section button:hover {background:#2e99df;}
.collaborate-section button a {color:#ffffff;}

.footer {
	width:100%;
	background-size:100%;
	padding:3% 5%;
	display:inline-block;
	text-align:center;
}
.footer-logo {
	display:inline-block;
	width:30%;
	margin:30px 0 20px 0;
	min-width:300px;
	
	
}
.footerinfo {
	display:inline-block;
	width:100%;
	text-align:center;
}
.footerinfo p {
	color:#cccccc;
}
.footerinfo a, .footerinfo a:visited {
	color:#2e99df;
}
.social-icons {
	display:flex;
	width:100%;
	align-items: center;
	gap:15px;
  	justify-content: center;
	margin:20px 0 0 0;
}
.social-icons img {
	width:50px;
}

.copy {
	font-size:small;
	text-align:center;
	display:inline-block;
}
.copy a {
	color:#2e99df;
}
.copy p {
	color:#cccccc;
}

@media (min-width: 768px) {
    .footer-nav{
        max-height: none;
        top: 0;
        position: relative;
        display:inline-block;
        width: fit-content;
        background-color: transparent;
		align-items: center;
   }


}

@media (max-width: 768px) {
	
	.services-drivers {flex-direction: column;}
	.tip-posts {width:100%; display:flex;flex-direction: column;}
	.subscription {
	display:flex;
	flex-direction: column;
	width:100%;
	
}
	.subscription-title h1 {
	font-size:45px;
	width:100%;
	text-align:center;
	}
	
	.hubspot-head {
	display:flex; 
	flex-direction: column;
	}
	.hubspot-buttons div {
	background:#106aa5;
	padding:2% 2%;
	border-radius:10px;
	font-size:20px;
	text-align:center;
	width:45%;

	}
	.hero-content {
		width:100%;
		display:inline-block;
	}
	
}


/* The side navigation menu */
.sidenav {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #111; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 18px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left .5s;
  padding: 0px;
	max-width:1600px;
	margin:0 auto;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}


.hamburger div {
  width: 35px;
  height: 3px;
  background-color:#3498d4;
  margin: 6px 0;
}
.footer-ham {display:inline-block;}
.starter {display:flex; gap:30px; width:50%;}

@media (max-width: 1200px) {
	.starter {width:100%;}
	nav {display:none;}
	.footer-nav {display:none;}
	
}