body { /*background-color: #ebe8ec;*/ background-color: #f9f7f74d; color: #777; font-family: Arial, Helvetica, sans-serif; height:100%; overflow-x:hidden; } nav{ height: auto; padding: 1em; } /*#nav1{ background-color: white; height: 100px; top:0; }*/ #nav2{ top:0; bottom:0; margin-top:-10px; background-color:#fff; color: white; width:98.95%; height: 50px; padding-top: 25px; padding-bottom: 30px; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; margin-left: 475px; } li { float: left ; display: inline; margin-left:20px; } li a { display: block; color: #2d2d2d; text-align: center; padding: 20px 16px; text-decoration: none; font-size: 18px; } .topnav-right { float: right; margin-right:15px; margin-top:6px; height: 100%; /* margin-right: 1%;*/ } .bttn{ background-color: #359fb0; color: white; height:40px; width:95px; } .bttn:hover{ /*background-color: #555;*/ background: #2b3532; border: 1px solid #fff; color: #fff; cursor: pointer; box-shadow: 0px 0px 6px 4px rgba(230,196,196,0.3); } p { line-height: 20px; margin-bottom: 20px; } h1 { font-family: 'Crete Round', serif; font-weight: bold; color: black; margin-top:200px; font-size: 45px; text-align: center; } h2 { font-weight: 300px; color: white; font-size: 55px; text-align: center; margin-bottom: 20px; } h3 { font-size: 30px; color: #444; font-weight: bold; text-align: center; margin-bottom: 20px; } h4 { font-size: 24px; color: #444; font-weight: bold; text-transform: uppercase; margin-bottom: 20px; } h5 { font-size: 15px; color: #444; font-weight: bold; text-transform: uppercase; } a { text-decoration: none; color: #444; } a:hover { color: #02b8dd; } strong { font-weight: bold; } small { font-size: 13px; color: #777; font-style: italic; } .clear { clear: both; } .wrapper { margin: 0 auto; padding: 0 10px; width: 940px; } #hero-image { min-height:100%; min-width: 100%; position:absolute; background: url(home.jpg) no-repeat center; /*background-size: 100% 100%;*/ /*box-sizing:border-box;*/ background-size: cover; padding-top: 50px; /* background-position: center; background-repeat: no-repeat;*/ /*background:#e8eced url("home.jpg") no-repeat center ;*/ } #hero-image h2 { margin: 180px 0 40px 0; } .button-1 { display: block; text-align: center; background: #444; border-radius: 3px; color: #fff; width: 180px; height: 50px; font-size: 20px; line-height: 50px; margin: 0 auto; } .button-1:hover { background-color: #02b8dd; color: #fff; } #features ul { margin: 600px 0; } #features ul li { width:280px; margin-top: 100px; float: left; margin-right: 10px; text-align: center; } #features ul li.feature-1 { background: url('../images/features-icon-1.png') no-repeat top center; } #features ul li.feature-2 { background: url('../images/features-icon-2.png') no-repeat top center; } #features ul li.feature-3 { background: url('../images/features-icon-3.png') no-repeat top center; } .section { padding-top: 90px; padding-bottom: 90px; } .join { min-height:100%; min-width: 100%; position:absolute; background: url(bg2.jpg) no-repeat center/cover; margin-top:-500px; } .join .sectionheader h3 { color: #fff; } .sectioninverse .sectionheader h3 { color: #fff; } .sectionheader p { font-size: 16px; color: #d1e1f9; margin-top: 10px; margin-bottom: 0; } .joinitems { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-left: -15px; margin-right: -15px; } .joinitem { width: 100%; max-width: 350px; margin: 0 15px; padding: 65px 35px 45px; background-color: #359fb0; color: white; } .joinitem h3 { font-size: 38px; font-weight: 500; margin-top:5px; margin-bottom: 1.31579em; text-align: center; color: #2d2d2d; } .joinitem h3 span { display: block; font-size: 20px; font-weight: 400; margin-bottom: 4px; color: white; } .joinitem li i { margin-right:30px; } .joinitem li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 50px; font-size:18px; margin-left:-2px; /* margin-right:30px;*/ } /*.joinitem ul { margin-top:20px; }*/ /*.joinitem ul li .icon { -ms-flex-negative: 0; flex-shrink: 0; margin-right: 12px; color: #a9d622; }*/ .joiniteminverse { background-color: #2d2d2d; color: white; } .joiniteminverse h3 { color: #359fb0; } .joiniteminverse h3 span { color: white; } .joiniteminverse .icon { fill: #fff; } /*.joinbtn { width:20px; text-align: center; } .joinbtn .btn { margin-top: 50px; padding-left: 4.28571em; padding-right: 4.28571em; }*/ .bn { text-align:center; background-color:#2d2d2d; width:90px; color:white; /* float:center;*/ margin-left:130px; height:40px; } .bn:hover{ /*background-color: #555;*/ background-color: #3a6d75; border: 1px solid #fff; color: #fff; cursor: pointer; box-shadow: 0px 0px 6px 4px rgba(230,196,196,0.3); } .container { display: block; width: 100%; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; /*max-width:880px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;*/ } .how .sectionheader { margin-bottom: 130px; } .how .icon { margin-bottom: 25px; } .howitems { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: distribute; justify-content: space-around; margin-left: -15px; margin-right: -15px; margin-top: -50px; } .howitem { width: 200px; text-align: center; margin-left: 15px; margin-right: 15px; } .howitem:last-child { margin-right: 0; } .howitem h3 { font-size: 22px; margin-bottom: .72727em; } .sectionheader { text-align: center; margin-bottom: 70px; } .sectionheader h2 { margin-top:500px; color:black; } .sectionheader h3 { margin: 0; font-size: 28px; text-transform: uppercase; letter-spacing: .025em; } .sectioninverse .sectionheader h3 { color: #fff; } .sectionheader p { font-size: 16px; color: #d1e1f9; margin-top: 10px; margin-bottom: 0; } .icon_bio { width: 35px; height: 38px; color: white; /*border-radius: 50%;*/ margin-right: 15px; font-size: 15px; position: relative; } #logo{ position: absolute; left:0; top:0; margin-top:-1rem; } #logo img{ height:5.5rem; width:6rem; }