/* ================================================= =================== Global ======================== ==================================================== */ html, body { width: 100%; height: 100%; } body { background:rgba(238, 238, 238, 1); } a { -webkit-transition: all .35s; -moz-transition: all .35s; transition: all .35s; } /* ================================================= =================== Navbar ======================== ==================================================== */ .navbar-default .navbar-header .navbar-brand { background-image:url(../img/ribbon.svg) no-repeat; } /* ================================================= =================== Header ======================== ==================================================== */ header { position: relative; width: 100%; min-height: auto; text-align: center; color: #000; background-image: url(../img/header.svg); background-position: center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; } header .header-content { position: relative; width: 100%; padding: 100px 15px; text-align: center; } header .header-content .header-content-inner h1 { margin-top: 0; margin-bottom: 0; font-weight: 700; } header .header-content .header-content-inner hr { margin: 30px auto; } header .header-content .header-content-inner p { margin-bottom: 50px; font-size: 16px; font-weight: 300; color: rgba(255,255,255,.7); } @media(min-width:768px) { header { min-height: 100%; } header .header-content { position: absolute; top: 50%; padding: 0 50px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } header .header-content .header-content-inner { margin-right: auto; margin-left: auto; max-width: 1000px; } header .header-content .header-content-inner p { margin-right: auto; margin-left: auto; max-width: 80%; font-size: 18px; } } .skew:before { content: ''; position: absolute; left: 0; top: 106px; width: 100%; height: 60px; background: #fff; -webkit-transform: skewY(-20deg); -moz-transform: skewY(-20deg); -ms-transform: skewY(-20deg); -o-transform: skewY(-20deg); transform: skewY(-20deg); -webkit-backface-visibility: hidden; } .skew { background:#fff; } /* ================================================= =================== Sections ====================== ==================================================== */ section { padding:50px 0; } #partial { padding:150px 0; } #about { background-color: rgba(255,255,255,.2); } #details { background-color: rgba(255,255,255,.8); } #features { background-color: rgba(255,255,255,.4); } #account { background-color: rgba(255,255,255,.1); } #call { background-color: rgba(255,255,255,.8); } .icon-small { width:60px; } .blue-ribbon path { fill: rgba(0, 83, 255, 1); stroke: rgba(0,0,0,1); background-color: #000; } .red-ribbon path { fill: rgba(255, 60, 0, 1); stroke: rgba(0,0,0,1); } .yellow-ribbon path { fill: rgba(255, 251, 27, 1); stroke: rgba(0,0,0,1); } /* ================================================= ===================== Footer ====================== ==================================================== */ footer { padding: 50px 0 80px; color:#777; } .bg-dark { color: #fff; background-color: #222; } footer p { color:#777; }