* {
    box-sizing: border-box;
}

body {
    font-family: 'Indie Flower', cursive;
    font-size: 25px;
    padding: 0px;
    /*background-color: #039aff;*/
  background: rgba(76, 175, 80, 0.0);
  background-image: url("https://dumdodoor.teethy.ca/img/background.jpg");
  background-attachment: fixed;
}


body.fade-out {
    opacity: 0;
    transition: none;
    }





/* Header/Blog Title */
.header {
    padding: 0px;
    text-align: center;
    background: white;
}

.header h1 {
    font-size: 50px;
  
}

/* Style the top navigation bar */
.topnav {
    overflow: hidden;
    background-color: #333;
  padding:0;
  margin:0;
    list-style-type: none;
  text-align:center;
}

/* Style the topnav links */
.topnav a {
   
    float: left;
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}


/*MAKE IMAGES RESIZE RESPONSIVELY*/


img {
    max-width: 100%;
    
    height: auto;
    width: auto\9; /* ie8 */
}

/* Change color on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {   
    float: left;
    width: 50%;
  
  /*background-color: #039aff;*/
  background: rgba(76, 175, 80, 0.0);
}

/* Right column */
.rightcolumn {
    float: right;
    width: 50%;
  
    /*background-color: #039aff;*/
    padding-left: 20px;
   background: rgba(76, 175, 80, 0.0);
}

/* Fake image */
.fakeimg {
    background: rgba(255, 255, 255, 0.7);
    width: 100%;
    padding: 20px;
}

.fakeimg a:hover{
    color: violet;
    text-shadow: 1px 0px 20px black;
}
.fakeimg a{
  color: #ff9a47;
}


/* Add a card effect for articles */
.card {
  
   /* background-color: #039aff;*/
    padding: 20px;
    margin-top: 20px;
  background: rgba(76, 175, 80, 0.0);
  
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Footer */
.footer {
    padding: 10px;
    text-align: center;
    background: #db60c2;
    margin-top: 20px;
  
    
}
  .footer a {
    color: #fff;
    
  }

  .footer a:hover {
    color: #ff9a47;
    text-shadow: 1px 0px 20px #ff6a00;
  }
  
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
    .leftcolumn, .rightcolumn {   
        width: 100%;
        padding: 0;
    }
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
    .topnav a {
        float: none;
        width: 100%;
    }
}



 #header  {
	height: 0px;
	width: 100%;
	background-color: #000;
}
#top-bar {
	background-image: url();
	background-repeat: repeat-x;
	width: 100%;
	height: 0px;
}
/*NAVIGATION STUFF/*
/* Style the navigation menu */
.navbar {
  width: 100%;
  background-color: #ff9a47;
  overflow: auto;
}

/* Navigation links */
.navbar a {
  float: left;
  padding: 12px;
  color: white;
  text-decoration: none;
  font-size: 22px;
  width: 25%; /* Four equal-width links. If you have two links, use 50%, and 33.33% for three links, etc.. */
  text-align: center; /* If you want the text to be centered */
}

/* Add a background color on mouse-over */
.navbar a:hover {
  background-color: #f75239;
}

/* Style the current/active link */
.navbar a.active {
  background-color: #721001;
}

/* Add responsiveness - on screens less than 500px, make the navigation links appear on top of each other, instead of next to each other */
@media screen and (max-width: 500px) {
  .navbar a {
    float: none;
    display: block;
    width: 100%;
    text-align: left; /* If you want the text to be left-aligned on small screens */
  }

}
.whiteboxlinks a {
 color: #ff9a47;
  font-weight: bold;
  
}
.whiteboxlinks a:hover {
  color: #db60c2;
  text-shadow: 1px 0px 20px #db60c2; 
}
.whiteboxlinks a:active {
  color: #f75239; 
}

.autoimgsize img {
    max-width: 50%;
    max-height: 50%
    height: auto;
    width: auto\9; /* ie8 */
}


/* Left column for gallery page*/
.leftcolumngallery {   
    float: left;
    width: 50%;
  
 /* background-color: #039aff;*/
}

/* Right column  for gallery page*/
.rightcolumngallery {
    float: right;
    width: 50%;
  
    /*background-color: #transparent;*/
    padding-left: 20px;
}
/*CARD FOR GALLERY PAGE*/
.cardgallery {
  
   
    padding: 20px;
    margin-top: 20px;
  
  
}



.rowgallery {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.columngallery {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.columngallery img {
  margin-top: 100px;
  vertical-align: middle;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .columngallery {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .columngallery {
    flex: 100%;
    max-width: 100%;
  }
}

/* Style the Image Used to Trigger the Modal */
.myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

.myImg:hover {opacity: 0.7;}


/*START OF IMAGE VIEWER*/
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}



/* Modal Content (Image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption { 
    animation-name: zoom;
    animation-duration: 0.6s;
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 50px;
    right: 35px;
    color: red;
    font-size: 100px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}

/*END OF IMAGE VIEWER*/