html { 
	height:100vh; 
    font-family:'Raleway', Avenir, helvetica neue, helvetica, sans-serif;           
}
body{
    height:100vh;
}
canvas {
  position: fixed;
  left: 3vw;
  top: 48vh;
  max-height: 200vh;
  max-width: 44vw;
  min-width: 20vw;
  z-index:0;
  border:none;
}
h4{
    margin-top:20px;
}
.container {
	width:100%;
	height:100%;
    	background-size:cover;
    	background-position:center;
    	z-index:1;
}
.fuzzy {
        width: 100%;
        position:absolute;
        left:0px;
        bottom:0px;
        font-family:'Raleway', Avenir, helvetica neue, helvetica, sans-serif;
        padding:2%;
        background-color:rgba(0, 0, 0, 0.7);
}
.fuzzy span {
        width: 100%;
        margin:0px;
        padding:0px;
        line-height: 0.8;
}
.fuzzy span span {
        display:none;
        width:auto;
        font-size:3vw;
        font-weight:bold;
        opacity: 1;
        margin:0px 5px 0px 0px;
        padding:0px;
/*	text-shadow: -1px -1px 0px rgba(0,0,0,1.0), 1px 1px 0px rgba(255,255,255,0.3);*/

}
.fuzzy span span.active {
        display:inline;
        width:auto;
        font-size:2.5vw;
        font-weight:bold;
        margin:0px 5px 5px 0px;
        padding:0px;
        color:white;
}
.center {
    text-align:center;
}
h1
{
	font-family: 'Raleway', sans-serif;
}
.white { color:white; }
.black { color:black;}
p{
    padding-top:15px;
    padding-bottom:15px;
}
button {
    margin-top:20px;
    margin-bottom:20px;
}
.alert {
    margin-top:20px;
	display:none; }
	
.navbar{
	border:1px solid white;
	border-radius:12px;
	height:auto;
	width: calc(100% - 10px);
	font-family: 'Raleway', sans-serif;
	margin: auto;
	margin-top:10px;
	z-index:10;
}
.navbar ul, .navbar ul li, .navbar ul li a{
    height:auto;
}

.navbar-collapse{
	overflow:auto;
}
#googleMap
{
	
	height:300px;
	background-color:white;
	opacity:1; 
	border:solid 1px white;
	z-index:0;
}
#time
{
	padding:5px;
        background: Black;
        font-size:40px;
	font-weight:bold;
	text-transform: uppercase;
	line-height:38px;
	position:absolute;
	top:75%;
	
	text-align: right;
	opacity:0.5;
	color:white;
}
#liveTime
{
	font-size:36px;
}
#temp
{
	padding: 10px 20px 5px 5px;
        background: black;
        color: white;
        
	font-size:40px;
	font-weight:bold;
	text-transform: uppercase;
	line-height:38px;
	position:absolute;
	top:80%;
        right:0px;
	opacity:0.5;
}
#littleTemp
{
	float:right;
}
 
.page 
{
	background:rgba(255,255,255,0.9);
	font-family: 'Raleway', sans-serif;
}

.aside
{
	margin-right:10px;
	background:#FFFFFF;
	background:rgba(255,255,255,0.6);
    font-family: 'Raleway', sans-serif;
}
#accordion{
	padding-top:10px;
    border:0px;
	overflow:visible;

}

#accordion h3{
    margin-top:10px;
	padding:0px;
	z-index:500;
}
#accordion h3 .portfolioRow{
	
	margin: 10px 10px 0px 10px;
	padding:0px;
	border-bottom:solid 1px #BBBBBB;
}
:focus, :active {
  outline: 0;
}
.portfolioTitle{
	cursor:pointer;
	border:0px;
	padding:1%;
	border-radius:8px;
}
.shadowTitle{
    color:dimgray;
    font-style: oblique;
    font-weight:200;
    padding:10px 0;
}
.portfolioPic{
    background-color:white;
	background-color: rgba(255,255,255,0.2);
	overflow:hidden;
}
.portfolioLink{
	font-size:1.5rem;
	text-decoration:none;
}
.portfolio_button{
    height:10vh;
}
.secHead{
    display:block;
    font-weight:800;
    font-size:3em;
    color:silver;
    text-align:center;
}
.portfolioBox{
	margin: 0px 20px 20px 10px;
	background:#ffffff;
	height:auto;
    width:inherit;
	border-radius:8px;
}

.portfolioText{
    background:rgba(255,255,255,1);
	font-size:1.6rem;
	margin-bottom:3em;
}

.portfolioText p{
	margin-left:10px;
}
figure{
    min-width:25%;
    max-width:30%;
  text-align: center;
  font-style: italic;
  text-indent: 0;
  margin: auto;
  padding: 0.5em;
}
figcaption{
    font-size:.7em;
}
.vbug{
	background-image: url("images/vbugBack.png");
	background-repeat: no-repeat;
	background-position: left top;
	background-size:27%, 100%;
}
.hyatt{
    background-image: url("images/hyattBack.jpeg");
    background-repeat: no-repeat;
    background-position: left top;
    background-size:27%, 100%;
}
.macys{
	background-image: url("images/macysBack.png");
	background-repeat: no-repeat;
	background-position: left top;
	background-size:27%, 100%;
}
.qcom{
	background-image: url("images/qcomBack.png");
	background-repeat: no-repeat;
	background-position: left top;
	background-size:27%, 100%;
}
.skiff{
	background-image: url("images/skiffBack.jpg");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 27%, 100%;
}
.bank{
	background-image: url("images/bankBack.png");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 27%, 10%;
}
.kahvini{
    background-image: url("images/coffeeBack.png");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 27%, 10%;
}
.delta{
	background-image: url("images/deltaBack.png");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 27%, 100%;
}
.humira{
	background-image: url("images/humiraBack.png");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 27%, 100%;
}
/* portfolio css rules */
.gallery-block{
	padding-bottom: 60px;
	padding-top: 0px;
}

.gallery-block .heading{
    margin-bottom: 50px;
    text-align: center;
}

.gallery-block .heading h2{
    font-weight: bold;
    font-size: 1.4rem;
    text-transform: uppercase;
}

.gallery-block.cards-gallery h3 {
  font-size: 17px;
  font-weight: bold; 
}

.gallery-block.cards-gallery .card{
  transition: 0.4s ease; 
}

.gallery-block.cards-gallery .card img {
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15); 
}

.gallery-block.cards-gallery .card-body {
  text-align: center; 
}

.gallery-block.cards-gallery .card-body p {
  font-size: 15px; 
}

.gallery-block.cards-gallery a {
  color: #212529; 
}

.gallery-block.cards-gallery a:hover {
  text-decoration: none; 
}

.gallery-block.cards-gallery .card {
  margin-bottom: 30px; 
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15);
}

.lightbox img {
  width: 100%;
  margin-bottom: 30px;
  transition: .2s ease-in-out;
  box-shadow: 0 2px 3px rgba(0,0,0,.2);
  max-height: 198px;
  object-fit: cover;
}

.card, .page{
	background-color: white;
	color:black;
}


@media (min-width: 576px) {

	.gallery-block .transform-on-hover:hover {
	    transform: translateY(-10px) scale(1.02);
	    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.15) !important; 
	}
}

@media (orientation: portrait){
    .shadowTitle{
        display:none;
        
    }
    .secHead{
        font-size:2em;
    }
    canvas{
        position: fixed;
        left: 0px;
        bottom: 0px;
        max-height: 100vh;
        min-width: 100%;
        z-index:1;
    }        
}
@media (max-width:768px){ 
	z-index:10001;
	overflow:visible;

}