nav{

? background:transparent;

? height:50px;

? }

h1

{

padding:12px;

border-top:2px solid #fff;

border-bottom:2px solid #fff;

}

h2

{

font-size:30px;

}

h3

{

font-size:24px;

} ?

?#banner{

?background:transparent;

?height:700px;}

?header

?{

?background:rgba(0,0,0,0.4);

?}

?

? ul

?{

?margin:0;

?}

?

?nav ul{

? ? ? ?list-style:none;

? margin:0;

float:right;

? ? ? ?}

?

nav ul li,nav logo{

line-height:50px;

display:inline-block;

margin-right:20px;

? ? ? ? ?}

?

nav ul li a {

? ? ? ? ? ?line-height:50px;

? text-decoration:none;

? display:inline-block;

? height:50px;

? color:#fff;

? }

??

?div.logo{

float:left;

padding:10px;

}

div.logo a{

text-decoration:none;

? ? ? ? ? ? ? }

#banner .inner

{

max-width:300px;

text-align:center;

margin:0 auto;

position:relative;

top:160px;

}

#banner .inner h1{

margin:0;

}

button{

border:none;

background:#333;

color:#eee;

padding:10px;

}

#banner button{padding:14px 60px;}

.sub-heading{

line-height:30px;

margin:30px;}

#banner .inner .more{

margin-top:220px;}

.logo{

? ? ?font-size:20px;

font-weight:700;

letter-spacing:1px;

?

?}

.logo a{

? ? ? ?color:#fff;

? ? ? ?}

.green-section{

text-align:center;?

background:#089db0;

color:#fff;

padding:100px 0;

? ? ?}

.wrapper{

width:680px;

margin:0 auto;

? ? ? ?}

.hr{

? ?height:2px;

? ?width:100%;

?/* ?background:#; */

? ?margin:20px auto;

? ? }

.green-section .hr{

background:#078494;

width:60%;

}

p.sub-heading{

font-size:18px;}

.green-section .icon-group .icon?

{display:inline-block;

width:80px;

height:80px;

background:#086D79;

transform:rotate(45deg);

border:1px solid #000;

margin:20px;

}

.green-section .icon-group

{

margin-top:60px;

}

.gray-section

{

background:#181C1D;

color:#747777;?

}

.gray-section .img-section

{

width: 45%;

}

.img-section img

{

width: 100%;

}

.gray-section .text-section

{

width: 55%;

}

.article-preview > div

{

float: left;

font-size: 0;

}

.article-preview:nth-child(odd)

{

background-color:rgba(255,255,255,0.05);

}

.article-preview:after

{

content: '';

display: block;

clear: both;

}

.text-section h2

{

margin-bottom:20px;

font-size:30px;

}

.text-section p

{

font-size:18px;

letter-spacing:1px;

}

.text-section .sub-heading

{

font-size:22px;

margin-top:0;

}

.text-section

{

position:relative;

top:68px;

left:50px;

}

.text-section > *

{

max-width:90%;

}

.purple-section

{

padding:80px;

background:#3f3965;

color:#fff;

}

.purple-section .heading-wrapper

{

text-align:center;

}

.purple-section .hr

{

background:#373259;

width:60%;

}

.card

{

float:left;

width:50%;

min-height:300px;

padding:50px;

box-sizing:border-box;

/* border:1px solid white; */

}

.card:first-child

{

background:rgba(0,0,0,0.05);

}

.card:nth-child(2)

{

background:rgba(0,0,0,0.09);

}

.card:nth-child(3)

{

background:rgba(0,0,0,0.13);

}

.card:nth-child(4)

{

background:rgba(0,0,0,0.17);

}

.card:nth-child(5)

{

background:rgba(0,0,0,0.23);

}

.card:nth-child(6)

{

background:rgba(0,0,0,0.27);

}

.card padding

{

font-size:18px;

letter-spacing:1px;

}

?.clearfix:after

? {

content: '';

display: block;

clear: both;

?}

?

?footer

?{

?background:#333;

?color:#fff;

?min-height:200px;

?text-align:center;

?padding-top:80px;

?}

?

?

?ul .share-group

?{

?display:block;

?width:1080px;

?margin:0 auto;

?/* padding-top:80px; */

?}

?

?.share-group li

?{

?display:inline-block;

?padding:10px;

?}

?

?.copy

?{

?padding:60px;

?}

?

?.main-wrapper

?{

?background: url(../img/banner.jpg);

?background-attachment:fixed;

?background-repeat:no-repeat;

?}