/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 14 Dec 2017, 12:27:17 PM
    Author     : gerhardus van deventer
*/

body{
    background: url('../images/background.png');
    background-size: cover;
}

.heading_logo{
    /*logo in heading*/
    padding: 10px 10px 5px 10px;
    width: 135px;
    height: 135px;
}

img{
    padding: 10px 10px 5px 10px;
    width: 135px;
    height: 135px;
}

.image1{
    padding: 5px 5px 1px 5px;
    width: 80%;
}

.image2{
    padding: 5px 5px 1px 5px;
    width: 200px;
    height: 200px;
}

.image3{
    padding: 5px 5px 1px 5px;
    width: 350px;
    height: 200px;
}

.image4{    
    width: 300px;
    hight: 180px;
    margin-left: 10%;
    filter: drop-shadow(30px 10px 4px #4444dd);
    /*background-image: url('/images/membership.png');*/
/*    background-size: contain;
    background-repeat: no-repeat;*/
}

.image5{ /* images to display */
/*    background-size: contain;
    background-repeat: no-repeat;*/
    /*margin: 10%;*/
    width: 320px;
    height: 290px;
/*    width: auto;
    height: auto;*/
    /*object-fit: cover;*/
}

.image6{
    /*padding: 5px 5px 1px 5px;*/
    padding: 0px 0px 0px 0px;
    width: 50%;
    height: 50%;
    box-shadow: 0 7px 16px 0 #333333, 0 6px 22px;
}

.image7{
    position: relative;
    width: 70%;
    height: 70%;
    box-shadow: 0 9px 18px 0 #333333, 0 0px 0px;
    margin-left: 5%;
    padding: 0px;
}

.image8 {
    filter: drop-shadow(20px 10px 10px #4444dd);
    /*filter: drop-shadow(0 0 0.75rem crimson);*/
    /*filter: drop-shadow(0 0 0.75rem #4444dd);*/
/*    content:"";
    position: absolute;
    top:100px;right:0;bottom:0;left: 0;
    z-index:-2;			
    -webkit-box-shadow:0px 250px 15px -35px rgba(0,0,0,.25);
    -moz-box-shadow:0px 250px 15px -35px rgba(0,0,0,.25);
    box-shadow:0px 250px 15px -35px rgba(0,0,0,.25);
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
    transform:scaleY(.3);
    -webkit-transform:scaleY(.3);
    -moz-transform:scaleY(.3);
    -ms-transform:scaleY(.3);
    -o-transform:scaleY(.3);*/
}

.image9{
    max-width:50%;
    max-height:50%;
    box-shadow: 0 9px 18px 0 #333333, 0 0px 0px;
    padding: 0px;
    margin-left: 25%;
}

.image-bg{
    background-image: url('/images/onlineChessBg1.png');
    background-repeat: no-repeat;
    position: relative;
    background-size: contain;
}

.text_format {
    font-weight:bold;
    text-align:center;
    font-size: 16px;
    color: #066;
    font-family: "Comic Sans MS", cursive;
}

.text_format1 { /* ChessHeroes */
    /*font-weight:bold;*/
    text-align:left;
    font-size: 16px;
    color: #066;
    /*font-family: "Comic Sans MS", cursive;*/
}

.text_format2 { /* JNW Club */
    /*font-weight:bold;*/
    text-align:left;
    font-size: 16px;
    color: darkblue;
    font-family: "Comic Sans MS", cursive;
}

.text_format3{
    font-size: 50%;
}

.text_format4 {
    font-weight:bold;
    /*text-align:center;*/
    /*font-size: 16px;*/
    color: #f5f5f5;
}

.photo1{
    /*padding: 5px 5px 1px 5px;*/
    width: 50%;
    height: 50%
}

.medlimage{
    padding: 10px 10px 1px 10px;
    width: 65px;
    height: 60px;
}

.logo{
    padding: 10px 10px 1px 10px;
    width: 75px;
    height: 70px;
}

.img_clublogo{
    /*filter: drop-shadow(10px 10px 10px #4169e1);*/
    /*filter: drop-shadow(0 0 0.75rem silver);*/
    /*filter: blur(2px);*/
    /*filter: opacity(0.20);  cange imager transparency or 50%*/ 
    width: 115px;
    height: 150px;
}

.smallLogo {
    width: 65px;
    height: 50px;
}

.smallLogo2 {
    width: 20px;
    height: 20px;
}

.thumbnail {
    width: 10px;
    height: 10px;
}

.headercontent{
    display: grid;
    grid-template-columns: repeat(5, Auto);
    grid-row-gap: 1em;
    grid-template-areas: 
        "logo sitename sitename sitename affil"
        "navbar navbar navbar navbar navbar";
        /*"logo2 subline subline subline affil";*/
    /*background-color: silver;*/
}

.clublogo{
    grid-area: logo;
    /*grid-column: 110px;*/
    align-items: center;    
    /*background-color: silver;*/
    /*background-color: whitesmoke;*/
    /*background-color: #27408b;*/
    /*background-color: #4169e1;*/
}

.clubname{
    grid-area: sitename;
    /*background-color: silver;*/
    /*background-color: whitesmoke;*/
    /*background-color: #4169e1;*/
    /*color: #27408b;*/
    color: silver;
    font-size:80px;
    font-weight: bold;
    text-align: left;
    padding-left: 70px;
    padding-top: 30px;
    text-shadow: 10px 10px 10px #888888;
}

.clubmoto{
    font-size: 20%;
    /*color: #4169e1;*/
    color: white;
    /*color: black;*/
    padding-left: 40px;
    padding-bottom: 15px;
}

#affiliation{
    display: grid;
    grid-area: affil;
    /*background-color: silver;*/
    /*background-color: whitesmoke;*/
    /*background-color: #4169e1;*/
    /*color: red;*/
    color: white;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    justify-content: center;
    align-items: center;
    padding-left: 70px;
    padding-top: 5px;
}

#affiliation a:link{
    /*color: red;*/
    color: white;
}

#affiliation a:visited{
    /*color: red;*/
    color: white;
}

.club{
    /*color: silver;*/
    color: #3a5fcd;
    font-size:70px;
    text-align: left;
    padding-left: 50px;
    text-shadow: 10px 10px 5px #888888;
}

.navmenu{
    /*display: grid;*/
    grid-area: navbar;
    /*grid-column: 1/4;*/
    grid-gap: 1em;
    /*border: 1px #2f3036 solid;*/
    
}

#leftnav{
    background-color: silver;
}

.leftnav{
    grid-area: lsidebar;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: silver;
}

.leftnav ul {
    margin: 0;
    padding: 0px 1px 10px 10px;
    align-items: center;
}

.leftnav li {
    display: inline-block;
    float: left;
    padding: 2px 10px 1px 2px;
/*    margin-right: 2px;*/
    width: auto;
    border-radius: 3px;
    align-self: center;
}

.leftnav li a {
    display: block;
    min-width: 120px;
    height: 25px;
    text-align: center;
    line-height: 25px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #fff;
    /*background: #2f3036 #49b2f2;*/
    background: #3a5fcd;
    text-decoration: none;
    border-radius: 3px;
}

/* Hover state for top level links */
.leftnav li:hover a{
    /*background: #19c589;*/
    background: #20b2aa;
}

/* Prevent text wrapping on dropdown links */
.leftnav li lu li a {
    width: auto;
    min-width: 100px;
    padding: 0 10px;
}
/* Display the dropdown on hover */
.leftnav ul li a:hover + .hidden, .hidden:hover {
    display: block;
}

/* hover state for dropdown links */
.leftnav li:hover ul li a:hover {
    background: #19c589;
    color: #fff;
}

/* Hide dropdown links until they are selected*/ 
/*.leftnav ul li ul li {
    display: none;
}*/

/* Style for dropdown links */
.leftnav li:hover ul li a {
    /*background: #f3f3f3;*/
    color: #2f3036;
    height: 20px;
    line-height: 20px;
    font-size: small;
    padding-top: 2px;
}

.hidden {
    display: none;
}

/* Make dropdown links vertical */
.navmenu li ul li {
    display: block;
    float: none;
}

/* Hide checkbox */
.leftnav input[type=checkbox] {
    display: none;
}

/* Show menu when invisible checkbox is checked */
.leftnav input[type=checkbox]:checked ~ #menu {
    display: block;
}

#dropmenu{
    font-size: small;
}

.show-menu {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-decoration: none;
    color: #fff;
    background: #19c589;
    text-align: center;
    padding: 10px 0;
    display: none;
}

/* Display the dropdown on hover */
.leftnav ul li a:hover + .hidden, .hidden:hover {
    display: block;
}

.content{
    display: grid;
    grid-template-columns: repeat(3,3fr);
    /*grid-template-columns: minmax(200px, 50px) 1fr 1fr 1fr;*/
/*    grid-template-areas: 
        "article article article"
        "article article article"
        "article8 article8 article8"
        "article7 article7 article7"
        "footer footer footer";*/
    grid-gap: 0.5em;
    padding-top: 0px;
}

.content > div{
    background: #eee;
    padding: 1em;
}

.content > div:nth-child(odd){
    background: silver;
}

.content1{
    display: grid;
    /*grid-template-columns: repeat(4,auto);*/
    grid-template-columns: minmax(4, auto);
    grid-template-areas:
        "heading heading heading heading"
        "box1 box2 box3 box4"
        "footer footer footer footer";
    grid-gap: 0.5em;
    padding-top: 1px;
}

.content1 > div{
    background: #eee;
    padding: 1em;
}

.content1 > div:nth-child(odd){
    background: silver;
    padding: 1em;
}

#heading1_1{
    /* heading for content1 */
    display: grid;
    grid-area: heading;
    font-size: 26px;
    text-align: center;
    padding: 5px;
}

#footer1_1{
    /*display: grid;*/
    grid-area: footer;
    font-size: 26px;
    text-align: center;
    padding: 5px;    
}

.box1_1{
    /* only box one */
    display: grid;
    grid-area: box1;
}

.box1_2{
    /* only box two */
    display: grid;
    grid-area: box2;
}

.box1_3{
    /* only box three */
    display: grid;
    grid-area: box3;
}

.box1_4{
    /* only box three */
    display: grid;
    grid-area: box4;
}

.box1_23{
    /* only box two and three */
    display: grid;
    grid-area: box2 box3;
    
}

/*#box1{
    display: grid;
    grid-area: article11;
    background: #eee;
}

#box2{
    display: grid;
    grid-area: article12;
    background: silver;
}*/

#box71{
    display: grid;
    background: #eee;
    grid-area: article7;
    text-align: center;
    grid-gap: 0.5em;
}

#box81{
    display: grid;
    background: #eee;
    grid-area: article8;
    text-align: center;
    grid-gap: 0.5em;
}

.insideBox{
    /*background: #2980b9;*/
    display: grid;
    grid-template-colmns: 1fr;
    grid-template-areas: 
        "insideB1"
        "insideB2"
        "insideB3";
    /*grid-template-areas: "insideB1 insideB2 insideB3";*/
    /*width: 30%;*/
    /*text-align: left;*/
    grid-gap: 0.2em;
    /*font-size: 80%;*/
}

.insideBox1{
    background: #2980b9;
    display: grid;
    grid-template-colmns: 1fr;
    grid-template-areas: "insideB1a";
    /*width: 30%;*/
    /*text-align: left;*/
    grid-gap: 0.5em;
}

.inbox1{
    grid-area: insideB1;
    text-align: left;
    padding: 0.2em;
    background: #eee;
    /*box-shadow: 0 9px 18px 0 #333333, 0 8px 24px;*/
    box-shadow: 5px 10px 20px 10px #ccc;
}

.inbox2{
    grid-area: insideB2;
    text-align: left;
    background: silver;
    padding: 0.2em;
    font-size: 100%;
}

.inbox3{
    grid-area: insideB3;
    text-align: left;
    padding: 0.2em;
    background: #eee;
}

.content_topx{
    display: grid;
/*    background: #19c589;*/
    grid-template-areas: 
        "lsidebar tourhead tourhead";
    padding-top: 0px;
}

.box1x{
    display: grid;
    background: green;
    grid-column: tourhead;
}

.box2x{
    display: grid;
    background: green;
    grid-column: tourhead;
}

.boxheading {
    font-size: 26px;
    font-weight: bold;
    color: blue;
    text-shadow: 7px 7px 4px #888888;
    /*padding-bottom: 20px;*/
}

.smallerfont{
    font-size: 90%;
}

.headingfont4{
    font-size: 120%;
    background-color: #27408b;
}

.infotext{
    font-size: small;
    color: whitesmoke;
}

.footer{
    /*display: grid;*/
    /*grid-template-columns: 1,1fr;*/
    margin-top: 10px;
    padding-top: 10px;
    background-color: silver;
    padding-left: 20px;
}

.maincontent {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    /*grid-template-columns: minmax(200px, 50px) 1fr 1fr;*/
    grid-template-areas:
        "heading heading heading heading heading"
        "article article article article article"
        /*"article article article article article"*/
        "lastline lastline lastline lastline lastline"
        "footer footer footer footer footer";
    grid-gap: 1em;
}

#entryForm {
    display: grid;
    grid-area: article;    
}

#form_container_list {
	/*background:#fff;*/
	background-color: lightgrey;
	margin:0 auto;
	text-align: left;
	width: auto;
        /*width: 100%;*/
}

.article_table {
    display: grid;
    /*grid-template-columns: repeat(4,1fr);*/
    grid-template-columns: minmax(200px, 50px) 3fr;
    grid-area:article article article;
    grid-gap: 1em;     
}

.article1{
    display: grid;
    grid-area: article;
    position: relative;
}

.article2{
    display: grid;
    grid-area: article;
    grid-column: span 4;
}

.article3{
    display: grid;
    grid-area: article;
    grid-column: span 2;
    color: whitesmoke;
}

#box64{
    display: grid;
    grid-area: lastline 2/3;
    text-align: center;
    grid-gap: 0.5em;
}

.box64{
    
}

.regContent {
    /* grid for registration */
    display: grid;
    grid-template-columns: 1fr 1fr;    
    grid-template-rows: 50px;
    grid-template-areas:
        "heading heading"
        "article notes";
    grid-gap: 1em;
}

.regSubheading {
    grid-area: heading;
    /*grid-column: span 2;*/
    height: 50px;
    color: whitesmoke;
    text-shadow: 10px 10px 5px #75998D;
    /*background-color: silver;*/
    padding: 5px;
}

.regSubContent {
    grid-area: article;
    -webkit-border-radius: 38;
    -moz-border-radius: 38;
    border-radius: 6px;
/*    grid-column: span2;*/
    background-color: silver;
    padding: 10px;
}

.regSubContentNote {
    display: flex;
    grid-area: notes;
    -webkit-border-radius: 38;
    -moz-border-radius: 38;
    border-radius: 6px;
/*    grid-column: span2;*/
    background-color: whitesmoke;
    padding: 10px;    
    justify-items: center;
    align-items: center;
}

.clubmoto{
    font-size: 30%;
}

table {
    
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
    width: auto;
}

th, td {
    border: 2px solid gray;
    /*overflow: hidden;*/
    width: 300px;
}

.table_nobrd {
    
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border: none;
    width: auto;
}

.table_nobrd > th,td {
    /*overflow: hidden;*/
    border: none;
    width: auto;
}

.heading1 {
    grid-area: lsheading;
    grid-column-start: 1;
    grid-column-end: 2;
/*    background-color: silver;*/
}

.heading2 {
    grid-area: heading;
/*    grid-column-start: 1;
    grid-column-end: -1;*/
    
}

#heading2 {
    font-size: 45px;
    color: #27408b;
    background: silver;
    padding-left: 10px;
    /*color: whitesmoke;*/
    color: #27408b;
    font-family: "Times New Roman", Georgia, Serif;
    text-shadow: 0 1px 0 #ccc,
               0  2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

/* button style */

.btn_normal{
    background: #3498db;
    background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
    background-image: -moz-linear-gradient(top, #3498db, #2980b9);
    background-image: -ms-linear-gradient(top, #3498db, #2980b9);
    background-image: -o-linear-gradient(top, #3498db, #2980b9);
    background-image: linear-gradient(to bottom, #3498db, #2980b9);
    -webkit-border-radius: 38;
    -moz-border-radius: 38;
    border-radius: 6px;
    font-family: Arial;
    color: #ffffff;
    font-size: 14px;
    padding: 5px 20px 5px 20px;
    border: solid #1f628d 2px;
    text-decoration: none;    
}

.btn_normal:hover{
    background: #abdfff;
    background-image: -webkit-linear-gradient(top, #abdfff, #1272b3);
    background-image: -moz-linear-gradient(top, #abdfff, #1272b3);
    background-image: -ms-linear-gradient(top, #abdfff, #1272b3);
    background-image: -o-linear-gradient(top, #abdfff, #1272b3);
    background-image: linear-gradient(to bottom, #abdfff, #1272b3);
    text-decoration: none;
}

.error_content{
    grid-area: article;
    background-color: lightcoral;
    margin:0 auto;
    text-align:left;
    /*width:640px;*/
    width: 650px;
    padding: 5px 10px 10px 10px;
}

.error_message{
    font-size: 18px;
}

#errorMsg{
    color: red;
    font-weight: bold;
}

.msg_details{
    grid-area: article;
    background-color: lightblue;
    margin:0 auto;
    text-align:left;
    /*width:640px;*/
    /*width: 400px;*/
    padding: 5px 10px 10px 10px;
}

.highlighttxt {
    background-color: #FFFF00;
    text-align: center;
    padding: 5px;
}

.highlighttxtgr {
    background-color: #3a5fcd; /* #b9b9b9;*/
    padding: 2px;
    color: whitesmoke;
    font-size: 18px;
    font-weight: 600;
}

.highlighttxtbl {
    background-color: #3a5fcd; /*#b9b9b9;*/
    padding: 5px;
    color: whitesmoke;
    font-size: 18px;
    font-weight: 600;
}

@keyframes textAnimation { 
    0% { 
        background-position: 0% 100%;
    }
    25% {
        background-position: 75% 25%;
    }
    50% {
        background-position: 100% 0%;
    }
    75% {
        background-position: 25% 75%;
    }
    100% { 
        background-position: 0% 100%;
    }
}

.raisedbox{
    background-color: grey;
    padding: 10px;
    width: 50%;
    /*height: 100px;*/
    border: 1px solid lightgrey;
    box-shadow: -1px 1px lightgrey,
        -2px 2px lightgrey,
        -3px 3px lightgrey,
        -4px 4px lightgrey,
        -5px 5px lightgrey;
    margin: 50px auto;
}

#raisedbox1 {
    padding: 10px;
    width: 400px;
    height: 200px;
    background-color: silver;
    border: 1px solid red;
    box-shadow: -1px 1px red,
        -2px 2px red,
        -3px 3px red,
        -4px 4px red,
        -5px 5px red;
    margin: 50px auto;
}

.raisedbox2{
    /*this is for the login page*/
    background-color: darkblue;
    padding: 30px;
    width: 30%;
    /*height: 100px;*/
    border: 1px solid lightgrey;
    box-shadow: -1px 1px lightgrey,
        -2px 2px lightgrey,
        -3px 3px lightgrey,
        -4px 4px lightgrey,
        -5px 5px lightgrey;
    margin: 40px auto;
}

.raisedbox3{
    background-color: grey;    
    padding: 5px 10px;
    /*width: auto;*/
    /*height: 100px;*/
    border: 1px solid #00f;
    box-shadow: -1px 1px #00f,
        -2px 2px #00f,
        -3px 3px #00f,
        -4px 4px #00f,
        -5px 5px #00f;
    margin: 10px auto;
}

.raisedbox4{
    /*background-color: gray;*/
    padding: 5px 10px;
    /*width: auto;*/
    /*height: 100px;*/
    border: 1px solid #00f;
    box-shadow: -1px 1px #00f,
        -2px 2px #00f,
        -3px 3px #00f,
        -4px 4px #00f,
        -5px 5px #00f;
    margin: 10px auto;
}

.raisedbox5{
    background-color: #a1cbf9;
    padding: 0px 10px;
    /*width: auto;*/
    /*height: 100px;*/
    border: 1px solid #00f;
/*    box-shadow: -1px 1px #00f,
        -2px 2px #00f,
        -3px 3px #00f,
        -4px 4px #00f,
        -5px 5px #00f;*/
    /*box-shadow: 0 9px 18px 0 #333333, 0 8px 24px;*/
    box-shadow: 5px 10px 20px 5px #3333;
    margin: 10px auto;
}

.raisedbox6{
    background-color: lightsteelblue;
    padding: 5px;
    width: 70%;
    /*height: 100px;*/
    border: 1px solid lightcoral;
/*    box-shadow: -1px 1px lightgrey,
        -2px 2px lightcoral,
        -3px 3px lightcoral,
        -4px 4px lightcoral,
        -5px 5px lightcoral;*/
    box-shadow: 0 9px 18px 0 #333333, 0 8px 24px;
    margin: 20px auto;
    text-align: center;
}

/* Popup container - can be anything you want */
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* The actual popup */
.popup .popuptext {
    visibility: hidden;
    width: 300px;
    background-color: #19c589;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 2px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 10%;
    margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #19c589 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}

.longlogo{
    padding: 5px 5px 1px 5px;
    width: 80%;
    hight: 5%;
}

.biglogo2{
    padding: 10px 10px 1px 10px;
    width: 300px;
    height: 300px;
}

#cf1 {
    position: relative;
    margin: 0px 0px 0px 20%;
}

#cf1 > img {
    /*margin: 0px 50px 50px 0px;*/
/*    width: 75px;
    height: 70px;*/
    
    position: absolute;
/*    top: 0px; */
    /*right: 0px;*/
    color: transparent;
    opacity: 0;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 20s linear infinite 0s;
    -moz-animation: imageAnimation 20s linear infinite 0s;
    -o-animation: imageAnimation 20s linear infinite 0s;
    -ms-animation: imageAnimation 20s linear infinite 0s;
    animation: imageAnimation 20s linear infinite 0s; 
}

#cf1 > img:nth-child(2)  { 
    /*background-image: url(../images/2.jpg);*/
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}
#cf1 > img:nth-child(3) { 
    /*background-image: url(../images/3.jpg);*/
    -webkit-animation-delay: 14s;
    -moz-animation-delay: 14s;
    -o-animation-delay: 14s;
    -ms-animation-delay: 14s;
    animation-delay: 14s; 
}
/*#crossfade > img:nth-child(4) { 
    background-image: url(../images/4.jpg);
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}
#crossfade > img:nth-child(5) { 
    background-image: url(../images/5.jpg);
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s; 
}*/

#cf2 {
    position: relative;
    margin: 0px 0px 0px 20%;
}

#cf2 > img {
    /*margin: 0px 50px 50px 0px;*/
/*    width: 75px;
    height: 70px;*/
    
    position: absolute;
/*    top: 0px; */
    /*right: 0px;*/
    color: transparent;
    opacity: 0;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 30s linear infinite 0s;
    -moz-animation: imageAnimation 30s linear infinite 0s;
    -o-animation: imageAnimation 30s linear infinite 0s;
    -ms-animation: imageAnimation 30s linear infinite 0s;
    animation: imageAnimation 30s linear infinite 0s; 
}

#cf2 > img:nth-child(2)  { 
    /*background-image: url(../images/2.jpg);*/
    -webkit-animation-delay: 20s;
    -moz-animation-delay: 20s;
    -o-animation-delay: 20s;
    -ms-animation-delay: 20s;
    animation-delay: 20s; 
}
/*#cf2 > img:nth-child(3) { 
    background-image: url(../images/3.jpg);
    -webkit-animation-delay: 20s;
    -moz-animation-delay: 20s;
    -o-animation-delay: 20s;
    -ms-animation-delay: 20s;
    animation-delay: 20s; 
}*/

@-webkit-keyframes imageAnimation { 
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    40% { opacity: 0 }
    100% { opacity: 1 }
}

@-moz-keyframes imageAnimation { 
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    40% { opacity: 0 }
    100% { opacity: 0 }
}

@-o-keyframes imageAnimation { 
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    40% { opacity: 0 }
    100% { opacity: 0 }
}

@-ms-keyframes imageAnimation { 
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    40% { opacity: 0 }
    100% { opacity: 0 }
}

@keyframes imageAnimation { 
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    40% { opacity: 0 }
    100% { opacity: 0 }
}

.tournamentBackGround{
    background-image: url('/images/logos/ChessHeroes2.png');
    background-size: contain;
    background-repeat: no-repeat;
    /*opacity: 0.3;*/
}

.jhbMetroBackground{
    background-image: url('/images/logos/jmc_Small_Logo2.png');
    background-size: contain;
    background-repeat: no-repeat;
    /*opacity: 0.7;*/    
}