body, h1, h2, h3, h4, h5, h6, figure, pre, dl, dd, blockquote, input[type="radio"], input[type="checkbox"] {margin:0}
legend {padding:0}
fieldset, ul, ol {padding:0;margin:0}
ul, ol {list-style:none}
body {line-height:1}
main, figure, figcaption, img {display:block} /*--- <main> for IE 11 ---*/
img {max-width:100%;height:auto}
a {text-decoration:none}
fieldset {border:0}
input, textarea, select, button {display:block;max-width:100%;font-family:inherit;font-size:inherit;color:inherit}
label {display:table}
input[type="text"], input[type="email"], input[type="password"], input[type="search"] {-webkit-appearance:none} /*--- for Safari (add/remove types as needed) ---*/
button {line-height:inherit}
button::-moz-focus-inner {border:0} /*--- for Firefox ---*/
html {-ms-text-size-adjust:100%;-moz-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-size:1rem} /*--- optional base font size ---*/
p, input, button { font-family: 'Bw Modelica SS02', sans-serif; }
h1,h2,h3,h4,h5 { font-family: 'Bw Modelica SS02', serif; }
@font-face {
    font-family: 'Bw Modelica';
    font-style: normal;
    font-weight: 700;
    src: local('Bw Modelica'), url('../css/modelica/BwModelica-Bold.woff') format('woff');
}
@font-face {
    font-family: 'Bw Modelica';
    font-style: normal;
    font-weight: 500;
    src: local('Bw Modelica'), url('../css/modelica/BwModelica-Regular.woff') format('woff');
}
body { overflow-x:hidden; font-family: 'BW Modelica', sans-serif; }

header {
    background: #C9E4CA;
    padding: 10rem 11vw 12rem 11vw;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
}

header .col:last-child::before {
    position: absolute;
    content: '';
    background-image: url('../img/DigitalMarketing01.jpg');
    width: 100%;
    height: 100%;
    z-index: 2;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    left: 0;
    top: 0;
    -webkit-mask-image: url('../img/layer13.svg');
    -webkit-mask-position: left center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-image: url('../img/layer13.svg');
    mask-position: left center;
    mask-repeat: no-repeat;
    mask-size: contain;
}
header .col:last-child::before {
    -webkit-mask-size:  auto 120%; /* Increase height */
    mask-size:  auto 138%;
}

p a {
    color: #0b183e;
    text-decoration: underline;
}

header .col:last-child {
    margin-top: 0;
    margin-bottom: 0;
    width: calc(50% + 11vw );
    margin-right: -18vw;
    position: relative;
}

header .col {
    width: 50%;
}

header svg {
    height: 5.5rem;
    margin-bottom: 6rem;
}

h1 {
    color: #fff;
    font-size: 3.125rem;
    line-height: 1.2;
    margin-bottom: 4rem;
    font-weight: 300;
    letter-spacing: 1px;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'BW Modelica', sans-serif;
}


h2 {
    font-size: 2.125rem;
    line-height: 1.2;
    margin-bottom: 0;
    font-weight: 300;
    letter-spacing: 1px;
    opacity:0.5;
}

hgroup {
    padding-right: 10vw;
}

section#welcome {
    background: #fafafb;
    display: flex;
    flex-flow: row;
    padding: 7rem 11vw;
    justify-content: space-between;
}

.col {
    width: 44%;
}

p {
    opacity: 0.9;
    line-height: 1.9;
    margin-top: 0;
    letter-spacing: 0.5px;
    font-weight: 300;
    margin-bottom: 4.5rem;
    font-size: 1.10rem;
    font-family: 'BW Modelica', sans-serif;
}

p:last-child { margin-bottom:0; }

section#strat {
    padding: 11rem 11vw 8rem 11vw;
    display: flex;
    flex-flow: row;
    position: relative;
    justify-content: space-between;
    z-index: 2;
}

#strat img {
    height: 100%;
    object-fit: cover;
}

h3 {
    font-size: 2.5rem;
    letter-spacing: 1px;
    margin-bottom: 3rem;
    position: relative;
    font-weight: 300;
    padding-top: 5rem;
}

h3::before {
    content: '';
    position: absolute;
    background: #0B6E4F;
    height: 2px;
    width: 4rem;
    top: 0;
}

h4 {
    line-height: 1.7;
    margin-bottom: 5rem;
    margin-top: 4rem;
opacity:0.9;
    font-family: 'BW Modelica', sans-serif;
    font-weight: normal;
}

section#bullets {
    padding: 5rem 11vw;
    display: flex;
    position: relative;
   text-justify: start;
    justify-content: center;
    text-align: center;

    h3 {
        font-weight: 600; /* Semi-bold */
        text-align: center; /* Center align */
    }
}

section#bullets .col {
    text-align: left; /* Aligns bullet points to the left */
}   
.split-col {
    display: flex;
    justify-content: center;
}

.split-col .col {
    opacity: 0.9;
    line-height: 1.9;
    margin-top: 0;
    letter-spacing: 0.5px;
    font-weight: 300;
    margin-bottom: 4.5rem;
    font-size: 1rem;
    font-family: 'Bw Modelica SS02', sans-serif;
}

.split-col strong {
    font-size: 1.8rem;
    letter-spacing: 1px;
    margin-bottom: -1rem;
    position: relative;
    font-weight: 300;
    font-family: 'Bw Modelica SS02', serif;
    display: block;
}

section#bullets::before {
    content: '';
    position: absolute;
    background-image: url('../img/layer13.svg');
    width: 100vw;
    height: 114rem;
    left: 0;
    top: -53%;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.1;
}

#bullets .col {
    width: 50%;
    background: #0B6E4F;
    padding: 6rem 8rem;
    position: relative;
}

#bullets .col:first-child::after {
    content: '';
    position: absolute;
    width: 1px;
    height: 100%;
    background: #fff;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.1;
}

#bullets h3 {
    color: #fff;
    padding-top: 0;
}

#bullets h3::before { content: unset; }


li {
    color: #fff;
    opacity: 0.7;
    line-height: 1.9;
    margin-top: 0;
    letter-spacing: 0.5px;
    font-weight: 300;
    font-family: 'Bw Modelica SS02',sans-serif;
    margin-bottom: 1.3rem;
    position: relative;
    padding-left: 4rem;
}

li::before {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: #4eb7e0;
    left: 0;
    top: 0.7rem;
}

section#contact {
    text-align: center;
    padding: 5rem 33vw;
position:relative;
}
section#footer {
    background-color: #312F2F;
    text-align: center;
    padding: 5rem 13vw;
    position:relative;

}
section#footer p {
color: #FBF3EF;
font-size: 1rem;
}
#copyright{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #312F2F;
    color: #FBF3EF;
}
.copyright{
    font-size: 1rem;
}
section#analytics h3::before {
    left: 45% !important;
    height: 3px;
}
section#analytics {
    text-align: center;
    padding: 5rem 18vw;
position:relative;
}
#contact h3 {
    color: #0B6E4F;
}
#contact h3::before {
    left: 50%;
    transform: translateX(-50%);
}

/*csslint box-model:false*/
/*
Box-model set to false because we're setting a height on select elements, which
also have border and padding. This is done because some browsers don't render
the padding. We explicitly set the box-model for select elements to border-box,
so we can ignore the csslint warning.
*/

.pure-form input[type="text"],
.pure-form input[type="password"],
.pure-form input[type="email"],
.pure-form input[type="url"],
.pure-form input[type="date"],
.pure-form input[type="month"],
.pure-form input[type="time"],
.pure-form input[type="datetime"],
.pure-form input[type="datetime-local"],
.pure-form input[type="week"],
.pure-form input[type="number"],
.pure-form input[type="search"],
.pure-form input[type="tel"],
.pure-form input[type="color"],
.pure-form select,
.pure-form textarea {
    padding: 0.5em 0.6em;
    display: inline-block;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 3px #ddd;
    border-radius: 4px;
    vertical-align: middle;
    box-sizing: border-box;
}

/*
Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
since IE8 won't execute CSS that contains a CSS3 selector.
*/
.pure-form input:not([type]) {
    padding: 0.5em 0.6em;
    display: inline-block;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 3px #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

input.pure-input-1, textarea {
    margin-bottom: 2rem !important;
    padding: 1.5rem 2rem !important;
    font-family: 'Bw Modelica SS02', sans-serif;
    font-weight: 300;
}

#copy p::after {
    content: '';
    position: absolute;
    background: #4eb7e0;
    height: 2px;
    width: 2.5rem;
    left: 50%;
    bottom: -5rem;
    transform: translateX(-50%);
}

#copyright p {
    text-align: center;
    margin-top: 11rem;
    margin-bottom: 9rem;
    opacity: 1;
    position: relative;
}

button {
    display: inline-block;
    margin-top: 2rem;
    border: none;
    padding: 1rem 5rem;
    background-color: #0B6E4F;
    border-radius: 4rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
}
/* Chrome (as of v.32/34 on OS X) needs additional room for color to display. */
/* May be able to remove this tweak as color inputs become more standardized across browsers. */
.pure-form input[type="color"] {
    padding: 0.2em 0.5em;
}


.pure-form input[type="text"]:focus,
.pure-form input[type="password"]:focus,
.pure-form input[type="email"]:focus,
.pure-form input[type="url"]:focus,
.pure-form input[type="date"]:focus,
.pure-form input[type="month"]:focus,
.pure-form input[type="time"]:focus,
.pure-form input[type="datetime"]:focus,
.pure-form input[type="datetime-local"]:focus,
.pure-form input[type="week"]:focus,
.pure-form input[type="number"]:focus,
.pure-form input[type="search"]:focus,
.pure-form input[type="tel"]:focus,
.pure-form input[type="color"]:focus,
.pure-form select:focus,
.pure-form textarea:focus {
    outline: 0;
    border-color: #129FEA;
}

/*
Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
since IE8 won't execute CSS that contains a CSS3 selector.
*/
.pure-form input:not([type]):focus {
    outline: 0;
    border-color: #129FEA;
}

.pure-form input[type="file"]:focus,
.pure-form input[type="radio"]:focus,
.pure-form input[type="checkbox"]:focus {
    outline: thin solid #129FEA;
    outline: 1px auto #129FEA;
}
.pure-form .pure-checkbox,
.pure-form .pure-radio {
    margin: 0.5em 0;
    display: block;
}

.pure-form input[type="text"][disabled],
.pure-form input[type="password"][disabled],
.pure-form input[type="email"][disabled],
.pure-form input[type="url"][disabled],
.pure-form input[type="date"][disabled],
.pure-form input[type="month"][disabled],
.pure-form input[type="time"][disabled],
.pure-form input[type="datetime"][disabled],
.pure-form input[type="datetime-local"][disabled],
.pure-form input[type="week"][disabled],
.pure-form input[type="number"][disabled],
.pure-form input[type="search"][disabled],
.pure-form input[type="tel"][disabled],
.pure-form input[type="color"][disabled],
.pure-form select[disabled],
.pure-form textarea[disabled] {
    cursor: not-allowed;
    background-color: #eaeded;
    color: #cad2d3;
}

/*
Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
since IE8 won't execute CSS that contains a CSS3 selector.
*/
.pure-form input:not([type])[disabled] {
    cursor: not-allowed;
    background-color: #eaeded;
    color: #cad2d3;
}
.pure-form input[readonly],
.pure-form select[readonly],
.pure-form textarea[readonly] {
    background-color: #eee; /* menu hover bg color */
    color: #777; /* menu text color */
    border-color: #ccc;
}

.pure-form input:focus:invalid,
.pure-form textarea:focus:invalid,
.pure-form select:focus:invalid {
    color: #b94a48;
    border-color: #e9322d;
}
.pure-form input[type="file"]:focus:invalid:focus,
.pure-form input[type="radio"]:focus:invalid:focus,
.pure-form input[type="checkbox"]:focus:invalid:focus {
    outline-color: #e9322d;
}
.pure-form select {
    /* Normalizes the height; padding is not sufficient. */
    height: 2.25em;
    border: 1px solid #ccc;
    background-color: white;
}
.pure-form select[multiple] {
    height: auto;
}
.pure-form label {
    margin: 0.5em 0 0.2em;
}
.pure-form fieldset {
    margin: 0;
    padding: 0.35em 0 0.75em;
    border: 0;
}
.pure-form legend {
    display: block;
    width: 100%;
    padding: 0.3em 0;
    margin-bottom: 0.3em;
    color: #333;
    border-bottom: 1px solid #e5e5e5;
}

.pure-form-stacked input[type="text"],
.pure-form-stacked input[type="password"],
.pure-form-stacked input[type="email"],
.pure-form-stacked input[type="url"],
.pure-form-stacked input[type="date"],
.pure-form-stacked input[type="month"],
.pure-form-stacked input[type="time"],
.pure-form-stacked input[type="datetime"],
.pure-form-stacked input[type="datetime-local"],
.pure-form-stacked input[type="week"],
.pure-form-stacked input[type="number"],
.pure-form-stacked input[type="search"],
.pure-form-stacked input[type="tel"],
.pure-form-stacked input[type="color"],
.pure-form-stacked input[type="file"],
.pure-form-stacked select,
.pure-form-stacked label,
.pure-form-stacked textarea {
    display: block;
    margin: 0.25em 0;
}

/*
Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
since IE8 won't execute CSS that contains a CSS3 selector.
*/
.pure-form-stacked input:not([type]) {
    display: block;
    margin: 0.25em 0;
}
.pure-form-aligned input,
.pure-form-aligned textarea,
.pure-form-aligned select,
.pure-form-message-inline {
    display: inline-block;
    vertical-align: middle;
}
.pure-form-aligned textarea {
    vertical-align: top;
}

/* Aligned Forms */
.pure-form-aligned .pure-control-group {
    margin-bottom: 0.5em;
}
.pure-form-aligned .pure-control-group label {
    text-align: right;
    display: inline-block;
    vertical-align: middle;
    width: 10em;
    margin: 0 1em 0 0;
}
.pure-form-aligned .pure-controls {
    margin: 1.5em 0 0 11em;
}

/* Rounded Inputs */
.pure-form input.pure-input-rounded,
.pure-form .pure-input-rounded {
    border-radius: 2em;
    padding: 0.5em 1em;
}

/* Grouped Inputs */
.pure-form .pure-group fieldset {
    margin-bottom: 10px;
}
.pure-form .pure-group input,
.pure-form .pure-group textarea {
    display: block;
    padding: 10px;
    margin: 0 0 -1px;
    border-radius: 0;
    position: relative;
    top: -1px;
}
.pure-form .pure-group input:focus,
.pure-form .pure-group textarea:focus {
    z-index: 3;
}
.pure-form .pure-group input:first-child,
.pure-form .pure-group textarea:first-child {
    top: 1px;
    border-radius: 4px 4px 0 0;
    margin: 0;
}
.pure-form .pure-group input:first-child:last-child,
.pure-form .pure-group textarea:first-child:last-child {
    top: 1px;
    border-radius: 4px;
    margin: 0;
}
.pure-form .pure-group input:last-child,
.pure-form .pure-group textarea:last-child {
    top: -2px;
    border-radius: 0 0 4px 4px;
    margin: 0;
}
.pure-form .pure-group button {
    margin: 0.35em 0;
}

.pure-form .pure-input-1 {
    width: 100%;
}
.pure-form .pure-input-3-4 {
    width: 75%;
}
.pure-form .pure-input-2-3 {
    width: 66%;
}
.pure-form .pure-input-1-2 {
    width: 50%;
}
.pure-form .pure-input-1-3 {
    width: 33%;
}
.pure-form .pure-input-1-4 {
    width: 25%;
}

/* Inline help for forms */
.pure-form-message-inline {
    display: inline-block;
    padding-left: 0.3em;
    color: #666;
    vertical-align: middle;
    font-size: 0.875em;
}

/* Block help for forms */
.pure-form-message {
    display: block;
    color: #666;
    font-size: 0.875em;
}

.logo-img{
    margin-bottom: 25px;
}