/*
** © 2020 SIDUGEC Software Technology Co and Keith A Ujvary   **
**                 Oliver BC - CANADA                         **
**                 Created 03 Aug 2020                        **
**                 ALL RIGHTS RESERVED.                       ** 
*/
/* 
    Created on : 3-Aug-2020, 3:25:32 PM
    Author     : Keith
*/

 
#leftside{
    background-image: url("../images/Img_0885-min.jpg");
    background-size: 556px
        ;
    width:45%;
    float:left;
    background-color:yellow;
    height:100%;  
}

 
#rightside{
    display:flex;  
    flex-direction: column;
    align-items: right;
    justify-content: center;
    width:50%;
    float:right;
    background-color:transparent;
    height:100%;
    margin:15px;  
}

#rightside h1{
     
  color:yellow;
    
}

.fade-in {
  animation: fadeIn ease 2.5s;
  -webkit-animation: fadeIn ease 2.5s;
  -moz-animation: fadeIn ease 2.5s;
  -o-animation: fadeIn ease 2.5s;
  -ms-animation: fadeIn ease 2.5s;
}
@keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}
@-ms-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

body{
    width:900px;
    background-color: black;
    border: ridge 15px crimson;
    height:600px;
    margin:auto; 
    align-content: center; 
} 
.caption{
    font-family: Tahoma , serif;
    font-weight:bold;
    font-size:12pt;
    text-align: center;
}

.redcaption{
    background-color: palegoldenrod;
    color:darkred;
}

.silvercaption{
    background-color: silver;
    color:black;
    border: darkgray solid 2px;
}

#backer {
 
    width: 900px;
    height: 560px;
    align-items: center; 
    border: none;
    background-image: url("../images/IMG_0879-min.jpg") ; 
    background-repeat: no-repeat; 
    background-size: 100%;
     
}

.outside1{
    position:relative;
    top:-350px;
    left:190px; 
    width: 500px;
    height: 390px;
    align-items: center; 
    border: outset 15px darkgoldenrod;
    background-image: url("../images/Img_0884-min.jpg") ;
    background-size: 400px;
    transition: opacity 1.5s;
    background-repeat: no-repeat; 
     background-size: 100%;
    opacity:1; 
    
}

.outside2{
    position:relative;
    top:-500px;
    left:190px; 
    width: 500px;
    height: 700px;
    align-items: center; 
    border: outset 15px gold;
    background-image: url("../images/Img_0885-min.jpg") ;
    background-size: 400px;
    transition: opacity 1.5s;
    background-repeat: no-repeat; 
    background-size: 100%;
    opacity:1;
    transition-timing-function: ease-in;
}

.outside3{
    position:relative;
    top:-380px;
    left:90px; 
    width: 700px;
    height: 450px;
    align-items: center; 
    border: outset 15px darkred;
    background-image: url("../images/Img_0886-min.jpg")  ;
    background-repeat: no-repeat; 
    background-size: 100%;
    transition: opacity 1.5s;
    opacity:1;
    transition-timing-function: ease-in;
}

.outside4{
    position:relative;
    top:-500px;
    left:90px; 
    width: 700px;
    height: 515px;
    align-items: center; 
    border: outset 15px silver;
    background-image: url("../images/IMG_0888-min.jpg") ;
    background-size: 400px;
    transition: opacity 1.5s;
    background-repeat: no-repeat; 
    background-size: 100%;
    opacity:1;
    transition-timing-function: ease-in;
}
.opacity0{
    opacity:0;
    transition: opacity 1s;
    transition-timing-function: ease-out;
}

.opacity50{
    opacity:.5; 
}