html,body {
background-color: white;
font-family: 'Michroma', sans-serif;
//height: 100%;
margin: 0;
overflow: hidden;
padding: 0;
background-image: url(../images/puzzle_back.jpg)!important;
background-size: cover;
}
#message-box {
position: absolute;
top:50px;
left:0;
background-color: rgba(255,255,255,75);
color: black;
width: 400px;
height: 100px;
z-index: 100000000;
}
#content-wrap {
position: relative;
//overflow: auto;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
height: 100vh;
width: 100%;
background-color: rgba(94,94,94,0);
animation-name: cwa;
animation-duration: 20s;
animation-iteration-count: 1;
}
@keyframes cwa {
0% { background-color: rgba(94,94,94,1);}
100% { background-color: rgba(94,94,94,1);}
}
#content-wrap .page {
background-color: white;
color: black;
//font-family: 'Open Sans Condensed',sans-serif;
position: relative;
min-height: 100vh;
}
#content-wrap .page.home {
background-color: rgba(0,0,0,.5);
}
#content-wrap .page .inner-page {
width: 800px;
max-width: 90%;
margin: 0px auto;
font-family: "Open Sans Condensed",sans-serif;
color: black;
padding: 60px 0;
}
.inner-page .page-title {
font-size: 30px;
text-align: center;
}
.inner-page p {
font-size: 20px;
text-align: justify;
}
.image-filler {
height:350px;
//background: transparent;
//display: inline-block;
background: url(../images/denver02.jpg) no-repeat fixed center top / cover;
//background-size: cover;
position: relative;
}
.image-filler.img2 {
background-image: url(../images/puzzle_back.jpg)!important;
//opacity: .75;
}
.image-filler.img2 {
background-image: url(../images/puzzle_back.jpg)!important;
//opacity: .75;
}
.image-filler.img3 {
background-image: url(../images/server01.jpg);
opacity: .5;
}
.image-filler.img4 {
background-image: url(../images/consulting01.jpg);
opacity:.5;
}
#nav-bar {
position: fixed;
z-index: 1000000;
background-color: rgba(0, 0, 0, 0.75);
top:0px;right:0;left:0;
height: 35px;
line-height: 30px;
text-align: center;
animation-name: nvb;
animation-duration: 20s;
animation-iteration-count: 1;
transition: all 3s;
color: white;
}
@keyframes nvb {
0% { top:-35px;}
80% { top: -35px;}
100% { top: 0px;}
}
#nav-bar span {
font-size: 12px;
margin-left: 15px;
margin-right: 15px;
transition: all 0.5s ease 0s;
}
#nav-bar span:hover {
cursor: pointer;
color: #5f87af;
}
#nav-bar span:first-of-type:after {
content: "home";
//display: none;
}
#nav-bar span:nth-of-type(2):after {
content: "services";
}
#nav-bar span:nth-of-type(3):after {
content: "philosophy";
}
#nav-bar span:nth-of-type(4):after {
content: "testimonials";
}
#nav-bar span:nth-of-type(5):after {
content: "contact";
}
#nav-bar span:nth-of-type(6):after {
content: "remote support";
}
#logo-wrap {
position: absolute;
top:40px;left:0px;right:0;
height: 54px;
z-index: 10000;
animation-name: lw;
animation-duration: 20s;
animation-iteration-count: 1;
}
@keyframes lw{
0% { top:0px;}
80% { top: 0px;}
100% { top: 40px;}
}
#binkley_it_logo {
background-image: url("../images/flat-binkleyit-logo.png");
background-size: 100% 100%;
float: right;
margin-right: 10px;
height: 54px;
position: relative;
width: 270px;
}
#flat-back-wrap {
position: absolute;
top:0;left:0;right:0;bottom:0;
background-image: url(../images/denver01_glow.png);
background-size: cover;
animation-name: bkglow;
animation-duration: 4s;
animation-iteration-count: 1;
visibility: visible;
opacity: 1;
z-index: 1;
}
#fbw-inner-wrap {
position: absolute;
top:0;bottom:0;left:0;right:0;
background-image: url(../images/denver01.jpg);
background-size: cover;
z-index:2;
animation-name: fbwiw;
animation-duration: 20s;
animation-iteration-count: 1;
visibility: visible;
opacity: 1;
}
@keyframes bkglow {
from {visibility:none;opacity: 0; }
to {visibility: visible;opacity:1; }
}
@keyframes fbwiw {
0% { visibility: none;opacity:0;}
80% { visibility: visible;opacity:0}
100% { visibility: visible;opacity:1;}
}
#badges-wrap {
position: absolute;
bottom: 50px;
left:0;right:0;
margin: auto;
height: 75px;
text-align: center;
}
.badge {
width: 75px;
height: 75px;
display: inline-block;
background-size: 100% 100%;
margin-left: 20px;
margin-right: 20px;
//border: 1px dotted white;
}
.co {
background-image: url(../images/co_company.png);
}
.ep {
background-image: url(../images/ep.png);
}
.fan {
background-image: url(../images/fanbrag.png);
}
.tagline {
bottom: 120px;
font-size: 24px;
height: 30px;
left: 0;
line-height: 30px;
margin: auto;
position: absolute;
right: 0;
text-align: center;
text-shadow: 1px 2px 1px #000;
//top: 0;
width: 90%;
color: white;
}
.tagline:after {
content: "solving the IT puzzle, one piece at a time";
}
#bw_controls {
position: absolute;
//background-color: red;
//bottom: 10px;
top: 85vh;
left:0;right:0;bottom: 50px;
height: 75px;
text-align: center;
z-index: 10000;
}
#bw_controls .icon_wrap {
width: 75px;
height: 75px;
position: relative;
margin-left: 10px;
margin-right: 10px;
//border: 1px dotted white;
display: inline-block;
}
#bw_controls .icon_wrap .icon {
position: absolute;
top:0;right:0;left:0;bottom:0;
background-color: blue;
border-radius: 50%;
width: 50px;
height: 50px;
display: inline-block;
margin: auto;
transition: all 1s;
background-size: 100% 100%;
animation-name: bwc;
animation-duration: 20s;
animation-iteration-count: 1;
visibility: hidden;
opacity: 0;
}
@keyframes bwc {
0% { visibility: visible;opacity:1;}
80% { visibility: visible;opacity:1}
100% { visibility: visible;opacity:0;}
}
#bw_controls .icon_wrap .icon.phone {
background-image: url(../images/phone.png);
}
#bw_controls .icon_wrap .icon.email {
background-image: url(../images/email.png);
}
#bw_controls .icon_wrap .icon.tv {
background-image: url(../images/tv.png);
}
#bw_controls .icon_wrap .icon:hover {
width: 75px;
height: 75px;
}
.quote {
font-weight: bold;
margin-top: 70px;
}
.quoter {
text-align: right;
font-weight: normal;
float: right;
color: #5f87af;
}
.contact-item {
font-size: 20px;
font-weight: bold;
}
.contact-icon {
background-color: blue;
background-size: 100% 100%;
border-radius: 50%;
display: inline-block;
height: 50px;
margin: 20px;
width: 50px;
}
.contact-icon.phone {
background-image: url(../images/phone.png);
}
.contact-icon.email {
background-image: url(../images/email.png);
}
.contact-icon.tv {
background-image: url(../images/tv.png);
}
@media only screen and (max-device-width: 320px) and (max-device-width:480px) {
#badges_wrap {
top: 77vh;
}
.badge {
height: 60px;
width: 60px;
}
.image-filler {
background: transparent;
}
}
@media only screen and (max-device-height: 360px) and (orientation: landscape) {
#bw_controls {
top: 80vh;
}
.tagline {
top: 65vh;
}
#badges-wrap {
top: 77vh;
}
.badge {
height: 60px;
width: 60px;
}
.image-filler {
background: transparent;
}
}
@media only screen and (max-device-width: 480px) and (orientation: portrait) {
.tagline {
top: 70vh;
}
.image-filler {
background: transparent;
}
}
@media only screen and (max-device-width: 640px) and (orientation: landscape) {
#bw_controls {
top: 77vh;
}
.image-filler {
background: transparent;
}
}
@media only screen and (min-device-width: 600px) and (max-device-width: 700px) {
#binkley_it_logo {
float: none;
margin: 0 auto;
}
#nav-bar span:first-of-type:after {
content: "home";
display: inline-block;
}
.image-filler {
background: transparent;
}
#nav-bar span:nth-of-type(2):after {
content: "services";
}
#nav-bar span:nth-of-type(3):after {
content: "philosophy";
}
#nav-bar span:nth-of-type(4):after {
content: "testimonials";
}
#nav-bar span:nth-of-type(5):after {
content: "contact";
}
#nav-bar span:nth-of-type(6):after {
content: "support";
display: none;
}
}
@media only screen and (max-device-width: 600px) {
#binkley_it_logo {
margin: 0 auto;
float: none;
}
#nav-bar span:first-of-type:after {
content: "hm";
display: inline-block;
}
.image-filler {
background: transparent;
}
#nav-bar span:nth-of-type(2):after {
content: "sv";
}
#nav-bar span:nth-of-type(3):after {
content: "ph";
}
#nav-bar span:nth-of-type(4):after {
content: "ts";
}
#nav-bar span:nth-of-type(5):after {
content: "cn";
}
#nav-bar span:nth-of-type(6):after {
content: "rs";
display: none;
}
}
/*iPhone 6 Portrait*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: portrait) {
#badges-wrap {
top: 75vh;
}
.badge {
height: 60px;
width: 60px;
}
.tagline {
top: 50vh;
}
#bw_controls {
top: 75vh;
}
.image-filler {
background: transparent;
}
}
/*iPhone 6 landscape*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: landscape) {
#badges-wrap {
top: 75vh;
}
.badge {
height: 60px;
width: 60px;
}
.tagline {
top: 68vh;
}
#bw_controls {
top: 75vh;
}
.image-filler {
background: transparent;
}
}