/**CSS version 0.1**/

/**----------------------------------------boilerplate-------------------------**/

:root {
  --orange: #F9BA00;
  --blue: #00AEFE;
  --whiteText: #FDFAFA;
  --charcoal: #404040;
  --basicPadding: 100px 0;
  --spacingUnit: 25px;
  --spacingUnitTwo: calc(02 * var(--spacing-unit));
}

body {
	color:var(--whiteText);
	font-size:16px;
	font-weight:600;
	font-family: 'Roboto Flex', sans-serif;
	margin:0;
	line-height:1;
}

div {
	display:block;
	box-sizing:border-box;
}

img {
	height: 100%;
    width: auto;
}

li {
    list-style-type: none;
}

p {
    margin: 3px 0;
}

ul {
	margin:0;
	padding:0;
}



/**--------------------------------------------basics**/


.button {
    border: 3px solid white;
    border-radius: 7px;
    padding: 7px;
}

.button-list {
	display: flex;
	justify-content: flex-start;
}



.image-padding {
	padding:var(--basicPadding);
}


.innerwrapper {
	width:1240px;
	max-width:100%;
	margin:0 auto;
	padding: 0 20px;
}



/**-----------------------------------------------------colours**/

.blue {
	background-color: var(--blue);
}

.orange {
	background-color: var(--orange);
}

.charcoal {
	background-color: var(--charcoal);
}





/**-----------------------------------------------------fonts**/

h1 {
	font-size:2em;
	font-weight:900;
}

h2 {
	font-size:37px;
	line-height:28px;
}


/**------------------------------------------------------links**/

a {
	color:#d5b85e;
}

/**----------------------------------------------------------header**/

nav {
	background-color: var(--blue);
}

nav .innerwrapper {
    display: flex;
    justify-content: space-between;
	align-items: center;
}

.nav-1 {
	flex-basis: 50%;
}

.nav-1 img {
	width:137px;
}

.nav-2 {
	flex-basis: 15%;
}

.nav-2 .button {
	margin-right: var(--spacingUnit);
}

.nav-3 {
	flex-basis: 35%;
}

.nav-3 .button-list li {
	margin-left: 5%;
	font-size: 12px;
}

.nav-3 .button-list {
	justify-content: flex-end;
}

.top-box-3 {
	margin-bottom: var(--spacingUnit);
}


.top-box-4 .button {
	margin-right: var(--spacingUnit);
}

.white-box {
	background-color: #ffffff;
    display: inline-block;
	padding: 12px;
}





/**-----------------------------------------------------------------one**/

#one {
	background-image: url('/img/comsure-hero-image.png');
	background-repeat: no-repeat;
	background-size:cover;
}

#top-box {
    background: var(--orange);
	border: 7px solid white;
	border-radius: 20px;
	padding: var(--spacingUnit);
	max-width: 75%;
	width: 485px;
}

#top-box img {
	width: 200px;
}

.top-box-wrapper {
	display: flex;
	align-items: flex-end;
}



/**-------------------------------------------------------------footer**/

footer {
	background: var(--charcoal);
}




/**--------------------------------------------------------------mobile**/



@media only screen and (max-width: 790px) {
	
}