@import 'normalize.css';

.wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;  
Font-family: Arial, Helvetica, sans-serif;  
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap; 
}

a:link {
    color: lime;
    text-decoration: none;
}

/* visited link */
a:visited {
    color: #3366FF;
    text-decoration: none;
}

/* mouse over link */
a:hover {
    color: yellow;
    text-decoration: none;
    text-shadow: 0px 0px 5px #fff;
}



/* selected link */
a:active {
    color: white;
    text-decoration: none;
} 


/* audio and image and table container */
.container {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
}


.wrapper > * {
  padding: 10px;
  flex: 1 100%;
}

.header {
justify-content: center;
    background: #001F5C ;
 background-image: url("lapizbak3.jpg");
color: cyan;
border: 0px solid aqua;

}

.footer {
    background: #001F5C ;
 background-image: url("lapizbak3.jpg");
color: turquoise;
font-size: small;
    border: 0px solid aqua;
}


.main {
    background: #001F5C ;
    background-image: url("lapizbak3.jpg");
    color: aqua;
    border: 1px solid lime;
    flex-direction: column;
}


.aside-1 {
    background: #001F5C ;
 background-image: url("lapizbak3.jpg");
    flex-direction: column;
max-width: 280px;
color: aqua;

    border: 0px solid aqua;

}

.aside-2 {
    background: #001F5C ;
 background-image: url("lapizbak3.jpg");
color: aqua;
    max-width: 280px;
    min-width: 150px;
    border: 0px solid aqua;

}




@media all and (min-width: 800px) {
  .main    { flex: 3 0px; }
  .aside-1 { order: 1; } 
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}

body {
  padding: 0px; 

}
p {
    color: cyan;
font-weight: 100;
padding: 2px 4px;
font-size: 90%;
}

p.quote {
font-weight: 100;
font-style:italic;
text-align:center;
}

p.small {color:aqua; 
font-size:11px;     
text-align: justify; 
font-family : Arial; }



 h3{
 letter-spacing: 2px;
 text-align: center;
font-weight:400;
color:aqua;
   text-shadow: 2px 2px 2px #000000;
}

h2 {
font-weight:400;
color:aqua;
   text-shadow: 2px 2px 2px #000000;
 text-align: center;
}


@font-face { font-family: fffhead; src: url(/fonts/VarickaSC.ttf) format('truetype'); }
/* define thus: font-family: fffhead, sans-serif; */


h1 {
font-weight:400;
color:aqua;
   text-shadow: 2px 2px 2px #000000;
 text-align: center;
}


img {
    max-width: 100%;
    height: auto;
    
webkit-filter: drop-shadow(2px 4px 4px #000000); filter: drop-shadow(2px 4px 4px #000000);

}

video {

    height: auto;
    width: auto\9;
  max-width: 528px;  
 
   border:1px solid aqua;
webkit-filter: drop-shadow(2px 4px 4px #000000); filter: drop-shadow(2px 4px 4px #000000);

}



video {
  width: 100%    !important;
  height: auto   !important;
}

player {
 width: 100%;
}​

hr { background-color: lime; height: 1px; border: 0; }
 

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

.button {
    background-color: #4069E6;
    background-image: -webkit-linear-gradient(hsla(0,0%,100%,0), hsla(0,0%,0%,.4));
    background-image:    -moz-linear-gradient(hsla(0,0%,100%,0), hsla(0,0%,0%,.4));
    background-image:     -ms-linear-gradient(hsla(0,0%,100%,0), hsla(0,0%,0%,.4));
    background-image:      -o-linear-gradient(hsla(0,0%,100%,0), hsla(0,0%,0%,.4));
    background-image:         linear-gradient(hsla(0,0%,100%,0), hsla(0,0%,0%,.4));
    border: 1px solid #161616;
    border-radius: 5px;
        box-shadow: 3px 3px 6px rgba(0,0,51,0.5), inset 0 1px 0 rgba(256, 256, 256, .35); 
                
    color: #66FFFF;
    cursor: pointer;
    display: inline-block;
    font: bold 14px/10px sans-serif;
    margin: 10px;
    padding: 10px 10px;
    position: relative;
    text-decoration: none;
    text-shadow: 0 -1px 1px #1F003D;
    text-align: center;
    transition: .2s;
    vertical-align: top;

width:130px

}

.button:hover,
.button:focus {
    background-color: #33ADFF;
    color: #CCFFFF;
}
.button:after {

    background-position: 50% 0%;
    background-size: 100% 100%;
    content: '';
    height: 1px;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    visibility: hidden;
    color: yellow;

}
.button:hover:after,
.button:focus:after {
    opacity: 1;
    visibility: visible;

}
.button:before {
    background: #0066ff;
    bottom: -8px;
    border-radius: 5px;
    box-shadow: 0 1px 1px hsla(0,0%,100%,.2),
                inset 0 1px 1px hsla(0,0%,0%,.4),
                inset 0 1px 5px hsla(0,0%,0%,.2);
    content: '';
    left: -1px;
    position: absolute;
    right: -1px;
    top: -1px;
    z-index: -1;

}
.button:active {
    background-color: #1947D1;
  box-shadow: inset 1px 1px 3px rgba(0,0,0,0.5),1px 1px 0 rgba(256, 256, 256, .35);
    color: #66FFFF;
    padding: 10px 10px ;

}
.button:active:after {
    left: 1px;
    opacity: .5;
    right: 1px;
    top: 21px;
    color: yellow;

}


/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
.button2 {
    background-color: #4069E6;
    background-image: -webkit-linear-gradient(hsla(0,0%,100%,0), hsla(0,0%,0%,.4));
    background-image:    -moz-linear-gradient(hsla(0,0%,100%,0), hsla(0,0%,0%,.4));
    background-image:     -ms-linear-gradient(hsla(0,0%,100%,0), hsla(0,0%,0%,.4));
    background-image:      -o-linear-gradient(hsla(0,0%,100%,0), hsla(0,0%,0%,.4));
    background-image:         linear-gradient(hsla(0,0%,100%,0), hsla(0,0%,0%,.4));
    border: 1px solid #161616;
    border-radius: 5px;
        box-shadow: 3px 3px 6px rgba(0,0,51,0.5), inset 0 1px 0 rgba(256, 256, 256, .35); 
                
    color: #66FFFF;
    cursor: pointer;
    display: inline-block;
    font: bold 14px/10px sans-serif;
    margin: 10px;
    padding: 10px 10px;
    position: relative;
    text-decoration: none;
    text-shadow: 0 -1px 1px #1F003D;
    text-align: center;
    transition: .2s;
    vertical-align: top;

width:225px 

}

.button2:hover,
.button2:focus {
    background-color: #33ADFF;
    color: #CCFFFF;
}
.button2:after {

    background-position: 50% 0%;
    background-size: 100% 100%;
    content: '';
    height: 1px;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    visibility: hidden;
    color: yellow;

}
.button2:hover:after,
.button2:focus:after {
    opacity: 1;
    visibility: visible;

}
.button2:before {
    background: #0066ff;
    bottom: -8px;
    border-radius: 5px;
    box-shadow: 0 1px 1px hsla(0,0%,100%,.2),
                inset 0 1px 1px hsla(0,0%,0%,.4),
                inset 0 1px 5px hsla(0,0%,0%,.2);
    content: '';
    left: -1px;
    position: absolute;
    right: -1px;
    top: -1px;
    z-index: -1;

}
.button2:active {
    background-color: #1947D1;
  box-shadow: inset 1px 1px 3px rgba(0,0,0,0.5),1px 1px 0 rgba(256, 256, 256, .35);
    color: #66FFFF;
    padding: 10px 10px ;

}
.button2:active:after {
    left: 1px;
    opacity: .5;
    right: 1px;
    top: 21px;
    color: yellow;

}
​



​